01/01
Adobe Experience Designのヒント、ヒント、テクニック
アドビがエクスペリエンスデザインを公開プレビューとして導入したとき、同社は同時に2つの素晴らしい功績を達成しました。 第1に、新興試作ソフトウェア市場の席上にありました。 第二に、ユーザーは「進行中の作業」で遊ぶ機会を作り、ユーザーがその進歩に影響を与えるようにしています。 アプリケーションが数ヶ月間利用可能になったので、私は経験デザインのヒント、ヒント、テクニックを共有するのがよい時期だと思った。
しかし、まず、Prototyping Softwareが何を意味するのか疑問に思うかもしれません。 この分野の主なプレイヤーには、Proto.io、Principle、UXPin、 Atomic.io 、Experience Design、InVisionがあります。 静的なデザインが作成されているSketch 3、Photoshop、Illustratorなどのアプリケーションとは異なり、これらのグラフィカルエディタは、今日のモバイルおよびWebデザイン空間で一般的なインタラクティビティ、モーションなどの機能を導入しています。
モバイル性の高まりとユーザーにとってのレーザーのような必然性の高まりに伴い、デザイナーがいくつかのスケッチを振り、いくつかのコンプをまとめてプロジェクトをリリースするか、Webサーバーにアップロードするだけでは不十分です。 UI / UXのワークフローは根本的に変化しました。 ユーザ、スケッチ、ワイヤフレーム、モックアップ、プロトタイピングを識別することから、プロセスのあらゆるステップが、広範なユーザテストの対象となります。
プロジェクトが最終的な生産に移る前に、苦境点が発見され、修正されるのは、最終段階 - プロトタイピングです。 これはインタラクティビティ、モーション、画面遷移、画面上のすべての配置が非常に重要な場所です。 問題や問題は単に静的なイメージとして表示したり、口頭で説明することはできません。 結局のところ、これらの製品は実際の人間のためのものです。 そのすべてをコード化するのではなく、その目的のためだけに設計されたグラフィックスソフトウェアによって試作プロセスがますます行われています。 間違いを修正したり、画像を置き換えたり、テキストを書き換えたり、ボタンを移動させたりするのは、コードの書き換えやデバッグよりも視覚的なエディタを使う方が簡単です。
実際、このソフトウェアは、今日の「ラピッドプロトタイピング」設計および開発環境において重要な要素となっています。
それで、Experience Designで楽しく過ごしましょう。
02の07
Adobe Experience Designでシンプルな円でデスティネーションピンを作成する
XDのすばらしい点の1つは、ベクター描画ツールの使用です。 アイコンを見つけることができませんか？ 問題ない。 あなた自身のロール。 方法は次のとおりです。
- [ 楕円ツール]を選択し、Option / Alt-Shiftキーを押しながら円を描きます。
- 円を選択した状態で、 塗りつぶしの色をFF0000に設定し、境界線をプロパティで「なし」に設定します。
- 円をダブルクリックすると、アンカーポイントが表示されます。 下のアンカーを下にドラッグします。
- 選択したアンカーポイントをダブルクリックすると、曲線が線で置き換えられます。
- 白い塗りつぶしとストークのない小さな円を描く。 それを所定の位置に移動し、ピンと円を選択します。 [プロパティ]の上部にある[整列]パネルで[水平中央]ボタンをクリックすると、ピンが作成されます。
03/07
Adobe Experience Designで背景ぼかしを作成する
テキストやその他のコンテンツを背景イメージに重ねるのが一般的です。 ここで問題となるのは、イメージがその上にあるコンテンツを圧倒していることです。 この問題を解決する1つの方法は、背景イメージをぼかすことです。 Photoshopやその他の画像編集ソフトウェアで画像をぼかすことができますが、これはやや非効率です。特にXDがこのタスクを処理できるようになりました。 方法は次のとおりです。
- 新しいアートボードを作成し、背景イメージを追加します。
- 長方形ツールを選択し、画像上に長方形を描きます。 矩形を選択した状態で、塗りつぶしを白に、線をなしに設定します。
- 矩形を選択した状態で、プロパティパネルで背景ぼかしを選択します 。 3つのスライダは、ブラー量、明るさ、不透明度です。 彼らのやり方は次のとおりです：
- ぼかし量：シェイプの下の画像のぼかしを調整します。 最大値は+50です。
- 明るさ：画像のハイライトとシャドウを調整します。 最小値は-50、最大値は+50です。
- 不透明度：図形の透明度と図形の下の画像の可視性に影響します。 値の範囲は0％から100％です。
「物を切り替える」ことを本当にしたい場合は、シェイプの色を変更し、「不透明度」の値で再生して画像の「見た目」を変更します。
04/07
Adobe Experience Designでスクリムを作成する
共通の設計上の問題は、インタフェース要素要素が共通の色でなければならないが、背景画像または単色の上に置かれたときに失われることである。 解決策はスクリムです。 スクリムは、インターフェイス要素と背景の間に置かれたやや不透明な勾配です。 これはXDで簡単に達成できます。 方法は次のとおりです。
- アートボードをXDで作成し、画像を追加し、適切なUIキット（ファイル> UIキットを開く ...）からインターフェイス要素をコピーしてアートボードに貼り付けます。 上記の画像では、写真によってステータスバーとアプリケーションバーが見えなくなります。
- 長方形ツールを選択し、四角形を描きます。 プロパティパネルで塗りつぶしを選択し、カラーピッカーのポップアップからグラデーションを選択します。 グラデーションの色を白黒に設定します。 A値 - Opacity-を60％ 、 White A値を0％に設定します。
- 矩形を選択した状態で、 オブジェクト/配列/逆送りを選択します 。 インタフェース要素が画像上に見えるようになりました。
05/07
Adobe Experience Designでイメージアバターを作成する
一般的なデザインパターンは、人々がお互いに話し、スピーカーの画像が画面に表示されるチャットアプリにあります。 これらのアバターは、通常、マスクされた画像です。 XDでこれを達成するのは簡単ではありません。 方法は次のとおりです。
- あなたは、アートボード上でイメージとサークルまたは他の形から始めます。 あなたはどの色でも円を塗りつぶすことができます。 あなたがする必要はありませんストロークカラーを追加することです。 エフェクトを作成すると消えてしまうので、なぜ迷惑でしょうか。 サークルをストークする必要がある場合は、それをクリップボードにコピーします。
- サークルを画像に移動し、画像とサークルの両方を選択します。 ボットオブジェクトを選択した状態で、「 オブジェクト」>「シェイプでマスク」を選択します 。 マウスを離すと、アバターが作成されます。 そこからサイズを変更することができます。
- ストロークを追加する必要がある場合は、クリップボードにある円をアートボードに貼り付けます。 コピーを選択してプロパティの塗りつぶしをオフにし、線の色と幅を追加します。 それらを整列するには、両方のオブジェクトを選択し、プロパティパネルの上部にある整列オプションの中央整列ボタンをクリックします。
- マスク内で写真を移動する場合は、マスクをダブルクリックします。 これにより、画像とマスクの形状が表示されます。 画像をクリックして、その位置にドラッグします。 マウスを離すと、画像はマスク内の新しい位置に表示されます。
07年6月
Adobe Experience Design Artboardで遊ぶ
エクスペリエンスデザインのアートボードは、コンテンツを置くだけの目的ではありません。 それらも操作することができます。 あなたができることはいくつかあります：
- ランドスケープとポートレートバージョンのアートボードが必要な場合は、アートボードを複製し、選択した複製を使用して、プロパティパネルのランドスケープボタンをクリックします。 アートボードが横向きに変更されます。 Artboardにコンテンツがある場合、Artboardの名前をクリックすると、ArtboardプロパティがPropertiesパネルに表示されます。
- アートボードとそのプロジェクトのカスタムカラーを追加するには、アートボードを選択し、プロパティパネルの外観セクションで塗りつぶしカラーチップをクリックします。 色の16進数値を入力し、+記号をクリックします。 色はカスタムカラーとして追加されます。 他の場所でその色を適用するには、オブジェクトを選択し、カスタムカラーチップをクリックして色を適用します。
- アートボードを垂直スクロール可能にすることができます。 これを行うには、アートボードを選択し、プロパティパネルまたはアートボードの下をドラッグして高さを変更します。 プロパティパネルのScrollable領域で、ポップダウンメニューからverticalを選択し、画面のビューポートの高さを入力します。 その破線の青い線は、ビューポートの下端を示しています。 テストするには、再生ボタンをクリックしてスクロールしてください。 スクロールをオフにするには、スクロールポップアップで[なし]を選択します。
07/07
Adobe Experience DesignでモバイルUIキットを編集する
Experience Designには、iOS、Android、WindowsのUIを開発するためのUIキットが含まれています。 あなたが最初にそれらを開くとき、あなたはそれらがかなり適切に設定されていると思うかもしれません。 これらのキットのビットとピースは完全に編集可能ではありません。 Androidのワイヤフレームを構築してみましょう。
- まず、[Artboard]ツールを選択し、プロパティパネルの[Google]セクションで[Android Mobile]を選択します 。
- [ファイル]> [UIキットを開く]> [Googleマテリアル]を選択します 。 これにより、マテリアルデザインUIキットが開きます。 拡大鏡を選択し、 スクリーンガイドのアートボードを選択します。 私はインターフェイス要素を画面上に適切に配置するためのガイドを私に与えてくれるので、これで始めるのが好きです。 青色のバーの1つをクリックすると、ロックされていることがわかります。 それぞれのロックをクリックしてロックを解除します。 アートボードをマーキーし、クリップボードに選択をコピーします。 ドキュメントに戻り、スクリーンをアートボードに貼り付けます。
- アートボードの上部にあるAppバーを一度クリックします。 選択方法に注意してください。 オブジェクト/整列/前面に移動を選択します。 あなたの選択は画面ガイドの上になりました。 これにより、画面上の各要素を編集できることがわかります。
- 上部のステータスバーをダブルクリックし、プロパティパネルで塗りつぶしの色を455A64にします。 App Barをダブルクリックし、その塗りつぶしを607D8Bに設定します。 これにより、UIキットの各要素を編集して、プロジェクトのカラー仕様を満たすことができます。
- アイコンはどうですか？ 色を変更する方法は次のとおりです。 心臓をダブルクリックして選択します。 プロパティパネルを見ると、選択を編集できないと思われるかもしれません。 まあまあ。 もう一度心臓をダブルクリックしてください 。 プロパティが開き、塗りの色をFF0000に変更します。 残りのアイコンとテキストについては、このダブルダブルクリックトリックを繰り返します。