100DaysUI - 002: Kuidas hinnata põhimõttelist vidinate koostoime prototüüpi

Kujutava veebi tume kasutajaliides

Dark Dribble UI

100 päevaUI

iga päev kavandan vähem kui kahe tunni jooksul uue liidese ja seletan selle idee või õpetan teile seda, mida ma selle kujundamisel õppisin, ja loetlen üles probleemid, millega kokku puutusin, et äkki keegi saaks vastuse jagada.

2. päev - tume audible veebimängija ja vidin, mis kasutab printeri draivereid

Idee on lihtne, ma armastan Audiblet, minu võrkkestad on aastatepikkuse kerge kasutajaliidese järgi põlenud ja ma olen sügelenud, et proovida ühte neist lahedatest reitinguvidinatest, mis põhinevad lohistamisefektil. Siit ka kujundus

mõned asjad on koodiga lihtsalt lihtsamad

Nii saate seda vidinat põhimõtteliselt teha järgmiselt:

1. osa - kujundamine ja ettevalmistamine

1. Kujundus või joonis kujundage oma reitinguvidin, luues kõik vajalikud elemendid:

  • 5 emotikonit (või mida iganes teile meeldib) viie võimaliku hinnangu jaoks (haigutama, umm, hea, suurepärane, armunud) ja asetage need üksteise peale.

→ Tellimuse ja kihi nimedel pole selles suhtluses tähtsust, kuna kõik muud emotikonid on peidetud, kuid igal juhul üks ja me töötame ühe artboardi sees. Kuid korraldatud failiga on lihtsam töötada. Teie kõne.

  • 5 tekstikirjeldust iga oleku kohta. Samuti asetatakse üksteise peale.
  • reitinguriba (taustal kõverjooneline ristkülik ja 5 täidab). Põhimõte skaala laius keskelt, nii et täidis hüppab käepideme liigutamisel vasakule. Looge selle asemel lihtsalt viis, see on lihtsam.
  • reitingukasti taust.

2. Pange see algsesse olekusse (haigutage), vähendades kõigi emotikonide ja tekstikirjelduste läbipaistmatust 0% -ni, välja arvatud selle oleku omad.

3. Importige papp põhimõttesse.

4. Põhimõtteliselt klõpsake hinnangute muutmiseks käepidemel, mida lohistate, ja muutke see horisontaalselt lohistatavaks.

kuidas seda teha, vaadake allolevat ekraanipilti.

2. osa - interaktsioonide kujundamine

  1. kui käepideme kiht on endiselt valitud, klõpsake ülaosas „Draiverid”.

muudame kuvatud reitingu illustratsiooni ja teksti käepideme horisontaalse asukoha põhjal.

2. vali kõik emotikonid ja tekstikihid, välja arvatud hauga + kõik reitinguriba täited, välja arvatud punane, ja looge võtmekaadrit, kus neil kõigil on 0% läbipaistmatus.

2. Liigutage käepide oranži täidise pikkusele ja lisage klahvile võtmeraam, kus:

  • YAWNi ja selle teksti läbipaistmatus on 0%.
  • UMM-i oleku ja selle teksti läbipaistmatus on 100%.
  • oranži täidise läbipaistmatus on 100% ja punase 0%.

PROBLEEM

kui proovite seda, näete, et kahe esimese oleku läbipaistmatus muutub sama aja jooksul, kui käepidet liigutades luuakse see ebameeldiv tulemus: :

on punkte, kus kasutajal on vaheline olek

Seda seetõttu, et see on analoogne: kihid animeeritakse kahe punkti vahel, kuni nad jõuavad olekusse järgmises võtmekaadris. Vajame digitaalset lülitit; viis teatud oleku sisse- ja väljalülitamiseks liikumispunktis, nii et kasutaja näeks igas punktis ainult ühte selget olekut. Ma ei ole kindel, et paremat viisi pole, kuid nii lahendasin selle probleemi.

3. Punktis JUST enne võtmekaadrit looge teine ​​võtmeraam sama läbipaistmatusega kui eelmine võtmeraam kõnealuste emotikonide ja teksti kihtide jaoks. See ütleb põhimõtte, et kuni selle hetkeni muutke ainult täitekihi värvi ja pikkust. Hoidke emotikoni ja teksti all.

4. Kohe pärast seda looge võtmeraam järgmise olekuga. Nagu nii:

5. Korrake seda kõigi järgmiste olekute korral ja teil on toimiv vidin nagu allpool :)

Loodan, et teile meeldis see õpetus!

  1. Kas teil on kommentaare? asju, mida teate paremini teha?

2. Ma ei mõista mingil juhul Amazonase disainerite üle kohut, ma ainult unistan siin. Palju austust nende vastu ja nende hämmastavaid pingutusi!

3. Emjoid on ümaringide poolt.

4. Siit saate teada põhimõtteliste draiverite kohta.