100DaysUI - 002: Принциптегі виджеттердің өзара әрекеттесуін қалай прототиптеу керек

Дыбыстық веб-торап үшін Dark UI мүмкіндіктері

Dark Dribble UI

100күніUI

Күн сайын мен екі сағаттың ішінде жаңа интерфейс жасап, оның идеясын түсіндіремін, немесе оны құрастыру кезінде білгендерімді үйретемін және біреудің жауабын бөлісуі үшін мен тапқан мәселелердің тізімін жасаймын.

2-ші күн - Принцип драйверлерін қолдана отырып, қара дауысты веб ойнатқыш және рейтинг виджеті

Идея қарапайым, мен естілетінді жақсы көремін, менің ретиналарым UI жылдарындағы жарықтан жанып кетті және мен сүйкімді эффектке негізделген керемет рейтинг виджеттерін қолданып көрдім. Осыдан дизайн

кейбір нәрселер кодпен оңайырақ

Сонымен, осы виджетті Принципте қалай жасауға болатындығы көрсетілген:

1 бөлім - Дизайн және дайындау

1. эскизде немесе фигмада барлық қажетті элементтерді құру арқылы рейтинг виджетін жасаңыз:

  • Мүмкін болатын бес бағалау үшін (эму, не ұнаса да) және оларды бір-бірінің үстіне қойыңыз.

→ Бұйрық пен қабат атаулары бұл өзара әрекеттесуде маңызды емес, өйткені барлық эмодиялар жасырылады, бірақ әр жағдайда біреуі болады және біз бір арт-панельде жұмыс істейтін боламыз. Бірақ ұйымдастырылған файлмен жұмыс істеу оңайырақ болады. Сіздің қоңырауыңыз.

  • Әр күйге 5 мәтіндік сипаттама. Сондай-ақ, бір-бірінің үстіне қойылады.
  • бағалау жолағы (фондық тіктөртбұрыш және 5 толтырғыш). Тұтқаны жылжытқан кезде толтыру солға қарай секіреді, сондықтан принциптік шкаланың ортасынан ені өзгереді. Оның орнына бесеу жасаңыз, оңайырақ.
  • рейтинг ұяшығының фоны.

2. Бастапқы күйге қойыңыз (эмоциялар) мен мәтіндік сипаттамалардың мөлдірлігін 0% дейін төмендетіңіз, сол күйден басқа.

3. Көрнекі тақтаны Принципке импорттаңыз.

4. Негізінде, рейтингтерді өзгерту үшін сүйрейтін тұтқаны нұқыңыз және оны көлденеңінен апаруға болады.

мұны қалай жасау керектігін көру үшін төмендегі скриншотты тексеріңіз.

2 бөлім - өзара әрекеттесуді жобалау

  1. әлі таңдалған тұтқалар қабаты бар болса, үстіндегі «Драйвер» түймесін басыңыз.

біз рейтингі бар суретті және мәтінді дескриптордың көлденең орналасуына қарай өзгертеміз.

2. эмоциялар мен мәтіндік қабаттардың барлығын таңдап алыңыз, тек қана + барлық рейтинг жолағы қызыл түстерден басқа толтырылады және олардың негізгі 0% ашықтығы бар негізгі кадр жасаңыз.

2. Тұтқаны қызғылт сары түстің ұзындығына жылжытып, негізгі кадр жақтауын мына жерде қосыңыз:

  • YAWN және оның мәтінінің мөлдірлігі 0% құрайды.
  • UMM күйі мен оның мәтінінің мөлдірлігі 100% құрайды.
  • сарғыш толтырғыштың мөлдірлігі - 100%, ал қызыл түс - 0%.

МӘСЕЛЕ

егер сіз мұны байқап көрсеңіз, сіз алғашқы екі күйдің ашықтығы бір уақытта өзгеретінін көресіз, егер сіз бұл таңқаларлық нәтижеге қол жеткізсеңіз :

пайдаланушының өзара күйі болатын нүктелер бар

Бұл аналогты болғандықтан: қабаттар келесі негізгі кадрда күйге жеткенге дейін екі нүкте арасында анимацияланады. Бізге сандық қосқыш қажет; Пайдаланушы әр нүктеде бір ғана нақты күйді көре алатындай етіп, қозғалыстағы белгілі бір күйді қосу / өшіру әдісі. Бұдан жақсы әдіс жоқ екеніне сенімді емеспін, бірақ мен осылай шештім.

3. Кілт жақтауының алдындағы JUST нүктесінде эмоциялар мен мәтіндік қабаттарға арналған алдыңғы кадр кадрымен бірдей мөлдірлігі бар басқа кадрлық кадр жасаңыз. Бұл осы кезге дейін тек бояу қабатының түсін және ұзындығын өзгерту керек деген қағиданы айтады. Эмодзи мен мәтінді ұстап тұрыңыз.

4. Осыдан кейін келесі күймен бірге негізгі кадрды жасаңыз. Бұл сияқты:

5. Келесі жағдайлардың барлығын қайталаңыз, сізде төмендегідей жұмыс істейтін виджет болады :)

Бұл оқу құралы сізге ұнады деп сенемін!

  1. Пікірлер бар ма? істеудің жақсы әдісін білесіз бе?

2. Мен Amazon дизайнерлерін ешқашан айыптамаймын, мен мұнда жай ғана армандамын. Оларға деген құрмет және керемет күш-жігер!

3. Эмджойлар - Рикикондар.

4. Мұнда принциптің драйверлері туралы біліңіз.