Share
Adobe Illustrator se confruntă cu un come-back în lumea designului web. Nu numai că SVG devine frecvent utilizat online, dar tot mai mulți designeri folosesc vectori pentru sincronizare. Următoarele sfaturi vă vor ajuta să profitați din plin de Illustrator ca instrument de modelare wireframe.
Îmbrăcămintea de lucru este despre operarea rapidă și iterarea rapidă. Scopul nu este de a crea interfețe atractive; prioritatea numărul unu este de a crea informații și experiență.
Uneltele de scanare clarifică ierarhia de pe o pagină web; acestea demonstrează în mod vizual ordinea în care utilizatorii ar trebui să proceseze informațiile disponibile. Dacă doriți ca utilizatorii să proceseze titlul înainte de a apăsa butonul "cumpărați acum", titlul trebuie să "atragă" butonul solicitând mai multă atenție.
Această ierarhie vizuală poate fi definită în mai multe moduri. Am putea utiliza mărimea pentru a face titlul mai impactant, am putea folosi poziționarea (plasându-l înaintea butonului). Am putea folosi culoarea, contrastul și o serie de alte lucruri, dar a face acest lucru într-un cadru wireframe face doar lucrurile mai confuze.
Prin eliminarea culorii din ecuație, relația vizuală definită de poziția, mărimea și (dacă doriți să mergeți în plus) contrastul este mult mai curat.
Paleta monocromă caldă a kiturilor UX ale lui Eric Miller DesignNu construim kituri de UI destul de pixeli. Alegeți o gamă limitată de gri, apoi folosiți culoarea doar pentru etichete și note.
Vorbind de etichete, note și comentarii, este o idee minunată de a plasa fiecare pe un strat dedicat. Același lucru este valabil și pentru orice altceva care are un scop specific; cum ar fi comportamentul, interacțiunea, gesturile și așa mai departe.
Plasați vizuale pe un singur strat, comportament pe altul și etichete pe altul, astfel încât să puteți comuta cu ușurință vizibilitatea acestora atunci când este necesar.
USCAT. este folosit în general ca termen de programare, dar este la fel de aplicabil pentru fluxul de lucru al proiectului. În orice cadru wireframe, vom folosi și reutiliza anumite obiecte. Transformați aceste obiecte în simboluri, iar schimbările pe care le faceți la un moment dat se vor reflecta imediat în restul.
De exemplu, iată un câmp de formular simplu:
Să o tragem în panoul Simboluri (Shift + Comandă + F11)
Acum putem trage acest simbol din simboluri de câte ori ne place, pe tabloul de bord. Dacă faceți dublu clic pe oricare dintre ele, îl vom izola (un fel de obiecte grupate), astfel încât să îl putem edita. Orice modificări pe care le facem, în acest caz rotind colțurile dreptunghiului, vor fi aplicate fiecăruia dintre simbolurile câmpului de formule pe care le-am folosit.
Odată ce avem o colecție de simboluri, le putem salva și ca set:
Acest lucru ne va permite să le încărcăm în alte fișiere pentru viitor.
Dacă doriți să aflați mai multe despre paleta de simboluri, consultați Sfat rapid: Lucrul cu simboluri în Adobe Illustrator.
Un sfat extraordinar este de a folosi arrowheads pentru accident vascular cerebral, ceva ușor disponibil în Illustrator direct din cutie de la CS5. Rețelele de tip wireframe reprezintă ocazia ideală de a descrie vizual interacțiunile, fluxul de aplicații, navigația și mișcarea.
Aceste zile putem adăuga cu ușurință săgețile de săgeată la lovituri, direct din panoul Stroke.
Putem chiar edita fișierul Illustrator "Arrowheads.ai", explicat de Ryan Cornwell, și să adăugăm propriile săgeți în mix.
Notă: Enervant, instrumentul dropper nu aplică vârfurile de săgeată împreună cu alte stiluri de lovituri, astfel încât nu este la fel de ușor cum ar putea fi să duplicați efectul pe care l-ați ales. Dar totuși, ele sunt perfecte pentru telefoanele mobile.
În multe moduri, aceasta continuă să nu folosiți culoarea. Dimensiunile unificatoare și distanțarea elimină un element de distragere a atenției de la firmele-cadru, ajutându-ne să ne concentrăm vizual asupra a ceea ce este important.
Nu contează dacă dimensiunile exacte nu reflectă ceea ce va fi UI în continuare pe linie; atâta timp cât ierarhia și relațiile rămân adevărate, suntem bine să mergem.
Aplică o grămadă în placa dvs. Artboard plecând Afișați> Afișați grilă. Selectarea Vizualizare> Snap to Grid vă va ajuta să poziționați obiectele cu precizie.
Pentru a specifica exact ce doriți ca grilă dvs. să arate (și amintiți-vă, nu mergi pentru detalii minuscule aici) du-te la Illustrator> Preferințe> Ghiduri și grilă ... Odată ce puteți defini distanța dintre liniile de grilă, indicați câte subdiviziuni doriți în acele linii.
Notă: Simțiți-vă liber să vă colorați grila în altceva decât în gri; nu va face parte din produsul final.
În funcție de nivelul de fidelitate (cât de adevărat este site-ul final pe care îl vizați), este posibil să aveți text real în interiorul butoanelor, de exemplu. Pentru ca aceste butoane să crească și să se micșoreze în funcție de conținutul lor, nu utilizați obiecte, utilizați stiluri grafice.
Să începem cu un șir de text fals.
Acum hai să deschidem panoul Aspect plecând Fereastră> Aspect.
Folosind panoul Aspect, puteți adăuga mai multe umpleri la un obiect. Putem plasa aceste umpluturi în ordinea în care dorim să le afișeze; în această imagine puteți vedea mai multe, toate îngrămădite unul peste celălalt.
Pentru moment, avem nevoie doar de două umpluturi, deci să adăugăm o umplere întunecată a textului, apoi o culoare mai deschisă pentru fundal.
În prezent, nu putem vedea fundalul gri deschis, deoarece este exact aceeași formă ca cea mai înaltă umplere. Cu toate acestea, putem izola și manipula fiecare umplere separat. Selectați umplutura de jos în panoul Aspect, apoi treceți la Efect> Conversie în formă> Dreptunghi rotunjit ...
Introduceți câteva setări, indiferent de ce doriți, doar asigurați-vă că dimensiunea este relativă la obiectul pe care îl aplicăm.
Umplerea gri deschisă pe fund a luat forma unui dreptunghi rotunjit, în raport cu dimensiunea textului. Un buton! Pentru a aplica acest aspect altor obiecte, deschideți panoul Stiluri grafice și trageți întregul buton în el. Aparițiile sale vor fi salvate ca un stil pe care îl puteți reutiliza.
De exemplu, iată un șir mai lung de text. Cu textul selectat, faceți clic pe stilul grafic nou creat (pe care l-am făcut dublu-clic și redenumit) pentru a-l aplica instantaneu.
Viteza este numele jocului cu fireframing! Scribble în jos un aspect, treceți, scrobeală în jos un alt, treceți mai departe. Prin urmare, este logic să aveți un punct de plecare pregătit, pe care să îl puteți accesa cu ușurință. S-ar putea să găsiți că lucrați mai bine pe o placă grafică masivă în primul rând, trăgând obiectele finalizate într-un fișier separat sau ați putea prefera să lucrați direct cu tablouri de tablouri de dimensiuni adecvate.
Aici, de exemplu, este un aspect cu un ecran iPad (1536x2048px) și patru ecrane iPhone 4S (640x960px), deși puteți să pregătiți un fișier cu orice număr de exemple de ecran ale dispozitivului. Fie setați manual dimensiunile preferate, fie alegeți dintre oricare dintre presetările disponibile din Opțiuni Artboard:
Includeți orice ghiduri comune, nume de straturi, seturi de simboluri etc. pe care le-ați putea folosi, apoi salvați întregul lucru ca un șablon pentru utilizare ulterioară (Fișier> Salvare ca șablon ... ) Acest punct de plecare va fi apoi la dispoziția dvs., mergând Fișier> Nou de la șablon ... , complet cu toate bucățelele pe care ai lăsat-o acolo.
Illustratorul nu vine cu nici un fel de instrumente de text. Există câteva scenarii cu care merită să jucați, dar cel mai simplu mod de a obține text fals în Illustrator Wireframes este să utilizați TextExpander.
Notă: dacă sunteți utilizator Windows, PhraseExpress oferă funcționalități similare cu TextExpander
Adăugați o serie de fragmente de text pe care le găsiți în mod obișnuit pentru rame de tip wireframes (cum ar fi o rubrică mare, o scurtă rubrică, o copie a corpului de lungimi diferite, textul tipic al butonului, elementele de meniu etc.), astfel încât acestea să fie disponibile imediat din Illustrator.
Definind o frază cheie pentru fiecare fragment, TextExpander va înlocui acea expresie cu conținutul dvs. ori de câte ori îl tastați, economisind pungi de timp. De asemenea, puteți utiliza opțiunile de folder pentru a vă asigura că aceste fragmente au efect doar în Illustrator, dacă doriți.
Pentru a afla mai multe despre optimizarea fluxului de lucru TextExpander, aruncați o privire la Master TextExpander cu aceste sfaturi utile și trucuri.
Fiind capabil să vizualizeze rapid schimbările și ideile este în centrul proceselor de sincronizare, dar acest lucru poate duce la o grămadă de fișiere dezorganizate dacă nu sunteți atent. Cheia este de a salva la etape semnificative și cu convenții de numire logică a fișierelor.
De exemplu, este posibil să dorim să începem fiecare nume de fișier cu numele paginii pe care lucrăm. Apoi ar putea fi sensibil să folosiți un nume de variantă, după care numărul versiunii: page-variant-version.ai
De exemplu, este posibil să lucrăm la o pagină de destinație; una care se concentrează pe promovarea fie a unei campanii de e-mail, fie a unei cărți electronice. S-ar putea să avem nume de fișiere precum:
Nu numai acest lucru păstrează folderele de proiect organizate, dar acționează ca o formă de versiune manuală. Matt Smith discută ideea mai mult în articolul său Wireframing With Illustrator și InDesign.
Având ideea de a versiunilor chiar mai departe, salvarea fișierelor dvs. direct în Dropbox va elimina complet această sarcină din lista de discuții. Chiar și planul gratuit de la Dropbox va stoca o copie a fișierelor de fiecare dată când le salvezi, timp de treizeci de zile.
De asemenea, Layervault oferă o asemănare asemănătoare în planul său liber.
În ambele cazuri, acest lucru este util mai ales dacă colaborați cu o echipă. Având toți membrii care lucrează dintr-o locație centrală, cu opțiunea de a restabili orice versiune dacă cineva face ceva ciudat, este ideal pentru munca în echipă.
Multe dintre aceste sfaturi sunt în întregime personale pentru propriul meu flux de lucru și nu se pot traduce perfect în propriul tău mod de a face lucrurile. Cu toate acestea, sper că cel puțin ar declanșa o anumită curiozitate, pentru a vă face să vă gândiți la felul în care vă planificați schemele web. Dacă aveți alte sfaturi proprii, vă rugăm să le partajați în comentarii!
Accentsconagua