Share
Indiferent dacă lucrați în companie, contractați sau pentru o agenție, companiile au nevoie de aplicații din mai multe motive diferite. În special, companiile înființate trebuie să se ocupe de clienții existenți și de dispozitivele pe care le utilizează. Adesea aceasta înseamnă o aplicație nouă pentru Android și iPhone.
Într-o lume ideală, am petrecut luni proiectând două aplicații. Dar, în realitate, multe proiecte nu permit prea mult timp. Pentru oricare dintre aplicațiile la care am lucrat, termenul limită a fost destul de strâns pentru proiectarea unei aplicații, să nu mai vorbim de împărțirea integrală a proiectului în două.
Destul de des proiectați o aplicație, făcându-se trucuri înainte de a le transmite două echipe de dezvoltare. Dacă proiectați o aplicație în acest fel, este important să înțelegeți diferența dintre cele două platforme de timpuriu și modalitățile rapide de a face experiența să se simtă nativă pentru fiecare.
Probabil că veți avea o preferință personală pentru un sistem. Am folosit întotdeauna iPhone-uri, așa că am o înțelegere mai naturală a modelelor UI pe iOS. Primul lucru pe care trebuie să-l faceți este să vă familiarizați cu cealaltă platformă, iar cel mai bun mod de a face acest lucru este să cumpărați un alt dispozitiv, Android în cazul meu. S-ar putea chiar să fie o idee bună să utilizați acest lucru ca dispozitiv principal pentru lungimea proiectului, pentru a obține un sentiment pentru platformă.
Dacă lucrați în casă, apelați-i să vă cumpere un dispozitiv de testare. Dacă există probleme, comunicați cu managementul valoarea pe care înțelegerea platformei alternative o va adăuga la munca dvs. de proiectare (costul este costisitor pentru două dispozitive din propriul buzunar, dar pentru o afacere este o cheltuială scăzută în comparație cu cheltuielile pe proiectarea și dezvoltarea unei noi aplicații). Dacă lucrați pe cont propriu, ar trebui să vă puteți abate de la factura fiscală.
Pe măsură ce proiectăm simultan pentru ambele platforme, în timp ce ne confruntăm cu lumea reală în care timpul este limitat, va trebui să acceptați realitatea de a prioritiza o singură platformă de la început. Nu faceți această decizie pe baza preferințelor personale, ci pe baza pieței pentru aplicația dvs. Mai multe persoane pe piața dvs. utilizează telefoane Android? Este o aplicație plătită? Care este publicul țintă? Solicitarea acestor întrebări vă va ajuta să decideți care este preferabil.
Citiți ghidul UI pentru Android și iOS. În trecut, Apple a fost cunoscut pentru a fi mai stricte cu liniile directoare. Pentru a obține o aplicație în magazinul de aplicații, există un proces de aprobare care durează aproximativ două săptămâni. Nu există niciun proces de aprobare pentru magazinul Play. Cu toate acestea, datorită acestei bariere mai mici la intrarea pe Android, calitatea designului a fost în mod tradițional mai slabă. Google încearcă să schimbe acest lucru cu ajutorul orientărilor privind designul materialelor.
Designul estetic Material a devenit foarte familiar designerilor webExistă o mulțime de kituri UI bune și gratuite pe care le puteți utiliza pentru proiectele dvs. (veți găsi unele listate la sfârșitul acestui articol). Utilizarea acestor componente va oferi în mod firesc aplicației dvs. un aspect nativ. Dar chiar și atunci când obțineți kiturile UI, poate fi dificil să știi unde să diferi și unde să rămână la fel între platforme, așa că acolo vreau să ajut.
Urmați acești pași simpli și aplicația dvs. va fi pe pistă corectă pentru a se potrivi atât dispozitivelor Android, cât și dispozitivelor iOS.
De la iOS7, Apple a trecut la un stil de design mai plat și a distrus umbrele, texturile și efectele skeuomorfe care au definit primii ani ai iPhone-ului. Android, fiind mai sistematic în stil la început, a trecut ușor. Noile linii directoare de design Google creează mai multe referințe subtile la lumea reală, cu o abordare stratificată "pe hârtie" care oferă mai multă ierarhie.
Telefoanele Android au un buton înapoi, care poate fi folosit pentru a reveni la ecranele anterioare din aplicație.
Vino înapoiiPhone-urile nu au acest buton, deci trebuie să existe o modalitate de a călători înapoi la ecranul anterior. Acest lucru este de obicei realizat de un chenar "înapoi" în partea stângă sus a ecranului, dar trebuie luat în considerare pe parcursul diverselor călătorii din aplicația dvs..
Există elemente globale (cum ar fi o bară de stare și un antet) care apar pe toate paginile designului dvs. Nu ar trebui să schimbați înălțimea sau stilul acestor bare dacă doriți ca aplicația să se simtă nativă, așa că aș recomanda să le definiți o singură dată în proiectarea primei pagini pentru fiecare platformă. Apoi, după aceea, puteți folosi un substituent (sau statutul și bara de sus din sistemul dvs. principal) pentru fiecare machetă, dar indicați dezvoltatorilor că ar trebui să fie același peste tot.
Există mici diferențe între barele de navigare de pe fiecare platformă. Pe Android, textul este lăsat aliniat, în timp ce pentru iOS este centrat. Pe iOS, o mulțime de companii înlocuiesc titlul paginii principale cu sigla companiei, dar aceasta nu este cea mai bună practică pe Android. Bara de stare (cu informații despre rețea, baterie și timp) este o componentă nativă și nu este nevoie să luați în considerare proiectul. Doar asigurați-vă atunci când prezentați machete pentru a utiliza cel corect pentru a evita orice confuzie sau distragere atenție.
Poate că cel mai important punct de diferență dintre platformele iOS și Android este navigația. Modelul principal de navigare pe Android este un meniu pentru sertare. Utilizatorii de aplicații Android accesează în mod natural acest lucru pentru elementele de meniu și tinde să fie omniprezent pe parcursul întregii experiențe. Orientările Apple sunt mai favorabile unei bare din tabelă, care se află în partea de jos a ecranului, și permit accesul facil la zonele de vârf ale aplicației. Când decideți arhitectura de nivel superior pentru aplicația dvs., puteți să planificați două meniuri separate pentru cele două platforme.
Gândirea la arhitectura aplicației este cu siguranță mai importantă decât aspectul meniurilor - un punct pe care l-am făcut într-un alt articol despre unele dintre aceste probleme. Dacă structura dvs. este solidă, va urma navigarea.
După cum vedeți aici, există două modele de navigare: un meniu pentru sertar pentru Android și o bară pentru tab-uri pentru iOS. Este uneori mai ușor să ascundeți stratul de navigare în timp ce lucrați la vizualizări individuale.
Cardurile devin modelul principal al UI în designul digital. Acestea sunt versatile și permit utilizatorilor să consume curățenie rapidă a conținutului într-un mod care să se potrivească comportamentelor mobile. Din punct de vedere vizual, cardurile se potrivesc foarte bine cu designul materialului Android (inspirat de hârtie). Folosind umbrele picăturilor și jgheaburile rezonabile între carduri vor crea un aspect nativ și se vor simți în mod natural.
Pe iOS, utilizarea cardurilor necesită mai multă grijă și atenție. Chiar și aplicații mari cum ar fi Facebook și Pinterest utilizează carduri într-un mod care este ușor în afara tonului cu linii directoare iOS. Instrucțiunile iOS sugerează utilizarea profunzimii în folii transparente și suprapuneri, dar vizualizarea de bază este de obicei mai plată. Instagram utilizează un stil de design complet plat, deși fiecare post poate fi considerat un card din punct de vedere arhitectural. Merită să te uiți la modul în care Instagram câștigă aceleași componente într-un stil iOS. Dacă mergeți cu carduri pe iOS fiți foarte blând cu orice folosire de umbre și încercați să le păstrați cât mai subtile.
Cardurile pentru Android și iOS, unele dimensiuni oferă un pic de provocareFamilia fontului sistemului pe iOS este Helvetica Neue. Pe Android este Roboto. Deși stilul tipurilor de fonturi este semnificativ diferit, valorile fonturilor sunt destul de similare. Dacă economisiți timp, veți fi în siguranță suficient pentru a lucra cu unul, dar veți comunica dezvoltatorilor să implementeze fontul potrivit pentru sistem. Când lucrați cu aspecte importante și extreme în dimensiunile de tip, este recomandabil să încercați cel puțin aspectul cu ambele fonturi.
Dacă doriți să mergeți la o distanță suplimentară, va trebui să acordați o atenție mai mare convențiilor tipografice și aspectului de pe fiecare platformă, referindu-vă din nou la liniile directoare de mai sus. Câteva generalizări:
Acesta este un exemplu foarte simplu, pentru a sublinia modul în care, chiar și în simple moduri, tipografia vă poate spune imediat dacă aveți de-a face cu o aplicație Android sau iOS.
iOS (44 px @ 1x) și Android (48dp - 48 px la raportul 1: 1) au orientări ușor diferite pentru atingerea țintelor. Instrucțiunile de proiectare a materialului sugerează, de asemenea, alinierea tuturor elementelor la o rețea de bază de bază de 8dp.
Pe cel mai recent proiect pe care l-am lucrat am considerat mai sigur că urmați aceste linii directoare pentru Android deoarece (a) obiectivul de atingere mai mare de 48px este sigur pentru ambele platforme și (b) aspectul pentru designul materialului este mai definit și mai actualizat. În orice caz, veți avea nevoie de o rețea pentru a lucra cu, dar cu Android fiind mai strict definit am găsit 8dp pentru a funcționa bine. Aceasta înseamnă configurarea documentului cu creșteri de 8dp în ambele planuri orizontale și verticale pentru a crea un aspect de grilă în gresie.
Există mai multe stiluri de butoane definite în Material Design:
Comparativ cu designul de material, aplicațiile iOS sunt de obicei plate în aparență, fără a utiliza profunzimea sau umbrele. Butoanele primare au o culoare de umplere, în timp ce butoanele secundare sunt inversate, utilizând o cursă de aceeași culoare. Această metaforă poate deveni oarecum limitată, mai ales în comparație cu filele și alte elemente care trebuie urmate. Pentru a obține acest stil foarte plat, este important să aveți metafore clare și coerente pentru ce înseamnă culori în aplicația dvs..
iOS are, de asemenea, un buton de text simplu, dar nu împărtășește styling-ul superior al Android și este mai ușor în greutate.
Fișele de acțiuni permit utilizatorilor să aleagă dintr-o multitudine de acțiuni de la un element UI. De exemplu, când atingeți (sau apăsând lung) o imagine pe care aș dori să o partaj, să încărcați, să copiați sau să o ștergeți.
iOS și Android se ocupă de acest lucru în moduri puțin diferite. În primul rând, există foi de acțiune similare care se afișează din partea de jos a ecranului, ca o suprapunere pe vizualizarea curentă.
Cu foile de acțiune, suprapuneri și alerte, iOS și Android folosesc diferite detalii pentru a indica adâncimea în straturi:
Există numai pe Android, acestea reprezintă o metodă rapidă de a face o selecție. Rețineți, totuși, că nu există un echivalent nativ IOS. În exemplul de mai jos, utilizatorul apasă pe "profil" în pasul 1 și este prezentat cu un meniu simplu în acea locație pentru a alege unul dintre profilurile disponibile. Aceste meniuri sunt, de asemenea, utilizate frecvent de la butonul de suprapunere din bara de acțiune, indicată prin trei puncte verticale.
Pentru intrări particulare precum data și ora, Android vine acum cu dialoguri construite. Acestea arata ca pop-up-uri de avertizare, dar cu UI specializat în introducerea acestui tip de date. Un exemplu este prezentat pentru o intrare din calendar. Android are o suprapunere optimizată pentru introducerea unei date. iOS se ocupă cu acest lucru destul de diferit, apărând ca o roată care apare ca o foaie inferioară. Fii atent în planificarea acestora și comunicați cu dezvoltatorii devreme pe componentele de intrare.
Segmentele de control segmente sunt utilizate pentru a comuta între conținut diferit într-o singură vizualizare. Folosirea lor este la fel, dar sunt foarte distinctive vizual pe fiecare platformă, deci este important să folosiți stilul potrivit. Pe iOS există trei tab-uri, în stil asemănător cu butoanele de linie discutate anterior. Pe Android, ele sunt marcate printr-o simplă subliniere și le este oferit un spațiu mult mai alb pentru a indica interacțiunea acestora.
Este important să obțineți stilul acestor drepturi, deoarece acestea ar putea controla acțiuni importante cum ar fi înscrierea, acceptarea unor termeni sau chiar confirmarea plății. Vrem ca ei să se simtă credibili și nativi.
Alertele Android utilizează stilurile butoanelor plate care au fost afișate mai devreme, dimensiunile pentru care pot fi găsite în ghidul de proiectare a materialelor. Acțiunile stau în partea dreaptă jos a alertei. "Butoanele" sunt de fapt în întregime bazate pe text. Ei folosesc toate capacele pentru a le da mai multă structură și poartă culoarea de acțiune primară a aplicației.
În iOS, acțiunile sunt separate prin separatoare. Ele sunt, de obicei, în propoziție sau în titlu, deoarece câștigă structura lor din blocurile separate. Acestea sunt centrate pe teren și din nou vor moșteni culoarea voastră activă.
Designul de iconițe este destul de zona specializată în designul UI. Indiferent dacă utilizați icoane gratuite, comandați un designer de pictograme sau proiectați-vă singur pictogramele, există un stil distinct nativ pentru fiecare platformă. iOS pictograme de linie popularizate, cu lovituri foarte subțiri. Pictogramele sistemului Android au lovituri mai groase sau sunt icoane în întregime solide. În trecut, icoanele Android au folosit o perspectivă sau o întorsătură tridimensională, dar acum liniile directoare specifică icoanele cu două dimensiuni vizionate direct. Iată un exemplu rapid cu mai multe pictograme pentru comparație sau utilizați linkurile directe pentru indicațiile pentru pictograme pentru Android sau iOS
Nebunul 13. Există câteva detalii despre UI care pot aluneca prin fisuri. Obișnuitele, cum ar fi alertele și icoanele de încărcare, sunt adesea lăsate de dezvoltatori. S-ar putea să fi experimentat rotitoare neregulate și alerte ciudate care s-au simțit în afara tonului cu restul aplicației. Există tendințe de a fi soluții native pentru acestea, dar pot fi adaptate stilului aplicației dvs. Acesta este cu siguranță un domeniu în care colaborarea cu dezvoltatorii este cea mai bună modalitate de a decide în ce mod va funcționa a ta.
Butoanele radio, casetele de selectare, câmpurile și comutatoarele sunt componente funcționale care ar trebui să aibă o senzație nativă. Ca și în cazul alertelor și dialogurilor, aceste controale și intrări reprezintă o zonă de încredere și familiaritate pentru utilizator. Utilizați cât mai mult posibil componentele native pentru acestea, astfel încât utilizatorii (a) să știe cum să le folosească și (b) să aibă încredere în aplicația dvs. cu datele sau detaliile de plată delicate.
În exemplul de mai jos vedem echivalente pentru butoane și butoane radio pentru Android și iOS. Din nou, diferențele sunt suficient de mici pentru a progresa cu un design, și pentru celălalt, dar diferențele subtile sunt esențiale pentru aspectul nativ. Utilizați kitul UI cât mai mult posibil pentru aceste componente și comunicați din nou cu dezvoltatorii de la începutul procesului.
Android (stânga) și iOS (dreapta)Nu este o sarcină imposibilă de a crea un simt nativ pentru aplicația dvs., atât pe iOS cât și pe Android, cu un design. Încercați să păstrați deasupra acestor modificări de la început, păstrați atenția asupra componentelor care se simt în afara sincronizării pe o singură platformă și să lucrați cât mai aproape de dvs. cu dezvoltatorii.
Acest articol vă va oferi, cu siguranță, răspunsuri rapide cu privire la situația în care să difere proiectarea pentru două aplicații, dar veți avea nevoie, de asemenea, de anumite instrumente și șabloane pentru a executa corect proiectul. Există o mulțime de resurse disponibile în mod obișnuit pe care le puteți utiliza ca punct de plecare, aici sunt unele dintre cele mai bune:
Dacă doriți să știți mai multe, o mulțime de informații pe care le-am furnizat pot fi găsite în ghidul platformei. Sunt destul de extinse, așa că tocmai am scos părțile importante pentru a le compara. Dar dacă aveți întrebări mai specifice, acesta este cel mai bun loc pentru a începe:
Aceste kituri de UI vă vor ajuta să recreați comenzile native de bază și dimensiunile potrivite. Puteți scoate piesele de care aveți nevoie și apoi comutați între ele pentru ieșirea Android și iPhone a desenelor.
Chiar dacă îți faci propriile icoane sau icoane de punere în funcțiune, este util să ai ca loc de substituție în timp ce lucrezi. Design-ul de icoane poate fi un loc de muncă în sine și nu doriți ca icoanele să vă încetinească în timp ce obțineți o imagine generală pentru aplicația dvs. Recent am gasit link-urile de mai jos pe icoane8 arata destul de bine, sau flaticon.com este grozav pentru mai multe icoane generale.
Este întotdeauna util să aveți machete pentru prezentarea aplicației. Acestea vin în mai multe categorii. S-ar putea să doriți o machetă de bază a dispozitivului pentru context, un dispozitiv plat simplificat pentru a lăsa aplicația să strălucească sau o machetă a stilului de viață pentru a prezenta un caz de utilizare. Iată câteva resurse pe care le-am găsit utile, sunt multe altele acolo. Când vine vorba de dispozitive Android, fiți atenți pe care îi alegeți. M-aș sprijini spre gama Nexus, deoarece acestea sunt propriile telefoane Google și nu vor sugera preferința față de alți producători.
Accentsconagua