guide de style des animations de conception d'interaction
J'essaie de proposer un ensemble standard d'animations pour chaque interaction d'un site Web de commerce électronique sur lequel je travaille. Il s'agit d'un projet qui suit un projet de guide de style (quelque chose de similaire à http://rizzo.lonelyplanet.com/styleguide/ ) il est logique de le faire car des choses comme les modèles d'interface utilisateur et les styles visuels sur le site Web aura un sens de cohérence une fois le projet de guide de style terminé.
comment puis-je obtenir l'extension du guide de style pour couvrir la conception d'interaction ainsi que les micro interactions? Je cherche des exemples ou des références et j'essaie de comprendre ce qui serait un bon point de départ.
pour l'instant j'essaye de construire l'approche suivante
par exemple.
Menus
en survolant - agrandir
en survol - augmenter
article dans le panier
ajouté fondu + zoom avant
supprimer-fondu + zoom arrière
zone de texte (validation)
entrée correcte - le contour se transforme en vert
entrée incorrecte - le contour se transforme en rouge
quelle est la meilleure approche pour trouver quelque chose de cohérent pourrait être utilisée avec chacun lorsque les parties prenantes ou les chefs de produit lors de la conceptualisation de nouvelles fonctionnalités.
Vous pouvez vous inspirer du guide de style d'animation IBM . Ils l'ont divisé en quatre sections:
- Notions de base - Ceci détermine les qualités essentielles de la façon dont les objets s'animent.
- Style - Comment vous pouvez appliquer le mouvement de la machine à vos éléments comme les menus et les listes. Je pense que cette section répond à vos besoins. Vous pouvez l'étendre pour ajouter vos propres éléments d'interface.
- Temps - Pour déterminer le rythme et la personnalité de l'animation. Comme facilité, facilité, etc.
- Justification - Cela montre comment l'animation peut améliorer l'expérience utilisateur.
J'espère que cela t'aides!