Вопросы на собеседовании: UI-дизайнер

Визуальная иерархия направляет внимание с помощью осознанных визуальных различий.

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

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

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

Сетка помогает быстрее просматривать интерфейс, поддерживать его и расширять.

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

Выход за сетку уместен только тогда, когда у исключения есть ясная цель.

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

Отступы должны наглядно показывать связи между элементами.

• Внутри одной группы я использую меньшие интервалы, а между разными группами более крупные.
• За основу я возьму существующую шкалу отступов продукта, чтобы сохранить единообразие.
• Результат я проверю на реальных подписях и реалистичной длине контента.

Система отступов с шагом восемь пикселей делает компоновку единообразнее и упрощает ее описание.

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

Я бы снизил плотность экрана за счет более ясной структуры, не скрывая элементы сразу.

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

Свободное пространство функционально, когда оно объясняет структуру и улучшает удобство интерфейса.

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

Если элементы с одинаковыми координатами выглядят неровно, я применю оптическое выравнивание.

• Я сравню видимые формы, а не только их ограничивающие рамки.
• У иконок и букв может быть разный оптический вес, даже если их размеры совпадают.
• Небольшая поправка уместна, если в реальном размере воспринимаемое выравнивание становится лучше.

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

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

Полезная типографическая иерархия дает каждой текстовой роли ясное и постоянное назначение.

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

Я бы выбирал параметры основного текста по его читаемости в реальных условиях просмотра.

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

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

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

Длинный заголовок должен аккуратно переноситься и сохранять свое место в иерархии.

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

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

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

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

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

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

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

Один только цвет не может надежно передать статус.

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

Я бы оценил конкретное сочетание цветов и контекст, а не отказывался от фирменного цвета полностью.

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

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

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