Советы, рекомендации и главные тенденции дизайна мобильных приложений 2018
29 сентября 2017 года в Минске открылся новый iStore, где можно увидеть, потрогать и купить, вероятно, самый обсуждаемый девайс за последние полгода — iPhone X. Как ни посмотри, Apple остаются одними из главных законодателей в области дизайна мобильных устройств и приложений — об этом говорят не только огромные продажи, но и тот факт, что самые различные компании стремятся создать нечто похожее.
Можно с уверенностью сказать, что дизайн iPhone X выделяется среди других телефонов: его точно не спутаешь ни с каким другим устройством. Отсутствие рамок, скругленные углы дисплея и небольшой функциональный модуль, вдающийся в пространство экрана, не только открывают новые возможности для дизайна, но и вызывают ряд вопросов технического характера. Насколько органично будет смотреться контент на новом экране? Какие изменения нужно внести в дизайн, чтобы он соответствовал обновленному функционалу телефона?
Несколько рекомендаций, как адаптировать ваш дизайн под особенности iPhone X
- Самое главное, что стоит учитывать при создании мобильного приложения— это 20% дополнительного пространства, которое пользователи получили в свое распоряжение. Разрешение экрана теперь составляет 1125×2436px. Размер артборда для создания макета 1х в этом случае составит 375×812px. Такие параметры дают вам возможность разместить больше визуальных элементов — строк, иконок и разделов, а также играть с возможностями table view и collection view.
- Однако есть тут и маленький подводный камешек: важный контент необходимо размещать по центру, а по краям оставить небольшие отступы, которые не будут задействованы при работе приложения: так интерфейс не будет обрезан боковыми сенсорами и скругленными углами устройства.
- Теперь у вас есть пространство для того, чтобы реализовать Панель Вкладок вашей мечты: больше никаких выдвижных и складывающихся меню, только простота и лаконичность.
- В своих гайдлайнах для дизайнеров Apple настоятельно рекомендует оставить в покое модуль с камерой, динамиком и Face ID, который врезан в экран. Подумайте над тем, как органично вписать его в интерфейс своего приложения. При этом заливать его черной строкой, объединять с кнопками и спиннером обновления страницы точно не стоит.
- Учитывайте также, что строка состояния (верхняя часть, где отображается название оператора, время и заряд батареи) теперь разделена надвое. Ее также не стоит скрывать: используйте ее для размещения полезной информации.
- У iPhone X отсутствует кнопка Home. Помните, что роль кнопки теперь выполняет полоска пространства внизу экрана, и учитывайте это при построении интерфейса. Не размещайте важные элементы там, где пользователь случайно может задеть индикатор и спровоцировать нежелательный выход из приложения. Кроме того, не скрывайте специально home-индикатор — если пользователь в течение нескольких секунд не касается экрана, он исчезнет сам, а при повторном нажатии снова появится.
- У нового устройства полностью сенсорный экран, поэтому его интерфейс ориентирован на различные жесты. Продумайте, с помощью каких именно жестов пользователь будет действовать в вашем приложении: вписываются ли они в новую архитектуру экрана и не дублируют ли стандартные жесты телефона.
- Создавайте приложения, которые задействуют весь экран. При этом не забывайте, что альбомная ориентация по-прежнему используется для просмотра фотографий и фильмов, чтения больших объемов текста. Ориентируйтесь на рамку устройства, чтобы избежать появления неряшливой каймы при отображении веб-страниц, если необходимо — перегруппируйте контент. Используйте полноэкранные фото: подгоните изображения по размеру и проконтролируйте их корректное отображение — в противном случае часть контента может быть обрезана.
- Не бойтесь использовать яркие, чистые цвета и детальные иллюстрации — новая цветовая модель экрана P3 позволяет передать еще больше оттенков, чем RGB.
- При создании графики учитывайте разницу между точками и пикселями — теперь это не одно и то же: на Retina-дисплее iPhone Х 1 pt равняется 3 px.
- Верификацию через отпечаток пальца теперь заменил Face ID. Интегрируйте возможность его применения в ваше приложение — взаимодействуйте с пользователем через функционал.
- Разнообразие устройств, на которых пользователи просматривают контент, и их параметров очень велико даже внутри линейки продуктов Apple. Создавайте адаптивные макеты с помощью таких инструментов, как Constraints Auto Layout. Чтобы узнать, как будет выглядеть мобильное приложение на новом интерфейсе, вы можете использовать симулятор Х-code.
- Для создания макетов приложений, максимально приближенных по дизайну к IOS, вы можете использовать Apple User Interface Kits: набор готовых шаблонов с иконками, шрифтами и табличками.
Тренды мобильного дизайна 2018
При создании привлекательного и практичного дизайна для мобильного приложения мы рекомендуем руководствоваться актуальными трендами, которые сложились к началу 2018 года:
- Взаимное перекрытие и\или частичное затемнение элементов интерфейса создадут ощущение глубины и выделят дизайн вашего приложения на фоне других.
- Использование градиентов и плавных цветовых переходов позволит создать интересное и визуально заманчивое пространство.
- Минимализм и простота форм — берем пример с Apple: выстраиваем графику, которая идеально вписывается в общий визуал IOS.
- Яркие шрифты и плашки на контрастном фоне: выстраиваем иерархию пространства экрана и играючи выделяем самое важное.
- Эксклюзивные иллюстрации — рисунки от руки, картины, наброски: вписываем в интерфейс графику, которую хочется разглядывать снова и снова.
- Анимированный отклик клавиш и кнопок, мягкая пульсация элементов и функциональная анимация— микровзаимодействия, которые ненавязчиво увлекают пользователя в игру с интерфейсом и заставляют его проводить в приложении больше времени.
И напоследок: создавая мобильное приложение, помните, что количество цветов в макете приложения не должно превышать грани разумного, а использование всплывающих окон необходимо серьезно продумать, чтобы они не выглядели назойливыми. Мерцающие элементы (изменение цвета, вспышки, гиф-анимация) мешают просмотру контента и раздражают пользователя. Используйте только вертикальный скроллинг — горизонтальный оставьте для больших экранов.
Удачи!