Share
Er is veel "proces" dat gaat over het ontwerpen van mobiele apparaten, maar soms wil je er gewoon in springen en je handen vies maken! Dit bericht is ontworpen om u de tools te geven die u nodig hebt en de basisontwerp- en technische vereisten om snel aan de slag te gaan.
Als je de Apple Interface-richtlijnen voor iPhone en iPad nog niet hebt gelezen, zou je dat moeten doen. Het is een hoop informatie, maar zeker de moeite waard om te begrijpen hoe Apple denkt over applicatieontwerp. In deze handleidingen worden ook gedetailleerde specificaties beschreven voor schermgrootte, pictogramgrootte en resolutie. Vervolgens zal ik enkele veelgestelde vragen behandelen en deze specificaties samenvatten in een gemakkelijk te verwerken vorm!
Het retina-scherm van de iPhone is spectaculair om te zien. Wanneer u het nieuwe en het oude scherm naast elkaar bekijkt, is het duidelijk dat er veranderingen zijn in dit scherm die van invloed zijn op het ontwerp van uw app. Bekijk deze videobeelden naast elkaar.
U kunt bij het vergelijken van de twee apparaten zien dat de schermafmetingen voor iPhone 4 onveranderd zijn ten opzichte van het vorige model. Zowel de schermgrootte van de iPhone 4 als de pixeldichtheid van het scherm is VERDUBBELD, waardoor het een schermformaat van 640 x 960 px heeft (vergeleken met de vorige 320 x 480 px-grootte) en maar liefst 326 pixels per inch (vergeleken met de vorige 163ppi). Dit nieuwe scherm knijpt 4 pixels waar er één was - daarom zien de beelden er zo helder en heerlijk uit!
Bij het lezen over de schermresolutie is het gemakkelijk om snel in de war raken. Het feit is dat het laatste geëxporteerde bestandstype op de iPhone meestal .png is en Xcode houdt geen rekening met de ppi-waarde die wordt opgeslagen bij het renderen van afbeeldingen. Als u de hieronder aangegeven afmetingen volgt, bent u in goede vorm!
| iPhone 3.0 Schermresolutie: 72 ppi Scherm grootte: 320 x 480 px Pictogram grootte: 57 x 57 px Bestandsformaat: PNG-24 | iPhone 4.0 Schermresolutie: 72 ppi Canvas grootte: 640 x 960 px Pictogram grootte: 114 x 114 px Bestandsformaat: PNG-24 | iPad Schermresolutie: 72 ppi Canvas grootte: 768 x 1024 px Pictogram grootte: 72 x 72 px Bestandsformaat: PNG-24 |
Icoon: 512 x 512 px (.tif, .jpg of .png, 72dpi, RGB)
Schermafbeeldingen van de iPhone: 320 x 480 px of 640 x 860 px (.tif, .jpg of .png, 72dpi, RGB)
Schermafbeeldingen van iPad: 1024 x 768 px (.tif, .jpg of .png, 72 dpi, RGB)
Terwijl we de schermformaten bespreken, is het belangrijk om te praten over de toekomst van digitale apparaten in het algemeen. Ik ben geen waarzegster, maar het afgelopen jaar alleen al zijn er geen geheime touchscreen-apparaten van allerlei soort die zich vermenigvuldigen als konijnen en ze produceren nakomelingen met verschillende schermformaten. Aye! Als ontwerpers betekent dit dat we voorbereid moeten zijn op het vertalen van ontwerpen naar meerdere apparaten en besturingssystemen.
De levenscyclus van een app kan een van de vele cursussen uitvoeren. Sommige apps leven uitsluitend op één platform, andere vertakken zich naar andere mobiele apparaten of zelfs naar een webgebaseerde aanwezigheid. Het maken van schaalbare grafische afbeeldingen bespaart u de hoofdpijn van het opnieuw maken van afbeeldingen voor elk specifiek platform. Het gebruik van vormlagen of vector slimme objecten is de beste manier om met de verspreiding van schermformaten en besturingssystemen om te gaan.
Het ontwerpen van pictogrammen voor de iPhone was mijn eerste kennismaking met het besluit 'klein beginnen en opschalen' of 'groot beginnen en verkleinen'. Voor mij werd het duidelijk na een paar uitvoeringen die ontwerpen voor de schermgrootte van 320 x 480 px en vervolgens van grootte veranderen tot 640 x 960 px is de betere optie. Ontwerpen voor de kleinste schermafmetingen elimineert de teleurstelling van het verliezen van details wanneer een ontwerp later moet worden verkleind.
Laten we zeggen dat je een app hebt ontworpen voor een 3.0 iPhone en dat je deze app wilt voorbereiden op het retina-display van de iPhone 4. Wat doe jij? Gewoon het formaat van 320 x 480 tot 640 x 960? Ja. Het probleem is dat als u niet al uw afbeeldingen hebt gemaakt met vormlagen of slimme vectorobjecten, uw afbeeldingen korrelig en korrelig zullen lijken.
Voor zowel de iPhone als de iPad is het minimale doelgebied van de tik dat Apple aanbeveelt 44 x 44 pixels. Laat het aan Apple over om de gemiddelde vingertopgrootte van mensen te kwantificeren. :) Als u kleiner wilt worden, zorg er dan voor dat u voldoende tappunten kunt plaatsen om mis-taps te voorkomen.
"Testen" van een ontwerp klinkt misschien vreemd, maar ontwerpen voor een mobiel apparaat op een laptop of desktopmonitor kan lastig zijn. Zelfs als u standaardrichtlijnen zoals de 44 x 44px tikdoelregel volgt, kunnen verhoudingen en grootten er aanzienlijk anders uitzien op het apparaat dan op uw computerscherm.
De eenvoudigste manier om uw ontwerp te testen, is door "Save for Web" elk schermontwerp in .png-indeling te maken en met iPhoto te synchroniseren met uw telefoon. Nadat de afbeeldingen zijn gesynchroniseerd, kunt u bladeren en simuleren hoe de daadwerkelijke app eruit zal zien. Dit is ook een geweldige manier om mockups met klanten te delen om hen een echt voorproefje van de app te geven.
Nu je wat basisvaardigheden onder de riem hebt, is het tijd om te beginnen met ontwerpen! Gelukkig zijn er tal van bronnen beschikbaar om u te helpen kennismaken met de verschillende interface-elementen van de iPhone en de iPad. Zelfs als het uw doel is om volledig aangepaste interfaces te maken, zijn deze sjablonen nuttig bij het verkrijgen van een basislijnraster of dimensies van elementen op het scherm die op de juiste manier zijn geproportioneerd.
iPhone GUI PSD van Teehan + Lax
iPhone GUI PSD Retina van Teehan + Lax
iPhone stencil voor OmniGraffle van Patrick Crowley
iPhone UI Vectorelementen van Mercury Intermedia
iPad Stencil voor OmniGraffle van Information Architects
iPad GUI PSD van Teehan + Lax
iPad Vector GUI van Icon Library
Alle grafische elementen die worden gebruikt om een app te bouwen, worden geëxporteerd in Portable Network Graphics (.png) -indeling. Technisch gezien kan de iPhone ook andere bestandsindelingen weergeven, maar PNG-bestanden worden automatisch geoptimaliseerd door de iOS SDK en moeten daarom de gewenste indeling hebben.
Dit geldt voor alle elementen (nav-knoppen, balken, enz.) En alle andere afbeeldingen die in de app worden getoond. Laten we bijvoorbeeld stellen dat uw app een portfolio is voor een fotograaf. De tentoongestelde foto's worden ook geëxporteerd in .png-indeling.
De instelling voor het exporteren van .png-indeling in Photoshop (Bestand> Opslaan voor web en apparaten) ziet er als volgt uit:
Voordat u uw bestanden overhandigt aan een ontwikkelaar, is het belangrijk om te weten wat hun mogelijkheden zijn met betrekking tot het in plakken snijden en in stukken snijden van uw bestand. Als uw ontwikkelaar ervaring heeft met slicen en exporteren, kan het een enorme tijdbesparing zijn om die taak te ontladen. Persoonlijk verkort ik al mijn bestanden om ervoor te zorgen dat alle afbeeldingen correct worden uitgesneden.
Gebruik bij het opslaan van uw uiteindelijke afbeeldingen intuïtieve naamgevingsconventies voor bestanden waarmee u de juiste afbeeldingsbestanden eenvoudiger kunt vinden en ernaar kunt verwijzen voor uw ontwikkelaar. Hier zijn enkele voorbeelden van voorvoegsels en achtervoegsels die ik gebruik:
Een ander hulpmiddel dat ik gebruik om met ontwikkelaars te communiceren, is een .pdf-bestand dat alle schermen plus opmerkingen over het ontwerp bevat. Ik definieer de lettertypen, de grootte, de regelafstand en alle andere opmaak zodat er een eenvoudige verwijzing is die de ontwikkelaar kan gebruiken zonder Photoshop te hoeven openen. Nog een andere bron die ik aanlever, vooral wanneer ik met ontwikkelaars buiten de site werk, is een screencast (ScreenFlow en iShowU zijn mijn favorieten) van de app, waarbij ze alle aspecten van het ontwerp doornemen. Dit is vooral handig als de app animaties en / of overgangen bevat die beter worden geïllustreerd in een video.
Technische specificaties zijn niet sexy, maar ze zijn belangrijk. Zet deze details vast in het geheugen en u bespaart uzelf een hoop hoofdbrekens op de weg!
Accentsconagua