- Гайдлайны мобильных приложений
- Apple
- Windows Phone
- Apple
- Windows Phone
- Что такое гайдлайны мобильных приложений и зачем они нужны?
- Что это и зачем это вообще нужно?
- Google Material Design System
- Apple Human Interface Guidelines
- Почему нужно использовать гайды?
- Полезные ссылки
- A Human Interface Guideline for Android Developers
Гайдлайны мобильных приложений
Эта статья для тех, кто собирается заняться мобильной разработкой. Профессионалы разработки все это уже знают.
Apple
Начнём, пожалуй, с самого проработанного руководства от Apple. На первый взгляд всё выглядит несколько скупо, на каждый инструмент или раздел приходится 2-3 картинки и считанное количество абзацев: гайдлайн очень хорошо проработан с точки зрения подачи информации на единицу текста. Усвоить полностью все рекомендации можно буквально за несколько часов.
Из минусов стоит отметить отсутствие русского языка, но есть любительский перевод. Почитать: medium.com/ios-guidelines-in-russian.
Обратите внимание на пошаговое руководство по разработке приложений для iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Руководство поможет человеку, даже мало знакомому с разработкой приложений, позакомиться с этапами разработки. Для этого сначала необходимо скачать главный инструмент разработчика Xcode, а после с пошаговыми инструкциями создать свой первый мини-шедевр.
Совместив гайдлайн с руководством для разработчика, можно постигнуть начальное понимание разработки приложение для iOS. Для всего остального, в том числе разжёвывания прочитанного, есть профессия — «Разработчик iOS».
Материальный дизайн от Android — это словосочетание часто встречается на просторах интернета, но, к сожалению, многие понимают под ним просто набор графических надстроек Google, не более. На самом деле это достаточно строгая рекомендация, которая призвана сделать ваше приложение понятным и простым для освоения пользователя.
Руководство простирается от общего введения до использования конкретных инструментов. Основы и первые шаги разработчика сопровождаются картинками и видео: сразу видно, что над этим мануалом в Google работали достаточно усердно.
С точки зрения полезности представленного контента также можно высказаться только в положительном ключе: каждое свойство инструмента, каждое действие снабжено текстовым и графическим описанием, также ссылками на руководство по разработке. Поэтому даже без наличия конкретных указаний к действию, создать серьёзное приложение Material Design сможет и новичок, и готовый специалист.
Минус всё тот же: русского языка найти не удалось. Хорошая обзорная статья на русском от Redmadrobot: «Material Design: на Луну и обратно».
Windows Phone
После внимательного изучения и работы с подобными руководствами от Google и Apple, не покидает ощущение некоторой «топорности» гайдлайна Windows Phone. Кажется, что создателям очень не хотелось придерживаться корпоративной политики оформления подобной документации, но начальство настояло.
Главный плюс гайдлайна — русский язык. Информация изложена подробно, но недостаточно удобно структурирована, многовато «воды» для подобного руководства. Однако, если рассматривать гайдлайн не как учебник, который надо сначала прочитать, а потом приступать к разработке, а как карманный справочник — тогда можно признать, что подобное излишество полезно.
Все производители популярных мобильных платформ ответственно и с умом подошли к разработке главного дизайнерского руководства. Работать с каждым из них удобно, приятно, а главное полезно. Дело за малым — научиться создавать приложения, тогда гайдлайны точно пригодятся.
Что думаете о гайдлайнах? Рассказывайте.
Обучение по гайдлайнам: факультет «Android-разработчик».
Guidelines – набор рекомендаций от создателей платформы, благодаря которым приложения сторонних разработчиков выглядят единообразно. На сегодняшний день все популярные платформы имеют в открытом доступе свои гайдлайны.
Эта статья для тех, кто собирается заняться мобильной разработкой. Профессионалы разработки все это уже знают.
Apple
Начнём, пожалуй, с самого проработанного руководства от Apple. На первый взгляд всё выглядит несколько скупо, на каждый инструмент или раздел приходится 2-3 картинки и считанное количество абзацев: гайдлайн очень хорошо проработан с точки зрения подачи информации на единицу текста. Усвоить полностью все рекомендации можно буквально за несколько часов.
Из минусов стоит отметить отсутствие русского языка, но есть любительский перевод. Почитать: medium.com/ios-guidelines-in-russian.
Обратите внимание на пошаговое руководство по разработке приложений для iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Руководство поможет человеку, даже мало знакомому с разработкой приложений, позакомиться с этапами разработки. Для этого сначала необходимо скачать главный инструмент разработчика Xcode, а после с пошаговыми инструкциями создать свой первый мини-шедевр.
Совместив гайдлайн с руководством для разработчика, можно постигнуть начальное понимание разработки приложение для iOS. Для всего остального, в том числе разжёвывания прочитанного, есть профессия — «Разработчик iOS».
Материальный дизайн от Android — это словосочетание часто встречается на просторах интернета, но, к сожалению, многие понимают под ним просто набор графических надстроек Google, не более. На самом деле это достаточно строгая рекомендация, которая призвана сделать ваше приложение понятным и простым для освоения пользователя.
Руководство простирается от общего введения до использования конкретных инструментов. Основы и первые шаги разработчика сопровождаются картинками и видео: сразу видно, что над этим мануалом в Google работали достаточно усердно.
С точки зрения полезности представленного контента также можно высказаться только в положительном ключе: каждое свойство инструмента, каждое действие снабжено текстовым и графическим описанием, также ссылками на руководство по разработке. Поэтому даже без наличия конкретных указаний к действию, создать серьёзное приложение Material Design сможет и новичок, и готовый специалист.
Минус всё тот же: русского языка найти не удалось. Хорошая обзорная статья на русском от Redmadrobot: «Material Design: на Луну и обратно».
Windows Phone
После внимательного изучения и работы с подобными руководствами от Google и Apple, не покидает ощущение некоторой «топорности» гайдлайна Windows Phone. Кажется, что создателям очень не хотелось придерживаться корпоративной политики оформления подобной документации, но начальство настояло.
Главный плюс гайдлайна — русский язык. Информация изложена подробно, но недостаточно удобно структурирована, многовато «воды» для подобного руководства. Однако, если рассматривать гайдлайн не как учебник, который надо сначала прочитать, а потом приступать к разработке, а как карманный справочник — тогда можно признать, что подобное излишество полезно.
Все производители популярных мобильных платформ ответственно и с умом подошли к разработке главного дизайнерского руководства. Работать с каждым из них удобно, приятно, а главное полезно. Дело за малым — научиться создавать приложения, тогда гайдлайны точно пригодятся.
Что думаете о гайдлайнах? Рассказывайте.
Обучение по гайдлайнам: факультет «Android-разработчик».
Источник
Что такое гайдлайны мобильных приложений и зачем они нужны?
Jun 14, 2018 · 4 min read
Когда речь заходит о дизайне мобильного приложения, первое, что на ум приходит любому дизайнеру, понимающего специфику — это гайдлайны.
Что это и зачем это вообще нужно?
Основная задача мобильного приложения состоит в том, чтобы помочь решить проблему пользователя как можно быстрее. Здесь речь идет о секундах, а иногда и о долях секунд.
Представьте, если бы каждое мобильное приложение имело б ы свой уникальный дизайн и навигацию. Тогда пользователю каждый раз приходилось бы тратить время на то, чтобы разобраться в интерфейсе, понять, где кнопка, которую можно нажать, а где просто текст в рамке. Тогда бы на решение проблемы уходило в разы больше времени и счет шел бы уже не в секундах, а в минутах. Это полностью идет вразрез принципам мобильного приложения.
Именно для ускорения процесса решения проблем пользователя в приложении и были придуманы гайдлайны.
Гайдлайны (Guidelines) — набор рекомендаций, правил, принципов от создателей платформы, операционной системы, благодаря которым приложения под эти платформы и ОС от разных разработчиков выглядят единообразно. Гайдлайны мобильных приложений описывают принципы навигации и взаимодействия, элементы интерфейса и их стиль, используемую типографику и иконографию, цветовые палитры и многое другое.
Кроме того, гайдлайны способны сократить время и стоимость разработки мобильного приложения, так как всё то, что описано в гайдах, как правило, уже реализовано в виде готового элемента в коде и разработчику не нужно изобретать велосипед с нуля.
На данный момент существуют два гайда под две небезызвестные платформы:
Google Material Design System
Google Material Design был представлен вместе с Android 5.0 в июне 2014 года, а с мая этого года стал полноценной дизайн-системой и уже может быть использован и на других платформах (например, смарт-тв, десктоп- или даже веб-приложение, iOS-устройство). Изначально был направлен только на ОС от Google: Android Wear, Android TV, Android Auto.
Основными идеями Material Design являются принцип глубины интерфейса, его интерактивность (отзывчивость) и движение (анимация изменения состояния).
Здесь каждый элемент навигации находится на определенной высоте относительно другого элемента и реагирует на нажатия пользователя. Например, боковое меню находится над панелью навигации, а карточка из списка под ней. Кнопка как бы опускается вниз при нажатии на неё, меняет за собой отбрасываемую тень и заливается цветом с эффектом чернил.
Material Design в качестве прообраза для всей системы использует бумагу и чернила на ней. Любой интерфейс построенный по канонам Material можно представить в виде отдельных листков бумаги, которые наслаиваются друг на друге и отбрасывают тень.
В Material Design System есть все. Здесь есть все системные иконки, UI-киты, шрифты, цветовые палитры, и даже плагин для Sketch для генерации кастомного UI. И все это можно скачать прям тут. Здесь вы найдете все размеры для каждого даже самого незначительного элемента интерфейса. Найдете кучу примеров, как делать можно, а как делать нельзя. Увидите кучу анимированных примеров. Найдете инфу про типографику, где и какой шрифт нужно использовать, с каким отступом, интерлиньяжем и кеглем. Везде по всему гайду есть ссылки на нужные разделы и если вы не знаете чего-то, то об этом сразу будет внизу сноска.
Словом, Google сделали самый лучший гайд (а сейчас уже дизайн-систему) в истории мобильного мира.
Apple Human Interface Guidelines
Apple Human Interface Guidelines был представлен вместе с iOS 7 июне 2013 и с тех пор расширился для использования с другими ОС от Apple (watchOS, macOS, tvOS).
Основной идеей Human Interface Guidelines является простота и «воздушность» интерфейса. Во главу угла возводится контент, а интерфейс уходит на второй план. Приветствуется интерактивность (отзывчивость) и анимация изменения состояния элементов интерфейса. Размытие окон на нижнем уровне, градиентные заливки, болдовая типографика в лучших традициях швейцарского стиля.
В отличие от Material Design System в Human Interface Guidelines нет четких правил и конкретных спецификаций. Например, нельзя в гайдах от Apple посмотреть размер кнопок. Некоторые элементы интерфейса просто в гайде отсутствуют, хотя используются в официальных приложениях от Apple. Здесь в отличие от Google, Apple как бы разрешает дизайнеру «поиграть со шрифтами» и дает больше свободы для кастомизации в рамках платформы.
В разделе загрузок также есть UI-киты для всех популярных инструментов и шрифты. Иконки придется искать свои, по какой-то причине Apple не дает возможности скачать системные иконки.
В общем и целом гайд iOS гораздо более беднее, чем гайд для Android. Поэтому я рекомендую использовать сторонние интерпретации. Например, вот здесь можно найти хорошую интерпретацию.
Почему нужно использовать гайды?
Подводя итог по гайдлайнам. Использовать их при дизайне мобильного приложения просто необходимо по четырем причинам:
- Ускоряется процесс дизайна
- Ускоряется разработка
- Удешевляется разработка
- Пользователь получает быстрый и понятный интерфейс
Полезные ссылки
- material.io — официальные гайды Material Design от Google
- material.io/tools/theme-editor — плагин Sketch для UI кита
- materialdesignicons.com — расширенная версия Material-иконок
- uplabs.com/android — за вдохновением и идеями для Android сюда
- materialdesignkit.com/ — сторонний UI-кит для Photoshop
- developer.apple.com/ios/human-interface-guidelines — гайды Apple HIG
- ivomynttinen.com/blog/ios-design-guidelines — сторонние гайды
- iosdesignkit.io — сторонний UI-кит для Sketch и Photoshop
- uplabs.com/ios — за вдохновением и идеями для iOS сюда
- icons8.com/ios-icons — лучшая коллекция iOS-иконок
Буду рад вашим комментариям 💬 и аплодисментам 👏.
Источник
A Human Interface Guideline for Android Developers
There’s no denying that iOS apps are, on the whole, polished. This is due in large part to Apple’s Human Interface Guidelines, a document that “describes the guidelines and principles that help you design a superlative user interface and user experience for your iOS app.” There’s no ambiguity about what’s a good idea and what’s not: Apple tells you straight up what’s a good idea. The polish and sophistication of iOS apps is a benefit of the control that Apple wields, as the single purveyor, over iOS. Android apps, by comparison, often suffer from a lack of polish and sophistication in large part because there’s no single authority saying “here’s how you do it.” Add in the variety of hardware platforms running Android, and Android’s programmer-centric development mentality, and it’s little wonder that the state of Android today is often compared to the state of Linux from ten years ago: by geeks for geeks.
The folks at Mutual Mobile have made a terrific effort to help bring parity to Android apps with the release of their Android Design Guidelines.
Android is crushingly programmer heavy. In my opinion, they have not given enough consideration to asset creation or creative direction. With apple, the moment you start designing an app, you know how they want you to build it. Their design plans are so complete that you can immediately access it. I often dream that my house is an iPhone app; it has become comfortable. With Android, there is a false sense of freedom to do whatever you want. Unfortunately, when you start taking all the various screen sizes and resolutions into account, it doesn’t realistically pan out that way.
…
As a disclaimer, I am a designer, and while my knowledge of programming has increased a fraction while creating a document, it should be known that Android makes it difficult for anyone who is not a programming to decipher their rules. So with that in mind, understand that while my research has been abundant, this document should be considered a designer’s translation of Android and therefore subject to error.
While it certainly is not my place to set a standard for Google, in this document I intend to at least create a guideline for us to follow.
This looks like good stuff. If you’ve got suggestions, send ’em to Mutual Mobile, and maybe a grassroots design standard can really take off, helping the Android developers and users all over the world.
Источник
