10 лайфхаков разработки дизайна нативных мобильных приложений

Разработка дизайна мобильных приложений быстро заняла центральное место среди основных требований к скиллам современного UI-дизайнера. На Google Play и среди пользователей IOS, больше всего ценится нативность в UX и UI решениях. Если мобильное приложение разработано с использованием гайдлайнов, то App Store гораздо легче пропускает его в работу, а пользователи радуются, увидев что-то знакомое и давно любимое. Все это значит, что дизайнеру необходимо ориентироваться в общих требованиях и не забывать отслеживать обновления, которые выходят с завидной периодичностью. Только в этом случае он сможет сохранять профессионализм и оставаться востребованным на рынке труда.

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

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

Скелет экрана приложения

Скелет экрана приложения состоит из Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. Далее мы описали все эти части.

Status bar

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

Какое бы не было устройство, высота статус бара всегда составляет 20 pt. Исключением является только iPnone X, где размер строки состояния составляет 44 pt, за счет наличия «челочки».

P.S.: Совершенно не обязательно отрисовывать status bar самостоятельно. Можно обратиться к готовым GUI, которые есть в свободном доступе. Существует официальная версия от разработчиков IOS.

Navigation bar

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

Высота панели без status bar в любом устройстве (кроме iPnone X) составляет 44 pt. В IOS-версиях выше 10, панель навигации можно, при необходимости, расширить. То есть добавить дополнительную область, высотой в 52 pt, с большим заголовком строки. Не стоит забывать об отступах — в IOS они должны быть кратны восьми.

В основной части навигационной панели необходимо задавать отступ в 8 pt, а в дополнительной части с заголовком — 16 pt.

Tabbar

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

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

Высота таббара — 49 pt во всех моделях iPhone. Иконка может быть с подписью или без, но в любом случае, контент центрируется. Размер иконки — 24 pt. Нужно учитывать, что область для клика составляет 44 pt — размещать другие иконки в области клика не рекомендуется. Чтобы понять, как размещать иконки в таббаре, нужно определить их количество, разбить ширину экрана на число иконок/табов. Затем каждую иконку центрировать по ширине и высоте области таба, независимо от того, будет ли текст под иконкой.

Modals, Popovers and Alerts

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

Существуют такие виды всплывающих окон:

1) Action Sheet.

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

2) Alerts

Содержит сообщение, которое необходимо увидеть пользователю. Обычно он предлагает выбор из двух вариантов (например, «Да» или «Нет») или один вариант ответа, как подтверждение прочитанного («Ок»). Помимо этого, в алерте можно предложить заполнить один инпут — ввести свой Email/телефон. 

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

3) Edit Menu. 

Позволяет пользователю осуществить такие действия, как «Скопировать», «Вырезать», «Вставить», когда элемент выделен. Появляется, если кликнуть на выделенный объект.

4) Popover.

Такие всплывающие окна полезны, когда одно действие позволяет выбрать несколько пунктов. Например, чтобы ответить на вопрос: «В каких дизайнерских программах вы работаете?», — скорее всего, потребуется поставить не одну галочку.

Search bar

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

Видимую версию сложно не заметить. Она хорошо выделена с помощью сплошной заливки, чаще всего белого цвета. Пока пользователь не вводил текст, внутри панели отображается текст-заполнитель. Он исчезает после ввода условия поиска, а справа появляется кнопка для удаления введенного. Хорошим тоном будет подсказать пользователю, что он может вписать в поле, например: «Введите город, улицу, дом».

Picker

Пикер используется для выбора одного значения из списка. Что интересно, можно использовать сразу несколько видов списков в одном пикере. Отличный пример его применения — выбор даты рождения, где мы используем в одном окне выбор даты, месяца и года. 

Шрифты и их параметры

В случае, когда перед специалистом стоит задача: «Создать нативный дизайн приложения под IOS», — у него не будет необходимости в выборе шрифта. Разработчики платформы уже позаботились об этом — прописали в гайдлайнах, что необходимо использовать их собственный шрифт «San Francisco».

Он представлен в двух начертаниях: «SF UI Display» и «SF UI Text. Display». Первый, в основном, используется для стандартных элементов интерфейса, а «Text» — для заголовков и основного текста. Основной текст принято делать с небольшой разрядкой. 

Размеры шрифтов для основных элементов интерфейса

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

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

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

Если же точно нужно использовать два разных шрифта, есть пара ресурсов, которые помогают найти идеальные шрифтовые пары для любого случая жизни. Наиболее известный — Google Fonts, где при открытии детальной страницы шрифта, в боковой панели показывают идеальные шрифтовые пары для него. Интересный факт — на этом сайте вы можете скачать все опубликованные на нем шрифты совершенно бесплатно и с лицензией. Так что, go ahead!

Onboarding — знакомство с приложением и первое впечатление пользователя о вашей работе

Onboarding — это набор правил взаимодействия с приложением, которое дает пользователю начальное представление о продукте. Это первое впечатление — знакомство с вашим творением и шанс зацепить еще на этапе первого запуска.

Onboarding может стать как учебным пособием по работе с приложением, так и просто демонстрацией преимуществ. 

Варианты использования Onboarding

Приветствие

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

Информирование

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

Обучение

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

Персонализация

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

И еще несколько советов по созданию onboarding 

1. Никогда не вставляйте слишком много таких экранов. Достаточно будет показать три-четыре. Это не утомит человека и оставит только самые приятные эмоции от знакомства с приложением. 
2. Используйте цепляющие иллюстрации, которые будут передавать смысл информации. Важно максимально четко передать суть текста с помощью одного изображения, так как пользователи часто пропускают этап обучения, если его экран кажется скучным. Старайтесь отрисовывать или подбирать иллюстрации в трендовом стиле. В любом случае, стремитесь делать их минималистичными. 
3. Анимация — ваш друг. Хорошо, если вы просто отрисуете иллюстрацию для онбординга, которая передаст смысл всего экрана. Но это не всегда возможно. Иногда, иллюстрации недостаточно для того, чтобы, например, отобразить флоу функционала приложения, или просто повзаимодействовать с пользователем. В этих случаях картинку можно заанимировать и онбординг станет более интересным и живым. 
4. Показывайте пагинацию, чтобы человек понимал, сколько страниц еще предстоит посмотреть.
5. Не лишайте пользователя возможности пропустить онбординг, чтобы у него не появилось ощущение принуждения. А для того, чтобы его не пропускали, сделайте визуал интересным, пользуясь подсказками выше.

Основы работы с цветом, программные сложности реализации некоторых цветовых решений

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

Советы по использованию цветов при разработке IOS-приложения

1. Задействуйте выделяющиеся цвета, чтобы показать, что элемент кликабельный.
2. Ваши лучшие друзья — комплиментарные цвета.
3. Используйте ограниченное количество цветов, в идеале, два-три основных, один из которых будет отвечать за кнопки и активные элементы приложения. 
4. Не вводите пользователя в заблуждение, используя цвет, который традиционно приравнивается к какому-то действию. Красный, зеленый, синий и нейтральные оттенки нужно использовать с умом. Например, не заливайте зеленым кнопку «Удалить», а красным — «Продолжить», ведь все знают, что красный — деструктивное действие, зеленый — позитивное, а серый подразумевает неактивность. 
5. Если у компании, для которой разрабатывается приложение, есть лого и/или гайдлайн, стоит использовать имеющиеся данные, чтобы не нарушить связь с брендом. 
6. Градиенты в основных элементах приложения сильно усложняют работу программиста. Если стоит задача использовать градиент, постарайтесь сделать его максимально простым и не использовать необычные повороты — их очень сложно реализовать программно. 

Виды кнопок и нестандартные примеры их использования в дизайне приложений на IOS

Кнопки — важный и один из наиболее сложных компонентов мобильных приложений. IOS вмещает большое количество видов кнопок, но их можно разделить на несколько категорий.

Системные кнопки

Системные кнопки часто размещают на панелях навигации/инструментов, но они могут использоваться где угодно.

Несколько советов по созданию системных кнопок

1. В названиях кнопок всегда используйте глаголы, чтобы пользователь воспринимал это как призыв к действию, а не просто надпись.
2. Выделяйте кнопки цветом активного элемента. Можете даже задать более жирное начертание.
3. Название должно быть коротким. 
4. Если системная кнопка находится в теле приложения (не в навигационном баре), заголовок можно сделать заглавными буквами и не жирным.
5. Старайтесь не добавлять системным кнопкам рамку или фон.

Segmented Controls

Segmented Controls — панель, которая состоит из двух и более сегментов (вкладок). Каждая отображает свою информацию или функционал. Идея в том, чтобы при переключении вкладок контент менялся, а пользователи оставались на текущей странице.

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

При использовании панели Segmented Controls, каждый сегмент можно расценивать, как отдельную кнопку. Здесь можно добавлять кастомные иконки, настраивать скругление.

Call to Action (CTA)

Call to Action — кнопки призыва к действию. Они, зачастую занимают всю ширину экрана и могут содержать не только текст, но и иконки. 

Особенности CTA

1. Кнопку первой важности лучше залить полностью, а второстепенной — задать обводку без заливки.
2. Если кнопка неактивна до того момента, пока пользователь не выполнит действие (например, заполнит форму), ей можно задать нейтральный серый оттенок, цвет текста тоже не должен слишком выделяться.
3. Кнопки можно размещать как в середине контента, если это не основное действие экрана, так и закреплять по нижнему краю. Зачастую, так делаем во всплывающем экране или на внутренних экранах приложения.  
4. Иконки в кнопках CTA имеют стандартный размер — 24 х 24 pt.
5. Кнопкам Call to Action желательно задавать размер не меньше 44 pt. 

Иллюстрация, как wow-эффект, и области ее использования

Иллюстрации в мобильных приложениях давно в тренде. С каждым годом к ним предъявляются все более жесткие требования: больше уникальности, дружелюбия, интеграций с брендом. Дизайнеру/иллюстратору уже недостаточно черпать вдохновение в векторных человечках на фотостоках — нужно ориентироваться на тренды в стилистике и представлении информации. Ниже мы перечислили несколько трендов в иллюстрации в 2019-2020 годах.

Яркие цвета и простые формы

«Просто, но сложно», — фраза, которой можно описать новые веяния в иллюстрации. Но состоящая из простых форм работа не обязательно будет простой. Зачастую, важно использовать смелые простые формы, которые складываются в сложные комплексы с яркими цветами. Можно даже задействовать градиенты. Главное — не переборщить с простотой и помнить, что иллюстрации должны быть предельно понятными. Им необходимо цеплять и выделяться из толпы.

Причудливые и абстрактные

Сейчас все больше и больше иллюстраторов смешивают изображения, текстуры, формы и линии для создания забавных абстрактных дизайнов. Если правильно выдержать баланс, это будет выглядеть восхитительно. Не бойтесь экспериментировать! Вдохновляйтесь такими гигантами, как Google, Facebook, Slack, Asana.

Область использования иллюстраций в мобильных приложениях чрезвычайно широка

1. Onboarding.
2. Экраны «Спасибо» выглядят гораздо интереснее с иллюстрациями. Пользователи сильно умиляются, когда после завершенного действия разработчики предоставляют им такого рода вкусности.
3. Стартовые экраны шага процесса.
4. Туториалы, которые появляются уже после запуска приложения.
5. Splash — экран загрузки приложения.
6. Да и любые экраны, где это уместно.

Иконки — инструмент, которым можно задать стиль

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

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

Организация рабочего пространства в основных редакторах для разработки приложений

В наше время, когда дизайнер рисует мобильное приложение в среде Photoshop, UI-щики хватаются за голову с криками: «Каааак? Зачем?». Не удивительно, ведь этот редактор давно никто не использует при разработке мобильных приложений. 

На смену привычному фотошопу пришли векторные редакторы Figma, Sketch, XD и другие. 

Дизайнеры Artjoker всей командой по уши влюблены в Figma. Поэтому расскажем немного о разработке мобильных приложений в ее среде.

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

Для того, чтобы  упростить работу с большим количеством макетов и одинаковыми элементами, разработчики Figma подарили своим пользователям компоненты. Если какой-то элемент, например, кнопку, сделать компонентом, то все ее копии копии будут повторять поведение своего родителя. Это очень удобный и быстрый способ разом откорректировать все кнопки, изменив лишь родителя. С другой стороны, если вы задали для копии компонента какой-то текст, то при редактировании компонента, копия ребенка изменится, а текст в ней — нет. 

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

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

Но дизайнеры на этом не остановились. В среде Фигмы можно создать отдельную страницу с компонентами и сделать таким образом UI Kit, который автоматизирует работу. 

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

Все макеты, GUI, mobile, и другие элементы дизайна нужно организовывать в одном файле, но на разных страницах. Советуем сохранять старые версии страниц, так как заказчики часто просят вернуть что-то из прошлой версии. Все старые и драфтовые версии, которые могут пригодиться, рекомендуем сохранять на отдельной странице «Drafts». 

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

На первой странице можно разместить логотип компании, тогда все продукты будет довольно просто распознать по лого на странице проектов. 

P.S.: По ссылке доступна бесплатная версия UI Kit, которую разработали и успешно внедряют в проекты дизайнеры Artjoker. Все компоненты в ней грамотно настроены и являются «резиновыми»

Навигация

С навигацией в IOS разобраться довольно просто, так как нет ни бургер-меню, ни других скрытых способов перемещения по приложению. Ко всем основным страницам должен быть быстрый доступ из нижнего таббара, а элементы навигации — интуитивно понятны.

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

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

1. Navigation bar. Появляется вверху приложения и прикреплен к status bar. В зависимости от того, на какой странице мы находимся, навигационная панель будет меняться. Важно размещать на страницах первого уровня иерархии заголовок страницы, чтобы всегда было понятно где мы находимся. На внутренних страницах, помимо заголовка, необходимо добавить стрелку назад, чтобы вернуться на предыдущий экран. Стрелку можно даже подписать, чтобы шаг был еще более очевиден. На этой панели также принято размещать иконки для перемещения на другие внутренние страницы. Например, на главной странице профиля мы можем добавить в navigation bar иконку settings, чтобы был быстрый доступ к странице настроек. 
2. Tab bar. В отличии от Android-приложений, IOS никогда не прячет свою навигацию в скрытое меню. В нижний таббар выносятся основные страницы приложения — желательно, чтобы их было не больше пяти. О характеристиках самой панели и иконок мы рассказывали ранее.  В нижнюю навигационную панель вполне можно добавить и кастомные элементы — выделить иконку «+», взяв ее в круг, который будет выходить за рамки панели (смотрите картинку ниже). Но прежде, чем сделать такой вариант, обсудите с вашим разработчиком, насколько это будет затратно по времени. Если все-таки нужно добавить больше пяти иконок, еще раз подумайте, можно ли поместить элемент где-то в навигационной панели. В крайнем случае, предложите скролл иконок (но это не очень хороший кейс). 
3. Segmented controls — очень важный элемент навигации, который позволяет разделить один экран на несколько. При переходе на любой из сегментов, пользователь остается в рамках главной страницы. Чаще всего, эту панель размещают ниже всех элементов навигационной панели и названия экрана (если такое есть), но бывает, что segment controls размещают в контексте какого-то контента.

Иконка приложения: как нельзя и как можно делать

Значок приложения — это уникальное изображение, добавляемое для каждого мобильного app. Пользователи впервые увидят приложение в App Store и Google Play. На данном этапе пользователь решает — хочет ли он узнать больше о сервисе. Если нет, он прокручивает дальше. Хороший значок вызывает интерес, обеспечивает уверенность, убеждает пользователя, что приложение может быть полезно. В то же время, плохая иконка сбивает с толку и ставит под сомнение пользу/качество сервиса. Когда человек его устанавливает, цель значка меняется — это нужно учитывать. Теперь он помогает в поиске приложения на главном экране, среди других значков. Но что делает значок «хорошим»?

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

Вот несколько советов от дизайнеров Artjoker, о том, как сделать ваш значок сервиса понятным и привлекательным

1. Старайтесь рисовать значок по сетке или, хотя бы, не выходить за края сетки.
2. Если вы разрабатываете нативный дизайн приложения для именитой компании, лого которой всем известен, стоит разместить фирменный знак, если он есть, в качестве значка продукта (примеры: Behance, Facebook, Twitter  и т.д.). Если лого компании не предусматривает короткой версии, не нужно размещать весь полный объем. Лучше придумайте простой и понятный знак, передающий суть приложения, или композицию в фирменном стиле.
3. Иконки для IOS по гайдлайнам не предусматривают использование теней, как в Material Design для Android. Тут нужно полностью ориентироваться на стиль flat.
4. Размеры иконки приложения для передачи разработчикам должны составлять 1024х1024 pt.

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

Если же вам нужна разработка дизайна и вы ориентируетесь именно на качественные нативные приложения, команда Artjoker готова погрузиться в контекст и создать качественный продукт. Наши специалисты следят за тенденциями и следуют стандартам. Помимо визуала, наши специалисты могут создать приложение для ios программно.