100DaysUI - 002: прататып узаемадзеяння віджэтаў з рэйтынгамі ў прынцыпе

Дзякуючы цёмны карыстацкі інтэрфейс для гукавой сеткі

100daysUI

кожны дзень я распрацую новы інтэрфейс менш чым за дзве гадзіны і растлумачу ідэю, якая ляжыць за ім, альбо навучу вас таму, пра што я даведаўся пры яго распрацоўцы, і пералічу праблемы, з якімі я сутыкнуўся, каб, магчыма, хтосьці мог падзяліцца адказам.

Дзень 2 - цёмны гукавы вэб-плэер і рэйтынг-віджэт з выкарыстаннем прынцыпаў драйвераў

Ідэя простая: я люблю Audible, мае сятчаткі спальваюцца ад шматгадовага інтэлектуальнага карыстацкага інтэрфейсу, і я адчуваю сверб, каб паспрабаваць адзін з гэтых класных віджэтаў на базе эфекту перацягвання. Адсюль такая канструкцыя

Такім чынам, вось як зрабіць гэты віджэт у Principle:

Частка 1 - Дызайн і падрыхтоўка

1. Стварыце віджэт рэйтынга на эскізе ці Фігме, стварыўшы ўсе неабходныя элементы:

• 5 смайлаў (ці што заўгодна) для пяці магчымых рэйтынгаў (пазяхаць, ммм, добра, выдатна, закахана) і размясціце іх адзін на аднаго.

→ Імёны заказаў і слаёў у гэтым узаемадзеянні не маюць значэння, таму што ўсе іншыя эмодзюжы будуць схаваныя, але па адным у кожным канкрэтным выпадку, і мы будзем працаваць у адным артбордзе. Але працаваць з арганізаваным файлам будзе прасцей. Ваш званок.

• 5 тэкставых апісанняў для кожнага стану. Таксама кладуць адзін на аднаго.
• рэйтынгавая радок (выгнуты прастакутнік фону і 5 запаўненняў). Прынцып шырыні шалі ад цэнтра, так што запаўненне будзе працягваць скакаць налева, калі мы перамяшчаем ручку. Проста стварыце пяць замест гэтага, прасцей.
• фон ацэнкі.

2. Перакладзеце яго ў зыходны стан (пазяханне), знізіўшы непразрыстасць усіх апісанняў эмоцый і тэксту да 0%, акрамя тых, якія знаходзяцца ў гэтым стане.

3. Імпартуйце артборд у прынцып.

4. У прынцыпе, націсніце на ручку, якую вы будзеце перацягваць, каб змяніць рэйтынгі, і зрабіце яе перацягваннем па гарызанталі.

праверце скрыншот ніжэй, каб даведацца, як гэта зрабіць.

Частка 2 - Дызайн узаемадзеяння

1. выбіраючы пласт ручкі, націсніце "Драйверы" зверху.

мы збіраемся змяніць адлюстроўваную рэйтынгавую ілюстрацыю і тэкст у залежнасці ад гарызантальнага размяшчэння ручкі.

2. выберыце ўсе пласты смайлаў і тэкстаў, акрамя пазяхання + усе запаўненні радка, акрамя чырвонага, і стварыце ключавы кадр, дзе ўсе яны маюць 0% непразрыстасць.

2. Перамесціце ручку па даўжыні аранжавага колеру і дадайце ключ, дзе:

• непразрыстасць YAWN і яго тэкст складае 0%.
• непразрыстасць стану UMM і яго тэксту складае 100%.
• непразрыстасць памяранцавага колеру складае 100%, а чырвонага - 0%.

ЗАДАЧА

калі вы паспрабуеце гэта, вы ўбачыце, што непразрыстасць першых двух станаў зменіцца ў той жа час, калі вы перамесціце ручку, ствараючы гэты неэлегантны вынік :

Гэта таму, што гэта аналаг: пласты ажыўляюцца паміж двума кропкамі, пакуль яны не дасягнуць стану ў наступным ключавым кадры. Нам патрэбен лічбавы камутатар; спосаб уключэння / выключэння пэўнага стану ў кропцы руху, каб карыстальнік бачыў толькі адно выразнае стан у кожнай кропцы. Я не ўпэўнены, што няма лепшага шляху, але я вырашыў гэтае пытанне.

3. У тым самым ПАСТАЎЛЕННЕ перад ключавым кадрам стварыце яшчэ адзін кадр з той жа непразрыстасцю, што і папярэдні ключавы кадр для размоваў і тэкставых слаёў. Гэта кажа прынцыпе, што да гэтага моманту змяняецца толькі колер і даўжыня пласта залівання. Утрымлівайце смайлікі і тэкст.

4. Адразу пасля гэтага стварыце ключавы кадр з наступным станам. Прыкладна так:

5. Паўтарыце, што для ўсіх наступных дзяржаў і ў вас будзе працаваць віджэт, як паказаны ніжэй :)

Спадзяюся, вам спадабаўся гэты падручнік!

1. Якія-небудзь каментары? рэчы, якія вы ведаеце, лепш зрабіць?

2. Я ні ў якім разе не суджу дызайнераў Amazon, я проста мару тут. Шмат павагі да іх і іх дзіўных намаганняў!

3. Emjois знаходзяцца ў Круглыкі.

4. Даведайцеся пра драйверы прынцыпу тут.