Розніца ў канцэпцыі дызайну інтэрфейсу / UX Розніца паміж каркасным і прататыпам

Дызайнеры заўсёды блытаюць тэрміны "каркасная рамка" і "прататып", нягледзячы на ​​дасведчанага дызайнера, магчыма, з-за непаразумення ці нейкіх іншых прычын. Уласна, канцэпцыя паміж гэтымі тэрмінамі цалкам відавочная і розная. Зараз добра разбярэм два тэрміны.

Што такое каркасная сетка?

Каркасная сетка - гэта дызайн з нізкай дакладнасцю, які мае 3 простыя, але прамыя мэты:

1. Прадстаўлены асноўныя інфармацыйныя групы

2. Намалюйце контур структуры і планіроўкі

3. Бачанне і апісанне карыстацкага інтэрфейсу

Гэта будзе асноўная структура вашага прадукту пасля правільнага стварэння каркаса. Гэтак жа, як і план будынка, ён апісвае дэталі выразна і канкрэтна.

Візуальныя асаблівасці каркаса

Каркасная сетка існуе вельмі відавочныя візуальныя абмежаванні. Увогуле, дызайнеры павінны выкарыстоўваць толькі лініі, скрынкі і шэры колер (розны шэры адценне паказвае на розны ўзровень).

Просты вектарны каркас

Змест простага каркаса павінен уключаць выявы, відэа і тэкст і г.д. Такім чынам, апушчаны будзе заменены запаўняльнікам, а малюнак будзе зацененым, а тэкст будзе заменены на некалькі сімвалічных слоў у адпаведнасці з макетам тэксту.

Перавага каркаса

Стварэнне каркаса з'яўляецца хуткім і танным, асабліва калі вы карыстаецеся такімі інструментамі для распрацоўкі прататыпаў, як UXPin, Mockplus, Balsamiq і Axure. Вядома, вы павінны выкарыстоўваць гэтыя інструменты, каб зрабіць гэта ў самым пачатку.

У параўнанні з поўным і падрабязным каркасам высокай дакладнасці, зваротная сувязь значна важней. Чаму? Паколькі людзі больш увагі надаюць функцыянальнасці праграмнага забеспячэння, архітэктуры інфармацыі, карыстацкага досведу, блок-схеме ўзаемадзеяння з карыстальнікамі, і гэта зручнасць у выкарыстанні, а не эстэтычныя характарыстыкі гэтых элементаў. Між тым, у гэтым выпадку вы можаце лёгка змяніць яго ў адпаведнасці з попытам, але не трэба наладжваць кадаванне і графічны рэдагаванне.

Інтэрактыўны каркас

Часам дызайнеры аддаюць перавагу павысіць дакладнасць каркасных рамок, каб павысіць важнасць карыстацкага інтэрфейсу ў некаторых аспектах і прадэманстраваць рацыянальнасць узаемадзеяння паміж хуткім тэстам і візуальнымі элементамі. Праграма для вырашэння гэтых праблем належным чынам выкарыстоўвае інтэрактыўную каркасную схему, таксама вядомы як каркасны каркас.

Калі вы хочаце стварыць такі складаны каркас, то вам патрэбен UXPin, які з'яўляецца інструментам для каркаснага кадравання і распрацоўкі прататыпаў. Інтэрактыўнае складанне прататыпаў можа стаць лепшай прэзентацыяй камандзе, якая развіваецца і кліентам. Калі вы сутыкнуліся з праблемай, што "што адбудзецца, калі я націскаю гэтую кнопку?", Вам проста трэба націснуць і паказаць сваім кліентам, як гэта працуе на інтэрактыўнай расшыфроўцы. Сапраўды, гэта вельмі ўражліва і прама.

Пакажыце каркасныя асцярожна

Вы павінны быць асцярожныя ў адносінах да хлопца, які цалкам непрафесіянал, калі вам трэба прадставіць яму свой каркас. Ён можа быць вашым кліентам, а таксама можа быць нетэхнічным кіраўніком, які ўдзельнічаў у супрацоўніцтве. Але ён не ведае праўды, што каркас і канчатковы прадукт могуць здацца не звязанымі. Такім чынам, ён можа не разумець унутраную сувязь і рэжым працы паміж імі. Такім чынам, вы павінны высветліць правільнае рашэнне, ці трэба вам гэта і як.

Гэта графік аперацыі карыстальніка прыкладання, замаляваны Фернанда Гілен. Вядома, гэта больш ранняя дызайнерская версія.

Калька з'яўляецца найбольш важнай часткай дызайну. Убачыўшы гэты графік дзеянняў, вы зразумееце, чаму гэта займае шмат часу, каб растлумачыць, што называецца каркасам і чаму нам трэба выкарыстоўваць каркасную сетку. Ці вы проста прапусціце гэты крок.

Прататып

Патрабаванне прататыпа вышэй, чым каркасная / інтэрактыўная каркасная сетка, яна павінна быць прататыпам высокай дакладнасці, які з'яўляецца інтэрактыўным і максімальна ўпісваецца ў канчатковы карыстацкі інтэрфейс.

Мэта прататыпаў цалкам відавочная: максімальна рэалістычна змадэляваць узаемадзеянне карыстальніка і інтэрфейсу. Пры націску кнопкі неабходна правесці адпаведную аперацыю, і на ёй павінны з'явіцца адпаведныя старонкі, паспрабуйце як мага лепш імітаваць поўны прадукт.

Візуальныя асаблівасці прататыпа

Несумненна, прататып павінен утрымліваць эстэтычныя асаблівасці прадукту, якія павінны мець, і паспрабаваць адпавядаць канчатковай версіі. У асноўным гэта прадукт, які прадугледжвае стварэнне HTML / CSS / JS, і не трэба разглядаць сервер і базу дадзеных.

Перавага прататыпа

Чаму гэта так важна? Таму што прататып звычайна выкарыстоўваецца для тэставання прадукту. Тэст прататыпа на самай ранняй стадыі можа зэканоміць шмат выдаткаў і часу на развіццё. Так што з-за неразумнага інтэрактыўнага інтэрфейсу ён не будзе марнаваць намаганні на стварэнне архітэктуры рэзервовага прадукту. Такім чынам, прататып - гэта дасканалы ход праверкі прадукту для дызайнераў і распрацоўшчыкаў.

Акрамя таго, прадастаўленне карыстальнікам прататыпаў для збору зваротнай сувязі, каб даведацца пра ўсе падрабязнасці вашага прадукту і натхніць усю каманду. Многія інструменты для распрацоўкі прататыпаў могуць ствараць прататыпы хутка і эфектыўна, але кадаванне не патрабуецца.

Дызайнерскі паток

Пасля таго, як вы зразумееце сутнасць дызайну і даведаліся пра розніцу паміж каркасам і прататыпам, вы стаіце перад светам дызайну карыстацкага досведу.

Калі вы зможаце канкрэтаваць серыю дызайну вырабаў на згуртаваны і эфектыўны працоўны працэс, то здарыцца дзіўнае разрэджванне.

Парады

Паспрабуйце выкарыстоўваць рэдагуемыя і шматразовыя элементы пры стварэнні каркаснага кадра. У гэтым выпадку вы проста працягваеце ўдакладняць элементы для завяршэння прататыпаў, заснаваных на каркасах.

Калі вы робіце каркасы, паспрабуйце сабраць думкі і меркаванні сваёй каманды і кліентаў і паспрабуйце адлюстраваць іх на каркасных канструкцыях.

Выкарыстоўвайце самы зручны інструмент.

UXPin

UXPin

Для стварэння каркасаў і прататыпаў UXPin стварыў больш за 900 відаў розных элементаў карыстацкага інтэрфейсу.

Proto.io

Proto.io

Proto.io - вельмі надзейны інструмент для стварэння прататыпаў, і ён можа экспартаваць HTML / CSS-код на аснове прататыпа і інтэрактыўны прататып для сэнсарнага экрана, які дазваляе карыстальнікам правяраць тэсты на рэальных прыладах.

Бальзамік

Бальзамік

Папулярны, працяглы інструмент каркаса толькі для статычнага каркаса.

Мопсы

Мопсы

Гэты інструмент падтрымлівае, каб зрабіць каркас непасрэдна ў Інтэрнэце.

Макет

Макет

Mockplus - гэта комплексны інструмент для распрацоўкі прататыпаў для хуткага ўзаемадзеяння, хуткага дызайну і хуткага прагляду. Гэта дазваляе ствараць макеты для мабільных (Android і iOS), працоўнага стала (ПК і Mac) і вэб-прыкладанняў.

Зацята

Зацята

Ці патрэбна нам больш укараненне гэтага інструмента як найбольш папулярнага каркаснага і прататыпа інструмента? Я думаю, што не.

Проташарэ

Проташарэ

Гэты інструмент таксама можа зрабіць каркасы і прататыпы ў Інтэрнэце.

InvisionApp

Нябачнасць

Гэты інструмент дапаможа вам стварыць зручны прататып, вы не можаце нічога маляваць, але вы можаце дадаць спасылкі паміж рознымі экранамі.

Арыгінальны пост: http://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype