Всичко, което трябва да знаете за макети, каркаси и прототипи

Страница 1 от 3: Тел рамки

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

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

Wireframes, макети и прототипи са инструментите на дизайнера



Wireframes, макети и прототипи са инструментите на дизайнерската търговия

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

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

Wireframe => Mockup => Prototype

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

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

Отново, това е прекалено опростяване, а не правило, заложено в камък. Например, понякога пропускане на макети и създаване на прототип на lo-fi в началото е най-доброто за вашия проект. Като алтернатива можете да следвате процес, предпочитан от дизайнера Стивън Брадли, в който напредвате от телени рамки до макети и завършете в код .

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

01. Рамки

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

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

Снимка на рисунки и химикалки на бюрото

Снимката е предоставена от Benoît Meunier

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

Както описахме в Ръководството за Wireframing , ето защо телените рамки често включват заместители за по-късни графики под формата на квадратчета с Xs или голи костни версии на иконите, които идват по-късно.

Ползи

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

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

Снимка на скица на потребителския интерфейс

Снимката е предоставена от Шон Кембъл

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

Методи

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

Скициране

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

Софтуер за графичен дизайн

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

Презентационен софтуер

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

Софтуер за проектиране

Днес съществува софтуер, специално за каркасно проектиране и не само като UXPin, Axure, Omnigraffle и Moqups. Предимствата тук са рационализираните функции за каркасното изграждане, като използваемост с плъзгане и пускане и колко лесно е да добавите интерактивност чрез няколко щраквания. Недостатъкът е, че някои струват повече от други. Докато Balsamiq е безплатен, липсват интерактивните възможности на Axure, Omnigraffle и UXPin.

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

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

  • 1
  • две
  • 3

Текуща страница: Тел рамки

Следваща страница Макети