Дизайн пользовательского интерфейса и дизайн UI/UX в разработке мобильных приложений. Базовые знания

Маргарита Васильевна Акулич

В данной книге доступным образом объяснено, что собой представляет дизайн пользовательского интерфейса и как он соотносится с дизайном пользовательского опыта. Пересказано о законе Фиттса, о правиле третей и о некоторых важных нюансах дизайна. Обозначены главные тренды UI/UX-дизайна мобильных приложений. Указаны ошибки. Приведены рекомендации. Уделено внимание проблеме эффективного использования UI/UX дизайнерами для улучшения своей дизайнерской работы искусственного интеллекта.

II Компоненты дизайна пользовательского интерфейса. Формы пользовательских интерфейсов. Как создавать выдающиеся пользовательские интерфейсы?

2.1 Компоненты дизайна пользовательского интерфейса

Макет

Макет

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

Цвета

Цвета, которые вы используете, оказывают заметное влияние на дизайн пользовательского интерфейса. Они должны отражать бренд вашей компании, а также резонировать с личностью пользователя. Использование тусклых серых цветов для учебного веб-сайта CrossFit на самом деле не станет мотивировать или вовлекать ваших пользователей.

Типографика

Правильная типографика может как улучшить, так и разрушить ваш дизайн пользовательского интерфейса. Хотя это может показаться просто текстом, текст имеет подсознательную визуальную привлекательность. Например, как будет выглядеть веб-сайт Fortune 500, если весь текст будет написан ComicSans?

Графика

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

2.2 Формы пользовательских интерфейсов

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

Графические пользовательские интерфейсы (GUI)

Они используются для того, чтобы пользователь мог взаимодействовать с системой.

Голосовые пользовательские интерфейсы (VUI)

Пользователи общаются через них, используя свой голос.

Виртуальные пользовательские интерфейсы, такие как Alexa на устройствах Amazon и Siri на iPhone

Они составляют большую часть интеллектуальных помощников (VUI).

Интерфейсы на основе жестов

Пользователи взаимодействуют с областями 3D-дизайна, перемещая свое тело, как в играх виртуальной реальности (VR).

2.3 Как создать выдающиеся пользовательские интерфейсы?

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

Следует соблюдать следующие рекомендации.

Сделайте так, чтобы общие элементы и кнопки вели себя последовательно

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

Сохраняйте высокий уровень обнаруживаемости

Просто пометьте значки и добавьте четко определенные атрибуты, такие как тени кликов.

Создайте «невидимое» ощущение, сохранив интерфейсы минимальными

Создайте ощущение «невидимости», сохранив интерфейсы минимальными (исключительно только с компонентами, которые помогают пользователям достигать своих целей).

Когда дело доходит до макета, уважайте взгляд и внимание пользователя

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

Убедитесь, что все находится в правильном положении. Используйте цвет, яркость и контраст, чтобы привлечь внимание к важным аспектам. Лучше избегать использования чрезмерно большого количества кнопок или цветов. Жирный шрифт/вес, курсив, размер шрифта, межбуквенный интервал и прописные буквы — все это используется для создания текста. Анализируя имейте в виду, что пользователи должны иметь возможность извлекать значения.

Сократите количество действий, необходимых для выполнения задач

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

Разместите элементы управления в непосредственной близости от элементов, которыми пользователи хотят управлять

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

Обеспечьте обратную связь

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

Используйте подходящие шаблоны дизайна пользовательского интерфейса, чтобы помочь пользователям в навигации, и уменьшите проблемы (например, предварительное заполнение форм).

Следует избегать темных шаблонов, таких как скрытое добавление товаров, которые трудно увидеть, предварительно заполненных флажков выбора/отказа в потребительских корзинах.

Постоянно поддерживайте имидж бренда

Поддержание имиджа бренда — это святое.