100DaysUI - 002: Как да прототипим взаимодействие на джаджи с рейтинг в принципа

С участието на Dark UI за аудио уеб

Тъмно дрибъл потребителски интерфейс

100daysUI

всеки ден ще проектирам нов интерфейс за по-малко от два часа и ще обясня идеята, която стои зад него, или ще ви науча на това, което научих, докато го проектирам и ще изброя проблемите, с които се сблъсках, за да може някой да сподели отговор.

Ден 2 - Тъмен звуков уеб плейър и рейтинг на джаджа с помощта на принципи драйвери

Идеята е проста, обичам Audible, ретините ми се изгарят от години на лек потребителски интерфейс и сърбях, за да опитам една от онези готини джаджи за рейтинг, базирани на драг ефект. Оттук и този дизайн

някои неща са просто по-лесни с код

Така че ето как да направите тази джаджа в Principle:

Част 1 - Проектиране и подготовка

1. в Sketch или Figma, проектирайте своята джаджа за рейтинг, като създадете всички необходими елементи:

  • 5 емоджи (или каквото ви харесва) за петте възможни оценки (прозяване, хм, добър, страхотен, влюбен) и ги поставете един върху друг.

→ Имената на поръчките и слоевете нямат значение в това взаимодействие, тъй като всички други емоджи ще бъдат скрити, но по един за всеки случай и ние ще работим вътре в едната дъска. Но ще бъде по-лесно да работите с организиран файл. Обаждането ти.

  • 5 текстови описания за всяко състояние. Също така поставени един върху друг.
  • рейтингова лента (фонов извит правоъгълник и 5 запълвания). Принципна ширина на везните от центъра, така че пълнежът ще продължи да скача наляво, докато движим дръжката. Просто създайте пет вместо това, това е по-лесно.
  • фон на полето за оценка.

2. Поставете го в първоначалното състояние (прозяване), като намалите непрозрачността на всички емоджии и текстови описания до 0%, с изключение на тези за това състояние.

3. Импортирайте таблото в Principle.

4. По принцип щракнете върху дръжката, която ще плъзнете, за да промените оценките, и я направете хоризонтално плъзгаща се.

проверете екрана по-долу, за да видите как да направите това.

Част 2 - Дизайн на взаимодействия

  1. като слоят на дръжката все още е избран, щракнете върху „Драйвери“ отгоре.

ще променим показаната илюстрация и текст за оценка въз основа на хоризонталното местоположение на дръжката.

2. изберете всички слоеве емоджи и текст, с изключение на прозяване + всички полета за оценка, освен червено, и създайте ключов кадър, където всички имат 0% непрозрачност.

2. Преместете дръжката по дължината на оранжевото пълнене и добавете ключ, когато:

  • непрозрачността на YAWN и неговия текст е 0%.
  • непрозрачността на състоянието на UMM и неговия текст е 100%.
  • непрозрачността на оранжевия пълнеж е 100%, а на червения - 0%.

ПРОБЛЕМ

ако опитате това, ще видите, че непрозрачността на първите две състояния ще се промени в същото време, докато премествате дръжката, създавайки този неелегантен резултат :

има точки, в които потребителят ще има състояние между тях

Това е така, защото е аналог: слоевете се анимират между две точки, докато стигнат до състоянието в следващия ключов кадър. Нуждаем се от цифров превключвател; начин за включване / изключване на определено състояние в точка на движение, така че потребителят да вижда само едно ясно състояние във всяка точка. Не съм сигурен, че няма по-добър начин, но по този начин реших този въпрос.

3. В точката ТРЯБВА преди ключов кадър, създайте друг ключов кадър със същата непрозрачност като предишния ключов кадър за въпросните слоеве емоджи и текст. Това казва принцип, че до този момент, променяйте само цвета и дължината на запълващия слой. Задръжте емоджи и текст.

4. Веднага след това създайте ключовия кадър със следващото състояние. Като този:

5. Повторете, че за всички следващи състояния и ще имате работеща джаджа като тази по-долу :)

Надявам се да ви е харесало този урок!

  1. Някакви коментари? неща, които знаете по-добър начин да направите?

2. В никакъв случай не съдя дизайнерите на Amazon, просто мечтая тук. Много уважение към тях и техните невероятни усилия!

3. Emjois са край кръговете.

4. Научете за драйверите на принципа тук.