顧客とのGUIのプロトタイプ

Question

初期のGUI機能をプロトタイプ化するときは、ペン/紙の図面を使用するか、ツールを使用して何かを模倣して表示する方が良いでしょうか？

ツールを生成した設計に対する議論は、GUI全体のより高いレベルの機能ビューを取るのではなく、モックアップの低レベルの特質に集中することがあるということです。

Answer 1

まず、紙や紙のようなモックアップで始めてください。バックエンドが完全に中空である場合、完全性の印象を与えるという罠に陥ることは望ましくありません。

洗練されたプロトタイプまたはピクセル完全な例は、デザインに重点を置いています。明らかなスケッチでは、色、写真、および他の筆跡の問題ではなく、望ましい機能やコンテンツについて議論するよりよい場面があります。プロジェクトの後半でこの議論の時間があります。

ジェフは彼のコーディングホラー記事でUI-First Software Development

クリック紙プロトタイピングを説明し、「ビデオを見るの！」 から興味深いアイデアを見るにはtwitter.comにリンクしてください。

Answer 2

Paper Prototypingと呼ばれる本があり、ペンと紙の図や詳細を得ることができます。私はそれには多くの利点があると思います。特に、非常に早い段階で（そして簡単に）、最終結果が何の努力を払っても変更できないようにしてから、右足でスタートすることができます。

Answer 3

基本的なペーパーバージョンは、最初のモックアップに行く方法です。 「実際の」モックアップを行うと、機能していないモックアップであると顧客に説明しても、機能しないときは混乱してしまうのは私の経験でした。

結論：可能な限り単純にしてください。それが紙の上にある場合、顧客がそれを実際の製品と混同する方法はありません。

Answer 4

最初の草稿では、グラフ紙（グリッドが印刷されたもの）と鉛筆を使用することをお勧めします。グラフ用紙は、比率を維持するのに役立ちます。クライアントと私が結論に達すると、私は通常、鉛筆が退色しやすいので、ペンで図面を記入します。

実際にデジタルプロトタイプを作成するときは、手書きのものをスキャンして、それを背景テンプレートとして使用します。私のためにかなりうまくいくと思われます。

Answer 5

Java用"Napkin Look & Feel"はプロトタイプ作成には本当にクールです。ナップキンに描かれたような、実際に機能してクリック可能なアプリ。このスクリーンショットをチェックアウト：

真剣

、それはどのようにクールですか！

Answer 6

Windowsアプリケーションを使用して、顧客にアプリケーションをプロトタイプ作成しました（最終インターフェイスはウェブサイトに統合する必要があります）。

最初の人は、それが最後のバージョンであると思って、私が使った言葉（用語やもの）にコントロールが表示されてから非常に重い批判をし始め、機能自体

私は、モック（そして最終的なアプリケーションではない）であることはすべての入力を歓迎していますが、最初に機能に集中しなければならないと話すまで、用語の問題と同様に感じる。

私はいつもプロトタイプとモックアップを恐れています...おそらく、私はちょうどvisioで作られた何かを彼らに与えたはずです。

Answer 7

ペーパー/ホワイトボード/ホワイトの壁から始めることが最善だと思います。

あなたが基本的な構造を持っていたら、ワイヤーフレームステンシル

• （Download a Stencil Kit）
• （Visio Stencils for Information Architects）とVisioのためにそれを移動することができます。

また、タブレットPCまたはWacomタブレットでデニム（An Informal Tool For Early Stage Web Site and UI Design）を使用してGUIをデザインし、HTML Webサイトとして実行することもできます。

Answer 8

あなたはクライアントと一緒に座って、Mockupscreensのようなツールを使って対話的にUIを開発することをお勧めします。 Napkin LAFのメリットは、コーディングが必要ないこと、または実際に開発ツールが必要ないことです。

Answer 9

WireframeSketcherは、デスクトップ、Webおよびモバイルアプリケーション用のワイヤフレーム、モックアップおよびプロトタイプを素早く作成するのに役立つツールです。これは、スタンドアロンのバージョンと、プラグイン Eclipse IDEの両方として提供されます。それは、ストーリーボード、コンポーネント、リンクとベクトルPDFのエクスポートのようないくつかの特徴があります。サポートされるIDEには、Aptana、Flash Builder、Zend Studio、およびRational Application Developerがあります。

Sample WireframeSketcher mockup http://wireframesketcher.com/samples/Website.png

Answer 10

あなたはForeUIを試してみることができ、それは異なるスタイルでプロトタイピングを可能にし、しかも、それはインタラクティブなプロトタイプを作成し、ブラウザで実行することができます。

Answer 11

Balsamiq

をチェックアウトそれは非常によくナプキンビュー「これはFUNCTIONAL APPされていない」と使いやすいん。

フル機能のものをお持ちであれば、オンラインで試すことができますし、追加ボーナスとして、クライアントにXMLを電子メールで送信し、ライセンスを必要とせずにそれを微調整して返信することができます。そしてGmailアカウントをお持ちの場合 - - 何も登録は必要ありませんあなたはそれは無料ですdraft-it

を試すことができます非インストールブラウザベースのツールについては

Answer 12

。

インタラクティブ/ステップバイステップまたはスライドショープロトタイプを作成します。プロトタイプをリンクを送信するだけで、あなたが選んだ誰とでも共有できます。

私たちのために...