Interface utilisateur (UI) normalisée pour les développeurs frontend, partie 1

Conception d'interface utilisateur (UI) normalisée pour les développeurs frontend

En tant que développeurs Web front-end, il est important de comprendre le concept de conception d'interface utilisateur (UI) normalisée. Cette approche implique de répartir les flux de travail logiciels sur différents écrans, en garantissant que chaque écran se concentre sur une tâche particulière. Cela simplifie l'expérience utilisateur en réduisant la confusion et en rendant les interactions plus intuitives.

Concepts clés : flux de travail, écrans et cadres

Lorsque nous réfléchissons à la conception d'une interface utilisateur, nous prenons souvent en compte les fonctionnalités, mais pour une interface utilisateur normalisée, il est plus utile de se concentrer sur :

1. Écrans : ce sont des pages ou des modaux dans une application Web.
2. Frames : Il s'agit d'ensembles d'éléments d'interface utilisateur accessibles simultanément à un moment précis. Ils représentent un sous-ensemble du contenu potentiel d'un écran.
3. Workflows : il s'agit de séquences d'actions que les utilisateurs effectuent, qui peuvent impliquer de se déplacer entre différents cadres ou écrans.

Exemple : Navigation par lien

Considérons un exemple utilisant des liens pour mieux illustrer ces concepts :

Flux de travail avec des cadres

1. Écran 1 : L'utilisateur démarre sur la page principale, où il voit une liste de questions fréquemment posées (FAQ). Chaque FAQ est initialement réduite, affichant uniquement la question. Cet état est un cadre car il représente un sous-ensemble de contenu à l'écran.

1. Action : L'utilisateur clique sur une question. Cette action révèle la réponse dans le même écran, passant à un nouveau cadre.

1. Action : L'utilisateur clique à nouveau pour masquer la réponse et revenir au cadre initial.

Flux de travail avec écrans

Envisagez maintenant une approche de conception différente utilisant des écrans :

1. Écran 1 : l'utilisateur démarre sur la page principale avec une liste de questions, mais au lieu de se développer dans le même écran, cliquer sur une question permet d'accéder à une page distincte qui affiche la réponse.

1. Action : Cliquer sur une question amène l'utilisateur à un nouvel écran (ou modal), dédié à l'affichage de la réponse complète.

Diagrammes de flux de travail

• Diagramme de workflow basé sur un cadre : ici, chaque action modifie le cadre sans quitter l'écran.

• Diagramme de flux de travail basé sur un écran : dans cette conception, chaque action accède à un nouvel écran.

Conclusion

L'utilisation de principes de conception d'interface utilisateur normalisés et leur visualisation via des diagrammes de flux de travail peuvent rendre l'interface plus intuitive et conviviale. Que vous utilisiez des cadres sur un seul écran ou que vous naviguiez entre les écrans, l'objectif est de simplifier l'expérience utilisateur et de réduire la confusion. Restez à l'écoute pour plus d'informations sur la conception normale de l'interface utilisateur !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!