Основна UI / UX дизайн концепция Разлика между Wireframe, прототип и макет (Актуализирана)

прототип на макет на телени рамки

Каква е разликата между тежка рамка, макет и прототип? Опитен дизайнер изчисти условията за проектиране на UI / UX дизайнери.

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

Какво е Wireframe?

Това е графична структура на уебсайт или приложение, съдържаща съдържанието и елементите. Подобно на плана на сграда, за да се превърне в небостъргач, се нуждаят от много творби и участници, в които да участват. По същия начин, телената рамка изглежда проста и трябва освен това да се работи от UX, UI, IxD дизайнери. Накратко, телената рамка е дизайн с ниска вярност, който има 3 прости, но директни цели:

  • Съдържа основната информация
  • Начертайте очертанията на структурата и оформлението
  • Визуално и описание на потребителския интерфейс

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

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

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

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

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

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

Изграждането на телени рамки е бързо и евтино.

Особено ако използвате някои инструменти за телени рамки като хартия и химикалка, Balsamiq. Разбира се, трябва да използвате тези дизайнерски инструменти, за да го направите в самото начало.

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

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

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

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

5. Показвайте предпазната рамка внимателно

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

Инструменти за проектиране на телени рамки

Хартия и химикалка

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

Balsamiq

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

Какво е прототип?

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

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

„Подходящото за екип прототипиране е по-благоприятно за комуникация между дизайнери и разработчици. "

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

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

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

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

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

3. Тест за прототипиране

Тестване на прототип е ключова стъпка в процеса на проектиране на прототипи, който е един от основните етапи в цялостния процес. Но как да провеждаме тестване за използваемост е огромна тема, за да говорим тук. Един прост тест може да струва около час или повече, достатъчно е да тествате 5 или 6 ключови сцени. Ето някои често задавани въпроси за справка:

  • Как потребителят стартира задачата? (Търсене или сърфиране?)
  • Какво прави първо потребителят? и следващата?
  • Как взема окончателното решение?
  • Те разбират ли намерението за дизайн? Някакви трудности?

Това е непрекъснат процес за изработване на дизайн на прототип на продукта и изисква да се поддържа итерация и подобрение.

Инструменти за създаване на прототипи

Mockplus

Mockplus е инструментът за създаване на прототип за всичко включващо бързо взаимодействие, бърз дизайн и бърз преглед. Той позволява създаването на макети за мобилни (Android и iOS), Desktop (PC и Mac) и уеб приложения. В Mockplus 3.2 той добави режим на проектиране на потребителски интерфейс, повторител, демонстрационни проекти и шаблони и импортиране на скици. Други функции като Mind Map Design Mode ще бъдат представени във версиите след Mockplus 3.2.

https://www.mockplus.com

СРДВК

Като инструмент за предаване на дизайн, iDoc интегрирана колаборация, доставка на източник на дизайн, както и леко прототипиране. Безпроблемният работен процес позволява на дизайнерите на потребителски интерфейс да качват визуални скриптове от плъгини Photoshop, Adobe XD и Sketch.

Лесно и лесно е да задавате интерактивни връзки чрез добавяне на гореща точка, за да направите сложни прототипи за секунди. Със 7 жеста и 13 анимации можете лесно да постигнете кликващ интерактивен прототип. Точката за достъп има 3 настройки за обратна връзка, връзка към началната страница и външна връзка. Разгледайте го повече, ще ви изненада повече!

UXPin

UXPin е създал повече от 900 вида различни UI елементи за вас, за да създадете телени рамки и прототипи. Функцията на отзивчивата точка на прекъсване позволява на потребителите да създават отзивчиви прототипи и телени рамки, които могат да работят на различни устройства и разделителни способности.

Какво е макет?

Макетът е „визуален скрипт“, използван за представяне на цялостния визуален дизайн на продукта. Той има по-богат визуален елемент от телената рамка, включително графика, оформление, цвят и други по-подробни визуални презентации. До известна степен това е окончателният дизайн на продукта.

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

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

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

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

Съвети

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

Ще се интересувате и от:

Най-добрите инструменти за проектиране на макети и проводници за UI / UX дизайнери през 2017 г.

UX срещу UI срещу IA срещу IxD: 4 Определени объркващи условия за дигитален дизайн

Най-добрите UI / UX дизайн книги и ресурси за дизайнери

Първоначално публикуван на www.mockplus.com.