Adobe XD CCを使って設定のオン/オフスイッチのUIをデザインすることで、アプリのユーザーに明瞭な視覚的フィードバックを提供します。
create-ui-switch_1000x560

練習用ファイルをダウンロードできるほか、同じような手順で独自のスイッチをデザインすることもできます。 

基本的なシェイプを組み合わせて、UIスイッチのオン/オフの状態を作成します。スイッチは、角が丸い長方形と円から構成されます。まず、長方形の前面の左側に円を描き、オフの状態をデザインします。その後、2つのシェイプをコピーして円を右側に移動させ、これをオンの状態とします。

create-ui-switch_step1

アピアランスパネルでいろいろなカラー、シェイプ、シャドウを試し、最適なスタイルを作成します。スイッチ要素にテキストを直接追加して、状態を示すラベルにすることもできます。

create-ui-switch_step2

このアプリのデザインでは、このスイッチ要素が気に入りました。

create-ui-switch_step3

それぞれのスイッチのコンポーネントを組み合わせてグループ化し、アートボードデザインにドロップします。プロトタイプモードに切り替えて、オフスイッチとオンアートボードを結びつけ、その逆も結び付けます。スムーズなユーザーエクスペリエンスを実現するため、スクロール時に位置を固定してください。

create-ui-switch_step4

このように、アプリのユーザー設定のUIスイッチを作成できます。

11/12/2018

Adobe Stock提供元:Farknot Architect

このページは役に立ちましたか。