Блог Александра Сарычева

Глоссарий проектировщика интерфейсов. Часть 21 min read

В первой части я описал то, кто такой проектировщик интерфейсов, чем отличается проектирование от графического дизайна. Сейчас разберёмся с сущностями, с которыми непосредственно работает UX специалист.

Идея — idea — общий мысленный образ будущего продукта.
Рождается в голове. Прорабатывается дальше с помощью техник и инструментов.

Карта настроения — moodboard — подборка референсов различных готовых идей и концепций (исходников палитр, шрифтов, образов, интерфейсных решений) для создания своей концепции проекта, показывающая границы визуального стиля, нужный образ и настроение и вдохновляющих на работу. Используется, чаще всего, для визуального дизайна.
Инструменты: удобно хранить в Эверноте. Годится дропбокс (или любое другое облачное хранилище), пинтерест.
Видео с 404феста на тему.

Раскадровка — storyboard — рисунок (в виде комикса), который показывает как представитель целевой аудитории (пользователя) будет взаимодействовать с готовым продуктом (системой). Представляет собой описание возможной проблемы и её решение с помощью продукта.
Инструменты: лист, карандаш.

Эскиз — sketch — набросок будущего продукта. Пример возможной реализации идеи продукта в виде интерфейса (в грубом виде показывает расположение основных блоков, разделов, элементов и пр.).
Делается, прежде всего, для себя (для команды). Детализация низкая.
Инструменты: прежде всего бумага с ручкой, карандашом. Иногда полезны фломастеры разной толщины или ручки разных цветов. Готовые листы раз и два и три, под мобильные устройства (пользовался, рекомендую).

Блочная сетка — layout — колоночная структура (сайта), на которой показано где и какие группы содержимого будут расположены на будущем сайте (например, навигационное меню, баннеры, блоки новостей, карточек товаров, другие функциональные блоки).
Помогает при дальнейшей вёрстке прототипа/шаблона.
Инструменты: бумага (особенно с помощью трафаретов), интерактивные инструменты проектирования, в которых сетка рисуется с грубой детализацией. Например, Balsamiq.

Схема интерфейса, блочная схема — wireframe (досл. «каркас») — структурное расположение элементов интерфейса с примером контента (текстом, иллюстрациями, таблицами) и выделением акцентов, частично отображающее механику работы продукта. Не содержит графического оформления (визуального дизайна). Дополняется текстовым документом с описанием логики работы продукта и взаимодействия пользователя с ним.
Инструменты: Balsamiq, HotGloo.

Прототип — prototype — интерактивная модель продукта с упрощенной графикой и контентом, выполненная в виде html-кода. Отражает основные способы взаимодействия пользователя с сайтом в качестве готового продукта. Возможно использование JavaScript для иллюстрации интерактива. Не используется связь с сервером и базой данных.
Инструменты: HotGloo, Axure.

Макет — mockup — образец дизайна, выполненный в виде psd-файла, либо PNG. Передаёт структуру информации, визуализирует содержание и демонстрирует основные функциональные возможности в виде статических изображений. Позволяет понять, как будет выглядеть конечный продукт.
Инструменты: Photoshop, FireWorks, InDesign и пр.

Шаблон — template — интерактивная модель (сайта) с готовым дизайном и примером контента. Выполнена в виде полностью функционирующего html-файла и всем сопутствующим компонентами: изображениями, таблицами стилей, скриптами и т. п. Шаблон готов для загрузки на хостинг. В случае динамического сайта требуется подключение шаблона к серверным скриптам или готовой системе управления контентом (CMS). В статическом виде — готовый рабочий сайт.
Инструменты: любой редактор кода + фреймворки (Bootstrap, Zurb Foundation и пр.).

Картинка ниже хорошо иллюстрирует некоторые термины, которые я перечислил в двух постах.

Источник — http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

И несколько примеров
Продукт — конечный предмет, готовый к использованию с помощью интерфейса. Нуно отметить, что в него как может входить интерфейс (ложка), а может и не входить (и тогда используется внешний интерфес, а мы подключаемся по API), либо мы вообще пьём из чашки, не используя ложку. И в таком случае у нас вовсе меняется пользовательский опыт.

Интерфейс при этом может быть плохим: ручка ложки неудобной, погнутой, сама ложка с дырками.

Вариант использования продукта: можно пить, можно есть ложкой, а можно ещё разлить, и придётся вовсе воспользоваться салфеткой.

Персонаж: Серёжа, мальчик 8 лет, который не любит завтракать, а тем более хлопьями с молоком (хорошо, что хоть без пенки!), но в коробке лежит интересная игрушка, которая хоть как-то поддерживает интерес к хлопьям.

За рамками поста остались незатронуты такие термины как User-centered design (UCD), паттерн (http://en.wikipedia.org/wiki/Interaction_design_pattern)

25 сентября 2013
Рубрика: интерфейсы | Теги: термины | Один комментарий