10 главных правил UI-дизайна
Приводим 10 правил, следуя которым, можно улучшить качество разработки интерфейсов. Относиться к этим правилам стоит с известной долей скепсиса, так как каждое из них нужно применять в соответствии с конкретным случаем.
1. Проектируйте для плотности, а не для пикселей
Рекомендуется проектировать интерфейс не для пикселей, а для плотности дисплея устройства. Под плотностью понимается количество пикселей на один дюйм экрана или PPI. Это обеспечивает правильное масштабирование элементов интерфейса для соответствия размерам устройств.
Поскольку некоторые экраны имеют больше пикселей на дюйм, чем другие, активы не отображаются в меньшем размере на экранах с высокой плотностью пикселей, они просто отображаются в 2x, 3x, 4x масштабе от их первоначального размера. Это гарантирует, что все активы сохранят свои размеры на устройствах с различной плотностью дисплея.
2. Используйте шаг 8dp
Причина проста: если устройство имеет разрешение 1,5x, оно не будет правильно отображать нечетное число. Кроме того, подавляющее большинство современных размеров экрана делится на 8, что упрощает надлежащее выравнивание ваших дизайнов на этих устройствах. При проектировании с шагом 8 на сетке 8-pt дизайны будут выглядеть согласованными.
3. Уберите линии и рамки
При проектировании в определенный момент необходимо сделать шаг назад и оценить, не загромождают ли контейнеры интерфейс. Часто рамки и линии, служащие для разделения контента, можно заменить полями. Большинство элементов содержатся внутри блоков, поэтому, просто удалив эти контейнеры, можно добиться меньшей плотности страницы и дать элементам больше свободного пространства.
4. Обращайте внимание на контраст
Использование контраста не только привлекает внимание пользователя к соответствующей информации на странице, но и улучшает доступность продукта. Продукт должен быть инклюзивным для всех – в том числе незрячих, дальтоников и слабовидящих пользователей. Правила доступности веб-контента (WCAG) требуют контрастности не менее 4,5:1. Проверить, соответствует ли продукт этому стандарту, поможет интегрированный набор инструментов Stark.
5. Используйте знакомые пользователям стандарты
Существует множество причин, по которым определенные элементы считаются стандартными. Если сделать кнопку круглой и разместить на ней текст Start Free Trial, он займет слишком много вертикального пространства. Кроме того, пользователи ожидают от цифровой среды знакомого им опыт. Если веб-сайт, приложение или программное обеспечение функционируют не так, как привыкли пользователи, они не будут интуитивно понятными и, скорее всего, предоставят разочаровывающий опыт. Так что лучше всего проявлять креатив только в рамках существующих норм дизайна, а не изобретать велосипед.
6. Используйте цветовой вес, чтобы установить иерархию
Известно, что визуальный вес у разных цветов отличается, поэтому с помощью цвета можно установить иерархию контента. Базовый принцип таков: если один элемент важнее другого, он должен иметь больший визуальный вес. Это позволяет пользователю быстро просматривать страницу и различать важную и второстепенную информацию.
7. Старайтесь не использовать больше двух шрифтов
Общепринятой практикой проектирования является ограничение количества шрифтов, используемых в интерфейсе – в большинстве случаев ограничиваются двумя. Без веских причин от этого правила лучше не отступать. В случае необходимости можно использовать семейства шрифтов. При выборе шрифта полезными будут семейства, которые имеют различные веса (light, regular, medium, bold, extra bold). Это даст больше возможностей для изучения различных стилей без добавления дополнительных шрифтов.
8. Узнавать знакомое, а не пытаться вспомнить
Узнавание – это хорошая практика в продуктовом дизайне, потому что позволяет пользователю лишний раз не задумываться о своих действиях. Примеры – страницы оформления заказа, почтовые ящики, история поиска, кнопки «Назад» и т. д..
9. Не замедляйте меня
Для пользователя скорость и эффективность – единственное, что имеет значение. Хорошее эмпирическое правило, касающееся в основном анимаций и микровзаимодействий, заключается в следующем: если что-то добавляет ненужное время, то это не улучшает опыт.
10. Меньше значит больше
Всякий раз, когда мы добавляем на страницу дополнительную информацию: кнопки, текст, изображения, анимацию, иллюстрации и т. д., она конкурирует с релевантной информацией. Если на странице слишком много элементов, их важность уменьшается. Прекрасным примером этого является знаменитая домашняя страница Google. Вместо того, чтобы загружать посетителя ненужной информацией, дизайн по-прежнему сосредоточен на основном действии – поиске.
