100DaysUI — 002:原理でレーティングウィジェットインタラクションをプロトタイプ化する方法

Audible WebにDark UIを搭載

ダークドリブルUI

100daysUI

毎日2時間以内に新しいインターフェイスを設計し、その背後にある考え方を説明するか、または設計中に学んだことを教え、直面している問題をリストして、誰かが答えを共有できるようにします。

2日目-プリンシパルドライバーを使用したDark Audible Webプレーヤーとレーティングウィジェット

アイデアはシンプルで、私はAudibleが大好きです。網膜は何年もの軽いUIから焼き尽くされており、ドラッグエフェクトに基づいたクールな評価ウィジェットの1つを試してみたくなりました。 したがって、このデザイン

いくつかのことはコードで簡単です

だから、ここに原理でこのウィジェットを作る方法があります:

パート1 —設計と準備

1. SketchまたはFigmaで、必要な要素をすべて作成して、評価ウィジェットを設計します。

  • 5つの可能な評価(あくび、うーん、良い、素晴らしい、恋愛)のための5つの絵文字(またはあなたが好きなもの)とそれらを互いの上に置きます。

→他のすべての絵文字は非表示になるため、この相互作用では順序とレイヤーの名前は重要ではありませんが、それぞれ1つずつ、1つのアートボード内で作業します。 ただし、整理されたファイルで作業する方が簡単です。 あなたの電話。

  • 各州の5つのテキストの説明。 また、互いの上に配置されます。
  • 評価バー(背景の湾曲した長方形と5つの塗りつぶし)。 原則は幅を中央からスケーリングするため、ハンドルを動かすと塗りつぶしが左にジャンプし続けます。 代わりに5つ作成するだけで簡単です。
  • 評価ボックスの背景。

2.すべての絵文字とテキストの説明の不透明度をその状態のものを除いて0%に下げて、初期状態(あくび)にします。

3.アートボードを原則にインポートします。

4.原則として、ドラッグするハンドルをクリックして評価を変更し、水平方向にドラッグできるようにします。

以下のスクリーンショットを確認して、その方法を確認してください。

パート2 —インタラクションデザイン

  1. ハンドルレイヤーが選択された状態で、上部の[ドライバー]をクリックします。

ハンドルの水平位置に基づいて、表示される定格のイラストとテキストを変更します。

2.あくび以外のすべての絵文字とテキストレイヤー+赤以外のすべての評価バーの塗りつぶしを選択し、不透明度がすべて0%のキーフレームを作成します。

2.ハンドルをオレンジ色の塗りつぶしの長さに移動し、キーにキーフレームを追加します。

  • ヨーンとそのテキストの不透明度は0%です。
  • UMM状態とそのテキストの不透明度は100%です。
  • オレンジの塗りつぶしの不透明度は100%で、赤の塗りつぶしは0%です。

問題

これを試してみると、ハンドルを動かしながら最初の2つの状態の不透明度が同時に変化し、このエレガントな結果が作成されていることがわかります:

ユーザーが中間の状態になるポイントがあります

これは類似しているためです。次のキーフレームの状態に達するまで、レイヤーは2つのポイント間でアニメーション化されます。 デジタルスイッチが必要です。 ユーザーが各ポイントで1つの明確な状態のみを確認できるように、動作のポイントで特定の状態をオン/オフに切り替える方法。 より良い方法がないかどうかはわかりませんが、これが私がこの問題を解決した方法です。

3.キーフレームの直前に、問題の絵文字とテキストレイヤーの前のキーフレームと同じ不透明度で別のキーフレームを作成します。 これは、この時点まで、塗りつぶしレイヤーの色と長さのみを変更するという原則を示しています。 絵文字とテキストを押し続けます。

4.その直後に、次の状態のキーフレームを作成します。 このような:

5.次のすべての状態で同じことを繰り返すと、次のようなウィジェットが機能します。

このチュートリアルをお楽しみいただけましたでしょうか。

  1. コメントは? あなたが行うより良い方法を知っていること?

2.私はアマゾンのデザイナーを決して判断しているのではなく、ただここで空想しているだけです。 彼らへの敬意と彼らの驚くべき努力がたくさん!

3. EmjoisはRoundiconsによるものです。

4.原則の推進要因については、こちらをご覧ください。