Основна UI / UX Дизайн Концепция Разлика между Wireframe & Prototype

Условията „телена рамка“ и „прототип“ винаги се объркват от дизайнерите, въпреки опитния дизайнер, вероятно поради неразбирането или някои други причини. Всъщност концепцията между двата термина е доста очевидна и различна. Сега, да разграничим ясно двата термина

Какво е телена рамка?

Wireframe е дизайн с ниска точност на дизайна, който има 3 прости, но директни цели:

1. Представя основната информационна група

2. Начертайте очертанията на структурата и оформлението

3. Визия и описание на потребителския интерфейс

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

Визуални характеристики на телената рамка

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

Проста векторна телена рамка

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

Предимство на телената рамка

Изграждането на телена рамка е бързо и евтино, особено ако използвате тези инструменти за прототипи като UXPin, Mockplus, Balsamiq и Axure. Разбира се, трябва да използвате тези инструменти, за да го направите в самото начало.

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

Интерактивна телена рамка

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

Ако искате да създадете толкова сложна телена рамка, тогава се нуждаете от UXPin, който е инструмент за тел рамкиране и проектиране на прототипи. Интерактивното прототипиране може да бъде най-доброто представяне пред развиващия се екип и клиенти. Когато се сблъскате с проблема, че „какво ще се случи, когато щракна върху този бутон?“, Просто трябва да кликнете и да покажете на клиентите си как работи при интерактивното прототипиране. Всъщност, това е доста впечатляващо и директно.

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

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

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

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

прототип

Изискването на прототип е по-високо от тестовата рамка / интерактивната телена рамка, тя трябва да бъде прототип с висока точност, който е интерактивен и да пасва максимално на крайния потребителски интерфейс.

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

Визуални характеристики на прототипа

Несъмнено прототипът трябва да включва естетическите характеристики на продукт, който трябва да има, и да се опита да се впише в крайната версия. По принцип това е кожа на продукт, без включен HTML / CSS / JS и не е необходимо да се обмисля сървърът и базата данни.

Предимство на прототипа

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

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

Проектиращ поток

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

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

Съвети

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

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

Използвайте най-удобния си инструмент.

UXPin

UXPin

UXPin е създал повече от 900 вида различни UI елементи за вас, за да създадете телени рамки и прототипи.

Proto.io

Proto.io

Proto.io е много здрав инструмент за създаване на прототипи и може да експортира HTML / CSS код, базиран на прототип, и интерактивен прототип за сензорен екран, който позволява на потребителите да тестват на реални устройства.

Balsamiq

Balsamiq

Популярен, дълготраен инструмент с телени рамки само за статични телени рамки.

Moqups

Moqups

Този инструмент поддържа, за да направи телена рамка директно онлайн.

Mockplus

Mockplus

Mockplus е инструментът за прототипиране на всичко включващо за бързо взаимодействие, бърз дизайн и бързо визуализиране. Той позволява да се създават макети за мобилни (Android & iOS), Desktop (PC и Mac) и уеб приложения.

Axure

Axure

Като най-популярният инструмент за проектиране на телени рамки и прототипи, имаме ли нужда от повече въвеждане на този инструмент? Мисля че не.

Protoshare

Protoshare

Този инструмент също може да прави онлайн проводници и прототипи.

InvisionApp

Invision

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

Оригинал на публикация: http://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-bet between-wireframe-prototype