Gravit Designer: Conception D'UNE application

De Photoshop à Illustrator

Parce que L’utilisation de Photoshop pour la conception de l’interface utilisateur est, à mon avis, une expérience inutilement douloureuse (et je ne suis pas seul dans cette vue), J’ai d’abord essayé de passer à Illustrator. Illustrator a rendu les choses beaucoup mieux pour moi pour quelques raisons: traiter avec beaucoup de plans est plus facile; Je peux sélectionner n’importe quel objet sur n’importe quel calque ou toute planche graphique en un seul clic, sans jamais avoir à traquer les noms de calques dans le panneau Calques; en outre, l’exportation des actifs dans les dernières versions Creative Cloud a été grandement améliorée; et ainsi de suite.

La nature vectorielle d’illustrator a beaucoup d’avantages pour la conception d’icônes et d’interfaces évolutives, et je trouve qu’il est beaucoup plus facile et plus rapide de dessiner, modifier et développer des formes. Il peut exporter mes actifs vers SVG, et il me donne le contrôle sur le code de sortie SVG. Illustrator se sent également plus approprié pour ce type de travail parce que le paradigme de travailler avec des graphiques vectoriels est très similaire à travailler avec les technologies Web (conteneurs, styles CSS, structure de document, polices vectorielles). Après tout, les navigateurs Web sont essentiellement des moteurs de rendu vectoriel.

Problèmes avec Illustrator

Cependant, J’ai frappé quelques problèmes stupides de temps en jour. Par exemple, prévisionner une conception sur un appareil mobile — il n’y a tout simplement aucun logiciel qui me permette de le faire directement. Photoshop a aperçu de périphérique, mais c’est pour iOS seulement, et il n’y a pas un tel outil pour Illustrator. Donc, J’ai dû utiliser un outil tiers appelé L’Aperçu. Et chaque fois que je voulais appareil-prévisualiser un écran, J’ai dû copier ma planche graphique Illustrator dans Photoshop, l’échelle (je travaille toujours dans MDPI, et mes périphériques sont xhdpi ou xxhdpi), puis exécutez la prévisualisation sur mon appareil-qui a parfois refusé de travailler et qui n’est pas supp t défilement.

En outre, même avec l’ajout de bibliothèques CC et avec la fonctionnalité des symboles dynamiques d’illustrator, certaines tâches sont restées un peu ennuyeuses ou fastidieuses, comme l’utilisation d’un grand ensemble d’icônes. Dans Illustrator, il n’y a pas de manière simple et directe d’ajouter rapidement une icône préfabriquée et de remplacer rapidement sa taille ou sa couleur (sans créer un tas de doublons).

Spécification de mes fichiers

La spécification de mes fichiers était un problème pour moi aussi. Il est, bien sûr, mon travail de fournir aux développeurs une conception bien spécifiée. Cela permet d’éviter des questions telles que «quelle est la distance entre cet élément et cet élément?» et «quelle taille de police est cet objet texte?»

Photoshop a tout un tas d’outils de spécification, mais je ne les ai jamais utilisés. Il n’y en a pas beaucoup pour Illustrator, et tous ont leurs inconvénients. Sans doute, le plus Feature-Full est Specctr, mais J’ai eu des difficultés techniques de l’exécuter (aussi, il n’a pas de DP comme une unité de mesure). Donc, J’ai fini par utiliser une version légèrement modifiée de l’illustrator spécifier script pour mesurer les tailles et les distances entre les objets pour les spécifications de conception. Cependant, aussi grande que ce script est, en spécifiant mes conceptions avec elle était encore assez fastidieux et long.

Mon Deal-briseur

Bien que ces problèmes sont sans doute ennuyeux et ralentir mon travail, ils ne sont pas des choses que je ne pouvais pas m’habituer et de surmonter. Cependant, les deux projets Android sur lesquels je travaille actuellement sont un gestionnaire de fichiers et un client de messagerie, ce qui signifie que beaucoup de mes maquettes haute fidélité sont remplies de listes, d’avatars, d’icônes de fichiers, de tailles de fichiers et d’autres types de données.

Pour compliquer encore la situation, les deux projets viennent avec une lumière et un thème d’interface sombre. En outre, beaucoup de mes conceptions doivent être adaptées aux téléphones et aux comprimés dans les modes de paysage et de portrait. Cela signifie beaucoup de copie et de collage, de modification de symbole, de dactylographie, de sélection et de désélection, et ainsi de suite.

Symboles dynamiques d’illustrator

Certes, les symboles et les fonctionnalités des bibliothèques d’illustrator peuvent être pratiques et me sauver du travail manuel. Mais ils peuvent être assez limités, par exemple, on ne peut pas avoir plusieurs itérations du même symbole ou du même graphique de bibliothèque. Pour moi, cela signifiait que je ne pouvais pas utiliser le même symbole (par exemple, une icône ou un bouton) dans mes maquettes thème sombre et lumière parce que je ne pouvais pas changer sa couleur sans modifier le symbole graphique lui-même. Il en va de même pour la fonction bibliothèque.

Problèmes liés à la conception pilotée par les données dans Illustrator

Maintenant, le moyen le plus efficace pour moi d’éviter d’avoir à copier et coller est d’avoir toutes les entrées de texte-voir «sujet», «de», «aperçu du contenu» et «temps» dans L’exemple ci-dessous, en tant que variables et de charger dynamiquement des chaînes prédéfinies de données pour chaque entrée.