Dallimi midis konceptit themelor UI / UX Diferenca midis Wireframe & Prototype

Kushtet e "kornizës së telave" dhe "prototipit" gjithmonë ngatërrohen nga projektuesit, megjithë projektuesi me përvojë, ndoshta për shkak të keqkuptimit ose disa arsye të tjera. Në të vërtetë, koncepti midis dy termave është mjaft i qartë dhe i ndryshëm. Tani, le t'i dallojmë qartë dy termat.

Farë është një Wireframe?

Wireframe është një model i besueshmërisë së ulët të dizajnit i cili ka 3 objektiva të thjeshtë por të drejtpërdrejtë:

1. Paraqet grupin kryesor të informacionit

2. Vizatoni skicën e strukturës dhe paraqitjen

3. Vizioni dhe përshkrimi i ndërfaqes së përdoruesit

Do të jetë struktura kryesore e produktit tuaj pasi të keni krijuar një kornizë teli në mënyrë korrekte. Ashtu si projekti i një ndërtese, ajo përshkruan detaje qartë dhe specifikisht.

Karakteristikat vizuale të kornizës së telit

Wireframe ekziston kufizime shumë të dukshme vizuale. Në përgjithësi, projektuesit duhet të përdorin vetëm linjat, kutitë dhe ngjyrën gri (shkalla e ndryshme gri tregon nivelin e ndryshëm) për të përfunduar.

Rrjeti i thjeshtë i vektorit

Përmbajtja e një kornize të thjeshtë teli duhet të përmbajë fotografi, video, dhe tekst etj. Kështu që, të lëshuarit do të zëvendësohen nga mbajtësi i një vendi, fotografia të jetë në vend të kësaj nga një hije, dhe teksti do të zëvendësohet nga disa fjalë simbolike sipas paraqitjes së tekstit.

Avantazhi i kornizës së telit

Ndërtimi i kornizës së telave është i shpejtë dhe i lirë, veçanërisht nëse përdorni këto mjete prototipuese si UXPin, Mockplus, Balsamiq dhe Axure. Sigurisht, ju duhet të përdorni këto mjete prototipuese për ta bërë atë që në fillim.

Krahasuar me një kornizë të plotë dhe të detajuar të besueshmërisë së lartë, mbledhja e reagimeve është shumë më e rëndësishme. Pse? Për shkak se njerëzit i kushtojnë më shumë vëmendje funksionalitetit të softuerit, arkitekturës së informacionit, përvojës së përdoruesit, tabelës së ndërveprimit të përdoruesve dhe shfrytëzueshmërisë, në vend se të marrin në konsideratë karakteristikat estetike të këtyre elementeve. Ndërkohë, në këtë rast, ju lehtë mund ta modifikoni atë sipas kërkesës, por nuk ka nevojë të rregulloni kodimin dhe redaktimin grafik.

Rrjeti interaktiv interaktiv

Ndonjëherë, projektuesit preferojnë të përmirësojnë besnikërinë e kornizave të telave për të rritur rëndësinë e ndërfaqes së përdoruesit në disa aspekte dhe për të shfaqur racionalitetin e ndërveprimit midis provës së shpejtë dhe elementeve vizive. Program për të adresuar këto probleme siç duhet është duke përdorur kornizën interaktive interferuese, e njohur gjithashtu si kornizë e telave të klikueshëm.

Nëse dëshironi të krijoni një kornizë kaq të ndërlikuar të telave, atëherë keni nevojë për UXPin, i cili është një mjet për krijimin e telave dhe hartimin e prototipit. Prototipizimi interaktiv mund të jetë prezantimi më i mirë për ekipin dhe klientët në zhvillim. Kur keni hasur në problemin se "çfarë do të ndodhë kur të klikoj këtë buton?", Thjesht duhet të klikoni dhe t'u tregoni klientëve tuaj se si funksionon në prototipin interaktiv. Në të vërtetë, është mjaft mbresëlënëse dhe e drejtpërdrejtë.

Shfaqni kornizën e telit me kujdes

Ju duhet të jeni të kujdesshëm në lidhje me djalin që është krejtësisht laik kur ju duhet t'i paraqisni kornizën e telit tuaj. Ai mund të jetë klienti juaj, gjithashtu mund të jetë një menaxher jo teknik që mori pjesë në bashkëpunim. Por ai nuk e di të vërtetën se korniza e telit dhe produkti përfundimtar mund të duket e palidhur. Pra, ai mund të mos e kuptojë lidhjen e brendshme dhe mënyrën e funksionimit midis tyre. Kështu, duhet të kuptoni një vendim të duhur nëse duhet të paraqisni dhe si.

Ky është një skemë rrjedhëse e operacionit të përdoruesve të aplikacionit, e skicuar nga Fernando Guillen. Sigurisht, është padyshim versioni i hershëm i projektimit.

Një kornizë teli është pjesa më e rëndësishme e një modeli. Kur e keni parë këtë tabelë të rrjedhës, do të kuptoni pse është kohë për të shpjeguar atë që quhet kornizë teli dhe pse duhet të përdorim kornizën e telit. Ose, ju thjesht kaloni këtë hap.

Farë është një Prototip

Kërkesa për një prototip është më e lartë se korniza e telit / kornizës interaktive, duhet të jetë një prototip i besueshmërisë së lartë i cili është interaktiv dhe i përshtatet ndërfaqes përfundimtare të përdoruesit sa më shumë që të jetë e mundur.

Synimi i prototipeve është mjaft i qartë: për të simuluar ndërveprimin midis përdoruesit dhe ndërfaqes sa më realiste të jetë e mundur. Kur shtypni një buton, duhet të kryhet operacioni përkatës dhe faqet përkatëse duhet të shfaqen, përpiquni të bëni më të mirën për të simuluar një përvojë të plotë të produktit.

Karakteristikat vizuale të prototipit

Padyshim, prototipi duhet të përmbajë tiparet estetike të një produkti që duhet të ketë, dhe të përpiqet të përshtatet me versionin përfundimtar. Në thelb, është një lëkurë e një produkti, pa asnjë HTML / CSS / JS të përfshirë, dhe nuk është e nevojshme të merret parasysh serveri dhe baza e të dhënave.

Avantazhi i prototipit

Pse është kaq e rëndësishme? Sepse prototipi zakonisht përdoret për përdoruesit për të provuar produktin. Testi prototip në fazën e hershme mund të kursejë shumë kosto dhe kohë në zhvillim. Kështu që ajo nuk do të harxhojë përpjekjet e arkitekturës së produktit mbrapa për shkak të ndërfaqes ndërvepruese të paarsyeshme. Pra, prototipi është një progres i përsosur për të provuar produktin për projektuesit dhe zhvilluesit.

Për më tepër, sigurimi i prototipeve për përdoruesit për të mbledhur reagime, është dobiprurëse të keni një pasqyrë të të gjitha detajeve të produktit tuaj dhe të frymëzoni të gjithë ekipin. Shumë nga mjetet prototipuese mund të ndërtojnë prototipa shpejt dhe me efikasitet, por nuk ka nevojë për kodim.

Rrjedha e projektimit

Pasi të keni depërtuar në thelbin e dizajnit dhe të keni njohur diferencën midis kornizës së telit dhe prototipit, ju po qëndroni përpara botës së projektimit të përvojës së përdoruesit.

Nëse mund të konkretizoni serinë e modelit të produktit në një rrjedhë kohezive dhe efektive të punës, do të ndodhin hollime të mahnitshme.

Këshilla

Mundohuni të përdorni elemente të redaktueshme dhe të ripërdorshme kur bëni kornizë teli. Në atë rast, ju thjesht vazhdoni të rafinoni elementet për të përfunduar prototipet bazuar në kornizat e telave.

Kur bëni kornizë telesh, përpiquni të mblidhni mendime dhe mendime nga ekipi juaj dhe klientët dhe përpiquni t'i reflektoni ato në modelet e kornizës së telave.

Përdorni mjetin tuaj më të dobishëm.

UXPin

UXPin ka ndërtuar më shumë se 900 lloje të elementeve të ndryshëm UI për ju për të krijuar kornizë teleshkrimesh dhe prototipesh.

Proto.io

Proto.io është një mjet prototiping shumë i fortë dhe mund të eksportojë kodin HTML / CSS bazuar në një prototip dhe prototip interaktiv për ekranin me prekje, i cili lejon përdoruesit të testojnë në pajisjet aktuale.

Balsamiq

Një mjet popullor, r i cili zgjat në të njëjtën kohë, vetëm për kornizën statike.

Moqups

Ky mjet mbështetës për të bërë kornizë teli direkt në internet.

Mockplus

Mockplus është mjeti gjithëpërfshirës prototipues për bashkëveprim të shpejtë, dizajn të shpejtë dhe vrojtim të shpejtë. Kjo lejon të krijoni tallje për celular (Android & iOS), Desktop (PC & Mac) dhe aplikacione në internet. Në Mockplus 3.0, shtoi bashkëpunimin efektiv të ekipit.

Axure

Si një mjet më i popullarizuar në krijimin e kornizës së telave dhe prototipeve, a kemi nevojë për më shumë prezantim të këtij mjeti? Mendoj jo.

Protoshare

Ky mjet gjithashtu mund të krijojë kornizat e telave dhe prototipet në internet.

InvisionApp

Ky mjet mund t'ju ndihmojë të krijoni një prototip të përdorshëm, nuk mund të vizatoni asgjë, por mund të shtoni lidhje midis ekraneve të ndryshme.

A doni të shkruani mendimet tuaja të projektimit në .dsgnrs. blog? Lexo më shumë…