Артефакты: макеты UI (wireframes)

Описание

Макет интерфейса (англ. wireframe, русск. некрасивое вайер, каркас) – это статическая схематическая иллюстрация страницы (формы), на которой отображено расположение и содержание отдельных элементов интерфейса пользователя (UI). Задача макета – показать содержание конкретной страницы, взаимное расположение блоков и отдельных элементов. В абсолютном большинстве случаев макеты интерфейса не раскрывают особенностей визуального дизайна (используются черный/белый цвет и их оттенки, стандартные шрифты, простейшие иконки).

Ближайшими родственниками макетов являются эскизы или наброски (sketches, скетчи), прототипы, дизайн-макеты (mockups). Соотношение между всеми этими артефактами я постаралась показать на картинке:

Итак, в зависимости от детализации артефакта, можно выделить 3 варианта: скетч, собственно макет (wireframe) и дизайн-макет (mockup). Каждый из этих вариантов можно сделать динамическим, превратив его в прототип интерфейса.

Макет интерфейса может также варьироваться по детализации. В самом простом варианте он превращается в диаграмму зонирования (reference zone), на которой показаны только блоки:

Примеры

Очень много примеров можно найти здесь http://www.wireframeshowcase.com/  и  здесь http://wireframes.tumblr.com/

Зачем использовать
  1. Проверить, что вы верно поняли заказчика. Заказчикам гораздо проще проверить, правильно ли вы поняли его идею, оценивая картинку, а не вчитываясь в полотно текста.
  2. Оценка юзабилити. Еще до того, как будет написана первая строка кода, вы можете провести юзабилити-тестирование на макетах и выявить потенциальные проблемы тогда, когда их исправление будет наименее болезненным.
  3. Постановка задачи разработчикам. Почти любая интерфейсная задача допускает огромное количество вариантов решения. Если вы не хотите, чтобы за юзабилити на проекте отвечал программист, лучше давать ему на вход не текстовое описание, а картинку.
  4. Постановка задачи дизайнерам. Если до разработки собственно дизайн-макета у вас уже будет на руках утвержденный макет интерфейса и референсная подборка, задача для дизайнера упростится, а вероятность несоответствия результата ожиданиям заказчика уменьшится в разы.
Подводные камни

1. Хоть макеты, как правило, и создаются до разработки визуального дизайна, некоторые вещи следует знать и учитывать уже на этом этапе. К примеру, если вы проектируете мобильное приложение для двух платформ – iOS и Android – до начала работы обязательно почитайте официальные рекомендации. Ни в коем случае не следует целиком полагаться на то, что дизайнер исправит потом все мелкие несоответствия: у этих платформ есть различия как в расположении элементов на экране, так и в подходе к навигации.

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

2. Цель макетов – описать функциональность («как это работает»), а не внешний вид («как это выглядит»). Но это ни в коем случае не означает, что их нужно клепать «на коленке» и на их внешний вид можно махнуть рукой. Главное эстетическое требование к макету – он должен быть аккуратен во всех смыслах. А в этом вам помогут следующие простые правила:

  • Используйте сетки для выравнивания элементов относительно друг друга.
  • Не бойтесь активно использовать отступы и белое пространства. Огромное количество макетов, которые попадали мне в руки, грешили именно тем, что все элементы были будто бы приклеены один к одному. Если вы добавите хотя бы немного «воздуха», макет будет значительно легче воспринимать.
  • Старайтесь минимизировать вариации в стилях оформления: не вводить лишних цветов, шрифтов, стилей выравнивания. Если в одном месте заголовки оформлены шрифтом Times New Roman 16, то пусть и в других местах используется тот же шрифт.
  • Не используйте «рыбу». Во-первых, реальный контент может занимать совсем не столько места, сколько вам бы хотелось. Во-вторых, даже близкий к реальному контент предпочтительнее бессмысленной «рыбы» в том плане, что он позволяет лучше себе представить результат, возможно – скорректировать представления заказчика о том, какого рода информация должна отображаться.
  • Везде, где это возможно, используйте реальную информацию. Правило напоминает предыдущее, но с небольшой оговоркой. Речь об избегании “удобных” сокращений (“Иван Иванов” вместо реалистичных имен, которые могут быть намного длиннее и поломать всю задумку, вроде “Ангелины Христорождественской”). Если реальные данные окажутся слишком длинными, проще решить проблему на стадии макета.
Полезные ссылки и инструменты

1. http://wireframes.linowski.ca/ – один из лучших блогов о макетах пользовательского интерфейса

2. http://www.conceptfeedback.com/ – сервис для оценки и обсуждения дизайна

3. Balsamiq  – простейший инструмент для создания макетов

Подробнее о нем можно почитать на сайте analyst.by: часть 1, часть 2.

4. Отличный набор иконок для макетов:

Leave a Reply

Your email address will not be published. Required fields are marked *