Outils pour créer des maquettes pour les interfaces utilisateur des appareils mobiles
Je recherche des outils qui peuvent m'aider à créer des maquettes d'interface utilisateur pour différents téléphones mobiles tels que l'iPhone, les appareils Android et Windows Phone 7. Y a-t-il une application qui peut le faire?
Si vous allez faire du prototypage pour iPhone, il y a un très intéressant iPhone Mockup tool que j'ai trouvé récemment.
Vous pourriez également vouloir considérer la liste fournie par cet article , il a beaucoup de pochoirs et d'outils sur le sujet.
Bonne question - Les maquettes Balsamiq peuvent être votre meilleur pari. Ils ont des contrôles iPhone intégrés, et quelqu'un a contribué aux contrôles pour Windows Phone 7 . Ils ont aussi des trucs pour les plates-formes Nokia, etc. Je ne suis pas sûr des options Android ici. Gardez un œil sur le blog Balsamiq Mockups To Go pour d'autres contributions de la communauté Balsamiq.
J'ai également créé deux listes sur Twitter en suivant le wireframing et les outils de prototypage , qui vous pourriez envisager de suivre pour voir si ces sociétés intègrent la prise en charge de ces plateformes. Étant donné que Windows Phone 7 n'a pas encore été lancé, beaucoup d'entre eux n'ont pas encore emménagé dans cet espace.
Consultez également Pencil pour Firefox .. et les pochoirs Android sur le Android-ui-utils projet open source ( article de blog ici ).
J'ai également entendu dire qu'Adobe Fireworks est très bon pour le prototypage d'interface utilisateur (principalement avec la prise en charge des maquettes interactives et des formes à 9 tranches) ... Je ne l'ai pas essayé moi-même cependant.
Je voudrais ajouter le plugin WireframeSketcher Eclipse à la liste. Une application de prototypage très agréable et facile à utiliser qui peut être utilisée dès la sortie de IDE même par des non-programmeurs.
Un bel avantage de WFS est que les écrans sont enregistrés sous forme de fichiers XML, ce qui permet de les stocker facilement dans un système de contrôle de version et de les diff'rer et les fusionner pour garder les changements organisés.
Bien qu'il ait été initialement créé pour simuler des applications "normales", certains utilisateurs ont apporté des composants de maquette - appelés "pochoirs" - pour les applications iPad/iPhone/Android (voir WFS Mockupgallery ).
J'utilise souvent gdocs. Im le plus flexible avec lui et je m'y suis habitué. J'adore la façon dont vous pouvez partager, discuter et collaborer aux croquis. Voir ici par exemple: Sélection en deux étapes dans Windows Phone 7
Vous pouvez également utiliser Fireworks ou vous pouvez essayer cette application http://www.fluidui.com/ dédié uniquement sur iPhone et Android pour la création de maquettes). :)
Pour iPhone/iPad, j'utilise les éléments suivants: App Cooker et iMockups
Les deux sont des applications iPad.
Axure tout le chemin! J'ai passé d'innombrables heures à faire fonctionner un prototype sur mobile. Le problème avec tous les autres programmes que j'ai utilisés est qu'ils ne gèrent pas les formulaires détaillés. J'ai dû créer un prototype de formulaire d'entraînement par téléphone. Axure pourrait gérer la forme "se souvenir" des choix des utilisateurs lors de rebondissements d'un écran à l'autre. (c'est-à-dire: lorsque l'utilisateur a sélectionné "activité" et qu'il passe à l'écran suivant avec la liste des activités, il peut choisir "Exécuter" et le faire rebondir sur l'écran précédent avec "Exécuter" pré-rempli. Il peut alors choisir sous-activité, disons "course sur tapis roulant". Cela me ramènerait alors sur l'écran du formulaire d'origine avec "Exécuter" et "Course sur tapis roulant" renseignés sur le formulaire.) Certains autres programmes géreraient cela comme une liste déroulante, mais bien sûr cela est géré différemment sur le téléphone. Axure est le seul programme qui soutiendrait cela.
Il existe également un paramètre dans la nouvelle version du logiciel qui vous permet d'ajuster le volet de visualisation du prototype afin qu'il ressemble à une application réelle sur le téléphone. Il prend en charge des fonctions comme "tap" qui sont des fonctions mobiles.
Sur le site, il y a un essai gratuit. De nombreuses bibliothèques de widgets sont prises en charge, même des éléments d'interface utilisateur mobile.
Je recommande fortement ce programme!
Voici un autre outil qui peut vous aider Kit filaire iPhone - Google Docs
Veuillez également ajouter cet outil dans vos ressources.
DesignerVista 4.0 pour iPhone, Windows Phone 7 et Android Mobile GUI Mockups
Je préfère Fireworks depuis longtemps, mais récemment, je suis passé à OmniGraffle (depuis que Fireworks a commencé à devenir vraiment bogué et lent sur mon Mac). Je suis assez satisfait du choix jusqu'à présent. Voici quelques très beaux pochoirs pour iPhone et iPad qui incluent à la fois de vrais graphismes et des versions en niveaux de gris pour OmniGraffle.
En règle générale, vous commencez avec des images filaires en niveaux de gris et ajoutez des graphiques si nécessaire. Personnellement, je travaille plus rapidement avec les niveaux de gris et cela fait que les wireframes collent à la description des fonctionnalités et de la navigation, pas aux couleurs.
J'ai essayé deux méthodes. Les commentaires et liens sont les suivants;
Photoshop ou Fireworks avec ceci http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ De manière standard, prend un peu plus de temps pour affiner les dispositions.
Interface app pour iphone Prend trop de temps mais parfait pour le prototype et la production aussi .. =
Keynote Kungf - Keynote, modèle PowerPoint pour le prototypage iOS Le meilleur à ce jour, rapide car le keynote donne beaucoup de main , plusieurs options d'exportation.
J'adore Cacoo ; c'est mon go-to pour le simple wire-framing et ils ont de grandes options pour iPhone, Android, etc. J'ai utilisé d'autres outils, mais cela a été le meilleur pour moi, pour simuler quelque chose avant de le construire moi-même ou avec mes amis .
Vous voyez, il existe de nombreux outils. Le bon choix dépend toujours de votre expérience et de vos compétences antérieures et, bien entendu, du contexte de votre tâche. Que voulez-vous montrer et à qui.
En plus de la liste, je peux recommander: - si vous souhaitez explorer toutes sortes de transitions, vérifiez Adobe Catalyst (ou Flash) - si vous avez besoin de créer des spécifications par la suite, la référence actuelle est Axure RP6
En fait, vous pouvez utiliser tout ce que vous avez, tant que vous savez ce que vous voulez faire et qui est le public de votre livrable;)
Je ne peux pas ajouter de commentaire au message de Rahul, donc je mentionnerai ici que le site de maquettes personnalisées de Balsamiq est en train de déménager ici https://mockupstogo.mybalsamiq.com/projects et son format est beaucoup plus agréable que le site Posterous.
@OneWorld, vous pouvez vous abonner à http://mybalsamiq.com pour 12 $ par mois. Mais vous feriez mieux d'acheter la version de bureau IMHO.