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

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

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

Гэта графічная структура сайта альбо дадатку, якая змяшчае змест і элементы. Гэтак жа, як і план будынка, для таго, каб ён стаў хмарачосам, патрабуе ўдзелу шматлікіх работ і ўдзельнікаў. Акрамя таго, каркасная каркас выглядае простым і патрабуе таго, каб работы былі выкананы дызайнерамі UX, UI, IxD. Коратка, Wireframe - гэта дызайн з нізкай дакладнасцю, які мае 3 простыя, але прамыя мэты:

  • Змяшчае асноўную інфармацыю
  • Намалюйце контур структуры і планіроўкі
  • Візуальны і апісанне карыстацкага інтэрфейсу

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

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

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

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

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

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

Будаўніцтва каркаса хутка і танна.

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

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

4. Інтэрактыўная каркасная сетка

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

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

5. Асцярожна паказвайце каркас

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

Інструменты для дызайну каркаснай тэхнікі

Папера і ручка

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

Бальзамік

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

Што такое прататып?

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

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

«Зручная распрацоўка прататыпаў больш спрыяе зносінам паміж дызайнерамі і распрацоўшчыкамі. "

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

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

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

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

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

3. Прататыпаванне тэсту

Тэставанне прататыпаў - ключавы этап у працэсе распрацоўкі прататыпаў, што з'яўляецца адной з асноўных этапаў агульнага працэсу. Але пра тое, як праводзіць тэставанне зручнасці, - гэта велізарная тэма, каб пагаварыць тут. Просты тэст можа каштаваць каля гадзіны, дастаткова пратэставаць 5 ці 6 ключавых сцэн. Вось некаторыя пытанні, пералічаныя для даведкі:

  • Як карыстальнік пачынае задачу? (Пошук ці прагляд?)
  • Што робіць карыстальнік спачатку? і далей?
  • Як ён прымае канчатковае рашэнне?
  • Ці разумеюць яны канструкцыю? Якія-небудзь цяжкасці?

Дызайн прататыпа прадукту - гэта бесперапынны працэс, і ён патрабуе ітэрацыі і ўдасканалення.

Інструменты для прататыпаў

Шукаеце выдатны інструмент хуткага прататыпавання? Няма бюджэту? Апраўдання няма. Mockplus Black Friday 2017 тут для вас! Далучайцеся да Mockplus Official Slack групы зараз, адміністратар прапануе вам купоны са зніжкай 40% і бясплатны пакет набораў карыстацкіх інтэрфейсаў і шрыфтоў. Гэтая абмежаваная па часе прапанова дзейнічае для ўсіх пакетаў і працуе да 31 лістапада, зэканоміўшы як мінімум 80 баксаў ад звычайнай цаны. Акрамя таго, вы атрымаеце пажыццёвую бясплатную тэхнічную падтрымку Mockplus, нават калі вы зараз не платны карыстальнік. Прыходзьце і атрымлівайце асалоду ад Mockplus Black Friday 2017!

Макет

Mockplus - гэта комплексны інструмент для распрацоўкі прататыпаў для хуткага ўзаемадзеяння, хуткага дызайну і хуткага прагляду. Гэта дазваляе ствараць макеты для мабільных (Android і iOS), працоўнага стала (PC і Mac) і вэб-прыкладанняў. У Mockplus 3.2 дададзены рэжым дызайну UI Flow Design, паўтаральнік, дэма-праекты і шаблоны і імпарт эскізаў. Іншыя функцыі, такія як Mind Map Design Mode, будуць прадстаўлены ў версіях пасля Mockplus 3.2.

UXPin

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

Што такое макет?

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

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

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

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

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

Парады

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