Concevez un commutateur On/Off pour les paramètres de votre application grâce à Adobe XD CC.
create-ui-switch_1000x560

Pour suivre le tutoriel, nous vous invitons à télécharger le fichier d'exemple. Vous pouvez également créer votre propre icône en reprenant ces concepts. 

Créez les états On et Off de votre commutateur à l'aide de formes simples. Notre commutateur se compose d'un rectangle aux angles arrondis et d'un cercle. Nous avons commencé par l'état Off, avec le cercle devant le rectangle et à gauche. Nous avons ensuite copié les deux formes et déplacé le cercle à droite pour créer l'état On.

create-ui-switch_step1

Testez les différentes couleurs, formes et ombres proposées dans le panneau Apparence pour trouver le style le mieux adapté à votre projet. Vous pouvez ajouter du texte directement dans les éléments du commutateur afin de donner un nom à chaque état.

create-ui-switch_step2

Voici le style de commutateur que nous avons choisi pour ce projet.

create-ui-switch_step3

Fusionnez les composants de chaque commutateur dans un groupe que vous incorporerez dans votre plan de travail. En mode Prototype, liez le commutateur Off au plan de travail On, et inversement. Afin de garantir la fluidité de l'expérience, veillez à cocher la case Conserver la position de défilement.

create-ui-switch_step4

Vous pouvez désormais créer vos propres commutateurs pour les paramètres de vos applications.

11/07/2018

Contributeur Adobe Stock : Farknot Architect

Cette page vous a-t-elle été utile ?