La règle du prototype papier

Les meilleurs designers, dont Zhenya Rynzhuk, Louis Paquet et Maria de la Paz Vargas, ainsi que la talentueuse équipe MediaMonks, ont influencé mon approche de l'animation. De nombreux projets exigent des animations sur mesure, repoussant les limites CSS et JavaScript. Cependant, les projets limités aux ressources obligent souvent les développeurs à diriger la conception de l'animation d'interface utilisateur et des considérations UX. Une astuce simple aide à évaluer l'efficacité de l'animation: la règle du prototype papier.

Se libérer de la mentalité d'impression

La conception Web hérite souvent des principes de la conception imprimée. Des éléments interactifs comme les accordéons et les onglets sont des versions numériques du stockage d'informations physiques. Alors que l'industrie a adopté les approches numériques, une mentalité d'impression persiste. Les développeurs pourraient par défaut des animations imitant le mouvement du papier, limitant la créativité.

Présentation de la règle du prototype papier

Mes années d'expérience ont façonné mes directives d'animation, que je partage maintenant avec mon équipe. La règle du prototype papier est essentielle:

Si un prototype papier peut recréer l'animation, il a probablement besoin d'amélioration.

L'objectif n'est pas de sur-compliquer, mais de tirer parti des avantages numériques au-delà des limitations d'impression. La règle est simple: l'animation peut-elle être reproduite avec du papier? Si oui, il y a de la place pour l'amélioration. Si non, l'animation est probablement plus innovante.

Application de la règle du prototype papier

Le prototypage papier est précieux pour les tests des utilisateurs, mais sa simplicité aide à identifier les interactions trop simplistes. Considérez la navigation sur le site Web: une conception peut spécifier des états actifs et inactifs. Ceci est facilement reproduit avec du papier (un morceau sur un autre). Nous pouvons faire mieux.

Sans spécifications de transition, une propriété transform simple améliore considérablement l'expérience. Le glissement de l'état du menu actif fournit une clarté et un contexte, le montrant comme une superposition. Bien que fonctionnel, cela peut-il être fait avec du papier? Oui. Plus d'amélioration est nécessaire.

Nous pouvons utiliser des techniques numériques - décoloration, masquage, parallaxe, stupéfiante ou animation indépendante des pièces de menu - pour créer une expérience numérique unique. Amélilons la diapositive simple avec ces techniques:

Le résultat va au-delà de la mentalité papier. Le papier peut glisser, mais pas s'estomper avec une animation de décalage. D'autres raffinements sont possibles, selon le projet. L'objectif est de se libérer des limitations d'impression et d'embrasser les possibilités numériques.

L'intégration de la règle du prototype de papier dans votre flux de travail encourage une amélioration continue. Étudiez les principes d'animation et recherchez l'inspiration d'autres sites Web. Lorsque vous travaillez sur des carrousels, des modaux ou des éléments interactifs, demandez-vous: passe-t-il le test du prototype papier?

Image d'en-tête par JJ Ying via un stash.

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!