Créez des interfaces utilisateur impressionnantes avec l'IA de transfert de style
Table of Contents:
- Introduction
- Objectif du projet
- Le processus de transfert de style
- Les avantages de l'intelligence artificielle pour la conception UI
- Utilisation de la bibliothèque de conception
- Suggestions automatisées
- Automatisation de l'ajout d'éléments
- Améliorations continues grâce à la personnalisation
- Conclusion
- Ressources
🔮 Introduction
Bienvenue dans cette démonstration du projet de conception d'IA pour le transfert de style. Nous, au sein du groupe des interfaces utilisateur de l'université d'Alto, avons mené une intéressante recherche conjointe sponsorisée par Huawei Technologies. Ce projet vise à développer un outil logiciel qui peut créer des interfaces utilisateur graphiques automatisées à partir de croquis préliminaires. Permettez-moi de vous expliquer...
Objectif du projet
Imaginez que vous travaillez pour une grande entreprise et que quelqu'un vous demande de développer une nouvelle interface utilisateur. L'idée a été capturée rapidement, sans alignement, sans directives, sans embellissement. Il s'agit simplement d'une capture d'idée de la façon dont une nouvelle interface utilisateur devrait être. Maintenant, vous avez un concepteur expérimenté qui vous montre un exemple de conception existante qui pourrait être utilisé comme base pour cette nouvelle interface...
💡 Le processus de transfert de style
Le concepteur prend le croquis préliminaire et applique le style de la conception précédente pour créer un nouveau croquis qui est mieux Aligné, plus attrayant et qui satisfait déjà les principes et les règles de conception de l'entreprise. Ce que vous voyez maintenant, c'est le résultat de ce processus. Mais nous avons maintenant une plateforme logicielle capable d'automatiser l'ensemble de ce processus...
Les avantages de l'intelligence artificielle pour la conception UI
Avec AI Design, nous calculons la différence logique entre n'importe quelle paire de mises en page et utilisons cette différence pour trouver l'équivalent logique dans une bibliothèque, pour un croquis donné. Quelqu'un vous donne un croquis préliminaire et une bibliothèque de mises en page bien conçues, et notre système trouve la meilleure correspondance pour ce croquis préliminaire dans la bibliothèque. Ensuite, il transforme totalement cette conception de l'interface utilisateur, du croquis préliminaire à la conception finale, en respectant toutes les directives et règles propres à l'entreprise, tout en créant une mise en page bien alignée et de qualité qui sera acceptée par tous...
💡 Utilisation de la bibliothèque de conception
Nous utilisons une bibliothèque de conception qui contient des modèles d'interfaces utilisateur qui ont été soigneusement éditées et validées par l'organisation. Nous fournissons un outil de cartographie qui permet d'associer un croquis partiel préliminaire à la meilleure conception pertinente de la bibliothèque. Nous pouvons visualiser la bibliothèque sous forme de distribution globale, la classer et y ajouter de nouveaux candidats...
Suggestions automatisées
L'outil suggère la meilleure mise en page disponible qui correspond au croquis en cours de développement. Vous remarquerez déjà que le croquis préliminaire a des composants assez différents de ceux affichés à l'écran. Pourtant, il est tout à fait possible pour notre système d'appliquer ce style à ce croquis. Lorsque notre système les analyse, il trouve que si nous acceptons cette idée, la nouvelle mise en page possible ressemblera à ceci. Si nous aimons cette suggestion, nous obtenons une réorganisation de l'écran. Plusieurs éléments ont été déplacés et redimensionnés en accord avec les règles de l'entreprise et les principes de l'alignement...
💡 Automatisation de l'ajout d'éléments
Notre outil offre plusieurs fonctionnalités. Tout d'abord, il permet au système d'utiliser des composants d'interface utilisateur standard provenant d'un travail antérieur réalisé dans l'entreprise. Deuxièmement, il propose des designs existants de qualité qui peuvent être transférés à un croquis préliminaire sélectionné. Troisièmement, il facilite l'autocomplétion en indiquant le prochain élément à ajouter sur l'écran et comment l'aligner au mieux avec les éléments existants. Enfin, il permet d'apporter des améliorations continues basées sur les commentaires du concepteur...
Améliorations continues grâce à la personnalisation
Nous disposons de plusieurs composants pour cela. Nous utilisons une bibliothèque de conception, qui est une collection de designs bien édités et sélectionnés par l'organisation. Nous fournissons un outil de cartographie qui permet de trouver le design pertinent à partir du croquis partiel préliminaire. Nous pouvons visualiser la bibliothèque de manière globale, la classer et ajouter de nouveaux candidats. Nous pouvons également faire des transferts de style entre deux designs ou mises en page, ce qui permet de transformer un design en utilisant le style d'un autre...
💡 Conclusion
En conclusion, notre projet de conception d'IA pour le transfert de style permet de créer des interfaces utilisateur de manière automatisée à partir de croquis préliminaires. Grâce à l'intelligence artificielle, nous avons pu développer un outil qui utilise une bibliothèque de conception, propose des suggestions automatisées, facilite l'ajout d'éléments et permet des améliorations continues grâce à la personnalisation. Ce projet offre de nombreux avantages pour les concepteurs d'interfaces utilisateur et les entreprises souhaitant développer de nouvelles interfaces efficacement et rapidement...
Ressources
AI Design project - University of Alto
Huawei Technologies
AI design library