Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Посібник з Wireframing для початківця

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

Ukrainian (українська мова) translation by Ivan Gryaziev (you can also view the original English article)

Розробка wireframe це важливий этап проектування будь-якого дизайну.  Головним чином wireframe задають ієрархію інформації в вашому дизайні. Вони допомагають визначити місце елементів в макеті в залежності від того, як ми б хотіли, щоб користувачі сприймали інформацію.  Якщо ви ще не використовуєте wireframes, саме час спробувати.

A simple wireframe

Wireframe - це щось на зразок двомірного чорно-білого креслення будинку, яке робиться перед тим, як його побудувати.  Подібно то того як і в дизайні інтерфейсів, ви не можете почати відразу з створення піксельних шарів в фотошопі або з написання коду не знаючи, яка інформація де буде знаходитися.

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

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

Wireframe важливі оскільки вони дозволяють дизайнеру запланувати розташування елементів і те як буде відбуватися взаємодія з інтерфейсом, не відволікаючись на вибір кольору, шрифту, або навіть тексту.  Я люблю пояснювати своїм клієнтам, що якщо користувач не може зрозуміти, що робити на чорно-білому wireframe, то колір теж навряд чи допоможе. Кнопка повинна бути помітна навіть без блиску і яскравого забарвлення.

Як і з фундаментом будівлі, він повинен, в першу чергу, бути міцним, перш ніж ви вирішите, в який колір його пофарбувати.


Крок 1: Збираемо натхнення

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

I Heart Wireframes

Ви можете також спробувати цю маленьку браузерну програмку, Wirify, яка дозволяє зробити wirefrme з будь-якого вже існуючого сайту.

cnncom with wirify

Якщо ви будете регулярно звертати увагу на те, як інші дизайнери роблять свої wirefrmes, то в вас сформується добре уявлення про те, як саме wireframe допомагають організувати інформацію на екрані.


Крок 2: Плануємо

Дизайн - це живий процес. Тому різні дизайнери по-різному ставляться до wirefarme і до того, як їх потім перетворювати в макети або код.  Ви повинні знайти те, що підкреслить ваші сильні сторони і буде більш зручно для вас. Схема внизу показує деякі типові процеси:

Wireframes Process

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

Що стосується мене, то я провела чимало циклів від дизайну до коду, щоб вибудувати досить налагоджений процес.  Багато можуть не подумати про це, але я також враховую і який html/css фреймфорк буде використовуватися в проекті.

Наприклад, я зробила багато сайтів за допомогою Blueprint, тому і в wireframe, і в Blueprint я зазвичай використовувала таку саме сітку з 12 колонок.  Це дозволяє значно прискорити процесс прототипування і розробки, так як замість того, щоб прописувати ширину кожного елементи в стилях css, ширина визначається шириною колонок від 1 до 12.  Зараз я використовую cssgrid, так як він підтримує адаптивний дизайн, але це та ж сітка з 12 колонок, яку ви можете завантажити як фотошоп шаблон.

the 12-column cssgrid template

Як я вже писала раніше, тільки ви вирішуєте, що буде зручніше для вас. Може вам доведеться спробувати той чи інший процес кілька разів, перш ніж вирішити, що він найбільш ефективний.  Деяким може бути простіше робити начерки, і вони можуть не використовувати взагалі ніяких інструментів для створення wireframes. Іншим дизайнерам можливо важливіше робити якомога більше кроків, щоб звести до мінімуму відхилення або дати можливість продумати кожну ітерацію на тій стадії, коли дизайн тільки набуває свої обриси.

Так чи інакше, ви розробляєте свій власний робочий процес, але в рамках цього керівництва як приклад, я буду дотримуватись свого звичайного робочого процесу. 

Я використовую Illustrator для створення wireframe здебільшого в силу трьох причин:

  1. Стилі - можна зберегти стилі для шрифтів і об'єктів та знову використовувати їх, також як і в CSS
  2. Легкість одночасної зміни, переміщення і масштабування декількох об'єктів.
  3. Можна з легкістю пізніше перемістити дизайн в Photoshop. 

Правда, в залежності від проекту, я можу використовувати і інші інструменти.  У наступному розділі я коротко перелічу деякі популярні інструменти, їх плюси і мінуси.


Крок 3: Вибираємо інструмент

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

Balsamiq

Balsamiq став популярним, так як wireframe, зроблені з його допомогою, нагадують начерки. І це відразу дає зрозуміти, що wireframe не є фінальним продуктом, а знаходиться в стадії розробки. У Balsamiq також є величезна бібліотека готових елементів, які можна легко перетягувати для створення своїх wireframe.

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) за можливість створювати деталізовані wireframe.

Axure

Axure був одним з перших професійних інструментів для створення wireframes / прототипів, так що він майже як дідусь для всіх них.  До недавнього часу він був доступний тільки для Windows.  Великого досвіду його використання у мене немає, але він вважається широко поширеним інструментом серед професіоналів.

Flairbuilder

Новачок Flairbuilder дуже добре працює з взаємодіями.

from show hide to if-else interactions

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

Онлайн додатки

Якщо десктопні програми вам не до вподоби, то є такі інструменти як mockflow, hotgloo і mockingbird.

Keynote/Powerpoint

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

Я особливо рекомендую його використовувати, якщо вам треба швидко зробити wireframe або прототип для мобільного застосування.  Хорошою альтернативою може бути Keynote Kungfu.

Adobe CS

Для тих, хто вже знайомий з пакетом Adobe, Fireworks, Illustrator або Indesign цілком можуть служити інструментами для створення wireframe з урахуванням їх певних плюсів і мінусів.

Fireworks

За допомогою Fireworks можна виконати весь дизайн-процес, від простого wireframe до повної візуалізації.  Fireworks підтримує шаблони сторінок (багаторазово використовувані шаблони, зміни в яких застосовуються на всіх дочірніх сторінках з даного шаблоном), бібліотеку елементів, і тут ви також можете досить швидко робити інтерактивні прототипи.

Illustrator

Це один з моїх улюблених інструментів, так як я його вже дуже добре знаю і впевнена, що і багато тутешніх дизайнери його знають.  Я використовую Illustrator для швидкого створення складних wireframe, яким не потрібна інтерактивність. 

Чим же він кращій?  У можливості експорту в 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: Задаємо розташування елементів за допомогою блоків

Намалюйте блоки поверх сітки.  Продумайте порядок подання інформації для ваших користувачів. Найпростіший порядок - зверху вниз, а далі зліва направо. Нижче наведено приклад wireframe з розташуванням елементів, які зазвичай застосовуються компаніями з розробки ПЗ:

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

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


Крок 6: Задаємо інформаційну ієрархію за допомогою типографіки

Коли вас влаштовує розташування блоків, приступайте до поступового наповнення їх текстом, щоб отримати уявлення, чи добре структурована інформація. Керуйтеся правилом, що інформація для вашої аудиторії повинна бути зрозуміла навіть на чорно-білому wireframe.

Використовуйте різний розмір шрифту, щоб почати виділяти різні види інформації.

Сміливо експериментуйте на цій стадії. Іноді, додавши більше деталей, ви можете побачити, що дане розташування елементів не зовсім підходить.  В цьому і полягає мета wireframe: зробити якомога більше ітерацій, щоб знайти найкращі способи подання інформації, яку необхідно донести.

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

Крок 7: Уточнюємо півтонами сірого

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


Крок 8: Високорівнева wireframe

Цей крок необов'язковий, але якщо ви бажаєте йти крок за кроком, ви можете спробувати і його.  Високорівневий wireframe просто передбачає додавання більшої кількості деталей, але без докладних візуальних деталей.  Це може бути використання реального тексту в wireframe і спроба встановити реальні розміри шрифту:

Це може бути і використання кольору:

Сенс в тому, що на стадії графічного дизайну / кодування ви будете вже наводити красу, а не пробувати і експериментувати. Краще швидко робити цикли з ітераціями (зворотний зв'язок <-> вайрфрейм) в зручних для вас інструментах для створення wireframe, ніж рухати шари і пікселі в Photoshop.

З урахуванням вищесказаного, бувають випадки, коли краще пропустити деталі і перейти відразу до інтерактивного прототіпірованію (як роблять в компанії 37signals).  Причиною тому служить те, що деякі деталі взаємодії не можна повністю зобразити на плоскому зображенні.

Якщо ви працюєте з командою розробників, то ви можете передати їм схвалені wireframe для створення ними базового фреймворка, в той час поки ви будете працювати над дизайн-макетом.


Крок 9: Перетворюємо wireframe в дизайн-макет

Як я згадувала раніше, я вважаю за краще робити wireframe в Illustrator, так як я можу експортувати їх в .psd, зберігши майже всі текстові шари редагуються.  І в Photoshop мені вже не треба так багато редагувати текст (в Photoshop можливості для верстки тексту гірше, хоча в версії CS6 і є поліпшення):

Photoshop Export Options

Ось приклад wireframe, який став дизайн-макетом.  Основа wireframe здебільшого залишилася недоторканою, але з'явилися графічні правки.  Ви можете також подивитися цей сайт онлайн:

Webwise 2010

Висновок

Ось і кінець цього керівництва.  Сподіваюся, воно надихнуло вас на експерименти!  Як і з будь-яким дизайн-процесом, не бійтеся робити ітерацію, за ітерацією, та за ітерацією.

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

Задавайте будь-які питання в коментарях, і спасибі за те, що прочитали!


Додаткові ресурси

Ці ресурси можуть бути також корисні, якщо ви хочете отримати більше інформації про wireframe.

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.