Introduction à la conception iPhone

Cet article est le premier d'une série de 10 dessins iPhone Design présentée sur Mobiletuts +. Chaque semaine, nous explorerons divers aspects de la conception d'interfaces mobiles utilisables pour iOS. Pour recevoir un rappel chaque fois qu'un nouveau message arrive dans cette série, assurez-vous de vous abonner par courrier électronique ou via notre flux RSS.!

Aperçu de la série

Vous êtes un concepteur de sites Web, vous êtes enthousiasmé par l’idée de concevoir des applications pour iPhone, mais vous ne savez pas comment commencer? Ou peut-être avez-vous conçu plusieurs applications, mais cherchez-vous à renforcer vos compétences avec des connaissances fondamentales sur les raisons pour lesquelles nous prenons certaines décisions de conception pour les appareils mobiles? Cette série est destinée aux concepteurs novices et intermédiaires qui souhaitent créer une ambiance chaleureuse dans l’espace de conception mobile.!

Les sujets de cette série incluent des techniques pratiques, des exemples et la théorie de la conception relative aux appareils mobiles. Ce qui suit est une liste de ce que nous allons couvrir au cours de cette série:

  • Concevoir pour le public iPhone et l'App Store
  • Comment utiliser les modèles de conception iPhone et iPad
  • Conception d'applications utilisant toutes les fonctionnalités iPhone disponibles
  • Comment concevoir pour les différents types d'applications iPhone
  • Le processus de conception mobile
  • Avantages et inconvénients de l'utilisation des graphiques par défaut d'Apple par rapport aux graphiques personnalisés
  • Comprendre le public cible de votre application
  • Conseils de conception d'icônes pour iPhone et iPad
  • Outils de maquette iPhone et le processus de wireframing
  • Création de captures d'écran et d'icônes pour iTunes

Concevoir pour le mobile par rapport au Web

Puis-je tout simplement commencer à concevoir des applications? Après tout, concevoir pour mobile, c'est juste concevoir pour un écran plus petit, à droite?

Pas vraiment. Concevoir pour le mobile diffère de la conception de sites Web ou d'applications de bureau, et les différences se multiplient rapidement à mesure que davantage d'appareils mobiles dotés de fonctionnalités supplémentaires et de considérations matérielles uniques arrivent sur le marché. Examinons les différences entre la conception pour le Web et le mobile pour mieux comprendre comment les utilisateurs interagissent avec chaque plate-forme..

Concevoir pour le Web

Dans le cadre de cet article, le terme "Web" désigne les sites Web et les applications Web pour ordinateurs portables / ordinateurs de bureau. Lorsque nous concevons des applications Web, le matériel sur lequel notre conception sera visualisée est pris pour acquis. Nous n'allons pas ramasser et incliner ou toucher nos moniteurs ou ordinateurs portables. En fait, les interactions tactiles sont généralement limitées à:

  • Clics de souris
  • Frappes
  • Entrée microphone
  • Sortie audio haut-parleur

Concevoir pour le mobile

Mobile est une bête complètement différente. Non seulement nous travaillons avec du matériel nouveau et diversifié, mais la conception mobile a également le potentiel de nous toucher de manière très différente sur le plan émotionnel. Mobile est une plate-forme personnelle et centrée sur les personnes. Après tout, pensez à ce que nous appelons beaucoup de ces appareils: les combinés. Ils tiennent dans notre main, notre poche ou à côté de notre portefeuille. Nous les utilisons pour passer des appels téléphoniques et pour socialiser, et ils sont presque toujours à nos côtés. Tous ces facteurs influencent notre perception émotionnelle de l'appareil.

En termes de capacités matérielles, il existe une tonne de points d'interaction qui influencent tous directement les considérations de conception. Ceux-ci inclus:

  • Détection de gestes (pincer, glisser, glisser, etc.)
  • Détection simple et multi-tactile (permet une interaction directe avec le contenu)
  • Clavier logiciel à l'écran ou clavier physique sans fil
  • Entrée microphone (souvent utilisée pour des tâches telles que la navigation)
  • Sortie audio haut-parleur
  • Informations et commentaires sensibles à la localisation

Êtes-vous un bon ajustement pour mobile?

En tant que concepteurs, nous avons tous des forces et des faiblesses, des domaines d’expertise et des domaines de désintérêt. Avant de vous plonger dans les bases du design iPhone, c'est une bonne idée d'examiner les caractéristiques des concepteurs mobiles talentueux..

La bonne nouvelle est que vous pouvez apprendre cela. La question est, dans quelle mesure êtes-vous intéressé à le faire? Concevoir pour les appareils mobiles nécessite une expérience utilisateur qui dépasse tout ce que la plupart des gens ont pu voir dans la conception Web. Nous créons rarement des interfaces mobiles conçues pour être considérées et appréciées uniquement pour leur valeur esthétique. Une grande majorité d'interfaces mobiles sont orientées tâches et utilisateurs.

En réalité, avec la plupart des applications mobiles utilitaires, les utilisateurs ne voient pas votre conception très longtemps. Si tel est le cas, vous avez mal agi et s’ils ne savent pas comment résoudre rapidement le problème, ils s'en vont. Ils suppriment. Ils écrivent ensuite une mauvaise critique.

Les concepteurs qui ont la transition la plus facile vers le mobile sont ceux qui adoptent un niveau élevé de convivialité et de créativité. L'idée que concevoir pour l'expérience utilisateur commence par dégonfler son potentiel créatif est exactement le contraire de la réalité..

Concevoir pour le mobile est l'un des terrains de jeu les plus passionnants et créatifs pour les concepteurs d'aujourd'hui. C'est littéralement un terrain de jeu ouvert, mûr pour l'innovation. Pour expliquer ce que signifie être un concepteur mobile, il est préférable de jeter un regard de retour sur l'historique de la conception des produits..

Avant de pouvoir acheter un appareil mobile qui effectuait plusieurs tâches, nous avions un produit qui remplissait une tâche. Un téléphone à clavier, un réveil, une lampe de poche: chacun de ces objets nécessitait une équipe de développement de produits dédiée, un concepteur et un spécialiste du marketing..

Aujourd'hui, bien sûr, toutes ces tâches peuvent être effectuées sur un seul appareil. Assez étonnant! Ce qui est cool, c’est la même planification, le même souci du détail et le même design esthétique qui ont été intégrés au téléphone: l’horloge et la lampe torche d’aujourd’hui servent toujours à créer chacune de ces applications de nos jours!

Pensez-y non seulement "il existe une application pour cela", mais plutôt "il existe un produit pour cela". Vous n'êtes pas seulement en train de concevoir des applications. Vous concevez des produits.

Mobile est une toile vierge

Le plus excitant à propos de la conception pour les appareils mobiles est que la plupart du temps, vous travaillez à partir d'une toile totalement vierge. Bien sûr, il y a des règles de conception fondamentales et universelles à prendre en compte, mais la vérité est que bon nombre des règles de conception et des attentes en ce qui concerne le mobile sont encore en cours de définition..

Le défi pour les concepteurs est de créer des conceptions fidèles à l'utilisateur, à la marque et à la tâche à accomplir. Parfois, cela signifie utiliser des contrôles standard et fournir une interface purement utilitaire. Dans d'autres cas, cela signifie ignorer toutes les normes et créer un design totalement unique. Dans tous les cas, l’utilisateur doit comprendre intuitivement comment utiliser l’application en un instant..

Quels logiciels utiliser pour concevoir des applications??

C’est la première question que les concepteurs nouveaux sur le mobile semblent poser. Bonne nouvelle, Pixel Pushers: c'est Photoshop! Cela dit, avec la multiplication des périphériques, des tailles d’écran et des résolutions, les formes vectorielles (ou objets intelligents vectoriels) jouent également un rôle important dans la conception de périphériques mobiles..

Ma préférence personnelle est de créer des formes vectorielles dans Illustrator, puis de copier et coller ces objets dans Photoshop en tant que calque de forme. Pour les objets vectoriels qui ne sont pas trop complexes, je préfère cette méthode à l'utilisation d'objets intelligents, de sorte que je ne bascule pas constamment entre Photoshop et Illustrator..

Nous allons plonger dans tous les détails des différentes tailles d'écran, résolutions, types de fichier image et dimensions des zones de prise dans une autre publication de cette série: "Comment utiliser les modèles de conception pour iPhone et iPad."

Comment sont faites les applications?

Les applications iPhone sont développées à l'aide de plusieurs méthodes différentes. Nous verrons plus loin dans "Comment concevoir différents types d'applications iPhone", mais, d'une manière générale, les applications pour iPhone sont écrites dans le langage de programmation Objective-C à l'aide d'un programme Apple appelé Xcode. Apple fournit tous les logiciels de développement dont vous avez besoin pour créer une application gratuitement lorsque vous vous inscrivez en tant que développeur Apple. Toutefois, pour installer le logiciel, vous aurez besoin d’un ordinateur Apple exécutant la dernière version du système d’exploitation OS X. Vous devez également vous inscrire au programme Apple Developer et payer des frais annuels de 99 USD pour pouvoir créer et tester des applications sur un iPhone ou un iPod touch physique..

Pourquoi certaines applications sont-elles basées sur un modèle et certaines sont-elles conçues sur mesure??

Les applications que vous voyez qui semblent être "basées sur un modèle" utilisent généralement les éléments d'interface utilisateur par défaut fournis par Cocoa-Touch et respectent les consignes standard en matière d'interface utilisateur d'Apple. Ces instructions définissent des normes graphiques et des modèles d'utilisation pour les éléments d'interface utilisateur par défaut et facilitent la création et la conception d'applications par tout développeur. En général, vous voyez une barre de tabulation noire au bas et une barre de navigation intitulée en haut. Les onglets vous permettent d'accéder à différentes catégories d'informations, tandis que la barre de navigation vous aide à naviguer dans ces catégories..

Les applications que vous voyez qui n'intègrent pas les éléments d'interface utilisateur standard ont été conçues sur mesure. Presque tous les jeux occasionnels et sérieux sont conçus sur mesure et certains outils amusants et applications utilitaires intègrent également des graphiques conçus sur mesure.

La décision d'utiliser des graphiques personnalisés par rapport aux graphiques standard dépend souvent du budget global disponible pour le projet. Avoir juste le budget pour concevoir les graphiques personnalisés ne suffit pas; un budget doit également exister pour qu'un développeur puisse implémenter les graphiques personnalisés. L’intégration de la conception d’applications personnalisées peut parfois être très difficile pour le développeur ou l’équipe de développement.!

Étant donné le temps et l'argent nécessaires à la création d'une interface utilisateur personnalisée, il est important de prendre en compte le nombre de graphiques personnalisés permettant d'améliorer l'expérience utilisateur au-delà de ce qui est disponible avec les éléments d'interface utilisateur fournis par défaut par Apple. UDID Sender est un bon exemple d'application ne faisant qu'une petite chose et ne nécessitant vraiment pas beaucoup de conception sur mesure. Cette application récupère l'UDID de vos appareils (un peu comme la balise de licence de votre iPhone) et l'enverra par courrier électronique à un développeur afin que vous puissiez installer des versions préliminaires des applications pour les tests bêta. Ce type d'application n'a pas vraiment besoin de graphiques personnalisés.

Prêt à plonger?

Génial! Le prochain article de cette série vous permettra de vous familiariser avec l'utilisation de modèles de conception préfabriqués. Je vais vous expliquer les bases de la conception de votre première application, notamment les normes, les meilleures pratiques, les règles de conception de base et la théorie pour les appareils mobiles..

Une offre spéciale de Jen Gordon @Tapptics

Envoyez-moi un email et je vous enverrai un coupon de réduction de 20% pour une année de téléchargements sur Tapptics!