Недавно один мой друг обратился ко мне с вопросом касательно дизайна мобильных приложений и работе в Figma. И если с Фигмой я по долгу службы еще работаю, то вот с UI-дизайном приложений (и дизайном вообще) соприкасаюь мало. Но поскольку основная цель нашего форума (и блога) — помогать друг другу, я решил сделать небольшой дайджест материалов на эту тему. Не будучи дизайнером, мне было немного отыскать годные материалы. Надеюсь, кому-то это пригодится и послужит толчком к дальнейшему развитию.
Тренды дизайна мобильных приложений 2024
Обзорная статья, которая охватывает разные аспекты дизайна. Авторы смотрят очень широко на термин “дизайн”, включая способы структурирования приложения и использование разных технологий, в т.ч. low-code/no-code. В принципе, да, английское слово “design” действительно может относится как к визуальной, так и структурной части. Но нас сейчас интересует именно UI-составляющая. Про визуальный дизайн авторы тоже пишут, однако не приводят примеров, хотя жаль. Впрочем, понять, куда копать, тоже можно. Статья обозревает тренды 2024 года, однако сложно сказать, насколько они актуальны на самом деле. Многие из них ориентированы на будущее — например, голосовое управление или внедрение AI/AG-решений. Понриавлся блок “Советы по созданию качественного пользовательского интерфейса” — по сути, описание “вечных” идей, именуемых “адекватный подход”. В целом, стоит почитать статью — уверен, можно будет найти идеи для дизайна или отдельных визуальных элементов. Не вижу большого смысла ориентироваться именно на тренды, но некоторые из них могут оказаться очень даже удачными, да и вообще нужно оставаться в курсе тенденций.
Тренды Дизайна Мобильных Приложений в 2024
Еще одная статья о трендах 2024. В ней, как раз, и дается ответ на вопрос “зачем следить за трендами”. Кратко описаны основные элементы дизайна. Перечень самих по себе трендов тоже несколько нестандартный с точки зрения визуала — например, добавлен пункт “Идентификатор лица**”,** который больше относится к структуре приложения в целом. Но, в отличие от предыдущей статьи, тут есть примеры и скриншоты, что может, опять же, подчеркнуть тренды или натолкнуть на какую-то идею. Интерфейст того же “идентификатора лица” можно увидеть на скрине — он занимает весь экран, присутствует рамка, которая, собственно, и показывает область идентификации.
Некоторые пункты из предыдущей статьи дублируются, однако вместе с картинками мысли кажутся более полными и целостными. Есть моменты, которые перекликаются с UX — например, “Правильная работа клавиши «Назад»” или “Однородность дизайна”, что, на самом деле, хорошо и тоже важно. ИМХО, дизайн должен подчеркивать стиль и функционал приложения. Безобразные элементы без центрирования и разбросанные кое-как по экрану не произведут впечталения законченного продукта (а уж тем более — дорогого, если приложение хоть немного коммерческое). Как говорит один из моих клиентов — “there should be no pixel out of its place”. Ведь даже Linux — и тот уже перестал быть командной строкой и оброс красивенькими окнами. Хорошо это или нет — другой вопрос, но на восприятие системы или приложения это влияет однозначно.
Тренды UI/UX Дизайна 2023
Эта статья от команды предыдущего поста. На этот раз описывает тренды 2022-2023, однако многие из них актуальны и сегодня. Опять же, есть примеры, которые помогут найти вдохновение и видоизменить их для получения новых форм и элементов. Немного смущает пункт “Доступ без паролей” — при всей важности дизайна, нельзя позволять тендециям маркетинга и визуальных оформлений ломать безопасность и приватность данных. Авторы предлагают повсеместно отказываться от паролей и внедрять гугл-авторизацию, что, конечно, удобно, однао это завязывает пользователей на одного монополиста (читай — складывать все яйца в одну корзину). Это решение модное — да — но безопасность пользовательских данных подчас даже важнее функционала самого приложения. Так что со статьей ознакомиться тоже стоит, но думаючи.
Современные тренды UI-дизайна и способы их применения в ваших мобильных приложениях
Одна из лучших статей в этом выпуске дайджеста. Авторы рассказывают об основных аспектах дизайна — иконках, шрифтах, цветовых схемах в разных стилях. Есть разборы примеров из реальных приложений и ОС (сравнение Windows и iOS, например). Описаны способы создания акцента на контент с помощью разных визуальных элементов — цвета, позиционирования внутри блока. И вообще говорится о том, как сделать дизайн функциональным. Конкретных примеров рисования в Фотошопе или Фигме нет, но статья, по сути, и не об этом, а о принципах хорошего дизайна. Рекомендуем к прочтению.
Mobile UI – What it is & How to Ace Mobile App Design
Статья на английском, если что — Гугль транслейт в помощь. Каких-то конкретных примеров или скринов авторы не приводят, но дают понимание, как вообще делается дизайн. Например, в статье описывается итеративный подход — это когда сделали какую-то часть работ — посмотрели, нормально ли функционирует, выглядит, как пользователи с этим взаимодействуют. Потом поправили, улучшили, обновили — и так по кругу. Также даются рекомендации о том, как выдержать единый стиль и как сделать нормальный splash-screen (экран загрузки, то бишь). Вообще, эти советы и принципы применимы не только к мобильной разработке, а к дизайну приложений вообще.
How to Design a Mobile App User Interface Like a Pro
Еще одна статья на английском. Один из самых фундаметальных трудов (если не самый) в этой подборке. Есть даже видео-урок и куча ссылок на другие статьи. Авторы делают разбор одного приложения — какие экраны и компоненты там используются, как их реализовать. Все начинается с наброска приложения — это здравый подход как в дизайне, так и, например, в программировании — прежде, чем что-то делать, подумай и набросай пусть даже на бумаге то, что ты будешь делать. Это поможет избежать многих косяков и покажет потенциальные проблемы на ранних стадиях — до того, как придется потратить 10 часов на исправление плохой структуры. А в конце статьи есть ссылка на 7 бесплатных уроков по UI дизайну. Правда, тоже на иностранном, но то уже мелочи.
Маленькое дополнение от команды блога.
Хорошим тоном является создание гайдов (guidelines) для дизайна — это описание идей и всех основных элементов (заголовки, шрифт, размер шрифта, основные цвета и т.д.). Такие вещи обычно выносятся на отдельный экран в Фигмах, а иногда еще и добавляются в виде описания в ТЗ. Если нужны примеры того, как это выглядит и как это делается — пишите в комментах, сделаем.
А что дальше?
В данный момент команда проекта работает над обзором курсов по UI-дизайну, в частности — курса о создании дизайна приложения в Figma. В скором времени мы опубликуем подборку материалов с их подробным описанием, чтобы вы могли понять, стоит ли тратить время на изучение данного курса, и будет ли он полезен лично вам.
Подпишитесь на телеграм-канал, чтоб не пропустить выход поста.
P.S. Подходит ли такой формат для дайджеста на регулярной основе?
Зашел пост? Напиши коммент! Не зашел? Напиши и расскажи, что не так.