Dallimi midis konceptit themelor UI / UX Design Diferenca midis Wireframe, Prototype dhe Mockup

Dallimet e kornizës së telit, prototipit dhe talljes janë gjithnjë duke u ngatërruar nga shumë stilistë, pavarësisht stilistit me përvojë, pashë që shumë njerëz bënin pyetje në Quora dhe Reddit në lidhje me këto terma, kështu që është thelbësore të sqaroni se çfarë dreqin është. Kjo do të zgjidhte shumë probleme dhe do të kursente energji për projektuesit.

Farë është një Wireframe?

Shtë një strukturë grafike e një faqe në internet ose një aplikacion që përmban përmbajtjen dhe elementet. Ashtu si projekti i një ndërtese, për ta bërë atë të bëhet një rrokaqiell ka nevojë për shumë vepra dhe pjesëmarrës për t’u përfshirë. Po kështu, korniza e telit duket e thjeshtë dhe duhet më tej punime që duhen bërë nga projektuesit UX, UI, IxD. Shkurtimisht, Wireframe është një dizajn i nivelit të besueshmërisë së ulët i cili ka 3 objektiva të thjeshtë por të drejtpërdrejtë:

  • Përmban informacionin kryesor
  • Vizato skicën e strukturës dhe paraqitjen
  • Pamja dhe përshkrimi i ndërfaqes së përdoruesit

1. Karakteristikat vizuale të kornizës së telit

Vizualisht, kornizë teli ekziston disa kufizime shumë të dukshme vizuale, sepse vetëm duhen linja të thjeshta, kuti, dhe ngjyra gri (shkalla e ndryshme gri tregon nivelin e ndryshëm) për të përfunduar.

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.

2. 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.

3. 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 disa mjete për tela të tilla si aspaper dhe stilolaps, Balsamiq. Sigurisht, ju duhet të përdorni këto mjete të projektimit për ta bërë atë që në fillim.

Krahasuar me një kornizë të plotë dhe të detajuar të telasheve të besueshmërisë së lartë, mbledhja e reagimeve përmes kornizës së telit lo-fi është shumë më e lehtë dhe 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.

4. 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ë.

5. Trego 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.

Vegla për krijimin e telave për krijimin e telave

Letër dhe stilolaps

Një mjet më i lehtë i zgjedhur për krijimin e telave është letër dhe stilolaps. Vizatoni rastësisht në një letër me një stilolaps, kjo është korniza më e thjeshtë e telit me linja dhe kuti themelore. Me të, dizajnerët do të paraqisnin idetë intuitivisht me shprehje të hollësishme të tekstit ose duke folur me gojë para klientëve dhe drejtuesve. Por kjo nuk do të përdoret në projektin zyrtar për kompanitë e mëdha.

Balsamiq

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. Balsamiq siguron një grup elementësh për krijimin e telave statikë në dy stile. Stili i saj i vizatimit të dorës do të ndihmojë për t'u përqëndruar në paraqitjen, modelin e funksionit, të gjitha ngjyrat janë të bardha dhe të zeza. Kështu që ju nuk do të dëgjoni ankesën për parametrat e ngjyrave dhe efektin vizual.

Farë është një prototip?

Kërkesa për një prototip është më e lartë se korniza e telit. Dallimi është se prototipi duhet të jetë një prototip i besnikë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. Ndërkohë, ajo siguron një përvojë të plotë të përdoruesit për testuesit duke simuluar ndërfaqen e produktit real dhe ndërveprimin funksional.

1. Avantazhi i prototipit

“Një prototipim miqësor për ekipin është më i favorshëm për komunikimin midis projektuesve dhe zhvilluesve. "

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.

Synimi i prototipeve është mjaft i dukshëm: 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. 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ë.

2. 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.

3. Testi i prototipit

Testimi i prototipit është një hap kryesor në procesin e hartimit të prototipit i cili është një nga pikat kryesore në procesin e përgjithshëm. Por si të bëhet testimi i shfrytëzueshmërisë është një temë e madhe për të folur këtu. Një test i thjeshtë mund të kushtojë rreth një orë ose më shumë, është e mjaftueshme për të provuar 5 ose 6 skena kryesore. Këtu janë disa pyetje të listuara për referencën tuaj:

  • Si e fillon përdoruesi detyrën? (Kërkoni ose shikoni?)
  • Doesfarë bën përdoruesi së pari? dhe tjeter?
  • Si e merr ai vendimin përfundimtar?
  • A e kuptojnë qëllimin e projektimit? Difficultiesdo vështirësi?

Shtë një proces i vazhdueshëm për të bërë modelin e prototipit të produktit, dhe kërkon përsëritjen dhe përmirësimin e tij.

Mjetet prototipuese

Po kërkoni një mjet të shkëlqyeshëm prototipimi të shpejtë? Pa buxhet? Nuk ka justifikim. Mockplus Black Friday 2017 është këtu për ju! Bashkohuni me grupin zyrtar Slack zyrtar tani, administratori do t'ju ofrojë 40% kuponë zbritje dhe Paketa falas të UI Kits & Fonts. Kjo ofertë e kufizuar kohore është e vlefshme për të gjitha paketat dhe zgjat deri më 31 nëntor, duke kursyer të paktën 80 dollarë jashtë çmimit të rregullt. Për më tepër, ju do të merrni mbështetje të teknologjisë pa pagesë gjatë gjithë jetës në Mockplus edhe nëse nuk jeni një përdorues i paguar tani. Ejani dhe shijoni Mockplus Black Friday 2017!

Mockplus

Mockplus është mjeti gjithëpërfshirës prototipizues për ndërveprim 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.2, ajo shtoi modalitetin e dizajnit të fluksit UI, përsëritësin, projektet demo dhe modelet dhe Importin e Skicës. Karakteristika të tjera si Mind Design Mode Mode do të paraqiten në versionet pas Mockplus 3.2.

UXPin

UXPin ka ndërtuar më shumë se 900 lloje të elementeve të ndryshëm të UI-së për ju për të krijuar kornizë teli dhe prototipe. Funksioni i tij i përgjigjes së pikës së përgjegjshme u lejon përdoruesve të krijojnë prototipe dhe kornizë të përgjigjshme që mund të funksionojnë në pajisje dhe rezolucione të ndryshme.

Farë është një tallje?

Përqasja është "skenari vizual" i përdorur për prezantimin e dizajnit të përgjithshëm vizual të produktit. Ajo ka një element vizual më të pasur sesa korniza e telit, përfshirë grafikat, paraqitjen, ngjyrën dhe prezantime të tjera vizuale më të hollësishme. Në një farë mase, është dizajni përfundimtar i produktit.

Ashtu si korniza e telit, Mockup është statik dhe i pa funksionueshëm. Ai përqendrohet në shfaqjen e produktit përmes shtimit të një pasurie të elementeve vizuale për të arritur në një besnikëri të lartë. Që përdoret shpesh në diskutimet e dizajnit vizual për reagime të shpejta dhe përmirësim në dizajnin vizual të produktit.

Rrjedha e projektimit

Pasi të keni depërtuar në thelbin e dizajnit dhe të keni njohur diferencën midis kornizës së telave, modelit, 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 elementët 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