アートボード上のコンテンツの作成

  • [アーティクル]

新しい画面を [SketchFlow マップ] パネルのプロトタイプ プロジェクトに追加し、[デザイン] ウィンドウのアートボードにコンテンツを作成することができます。

個々の画面にフォーカスがある場合は、Expression Blend で使用可能なベクター グラフィックス描画ツールで描画したり、必要に応じてレイヤー、ベクター マスク、テキストを維持したまま Photoshop のファイルをインポートすることができます。ユーザー インターフェイス (UI) コントロール の画像をプロトタイプの一部として使用でき、オンザフライで再利用可能なコンポーネントを作成できます。また、Windows Presentation Foundation (WPF) および Microsoft Silverlight で利用可能な実際の UI コントロールのすべてを使用することができます。

Ee341385.c5da9dd8-4356-4803-aab0-64635bf9866b(ja-jp,Expression.40).png

Ee341385.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.40).png

アートボード
Ee341385.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.40).png

SketchFlow マップ パネル

新しい接続されていない画面の作成

  1. [SketchFlow マップ] パネル内の任意の場所を右クリックし、次のいずれかをクリックします。

    • 画面の作成

    • コンポーネント画面の作成

    Noteメモ :

    新しい画面を既存の画面に接続するには、新しい画面をクリックし、次に新しい画面を接続したい画面にドラッグします。

  2. 新しい画面に描画するには、[SketchFlow マップ] パネルのノードをダブルクリックして、関連付けられているドキュメント タブを選択します。

新しい画面の作成および [SketchFlow マップ] パネルでの作業の詳細については、「アプリケーション フローの作成 」を参照してください。

オブジェクト

Expression Blend では、オブジェクトは、アートボードに配置可能なすべての要素です。たとえば、アートボードに追加したビジュアル要素はアプリケーションのオブジェクトになります。

オブジェクトをアートボードに追加するには、[ツール] パネルまたは [アセット] パネルでツールを選択するか、[アセット] パネルでスタイル コントロールまたはカスタム コントロールを選択します。あるいは、[リソース] パネルからスタイル コントロールまたはリソースをアートボード上の既存のオブジェクトにドラッグして、リソースをオブジェクトのプロパティの 1 つに適用することもできます。さらに、画像、サウンド ファイル、ビデオ ファイル、およびその他のメディアを直接 Windows Explorer から Expression Blend にドラッグしたり、その他のアプリケーションから画像をコピーし、それらを直接アートボードに貼り付けることができます。

オブジェクトの使用の詳細については、「オブジェクトおよびコントロールの使用」を参照してください。

コントロール

コントロールは、ユーザー操作または入力を有効にするオブジェクトの型です。Expression Blend には、WPF および Silverlight プロトタイプのデザインに使用できる充実した一連のコントロールが含まれています。

洗練された UI 要素は、アプリケーションの外観のため、インタラクティブなデザインのレビューから注意をそらす可能性があるので、SketchFlow ではすべての機能を維持する一方、標準コントロールに手書き風の外観を与える一連のスタイルを備えています。[アセット] パネルで、[スタイル] をクリックします。

Expression Blend でのコントロールの使用の詳細については、インタラクティブ コントロールの選択と使用 を参照してください。

SketchFlow アニメーション

SketchFlow アニメーションは SketchFlow プロトタイプで使用でき、レビュー担当者が UI の特定部分の異なる状態を視覚化するのに役立ちます。SketchFlow アニメーションを使用して、画面の操作にどのように対応するかを示すことができます。また、それぞれの画面に対する様々なデザイン代替案の保持にも使用できます。

SketchFlow アニメーションの使用の詳細については、「インタラクティビティの追加」を参照してください。

ビヘイビアー

Expression Blend にはビヘイビアーがあり、これはコードを習得したり記述しなくても、実稼動レベルの品質のインタラクティビティをアートボード上のデザイン要素へ簡単に適用できる再利用可能なコードのブロックです。Expression Blend にはいくつかのあらかじめパッケージされたビヘイビアーがありますが、カスタム ビヘイビアーを追加することもできます。開発者は、デザイナーが簡単にアートボード上のデザイン要素に適用できるカスタム ビヘイビアーを提供することができます。

Expression Blend でのビヘイビアーの使用の詳細については、インタラクティビティの追加 を参照してください。

ズームと手のひらツール

マウス ホイールつきのマウスの場合、CTRL キーを押してマウス ホイールを回転させるとズーム インおよびズーム アウトできます。

ドラッグ中にスペース キーを押すと、アートボードおよびアートボードに含まれている要素をドラッグすることもできます。さらに、ダイアグラムのドラッグ中にスペース キーを押すと、アプリケーション フロー ダイアグラムをウィンドウの任意の場所へドラッグすることができます。

コメント

アートボード上でのオブジェクトおよびコントロールの作成および修正に加え、[コメント] を使用してコメントおよびメモをアートボード上に残すことができます。コメントは直接画面上のオブジェクトに添付することもできます。デザイン タイムのコメントは、Microsoft Visual Studio の SketchFlow プロジェクトを開いた際に表示されます。

詳細については、「ドキュメントにコメントを付ける」を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.