Share
Există o mulțime de "proces" care merge în proiectarea pentru dispozitivele mobile, dar uneori vrei doar să sari și să-ți faci mâinile murdare! Această postare este concepută pentru a vă oferi instrumentele de care aveți nevoie, precum și cerințele de bază de proiectare și tehnice pentru a vă pune în mișcare rapid.
Dacă nu ați citit încă recomandările Apple Interface pentru iPhone și iPad, ar trebui. Este o mulțime de informații, dar merită timpul petrecut pentru a înțelege cum gândește Apple despre designul aplicației. Aceste ghidaje detaliază și specificațiile detaliate pentru dimensiunea ecranului, dimensiunea pictogramei și rezoluția. Apoi, voi aborda câteva întrebări frecvente și vom rezuma aceste specificații într-un format ușor de digerat!
Ecranul retinei iPhone este un lucru spectaculos de văzut. Când vizualizați ecranul nou și vechi unul lângă celălalt, este evident că există modificări în acest afișaj care afectează designul aplicației dvs. Vedeți acest videoclip comparativ al ecranului.
Puteți vedea în compararea celor două dispozitive că dimensiunile ecranului pentru iPhone 4 sunt neschimbate față de modelul anterior. Cu toate acestea, atât dimensiunea ecranului iPhone 4, cât și densitatea pixelilor pe ecran sunt DOUBLED, oferind o dimensiune a ecranului de 640 x 960 pixeli (comparativ cu dimensiunea anterioară de 320 x 480 pixeli) și un 326 pixeli per inch (comparativ cu 163ppi). Acest nou ecran stoarce 4 pixeli acolo unde era unul - de aceea imaginile arata atat de clare si delicioase!
Când citiți despre rezoluția ecranului, este ușor să deveniți rapid confuz. Faptul este că tipul de fișier exportat definitiv pe iPhone este, de obicei, .png și Xcode nu ia în considerare valoarea ppi salvată la randarea imaginilor. Dacă urmați dimensiunile specificate mai jos, veți avea o formă bună!
| iPhone 3.0 Rezolutia ecranului: 72 ppi Marimea ecranului: 320 x 480 px Dimensiune pictograma: 57 x 57 px Tipul fisierului: PNG-24 | iPhone 4.0 Rezolutia ecranului: 72 ppi Dimensiunea pânzei: 640 x 960 px Dimensiune pictograma: 114 x 114 px Tipul fisierului: PNG-24 | iPad Rezolutia ecranului: 72 ppi Dimensiunea pânzei: 768 x 1024 px Dimensiune pictograma: 72 x 72 px Tipul fisierului: PNG-24 |
Pictogramă: 512 x 512 px (.tif, .jpg sau .png, 72dpi, RGB)
iPhone Imagini: 320 x 480 px sau 640 x 860 px (.tif, .jpg sau .png, 72dpi, RGB)
Imagini iPad: 1024 x 768 px (.tif, .jpg sau .png, 72dpi, RGB)
În timp ce discutăm despre dimensiunile ecranului, este important să vorbim despre viitorul dispozitivelor digitale în general. Eu nu sunt un om de avere, dar în ultimul an singur, nu există dispozitive secrete de tip tactil de tot felul care se înmulțesc ca iepurii și produc puși cu diferite dimensiuni ale ecranului. Da! Ca designeri, înseamnă că trebuie să fim pregătiți pentru modul în care traducem desenele și modelele pe mai multe dispozitive și sisteme de operare.
Un ciclu de viață al aplicației poate rula unul din multe cursuri. Unele aplicații trăiesc exclusiv pe o singură platformă, altele se extind pe alte dispozitive mobile sau chiar pe o prezență web. Crearea de grafică scalabilă vă economisește durerea de cap pentru redarea graficelor pentru fiecare platformă specifică. Utilizarea straturilor de formă sau a obiectelor inteligente vectoriale reprezintă cea mai bună metodă de a face față proliferării dimensiunilor ecranului și a sistemelor de operare.
Proiectarea icoanelor pentru iPhone a fost prima mea introducere în decizia de a "începe mici și de a scala în sus" sau "a începe mari și scară în jos." Pentru mine, a devenit evident, după câteva execuții care proiectarea pentru dimensiunea ecranului de 320 x 480px, până la 640 x 960px este cea mai bună opțiune. Proiectarea pentru cea mai mică dimensiune a ecranului elimină dezamăgirea pierderii detaliilor atunci când un design trebuie dimensionat mai târziu.
Să presupunem că ați proiectat o aplicație pentru un iPhone 3.0 și doriți să pregătiți această aplicație pentru ecranul retinei iPhone 4. Ce faci? Doar măriți-o de la 320 x 480 la 640 x 960? Da. Problema este că, dacă nu ați creat toate graficele utilizând straturi de formă sau obiecte inteligente vectoriale, imaginile vor arăta pixelate și granulate.
Pentru ambele dispozitive iPhone și iPad, dimensiunea minimă atingeți zona vizată recomandată de Apple este de 44 x 44 pixeli. Lăsați-o pe Apple să cuantifice dimensiunea medie a degetului ființelor umane. :) Dacă doriți să mergeți mai mic, asigurați-vă că aveți suficient spațiu pentru a preveni apăsarea necorespunzătoare.
Testarea unui design poate părea ciudat, dar proiectarea pentru un dispozitiv mobil pe un laptop sau pe un monitor desktop poate fi dificilă. Chiar dacă respectați regulamentele standard, cum ar fi regula țintă atingeți 44 x 44px, proporțiile și dimensiunile pot să pară semnificativ diferite atunci când sunt afișate pe dispozitiv în raport cu ecranul computerului dvs..
Cea mai ușoară modalitate de testare a designului dvs. este să salvați pentru Web fiecare proiectare a ecranului în format .png și sincronizați-l cu telefonul utilizând iPhoto. După ce s-au sincronizat imaginile, puteți să le răsturnați și să simulați cum va arăta aplicația reală. Aceasta este, de asemenea, o modalitate excelentă de a partaja machete cu clienții pentru a le oferi o previzualizare reală a aplicației.
Acum că aveți niște lucruri de bază sub centură, este timpul să începeți să proiectați! Din fericire, există o mulțime de resurse disponibile pentru a vă ajuta să vă familiarizați cu diferitele elemente de interfață iPhone și iPad. Chiar dacă obiectivul dvs. este de a crea interfețe complet personalizate, aceste șabloane sunt utile în obținerea unei grile de bază sau a dimensiunilor elementelor afișate pe ecran în mod corespunzător proporționate.
iPhone GUI PSD de la Teehan + Lax
iPhone GUI PSD Retina de la Teehan + Lax
iPhone Stencil pentru OmniGraffle de la Patrick Crowley
Elemente vectoriale iPhone UI de la Mercur Intermedia
Stencil iPad pentru OmniGraffle de la arhitecții de informații
iPad GUI PSD de la Teehan + Lax
iPad Vector GUI de la Icon Library
Toate materialele grafice care vor fi folosite pentru a construi o aplicație sunt exportate în format Portable Network Graphics (.png). Din punct de vedere tehnic, iPhone poate afișa și alte formate de fișiere, dar fișierele PNG sunt optimizate automat de SDK-ul iOS și, prin urmare, ar trebui să fie formatul preferat.
Acest lucru se aplică tuturor elementelor (butoane nav, bare etc.) și oricăror alte imagini afișate în aplicație. De exemplu, să presupunem că aplicația dvs. este un portofoliu pentru un fotograf. Imaginile expuse vor fi de asemenea exportate în format .png.
Setarea pentru a exporta formatul .png în Photoshop (File> Save for Web and Devices) arată astfel:
Înainte de a transmite fișierele dvs. unui dezvoltator, este important să înțelegeți capacitățile acestora în ceea ce privește tăierea și tăierea fișierului. Dacă dezvoltatorul dvs. are experiență în felierea și exportul, poate fi un economizor de timp imens pentru a descărca această sarcină. Personal, prefer să taie toate fișierele mele pentru a vă asigura că toate imaginile sunt tăiate corect.
Când salvați imaginile finale, încercați să utilizați convenții intuitive de denumire a fișierelor care vor facilita localizarea și referirea fișierelor imagine la dezvoltatorul dvs. Iată câteva prefixe și sufixe de exemplu pe care le folosesc:
Un alt instrument pe care îl folosesc pentru a comunica cu dezvoltatorii este un fișier .pdf care include toate ecrane plus note cu privire la design. Eu definesc fonturile, dimensiunile, spatiile liniare si toate celelalte stiluri astfel incat exista o referinta usoara pe care dezvoltatorul o poate folosi fara a mai trebui sa deschida Photoshop. Totuși, o altă resursă pe care o ofer, mai ales când lucrez cu dezvoltatori off-site, este un screencast (ScreenFlow și iShowU sunt favoritele mele) ale aplicației, mergând prin fiecare aspect al designului. Acest lucru este util în special dacă aplicația conține animații și / sau tranziții mai bine ilustrate într-un videoclip.
Specificațiile tehnice nu sunt sexy, dar sunt importante. Acorde aceste detalii în memorie și vă veți salva o mulțime de dureri de cap pe drum!
Accentsconagua