В данной статье внимание акцентировано на проектирование, которым занимаются дизайнеры, а не программные разработчики. Ключевой блок мобильного приложения - это форма заполнения. От ее воплощения зависит, зарегистрируется ли пользователь, станет ли потенциальным клиентом.
Дизайн форм
Для того чтобы пользователь захотел заполнить форму, она должна быть:
- комфортна, приятна для чтения;
- готовой к ошибкам ввода со стороны клиента.
Элементы форм: текст, строка, абзац, один из списка, несколько из списка, раскрывающийся список, шкала, сетка, дата, время, заголовок текста, поле текстовое, поле Несколько строк, кнопка, выпадающий список, радио-кнопка, чекбокс, таблицы и т.д.
Сервис Гуггл.Формы - удобный инструмент для самостоятельного создания формы. Удобен он тем, что, во-первых, дает понимание объема конечной формы; во-вторых, визуально демонстрирует, захочется ее, заполнять или нет.
Два способа создания формы:
- вопросы, а под ними ответы;
- поле слева, описание справа.
При заполнении формы лучше использовать первый вариант, при редактировании данных - максимально подходит второй способ.
Поле содержания состоит из: основного поля, подсказки, ошибки и полей вокруг.
Геймификация форм:
разбиваем данные для заполения по блокам
показываем, на каком этапе заполнения пользователь остановился
На конверсию форм влияет:
- заполнение всех полей - в одну колонку;
- “найти и исправить” - в две колонки;
- полей много - блоки по шагам;
- правило одного окна - на разрывать пользовательский опыт;
- заполнение полей типовыми значениями.
Как делать кнопки
Логично, что кнопка, в первую очередь, должна выполнять свою основную функцию - быть нажимаемой. Делаем кнопку яркой и заметной. Серые цвета подразумевают, что на кнопку нажать нельзя. Выносить за рамки формы рассматриваемый элемент нежелательно, теряется взаимосвязь картинки и действия.
Три варианта кнопки:
- кнопка залитая
- кнопка контурная
- ссылка
Невидимый для глаза, но важный элемент - охранная зона вокруг кнопок, отгораживающая кнопки от всего остального.
При составлении прототипа можно предусматривать разные состояния кнопок:
- Недоступная,
- Активная,
- При наведении,
- При нажатии,
- Анимированная активная,
- Анимированная недоступная.
- Все навигационные элементы, в том числе, кнопки, должны иметь общие признаки.
- Элементы, отличающиеся визуально, выполняют различные функции.
Велосипеды, которые не нужно изобретать при прототипировании
- скетчпады - блокнотики,у которых масштаб, как у смартфонов, на них удобно рисовать схемы макетов;
- UI блокноты - соответствуют пропорциям телефонов, имеют разнообразные пропорции на выбор;
- лекала, которые позволяют с точностью переносить структуру приложения на макет;
- сервисы для менеджеров проектирования. Reaitimeboard.com - гигантский онлайн-ватман, дающий возможность работать сразу нескольким людям, а также комментировать создаваемые элементы. Figma.com - онлайн среда для проетирования интерфейсов. InVisionApp com - сервис для создания анимации в интерфейсах.
- среда для проектирования. Adobe Edge Reflow - сервис для анимированного проектирования, для макетов, предназначенных для разных разрешений экрана. Adobe Muse - сервис больше подойдет для создания сайтов, чем мобильных приложений, он выгрузит сайт с html-кодированием. WebFlow - проектирование сайта на нескольких устройствах. Google Drive Sites - упрощенный конструктор. Sketch App - для обладателей Macbook.
Инструменты для создания адаптивного дизайна
- Photoshop: десктопный сайт + мобильная версия + примеры переходов.
- Illustrator: десктопный сайт + мобильная версия + примеры переходов.
- Adobe Edge Reflow.
- WebFlow.
- Tilda / Flexbe.
- Google Sites.
Инструменты прототипирования
- Reaitimeboard.com
- Balsamiq.com
- Moqups.com
- InVisionApp com
- Xmind - структура сайта
- Sketch
- Adobe Illustrator
Полезные видео про прототипы приложений: Пол Трени “Новые инструменты Adobe для создания интерфейсов” и Майк Роуди “Прототипирование”.
После понимания сути прототипирования дизайн станет для вас чисто техническим процессом без появления критических моментов работе.
Следить за новостями и трендами в сфере дизайна можно на сайтах: Usepanda.com, Logolounge.com. Новые паттерны выкладываются на TheFwa.com, Awwwards.com. Pinterest.com - для сбора мудбордов. Обновления на этих сайтах выходят раз в неделю.
Процесс прототипирования, в большей степени, технический, чем творческий, но зато его результат четко отвечает параметрам запросов пользователей.
