Accentsconagua
Share
Ce veți creaÎn acest tutorial vă duc în procesul de proiectare pentru a crea un design receptiv în Sketch. Pentru a păstra lucrurile la punct, voi vorbi despre o pagină de destinație receptivă pe care am creat-o pentru o aplicație de călătorie o vreme în urmă. Hai să intrăm în ea!
Fiecare proiect de design are un fel de configurare. Pentru aceasta specifică, voi vorbi pe scurt despre conținut și firmele înainte de a sări în procesul de design receptiv în Sketch.
Este, în general, o bună practică să înțelegeți conținutul înainte de a începe un proiect de proiectare. Exact așa pornesc toate proiectele mele (pentru ceea ce merită, este o parte din contractul meu - ceva ce vă recomand să-l puneți și în practică). Acest tutorial se concentrează pe partea UI a lucrurilor, omitând întrebările importante despre UX cum ar fi motivul pentru care au fost selectate anumite conținuturi, obiectivele paginilor și așa mai departe.
În timp ce discutați despre conținut cu clientul sau cu echipa dvs., va trebui să vă gândiți la conținutul de pe ecrane mici și mari. Vă sugerăm să scrieți mai întâi conținutul pentru mobil, să scrieți totul într-un Doc Google. Apoi, deschideți documentul de pe telefonul dvs. pentru a afla dacă este exact sau dacă este prea mult. Dacă parcurgeți paginile și paginile de conținut scris pe telefon, știți că trebuie să remediați acest lucru imediat.
Întotdeauna, indiferent de ce, tăiați conținutul în mod semnificativ.
"Scoateți jumătate din cuvintele de pe fiecare pagină, apoi scăpați de jumătate din ceea ce a mai rămas" - Steve Krug, Do not Make Me Think
Odată ce sunteți mulțumit de conținutul mobil, puteți adăuga mai multe la versiunea tabletă și desktop. Ecranele mai mari au mai multe imobile pe ecran pentru a gestiona informații mai detaliate.
Veți trece prin revizii, desigur. Nu te mai agăța de asta în acest stadiu. Conținutul trebuie să fie aproape de final, dar nu trebuie scris în piatră.
Pentru a afla mai multe despre o abordare bazată pe conținut, citiți articolul lui James Deer:
Acordul de conținut pentru toate versiunile de site-uri reprezintă primul pas în stabilirea designului. Știți acum ce să vă așteptați. Este absolut bine ca conținutul să rămână la fel în întregime, la fel cum este să apară sau să dispară anumite conținuturi în funcție de dimensiunea ecranului.
Cel mai obișnuit tip de conținut de pe web este textul scris. Cu toate acestea, există alte elemente, inclusiv imagini și grafice (adică fotografii sau ilustrații), videoclipuri, citate, fișiere audio (adică podcasturi), jocuri sau chiar conținut încorporat prin iframe.
Nu trebuie să aveți toate videoclipurile și episoadele de podcast atașate. Cel puțin au o descriere a conținutului vizual sau auditiv. Asta am făcut pentru acest client. Știam foarte bine ce grafică am dorit pentru fiecare secțiune pentru a explica în plus propunerea de valoare a fiecărei secțiuni. Dar nu aveam grafica reala la momentul discutarii continutului. Tocmai am descris-o.
Următorul pas este reprezentarea vizuală a conținutului. Cu acest proiect am ales să fac niște simple fire-frame-uri de fidelitate. Am vrut să trag rapid și vizual conținutul. Am realizat două rame, un telefon mobil și un desktop pentru că fiecare avea cerințe de conținut diferite. Ambii vă dau o idee generală despre structura vizuală a paginii de destinație.
Puteți folosi orice unealtă cu care vă simțiți mai confortabilă pentru fire, dar am folosit Sketch aici. Aveți posibilitatea să creați fâșii de înaltă fidelitate și fire de hârtie. Nu contează. Puteti chiar folosi tehnicile discutate mai tarziu in acest tutorial pentru a crea sensibil wireframes.
Să sarăm în designul UI receptiv cu Sketch.
Aceasta ne va ușura viața dacă identificăm mai întâi conținutul care este același pentru toate variantele și pentru conținutul unic pentru anumite ecrane.
În acest design, următoarele elemente sunt prezente în toate ecranele:
Elemente unice pentru diferite dimensiuni ale ecranului:
Perfect. Acum putem începe să creăm aceste elemente în mod corespunzător.
Butonul de bază pentru desktop și tabletă este un dreptunghi de 352 x 40 pixeli, cu o rază de graniță de 5 pixeli. Fundalul este # 7455FF. În cadrul proprietăților de redimensionare, selectați să fixați obiectul la marginile din stânga și dreapta și să setați o înălțime fixă.
Următorul este stratul de text, copia butonului, cu un font Note Sans UI, caractere aldine și o dimensiune a fontului de 16px. Este alb sau #ffffff. Lățimea de aliniere este setată la auto și nu există alte setări pe stratul de text. Dacă doriți, puteți transforma butonul într-un simbol, deși nu este necesar pentru acest design specific deoarece butonul apare o singură dată pe întreaga pagină.
Când combinați cele două elemente într-un grup (sau un simbol), ar trebui să puteți redimensiona lățimea butonului fără probleme, textul rămânând în centru, indiferent de lățimea butonului.
Un alt lucru pe care îl puteți face este să utilizați pluginul Anima pentru Sketch. Acesta vă permite să creați ecrane fluide care se redimensionează, păstrând în același timp proprietățile împreună, cum ar fi spațierea, umplutura sau înălțimea. Este minunat pentru layouts cu formulare.
Putem folosi Anima pentru a lipi împreună elemente de antet diferite, în timp ce redimensionarea este de la mobil la desktop. De asemenea, ne va da un bun indiciu despre modul in care aceste elemente se vor comporta in relatie unul cu celalalt in alte dimensiuni ale ecranului decat cele pe care le proiectam in - dimensiunile intre ele ca un telefon mai mare sau o tableta.
Cu toate acestea, pentru ceea ce facem astăzi, acest plugin nu adaugă prea mult.
Acest design al paginii de destinație solicită unele rubrici mari și frumoase. În versiunea desktop h1 este 72px în timp ce h2 este 32px. 72px este prea mult pentru mobil. Va trebui să facem poziția H1 receptivă. Nu este la fel de simplu ca tipografia fluidă în CSS, dar este posibilă.
Trebuie să creați un stil pentru fiecare rubrică h1, apoi să îl salvați ca un stil de text cu convenția sau sintaxa potrivită pentru denumire. Acest lucru ne va permite să selectăm mai târziu h1 necesar, după cum este necesar, în timpul proiectării restului paginii. Nu este perfect și destul de manual, dar așa merge.
Pentru h1 acestea sunt următoarele stiluri: Noto Sans UI, bold, dimensiunea 72 (desktop), dimensiunea 48 (tabletă) și dimensiunea 32 (telefon).
Aceeași sintaxă poate fi aplicată și pentru organizarea simbolurilor. De exemplu: Style-name / sub-nume /-stil specific
Deci, pentru a ne organiza tipografia, putem folosi următoarea sintaxă pentru h1 mare pentru desktop-uri: Rubricile / H1 / Desktop, pentru tablete: Rubricile / H1 / tabletă și pentru telefoane: Rubricile / H1 / Telefon.
Motivul pentru care se afișează Headings / h1 în drop-down, deocamdată, este că nu am adăugat alte stiluri. Deci haideți să mergem pe h2 și să adăugăm un alt strat de ierarhie în stilurile de text.
Pentru h2, folosesc următoarele stiluri: Noto Sans UI, bold, mărimea 73 (desktop și tabletă) și dimensiunea 18 (telefon). Să folosim următoarea sintaxă pentru h2 pe telefoane: Rubricile / H2 / Telefon. Pentru tabletă putem face două lucruri aici, îl putem combina cu desktop-ul și îl sunăm Titlurile / H1 / Desktop + Tablet sau putem avea două stiluri separate care sunt pur și simplu identice. Scriu despre acest design după ce a terminat, așa că este puțin părtinitor. Voi spune să separăm tableta de desktop deoarece este o practică mai bună de design.
Cu stilurile tipografice din Sketch, puteți obține cu adevărat detalii detaliate și organizate cu regulile lor de sintaxă. Cu toate acestea, din această scriere, nu există nicio caracteristică în Sketch sau niciun plugin, care redimensionează tipografia pentru dvs., așa cum funcționează tipografia fluidă prin CSS. Încă de acum, este încă un proces manual.
În continuare, vom crea simboluri pentru a reutiliza și pentru a ne face viața mai ușoară. În acest design, avem o mulțime de mărturii și citate de la utilizatorii din trecut; ei trebuie să răspundă.
Din fericire, formatul pentru mărturii va fi același pe întreaga pagină, așa că trebuie să facem asta doar pentru ei. În primul rând, avem numele persoanei și apoi citatul. Cele două stiluri diferite, totuși. Să formăm prima sursă. Am numit stilul textului Mărturie / Sursa. Stilul real al acestui element este: Noto Sans UI, bold, mărimea 14, înălțimea liniei 24. Apoi, avem marturii reale. Am numit stilul textului Mărturie / Citat. Stilul său este: Noto Serif, obișnuit, dimensiunea 14, înălțimea liniei 24.
Pentru a crea un simbol, selectați ambele elemente de text și faceți clic pe Creați simbol pictograma din partea stângă sus a barei de instrumente. Mi-am numit simbolul scrisoare de recomandare.
Acum, trebuie să editați simbolul pentru ca acesta să fie redimensionat pentru diferite dimensiuni ale ecranului și pentru diferite dimensiuni de cotare. Faceți dublu-clic pe simbolul nou creat pentru al edita.
Mai întâi de toate, trebuie să redenumim elementele din simbol. În mod implicit, numele unui strat text este creat din propriul conținut textual. Le-am redenumit Numele sursei și Citat, respectiv.
Apoi, trebuie să ajustăm setările de redimensionare pentru ambele elemente de text. Acestea vor avea aceleași proprietăți de redimensionare. Nici unul nu va avea o lățime sau o înălțime fixă. Dar, ambele vor redimensiona de la marginea lor stanga si de sus. Acest lucru vă va asigura că redimensionați simbolul, elementele de text rămân acolo unde aparțin.
Pentru a reutiliza simbolul, faceți clic pe meniul derulant din partea stângă sus a barei de instrumente care spune Introduce și navigați la Marturii simbol. Apoi faceți clic pe oriunde pe tabloul de bord pentru al plasa. Pentru a modifica conținutul textului de pastă în intrările de suprascriere corespunzătoare pe care le-am redenumit înainte. Redimensionați după cum este necesar.
Folosesc termenul "grafice receptive" puțin diferit aici. Ideea este că grafica se va schimba în funcție de dimensiunea ecranului. Cu toate acestea, ar trebui să fac manual grafic pentru fiecare ecran. Dacă nu sunt fluide, ca un element de intrare sau un buton, acestea nu pot fi efectuate automat.
Pentru a înțelege mai bine ce grafică receptivă este, aici este un link către un articol pe care l-am scris despre icoane receptive, dar ideea este exact aceeași pentru toate tipurile de grafică și imagini.
Putem transforma atât cartile de itinerar în simboluri, cât și cărțile din secțiunea socială a paginii de destinație. Să mergem cu cărțile sociale în jurul graficului de Ziua 3 (este puțin mai interesant).
Încă o dată, selectați cardul și transformați-l într-un simbol. Faceți dublu clic pe acesta pentru a edita simbolul. Vrem să ne asigurăm că se redimensionează bine atât pe verticală, cât și pe orizontală.
Începând cu fundalul, dorim să îi oferim proprietăți de redimensionare care fac ca obiectul să fie în sus și în stânga. Același lucru este valabil și pentru cele două straturi de text. Cu toate acestea, dorim ca imaginea sau avatarul să fie fixate în partea dreaptă sus. În cele din urmă, nu uitați să schimbați titlurile acestor elemente la ceva mai adecvat atunci când eliminăm conținutul.
Și voila!
În cele din urmă, dorim să ne ocupăm și de micile detalii de design. În acest design specific, reușesc să folosesc mult linia purpurie cu un punct. Am transformat și acest indicator violet într-un simbol.
Acest simbol este alcătuit dintr-un cerc care are 8px-8px cu fundal # 7455FF. Lățimea liniei nu contează prea mult, dar valoarea implicită este de 122 pixeli. Înălțimea sa este de 2 pixeli. Din nou, cu fundal # 7455FF.
În interiorul simbolului trebuie să facem din nou o setare de redimensionare. Pentru cerc, avem nevoie să rămână la aceeași dimensiune și în același loc. Vom da o lățime și o înălțime fixă și o vom fixa pe marginea din dreapta sus. Pentru linie, îi vom da o înălțime fixă, dar nu o lățime fixă, deoarece avem nevoie să se extindă în lățime. De asemenea, îl vom fixa la marginea dreaptă când redimensionăm.
În acest fel, când redimensionăm acest simbol, acesta va schimba doar lățimea liniei.
Încă un lucru pe care îl putem face este să setăm fundalul să fie și fluid. Înălțimile secțiunilor diferă de la dispozitive mobile la dispozitive desktop; acest lucru înseamnă că va trebui să mutați elementele de fund în sus și în jos până la locul potrivit.
Aici, UI solicită o margine albă de 16px. Aceasta înseamnă că stratul de fundal trebuie să fie la 16px distanță de marginile tabloului de bord. Tot ce trebuie să faceți este să selectați stratul de fundal și, fie folosind pluginul Anima, fie folosind proprietățile de redimensionare, fixați toate marginile stratului de fundal. Deci, fixați-o în partea de sus, în partea de jos, în stânga și în dreapta. Acum, când veți redimensiona tabloul de bord, fundalul va urma exemplul!
Acum că am avut grijă de majoritatea elementelor de design care pot fi făcute reactive sau fluide sau în simboluri reutilizabile, este timpul să vorbim despre restul elementelor de design de pe această pagină.
Pur și simplu puneți-vă aici, în cazul în care vă rostogoliți mâneci și faceți modelele dvs. manual, unul câte unul. Proiectarea graficului de hartă va trebui făcută manual, deoarece este unică. Același lucru este valabil și în ceea ce privește aspectul și alegerea culorilor și decizia de tipografie.
Din păcate, proiectarea interfețelor receptive în Sketch nu este încă o bucată de tort. Dar există tehnici, chiar și pluginuri, care vă vor face viața mult mai ușoară ca designer care lucrează în Sketch. Sper că acest tutorial ți-a dat o bună descoperire a propriului meu proces de proiectare. Proiectarea UI-urilor receptive nu trebuie să fie plictisitoare, multe dintre ele pot fi automatizate.
Aveți vreo sugestie sau trucuri pentru a proiecta interfața utilizator responsabilă pentru a ne comunica cu noi? Aruncați-le în comentariile de mai jos!
