Атлас областей дизайна интерфейсов

0. Как читать атлас

Не учить все подряд. Идти слоями:

1. Контекст продукта
2. Человек и восприятие
3. Структура информации
4. Визуальная система
5. Поведение интерфейса
6. Состояния и надежность
7. Доступность и адаптивность
8. Бренд и графика
9. Система, команда, качество
10. Исследования и проверка

Если прыгнуть сразу в 3D, Tailwind, glass, brutalism или красивые карточки, база будет слабой. Сначала надо понимать задачу, человека, информацию, действие и состояние.

1. Что считается областью дизайна, а что нет

Область дизайна отвечает на устойчивый вопрос.

Например:

• цвет отвечает, как кодировать роль, настроение, статус и контраст;
• типографика отвечает, как читать и сканировать текст;
• интеракция отвечает, что происходит после действия;
• информационная архитектура отвечает, где что лежит и как найти;
• дизайн-система отвечает, как не расползтись на 200 экранов.

Не область, а прием/стиль/инструмент:

• glassmorphism;
• neumorphism;
• brutalism;
• Tailwind;
• shadcn;
• card UI;
• 3D hero;
• gradient;
• dark mode;
• "как у Linear".

Они могут быть полезны, но не заменяют дисциплину.

2. Быстрая карта областей

Продуктовый контекст        -> зачем продукт, кому, какой риск, какая метрика
Сервисный дизайн            -> весь путь человека, не только экран
UX-исследования             -> как узнать, что правда, а не мнение команды
Восприятие и гештальт       -> как глаз группирует и читает экран
Когнитивные законы          -> память, выбор, скорость, моторика
Информационная архитектура  -> структура, навигация, поиск, категории
Контент-дизайн              -> слова, labels, ошибки, пустые состояния
Интеракционный дизайн       -> действие, feedback, states, recovery
Визуальная иерархия         -> что заметят первым, вторым, третьим
Композиция и layout         -> где что стоит и как экран держится
Сетки и spacing             -> ритм, отступы, плотность, порядок
Типографика                 -> читаемость, голос текста, шкалы
Цвет                        -> роли, контраст, семантика, настроение
Форма                       -> радиусы, геометрия, силуэт элементов
Поверхности и глубина       -> слои, elevation, модалки, материалы
Графика                     -> фото, 3D, изометрия, иллюстрации, скриншоты
Иконки и пиктограммы        -> компактный смысл и действия
Data visualization          -> графики, таблицы, dashboards, сравнение
Motion design               -> движение как feedback и связь состояний
Формы и ввод                -> поля, валидация, ошибки, доверие
Navigation/search/filter    -> как ходить, искать, сужать результат
Accessibility               -> доступность как инженерная база
Responsive/mobile/spatial   -> разные экраны, вводы, safe areas, visionOS
Design systems/tokens       -> масштабирование решений
Brand/visual identity       -> характер, настроение, узнаваемость
AI/hybrid/generative UI     -> AI-состояния, контроль, provenance
Product craft/performance   -> скорость, качество, edge cases, долговечность

3. Зависимости

Контекст продукта
  -> Исследования
  -> IA + контент
  -> Интеракция
  -> Визуальная система
  -> Состояния
  -> Доступность + адаптивность
  -> Design system
  -> Бренд/графика/motion
  -> Проверка на людях и метриках

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

4. Главные области

4.1. Продуктовый контекст

Вопрос: зачем интерфейс существует?

Что определить:

• ЦА;
• контекст использования;
• частота;
• риск действия;
• главный объект;
• главный сценарий;
• бизнес-цель;
• метрика качества;
• desired feeling.

Без этого невозможно выбрать стиль, плотность, цвет, onboarding, уровень доверия и уровень выразительности.

Главная мысль из книг: Jesse James Garrett в The Elements of User Experience раскладывает UX от стратегии к поверхности: нельзя начинать с pixels, если не ясны user needs и product objectives.

Читать:

• Книжная карта
• Jesse James Garrett — The Elements of User Experience
• Jeff Gothelf, Josh Seiden — Lean UX

4.2. Сервисный дизайн

Вопрос: что происходит до, во время и после экрана?

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

Что проектировать:

• customer journey;
• service blueprint;
• backstage/frontstage;
• handoff между каналами;
• support path;
• failure/recovery;
• ожидание и статусы.

Особенно важно для:

• сервисов мобильности: такси, каршеринг, аренда транспорта;
• банков;
• доставки;
• маркетплейсов;
• госуслуг;
• healthcare;
• B2B operations.

Читать:

• Marc Stickdorn et al. — This Is Service Design Doing

4.3. UX-исследования и проверка

Вопрос: откуда известно, что решение работает?

Методы:

• интервью;
• наблюдение;
• usability test;
• tree testing;
• card sorting;
• survey;
• analytics;
• A/B test;
• heuristic review;
• diary study.

Правило:

Мнение команды не является доказательством.

Что выписывать из исследований:

• задачи пользователя;
• язык пользователя;
• ошибки;
• обходные пути;
• критерии доверия;
• моменты тревоги;
• причины выбора/ухода.

Читать:

• Erika Hall — Just Enough Research
• Steve Krug — Rocket Surgery Made Easy
• NN/g — Usability Testing

4.4. Восприятие и гештальт

Вопрос: как глаз группирует элементы до чтения текста?

Ключевые принципы:

• proximity;
• similarity;
• common region;
• continuity;
• closure;
• figure-ground;
• common fate.

Практическое правило:

Расстояние и общая область сильнее декоративного цвета.

Если label стоит ближе к чужому input, никакой красивый стиль не спасет.

Читать:

• NN/g Gestalt articles: Proximity, Similarity, Common Region
• William Lidwell et al. — Universal Principles of Design
• Susan Weinschenk — 100 Things Every Designer Needs to Know About People

4.5. Когнитивные законы и эргономика

Вопрос: как память, выбор, моторика и внимание ограничивают интерфейс?

Полезные законы:

• Fitts: важное и частое должно быть крупным и близким;
• Hick: чем больше равных вариантов, тем дольше выбор;
• Jakob: люди ожидают знакомых паттернов;
• Miller: длинные списки лучше группировать;
• Doherty: быстрый отклик удерживает поток;
• Peak-End: люди запоминают пик и конец опыта;
• Zeigarnik: незавершенность держит внимание.

Читать:

• Laws of UX
• NN/g: Fitts's Law, Hick's Law, Miller's Law

4.6. Информационная архитектура

Вопрос: где что лежит, как называется и как найти?

IA включает:

• organization systems;
• labeling;
• navigation;
• search;
• metadata;
• taxonomy;
• wayfinding.

Типичные ошибки:

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

Читать:

• Rosenfeld, Morville, Arango — Information Architecture: For the Web and Beyond
• Peter Morville — Ambient Findability

4.7. Контент-дизайн и UX writing

Вопрос: помогают ли слова выполнить задачу?

Контент-дизайн отвечает за:

• headings;
• labels;
• CTA;
• error messages;
• empty states;
• help text;
• tone;
• terminology;
• plain language.

Правило:

Кнопка должна говорить, что произойдет.
Ошибка должна говорить, как исправить.
Пустое состояние должно говорить, что дальше.

Читать:

• Sarah Richards / Content Design London — Content Design
• Torrey Podmajersky — Strategic Writing for UX
• GOV.UK — Content Design

4.8. Интеракционный дизайн

Вопрос: что происходит после действия пользователя?

Цепочка:

intent -> affordance -> action -> feedback -> state -> recovery

Интеракция включает:

• affordances;
• pressed/hover/focus states;
• loading;
• validation;
• undo;
• confirmation;
• optimistic UI;
• sync/offline/conflict;
• permissions;
• error recovery.

Читать:

• Alan Cooper et al. — About Face
• Jenifer Tidwell et al. — Designing Interfaces
• Don Norman — The Design of Everyday Things

4.9. Визуальная иерархия

Вопрос: что человек заметит первым?

Инструменты:

• размер;
• вес;
• цвет;
• контраст;
• позиция;
• whitespace;
• grouping;
• motion;
• elevation.

Правило:

Если выделено все, не выделено ничего.

Проверки:

• blur/squint test;
• grayscale test;
• 3-second test;
• one primary action.

Читать:

• NN/g — Visual Hierarchy
• Adam Wathan, Steve Schoger — Refactoring UI

4.10. Композиция и layout

Вопрос: как экран держится целиком?

Композиция отвечает за:

• точку входа;
• баланс;
• alignment;
• зоны;
• scan path;
• whitespace;
• density;
• relationship between blocks.

Правило:

Экран должен читаться до чтения текста.

Читать:

• Josef Müller-Brockmann — Grid Systems in Graphic Design
• Ellen Lupton — Thinking with Type

4.11. Сетки и spacing

Вопрос: как сделать расстояния системными, а не случайными?

Spacing выражает смысл:

внутри элемента < внутри группы < между группами < между секциями

Что фиксировать:

• base unit;
• spacing scale;
• gutters;
• container widths;
• density modes;
• component padding;
• responsive behavior.

Читать:

• Material — Layout
• Carbon — Spacing

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

Вопрос: как текст читается, сканируется и звучит?

Типографика включает:

• font choice;
• type scale;
• roles;
• line-height;
• measure;
• weight;
• alignment;
• numeric typography;
• localization.

Главное:

Интерфейс читают, а не рассматривают.

Читать:

• Ellen Lupton — Thinking with Type
• Material — Typography
• Apple — Typography

4.13. Цвет

Вопрос: что цвет кодирует: роль, статус, настроение или бренд?

Цвет должен иметь роли:

• background;
• surface;
• text;
• muted text;
• border;
• primary;
• success;
• warning;
• danger;
• focus;
• selection.

60/30/10 полезно как sanity check, но важнее semantic color system и WCAG contrast.

Читать:

• Material — Color roles
• Apple — Color
• WCAG — Contrast Minimum

4.14. Форма

Вопрос: какую геометрию имеют элементы и что она сообщает?

Форма включает:

• radius scale;
• pills;
• squircles;
• icon shape language;
• component silhouette;
• concentric radius;
• touch shape.

Форма влияет на настроение:

• sharp = technical, strict, editorial;
• rounded = friendly, consumer, soft;
• pill = compact action/filter;
• squircle = premium/mobile/native.

Читать:

• Material — Shape
• Apple — Materials

4.15. Поверхности, глубина, материалы

Вопрос: что над чем лежит и почему?

Сюда входят:

• surface;
• elevation;
• shadow;
• scrim;
• modal layer;
• popover;
• sheet;
• glass/material;
• z-index logic.

Правило:

Глубина должна объяснять слой и состояние, а не украшать.

Читать:

• Apple — Materials
• Material — Elevation

4.16. Графика и visual assets

Вопрос: какую работу выполняет картинка?

Типы:

• photo;
• 2D illustration;
• 3D render;
• isometry;
• product screenshot;
• device mockup;
• pictogram;
• diagram;
• motion graphic.

Правило:

3D для объекта и ощущения.
Изометрия для системы и связи.
Фото для реальности.
Скриншот для доказательства.
Пиктограмма для быстрого смысла.

Читать:

• NN/g — Using Imagery in Visual Design
• Microsoft — Fluent Illustrations
• Atlassian — Illustrations

4.17. Иконки и пиктограммы

Вопрос: можно ли понять действие/категорию с первого взгляда?

Разделение:

• icon = действие/навигация/status;
• pictogram = крупная идея/категория/объяснение.

Правила:

• unfamiliar icon needs label;
• icon-only action needs tooltip/fallback;
• one icon pack;
• consistent stroke/fill/grid;
• не делать некликабельное похожим на кнопку.

Читать:

• IBM Carbon — Pictograms
• Apple — Icons
• Material — Icons

4.18. Data visualization и dashboards

Вопрос: какое решение помогает принять график?

Data-viz отвечает за:

• chart type;
• comparison;
• trend;
• anomaly;
• baseline;
• color encoding;
• annotations;
• dashboard density;
• table/chart balance.

Правило:

Dashboard не кладбище графиков, а инструмент решения.

Читать:

• Edward Tufte — The Visual Display of Quantitative Information
• Cole Nussbaumer Knaflic — Storytelling with Data
• Stephen Few — Information Dashboard Design

4.19. Motion design

Вопрос: как состояния связываются во времени?

Motion нужен для:

• feedback;
• continuity;
• hierarchy;
• spatial relationship;
• loading;
• direct manipulation;
• delight.

Пропорция:

80% functional feedback
15% transitions
5% delight

Читать:

• Apple — Motion
• Material — Motion
• Val Head — Designing Interface Animation
• Rachel Nabors — Animation at Work

4.20. Формы и ввод

Вопрос: как человек безопасно вводит данные?

Сюда входят:

• labels;
• helper text;
• masks;
• validation;
• error summary;
• keyboard type;
• progress in long forms;
• save/recovery;
• trust signals.

Правило:

Форма - это разговор, а не список полей.

Читать:

• GOV.UK — Form structure
• GOV.UK — Error message

4.21. Navigation, search, filters

Вопрос: как человек перемещается, ищет и сужает выбор?

Разделять:

• navigation = куда идти;
• search = найти известное/примерное;
• filters = сузить набор;
• sort = поменять порядок;
• tabs = переключить views;
• chips = показать активные ограничения.

Читать:

• Apple WWDC26 — Design intuitive search experiences
• Rosenfeld et al. — Information Architecture

4.22. Accessibility и inclusive design

Вопрос: работает ли интерфейс для людей с разными возможностями и условиями?

База:

• semantic markup;
• keyboard;
• focus;
• contrast;
• target size;
• screen reader labels;
• captions/transcripts;
• reduced motion;
• error identification;
• reflow/zoom.

Правило:

Accessibility не чеклист в конце, а ограничение дизайна с первого решения.

Читать:

• WCAG — Guidelines
• Heydon Pickering — Inclusive Components
• Sarah Horton, Whitney Quesenbery — A Web for Everyone

4.23. Responsive, mobile, spatial

Вопрос: как интерфейс живет на разных экранах, вводах и средах?

Сюда входят:

• mobile-first;
• breakpoints by content;
• container queries;
• safe areas;
• reachability;
• gestures;
• bottom sheets;
• live activities;
• foldable/large screens;
• visionOS/spatial layout.

Читать:

• Apple — Designing for iOS
• Apple — Spatial Layout
• Ethan Marcotte — Responsive Web Design

4.24. Design systems и tokens

Вопрос: как сделать так, чтобы качество не развалилось при росте продукта?

Система включает:

• principles;
• tokens;
• components;
• states;
• patterns;
• documentation;
• governance;
• Figma/code sync;
• accessibility rules;
• examples/anti-examples.

Правило:

Design system - это не UI-kit, а способ принимать одинаковые решения.

Читать:

• Alla Kholmatova — Design Systems
• Brad Frost — Atomic Design
• Figma — Design systems in AI era

4.25. Brand и visual identity

Вопрос: какой характер продукта и где он должен проявляться?

Brand in UI включает:

• audience;
• positioning;
• tone;
• color mood;
• typography;
• shape;
• imagery;
• motion;
• density;
• trust level;
• moments of delight.

Правило:

Бренд должен усиливать сценарий, а не ломать platform familiarity.

Читать:

• Apple WWDC26 — Communicate your brand identity on iOS
• Apple — Branding

4.26. AI / hybrid / generative UI

Вопрос: как дать AI-помощь без потери контроля?

AI UI требует:

• capability intro;
• prompt/input;
• controls;
• generating state;
• tool call state;
• sources/provenance;
• draft/applied separation;
• edit/reject/regenerate;
• undo;
• uncertainty;
• privacy note.

Правило:

AI output должен быть workflow, а не просто красивый ответ.

Читать:

• Microsoft — HAX Guidelines
• Google — PAIR Guidebook
• IBM — Carbon for AI
• Google Research — Generative UI

4.27. Product craft, performance, quality

Вопрос: почему продукт ощущается дорогим и живым?

Craft включает:

• speed;
• responsiveness;
• keyboard flow;
• edge cases;
• empty/error/loading states;
• naming;
• alignment;
• consistency;
• animation restraint;
• real data;
• no design debt.

Linear важен не темной эстетикой, а дисциплиной качества. Todoist важен не минимализмом, а скоростью capture и отсутствием сопротивления.

Читать:

• Linear — Why is quality so rare?
• Figma — Karri Saarinen's 10 rules
• Doist — Design and development workflow

5. Что не входит в карту как отдельная область

В карте нет как самостоятельных областей:

• Tailwind/shadcn - инструменты и заготовки, а не дизайн-дисциплина.
• Glassmorphism/neumorphism/brutalism - стилистические приемы; выбор стиля описан в разделе 13 DESIGN_RULES.md.
• 3D/isometry как "модный стиль" - разбирается в области графики (4.16), где важна работа ассета.
• Разрозненные подборки из соцсетей - сырье для вдохновения, а не источник правил.
• Большой глоссарий терминов - справочный материал другого жанра, карту областей он раздувает.

6. Главные связки

Экран

IA + hierarchy + spacing + typography + actions + states + accessibility

Кнопка

action hierarchy + label + color role + shape + target size + states + focus

Форма

IA + content + input behavior + validation + error recovery + trust

Dashboard

data question + chart/table choice + density + comparison + alerts + drill-down

Landing

positioning + brand + product proof + imagery + CTA + trust

AI feature

user goal + input + model state + output as draft + provenance + apply/undo

7. Порядок изучения

Первый слой

1. Восприятие и гештальт.
2. Визуальная иерархия.
3. Spacing/layout.
4. Типографика.
5. Цвет.

Второй слой

1. IA.
2. Контент-дизайн.
3. Интеракция.
4. Формы/states.
5. Accessibility.

Третий слой

1. Responsive/mobile.
2. Motion.
3. Design systems.
4. Графика/иконки/data-viz.
5. Бренд/style.

Четвертый слой

1. UX research.
2. Product craft.
3. AI/generative UI.
4. Service design.
5. Реальные продукты и разборы.

8. Какие вопросы задавать по любой области

Что это решает?
Что ломается без этого?
Какие правила у области?
Какие анти-паттерны?
Как это проявляется в живом продукте?
Как проверить?
Как зафиксировать в дизайн-системе?
Какие книги/источники дают фундамент?

9. Главный вывод

Хороший интерфейс появляется не из одного "стиля", а из согласованности дисциплин:

контекст -> структура -> поведение -> визуальная система -> состояния -> бренд -> проверка

Слабый интерфейс обычно делает наоборот:

стиль -> карточки -> цвета -> случайные кнопки -> потом пытаемся понять сценарий

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