Важнейшие компоненты, которые помогут в анализе интерфейсов.
Здесь собраны вопросы, которые я считаю важными при глубокой оценке интерфейса. Они могут помочь увидеть любой интерфейс во всех деталях.
Как этим пользоваться: находим любой понравившийся интерфейс и задаём по нему вопросы из списков ниже. Через ответы можем обнаружить то, чего не увидели сначала. Плюсы и минусы анализируемого интерфейса можно записать. Если регулярно находить красивые интерфейсы и подвергать их анализу, ты сможешь развить визуальный и продуктовый вкус.
По теме: Почему UI-дизайнеру важно делать ревью каждый день
- 1. Опыт и сторителлинг
- 2. Типографика
- 3. Вёрстка блоков
- 4. Цвет
- 5. Материалы и освещение
- 6. Анимация
- 7. Образы
1. Опыт и сторителлинг
- Самый главный вопрос: какой нарратив передаёт этот интерфейс? К чему нас подталкивает и какие возможности даёт?
- Является ли интерфейс иммерсивным, или традиционным?
- Какие аффордансы имеют интерактивные элементы?
- Какой тон оф войс выбран?
2. Типографика
- Как это свёрстано с точки зрения типографики?
- Какие гарнитуры шрифтов используются?
- Если в макете используются шрифтовые пары, насколько они подходят друг другу?
- Что с отступами между буквами и строками?
- Если это экранный интерфейс, как ведут себя отступы до вёрстки по бокам?
- Присутствует ли в макете шрифтовая композиция?
- Какой исторический контекст шрифта?
3. Вёрстка блоков
- Сетки: какие используются? Можно ли улучшить макет, внедрив или поменяв сетку?
- Как скомпонованы блоки? Какие решения приняты на уровне вёрстки?
- Композиция — какова гравитация и взаимосвязи формы на макете, что к чему тянется?
- Используются ли акценты размером?
- Отступы — какие внешние и внутренние отступы имеют объекты: это просторно-воздушно, или экономично-компактно?
- Скругления: строго-рублено или формы элементов и блоков округлые и мягкие?
4. Цвет
- Насколько в этом решении доминирует работа с цветом?
- Какова основная палитра? Как ложится на цветовую теорию?
- Применяется ли правило 60-30-10?
- Используется ли нативная дизайн-система какой-либо из платформ?
- Используются ли текстуры для передачи материалов?
- Используются ли градации оттенков?
- Используются ли градиенты?
5. Материалы и освещение
- Это 2D или 3D-интерфейс?
- Стремимся ли в этом интерфейсе имитировать материалы реального мира?Присутствуют ли текстуры и если да, что они призваны передать?
- Глубина: работаем ли с осью Z, применяется ли элевация: тени и слоистые поверхности.
- Можно ли заметить применение графических паттернов?
- Используются ли фаски?
- Есть ли особенности на блики на глянцевых поверхностях?
6. Анимация
- Насколько в этом решении доминирует работа с движением?
- Какой характер анимации желали получить? Лёгкий, игривый, тяжёлый.
- Используется ли видео и монтаж?
- Какие триггеры анимаций можно найти?
- Присутствуют ли эффекты отзывчивости? Ховеры, состояния нажатий.
- На какие отдельные ключи можно разделить комплексную анимацию?
- Какие именно свойства анимируются между ключами? Примеры: смещение по X/Y, вращение, увеличение или уменьшение, морфинг, цвет, опасити.
- Какие изинги используются в простейших анимациях?
- Присутствуют ли задержки между ключами?
- Если эта анимация мультипликационная, например, в лоадерах, применяются ли принципы анимации Диснея?
7. Образы
- Используются ли фотографии в качестве иллюстраций?
- Используются ли нарисованные, срендеренные или сгенерированные иллюстрации?
- Какой стиль иллюстрации выбран?
