Share
Det finns mycket "process" som går in i design för mobila enheter, men ibland vill du bara hoppa in och få dina händer smutsiga! Det här inlägget är utformat för att ge dig de verktyg du behöver och grundläggande design och tekniska krav för att få dig igång snabbt.
Om du inte har läst riktlinjerna för Apple-gränssnittet för iPhone och iPad än, borde du. Det är mycket information, men väl värt att spendera för att förstå hur Apple tycker om applikationsdesign. Dessa guider spelar också ut detaljerade specifikationer för skärmstorlek, ikonstorlek och upplösning. Därefter kommer jag att ta upp några vanliga frågor och sammanfatta dessa specifikationer i ett lättsmält format!
IPhone näthinnans skärm är en fantastisk sak att se. När du tittar på den nya och gamla skärmen bredvid varandra är det uppenbart att det finns ändringar i den här skärmen som påverkar din apps design. Se den här jämförelsevideoen för sida vid sida.
Du kan se när du jämför de två enheterna som skärmdimensionerna för iPhone 4 är oförändrade från föregående modell. Men både iPhone 4-skärmstorleken och pixeldensiteten på skärmen är DOUBLED, vilket ger en 640 x 960px skärmstorlek (jämfört med föregående 320 x 480px-storlek) och en hel del 326 pixlar per tum (jämfört med tidigare 163ppi). Den här nya skärmen klämmer 4 pixlar där det brukade vara en - det är därför bilderna ser så skarpa och läckra ut!
När du läser om skärmupplösning är det enkelt att snabbt bli förvirrad. Faktum är att den slutliga exporterade filtypen på iPhone är vanligtvis .png och Xcode anser inte att ppi-värdet sparas när bilder görs. Om du följer de dimensioner som anges nedan kommer du att vara i god form!
| iPhone 3.0 Skärmupplösning: 72 ppi Skärmstorlek: 320 x 480 px Ikonstorlek: 57 x 57 px Filformat: PNG-24 | iPhone 4.0 Skärmupplösning: 72 ppi Canvasstorlek: 640 x 960 px Ikonstorlek: 114 x 114 px Filformat: PNG-24 | iPad Skärmupplösning: 72 ppi Canvasstorlek: 768 x 1024 px Ikonstorlek: 72 x 72 px Filformat: PNG-24 |
Ikon: 512 x 512 px (.tif, .jpg eller .png, 72dpi, RGB)
iPhone Skärmdumpar: 320 x 480 px eller 640 x 860 px (.tif, .jpg eller .png, 72dpi, RGB)
iPad Skärmdumpar: 1024 x 768 px (.tif, .jpg eller .png, 72dpi, RGB)
Medan vi diskuterar skärmstorlekar är det viktigt att tala om framtiden för digitala enheter i allmänhet. Jag är ingen förtrollare, men under det gångna året är det inga hemliga pekskärmsenheter av alla slag som multiplicerar som kaniner och de producerar avkommor med olika skärmstorlekar. Aye! Som designers betyder det att vi måste vara förberedda för hur man översätter mönster till flera enheter och operativsystem.
En app livscykel kan köra en av många kurser. Vissa appar lever exklusivt på en plattform, andra delar ut i andra mobila enheter eller till och med en webbaserad närvaro. Att skapa skalbar grafik sparar dig huvudvärk för att skapa grafik för varje specifik plattform. Att använda formlager eller vektor smarta objekt är det bästa sättet att hantera spridningen av skärmstorlekar och operativsystem.
Design av ikoner för iPhone var min första introduktion till beslutet "starta små och skala upp" eller "starta stora och skala ner". För mig blev det uppenbart efter några avrättningar som designade för 320 x 480px skärmstorlek och sedan limning upp till 640 x 960px är det bättre alternativet. Att designa för den minsta skärmstorleken eliminerar besvikelsen att förlora detaljer när en design måste formas senare.
Låt oss säga att du har skapat en app för en iPhone 3.0 och du vill förbereda den här appen för iPhone 4-retina-displayen. Vad gör du? Bara storlek upp från 320 x 480 till 640 x 960? Ja. Problemet är att om du inte har skapat all din grafik med formlag eller vektor smarta objekt så kommer bilderna att se pixelerade och korniga.
För både iPhone och iPad minsta storlek knackar målområdet Apple rekommenderar att 44 x 44 pixlar är. Lämna det till Apple för att kvantifiera den genomsnittliga fingertoppsstorleken hos människor. :) Om du vill gå mindre, se till att du har tillräckligt med utrymme för att förhindra misstag.
Att testa en design kanske låter udda, men det kan vara svårt att designa för en mobil enhet på en bärbar dator eller på en stationär bildskärm. Även om du följer vanliga riktlinjer som 44 x 44px-kretsmålregeln, kan proportioner och storlekar se betydligt annorlunda ut när de visas på enheten vs din datorskärm.
Det enklaste sättet att testa din design är att "Spara för webben" varje skärmdesign i .png-format och synkronisera med telefonen via iPhoto. När bilderna synkroniseras kan du bläddra igenom och simulera vad den verkliga appen kommer att se ut. Det här är också ett bra sätt att dela mockups med klienter för att ge dem en riktig förhandsgranskning av appen.
Nu när du har några grunder under ditt bälte är det dags att börja utforma! Lyckligtvis finns det gott om resurser som hjälper dig att bekanta dig med de olika iPhone- och iPad-gränssnittselementen. Även om ditt mål är att skapa helt anpassade gränssnitt, är dessa mallar till hjälp för att få ett grunnlinje eller dimensioner på skärmelementen korrekt proportionerade.
iPhone GUI PSD från Teehan + Lax
iPhone GUI PSD Retina från Teehan + Lax
iPhone Stencil för OmniGraffle från Patrick Crowley
iPhone UI Vector Element från Mercury Intermedia
iPad Stencil för OmniGraffle från Information Architects
iPad GUI PSD från Teehan + Lax
iPad Vector GUI från Icon Library
Alla grafiska tillgångar som ska användas för att bygga en app exporteras i Portable Network Graphics (.png) format. Tekniskt kan iPhone också visa andra filformat, men PNG-filer optimeras automatiskt av iOS SDK och bör därför vara det föredragna formatet.
Detta gäller alla element (nav knappar, staplar, etc.) och andra bilder som visas i appen. Till exempel, låt oss säga att din app är en portfölj för en fotograf. De visade bilderna exporteras också i .png-format.
Inställningen att exportera .png-format i Photoshop (Arkiv> Spara för webb och enheter) ser så här ut:
Innan du skickar dina filer till en utvecklare är det viktigt att förstå deras förmåga när det gäller skivning och dicing av din fil. Om din utvecklare har erfarenhet av att skära och exportera kan det vara en stor tidsbesparare att avlasta uppgiften. Personligen föredrar jag att klippa upp alla mina filer så att alla bilder skivas ut ordentligt.
När du sparar dina slutliga bilder, försök använda intuitiva filnamnkonventioner som gör det lättare för din utvecklare att lokalisera och referera till de korrekta bildfilerna. Här är några exempel prefix och suffixer jag använder:
Ett annat verktyg som jag använder för att kommunicera med utvecklare är en .pdf-fil som innehåller alla skärmar plus anteckningar om designen. Jag definierar typsnitt, storlekar, linjeavstånd och all annan styling så det finns en enkel referens som utvecklaren kan använda utan att behöva öppna Photoshop. En annan resurs som jag tillhandahåller, särskilt när jag arbetar med utvecklare på platsen, är en skärmdump (ScreenFlow och iShowU är mina favoriter) av appen, och går igenom alla aspekter av designen. Det här är särskilt användbart om appen innehåller animeringar och / eller övergångar som illustreras bättre i en video.
Tekniska specifikationer är inte sexiga men de är viktiga. Begå dessa uppgifter till minne och du kommer att spara dig mycket huvudvärk på vägen!
Accentsconagua