Catégories
Astuces et Design

Expériences d'interaction avec l'interface utilisateur 2.5D de Yanlin Ma

Ceci est une collection de mes expériences d'interface utilisateur 2.5D sur le Web. Design de l'interface utilisateur est toujours un sujet éternel. De la ligne de commande à l'iconographie, du skeudomorph au design plat. Il témoigne non seulement du développement de la technologie Internet, mais aussi du changement esthétique des êtres humains.

Dans ce projet, j'essayais de repenser la possibilité d'interaction de l'interface utilisateur dans le navigateur, d'explorer l'esthétique de la conception d'interface utilisateur de manière expérimentale en 3D et d'inspirer les concepteurs / constructeurs pour leurs futures orientations de conception d'interface utilisateur.

Étude de cas Yanlin Ma
Flat UI et demi: atterrissage
Étude de cas Yanlin Ma
Interface utilisateur plate et demie: bouton

Étude de cas Yanlin Ma
Interface utilisateur plate et demie: bascule

En tant que concepteur et ingénieur, je travaille quotidiennement avec des boutons, des curseurs, des champs de saisie et tout ce qui se trouve sur le Web. Ceux Éléments de l'interface utilisateur ne sont pas seulement la façon dont nous interagissons avec les données, mais sont capables d'apporter du plaisir et de la joie à l'expérience utilisateur. Chaque fois que je clique sur un bouton délicat avec une transition douce ou que je fais glisser un curseur d'entrée très bien conçu suivi de quelques micro interactions soignées, je suis super excité par ces moments.

Étude de cas Yanlin Ma
Interface utilisateur plate et demie: entrée

Étude de cas Yanlin Ma
Interface utilisateur plate et demie: carrousel

Pourquoi ne pas amplifier cette interaction?

J'ai eu l'idée de me débarrasser de tout sur le Web, de faire d'un seul élément le rôle principal, de me concentrer vraiment sur diverses interactions (cliquer, glisser, taper, glisser, etc.) et d'amplifier ces moments agréables.

Le navigateur est maintenant assez puissant pour rendre presque tout ce que vous voulez

Avec l'aide de webGL / Toile, nous pouvons mettre en œuvre contrôle au niveau de l'image sur des graphiques 3D, 60 fois par seconde. J'ai vu tellement de superbes conceptions d'interface utilisateur 2D et d'implémentations CSS ingénieuses. Cependant, les éléments 3D ne sont pas souvent utilisés. C'est une mauvaise idée d'utiliser des éléments 3D lourds ici et là dans un produit Web, mais cela pourrait certainement être une bonne idée pour expérimenter.

Le code est un autre grand défi

Le premier consiste à gérer différents gestes / interactivités: survoler, cliquer, double-cliquer, faire glisser, etc. Chaque geste de l'interface utilisateur était assez personnalisé et dédié. Pour résoudre ce problème, j'ai conçu un module de gestion d'événements personnalisé dans mon code, qui est capable d'appliquer des événements à un certain élément et de gérer efficacement différents types d'événements.

Le deuxième défi est la performance. Charger des modèles 3D dans le navigateur est toujours un travail difficile. Plus il faut de détails, plus cela prend de temps. Après les premiers prototypes et itérations, j'ai réalisé qu'il fallait une éternité pour charger ces modèles 3D, ce qui provoquerait des perturbations pour l'utilisateur. Je suis donc retourné à C4D et j'ai nettoyé les modèles en réduisant les arêtes / sommets et en supprimant les faces / géométries inutiles. Et j'ai fait un dernier balayage en utilisant du code Python pour m'assurer que tous les modèles sont aussi optimisés que possible.

Les technologies

Langue:

Bibliothèque / Framework:

Outils de conception:

Crédits

Yanlin Ma est un designer / illustrateur et ingénieur basé à New York, actuellement ingénieur UX chez Amazon, jeune membre du jury chez Awwwards.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *