Marina Abramova
Marina Abramova
4 мин. читать
13683 показа
4023 открытия

Гайд по дизайну мобильных приложений

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

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

 


Где работать над дизайном приложений

Над дизайном мобильных приложений можно работать: 

  1. в студии
  2. на фрилансе
  3. в продуктовой команде

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

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

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

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

Гайдлайны

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

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

Гайдлайны бесплатные и доступны каждому на официальном сайте системы. 

IOS Human Interface Guidelines

Android Material 3

В каждой системе есть свои нативные шрифты. В iOS это San Francisco, в Android Roboto. Шрифты можно скачать с официального сайта. (SF Pro нельзя скачать с официального сайта на Windows, его ищем в интернете). 

Ну и конечно UI киты, которые доступны для скачивания с официальных сайтов и с Figma Community. В них есть все элементы интерфейса и шрифтовые стили.

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

Этапы работы

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

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

Можно выделить несколько наиболее популярных шагов: 

  1. проведение конкурентного анализа
  2. проведение исследований (глубинные интервью и опросы) 
  3. построение user flow 
  4. создание wireframes
  5. тестирование после вайрфрэймов
  6. разработка стиля
  7. дизайн всех экранов
  8. создание интерактивного прототипа
  9. передача файлов разработчику
  10. доработка после обратной связи 
  11. тестирование после дизайна и перед разработкой 

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

Навыки и знания

Часть навыков уже описана выше, здесь приведем конкретный список: 

  1. знание гайдлайнов iOS и Android
  2. умение проводить конкурентный анализ и делать выводы
  3. навык проведения интервью
  4. создание карты пути пользователя
  5. дополнительные навыки из UX (cjm, jtbd, user stories, personas, affinity diagrams и другие) 
  6. умение создавать вайрфрэймы
  7. уверенная база в дизайне (типографика, колористика и композиция)
  8. уверенное владение Figma (работа с компонентами и автолайаутами)
  9. навык создания интерактивных прототипов
  10. знание популярных паттернов поведения пользователей
  11. насмотренность в сценариях и решениях
  12. знание о состояниях элементов, пустых экранах и экранах ошибок
  13. навык создания микроанимаций
  14. умение работать с дизайн системой

Гибкие навыки

Это больше из soft skills и относится не только к мобилкам, но тоже важно:

  1. знание английского 
  2. умение собирать и анализировать информацию 
  3. умение работать быстро
  4. инициативность и умение предлагать решения
  5. умение работать в команде
  6. взаимодействие с разработчиков

Что еще

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

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

И обязательно насматриваться. Как визуальными решениями, так и различными сценариями. 

13683
0

Подпишитесь на еженедельный
дайджест

Редакция отбирает лучший контент за неделю и отправляет его на вашу почту

Cпасибо за подписку!

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

Рекомендации

только для зарегистрированных
только для зарегистрированных
Подтвердите действие
Точно?
Сообщение
Текст
Подтвердите действие