«Семь раз отмерь, один раз отрежь» — эта пословица предельно точно объясняет, зачем нужен прототип.
Этап прототипирования — важная часть в процессе создания интерфейса, так как именно здесь появляется будущий прообраз визуальной коммуникации объекта с пользователем.
Архитектура интерфейса
К интерфейсу относятся все элементы на устройстве пользователя, которыми можно управлять. Давайте разберем подробнее те, с которыми будут напрямую взаимодействовать пользователи:
Прототипировать архитектуру интерфейса лучше всего в облачных приложениях/платформах, которые дают доступ для работы целой команде.
Miro (система для управления задачами) визуально выглядит как доска для управления проектами, в ней можно прототипировать архитектуру интерфейса, передвигая элементы и управлять компонентами.
Интерфейсы конструируют по принципам атомарного дизайна.
Интерфейс приложения «Калькулятор» 2007 vs 2024
При проработке элементов помните о пользователях. Сведите к минимуму нагрузку на их память, сделав объекты, действия и параметры заметными.
Интерфейс приложения «Книги» 2007 vs 2024
Задание: Найдите 3 примера интерфейса и разбейте его на атомы в Miro.
Результат: Доска в Miro c атомарной структурой 3 интерфейсов, защита в группе.
10 принципов разработки интерфейса
Интерфейс приложения «Диктофон» 2007 vs 2024
Следующие 5 принципов касаются непосредственно разработки прототипа:
Интерфейс приложения «Заметки» 2007 vs 2024
Прототипирование архитектуры интерфейса
Прототипирование — один из основных этапов создания любого интерфейса, будь то приложение, пульт или касса самообслуживания в супермаркете.
Инструменты прототипирования — это сервисы, которые позволяют пользователям создавать интерактивные прототипы, имитирующие внешний вид и логику работы конечного продукта, например ProtoPie, Figma или Adobe Illustrator.
На видео мы видим процесс экспорта прототипа банковского приложения Probank из Figma в ProtoPie. Технически прототип выглядит как система страниц или экранов, соединённых общей логикой и дизайном. Чтобы создать прототип, сначала нужно сделать вайрфреймы (схематичное чёрно-белое отображение структуры блоков конкретной страницы) или отрисованные в дизайн-концепции экраны.
Первый тип страниц можно собрать в low-fi-прототип (англ. low fidelity — низкая точность), второй — в hi-fi-прототип (англ. high fidelity — высокая точность).
Прототип можно собрать и в облачной программе Figma. На видео показан ускоренный урок сбора одного экрана приложения.
Задание: Создайте прототип интерфейса для своего объекта на основе принципов атомарного дизайна в Miro.
Результат: Доска в Miro c атомарной структурой аритектуры интерфейса, защита в группе.
