me_edu
К курсу

Чертежи и схемы — UX/UI-дизайн: фундамент

17 листов. Чертежи векторные — печатаются чётко в любом масштабе. На чертежах есть размеры и сетка (1 клетка = указанному числу мм) — переносите на материал по клеткам.

Карта понимания

Как учиться на этом курсе
PROCESS DIAGRAM1вопрос2модель3пример4проба5вывод
Карта темы: от вопроса к самостоятельному выводу

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

Как учиться на этом курсе
STRUCTURAL BLOCK DIAGRAMCENTRAL UNITпонятиесхемапереноспримерошибкакритерийСтруктурная схемастрелки показывают поток данных/энергиимасштаб и расположение условные
Визуальный конспект удерживает понятие, пример, ошибку и критерий

Ритм практики и повторения

Как учиться на этом курсе
ITERATION CYCLEвспомнитьрешитьпроверитьисправить
Цикл закрепления: извлечь из памяти, применить, проверить и исправить

Модель, кейс, артефакт

Профессиональный практикум: кейс, модель и итоговый артефакт
STRUCTURAL BLOCK DIAGRAMCENTRAL UNITТемамодельартефакткейспрактикапроверкаСтруктурная схемастрелки показывают поток данных/энергиимасштаб и расположение условные
Профессиональная подача связывает модель, практику, проверку и результат ученика.

Модель курса

Атлас моделей: схема, пример, критерий и проект
STRUCTURAL BLOCK DIAGRAMCENTRAL UNITпонятиемодельпримеркритерийпроектСтруктурная схемастрелки показывают поток данных/энергиимасштаб и расположение условные
Учебная визуализация связывает понятие, пример, критерий и итоговый артефакт.

Чем UX отличается от UI

UX и UI
PROCESS DIAGRAM1Цель пользователя2UX: удобный путь3UI: ясная форма4Результат
UX задаёт удобный путь к цели, UI одевает его в понятную форму

Дизайн-процесс

UX и UI
PROCESS DIAGRAM1Исследование2Проектирование3Прототип4Тест5Итерация
Дизайн-процесс: от понимания пользователя к прототипу и улучшению по итогам тестов

Кто пользователь

Пользователи и сценарии
WIRING DIAGRAM · QUADCOPTER POWER/SIGNALPDB / AIOАКБ LiPoVBAT+GNDVBAT+GNDМотор 1ESC 1Мотор 2ESC 2Мотор 3ESC 3Мотор 4ESC 4Полётный контроллер(FC)Приёмник (RX)VBAT+GNDсигнал PWM/DSHOT3 фазы мотораWIRINGPWR / SIGNALGND common
Электрическая схема дрона разделяет силовую шину, регуляторы, сигнальные линии и общую землю.

Пользовательские сценарии и CJM

Пользователи и сценарии
PROCESS DIAGRAM1Осознал задачу2Нашёл решение3Сделал действие4Получил результат
Сценарий пользователя: проектируем весь путь к цели, а не отдельные экраны

Хик, Фиттс, Миллер

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

Очевидность и обратная связь

Законы юзабилити
PROCESS DIAGRAM1задача2сценарий3прототип4тест5решение
UX-процесс проверяет решение на пользовательском сценарии, а не на вкусе автора.

Как направить взгляд

Визуальная иерархия
PROCESS DIAGRAM1Заголовок (крупно)2Главное действие (акцент)3Детали (тише)
Иерархия ведёт взгляд: сначала главное и яркое, потом второстепенное

Типографика

Типографика и цвет
DATA PLOT · MEASUREMENT SERIES-3-1.7-0.312.33.75-2-10123P1P2P3P4xymeasured pointslinear trendapprox.: y = 0.50x + 0.00
Координатная плоскость связывает таблицу значений с видом зависимости.

Цвет и контраст

Типографика и цвет
COMPARATIVE CHART · LINEAR SCALE01428425670сред.70Нейтральныеmax20Основной10АкценткатегориязначениеЧтениеmax: Нейтральн…min: Акцент×7.0Среднее 33 · максимум 70 · минимум 10
Палитра: много нейтрального фона, немного основного и совсем чуть-чуть акцента для действий

Сетка и система отступов

Сетки, отступы, компоненты
PROCESS DIAGRAM1задача2сценарий3прототип4тест5решение
UX-процесс проверяет решение на пользовательском сценарии, а не на вкусе автора.

Компоненты и паттерны

Сетки, отступы, компоненты
STRUCTURAL BLOCK DIAGRAMCENTRAL UNITкомпонентpropsstateeventrenderСтруктурная схемастрелки показывают поток данных/энергиимасштаб и расположение условные
Компонентная схема связывает входные props, внутреннее состояние, событие и повторный рендер.

Прототипирование и тестирование

Прототип, тесты, доступность
ITERATION CYCLEПрототипТест на людяхВыводыУлучшение
Цикл проверки дизайна: прототип, тест, выводы, улучшение — и снова по кругу