2

私はこの質問を完全に再質問するつもりです。だから、これは1つの大きな編集です

私は、WPF の専門家から、彼らの設計プロセスについてのちょっとしたフィードバックを探していました。たとえば、私がウェブサイトをデザインするとき、HTML、CSS、JavaScript を書く前に、Photoshop でインターフェースをデザインして、クライアントにサイトがどのように見えるかの証拠を示すことができるようにします。コードを書く前に、スタイル、配色、すべてではないにしてもほとんどのサードパーティのグラフィック (ストック写真) を選択します。クライアントがデザインを承認したら、それから構築を開始します。

WPF デスクトップ アプリケーションの設計に相当するものは何だろうと思っていました。インターフェイスのデザイン、配色の選択、ボタンのスタイルの選択、インターフェイスに使用する画像の選択の段階になると、最初にモックアップを作成するのが一般的ですか? 構築と同時に、すべてのグラフィックをオンザフライで作成するだけですか。それとも、単にテーマやスキンをオンラインで見つけてアプリに採用するのがより一般的ですか?

繰り返しますが、正解がないことはわかっています。皆さんが何をしているのかを聞きたかっただけです。

ありがとう

ps - Expression Blend 4 を使用しています。手書きの XAML は問題ありません (Blend でデザイン ビューを使用するだけではありません)。私の質問は、WPF アプリケーションを構築するためにどのツールを使用すべきかということではなく、設計プロセスに関するものです。

4

4 に答える 4

5

WPF アプリケーションの場合、Blend を使用してインターフェイスを設計するのが最善の方法です。Blend から VS に xaml を直接再利用でき、やり直す必要がないからです。ただし、Blend の専門知識を持つデザイナーはあまり多くありません (Photoshop などと比較して)。そのため、現在の WPF の世界では (Web のように) 設計プロセスはあまり踏襲されていません。

他のデザイン ツール (Photoshop など) の使用が得意で、それらを使用したい場合は、これらのツールを評価して、他の形式から XAML を作成できます。

Visio Export to XAML XAML を直接作成するための Visio 2007 へのアドイン。

XAML Tune – Convert SVG# to XAML SVG ファイルを XAML ファイルに変換できる無料のツールです。デザインとコードの統合を改善するために、XAML 変換を自動化します。

Adobe Illustrator XAMLへのエクスポート Adob​​e Illustrator で WPF および Silverlight 互換の XAML をエクスポートできる無料のプラグイン

Adobe Illustrator から XAML へのエクスポート C# スクリプト Adob​​e Illustrator アートワークを WPF/XAML 形式でエクスポートするためのスクリプト。スクリプトは、Illustrator CS2 COM タイプ ライブラリを使用して C#/.Net 2.0 で記述されています。Illustrator ではスクリプトとして扱われますが、スタンドアロンのアプリケーションでもあります。

XAML へのAdob​​e Fireworks エクスポートInfragistics Fireworks to XAML Exporter は、Adobe Fireworks で作成されたアートワークを Windows Presentation Foundation (WPF) で導入された新しい XAML 形式に簡単に変換できる Fireworks 拡張機能です。Fireworks で作成されたアートワークのライブラリをお持ちの方 (Infragistics Visual Design Group など) にとって、これは歓迎すべきニュースです。新しい WPF アプリケーションで以前のアートワーク、塗りつぶし、およびレイアウトを再利用できるようになりました。

Adobe Photoshop Export to XAML Photoshop .PSD ファイルを XAML に変換するためのシンプルで無料のオープン ソース ツール。また、SWF から XAML への限定的な変換もサポートしています。

Adobe Flash Export to XAML Adob​​e /Macromedia Flash ファイルを XAML に変換する無料ツール

SVG Export to XAML SVG ファイルを XAML ファイルに変換できるもう 1 つの無料ツールです。

から取得 - http://www.realsoftwaredevelopment.com/the-complete-list-of-xaml-tools/

于 2011-07-28T07:00:03.913 に答える
2

モックアップは良いアイデアというだけではありません。ある程度複雑なものがあり、顧客に満足してもらいたい場合は必須だと思います。どちらも成功している2つのアプローチを見てきました。

1) Sketchflow (現在は Expression Blend の一部) を使用してインタラクション デモを作成します。Blend のすべての機能を利用できますが、それはラピッド プロトタイピング環境にあります。その後、プロジェクト全体を構築し、レビューのために顧客に送信できます。これは、プロジェクトが非常にインタラクションが多い場合に適した方法です。 これらのビデオで、Sketchflow の短期集中コースを確認してください。

2) Photoshop カンプを取り、Blend に直接インポートします。akjoshi が言及したいくつかのツールとは比較していませんが、確かに機能します。重要なのは、各画面を細かく切り刻み、それらをインポートすることです。その後、各ピースが入ってきたら微調整したり、リソースに変換したりできます。

于 2011-07-28T13:48:18.227 に答える
2

ベクターアセットは後でインポートできるため、画面とアセットは Illustrator で作成することをお勧めします。ただし、奇跡ではありません。Blend は、視覚的な作業 (特にアニメーションと画面の動作) を行うためのツールであることは間違いありません。

これまでの私の方法は次のとおりです。

  • FreeMind (または必要に応じて Visio) の機能要件と情報アーキテクチャ
  • Illustrator でのワイヤーフレームとコンポジット
  • イラストレーターの「アセットボード」（インポートしたいものすべて：ブラシ（色とグラデーション）、アイコン、複雑な形状）
  • 画像ライブラリの作成 (Web と同様、PNG の設定あり)
  • リソース ディクショナリ (CSS など) の作成: スタイル (特にフォント用)、テンプレート、ブラシ、画像など。

また、Sketchflow を使用して Blend で概念実証または基本的なインタラクティブなモックアップをモックアップする可能性もあります。私はこれに慣れていませんが、便利だと聞きました。

もちろん、Illustrator は Photoshop に置き換えることができます。Illustrator は、XAML を作成するときに心に留めておくべきことに近いと思います。同等の XAML アセットとして使用できるグラフィック スタイルとシンボル ツールがあります。そうすることで、作品をどのように編成するかをよりよく理解できます。

于 2011-07-31T06:49:38.933 に答える
1

Microsoft Visio を使用してレイアウトを行い、Xaml コーディングを行う前に UI の承認を得ました。Photoshop が本当に得意なら、Photoshop よりもはるかに優れているとは思いません。Photoshop があまり得意ではない私たちのために、Visio には、物を整列させたり、カラー スタイルを適用したりできるツールがたくさんあります。 UI モックアップは一貫しているように見えました。

面白いことに、私は Xaml エディターの使用に長けているので、多くの場合、Visio を使用するよりも高速です。:-)

于 2011-07-28T05:21:22.907 に答える