どのプロトタイピングツールですか？
これは次の質問に深くリンクしています。
ただし、提案を「Webベースの」ツールに限定したくなかったため、過去にプロトタイピング、ワイヤーフレーミング、モックアップに次のツールを見つけて使用し、ある程度の成功を収めました。
- Balsamiq
- SketchFlow （Expression Blendの一部）
また、PhotoshopやIllustratorなどのグラフィックアプリケーションをタスクに使用することを選択しているデザイナーがいることも知っています。
これはコミュニティWikiの質問です。考えを投稿して、回答ごとに1つのパッケージにまとめてください。そうすることで、コミュニティがこれらのツールについてどのように感じているかを把握できます。
アニメーションとの詳細な相互作用を理解しようとしている場合は、プロトタイピングを少なくとも2つのスレッドに、3つを維持することが重要です。
スレッド1：フロー、関数、フォーム、およびデータ
- 紙から始める（実際には通常、他の人とのホワイトボード設計セッション）。画面フローに焦点を当て、次に、特に重要な画面の主要な機能と潜在的なレイアウトに焦点を当てます。少なくとも2つの異なるアイデアを試してください。
- Balsamiqの次のレベルの忠実度。機能の詳細を追加し、レイアウトを調整し、具体的で意味のあるサンプルデータを画面に追加します（実証可能なシナリオのコンテキストで）。
- 次の画面に移動するために、画面と特定の予期される対話を含むステップごとのシングルパスシナリオをつなぎ合わせて、ワークフロープロトタイプを作成します。 PowerPointを使用して、すべての画面モックアップを順番に配置する傾向があります。このプロトタイプを使用すると、実際のユーザーに 複数形ウォークスルー で早期のフィードバックを得ることができます。これは、概念、ワークフロー、機能要件、用語などを洗練するのに非常に効果的です。
- 早く、頻繁に、そしてすばやく反復します。
スレッド2：ビジュアルプログラムとスタイル
- スレッド1のいくつかの主要なモックアップを使用して、Photoshopまたは他の同様のメカニズムを使用して、それらを（カンプとして）ピクセルレベルの詳細で視覚化します。色、比率、視覚的な比喩、タイポグラフィなどを探索します。少なくとも3つのアイデアを生成します。
- ワークフローのプロトタイプとは関係なく、これらに関するフィードバックを入手してください。設定テスト、ABテスト、批評、 charettes などを使用します。
- 繰り返して改良します。
スレッド3：詳細な相互作用とアニメーション
- 単一の詳細な相互作用またはアニメーションシーケンスに焦点を当てると、HTML/CSS/JS、Flash、低レベルのプログラミング言語、UIコンポーネントフレームワーク/ライブラリなど、機能が最も優れたツールの機能プロトタイプが一緒にハッキングされます。少なくとも2つの代替相互作用。
- タイミングデータ収集を含む少数の短いユーザビリティテストを実行します。比較テストを行います。キーストローク/マウスクリック/ジェスチャーをカウントします。
- 繰り返して改良します。
要約すると、特定の目的のために特定の種類のプロトタイプを作成し、特定の質問に答えます。すべての状況で機能するタイプはありません。ワークフロー/関数のフィードバックループに審美的な懸念を持たせないでください。さまざまな種類の質問に適切で効果的な方法を使用します。 「小川を渡らないでください。」
基本的な設計の改善のほとんどすべてがスレッド1とスレッド2に由来することがわかりましたが、標準コントロールを超えている場合、またはドメインが新規/複雑/特定（例：ジェスチャの相互作用、多次元モデル）である場合は、スレッド3が必要です。操作、ファンシーな新しいOSのカスタムコントロール、ある次元で人間のパフォーマンスを最適化します）。
鉛筆 は、UIモックアップを作成するための優れたツールです。 Firefoxアドオン または スタンドアロンアプリケーション として利用できます。
フリーでオープンソースの場合、他のいくつかのツールよりも優れています。
「スケッチするかスケッチしないか」と呼ばれた非常に興味深い記事を少し前に読んだことがあります-見るべきです： スケッチの質問 創造性が必要なときはいつでも、ツールで考えを制限してはいけませんあなたが使う。後のクリーンアップのための私の個人的な選択は、私が扱っている領域に近いツールです。 HTML/CSSの場合、私は通常、単純なレイアウトから始めて、詳細を段階的に増やします。同じことが他の分野にも役立つかもしれません。低から高詳細までのプロトタイピング。だから私は推奨する特定のツールを持っていません...それは依存します。
だから私は推奨する特定のツールを持っていません...それは依存します。
私は最初の数回の改訂でBalsamiqを個人的に使用し、次に Blueprint のようなCSSフレームワークを使用してHTMLプロトタイプに直接進みます。
興味深いことに、このサイトでは Adobe Fireworks がほとんど愛されていません。
とりわけ、私は楽しんでいます
- 異なる州での建設
- マスターページ
- リンクやアイコンなどのHTMLオブジェクトには、エクスポートするマークアップを与えることができます（内部リンクと外部リンク、メタデータ、そのすべての良さ）
- 標準に準拠したCSSベースのレイアウトを実際のスタイルシートでエクスポートします
- ロゴなどのネイティブIllustratorとPhotoshopの統合.
私はクライアントにIAを売り込むのにBalsamiqが好きで、デザイナーが共同作業を行ったらナビゲート可能なプロトタイプをFireworksが好きです。 Fireworksで行われた作業は、HTMLとCSSに簡単にエクスポートされ、完全な静的サイトまたは動的サイトのテンプレートページ/テーマとして簡単に変換できます。
私は紙だけが最高のプロトタイプツールだと言います。はい、それは明白ですが、電子的に始めるよりはましです。
- 紙は、これがアイデアであり、多くの可能なものの1つであることをクライアントに伝えます。
- 紙は、クライアントがフォントや色、形、画像にとらわれることを許しません。 balsamiqがスケッチスタイルのワイヤフレームを選択した理由があります。
- リビジョンは速い
- 実際の筆跡を簡単に得ることができ、絵を描くことを恐れることはありません。
- 電子化する必要がある場合は、スキャンまたはFAXできます。
私はhtml関数プロトタイプの大ファンですが、紙はブレーンストーミングと quick hallway ui test。 への障壁を下げます。
紙のスケッチを誰かに紹介するのは簡単です：
"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"
スケッチから始めずにユーザーの検証を受けた場合は、銃をジャンプさせているだけであり、元に戻して後で繰り返すと、コストが高くなるだけです。
HTML/CSSでWeb UIモックアップを行うことを好みます。
ユーザーは無次元の（Photoshopを見る）体験ではなく実際の体験を得るので、機能プロトタイピングははるかに優れたソリューションです。
機能プロトタイプは使い捨て作業ではありません。
フィードバックループ中に機能プロトタイプを反復する方がはるかに高速です
Axure を使用します。
非常に高価ですが（1ライセンスあたり約600ドル）、驚くほどの柔軟性があり、ほとんどすべてをカスタマイズできます。
Webサイトではなくアプリケーションを作成する場合、独自のコントロール（またはそのモックアップ）、マスターなどを使用できることが不可欠です。
紙とHTMLが最適です。
紙の上の素早いスケッチ。次に、本物をHTMLで作成します。 StaticMatic リンクテキスト はプロトタイピングに最適です。
以前はAxureを使用していましたが、ワイヤーフレームは時間の無駄です。
Axureにも投票します。私たちのオフィスは、共同作業ツールを使用して、IAとグラフィックデザイナーの間で責任を分割しています。
オムニグラフではありませんが、ワイヤーフレーミングのオプションは十分すぎるほどです。このソフトウェアは優れたマスター機能を備えているため、プロトタイプの忠実度をすばやく上げることができます。
ダンが言ったように、それは完全にカスタマイズ可能であり、プロ仕様のドキュメントを作成します。
r。
Adobe InDesign。少し奇妙に見えるかもしれませんが、私が好きな機能があります：
- アドビスタイルのインターフェース。 Photoshopやその他のアドビ製品を使用したことがある場合、InDesignに切り替えるのは非常に簡単です。
- タイポグラフィ、テーブル、スタイル、グリッドなどを操作するための強力なツール
- 実際、ワイヤーフレームだけでなくグラフィックデザインも作成できます。
- クリック可能なPDFとしてワイヤーフレームをエクスポートできます
上記の質問のいくつかに同意しますが、追加の情報とヒントを追加したいと思います。私はほとんどすべてのプロジェクトをホワイトボード、さまざまな色のペン、そしていくつかのポストイットから始めます。アイデアを伝え、迅速なフィードバックを得る最も簡単な方法。プロジェクトの種類に応じて、 yEd というプログラムを使用してメインのフローチャートをスケッチしようとします。これは、アイデアを構成するための簡単な方法です。 Macが近くにある場合は、 OmniGraffle （フローチャート以上の優れたプログラム）を選択します。
私は Balsamiq 、 Sketch flow および Illustrator でプロトタイプを作成し続けて、さまざまな種類のローファイおよびハイファイプロトタイプを取得しています。
この情報に関しては、豊富なツールボックスから選択するのが適切だと思いました。プロジェクトの種類に応じて、さまざまなアプローチを取ることができることが重要です。
私はダニエル・ブライシュタイナーの動きを2番目に言います：「それは依存します」。
プロジェクトの90％については、私の紙への投票を検討してください。このスレッドには紙の正当性が豊富なので、繰り返しはしません。
デザインはプロジェクト間で同じになることは決してなく、確かにクライアント間でも異なります。 （私は漠然とした意味でデザインについて話します、つまり、デザイン、開発、プロトタイピング、ワイヤーフレーミング-正直に言って、それらはすべて徐々に融合しています）
したがって、他の10％のプロジェクトでは、プロトタイプツールはプロジェクトに依存します。長距離コラボレーションが必要な場合は、Axureが最適です。主にアドビを使用するクライアントの社内チームとの協力が必要な場合は、Fireworksが最適です。多くのツールがあります。残念ながら、当然のことながら、ツールは、解決するために構築された問題ほど迅速に適応することはできません。したがって、これらの製品の多くは互いに非常に似ていますが、まったく同じではありません。そして、どちらが仕事に最適かを評価するのは私たち次第です。
追加の考え：iPadは、対面型のクライアントコラボレーションと対面型のクライアントウォッチオーバーショルダーの境界を曖昧にするのに役立ち始めています。 Omnigraffle、SketchBook、TouchDraw、Draft、その他のiPadアプリは、コラボレーション体験を向上させる道を開いています。 （私は、クライアントが紙の上と同じようにiPadで快適に描画できるようにするという最終目標に向けて取り組んでいる改善について述べています。その利点は、クライアントが静的ページの代わりに機能的なプロトタイプを使用できるという利点です。最終的な目標は私の意見です。）
次の手順に従います...
1。プロトタイピング簡単なので Balsamiq Mockups を使用します。プロトタイピングの全体のポイントは、物事の基本的なレイアウトを理解することです。これはあなたが劇的な変更をしている段階です。幸いにもBalsamiqはそれがそうでないものであるように見せかけることはなく、非常に使いやすいままです。 Balsamiqを使用する方が、描画するよりも高速です。また、要素を消去して再描画するのではなく、画面上で要素をドラッグできるという利点があります。
2。デザインを完成させます。コードを記述する前にグラフィックを完成させるために、Photoshopを使用し、場合によっては少しイラストレーターを使用します。
ピクセルの完成度に夢中になる傾向があるため、Photoshopでデザインに大幅な変更を加えることはより困難です。そして、それがアプリケーションに組み込まれると、さらに難しくなります。これが私の進歩の理由であり、可能な限り最も簡単なツールから始める理由です... Balsamiq。
私はスケッチパッド/鉛筆ファーストで、 Balsamiq -secondです。その後、Photoshopを使用して、HTMLとCSSにジャンプするのに十分なところまで詳細を具体化します。
Balsamiq。これはデスクトップベースのソフトウェアにも適しており、習得が非常に簡単です。
また、チェックアウトする価値があります gomockingbird これはベータから出てきたばかりです
妻のインタラクティブエージェンシーは、次のような成功を収めています。
すぐに始められ、プロトタイプとワイヤーフレーム用の妥当な量の組み込みのコントロールと画面。
質問はプロトタイピングツールの必要性について言及していますが、プロトタイプがどれほど現実的になる必要があるかについては言及していません。大ざっぱなワイヤーフレームタイプのプロトタイプの場合、ペン/紙、Balsamiq、さらにはVisioも優れたツールであるというほとんどのコメントに同意します。ただし、より現実的な外観のプロトタイプが必要な場合、これらは機能しないため、AxureやAdobe Fireworks/Catalyst（iRiseの価格はかなり高額です）などを検討することをお勧めします。 。
Pencilも使用しますが、欠点もあります。
- テーブルデータの処理なし：テーブルをワイヤフレーム化したい場合、失われます。
- テキストボックスにワードラップはありません。 lorem ipsumを配置しようとすると、自分でラッピングを作成する必要があります。それは最低だ。
しかし、私はこのツールがとても好きです。
時々私はこのツールを使用します http://www.hotgloo.com/
あなたの質問は特にプロトタイピングに関するものだったので、スケッチなど、プロトタイピングの前に必要と思われるあらゆるステップを実行していると思います。
製品がWeb経由で配信される場合は、Web（HTML、CSS、JS）を使用してプロトタイプを作成します。結局、それはあなたが使うかもしれない他のものよりも速く、安く、より正確です。 Axureのようなツールは単純なものには適していますが、中程度に複雑なことを行うには急な学習曲線が必要です。その時点で、長期的にはより有益なWeb標準を学習できるようになると、専有ツールの学習に時間を費やしています。
クライアントが「完了」したと考えるクライアントについて懸念がある場合は、スタイリングを最後まで省略できますが、プロトタイプが「実際の」ものであるほど、簡単に評価できることがわかりました。
プロジェクトが何であるかによります。
プロトタイプを作成しているWebサイトが静的なコンテンツを含む数ページのみになる場合は、PhotoshopやFireworksなどのグラフィックエディターを使用することで問題ないでしょう。 「すべてのコストで」プロトタイピングから設計要素を除外するためのアドバイスは、ここでは適切ではない可能性があります。
ただし、多くのユースケースで大規模なアプリケーションを構築している範囲の反対側では、Jim Jarrettの回答のようなものをお勧めします。大規模なアプリは反復プロセスである（または少なくともそうでなければならない）と付け加えます。フェーズIのプロトタイプを作成してから、フェーズIIリリースのプロトタイプを再度作成します。プロトタイピングのこれらの各フェーズには、異なるレベルの詳細が必要になる場合があります。 。現在のフェーズのビルド/プロトタイプから作業したいと思うかもしれませんし、最初の原則に戻ってゼロから始める時かもしれません。
Axureは、優れたワイヤーフレーミング/プロトタイピング/仕様ツールです。これにより、作成しているものに集中でき、注釈、メモ、相互作用などを非常に簡単に指定できます。
プラスは、インタラクションを指定するとき、ワイヤフレームからプロトタイプを生成するとき、それらのインタラクションが実際に機能するウィジェットに変換されることです。 （AxureはHTMLプロトタイプを生成します）
画面デザイン（JPEGなど）を使用して画像をインポートし、「イメージマップ」ツールを使用して画像の領域をアクティブ化すると、効果的に忠実度の高いプロトタイプを作成できます。
Axureでは、変数に基づいてアクションを作成することもできます（変数を設定または読み取ることができます）。ウィジェットにイベントを生成させるという概念もあります。別のウィジェットにイベントをリッスンさせると、そのウィジェットは何らかの方法で応答できます。
私はどんどん進むことができます...マイナス面はコストが550ドルですが、時間の節約はそれだけの価値があります。メールによる顧客サポートは素晴らしいです。彼らは通常、数時間以内に私に返信します...時にはすぐに。
シンプルなワイヤーフレームであれば、Mockingbirdは問題ないことがわかりました。すぐにオムニグラフを離れる必要はありませんが、Webベースのツールとしてはかなり便利です http://gomockingbird.com/
App Sketcher （現在リリース候補版）を見て、ニーズに合っているかどうかを確認してください。これは、ワイヤーフレームおよびインタラクティブなWebアプリケーションプロトタイプを作成するための迅速なHTMLプロトタイピングツールです。 HTMLコンポーネント、jQuery UIコンポーネント、Webウィジェット（GoogleマップやYouTubeプレーヤーなど）を追加し、jQueryテーマとCSSプロパティでスタイルを設定できるデザインサーフェイスとして、埋め込みWebKitブラウザーを使用します。単純なアクションも定義できます。ユーザーは、デフォルトのブラウザーでプロトタイプを実行/テストし、設計に満足したら、HTML/CSS/JavaScriptソースをエクスポートできます。このツールは、Axureのような経験に向けられていますが、モックアップ/ワイヤーフレームがWebテクノロジーの開発段階で実現可能であることを保証するため、「ブラウザーで実行するためのブラウザーでの設計」に重点を置いています。
私はこのアプリケーションの開発者です。この恥知らずな自己宣伝について申し訳ありません。それにもかかわらず、私はそれが良いHTMLプロトタイピングツールであり、一見の価値があると思います。