Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Руководство по вайрфреймам для начинающих

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

Создание вайрфреймов является важным шагом любого дизайн-процесса. Главным образом вайрфреймы задают иерархию информации в вашем дизайне. Они помогают определить место элементов в макете в зависимости от того, как мы бы хотели, чтобы пользователи воспринимали информацию. Если вы еще не используете вайрфреймы, самое время попробовать.

A simple wireframe

Вайрфреймы - это что-то вроде двухмерного черно-белого чертежа дома, который делается перед тем, как его построить. Так и в дизайне интерфейсов, вы не можете начать сразу с создания пиксельных слоев в фотошопе или с написания кода не зная, какая информация где будет находиться.

Если посмотреть еще глубже, то вайрфреймы также очень полезны для того, чтобы определить, как пользователи будут взаимодействовать с интерфейсом. Например, они могут содержать разные состояния кнопок или меню.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Вайрфреймы важны поскольку они позволяют дизайнеру запланировать расположение элементов и взаимодействие с интерфейсом, не отвлекаясь на выбор цвета, шрифта, или даже текста. Я люблю объяснять своим клиентам, что если пользователь не может понять, что делать на черно-белом вайрфрейме, то цвет тоже вряд ли поможет. Кнопка должна быть заметна даже без блеска и яркой раскраски. 

Так и с фундаментом здания, он должен, в первую очередь, быть крепким, прежде чем вы решите, в какой дорогой оттенок вы его покрасите.


Шаг 1: Вдохновлямся

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

I Heart Wireframes

Вы можете также попробовать эту маленькую браузерную программку, Wirify, которая позволяет "завайрфреймить" любой сайт.

cnncom with wirify

Если вы будете регулярно обращать внимание на то, как другие дизайнеры или сайты делают свои вайрфреймы, со временем у вас сформируется представление о том, как именно вайрфреймы помогают организовать информацию на экране.


Шаг 2: Планируем

Дизайн  - это живой процесс. Поэтому разные дизайнеры по-разному подходят к вайрфреймам и тому, как их потом превращать в макеты или код. Вы должны найти то, что подчеркнет ваши сильные стороны и будет наиболее удобно для вас. Схема внизу показывает некоторые типичные процессы (на схемах: Набросок > вайрфрейм > дизайн-макет > код; Набросок > вайрфрейм > высокоуровневый вайрфрейм > дизайн-макет > код;  Вайрфрейм > высокоуровневый вайрфрейм > дизайн-макет > код;  Набросок > код; Вайрфрейм > интерактивный прототип > дизайн-макет > код)

Wireframes Process

Компания 37signals хорошо известна тем, что пропагандирует использование набросков, от которых переходят сразу к коду. Однако некоторые их дизайнеры, кажется, все же используют дизайн-макеты.

Что касается меня, то я провела немало циклов от дизайна к коду, чтобы выстроить достаточно налаженный процесс. Многие могут не подумать об этом, но я также учитываю и какой html/css фреймфорк будет использоваться в проекте.

Например, я сделала много сайтов при помощи Blueprint, поэтому и в вайрфремах, и в Blueprint я обычно использовала одинаковую сетку из 12 колонок. Это позволяет значительно ускорить прототипирование и разработку, так как вместо того, чтобы прописывать ширину каждого элементы в стилях css, ширина определяется шириной колонок от 1 до 12. Сейчас я использую cssgrid, так как он поддерживает адаптивный дизайн, но это та же сетка из 12 колонок, которую вы можете скачать как фотошоп шаблон.

the 12-column cssgrid template

Как я и писала раньше, только вы решаете, что удобнее для вас. Может вам придется попробовать тот или иной процесс несколько раз, прежде чем решить, что он наиболее эффективный. Некоторым может быть проще делать наброски, и они могут не использовать вообще никаких инструментов для создания вайрфреймов. Другим дизайнерам желательнее делать как можно больше небольших шагов, чтобы свести к минимуму отклонения или дать возможность продумать каждую итерацию на той стадии, когда дизайн только приобретает свои очертания.

Так или иначе, вы выработаете свой собственный процесс, но в рамках этого руководства как пример, я буду использовать свой обычный процесс (на схеме: Вайрфрейм (Illustrator) > высокоуровневый вайрфрейм  (Illustrator) > дизайн-макет (Photoshop) > код (с использованием cssgrid))

Я использую Illustrator для создания вайрфремов по большей части в силу трех причин:

  1. Стили - можно сохранить стили для шрифтов и объектов и снова использовать их, также как и в CSS
  2. Легкость одновременного изменения, перемещения и масштабирования нескольких объектов. 
  3. Легкость перемещения в Photoshop.

Правда, в зависимости от проекта, я могу использовать и другие инструменты. В следующем разделе я кратко перечислю некоторые популярные инструменты, их плюсы и минусы.


Шаг 3: Выбираем инструмент

Вот некоторые из популярных инструментов в произвольном порядке:

Balsamiq

Balsamiq стал популярным, так как вайрфремы, сделанные с его помощью, напоминают наброски. И это сразу дает понять, что вайрфрейм не является финальным продуктом, а находится в стадии разработки. В Balsamiq также есть огромная библиотека готовых элементов, которые можно легко перетаскивать для создания своих вайрфремов.

Sample Balsamiq wireframe from the Balsamiq website

Он работает практически на любой платформе: Mac, Windows и Linux, также существует веб версия, если вы предпочитаете работать в облаке. Сторонние приложения, такие как iMockups для iOS, например, также поддерживают экспортные форматы Balsamiq.

Omnigraffle

Давний любимец на Mac, Omnigraffle также имеет большую библиотеку готовых элементов, пополняемую пользователями и получившую широкую поддержку - Graffletopia

youll like omnigraffle if you enjoy using beautiful stencils like this one

Поскольку приложение Omnigraffle разрабатывалось специально для создания схем, у него есть продвинутые функции, как, например, автоматическое размещение, настраиваемые стили объектов, умные направляющие и инструменты для диаграмм. Некоторые из этих функций доступны и в пакете Adobe CS, но если его у вас нет, то Omnigraffle предлагает неплохую цену (~$100) за возможность создавать детальные вайрфремы.

Axure

Axure был одним из первых профессиональных инструментов для создания вайрфремов/прототипов, так что он почти как дедушка для всех них. До недавнего времени он был доступен только для Windows. Большого опыта его использования у меня нет, но он считается широко применяемым инструментом среди профессионалов.

Flairbuilder

Новичок Flairbuilder очень хорошо работает с взаимодействиями.

from show hide to if-else interactions

У него также есть огромная библиотека элементов, поддержка шаблонов страниц и возможность экспорта прототипа для просмотра его онлайн.

Онлайн приложения

Если десктопные приложения вам не по нраву, то есть такие инструменты как mockflowhotgloo и mockingbird.

Keynote/Powerpoint

Keynotopia "превращает ваш любимый инструмент для презентаций в лучший инструмент для быстрого прототипирования макетов для мобильных, веб и настольных приложений". Если вы не пользуетесь mac, не страшно. Keynotopia работает и с шаблонами powerpoint.

Я особенно рекомендую его использовать, если вам надо быстро сделать вайрфрейм или прототип для мобильного приложения. Другой хорошей альтернативой может быть Keynote Kungfu.

Adobe CS

Для тех, кто уже знаком с пакетом Adobe, Fireworks, Illustrator и Indesign вполне могут служить инструментами для создания вайрфреймов с учетом их определенных плюсов и минусов.

Fireworks

С помощью Fireworks можно выполнить весь дизайн-процесс, от простого вайрфрема до визуализации. Fireworks поддерживает шаблоны страниц (многократно используемые шаблоны, изменения в которых применяются на всех дочерних страницах по данному шаблону), библиотеку элементов, и вы также можете достаточно быстро делать интерактивные прототипы.

Illustrator

Это один из моих любимых инструментов, так как я его уже очень хорошо знаю и уверена, что и многие здешние дизайнеры его знают. Я использую Illustrator для быстрого создания сложных вайрфреймов, которым не нужна интерактивность.

В чем он выигрывает?  В возможности экспорта в PSD редактируемых слоев, отличной поддержке копирования/вставки в Photoshop, а также в возможностях верстки текста, которые можно сохранять, изменять и многократно использовать, почти как в CSS.

Indesign

Схожие с Illustrator плюсы, но еще лучшая поддержка возможностей верстки текста, работы с шаблонами страниц и недавно добавленная функция создания интерактивных прототипов.

Have you seen the interactive controls of InDesign

Я выбираю Indesign, когда мне надо сделать интерактивный многостраничный прототип высокой точности. Единственным "но" для меня является слабая поддержка экспорта в Photoshop для последующего создания дизайн-макетов.

ProtoShare

"Прототипирование с широкими возможностями без проблем." Недавняя 9 версия с новой панелью инструментов wysiwyg (примечание переводчика: what you see is what you get - что видишь, то и получаешь). Стоит попробовать.


Шаг 4: Настраиваем сетку

Существует много теории о системе сеток, но, не вдаваясь в детали, я определю сетку как "структурированное и простое расположение элементов".

Я использую Illustrator в этом руководстве, но эти же шаги могут быть выполнены и в любом другом инструменте.

Сначала задайте размер документа. Я задала размер 1280 x 900, так как я буду использовать cssgrid, который позволит легко изменять размер экрана от мобильного до максимум 1140 пикселей. 

Вставьте загруженный из cssgrid шаблон в свой документ.

Совет:

Существует много шаблонов сеток, но если вы хотите  настроить свой собственный шаблон, попробуйте responsify.it.


Шаг 5: Задаем расположение элементов при помощи блоков

Нарисуйте блоки поверх сетки. Продумайте порядок представления информации для ваших пользователей. Самый простой порядок - сверху вниз, а далее слева направо. Ниже пример вайрфрема с расположением элементов, обычно применяемым компаниями по разработке ПО: 

Иногда вы можете проявить креативность в расположении элементов, в зависимости от ваших целей и типа организации, для которой вы делаете дизайн. Однако стоит всегда держать в уме информационную иерахию. Ниже реальный пример для одного из моих клиентов, в котором я отошла от принятого многими технологическими компаниями подхода к расположению элементов:

А это пример расположения элементов для блога, в котором задано точное расположение блоков для рекламы с конкретными инструкциями для клиента:


Шаг 6: Задаем информационную иерархию при помощи типографики

Когда вас устраивает расположение блоков, приступайте к постепенному наполнению их текстом, чтобы получить представление, хорошо ли структурирована информация. Руководствуйтесь правилом, что информация для вашей аудитории должна быть понятна даже на черно-белом вайрфрейме.

Используйте разный размер шрифта, чтобы начать выделять разные виды информации.

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

В примере, который ниже, я хотела, чтобы скриншоты стали заметнее, и также начала использовать черные блоки для тех областей, на которых будет делаться визуальный акцент:

Шаг 7: Уточняем полутонами

Разные градации серого помогают задать больший или меньший акцент на элементах без использования цвета. На самом деле, полутона пригодятся и во время создания дизайна-макета.


Шаг 8: Высокоуровневый вайрфрейм

Этот шаг необязателен, но если вы предпочитаете идти шаг за шагом, вы можете попробовать и его. Высокоуровневый вайрфрейм просто предполагает добавление большего количества деталей, но без подробных визуальных деталей. Это может быть использование реального текста в вайрфрейме и попытка задать реальные размеры шрифта:

Это может быть и использование цвета:

Смысл в том, что на стадии графического дизайна/кодирования вы будете уже наводить красоту, а не пробовать и экспериментировать. Лучше быстро делать циклы с итерациями (обратная связь <-> вайрфрейм) в удобных для вас инструментах для создания вайрфремов, чем двигать слои и пиксели в Photoshop.

C учетом вышесказанного, бывают случаи, когда лучше пропустить детали и перейти сразу к интерактивному прототипированию (как делают в 37signals). Причиной тому служит то, что некоторые детали взаимодействия нельзя полностью отразить на плоском изображении.

Если вы работаете с командой разработчиков, то вы можете передать им одобренные вайрфреймы для создания ими базового фреймворка, в то время пока вы будете работать над дизайн-макетом.


Шаг 9: Превращаем вайрфрейм в дизайн-макет

Как я упоминала ранее, я предпочитаю делать вайрфреймы в Illustrator, так как я могу экспортировать их в .psd, сохранив почти все текстовые слои редактируемыми. И в Photoshop мне уже не надо так много редактировать текст (в Photoshop возможности для верстки текста хуже, хотя в версии CS6 и есть улучшения):

Photoshop Export Options

Вот пример вайрфрейма, который стал дизайн-макетом. Основа вайрфрема по большей части осталась нетронутой, но появились графические правки. Вы можете также посмотреть этот сайт онлайн:

Webwise 2010

Выводы

Вот и конец этого руководства.  Надеюсь, оно вдохновило вас на эксперименты! Как и с любым дизайн-процессом, не бойтесь делать итерацию, за итерацией, за итерацией.

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

Задавайте любые вопросы в комментариях, и спасибо за то, что прочитали!


Дополнительные ресурсы

Эти ресурсы могут быть также полезны, если вы хотите получить больше информации о вайрфреймах, 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.