Ако сте работили по някакъв сериозен творчески проект, трябва да сте запознати с творческия блок. Усещането е като да ударите тухлена стена: Нито една от идеите, които си представяте, не е достатъчно добра или не работи в реалния живот.
За дизайнерите усещането е много познато. Както всеки сложен проблем без видимо решение, интелигентният процес може да промени. Тук идва UX скициране .
UX скициране това е ключов аспект на дизайна за потребителското изживяване, въпреки че често се пренебрегва. Скициране това е много ефективен начин за комуникация на комуникационния дизайн, като същевременно позволява на дизайнерите да тестват различни идеи и да ги повтарят, преди да изберат една.
В тази публикация възнамерявам да покрия всичко, за което трябва да знаете UX скициране , включително следните точки:
При проектирането трябва да се имат предвид няколко опции, което води до избора и изпълнението на най-доброто. Дизайнерите обмислят възможностите си и след това започват да преглеждат детайлите, като по този начин правят дизайна на UX процес от две стъпки:
В първата стъпка се генерират много идеи, но тъй като те не могат да бъдат изцяло оформени, обикновено някои елементи липсват или са непълни. Най-важното е да се обмислят различни подходи и да се реши кой от тях е най-ефективен за конкретната задача и ограниченията на проекта.
Стъпка по стъпка избирате някои обещаващи варианти и започвате да обработвате детайлите, в резултат на което някои идеи стават неподходящи.
Вашият телени рамки може да се различава в зависимост от някои фактори, като желаното ниво на дизайн, цветове и стил, или ако трябва да се покаже на някого и т.н.
Откроих следните видове скици:
Това са първоначални скици. Детайлите от по-ниско ниво се забелязват само. Работи се с ограничен брой цветове.
Нарисувах много основни скици, за да разгледам проблема от различни ъгли, да разгледам различни решения. Когато рисувате тези скици, опитайте се да генерирате възможно най-много решения.
В тази конкретна стъпка непълното освобождава съзнанието ми, поради което е толкова важно на този етап да избягвам да се забивам в дреболии. Целта ми е да генерирам възможно най-много идеи и да избера най-обещаващите.Обикновено избирам скици, които обещават и преглеждам подробностите, след това избирам най-добрия вариант и работя върху него задълбочено.
Това обаче не означава всеки детайл . Очевидните неща могат да бъдат забелязани. Но някои аспекти ще бъдат трудни за описване в писмена форма.
В този момент нарисувах всички важни подробности , но не рисувам телени рамки все още Balsamiq . След като всичко е готово в писмен вид, започвам да скицирам в скица.
Дигиталните инструменти осигуряват по-голяма творческа свобода от хартията и лесно можете да насочите вниманието си към незначителни неща. Например, можете да се съсредоточите върху „усъвършенстване на пиксели“, а не върху дизайн.Този подход се използва рядко, но понякога може да бъде полезен. Няколко визуални решения се разглеждат в ранните етапи на проекта, но може да отнеме много време, за да се създадат цифрови скици за всички тях. Ето защо първо рисувам скици на хартия, за да разгледам различни варианти и да избера визуална посока на дизайна.
Намирам тази техника за много полезна, когато вече имам обща идея и мисля за функционалността на определена страница или за съставните части на компонентите на интерфейса. Рисувам в детайли различни елементи на страницата, след това рисувам различни възможни позиции на елементи на страницата.
Елементите, дори и най-простите, трябва да имат състояние; бутон, който може да се натисне, който има текстов блок, който може да е празен или не. Колкото по-сложен е той, толкова повече състояния има.
Намерете или нарисувайте подходяща скица и след това добавете следните подробности:
Заглавие - Понякога добавянето на заглавие е добър вариант. Напишете описание и дата, ако е необходимо, в горната част на скицата. Това заглавие ще ви помогне да разберете какво гледате, както и дали скицата е уместна или не. Това е особено полезно, ако имате много скици или ги показвате на други хора.
Анотации - Анотациите са имена и бележки, поставени близо до даден елемент, за да обяснят неговото съдържание или атрибути. Те добавят подробности, които изясняват други елементи и обикновено могат да бъдат трудни за изчертаване. Например, това може да бъде името на блока, някои подробности за взаимодействието, обяснение на снимка, някои идеи за бъдещи вариации на дизайна и т.н. Можеш проверете един от моите примери за да разберете как изглежда анотация на скица.
Числа - Избройте елементите на вашата скица или самите скици. Можете да решите как да ги поръчате (напр. Чрез поток на взаимодействие, реда, в който сте ги поръчали и т.н.). Той може да бъде полезен и по време на дискусии (особено дискусии от разстояние), тъй като вашите колеги и клиенти могат да посочат номера на скицата в отзивите си, за да можете лесно да разберете към коя скица се позовават в коментарите си.
Стрелки - Можете да използвате стрелки за обозначаване на преходи на екрана. Те могат да се използват и за свързване на различни части на скици, за посочване на последователност от действия и т.н. Тъй като значението на стрелките може да варира, можете да добавите точно над стрелката описание или обяснение на това, което означава стрелката. Ето един пример на основна скица, която показва преход и няколко различни състояния.
Бележки - Подобно на анотациите, бележките се използват за обяснение на понятията. Бележките обаче се различават от поясненията по местоположението им. Те не са прикрепени към елемент или близо до описания елемент, подобен на този пример . Бележките могат да бъдат разположени в горната или долната част на страницата. Те дори могат да опишат елементи, които не са включени в дизайна, въпроси, които може да имате, общи обяснения, идеи без рисуване и т.н.
Жестове - Жестовете са важни в случай на устройство за сензорен дизайн. Рисуването на жест с ръка може да отнеме практика. Има много варианти на жестове, които се използват за обозначаване на различни действия, така че е най-добре да решите предварително как да определите конкретно действие (това не е очевидно, разбира се) и да се упражнявате да го рисувате.
Обратна връзка - Можете да получите предложения за поправяне или подобряване на скицата, след като я покажете на други хора или след като я прегледате сами. Често е полезно да маркирате тази обратна връзка с различен цвят, за да разграничите обратната връзка от оригиналната скица.
Можете да използвате различни цветове за различни видове елементи. Понякога използвам черно за рисунки, синьо за връзки, тъмно зелено за бележки и червено за заглавия и обратна връзка. Опитайте се да използвате цветове във вашите скици, но се уверете, че цветовете, които избирате, са последователни!
Това не са непременно съвети и трикове, но са колекция от методи, инструменти и съвети, които трябва да подобрят вашата производителност и качеството на вашите скици.
Създайте скица - Едно от най-големите предимства на използването на молив и хартия, а не на инструмент за цифрово скициране, е, че можете да го залепите за стена. Всеки от екипа може да види и да участва (въпреки че препоръчвам да направите сесии за преглед). * Ще видите самите скици и това ще стимулира вашето мислене и ще ви позволи да се съсредоточите върху целта, не изолирайки части, а цялата система. Тези взаимодействия между частите и начина, по който се съчетават. * Създайте скиц борда - прикачете вашите скици на бялата дъска. Ако в офиса ви няма дъска, можете да използвате двойна лента или лепящи бележки, за да залепите вашите скици на стената. Ако не искате да ги залепите за стената, можете да използвате голямо парче картон. Препоръчвам да използвате дъска за скици, тъй като тя е един от най-добрите инструменти за проектиране.
Използвайте бяла дъска - Бялата дъска е чудесен инструмент за рисуване. Той има голям брой предимства: Той е изчерпателен; за другите членове на екипа е лесно да се включат в дискусията и рисуването. Дори идеите им да не съвпадат с дизайна, можете да разберете начина им на мислене и това ще ви помогне да се разберете.
* Отметките не ви позволяват да се съсредоточите върху детайлите, трябва да помислите за общите неща. Скиците дават пространство за интерпретация.
* Бялата дъска се почиства лесно и прави корекции върху нея. * Има много място и можете лесно да премислите през потока на системата. * Можете да прикачите скици, щампи и справочни материали с помощта на магнити.
Прототипи - Направете кликващ прототип, за да оцените вашия дизайн. Опитайте се да получите обратна връзка за някои елементи. Това работи особено добре, когато използвате шаблони - вашите скици са с еднакъв размер. Очевидно би било по-лесно да рисувате скици със същия размер, ако използвате шаблони. Ще се опитам да го улесня, като предоставя някои шаблони, които можете да изтеглите и използвате: Подвижен , Браузър мулти-прозорец , Превъртане на браузъра , Лица .
Използвайте вашия принтер и скенер - Начертайте рамката на ръка (можете да използвате линийка, за да рисувате по-точно), след това я сканирайте с помощта на скенер или мобилно приложение и я разпечатайте. Можете да редактирате вашия шаблон в редактора на изображения, преди да отпечатате. Можете да премахнете ненужни подробности или да дублирате някои елементи. Можете също така да отпечатате готова страница на сайта, снимки и други описателни елементи. Можете да поставите изрезите във вашата скица.
Използвайте Evernote за сканиране - Evernote е отличен инструмент за проектиране. Там можете да имате и споделяте вашите скици, можете да създавате теми и да използвате тагове, за да организирате вашите скици. Способностите на режима 'Скенер' са особено впечатляващи. Поставяте скицата си пред нея и тя я сканира, така че получавате копие на скицата си. След това можете да поканите колегите си в Evernote и да им дадете връзката към вашата бележка. Тъй като има приложение за телефони и таблети, винаги можете да имате под ръка своите скици.
Хибридни скици - За да придадете живот и реализъм на вашите скици, можете да ги комбинирате със снимки. Това означава, че трябва да направите снимка и след това да нарисувате история с елементи на интерфейса в нея. Това също може да ви помогне да забележите проблеми с взаимодействието и детайлите.
Проследяване на реалния свят - Ако трябва да създадете раскадровка, да илюстрирате преживяване в определен контекст (например човек, който използва смартфон на автогара), трябва да включите изображения на хора, места и различни предмети от реалния живот. Те могат да бъдат трудни за рисуване, особено ако не владеете техники за рисуване, но ето един много прост съвет:
Разбира се, ако имате такъв таблет и стилус ще бъде още по-лесно.
Wireflow е по същество последователност от системни потоци, екран след екран, с клонове и точки за вземане на решения. Трябва да помислим как потребителят се справя със задачите си, начина, по който преминава от екран на екран, и цялостното преживяване на опита си с продукта.
Wireflow или това, което рисувате, и начинът, по който се свързва, могат да бъдат организирани съгласно следните подходи:
Обикновено се опитвам да дефинирам следните видове телени потоци, в зависимост от организацията и практическата употреба:
Картографиране на общите и високото ниво - Направете бърза скица на промените на екрана и начертайте цялостния път на използване на продукта. Тук можете да включите някакъв контекст и по желание можете да покажете взаимодействието на потребителя. Например, услугата за електронно пазаруване е малко дълго пътуване, което може да включва много стъпки: Как потребителят е намерил магазина, стъпките, през които е преминал, за да намери продукта, как е платил и т.н.
Поток на екрана - Това се фокусира върху специфичен функционален поток през системата. Това може да бъде кратка, пряка последователност или разклонено пътуване. Например потребител, който качва снимки или видеоклип.
Схема за навигация - Начертайте екрана си и опциите, които той съдържа. Това не би трябвало да картографира пътуването. Тази стъпка съдържа информация, която показва опциите, които потребителят може да избере, адресите, които има, и различни части на приложението. Обикновено създавам навигационна схема в началото на проект. Той служи за разбиране как трябва да бъде структурирана навигацията. (Какви точки трябва да бъдат включени и колко нива са необходими).
Състояния на екрана - Начертайте екрана или състоянията на елементите (пример може да бъде диалог за качване на файл). В този случай, например, екранът ще има следните състояния: * Празно * Потребител взема файла в активната област * Файлът се зарежда * Файлът се зарежда * Има грешка
Процесът на проектиране на теленен поток е подобен на този на телена рамка . Много стъпки са подобни или идентични, но има важни разлики:
Определете какво трябва да нарисувате - Решете какво точно трябва да нарисувате (например общата история или фрагмент от вашия дизайн). Искате ли да генерирате различни опции или да помислите подробно за детайлите на пътуването? Решете дали ще показвате вашите скици на някой друг или не.
Определете кои рамки и преходи трябва да включите във вашия чертеж - Ако добавите всички екрани и промени, вашият поток ще бъде много дълъг и сложен. Помислете кои ключови екрани трябва да покажете, за да предадете същността на взаимодействието, което помага да завършите вашата област. Същото се отнася и за промените на екрана. Трябва да решите кои промени биха били най-полезни, когато изразявате идеята си. Разгледайте този пример като справка.
Определете началната точка - Каква ще бъде началната точка на пътуването? Можете да започнете с входната точка, като началото на пътуването, например, която потребителят вижда, когато се свърже с приложението ви. Като алтернатива можете да започнете наполовина или с най-трудните / интересни / важни екрани или да обработите стъпки. Или можете да започнете в края, с крайния резултат, постигнат от потребител, и да опишете стъпките, които потребителят е предприел, за да стигне до тази точка.
Решете какво следва - след изчертаване на началните стъпки, решете какво да направите след това, като отговорите на следните въпроси:
Алтернативни маршрути за скици и билети - Помислете за алтернативни начини, по които потребителят може да стигне до всяка стъпка:
Помислете за алтернативни потоци - Анализирайте историята, проектирайте алтернативен поток и направете скица.
Добавете пояснения, бележки и подробности - Добавете обяснителни елементи, които ще изяснят подробности, които не са очевидни.
Стража - Направете цифрово копие на скицата.
Дял - споделете скицата (като от, чрез Evernote или Инвизия ).
На първо място, Създайте чернови проект - Ако ще мислите за дълго пътуване, по-добре направете бърза скица, за да разберете колко пространство ви е необходимо, за да не забравите важни стъпки и подробности. По-късно ще бъде трудно да ги добавите към скицата на хартия.
джира срещу трело срещу асана
Не създавайте голяма карта с много подробности - Скиците на хартия нямат бутон за отмяна, така че ще бъде трудно да направите промени. Може би рисувате детайлите много конкретно и това може да разсее въображението ви от генерирането на различни варианти на високо ниво. Вместо да създавате голяма схема, която би илюстрирала цялата система, опитайте се да се съсредоточите върху ключовите скриптове и се опитайте да отделите отделна страница за всяка една.
Изрежете ненужните детайли и комбинирайте множество нива на детайлизиране - Не е необходимо да изчертавате всички описания на взаимодействията, затова се опитайте да използвате само ключовите елементи на вашето пътуване. Докато чертаете голяма карта за взаимодействие, не е необходимо да обработвате всеки детайл на всеки екран. Някои екрани могат да бъдат представени с няколко полета и други ключови екрани в детайли.
Използва различни размери хартия - Опитайте се да използвате различни формати хартия, A3 или a5. Размерът на листовете хартия ще ви ограничи и ще повлияе на процеса ви по различни начини. Малко листче хартия няма да ви позволи да добавите много екрани или детайли, но ще ви помогне да се съсредоточите върху много идеи. С помощта на голям лист хартия ще можете да нарисувате страхотно пътуване, много подробности и допълнителни бележки. Като алтернатива можете да направите няколко малки пътувания там.
Залепките също могат да ви помогнат - Можете да опитате да използвате лепкави бележки. Можете да нарисувате отделни екрани или долни колонтитули върху тях или да нарисувате допълнителни състояния за вашите елементи на скица. Предимството им е, че те могат лесно да бъдат заменени, можете също да преместите бележката на друго място. Например, в случай че потокът се промени, можете да промените реда на вашите лепкави бележки.
Използвайте шаблони - Опитайте се да използвате шаблони. Те ще спестят време и ще ви позволят да създавате висококачествени прототипи, които могат да се кликват.
Опитайте да използвате бяла дъска - Бялата дъска има редица предимства. Той стана по-популярен, защото ви позволява да нарисувате страхотно пътуване с много клонове. Можете да нарисувате много компоненти на приложението на хартия и след това да ги прикрепите към дъската с помощта на магнити, като по този начин ги добавите към пътуването.
Правене на скица на сенки - Сенките могат да ви помогнат да маркирате важни елементи, които добавят визуална привлекателност към вашата скица. използвам три различни вида сенки
Линии, следващи посоката на светлината - Това не винаги изглежда красиво, но можете да използвате градуиране и да донесете обекти на различни „височини“
Подчертайте някои части с по-тъмен цвят (само бутона или долната част или дясната страна)
Използвайки Промаркер (или еквивалент в приложението, което използвате за рисуване)
Елементи за рисуване - Възражение като „Не мога да рисувам толкова добре“ това може да задуши вашата инициатива. Много по-лесно е, отколкото изглежда. Дори и най-сложните скици са съставени от редица основни блокове, както в този пример .
Ако можете да нарисувате точка, линия, триъгълник, квадрат и кръг, тогава вече имате основните блокове, от които се нуждаете, за да нарисувате скица.Събирайки всичко - Основните елементи, бутони, радиобутони и падащи менюта Те са съставени от основни елементи. След като се научите да рисувате тези елементи, можете комбинирайте ги нарисувайте сложни блокове и компоненти.
Целта на тази публикация не беше да създаде най-доброто универсално ръководство за UX скициране , или Скициране като цяло, защото дизайнерите имат различни нужди, както и лични предпочитания.
Както можете да видите, това е много да обясни. Дизайнерите използват голямо разнообразие от инструменти, техники и подходи за създаване на UX скици и всъщност е донякъде субективно. Някои техники могат или не могат да работят за някои хора, работещи по различни проекти. Ако тепърва започвате, тогава трябва да експериментирате.
Постоянното практикуване и експериментиране ще ви помогнат да намерите това, което работи най-добре за вас.От вас зависи да изберете техники и съвети, които най-добре отговарят на вашия проект и вашия подход към дизайна. Имате ли съвети от Скициране екстра за колеги UXers ? Споделете ги с увереност в раздела за коментари.
Свързани: Изкуството на смисления UX дизайн