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

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

Какво стана? Отговорът е прост: липса на комуникация.

Комуникирайте по-ефективно с вашите Wireframes

Един от нашите основни комуникационни инструменти като UX дизайнери са телените рамки, „Чертежи“ в черно и бяло, които ни правят архитекти на уеб дизайн. Въпреки че на телените рамки липсват цветните детайли на визуалния дизайн, те са в основата на продуктовия дизайн, точно както архитектурните планове са в основата на окончателното изграждане на сграда.

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

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

Извеждане на вашите рамки на следващото ниво с каркасна карта

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

включете заглавния файл c++

Ето един полезен инструмент за комуникация и по-ефективно организиране на вашите каркаси: картова карта .

Каровата карта е начин да съобразите вашите каркаси с картата на сайта на вашия уеб сайт (или потребителските потоци на вашия продукт). За този процес на картографиране ви трябват шаблони за каркасни рамки, които представляват определен тип страница (например страница на формуляра спрямо целевата страница спрямо страницата с продуктова списък спрямо страницата с подробности за продукта). Това е като да решите първо целта на всяка стая в къща, която след това определя елементите във всяка стая. Шаблон би бил баня с тоалетна и мивка като често срещани елементи от съдържанието.

Създаването на каркасна карта ще ви бъде от полза по няколко начина:

• Помага за оценка на обхвата на проекта (колко шаблони за каркасни рамки са ми необходими?)

• Предоставете преглед на всички различни шаблони, които трябва да бъдат създадени (които също могат да бъдат ценни като индекс за стил или обикновен контролен списък за идентифициране на шаблони, които могат да бъдат използвани повторно за други страници)

  
  
  

  за какво се използва c програмирането

• Подобрете комуникацията относно целта на вашите каркаси и помогнете на клиентите си да разберат по-добре пътуването на потребителя

Как да създам каркасна карта?

Създаването на каркасна карта включва три стъпки.

Стъпка 1: Идентифицирайте елементите на съдържанието

Преди да започнете да се гмуркате в телени рамки, помага да помислите за всички различни парчета, които трябва да живеят в телена рамка, като предметите, които искате да имате във всяка стая, за да решите колко голяма трябва да бъде вашата стая. За сайт за електронна търговия примери могат да бъдат: лента за търсене, филтриране на продукта, описание на продукта, изображение на продукта, цена, избор на количество, бутон „добавяне в количката“, препоръчани продукти, икона на количката за пазаруване ... Разглеждане на необходимите компоненти на потребителския интерфейс.

• Започнете да изброявате всички елементи на съдържанието (компоненти), за които можете да се сетите - помислете за функционалността, която искате да предложите, за да помогнете на потребителя да продължи напред и да отговори на бизнес изискванията.

• Добавете друга колона за типа страница (например страница с подробности за продукта, количка за пазаруване, целева страница и т.н.), за да групирате елементите на съдържанието.

• В трета колона класирате съдържанието на статиите си по важност (т.е. ниска, средна, висока).

• Ако имате потребителски истории, можете да добавите друга колона, за да се позовавате на свързани номера на истории.

Пример за списък на елементи от съдържанието

Защо класирането на елементите на съдържанието е полезно? Той има две основни цели:

1. Създаване на йерархия: Класирането определя йерархията на съдържанието за всяка страница и ви дава насоки за вашите рамки (кое съдържание трябва да е в горната част).

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

Елементите на съдържанието определят обхвата на работата. Наличието на списък с елементи от съдържанието ще ви помогне да преминете по-лесно през фазата на планиране и може да се използва за определяне на процеса и оценка на работата на каркаса. (Например как да структурираме спринтовете си? С какво съдържание се справяме първо?)

Списъкът със съдържание също е много полезен по време на всяка дискусия относно изискванията. Можете лесно да идентифицирате кои елементи от съдържанието сте се съгласили и кои допълнителни елементи са поискани и да се считат за искане за промяна.

цифрови медии срещу графичен дизайн

Стъпка 2: Определете картата на сайта и потребителските потоци

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

Стигнете до това ниво, като създадете карта на сайта (за уебсайтове) или потребителски поток (за приложения):

• Карта на сайта: Показва общ преглед на всички страници и тяхната йерархия.

• Потребителски потоци: Вижте как страниците се свързват за ключови сценарии на употреба.

Опростена версия на карта на сайта и потребителски поток

Стъпка 3: Съставете картите си

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

• Дефинирайте шаблоните за страници, които се нуждаят от жични рамки въз основа на картата на сайта и потребителските потоци. (Всяка страница, която изисква уникална функционалност, ще бъде различен шаблон.)

Тел шаблони, представляващи единични страници

• Ако откриете незначителни вариации за определени шаблони (например страница със съдържание с плъзгач в заглавката или не), работете върху главните страници и пропуснете тези незначителни вариации. Вашите телени рамки трябва да включват всички основни компоненти, които биха били включени в този шаблон на главната страница.

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

  как да използвам flexbox в css

Пример за цветно кодирана карта на сайта

Пример за цветно кодирана карта на сайта

Пример за карта на шаблон на каркас. Картата на сайта е вляво, а телените рамки са вдясно със съответните цветови кодове.

За много сложни сайтове системата за номериране може да има смисъл спрямо цветното кодиране

Защо този процес на картографиране е полезен? Това е чудесен инструмент за използване при създаване на общ преглед на проект на високо ниво. Вместо просто да разглеждате самостоятелните жични рамки страница по страница, каркасната карта ще позволи на вас и вашия екип да видите жичните рамки в контекста. Откъде идват потребителите? Къде отиват сега?

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

Преминаване на работния процес на Wireframe на следващото ниво

В обобщение, ето защо каркасните карти са полезен инструмент за комуникация и организиране:

• Те ще помогнат при планирането. (Какво съдържание имаме и какви рамки се нуждаем?).

• Те ще бъдат полезни като контролен списък по време на процеса на създаване на проекта. (Какви компоненти мога да използвам повторно, за да остана последователен?).

• Те ще помогнат за оценка на разходите и времето на проекта, както и за намаляване на неефективността.

• Те ще ви помогнат да проследите задачите си (работата завършена спрямо работата, която все още е в изоставане).

• Те ще ви помогнат да комуникирате по-добре целта и целта на вашите каркаси по време на прегледи (как се използват каркаси за цялостния проект).

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