100DaysUI - 002: Com es pot prototipar en principi una interacció de widget de qualificació

Disposa d'UI fosca per al web audible

Interfície d'usuari de Dark Dribble

100daysUI

diàriament dissenyaré una nova interfície en menys de dues hores i explicaré la idea que hi ha al darrere, o t’ensenyaré el que he après mentre dissenyava i enumerarem els problemes amb els quals m’enfronto, així que potser algú pugui compartir una resposta.

Dia 2: Reproductor web fosc audible i widget de qualificació mitjançant controladors bàsics

La idea és senzilla, m'encanta Audible, les retines em cremen des de fa anys amb una interfície d'usuari clara i he tingut picor de provar un d'aquests ginys de qualificació fantàstics basats en l'efecte drag. D’aquí aquest disseny

algunes coses són senzilles amb codi

A continuació, es mostra com fer aquest widget en Principi:

1a part: Disseny i preparació

1. A Sketch o Figma, dissenyeu el vostre widget de qualificació creant tots els elements necessaris:

  • 5 emojis (o el que més us agradi) per a les cinc possibles valoracions (badallar, umm, bo, genial, enamorats) i situar-los els uns als altres.

→ Els noms d'ordre i de capes no tenen importància en aquesta interacció, perquè tots els altres emojis estaran ocults, sinó un en cada cas, i treballarem dins d'una taula. Però serà més fàcil treballar amb un fitxer organitzat. La teva trucada.

  • 5 descripcions de text per a cada estat. També es col·loquen les unes sobre les altres.
  • barra de qualificació (rectangle corbat de fons i 5 trames). El principi escala una amplada des del centre de manera que el farciment continuarà saltant cap a l'esquerra en moure el mànec. En lloc de crear-ne cinc, és més senzill.
  • fons de la caixa de qualificació.

2. Poseu-lo en l'estat inicial (badall) rebaixant l'opacitat de tots els emojis i descripcions de text al 0%, excepte les d'aquest estat.

3. Importeu la cartolina a Principi.

4. En principi, feu clic al control que arrossegueu per canviar les valoracions i feu que es pugui arrossegar horitzontalment.

comproveu la captura de pantalla següent per veure com fer-ho.

2ª part - Disseny d’interacció

  1. amb la capa de mànec encara seleccionada, feu clic a "Controladors" a la part superior.

canviarem la il·lustració i el text de qualificació que es mostren en funció de la ubicació horitzontal del mànec.

2. seleccioneu tots els emojis i les capes de text, excepte el botó + totes les barres de classificació, excepte el vermell i creeu un fotograma on tinguin un 0% d’opacitat.

2. Desplaceu el mànec a la longitud del farciment taronja i afegiu-hi un quadre de clau on:

  • l'opacitat de YAWN i el seu text és del 0%.
  • l’opacitat de l’estat UMM i el seu text és del 100%.
  • l’opacitat del farcit taronja és del 100% i la vermella del 0%.

PROBLEMA

Si ho proveu, veureu que l'opacitat dels dos primers estats canviarà al mateix temps mentre mogueu el controlador creant aquest resultat inelegant :

Hi ha punts on un usuari tindrà un estat intermedi

Això és degut a que és analògic: les capes s’animen entre dos punts fins que arriben a l’estat del fotograma següent. Necessitem un commutador digital; una manera d’encendre o desactivar un determinat estat en un punt en moviment de manera que l’usuari només veurà un estat clar a cada punt. No estic segur que no hi hagi una manera millor, però així vaig resoldre aquest problema.

3. Al punt JUST abans d'un marc de claus, creeu un altre fotograma amb la mateixa opacitat que el fotograma anterior per a les capes de text i emoji en qüestió. Això explica que, fins a aquest punt, només canvieu el color i la longitud de la capa d'emplenament. Manteniu l'emoji i el text.

4. Just després d'això, creeu el fotograma amb l'estat següent. Com això:

5. Repetiu que per a tots els estats següents i tindreu un widget de treball com el de sota :)

Espero que us hagi agradat aquest tutorial!

  1. Alguns comentaris? Coses que coneixeu com fer-ho?

2. De cap manera jutjo als dissenyadors d'Amazon, aquí estic somiant despertant. Molt respecte a ells i els seus increïbles esforços!

3. Els emjois són pels Roundicons.

4. Obteniu informació sobre els controladors del principi aquí.