生産的なXDプロトタイピング–AdobeXDコンポーネントのチュートリアル

Adobe XDのコンポーネントシステムは、デジタル製品のプロトタイプを作成するための強力な機能を設計者に提供します。 ただし、癖がないわけではなく、特別な注意が必要です。 スマートショートカットを利用し、ベストプラクティスに従うことで、設計者はXDプロトタイピングワークフローを合理化できます。

2017年後半に公式に公開されて以来、Adobe XDは、UXデザイナー向けの非常に競争力のあるワイヤーフレーミングおよびプロトタイピングツールになるために大きな進歩を遂げてきました。 特に、その新しいコンポーネントシステムは、設計者が実験できる相互作用のタイプを拡張します。 それでも、コンポーネントには癖や欠点がないわけではありません。 XDコンポーネントを使用する場合は、一連のワークフロープラクティスを採用して、忙しい作業を回避し、システムの可能性を最大限に活用することが役立ちます。

Adobe XDコンポーネントとは何ですか？

XDコンポーネントは、テキスト、図形、線などの要素の再利用可能なグループです。 コンポーネントには、アートボードに配置される親と「インスタンス」または子として機能する「メインコンポーネント」があります。 メインコンポーネントを変更すると、変更はそのすべてのインスタンスに伝播されます。

同様の目的を果たしていたXDの以前の「シンボル」システムを置き換えることで、コンポーネントは重要な差別化要因を提供します。 それらは、XDのプロトタイプモードで定義されたさまざまな入力に応答する複数の状態を持つことができます。 たとえば、ボタンはデフォルトの状態にすることができますが、ホバー状態またはクリック状態になると外観が変わります。 クリックすると音を再生したり、音声認識からの入力に応じて外観を変更したりすることもできます。

コンポーネントシステムは時間の節約になりますが、特別な注意が必要です。 システムの能力を活用するには、思慮深いアプローチと慎重に準備されたワークフローが必要です。

AdobeXDに精通していることをお勧めします

Adobe XDにかなり精通している設計者は、以下のヒントと提案から最大の利益を得ることができます。 有利なスタートを切るには、GoogleのマテリアルデザインのホームページからAdobe XDDesignKitをダウンロードしてください。 このキットには、実験および分解するためのAdobeXDコンポーネントセットが含まれています。

ヒント1–コンポーネントを作成する前にすべての状態を検討する

状態を含むコンポーネントを初めて作成する場合、設計者は、コンポーネントへの潜在的な変更が他のインスタンスにどのように影響するかを理解する必要があります。 説明のために、いくつかの状態を持つドロップダウンメニューを考えてみましょう。

• デフォルトの状態：メニューは折りたたまれています
• ホバー状態：カーソルを合わせると輪郭の色が変わる場合があります
• 展開されたクリック状態：ドロップダウンメニューオプションが表示されます

ドロップダウンの子インスタンスのデフォルト状態を編集する場合、これらの変更はホバー状態またはクリック状態に反映されません。 すべてのインスタンスのホバー状態またはクリック状態を更新するには、メインコンポーネントのデフォルト状態を変更する必要があります。

メインコンポーネントに飛び込んで反復を開始したくなるかもしれませんが、親コンポーネントと子コンポーネントの動作の違いが原因で予期しない問題が発生することがあります。

他の状態を追加したり、コンポーネントをインスタンス化する前に、メインコンポーネントのデフォルト状態で必要なすべてを検討して予測することをお勧めします。さらに、さまざまな状態を並べて配置することもできます。

設計者は、デフォルト状態に影響を与えることなく、メインコンポーネントまたは子インスタンスのデフォルト以外の状態で要素を追加および変更できることにも留意する必要がありますが、その逆は当てはまりません。

アドビの推奨事項：コンポーネントの状態にロック機能を与えることで、設計者はデフォルト以外の状態をそのまま維持し、メインコンポーネントのデフォルトの状態への変更が伝播しないようにすることができます。

ヒント2–作成時にコンポーネントに名前を付ける

コンポーネントを作成すると（要素を右クリックして、メニューで[コンポーネントの作成]を選択するか、Macの場合はCmd-K / PCの場合はCtrl-Kを押します）、左側のサイドバーの[アセット]パネルにコンポーネントを追加します。 XDは、コンポーネントに「コンポーネントXX」のデフォルト名を付けます（「XX」は数字です）。 あまり説明的ではないので、一意で検索可能な名前を付けるのが最善です。

なぜそれをするのですか？ コンポーネントリストがいっぱいになると、コンポーネントがすべて同じデフォルト名と無意味な番号で始まると扱いにくくなります。 「タイルビュー」オプションは役立ちますが、テキストラベルがないため、視覚的な識別が遅く、困難です。 サムネイルが小さい「リストビュー」では、名前が判読できないコンポーネント間の違いを識別しにくくなります。 コンポーネントは失われる可能性があり、失われる可能性があります。 名前を付けて検索可能にすると、後で時間を節約できます。

アドビへの推奨事項：コンポーネントを作成するときは、コンポーネントを自動選択し、[アセット]-> [コンポーネント]パネルでユーザーをフォーカスして、名前を変更するか、名前のポップアップを表示します。 環境設定でこの機能を切り替えることができるようにすることも役立ちます。

ヒント3–主要コンポーネントを整理する

コンポーネントを作成するときに、誤ってメインコンポーネントをアートボードに配置するのは簡単です。 XDはメインコンポーネントを見つけるためのツールを提供しますが（アセットパネルを検索するか、右クリックして子インスタンスから[メインコンポーネントの編集]を選択することにより）、メインコンポーネントがインスタンスであると信じながら、意図しない変更を加えるのは非常に簡単です。 そうすることで、複数のアートボードにまたがる多くの望ましくない変更が発生する可能性があります。

アートボードにコンポーネントインスタンスがほんの一握りしかない場合でも、アートボードのクローンが作成されると、物事はすぐに手に負えなくなる可能性があります。 メインコンポーネントへの不注意な変更は、回避できた可能性のあるクリーンアップ時間につながる可能性があります。

作成後すぐに、メインコンポーネントをデザインアートボードから遠ざける習慣を身に付けるのが最善です。 これを行う理想的な方法は、メインコンポーネントをXDファイルのペーストボードまたは明確にラベル付けされた専用のアートボードに配置することです。 そうすることで、後で物事がより効率的になります。

アドビへの推奨事項：メインコンポーネントに変更を加えるときにプロンプ​​トを検討して、変更が子インスタンスに伝播する可能性があることを設計者に警告します。

ヒント4–レイヤーパネルで整理する

アートボードでアイデアを試したり、コンポーネントのグループ化/グループ解除やコンポーネントの状態のプロパティの変更のフローに参加したりするのは簡単です。 左側のサイドバーを最小限に抑えて作業スペースを増やしたいという強い誘惑があるかもしれません。 ただし、コンポーネントの状態と遷移が、反復の急増で期待どおりに動作しない可能性は十分にあります。 これは、サブ要素（形状、ベクトル、テキストなど）の編成とグループ化が、トランジションが正しく機能するために必要なものからずれているために発生する可能性があります。

レイヤービューは、要素の階層と名前付けに100％の透明性を提供し、その気密な編成が不可欠です。 XDの強力な状態間の自動アニメーション遷移を使用するには、要素がコンポーネントのレイヤー階層内で同じ名前と位置を持っている必要があります。 それ以外の場合、トランジションはデフォルトで魅力的な自動アニメーションではなくフェードになります。

自動アニメーションが遷移するときに、プロパティの補間を抑制することが望ましい場合があります。 これを実現するために、設計者は別のコンポーネント状態またはアートボードの要素の名前を変更して、名前ベースのリンクを解除できます。

いずれの場合も、予期しない問題が発生した場合のトラブルシューティングにレイヤービューを使用できます。 これは、コンポーネントの状態間またはアートボード間の遷移であるかどうかにかかわらず、プロトタイピングの問題をデバッグする際の最初のステップである必要があります。

ヒント5–アルファフェードを使用して色を補間する

Auto-AnimateはXDへの優れた追加機能ですが、制限と特異性があります。 Auto-Animateを使用して、2つのコンポーネント状態またはアートボード間で要素の色を変更すると、これらの癖の1つが明らかになります。 2つの色の間のスムーズな補間の代わりに、テスト時に急激に変化します。

現在の回避策は少し厄介で、メインコンポーネントの状態をどのように編成するかについての影響があります。 これには、1つではなく異なる色の2つのオブジェクトを追加してから、両方の状態の2つのオブジェクトのアルファをクロスフェードしてスムーズな遷移を実現することが含まれます。 デフォルトのフェードトランジションは機能する場合がありますが、自動アニメーションで形状とサイズを補間する場合、フェードでは不十分な場合があります。

ヒント6–リピートグリッドでコンポーネントを活用する

リピートグリッドは、XDのもう1つの優れた時間節約機能であり、類似した要素の配列を簡単に整理および保守できます。 コンポーネントと同様に、リピートグリッドには階層関係があり、グリッドの左上隅の最初の要素は、「子」要素のプロパティを定義する「親」です。 （これには例外があります。ビットマップは、テキスト文字列と同様に子要素に対して一意である可能性がありますが、テキストプロパティは一意ではありません。）

ただし、リピートグリッド内でコンポーネントを使用すると、状況が変わります。

リピートグリッドを通常どおり操作する場合、親に加えられた変更はすぐに子に反映されます。 ただし、メインコンポーネントの変更は、ローカルプロパティのオーバーライドがない場合にのみ、リピートグリッドの子に伝播されます。 つまり、グリッド内のコンポーネントのプロパティを変更すると、メインコンポーネントから伝播する変更からコンポーネントが「ロック」されます。

リピートグリッドのコンポーネントでもある親からの変更を伝播するには、グリッドのサイズを親のみに縮小します。 これにより、子が削除されます。 次に、ハンドルをドラッグして目的の寸法に戻し、子を更新します。

設計者がコンポーネントとリピートグリッドの特性を回避できるようになると、それらを組み合わせることが強力になります。

ヒント7–時間ベースのコンポーネントの状態遷移が存在しないと仮定する（今のところ）

時間ベースの遅延（入力に基づかない）を使用してアートボード間にトランジションを適用する場合、コンポーネントの状態間で同じことが利用可能であると想定するのが自然です。 残念ながら、そうではありません。 すべてのコンポーネントベースの状態変更は、時間ではなく、プロトタイプモードでのユーザー入力または対話に基づく必要があります。

アドビへの推奨事項：コンポーネントに時間ベースの遷移オプションを追加して、ユーザー入力に関係なくコンポーネントの状態をアニメーション化できるようにします。

ヒント8–主要コンポーネント階層のクローンを作成するときは十分に注意してください

この最後のヒントは、XD設計者が頻繁に遭遇することはないかもしれませんが、注意する必要があるエッジケースです。

メインコンポーネントが、プロパティを継承する子の「1対多」の品質を保持しながら、既存の子コンポーネントには影響を与えないバリエーションを必要とするシナリオを想定します。 新しい親コンポーネント階層を作成するには、インスタンス化されたコンポーネントをグループ化解除して、最初から再構築する必要があります。 コンポーネントのグループ化を解除すると、プロトタイプモードで設定されたすべての状態と遷移プロパティも失われます。 回避策は次のとおりです。

• コンポーネント内の状態ごとに、コンポーネントのインスタンスのクローンを作成します。
• 各インスタンスの状態を異なる状態に設定します。
• 各コンポーネントインスタンスを確認してグループ化を解除します。
• 各コンポーネントインスタンスに必要な調整と変更を加え始めます。
• 新しいメインコンポーネントを再作成します。
• プロトタイプモードに入り、以前に設定されたインタラクションとトランジションタイプを再作成します。

アドビへの推奨事項：アセットパネルでメインコンポーネントを右クリックするときは、「複製」メニューオプションを提供します。

Adobe XDコンポーネントを使用したプロトタイピング：成功へのポイント

Adobe XDは、過去数年間で機能とユーティリティを大幅に改善しました。 これは、Sketchやその他の確立されたプロトタイピングツールに代わる、価値のある競争力のあるツールに成長しました。 ツールがデビューしてからどのように進化してきたかに基づいて、さらに多くの改善が行われる可能性があります。

特に、Adobe XDコンポーネントシステムは、設計者が作成できるインタラクションのタイプを改善および拡張する優れた可能性を秘めています。

覚えておくべき重要なポイントは次のとおりです。

• メインコンポーネントと子インスタンスの間で変更がどのように伝播するかを理解します。
• コンポーネントが、自動アニメーションやリピートグリッドなどのAdobeXDの他の機能とどのように相互作用するかに注意してください。
• コンポーネントに名前を付けたり、XDファイルに個別のメインコンポーネントペーストボード領域を維持したりするなど、一貫したワークフロー手法を採用して時間を節約するように努めてください。

統制のとれたワークフローを維持しながら、Adobe XDコンポーネントを操作する際の特異性に注意することで、設計の生産性を最大化できます。 これにより、不要なクリーンアップとメンテナンスが回避され、XD設計者はデジタル製品のプロトタイピングを効率的に行うことができます。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• Adobe XD vs Sketch – Showdown 2020
• 正確なデザイン–AdobeXDレビュー
• マルチモーダルデザインの調査–AdobeXDチュートリアル
• UXの神話–プロトタイピング、ユーザーテスト、およびUXの成果物
• UXデザインプロセスを完璧にする–プロトタイプデザインのガイド