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

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

Прежде чем приступить к дизайну, вы должны изучить существующие модели (шаблоны) дизайнов, и начать свой проект с “пользовательской точкой зрения” в голове. Задайте себе вопросы: «Какая главная цель моего приложения?”, “Сколько и какие наиболее важные разделы моего приложения”, “Какие действия должны быть доступны пользователю при использовании приложения?». Это вопросы, которые помогут вам выбрать шаблон и определить его базовую структуру.

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

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

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

Apple благородные ребята и предоставляют нам эти шаблоны прям на своем сайте можете скачать их без каких либо трудностей, вот ссылка https://developer.apple.com/design/resources/

Так же важной отличительной особенностью является разрешение экранов. Как вы знаете у большинства телефонов разное разрешение, в Свою очередь мы предлагаем разработки для самого распространенного экрана - 750 пкc

Начиная с iOS 7 яркие цвета стали лицом iOS (кому-то это нравится, кто-то это ненавидит). Вы можете использовать любые цвета для создания своих дизайнов. Лично я советую не увлекаться использованием большого количества пестрых цветов, потому как это может сбивать пользователя. Оптимально будет использовать 1-2 два основных цвета и 1-2 вспомогательных

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

Элементы панели навигации всегда должны располагаться в определенных местах:

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

У приложений на ios всегда есть нижнее меню с основным функционалом. Для нижнего меню используется 5 иконок, желательно с подписями, если ваш продуй новый и иконки не совсе отражают суть.

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

Кнопки

Кнопки имеют огромное количество настроек внешнего вида которые позволяют изменять и настраивать вам практически все: стиль текста, тени, иконки и т.п.

Следует помнить, что кнопки обычно имеют несколько состояний, которые должны отличаться между собой: стандартное, выделенное, активное, неактивное. Соотвественно в дизайне нужно показать все три состояния.

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

Отступы и их пропорциональность

Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.

Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:

Улучшение юзабилити с использованием знакомых пользователю схем

Чтобы это сделать достаточно протестировать свои любимое приложения и рассмотреть самые понятные решения интерфейса для вас. Выпишите ошибки интереса, что вам кажется непонятным или незаметным. Найдите стандартные решений которые могли бы решить эти проблемы. Наше сознание не может придумать что-то абсолютно новое, оно создает новые объекты на основе уже существующих шаблонов. Если вы не доверяете этому факту то попробуйте придумать новый цвет. ФИзически это невозможно. Поэтому старайтесь опираться на уже существующие хорошие решения, а не уходить в самовыдуманный креатив, тогда пользователям будет легко пользоваться приложением.

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

Так же хочу добавить список приложений, которые мы предлагаем вам брать за пример на первых порах:

1 Telegram

2 App Store

3 iTunes

4 Trulia

5 Сбербанк

6 Airbnb

7 Qiwi

8 Joom