Concevoir pour l'iPhone: Ressources

37 Signals a dit une fois sur la conception de l'iPhone:

Concevoir pour l'iPhone est comme un hybride de l'impression et le web design.

Le web, nous savons tous, est en proie à l'incertitude. Nous ne savons pas la taille d'écran du spectateur ou de résolution, nous ne savons pas le gamma de l'écran de quelqu'un, nous ne savons pas si elles ont obtenu un caractère certain et / ou exactement comment ce visage rend dans leur navigateur, nous ne sais pas le navigateur qu'ils vont utiliser, etc

Mais le papier, d'autre part, est plein de commandes. Taille fixe, visages fixes, des couleurs fixes. Qu'est-ce que vous imprimez est exactement ce que quelqu'un voit (en supposant que vous avez fait vos devoirs sur la couleur et du papier, etc.)

Alors que l'iPhone est un mélange bizarre. C'est sur le web, et les choses peuvent défiler, et les données sont extraites de serveurs distants, mais c'est aussi une largeur fixe, d'un navigateur fixe, polices de caractères fixes, etc C'est plutôt cool et un exercice de design vraiment rafraîchissant.

C'est très vrai. Venir à la conception pour l'iPhone est juste amusant. Pas de soucis pour les tests multi-navigateur, pas de soucis d'avoir à répondre à des technologies dépassées. Qu'est-ce que vous concevez ce que vous obtenez!

Voici quelques ressources pour vous aider à aller avec votre projet de conception de l'iPhone.

Les fichiers Photoshop

Gratuit de fichiers PSD iPhone pour les icônes / snapshots / whatever

iPhone GUI PSD

iPhone Interface fichier PSD

Icon Style iPhone. psd Kit

Officiel d'Apple Ressources

iPhone Dev Center
Vidéo: Introduction à l'iPhone SDK (enregistrement gratuit requis)
Graphisme & Animation codage How-To est

Tutoriels

Apprenez à développer pour le iPhone

Concevoir pour l'iPhone (si vous ne prenez pas un)

Créer un iPhone Slick / Interface mobile à partir de n'importe quel flux RSS

Concevoir pour l'iPhone (liste de plusieurs sites Web avec des interfaces iPhone)

Demandez HE: conception de l'interface iPhone (vidéo incluse)

ECommerce Pratique: Conception de site Web pour l'iPhone

iPhone Icons

Concevoir pour l'iPhone (partie 1) (favicon)

Comment créer une icône iPhone d'Apple pour votre site Web

Comment créer une icône de l'iPhone en utilisant Photoshop Webclip

Evolution de l'icône d'état de livraison (animation très cool de sa progression)

Extraits de code utiles

Détection de l'iPhone avec JavaScript:

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

Définissez la taille iPhone fenêtre:

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

Mettez ça dans votre tête pages web section. Si vous voulez forcer une largeur statique, changer "device-width" d'une taille spécifique. Dimensions de l'écran de l'iPhone sont de 320 x 480px.

Faites défiler la liste pour masquer la barre de menu sur chargement de la page:

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

Pour des nouvelles plus et iPhone commentaires sur les dernières applications de l'iPhone , consultez AppCraver .