Ontwerpen voor de iPhone: Resources

37 Signalen zei ooit over ontwerpen voor de iPhone:

Ontwerpen voor de iPhone is als een hybride van print en web design.

Het web we allemaal weten is vol van onzekerheid. We weten niet het scherm van de kijker formaat of de resolutie hebben we niet de gamma van het scherm van iemand weet, weten we niet als ze een bepaald lettertype en / of precies hoe dat gezicht maakt in hun browser, heb we weet niet de browser ze gaan gebruiken, enz.

Maar papier, aan de andere kant, is vol van de controles. Vaste grootte, vaste gezichten, vaste kleuren. Wat je print is precies wat iemand ziet (ervan uitgaande dat je hebt je huiswerk op kleur en papier, etc gedaan).

Dus de iPhone is een vreemde mix. Het is het web, en dingen kunnen scrollen, en de gegevens wordt getrokken uit externe servers, maar het is ook een vaste breedte, een vaste browser, vaste lettertypen, etc. It's pretty cool en echt een verfrissend ontwerp te oefenen.

Het is heel waar. Aan te ontwerpen voor de iPhone is gewoon FUN. Geen zorgen over cross-browser testen, geen zorgen over het hebben om tegemoet te komen aan de verouderde technologieën. Wat je ontwerp is wat je krijgt!

Hier zijn een aantal middelen te krijgen ga je met je iPhone ontwerp project.

Photoshop-bestanden

Gratis iPhone PSD-bestand voor pictogrammen / snapshots / whatever

iPhone GUI PSD

iPhone-interface PSD-bestand

iPhone Style Icon. psd Kit

Officiële Apple Resources

iPhone Dev Center
Video: Inleiding tot de iPhone SDK (gratis registratie verplicht)
Graphics & Animation codering How-To's

Tutorials

Leer hoe te ontwikkelen voor de iPhone

Ontwerpen voor de iPhone (wanneer u niet bent een bedrijf)

Maak een Slick iPhone / mobiele interface van een RSS-feed

Ontwerpen voor de iPhone (lijst van verschillende websites met iPhone-interfaces)

Vraag ET: iPhone interface design (video inbegrepen)

Praktische eCommerce: Ontwerp van de website voor de iPhone

iPhone Icons

Ontwerpen voor de iPhone (deel 1) (favicon)

Hoe maak je een aangepaste Apple iPhone pictogram voor uw website

Hoe maak je een iPhone Webclip Icon met Photoshop

Evolutie van de Delivery Status Icon (zeer coole animatie van de vooruitgang)

Nuttige code snippets

Detecteren van de iPhone met JavaScript:

<script type="text/javascript"> if (navigator.userAgent.indexOf('iPhone') != -1) { { // Do something iPhone Specific! } </script> 

Stel de iPhone viewport grootte:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

Zet dat in uw webpagina's hoofd sectie. Als u een statische kracht breedte, verandering "device-width" een specifieke grootte. Het scherm van de iPhone afmetingen zijn 320 x 480px.

Scroll naar beneden te verbergen in de menubalk op de pagina te laden:

 <script type="application/x-javascript"> addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false); function hideAddressBar() { window.scrollTo(0, 1); } </script> 

Voor meer iPhone-nieuws en recensies over de nieuwste iPhone apps, check out AppCraver.