Share
În ultimul meu post, am discutat factori la nivel înalt pe care ar trebui să le ia în considerare atunci când se determină cel mai eficient tip de prototip pentru un anumit produs. Acest lucru se realizează printr-o analiză a procesului lor de organizare, flux de lucru și dezvoltare. Aici, voi compara diferitele tipuri de prototipuri prin ilustrarea a trei abordări la nivel înalt, de exemplu.
Pentru a ilustra diferite prototipuri, să presupunem că încercați să creați un prototip de încărcare a fișierelor cu următoarele funcționalități:
Toate fișierele din acest articol, inclusiv prototipurile de lucru, sunt situate aici pe github.
Protocoalele de hârtie pot fi eficiente pentru a obține o idee generală către părțile interesate și echipele de dezvoltare la începutul procesului de proiectare. De exemplu, aici spectatorul are o idee bună despre design: există o zonă în care imaginile pot fi trase, apoi sunt afișate într-o zonă din partea de jos, iar după ce faceți clic pe imagini sunt afișate într-o zonă de previzualizare a imaginilor mai mari.
Pasul 1: imaginea este trasă în zona de încărcare 
Pasul 2: apare miniatura imaginii încărcate 
Pasul 3: utilizatorul mută cursorul mouse-ului pentru a face clic pe miniatură 
Pasul 4: este afișată o versiune mai marePrima problemă potențială cu prototipul de hârtie este lipsa de rafinament. În funcție de cine sunt telespectatorii dvs. și de gradul de familiaritate cu munca dvs., este posibil să apară ca amator. Dacă publicul dvs. este alcătuit din clienți noi, prin urmare, poate doriți să creați un prototip de nivel scăzut sau de înaltă fidelitate pentru a demonstra mai mult profesionalism.
O altă problemă cu prototipul de hârtie este capacitatea sa limitată de complexitate. Acesta este un prototip relativ simplu, deci poate fi reprezentat într-o anumită măsură pe hârtie. Cu toate acestea, chiar și unele dintre elementele acestui prototip sunt neclare. De exemplu, ce se întâmplă atunci când un utilizator a încărcat mai multe imagini decât se poate potrivi în zona de previzualizare de mai jos? De asemenea, modificați elementele vizuale pe hover? În plus, sistemul de design vizual nu este reprezentat, lăsând publicului să deducă produsul final.
Unele dintre problemele cu prototipul de hârtie sunt atenuate de prototipul de încărcare a fișierului lo-fidelity. Utilizatorii pot interacționa cu prototipul lo-fidelitate: glisarea și plasarea imaginilor în zona de încărcare le distribuie în caruselul de mai jos sau utilizatorul poate selecta imagini din sistemul lor de fișiere. Dacă sunt adăugate mai mult de patru imagini la carusel, apare o săgeată dreapta, astfel încât utilizatorul să poată naviga spre dreapta pentru a vedea imaginile ascunse suplimentare. După ce faceți clic pe săgeata dreapta, apare o săgeată stângă pentru a permite derularea prin carusel.
Deși multe dintre problemele conceptuale cu prototipul de hârtie sunt atenuate în prototipul lo-fidelitate, unele probleme potențiale de comunicare rămân.
De exemplu, prototipul lo-fidelității poate sau nu poate să aibă stări de hover. Nici sistemul de design vizual nu este reprezentat, ceea ce înseamnă că designul de lo-fidelitate va trebui să fie însoțit de adiţional comps pentru a ilustra elementele vizuale.
Adesea, aceste compuze suplimentare vor avea o specificație de tip "redline" sau specificație de proiectare care detaliază fonturile, culorile și așa mai departe:
Exemplu RedlineÎn plus, vor fi necesare mai multe componente pentru a ilustra în continuare diferitele stări ale elementelor vizuale. Deci, de exemplu, ai avea nevoie de o singură specie redline separată pentru starea de hover:
La proiectarea în acest cadru, pentru fiecare element interactiv, un designer trebuie să furnizeze mai multe reprezentări. Acest lucru poate fi problematic, ca proiectarea interactivității static ia elemente din context și se pierde din vedere gestaltul în care există elemente diferite.
Prototipul de încărcare a fișierului de înaltă fidelitate prezintă întregul design într-un singur produs. În timp ce pentru realizarea prototipurilor de hârtie sau de lo-fidelitate ar fi nevoie de mai multe rezultate pentru a ilustra designul vizual, interfața și interacțiunea, prototipul hi-fidelity include toate aceste piese diferite, creând un produs final mai robust, rafinat și ușor de conștientizat.
Protocoalele de hârtie și lo-fidelitate necesită deducție în digerarea produsului: în timp ce designerul poate ilustra starea de hover pentru zona de picătură, de exemplu, devine mai complicat să comunice dacă starea de hover ar trebui să se estompeze și cât de repede. Deși ar fi mai rapid să producem inițial prototipul de lo-fidelitate, în cele din urmă ar fi mai puțin eficient dacă ideile de design sunt interpretate greșit.
Protocoalele de înaltă fidelitate necesită mai mult efort inițial, dar pot oferi o varietate de beneficii mai târziu, ceea ce duce la crearea unui produs mai bun într-un timp mai eficient. De exemplu, dezvoltatorii pot folosi inspectorul web al browser-ului (în funcție de software-ul folosit la producerea prototipului) pentru a alege valorile exacte ale CSS utilizate în prototip. Acest lucru este mai eficient în implementare, deoarece echipa dev poate copia și lipi valori, mai degrabă decât să scrie de la zero. De exemplu, aici:
Fiecare abordare prototipică are avantajele și costurile comparative. Un prototip de hârtie poate fi eficient în comunicarea rapidă a ideilor, dar poate să nu reprezinte pe deplin ideile, ducând la pierderea timpului dacă desenele sunt interpretate greșit. Protocoalele lo-fidelity prezintă potențiale capcane potențiale și necesită documente suplimentare pentru a reprezenta pe deplin produsul final.
În timp ce acestea necesită o investiție mai mare timp inițială, producerea de prototipuri de fidelitate poate fi mai eficientă pe termen lung.
Există o varietate de metode pe care le puteți folosi pentru a crea prototipuri de fidelitate. Pentru o explicație detaliată și fișiere de lucru care ilustrează modul în care a fost creat acest prototip de încărcare a fișierului de înaltă fidelitate, treceți la acest articol pe site-ul meu.
Accentsconagua