Руководство для вашего первого проекта мобильного дизайна

Если вы начинающий или младший дизайнер, и вы собираетесь создать свой первый мобильный проект, вот несколько советов о том, что следует учитывать при разработке вашего мобильного дизайна для обеих платформ.

Вспомните на секунду приложения на вашем первом смартфоне еще в 2009 году. Скейломорфные значки, кнопки с градиентом и фоновые текстуры? Помните темные фоны и яркую типографику на телефонах Android?

Я уверен, что вы ощущаете разницу между дизайном мобильных приложений в 2009 и 2017 годах. Но можете ли вы действительно указать огромную разницу между UI дизайном iOS и Android сегодня? Хотя в настоящее время мобильные интерфейсы понятны и удобны для пользователя, общий подход к дизайну сделал все стили мобильных платформ очень похожими.

Общая цель кроссплатформенного мобильного дизайна заключается в обеспечении согласованности, ориентированной на платформу. Но единственный способ по-настоящему обеспечить согласованность стилей и компоновки для различных версий платформы, производителей, размеров экранов и разрешений - это использование своих элементов UI.

Итак, вот краткое сравнение платформ, которое поможет вам решить, использовать готовые решения или разрабатывать свой собственный дизайн.

Философия стиля

Материальный дизайн Google больше ориентирован на настраиваемые и гибкие интерфейсы, а iOS всегда была более ориентирована на интуитивно понятные интерфейсы. В их основах философии вы легко найдёте основные стили и характеристики UI.

Глубина экрана

Чувство глубины имеет решающее значение при использовании приложения. Пользователю необходимо сосредоточиться на элементах экрана, таких как кнопки, поля ввода и панели навигации, которые важны для выполнения задач.

Материальный дизайн использует разные стили теней для слоев пользовательского интерфейса. Значение тени зависит от оси Z, которая отображает важность конкретного элемента пользовательского интерфейса. В iOS используются градиенты, размытость фона и полупрозрачные цветные наложения для достижения того же эффекта.

Цвета

Палитра материального дизайна ближе к модели CMYK, чем к RGB. Он включает в себя различные темные и светлые оттенки основного цвета. Основной цвет используется для акцента деталей UI, таких как действия, названия предметов, значки и т. д. Оттенки основного цвета используются для панелей, навигации и других элементов.

А палитра iOS простая и яркая. Общие элементы пользовательского интерфейса, такие как элементы списка, полосы, фоны и т. д., в основном представлены в оттенках серого, черного или белого цвета, а яркие цвета используются для значков, кнопок, ссылок и других акцентов.

Типография

Существует различие в типографической иерархии iOS и Android. Резкий контраст в размерах шрифта делает контент более ярким и игривым на обеих платформах. Обычно на экране Android контраст достигается за счет использования больших размеров и более тонких шрифтов. В iOS 11 контраст больше достигается с помощью жирных заголовков и крошечных надписей.

Важно иметь в виду, что в материальном дизайне заголовки и текст в основном выровнены по левому краю экрана, особенно когда речь заходит об элементах навигации. При проектировании для iOS вы должны выстраивать кнопки действий и надписи по центру, в то время как заголовки, подписи и основной текст могут быть выровнены по левому краю.

Стиль иконок

Материальный дизайн поощряет использование плоских значков, в то время как дизайн iOS предпочитает иконки из тонких линий размером 1 или 2 пикселя. Это небольшая, но важная деталь стиля, которую следует учитывать при разработке приложения для конкретной мобильной платформы. Если ваше приложение имеет определенный стиль значков, вам необязательно следовать этому правилу. Глядя на новый экран блокировки в iOS 11, кажется, что они уходят от использования исключительно контурных значков.

Границы

Простая 1-пиксельная линия границы может отлично смотреться на устройствах с высоким разрешением Android, но не забывайте, что дизайн Android должен быть эффективен при максимальной плотности экрана.

В этих ситуациях разработчик должен переосмыслить элемент дизайна и учитывать разные случаи в коде приложения.

Брендинг

Использование цветов бренда и их оттенков более доминирует в материальном дизайне, в то время как рекомендации iOS предлагают более утончённый подход к брендингу. В iOS он должен отображаться только в элементах пользовательского интерфейса, таких как значки, графические изображения, кнопки или ссылки.

Значки приложений

Новые значки приложений для Android являются адаптивными, что означает, что они предназначены для соответствия различным формам масок на разных устройствах (круг, закругленный прямоугольник и т. д.). Значки приложений iOS по-прежнему ограничены закруглённой формой прямоугольника.

Анимация и переходы

Анимация UI должна использоваться только тогда, когда это необходимо для пользователя, при этом он не должен чувствовать себя раздражённым.

Стиль анимации в материальном дизайне является результатом философии бумажных слоёв, а стиль движения содержит множество эффектов пульсации и резких расширений формы, в то время как анимация iOS более утончённая и естественная.

iOS упрощает переходы. Независимо от того, происходит ли затухание или выпадает меню, вы можете быть уверены, что это будет выглядеть хорошо и согласованно на всех устройствах iOS. На Android разные фреймворки дают вам гораздо больше свободы в разработке переходов и анимаций, но проблема в том, что вы не знаете, как это будет работать на разных устройствах.

Навигация

Четкая и естественная навигация гарантирует здоровую информационную архитектуру.

Помимо различий в стилях, важно понять основные характеристики навигационных систем.

Контейнер

Материальный дизайн обеспечивает множество компонентов для скрытия контента, что облегчает пользователю поиск наиболее важных функций. Например, вы всегда можете использовать контейнер, если у вас много контента. Отобразите ключевые функции вне контейнера и спрячьте менее важный материал в контейнер.

Есть много приложений для iOS, которые используют контейнер. Тем не менее, для него в iOS нет руководства по дизайну, поскольку рекомендуемым решением для навигации является встроенная панель вкладок.

Панель вкладок

В Android нижняя панель в приложении видна только при навигации на главном экране, поэтому не делайте ваше приложение слишком глубоким.

Философия дизайна iOS всегда ставит контент на первое место и редко скрывает что-либо. Собственная панель вкладок позволяет пользователю легко переключаться между основным контентом и побуждает пользователя исследовать приложение. Панель вкладок всегда присутствует, и пользователю легко переключаться между более высокими и более глубокими уровнями навигации.

Кнопка назад

В Android приложениях есть кнопка «вверх» (встроенная в приложение) и кнопка «Назад» (собственный компонент). Кнопка «Вверх» позволяет вам вернуться в корень навигации. Кнопка «Назад» обычно возвращает вас на тот же экран, что и кнопка «вверх», если вы ранее не переключались с одного приложения на другое. В этом случае кнопка «Назад» вернет вас в предыдущее приложение.

В приложении iOS, хотя вы и можете переключаться между вкладками на панели вкладок, каждый экран нижнего уровня навигации должен иметь кнопку «Назад», потому что это единственный очевидный способ, благодаря которому вы можете перейти к корню навигации.

Действия

Материальный дизайн также позволяет скрывать действия. Вы можете использовать раскрывающиеся меню, чтобы скрыть действия элемента списка, или вы можете использовать кнопку плавающего действия, чтобы скрыть группу важных или связанных действий.

iOS использует другой подход. По возможности все действия должны быть видны. Если существует слишком много связанных действий, то они могут быть найдены под элементом списка, открываться путем прокрутки или помещаться за опцией «больше», которая показывает список, содержащий все действия.

Список элементов

Списки выглядят довольно схожими на обеих платформах. Единственное важное отличие состоит в том, что элемент списка iOS, который ведет пользователя к более глубокому уровню навигации, должен содержать стрелку. Это небольшая, но важная деталь, влияющая на поведение пользователя.

Карточки

Если вы разрабатываете компонент со всеми видами данных и действий, используйте карточки. В основном они представляют собой предварительный просмотр данных на более глубоком уровне навигации. Карточки в материальном дизайне больше похожи на физические карточки, с тенями и закругленными углами. Карточки в iOS являются в основном элементами списка таблиц, они имеют полную ширину и часто разделены границей шириной 1 пиксель.

Хотя у каждой платформы свой характерный внешний вид, у мобильных дизайнеров есть много пространства для творчества в рамках этих ограничений. Рекомендуется, когда это возможно, использовать общие шаблоны, но если дизайнер решает нарушить правила, это будет хороший ход, только если за этим будут веские аргументы.

Помните, что нет необходимости менять общие компоненты. Если вы хотите, чтобы пользователь изучил приложение за короткий промежуток времени, всегда лучше следовать логике платформы и общим шаблонам.