Progettare per l'iPhone: Risorse

37 Segnali disse una volta sulla progettazione per l'iPhone:

Progettare per l'iPhone è come un ibrido tra stampa e web design.

Il web tutti sappiamo è pieno di incertezze. Non sappiamo dimensioni dello spettatore o la risoluzione dello schermo, non sappiamo la gamma dello schermo di qualcuno, non sappiamo se ho un certo carattere tipografico e / o che rende esattamente come affrontare nel loro browser, abbiamo Non so il browser che stanno andando ad utilizzare, ecc

Ma la carta, d'altra parte, è pieno di controlli. Dimensione fissa, i volti fissi, i colori fisso. Ciò che si stampa è esattamente ciò che qualcuno vede (supponendo che hai fatto i compiti a colori e carta, ecc.)

Quindi l'iPhone è uno strano mix. E 'il web, e le cose possono scorrere, e il dato è tirato da server remoti, ma è anche una larghezza fissa, un browser fissi, caratteri fissi, ecc It's pretty cool e un esercizio davvero rinfrescante design.

E 'molto vero. Come arrivare al design per l'iPhone è solo divertimento. Senza preoccuparsi di cross-test del browser, senza preoccuparsi di dover far fronte alle tecnologie obsolete. Ciò che si progetta è ciò che ottieni!

Ecco alcune risorse per farvi andare con il vostro progetto di design iPhone.

Photoshop file

Free iPhone PSD file per le icone / snapshots / whatever

iPhone GUI PSD

iPhone Interface PSD File

Icona di stile iPhone. psd Kit

Ufficiali Apple Risorse

iPhone Dev Center
Video: Introduzione a SDK iPhone (è necessaria la registrazione)
Grafica e animazione Coding How-To's

Tutorials

Impara a sviluppare per l'iPhone

Progettare per l'iPhone (quando non siete titolari di uno)

Creare un iPhone Slick / Mobile Interface da qualsiasi feed RSS

Progettare per iPhone (elenco di diversi siti web con interfacce iPhone)

Ask ET: iPhone interface design (video incluso)

ECommerce pratiche: Website Design per l'iPhone

iPhone Icons

Progettare per l'iPhone (parte 1) (favicon)

Come creare un'icona personalizzata Apple iPhone per il tuo sito web

Come creare un iPhone Webclip Icon usando Photoshop

Evoluzione del Delivery Status Icon (very cool animazione del suo progresso)

Frammenti di codice utili

Individuare l'iPhone con JavaScript:

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

Impostare le dimensioni iPhone finestra:

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

Metti che nelle pagine web sezione testa. Se si desidera forzare una larghezza statico, dispositivo di cambio "width" per una dimensione specifica. L'iPhone di dimensioni dello schermo sono 320 x 480px.

Scorrere verso il basso per nascondere la barra dei menu il caricamento della pagina:

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

Per ulteriori notizie iPhone e recensioni su applicazioni più recenti iPhone, check out AppCraver.