Unlimited Wordpress themes, plugins, graphics & 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

Bulgarian (Български) translation by Aglika Nenova (you can also view the original English article)

Схематичният дизайн е важна стъпка при създаване на дигитален дизайн. Това ще ви позволи да определите йерархията и да планирате оформлението, според това как бихте искали потребителя да възприеме информацията. Ако все още не сте използвали схематичен дизайн, то е време да си намокрите краката ...

A simple wireframe

Както при архитектурен проект - първо се прави и одобрява двуизмерен, черно-бял чертеж, преди да се премине към строеж на сградата.  Същото е и при дигиталния дизайн - не можеш да започнеш да създаваш слоеве с пиксели във Photoshop или да пишеш блокове от код, без да знаеш къде ще отиде информацията.

На по-дълбоко ниво, схематичният дизайн е много полезен с това, че помага да се определи как потребителят взаимодейства с интерфейса. Например, схемите могат да съдържат различни състояния на даден бутон или меню.

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

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

Както и основите на сградата трябва да са фундаментално здрави, преди да решите дали ще сложите скъпа боя.


Стъпка 1: Намиране на вдъхновение

Преди да се впуснем в повече детайли и тъй като една снимка е повече от хиляда думи, погледнете I ♥ wirefames. Ще можете да направите бърз преглед и визуално да възприемете как други дизайнери се справят при създаване на структурния скелет на дизайна.

I Heart Wireframes

Също така можете да си вземете чудесното допълнение към браузъра Wirify което ви позволява да видите "скелета" на всеки съществуващ сайт.

cnncom with wirify

Ако постоянно наблюдавате какво правят другите дизайнери, постепенно в съзнанието ви ще се оформи представа как схематичното представяне помага да подредите информацията на екрана.


Стъпка 2: Проектиране на процеса

Дизайнът е процес и за това различните дизайнери подхождат различно към схематичното представяне и пренасянето му към реална визия и код. Всеки трябва да намери метод, който ще му бъде удобен и ще му позволи да покаже най-доброто от себе си. Диаграмата по-долу показва няколко различни вида процеси:

Wireframes Process

37signals е известен с използването на скици и преминаване директно към код, въпреки, че изглежда, че някои от техните дизайнери включват и визуални модели (мокъпи) в процеса.

Аз съм преминал през достата дизайн-към-код цикли и съм стигнал до нещо като по-опростен процес.  Това е стъпка, за която някои хора може и да не се замислят, но аз също обмислям коя html/css рамка (framework), ще използвам в проекта.

Например, направил съм много сайтове на Blueprint, като приравнявам както схематичната структура (wireframe) така и Blueprint-a към решетка с 12 колони. Това значително ускорява процеса на прототипиране и програмиране. Не се налага да пиша ширината на всеки елемент в css стиловете, защото те са предварително определени от 1 до 12 колони широчина. Сега вече използвам cssgrid заради неговите възможности за риспонсив дизайн, но и той е настроен на 12-колонна решетка, която можете да свалите като фотошоп шаблон.

the 12-column cssgrid template

Както вече казах, от вас зависи кой процес ще изберете и понякога може да се наложи да опитате няколко пъти преди да разберете кой е най-ефективният за вас. Някой хора може да са наистина много добри в скицирането и да предпочетат да не използват готов инструмент за схематичен дизайн. Други пък ще предпочетат да имат колкото се може повече стъпки, за да намалят отклоненията или да им позволят да обмислят всяка отделна итерация докато дизайнът започне да придобива форма и вид.

Вероятно и вие ще си създадете свой любим процес, но за целите на това ръководство, ще използвам моя обичаен процес за пример:

Има три основни причини да използвам Illustrator за създаване на схемите си:

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

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


Изберете си инструменти

По-долу са представени няколко популярни програми в случаен ред:

Balsamiq

Balsamiq стана популярен с това, че схемите направени на него приличат на скици, с което веднага става ясно, че дизайнът не е завършен и работата е в процес. Също така Balsamiq има огромна библиотека от готови елементи, които могат да бъдат поставени лесно с drag-and-drop във вашия схематичен дизайн.

Sample Balsamiq wireframe from the Balsamiq website

Може да бъде използван на практика с всяка платформа за десктоп на Мас, Windows и Linux, а също така има и онлайн версия, ако предпочитате да работите в клауда. Други приложения като iMockups за iOS също поддържат форматите за експорт на Balsamiq.

Omnigraffle

Предишен фаворит на Мас, Omnigraffle притежава също голяма библиотека с компоненти за многократна употреба; Graffletopia.

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

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

Axure

Нещо като "дядото" на инструментите за схематичен дизайн, Axure беше един от първите такива туулове. Доскоро беше наличен само за Windows. Лично аз нямам голям опит с него, но знам, че се ползва от много професионалисти в бранша.

Flairbuilder

Новото попълнение Flairbuilder предлага много възможности за взаимодействия.

from show hide to if-else interactions

Също така има огромна библиотека, поддържа мастър страници и прототипа може да бъде експортиран за разглеждане онлайн.

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

Ако десктоп софтуера не е по ваш вкус, има онлайн приложения като mockflow, hotgloo и mockingbird.

Keynote/Powerpoint

Keynotopia "превръща любимата ви програма за презентации в най-добрият инструмент за бързо скициране при създаване на мобилни, уеб или десктоп приложения". За не-Мас потребители, без да се обиждате, Keynotopia предлага Powerpoint шаблони.

Препоръчвам го горещо, ако трябва да създадете бързо схема или прототип на мобилно приложение. Друга добра алтернатива е Keynote Kungfu.

Adobe CS

За запознатите с пакета на Adobe, Fireworks, Illustrator и Indesign са добри инструменти със своите предимства и недостатъци.

Fireworks

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

Illustrator

Това е един от любимите ми инструменти, защото вече го познавам много добре и съм сигурен, че много от дизайнерите тук също го познават добре. Използвам Illustrator когато искам да направя бърз, но сложен схематичен дизайн, без да е необходима интерактивност.

Какво го прави фаворит?  Възможността да експортира в PSD с редактируеми слоеве, възможност за copy/paste към 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: Настройване на решетката (grid)

Има много теория по отношение на решетъчните системи, но без да навлизам в детайл ще ги обясня така: "структуриран и лесен начин за подребда на елементите"

За това ръководство използвам Illustrator, но същото може да бъде постигнато с който и да е друг инструмент.

Първо, задайте размери на документа. Аз задавам 1280х900 px, защото ще използвам CSS решетка, която ще позволи на моя сайт лесно да се преоразмерява от мобилна резолюция до максимума от 1140 px.

Поставете, сваления от cssgrid шаблон във вашия документ.

Съвет:

Има голямо разнообразие от шаблони с решетки готови за сваляне, но ако искате да персонализирате своя, хвърлете един поглед на responsify.it.


Определяне на разположението с правоъгълни полета

Започнете с рисуване на правоъгълни полета върху решетката. Мислете за реда, в който искате да представите информацията на потребителя. От горе на долу е най-лесно, а после от ляво на дясно. По-долу е примерна схема, често използвана напследък от софтуерните компании. 

Понякога в зависимост от целите на задачата можете да подходите креативно с подредбата, но без да забравяте за необходимостта от йерархия на информацията. Това е реален пример от проект за мой клиент, където избягах от стандартния layout за технологична компания.

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


Стъпка 6: Йерархията на информацията с типография

След като сте удовлетворени от разположението на полетата, започнете да нанасяте части от съдържанието, за да придобиете представа дали информацията е добре структурирана. Правилото за успех е следното: информацията, която поднасяте на своята аудитория трябва да е ясна, дори и представена в черно/бяла схема.

Дори ползването на различни големини шрифт е добро начало за разграничаване на информацията по важност.

Не се притеснявайте да експериментирате на този етап. Понякога, добавяйки повече детайли, може да осъзнаете, че разпределението не е съвсем подходящо. В това е смисъла на процеса на схематично представяне: да бъдат направени колкото е възможно повече повторения, за да се достигне до най-добрия начин за представяне на информацията.

На примера по-долу бях решил, че искам снимките да имат по-голямо въздействие и реших да използвам черни полета за да покажа зоните, които ще привличат внимание в сайта.

Стъпка 7: Финални щрихи в сивата гама

Използването на цялата гама от сиви цветове ще ви помогне да определите визуалната сила на елементите в дизайна, без да се налага да избирате цветова палитра. Още повече, това може да бъде от помощ по време на процеса на дизайн.


Стъпка 8: Усложняване на схемата

Тази стъпка е по желание, но може да пробвате, ако искате нещата да се случват плавно. Усложняване на схемата означава да добавите колкото се може повече информация, без да натрупвате визуални елементи. Също така може да поставите реален текст в предназначеното за него поле и да се опитате да намерите подходяща големина на шрифта.

Може да добавите и цветове.

Основната идея е, че на етап програмиране ще се занимавате с фини корекции, без да правите повече чернови и опити. Извършвайки повторение на итерациите (обратна връзка <-> схема) в любимото ви приложение за схематичен дизайн е по-бързо отколкото местене на пиксели и слоеве във Photoshop.

Както писах по-горе, в определени случаи може да се окаже по-добре да пропуснете запълването с детайли и да преминете направо към интерактивен прототип (както е в 37signals). Причина за това е, че някои интерактивни връзки може да не са видими на плоско изображение.

Ако работите с екип от разработчици, може да искате да им дадете одобрените схематични дизайни, за да започнат работа по базовата структура, докато вие продължите с визуалното оформление.


Стъпка 9: Превръщане на схематичната структура във визия

Както вече казах, причината да предпочитам Illustrator е възможността за експортиране към Photoshop с работни слоеве. Когато вече съм във Photoshop едва ли ще ми се наложи да редактирам шрифтовете много (в CS6 инструментите за контрол на шрифтовете са значително подобрени):

Photoshop Export Options

Това е пример за схематичен дизайн превърнат в крайна визия. "Скелетът" от схематичния дизайн е напрактика непокътнат, въпреки че визуално изглежда различно.  Погледнете също и тази страница:

Webwise 2010

Заключение

Тук ще приключим този туториал. Надявам се, че ви вдъхнових да започнете с експериментите! Както при всеки дизайнерски процес не се отказвайте да опитвате отново и отново.

Също така отделете някакво време да експериментирате с различните инструменти и процеси. Това време ще ви се отплати щом веднъж намерите най-подходящото приложение.

Моля, ако имате въпроси да ги зададете в коментарите и благодаря за вниманието!


Допълнителни материали

Ако искате да се запознаете още по-добре със схематичния дизайн, погледнете и тези ресурси.

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.