Cum să implementați un design UI iOS perfect pentru pixeli

Probabil ați auzit de nenumărate ori expresia „design perfect pixelat”, fără să vă gândiți măcar la ce înseamnă sau ce ar trebui să însemne. În ultimele luni, există șansa să fi auzit despre declinul conceptului de design pixel-perfect, dar există o mică problemă cu aceste afirmații, mai ales când vine vorba de designul UI iOS.

Și anume, definiția designului pixel-perfect nu este sculptată în piatră, ca majoritatea ghidurilor pentru UI iOS. Oamenii îl interpretează în moduri diferite, de aici problema - perfecțiunea pixelilor poate părea pentru unii, dar alții vor continua să folosească principiul pentru anii următori, deși sub un alt nume. Este în mare parte o problemă de nomenclatură.

Ce este designul UI perfect pentru pixeli?

Deoarece nu există o definiție clară a perfecțiunii pixelilor, înțelegerea mea despre conceptul de design pixel-perfect este că totul este făcut pentru a maximiza claritatea și fidelitatea. Odată ce designul este implementat, acesta arată identic pe orice afișaj iPhone, fără artefacte sau probleme de orice fel.

Crearea unei interfețe de utilizare a aplicației iOS perfectă pentru pixeli înseamnă că creați un design având în vedere pixeli și implementați exact același design pe ecran, până la fiecare pixel din designul referit, toate în același timp asigurându-vă că este adaptat în mod receptiv la alte dispozitive.

Dar de ce design Pixel-perfect?

Designerii UI fac tot posibilul pentru a crea interfețe ușor de perceput și cu care să interacționeze. Este datoria profesională a dezvoltatorului să respecte munca designerului și să implementeze interfața exact așa cum a fost livrată.

Cu aplicațiile non-pixel-perfect, este posibil ca utilizatorii să întâmpine probleme semnificative care îi vor împiedica să folosească și să se bucure de aplicație, dar aplicațiile pixel-perfect arată cu siguranță mai clare, mai curate și mai consistente.

Datorită naturii extrem de competitive a App Store-ului Apple, fiecare lustruire care îmbunătățește aspectul general și experiența utilizatorului este binevenită. Vă poate ajuta să vă diferențiați aplicația și să o faceți mai vizibilă și, prin urmare, mai profitabilă.

Acest ghid rapid de proiectare a interfeței de utilizare iOS vă va ghida prin procesul de la etapa de proiectare de bază până la implementare, din perspectiva unui designer și a dezvoltatorului.

Crearea unui design UI iOS

Să începem. Aplicațiile pixel-perfect, evident, încep ca modele pixel-perfect și știm cu toții de unde provin acestea în zilele noastre.

Instrumente esențiale de proiectare a interfeței iOS

Cred că sunt corect când spun că Sketch a devenit standardul de facto pentru designerii UI/UX web și mobil. În timp ce Adobe XD este o alternativă inovatoare, rămâne în urmă cu Sketch în ceea ce privește popularitatea.

În continuare, vom alege dimensiunea planșei de grafică. În zilele noastre, avem dispozitive iOS cu diferite dimensiuni de ecran și rapoarte de aspect și trebuie să alegem o dimensiune pentru a ne crea designul. Datorită Aspectului automat, acesta va fi adaptat perfect la alte dimensiuni de afișaj. Dacă este necesar, puteți crea diferite variante de aspect pentru diferite clase de mărime .

Singura întrebare reală aici este: cum ar trebui să împărtășească designerul informații despre adaptarea design-urilor pentru diferite afișaje cu dezvoltatorul?

Din fericire, nu este nevoie să scrieți specificațiile pentru fiecare, deoarece pluginul Auto Layout pentru Sketch se va ocupa de asta. Designerul trebuie doar să seteze aspectul automat dorit, să exporte la diferite dimensiuni de ecran cu un clic, iar dezvoltatorul va înțelege cum să plaseze constrângeri de aspect și să se asigure că totul arată bine, indiferent dacă este pe un iPhone X sau pe vechiul iPhone 5.

Notă: începând cu versiunea 44, echipa Sketch a îmbunătățit dramatic controalele de redimensionare, oferind utilizatorilor mai multă putere și control asupra modului în care ar trebui să se comporte straturile atunci când părintele lor este redimensionat.

Configurarea designului dvs

Sună grozav, dar încă nu am ales dimensiunea pe care o vom folosi pentru a ne crea designul. Potrivit statisticilor iOS lui David Smith, 57% din toți utilizatorii de iPhone se bazează pe ecrane de 4,7 inci, introduse în iPhone 6/6s și utilizate ulterior în iPhone 7 și chiar și recent lansat iPhone 8.

Sunt sigur că sunteți cu toții familiarizați cu ecranele de 4,7 inchi de la Apple până acum, dar în cazul în care nu sunteți o persoană cu cifre, vorbim despre afișaje de 750x1334 pixeli cu 326 pixeli per inch (PPI). Acesta este un afișaj Retina standard și în cod vom avea jumătate din rezoluție. Prin urmare, vă sugerez să începeți cu 375x667 pixeli.

În continuare, trebuie să ne asigurăm că designul nostru iOS UI maximizează claritatea. Pentru a atinge acest obiectiv, trebuie să activați potrivirea pixelilor :

Iată un exemplu de dreptunghi simplu cu și fără potrivire de pixeli:

Utilizați Round: Full Pixels atunci când editați obiecte vectoriale:

Acestea sunt evident doar elementele de bază și, pentru o privire mai atentă la elementele UI iOS perfecte pentru pixeli din Sketch, ar trebui să consultați tutorialul oficial.

Simțiți-vă liber să utilizați animații vectoriale complexe, deoarece un dezvoltator le poate juca cu ușurință folosind biblioteca Lottie. Puteți reda animații Adobe After Effects pe un dispozitiv mobil fără a suferi de artefacte de scalare. Furnizați doar fișierul JSON dezvoltatorului și asta este tot.

Utilizați profilul de culoare sRGB cât mai mult posibil. Dacă sRGB nu este suficient pe afișajele cu gamă largă, va trebui să furnizați fie culori, fie elemente grafice (unul sRGB și altul cu profil de culoare încorporat). Informații detaliate despre profilurile de culoare sunt disponibile în ghidurile HID de la Apple, dacă aveți nevoie.

Cod personalizat pentru rezultate perfecte pentru pixeli

Grozav! Acum știm destule pentru a crea un design perfect pentru pixeli; cum îl împărtășim cu dezvoltatorul? Evident, trebuie să ajungem în cutia noastră de instrumente.

Alegerea instrumentelor potrivite

Există instrumente incredibil de utile pentru a partaja munca designerului cu dezvoltatorii - Zeplin. Folosește-l și dezvoltatorul va avea aproape toate informațiile necesare pentru a se asigura că designul tău UI funcționează: elemente grafice, fonturi și culori utilizate în design, text și multe altele. Aproape, singurul lucru pe care designerul ar putea avea nevoie să-l furnizeze în acest moment sunt fișierele cu fonturi, în cazul în care au folosit fonturi care nu sunt incluse în iOS.

Un alt instrument tare este PaintCode, care poate genera cod din imagini vectoriale. PaintCode folosește căile SVG și datele de culoare pentru a genera clase Swift sau ObjC. Cu PaintCode, puteți utiliza expresii, variabile etc. pentru a crea stări pasive/active ale butoanelor, stări sus/jos, text dinamic, animație din variabile și multe altele.

În mod evident, va trebui să vă bazați pe Xcode și pe câteva instrumente standard de dezvoltare iOS, dar vom ajunge la asta mai târziu.

Este extrem de util dacă trebuie să actualizați dinamic doar o anumită parte a unui element de design, de exemplu, să schimbați culoarea de bază pentru un fundal degradat pe pictograma de chat. Și, ca bonus convenabil, aplicația ta va pierde în greutate.

Ok, dezvoltatorul are în sfârșit tot ce le trebuie, așa că cum implementăm perfect design-ul perfect pixel (iertați jocul de cuvinte)?

Configurarea și sincronizarea instrumentelor dvs

Cu Zeplin, ar trebui să obțineți aproape tot ce aveți nevoie, cu condiția ca designerul să configureze totul corect. Dacă ceva este trecut cu vederea sau neclar, Zeplin oferă o funcție eficientă de comentarii, permițând designerului și dezvoltatorului să identifice și să rezolve rapid problemele potențiale. Chiar dacă totul este făcut corect, comentariile pot fi folosite pentru feedback și îmbunătățiri minore.

Cu toate acestea, după cum știm cu toții, lucrurile nu merg întotdeauna așa cum a fost planificat, așa că uneori dezvoltatorul va trebui să aleagă o culoare, chiar dacă designerul a furnizat paleta de culori folosită în aplicație.

Pentru a face acest lucru corect, trebuie să vă sincronizați instrumentele:

• Setați profilul de culoare al afișajului la sRGB: accesați System Preferences - Displays - Color și alegeți sRGB IEC61966-2.1 .

• În Digital Color Meter , sau în orice alt instrument de selectare a culorilor, alegeți să afișați în sRGB .

• Verificați dacă profilul de culoare din paleta de culori Xcode este setat la Dispozitiv RGB.

Notă: Imaginile pot avea un profil de culoare încorporat. Dacă acesta este cazul, va trebui să vă adaptați instrumentele la acest profil dacă doriți să luați culoarea corectă din această imagine. Din fericire, aceasta ar trebui să fie o excepție și nu ar trebui să te confrunți cu astfel de cazuri prea des.

În Xcode 9, nu uitați să păstrați datele vectoriale atunci când este necesar. Deși va crește dimensiunea aplicației, acest lucru vă va permite și să utilizați imaginea pentru orice dimensiune de afișare. Cu toate acestea, pe iOS 10 și versiunile anterioare ale sistemului de operare mobil Apple, imaginile nu vor fi mărite folosind datele vectoriale suplimentare.

În schimb, versiunile mai vechi ale sistemului de operare vor folosi mecanisme de scalare vechi și vă vor lăsa cu o imagine neclară atunci când creșteți dincolo de dimensiunea originală. Puteți consulta documentația oficială Apple pentru informații suplimentare despre această problemă specială.

În cele din urmă, dezvoltatorul va trebui să se asigure că dimensiunile și distanțele se potrivesc cât mai aproape cu designul original. Dacă există informații îndoielnice în Zeplin, puteți măsura distanțele dintre diferitele componente ale interfeței de utilizare iOS cu variații ale regulilor ecranului. Unul dintre ele este xScope, o riglă pe ecran cu multe caracteristici practice.

Dă viață design-ului tău iOS UI

Când vine vorba de implementarea designului UI iOS, există câteva abordări din care puteți alege: Storyboard, XIB și cod personalizat.

• Storyboard - Vizualizează ecranele și navigarea între ele, dar nu există opțiuni pentru a moșteni un design de la un controler în altul.

• XIB -uri - Vizualizează un ecran sau o parte a acestuia, ușor de moștenit. Înainte de Xcode 9, nu exista nicio opțiune de a folosi ghiduri de aspect sus/jos, în timp ce în Xcode 9 putem folosi Safe Area .

• Cod - De departe cea mai flexibilă opțiune, dar nu oferă vizualizare imediată.

Pentru storyboard-uri, va trebui să vă împărțiți designul în fluxuri, de exemplu, LoginFlow.storyboard, SettingsFlow.storyboard sau NewsFeedFlow.storyboard. În acest fel, îți vei păstra storyboard-urile ușoare.

Grupați elementele UI în blocuri. Acest lucru simplifică suportul pentru toate constrângerile. Nu fi leneș și plasează vizualizările numite în ordine, deoarece acestea apar pe ecran de sus în jos. Rețineți că partea de jos va fi afișată deasupra celei de sus. Acest lucru vă va ajuta să găsiți mai rapid vederi diferite.

Consultați următorul exemplu pentru elementele negrupate și grupate:

Dacă aveți mai multe obiecte care sunt aliniate la stânga/dreapta, nu le aliniați la margine cu decalaj. Cea mai bună abordare este să se alinieze la elementul anterior sau să implementeze o vedere specială _ffset_cu o constrângere de lățime. Dacă trebuie să modificați offset-ul cândva în viitor, acest lucru va face oarecum mai ușor.

Pentru a utiliza culorile în IB, puteți pregăti o paletă în partea de jos a Xcode Color Picker.

Notă: dacă versiunea iOS minimă a aplicației dvs. este 11, puteți utiliza opțiunea „Culori denumite” din Catalogul de materiale.

Încheierea

Asta e. Acum trebuie doar să trimitem rezultatul echipei QA, să verificăm dacă totul este în ordine și voila! Aplicația noastră perfectă pentru pixeli este gata.

Scopul acestui articol a fost de a oferi un exemplu liniar și simplu de design al interfeței de utilizare iOS perfect pentru pixeli, obținând cele mai bune rezultate în cât mai puțin timp posibil. Colaborarea dintre designerii și dezvoltatorii de UI nu este întotdeauna atât de simplă și lipsită de fricțiuni, dar aceasta este o problemă pentru un alt articol.