Share
De-a lungul anilor, am dezvoltat câteva metode și trucuri pentru a-mi îmbunătăți productivitatea și consistența muncii. Acest tutorial se va referi la modul în care să îmbrățișezi gândirea modulară în fluxul de lucru, atunci când construiți UI-uri flexibile și ușoare folosind Adobe Illustrator CS5 (sau mai sus) împreună cu câteva resurse gratuite. Să începem.
Gridcalculator.dk oferă opțiunile de care aveți nevoie pentru a crea cu ușurință o rețea flexibilă. Acest lucru vă poate economisi timp pentru experimentări și calcule.
Grilele trebuie să fie separate de obiecte, astfel încât să le puteți comuta independent și să le reutilizați în timpul proiectării mai multor pagini sau ecrane.
Plasați ghizii dvs. ca straturi de top ale documentului dvs., mai presus de tot conținutul dvs..
Dacă grila are mai multe coloane, este mai bine să le separați în straturi independente sau ar putea deveni prea aglomerate. Este posibil ca unele pagini să aibă nevoie de patru coloane, altele ar putea avea nevoie doar de două coloane. Aceasta vă permite să gestionați vizibilitatea rețelei în funcție de nevoile dvs..
Utilizarea unui browser complet scalabil vă va ajuta să exportați imagini de înaltă rezoluție și să creați modele receptive.
Poziționați browser-ul dvs. sub toate straturile de conținut.
Notă: În atașamentele acestui tutorial, puteți descărca setările de configurare Illustrator, care includ versiuni vectoriale de desktop cromat și safari mobile.
Personalizarea Spațiile de lucru (Fereastră> Spațiu de lucru) pentru a vă potrivi nevoilor dvs. personale sau de proiect este crucială pentru fluxul de lucru. Știu ce unelte folosesc cel mai frecvent, așa că închiderea / deschiderea panourilor și mutarea ferestrelor în jurul lor este plictisitoare și neproductivă. În prezent lucrez cu trei spații de lucru în funcție de dimensiunea ecranului:
Folosirea spațiilor de lucru este cu adevărat curată: pot să revin cu ușurință interfața la setările implicite făcând clic pe Resetați (numele tabloului de bord).
Când creați un document nou, părăsiți Aliniați obiectele noi la grila Pixel necontenit. Da, necontrolată.
Dacă verificați această opțiune, unele elemente de interfață, cum ar fi textul expus (extins), vor fi distorsionate și nu veți putea să desenați anumite forme în mod liber atunci când punctele se fixează în mod constant la grila pixelilor.
Ar trebui să alegeți obiectele care trebuie aliniate pixelului selectând Aliniați la Gridul Pixel opțiune de la Transforma panou.
Notă: Odată ce aplicați Aliniați la Gridul Pixel la un obiect, nu există nicio modalitate de a readuce obiectul selectat la starea inițială "nealiniată". Dacă debifați căsuța nu vă va salva.
Atunci când măriți imaginea de artă peste 100%, puteți vedea efectiv pixelii ca și cum ați lucra cu o imagine bitmap. Activați-o accesând Vizualizați> Previzualizarea pixelilor. Acest lucru vă va permite să aflați ce pixeli ar putea cauza marginile fuzzy, astfel încât să le puteți repara în zbor.
Notă: Grila pixelilor este sensibilă la originea conducătorului (0,0). Mutarea originii conducătorului va schimba modul în care Illustrator "rasterizează" opera de artă. De asemenea, asigurați-vă că coordonatele obiectelor X și Y sunt rotunjite.
Illustratorul are câteva funcții matematice de bază pentru a ajusta obiectele din cadrul panourilor și al dialogurilor. Acest lucru este util când doriți să adăugați (+), să scăpați (-), să împărțiți (/) sau să multiplicați (*) valorile. Aceste operațiuni pot fi folosite în obiecte, în lovituri, în transparență și în multe alte lucruri.
Din nefericire, puteți face o operațiune la un moment dat. Ceva ca "260/3 * 2" nu este posibil.
De obicei, aceeași componentă UI este folosită mereu și mereu, schimbând doar dimensiunea și culoarea. Gândiți-vă modular, planificați înainte și construiți componente nedistructive care pot fi ușor reciclabile. Evitați verificarea fiecărui ecran pentru a vedea dacă ați uitat să actualizați un element. Simbolurile pot fi foarte puternice atunci când sunt bine.
Ori de câte ori schimbați simbolul original, aceste modificări se reflectă imediat în toate instanțele găsite în documentul dvs. Acest lucru este util în special pentru regiunile recurente, cum ar fi butoanele, subsolurile, elementele de paginare, navigația, fundalul etc..
Puteți utiliza chiar și simbolurile în interiorul simbolurilor ("combos"). Acest lucru vă economisește timp și asigură coerența pe întreaga interfață.
Scalarea 9-Slice este o opțiune de simbol avansat care vă permite să definiți care zone ale unui simbol nu se vor întinde în timp ce își vor schimba dimensiunea.
Dacă schimbați lățimea unui simbol fără a utiliza această funcție, veți obține forme deformate. Acest lucru poate fi de ajutor special pentru butoanele atunci când aveți nevoie doar de un segment de simbol pentru a fi întins.
Notă: Puteți să activați 9 scalarea într-un simbol în orice moment. Dar pentru rezultate mai bune, asigurați-vă că ați verificat opțiunea de 9-scalare atunci când creați simbolul pentru prima dată.
Aspectele de aspect nu influențează structura de bază a unui obiect sau grup de obiecte. Este destul de util să folosiți efecte cum ar fi colțurile rotunjite sau stive de culori care pot fi schimbate sau eliminate în orice moment.
Există o modalitate de a crea butoane care se adaptează lungimii textului. Astfel:
Joacă-te cu el. Puteți salva asta ca pe un Stilul grafic pentru utilizare ulterioară.
Notă: Acest lucru este recomandat doar pentru încadrarea în sârmă, deoarece alinierea pixelilor este dificilă cu această metodă.
Aceasta este una dintre caracteristicile cele mai subevaluate, dar este foarte puternică. De fiecare dată când modificați o culoare globală, toate obiectele care utilizează acel model sunt actualizate. Puteți regla instantaneu zeci de obiecte.
Grupurile de culori sunt un economizor de timp mare atunci când lucrați cu sisteme de culori uriașe sau cu mai multe mărci simultan. Oferindu-le nume clare, face ca oamenii să poată căuta și lucra ușor din același fișier.
Dacă sunteți dispus să experimentați, puteți descărca palete și scheme de culori din surse precum Kuler și Colourlovers. De asemenea, jucați în jur cu Recolor Artwork roată pentru a încerca diferite teme de culoare: Editați> Editați culorile> Recolor Artwork.
Stilurile de stil pot fi aplicate oricăror cantități de text: de la bucăți mari la cuvinte singulare. Acestea sunt stiluri mai flexibile și mai atractive. Din moment ce nu facem lucrări tipărite, folosiți numai stiluri de caractere pentru a vă asigura că tipografia dvs. este consecventă.
Ar trebui să comandați lista de stiluri de caractere după dimensiune: de la text mai mare la mai mic, după ordinea aspectului: de sus în jos sau alfabetic. Acest lucru vă va ajuta să vă mențineți o ierarhie mai bună și să căutați cu ușurință lista.
Reglați bine și reutilizați stilurile cât mai mult posibil pentru a evita crearea prea multor excepții. Acest lucru va simplifica dezvoltarea și va spori coerența.
Orice text fără context sau relevanță pentru subiect este fără valoare. Nu vă abateți de experiența reală. "Lorem ipsum" vă oferă o formă, dar nu vă dă sens. Scrierea propriei copii pentru titluri sau navigare explică utilizarea lor și informațiile valoroase pe care le pot oferi. Dacă site-ul sau aplicația dvs. necesită introducerea de date, introduceți cuvinte reale și relevante. Introduceți un nume sau un oraș real.
Când utilizați text real, descoperiți aspecte care altfel ar putea să nu fie observate: coloanele sunt prea largi / înguste, câmpurile trebuie să fie mai mari / mai mici, unele lucruri să funcționeze într-o singură limbă, dar să nu funcționeze pe altele..
Utilizarea datelor reprezentative reprezintă un aspect pozitiv pentru ceea ce va fi produsul finit.
Cu Illustrator nu vă limitați la o rezoluție specifică. Într-un singur document și utilizând Artboards, puteți simula modul în care un interfață utilizator trebuie să răspundă la diferite rezoluții ale ecranului și să le editați simultan utilizând culorile globale, simbolurile și stilurile de caractere. Chiar și cu zeci de ecrane diferite, fișierul va rămâne mic și ușor de gestionat.
Denumiți fiecare Artboard în funcție de dimensiunea dispozitivului / ecranului. Aceasta va numi automat aceste ecrane la salvare. Voi împărtăși mai multe sfaturi despre salvare și numire în tutorial.
Notă: În atașamentele din acest tutorial, puteți descărca configurația de ilustrație receptivă văzută mai sus.
Acest lucru vă permite să vedeți cum arată o singură pagină în fiecare dimensiune a ecranului și să exportați toate straturile (paginile) dintr-o anumită placă Artboard (dimensiune ecran) independent.
Curățarea este foarte importantă pentru a vă păstra fișierele în formă bună și pentru a accelera performanța. Pentru a realiza acest lucru, utilizați opțiunile încorporate în Illustrator.
Windows> Acțiuni> Ștergere elemente nefolosite din panou
Această acțiune va trece automat prin fiecare panou, va selecta conținutul care nu este folosit și apoi va fi șters în câteva secunde.
Această acțiune prestabilită nu include curățarea stilurilor de caractere neutilizate. Puteți adăuga acel pas sau puteți să o faceți manual Selectați Toate Neutilizate, apoi distrugeți-le.
Dacă doriți să scăpați de punctele de vânătoare, de obiecte nevopsite și de căi de text goale, procedați astfel:
Când utilizați straturi, ascundeți toate grupurile sau obiectele din Opțiunile panoului de straturi. Asa ar trebui sa arate:
Denumiți fiecare strat cu un nume de pagină. Dați numere pentru fiecare nume de straturi pentru a le păstra ordonate când sunt exportate. Folosirea capacelor și a denumirilor care nu se încadrează, uneori, le ușurează citirea.
Cele 59 straturi / pagini au o greutate de numai 2,5 mb (fără imagini încorporate), ceea ce permite o performanță ridicată și timpi de economisire foarte rapizi.
Pentru a include ghiduri de stil pentru dezvoltarea fișierelor, trebuie să creați un "substrat" asociat fiecărei pagini / straturi. Acesta este modul în care faceți acest lucru:
Accentsconagua
GHID STILISTIC Aceste ghiduri vor rămâne pe lângă conținutul dvs. și deoarece sunt poziționate într-un "substrat", puteți gestiona cu ușurință vizibilitatea acestora.
Când plasați imagini bitmap, nu încorpora în fișierul dvs. Alege Legătură in schimb.
Acest lucru va reduce dimensiunea fișierului dvs., va îmbunătăți performanța ilustratorului și vă va permite să editați separat aceste imagini. Illustratorul detectează automat momentul actualizării unui fișier.
Dacă urmați toți pașii de mai sus, fișierele dvs. ar trebui să fie ușoare. Cu toate acestea, dacă bifați Crearea fișierului compatibil PDF în timp ce salvați, acest lucru va umfla dimensiunea fișierului dvs. și va crește timpul de economisire. Deoarece avem de-a face doar cu grafica pe ecran cu mai multe straturi și tablouri de bord, nu există niciun avantaj real în a lăsa acest lucru verificat.
Pentru un control mai bun al opțiunilor de export, descărcați acest script Multi Exporter. Folosirea este destul de simplă, dar aruncați o privire la documentație pentru a putea profita din plin de ea.
Mărimea dispozitivului / fragmentarea rezoluției face ca exportul de materiale mobile să necesite o mulțime de timp. Ei bine, scripturile pot ajuta și la asta. Descărcați aceste scripturi Illustrator pentru designul mobil.
Activele mobile necesită denumirea specifică a fișierelor în funcție de sistemul de operare. Pentru a vă urma convențiile de denumire, este mai ușor să creați fișiere separate pentru Illustrator pentru fiecare sistem de operare. Dacă unele elemente sunt comune pentru platformele pe care lucrați, creați un fișier numit "comun" sau altceva care vă convine.
În mediile web și mobile, performanța este esențială și fiecare octet contează. Illustratorul nu are optimizare PNG / JPG, deci folosiți ImageOptim (Mac OS X) după ce ați exportat conținutul.
Ne îndreptăm spre o rețea responsabilă și agilă, în care interfața utilizatorilor noștri trebuie să fie imună la densitatea pixelilor și consecventă în mai multe dimensiuni diferite. Scalabilitatea infinită este de neprețuit, iar vectorii reprezintă o parte importantă a independenței rezoluției.
Modulul de lucru modular al Illustratorului se opune scării și timpului și este o opțiune solidă din punct de vedere al productivității și flexibilității. M-am împiedicat. Și tu?
