Adobe XD CCで、アプリの全体的な構造とインタラクションの定義に使用するラフなデザインを作成します。その後、デザインに調整を加えて高精度のプロトタイプに変換します。

ラフなデザインから開始

アプリの構造とフローを決めてから、詳細なデザインの仕上げに移行します。アートボード、プレースホルダーテキスト、基本的なシェイプを追加してデザインを計画し、リピートグリッドを使用して、テキストとオブジェクトのコピーを縦横に配置します。デザイン内で繰り返し使用するアイテムのプレースホルダーとしてシンボルを設定します。Adobe XDワイヤーフレームキットのテンプレートとデザイン要素を活用することで、作業をすぐに開始できます。

アプリのフローを計画

カンバスを使って様々なデザインコンセプトを試してからアートボードを更新する方法を説明します。リピートグリッドを様々な方法で使えば、デザインプロセスを高速化できます。リピートグリッドのデザイン要素を変更して、他のセルの要素を同時に更新します。UIとワイヤーフレームキットを開き、デザイン要素をドキュメントにコピー&ペーストします。アセットパネルを使い、カラー、文字スタイルなどのドキュメントアセットを効率的に管理します。

アイコンの描画とグラフィックの操作

長方形、楕円形、線、ペンツールを使用して、シンプルなアイコンを作成します。ブール演算によるシェイプの合体、型抜き、交差、中マドを使用してアプリのグラフィックを調整します。Adobe Photoshop CCとIllustrator CCで作成したアイコンとイラストの読み込み、デザインを調整しながらシンボルとリピートグリッドを応用しましょう。

高精度のデザインの作成

アートボードとリピートグリッドに最終画像とテキストを追加し、アプリのデザインを詳細に調整します。シンボルを追加、シンボルの上書きし、Creative Cloud ライブラリとアセットパネルの画像、カラー、文字スタイルの使用します。

10/10/2017
このページは役に立ちましたか。
はい
いいえ