Progettare per l'iPhone: risorse

Tweet

37 I 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 è piena di incertezza. Non sappiamo le dimensioni dello schermo dello spettatore o la risoluzione, non sappiamo la gamma dello schermo di qualcuno, non sappiamo se hanno un carattere determinato e / o esattamente come quel volto rende nel loro browser, abbiamo non conoscono il browser che andremo ad utilizzare, ecc

Ma carta, invece, è completa di comandi. Dimensione fissa, i volti fissi, colori fissi. Quello che la stampa è esattamente ciò che qualcuno vede (supponendo che avete fatto il vostro lavoro sul colore e carta, ecc).

Così l'iPhone è un mix strano. E 'il web, e le cose possono scorrere, ed i dati sono estratti da server remoti, ma è anche una larghezza fissa, un browser fissa, caratteri fissi, ecc E' piuttosto fresco e un esercizio di design davvero rinfrescante.

E 'molto vero. Come progettare per l'iPhone è solo divertimento. Nessuna preoccupazione circa cross-browser testing, non si preoccupa di dover soddisfare alle tecnologie obsolete. Quello che il design è ciò che ottieni!

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

File Photoshop

Gratuito di file PSD per le icone iPhone / snapshots / whatever

iPhone GUI PSD

iPhone Interface File PSD

Icona di stile iPhone. psd Kit

Risorse ufficiale di Apple

iPhone Dev Center
Video: Introduzione al iPhone SDK (registrazione gratuita richiesta)
Grafica e Animazione codifica How-To di

Tutorial

Ulteriori informazioni su come sviluppare per iPhone

Progettare per l'iPhone (quando non si sta tenendo uno)

Creare un iPhone Slick / interfaccia mobile da qualsiasi Feed RSS

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

Chiedi ET: design di interfaccia iPhone (video incluso)

ECommerce pratiche: Website Design per l'iPhone

Icone iPhone

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

Come creare un'icona personalizzata iPhone di Apple per il sito Web

Come creare un icona WebClip iPhone con Photoshop

L'evoluzione dell'icona di stato di consegna (animazione molto fresco del suo progresso)

Frammenti di codice utili

Rilevare l'iPhone con JavaScript:

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

Impostare il formato iPhone viewport:

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

Metti che nella tua testa sezione pagine web. Se si vuole forzare una larghezza statica, cambiare "device-width" a una dimensione specifica. Dimensioni dello schermo di iPhone 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 notizie più iPhone e recensioni sui più recenti applicazioni per iPhone , check out AppCraver .