me_edu
К курсу

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

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

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

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

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

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

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

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

Чем 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
Временная диаграмма помогает увидеть порядок фронтов и логических состояний.

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

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

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

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

Типографика

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

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

Типографика и цвет
BAR CHART · LINEAR SCALE017.53552.57070Нейтральные20Основной10Акцент
Палитра: много нейтрального фона, немного основного и совсем чуть-чуть акцента для действий

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

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

Доступность

Прототип, тесты, доступность
КВАДРОКОПТЕР · ВИД СВЕРХУFCносM1CWM2CCWM3CWM4CCW ось моторовконтроллер полётаX-frame quadcopterM1/M3 — CW · M2/M4 — CCWпитание и сигналы см. wiring
Вид сверху на квадрокоптер: рама, моторы, винты и полётный контроллер.