Adobe XDを使って設定のオン/オフスイッチのUIをデザインすることで、アプリのユーザーに明瞭な視覚的フィードバックを提供します。
スマートフォンを持つ手のクローズアップ。スマートフォンの画面には「Shipping updates(配送状況のお知らせ)」フィールドが表示され、UIスイッチは「オフ」に設定されている

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

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

ツールバーに正方形と円がハイライトされた状態で表示されている。カンバスに描かれた2つの楕円のそれぞれの内部には円が描かれており、アピアランスパネルのの半径は18に設定されている

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

4種類のスタイルのUIスイッチコントロール。それぞれオン/オフの切り替えが可能で、切り替えをテキストラベルで表すタイプが2種類、異なる色で表すタイプが2種類描かれている

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

アプリの画面が並べて表示されている。左側の画面ではUIスイッチが「オフ」でグレーに、右側の画面ではUIスイッチが「オン」で黄色になっている

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

アプリの画面が並べて表示されている。グレーのUIスイッチが選択され、アニメーションのプロパティで「トランジション」が「ディゾルブ」に、「イージング」が「イーズアウト」に設定されている

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

09/02/2020

Adobe Stock提供元:Farknot Architect

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