Хабрахабр

Дизайн для фронтенд-разработчиков, часть 1

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

Дело доходит до реализации интерфейса и разработчик сталкивается с этими несовершенствами.

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

Сидим до ночи, полируем пиксели, хвосты прибиваем гвоздями через position: absolute. Еще одно плохое решение — сделать как в макете. Дизайнер счастлив, тимлид на кодревью возмущен кашей в стилях, менеджер недоволен потраченным временем.

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

Я собрал несколько принципов, которые помогут найти эти самые проблемные места и даже прийти к дизайнеру с готовым решением, а не с голыми руками.

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

Принципы приведены без определенного порядка.

Наблюдение

Мозг склонен объединять вещи в группы, если они близко расположены, похожи или выровнены друг относительно друга.

Принцип

Группировка элементов отражает их связи и положение в иерархии страницы.

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


Аккуратная группировка настроек на Маке

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

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

Тут все очень плохо.
Настройки Firefox. Попробуйте, например, угадать к чему относятся три кнопки справа.

Как применять

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

Этот недосмотр легко заметить и исправить на этапе верстки. Например, в этом меню у одноуровневых блоков разные отступы.

Домашнее чтение

Наблюдение

Знакомый контекст тоже упрощает распознавание. Объекты, с которым человек уже знаком распознаются быстрее и точнее.

Принцип

Стандартные элементы сайта должны следовать сложившимся паттернам.

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

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

Большая синяя кнопка, несмотря на название, означает отмену действия.
Невероятный контрол из настроек Java — чекбокс с подтверждением в отдельном окне.

Как применять

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

Выносите все в библиотеку компонентов — от инпутов и кнопок до цветов, теней, отступов и анимаций. Внутренняя согласованность достигается максимальным переиспользованием всего.

Домашнее чтение

Влияние контекста и знакомства и с объектом на его распознавание

Наблюдение

Кроме того, около 4% людей страдают нарушениями цветовосприятия. Исследования говорят, что различия в тоне и насыщенности фона и текста слабо влияют на удобство чтения, а вот контраст по освещенности — напрямую.

Принцип

Всегда проверять контраст текста.

5 для текста обычного размера и 1:3 для текста размером 24px и более. W3C считает нормальным контраст в 1:4.

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

Хуже всего белый текст выглядит на желтом фоне, лучше всего — на синем.

Как применять

Проще всего использовать расширение для браузера. Процесс можно автоматизировать утилитой axe. CLI и интеграции с популярными системами тестирования тоже в наличии.

Для быстрой проверки контраста двух цветов подойдет сервис contrast ratio.

Контраст почти дотягивает
Главная страница Google.

Домашнее чтение

  1. Обсуждайте с дизайнером места, которые считаете проблемными.
  2. Проверяйте, что расстояния между элементами соответствую их положению в иерархии.
  3. Используйте стандартные контролы стандартным образом.
  4. Автоматизируйте проверку контрастности.

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть