Zipic utilise également des commandes système, alors pourquoi son apparence est-elle légèrement différente ? L'interface utilisateur de Zipic respecte scrupuleusement les quatre principes fondamentaux du « Guide du design pour tous » : proximité, alignement, répétition et contraste. Ces quatre principes, simples et faciles à comprendre, constituent la méthode la plus simple et la plus efficace pour optimiser une interface utilisateur. Proximité : Les éléments liés sont regroupés. Dans la liste de compression de Zipic, la vignette, le nom, la taille et le taux de compression de chaque fichier sont affichés côte à côte, formant une unité visuelle ; les fichiers différents sont quant à eux clairement espacés. L’utilisateur peut ainsi identifier d’un coup d’œil les informations relatives à une même image. Le panneau des paramètres est organisé de la même manière : les paramètres de sortie et de qualité sont regroupés, et les options « chemin de sortie » et « qualité de compression » sont distinctes. Alignement : Tous les éléments doivent être visuellement liés. Dans la barre latérale, la vue liste et le panneau de détails de Zipic, le texte d'un même élément est aligné. Cela peut paraître anodin, mais un mauvais alignement donnera une impression de manque de professionnalisme à l'interface. Le paramètre `alignment` de SwiftUI est largement utilisé ; les options `.leading`, `.trailing` et `.center` doivent être choisies en fonction du type de contenu. Répétition : Des éléments visuels cohérents sont présents sur l’ensemble du site. Zipic conserve un rayon d’angle uniforme et tous les textes cliquables utilisent la même couleur. Le style des icônes est également cohérent : soit elles utilisent toutes les icônes SF Symbols, soit elles utilisent toutes des icônes personnalisées, évitant ainsi un mélange hétéroclite. Cette cohérence donne aux utilisateurs l’impression d’avoir affaire à un produit abouti, et non à un assemblage disparate. Contraste : Mettez en évidence les informations importantes. Le taux de compression est la donnée la plus importante pour les utilisateurs ; affichez-le donc avec un dégradé de bleu. Le nom du fichier est secondaire et utilise une police standard. La taille d'origine est encore moins importante et utilise un gris clair. Distinguez clairement les informations principales des informations secondaires : les utilisateurs sauront ainsi instinctivement quelle option choisir. Ces quatre principes paraissent simples, mais leur maîtrise exige des ajustements constants. Ma méthode : après avoir écrit le code, je l’exécute pour observer le résultat, et si quelque chose me semble anormal, je vérifie à l’aide de ces quatre principes. Les éléments liés sont-ils trop éloignés ? Y a-t-il un problème d’alignement ? Les éléments répétés sont-ils incohérents ? Les éléments qui devraient être mis en évidence ne le sont-ils pas suffisamment ?
