Из чего состоит UI

Кратко

Важнейшие компоненты, которые помогут в анализе интерфейсов.

Автор

Саша Окунев

Темы

#для_профи

Дата

April 22, 2024

super:Link

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

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

По теме: Почему UI-дизайнеру важно делать ревью каждый день

• 1. Опыт и сторителлинг
• 2. Типографика
• 3. Вёрстка блоков
• 4. Цвет
• 5. Материалы и освещение
• 6. Анимация
• 7. Образы

1. Опыт и сторителлинг

• Самый главный вопрос: какой нарратив передаёт этот интерфейс? К чему нас подталкивает и какие возможности даёт?
• Является ли интерфейс иммерсивным, или традиционным?
• Какие аффордансы имеют интерактивные элементы?
• Какой тон оф войс выбран?

2. Типографика

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

3. Вёрстка блоков

• Сетки: какие используются? Можно ли улучшить макет, внедрив или поменяв сетку?
• Как скомпонованы блоки? Какие решения приняты на уровне вёрстки?
• Композиция — какова гравитация и взаимосвязи формы на макете, что к чему тянется?
• Используются ли акценты размером?
• Отступы — какие внешние и внутренние отступы имеют объекты: это просторно-воздушно, или экономично-компактно?
• Скругления: строго-рублено или формы элементов и блоков округлые и мягкие?

4. Цвет

• Насколько в этом решении доминирует работа с цветом?
• Какова основная палитра? Как ложится на цветовую теорию?
• Применяется ли правило 60-30-10?
• Используется ли нативная дизайн-система какой-либо из платформ?
• Используются ли текстуры для передачи материалов?
• Используются ли градации оттенков?
• Используются ли градиенты?

5. Материалы и освещение

• Это 2D или 3D-интерфейс?
• Стремимся ли в этом интерфейсе имитировать материалы реального мира?Присутствуют ли текстуры и если да, что они призваны передать?
• Глубина: работаем ли с осью Z, применяется ли элевация: тени и слоистые поверхности.
• Можно ли заметить применение графических паттернов?
• Используются ли фаски?
• Есть ли особенности на блики на глянцевых поверхностях?

6. Анимация

• Насколько в этом решении доминирует работа с движением?
• Какой характер анимации желали получить? Лёгкий, игривый, тяжёлый.
• Используется ли видео и монтаж?
• Какие триггеры анимаций можно найти?
• Присутствуют ли эффекты отзывчивости? Ховеры, состояния нажатий.
• На какие отдельные ключи можно разделить комплексную анимацию?
• Какие именно свойства анимируются между ключами? Примеры: смещение по X/Y, вращение, увеличение или уменьшение, морфинг, цвет, опасити.
• Какие изинги используются в простейших анимациях?
• Присутствуют ли задержки между ключами?
• Если эта анимация мультипликационная, например, в лоадерах, применяются ли принципы анимации Диснея?

7. Образы

• Используются ли фотографии в качестве иллюстраций?
• Используются ли нарисованные, срендеренные или сгенерированные иллюстрации?
• Какой стиль иллюстрации выбран?

/designer

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