ワイヤーフレーミングとプロトタイピングの違いは何ですか
ワイヤーフレーミングとプロトタイピングの違いは何ですか？プロトタイプはインタラクティブであり、ワイヤーフレームは静的である必要があると私は考えるのは正しいですか？
ワイヤーフレームとプロトタイプがどの程度重複するかについては、人によって考え方が異なると思います。以下は、私が2つにアプローチする方法です。
アプリケーションまたはWebサイトを検討していて、たとえばページレベルを見ると、ワイヤーフレームとプロトタイプは物理的には表面的には同じものです。それらは、紙またはデジタル媒体の両方で、低忠実度または高忠実度にすることができます。ワイヤーフレームは、多くのページのテンプレート、または固有のページや画面の場合があります。ページ図です。
全体像と複数の画面またはページがどのように接続されるかを見て、それらの間のナビゲーションと、使いやすさや相互作用のあまり具体的でない側面を検討し始めたら、ワイヤーフレーム（複数）をリンクしてプロトタイプを作成します。プロトタイプは実証可能なシステムです。
プロトタイプは、引き続き1つのページまたは画面beにすることができますが、純粋に視覚的な外観ではなく、エンゲージメントの感覚を具体化します。
だから私の意見では、それが異なるのは、回路図にアプローチするmindsetです。
'それはどのように見えますか？'または 'どんな情報と機能が提示されていますか？'（ワイヤーフレーム）の線に沿ってもっと考えていますか？.
または、「これをどのように操作するのですか？」または「どのように使用するのですか？」（プロトタイプ）を考えていますか？.
もちろん、プロトタイプは物理的な製品（ユーザーが製品を操作する場所）を頻繁に参照しますが、ワイヤーフレームは通常、画面ベースの対話用ですが、質問はWebサイトとソフトウェアに関連する違いに基づいていると思います
Wireframe-基本的にインターフェイスのスケルトン、ブループリントと比較できるものプロトタイピング-実行可能なダミー出力。ワイヤーフレーム、相互作用、シナリオ、ストーリーの組み合わせ
ワイヤーフレームは、要件を把握し、アイデアを共有し、仕様と構造の概要を説明するために使用されます。それらは、単一ページの図、またはより一般的には今では完全なサイトに限定することができます。彼らは青写真に似ています。オフラインダイアグラムにすることも、今では専用のワイヤーフレーミングソフトウェアで作成することもできます。ワイヤーフレームは計画プロセスの一部です。
プロトタイプは、サイトの一部またはすべての作業バージョンまたはシミュレーションバージョンであり、フィードバックを得るために使用されます。プロトタイプは、テストプロセスの一部です。それらは、クライアントまたは顧客の初期フィードバックを取得したり、インターフェースの概念をテストしたり、計画的なレイアウトが応答性の高い方法で機能する能力をテストしたりするために使用できます。ワイヤーフレーミングプロセスと主要機能の「迅速なプロトタイピング」およびレスポンシブレイアウトを組み合わせて初期テストを行うことが一般的になりつつあります。
もちろん私の見解...
多くのオーバーラップがあり、多くのワイヤーフレーミングアプリケーションは「プロトタイプ」として出力するHTMLページを参照しており、一部の機関では「ワイヤーフレーム」、「回路図」、「プロトタイプ」という用語を同じ意味で使用しています。厳しいルールはありません。
ワイヤーフレームとプロトタイピングは、技術の世界では非常に有用で、十分に活用されていないツールです。ウェブサイトとアプリのワイヤーフレームは、各画面またはページのレイアウトと全体的な外観を決定するのに役立ちます。プロトタイピングは、検証および開発会社をテストする方法として効果的なツールです。
ワイヤーフレーム
ワイヤーフレーミングは、おそらくこれら3つのアプリとウェブサイトの設計手順の中で最もよく知られています。それは基本的にローテクのプロトタイプです…非常にローテクです。ワイヤーフレーミングは基本的に、アプリまたはウェブサイトの各ページまたは画面のスケッチです。それは、ポスターボードのようなもので行うこともできますし、ホワイトボードに描くこともできます。
また、デジタルワイヤフレームを作成することもできます。デジタルワイヤフレームは、簡単に変更でき、最終製品の外でより現実的になるため、優れています。ワイヤーフレームの全体的な目的は、アプリの各画面がどのように表示されるかを概説することです。ここから、レイアウトの作成を開始し、アプリのデザインを決定します。
簡単に変更できるワイヤーフレームは、より多くのワイヤーフレームをテストし、並べて比較することもできます。したがって、ワイヤーフレームWebサイトは便利なツールです。もちろん、ワイヤーフレームのWebサイトまたはアプリには、ストーリーボードを組み込む必要があります。
ストーリーボードは基本的に、ワイヤーフレームから一歩戻るところです。ワイヤーフレーム設計チームは、ストーリーボードを使用して、アプリまたはWebサイトが全体としてどのように見えるかを確認します。これは、フローまたはアプリが論理的でクリーンであるかどうかを判断する方法です。基本的に、全体的な構造設計を調べています。
プロトタイピング
プロトタイピングは、アイデアを検証するための場所です。基本的には概念実証です。
- あなたのアイデアは期待どおりに機能しますか？
- 主な機能はアプリやウェブサイトの全体的な目的に貢献していますか？
- ストーリーボード中にWebサイトのフローは計画どおりに機能しましたか？
- 問題は解決されていませんか（そうです、問題が発生します-発生する可能性のあるハードルに備えてください）。
- 解決するために必要な問題を解決していますか？そうでない場合、それはあなたが向けることができる別の問題を解決していますか？
プロトタイプは、アプリ開発プロセスの重要なステップです。上記のすべての質問に加えて、回答すると、予備テストを行うことができます。プロトタイプWebサイトを構築する場合、ターゲット市場の限られた数の人々にアクセスを許可することができます。
初期のテストは、アイデアが実際にターゲット市場に役立つことを確認するための素晴らしい方法であることがわかりました。多くの場合、他の開発会社が見栄えのするクライアント向けのWebサイトを構築するのを見てきました。しかし、それはデザイナーによってのみ検証され、それを設計した人々によっては検証されませんでした。
アプリおよびWeb開発（または実際にはあらゆる企業）で覚えておくべき重要なことは、それを自分または開発者に販売しようとしていることです。それをターゲット市場に売り込もうとしている–アプリを成長させたい場合、早期のテストを受けることは非常に重要です。さらに、早期導入者でテストすると、話題になります！
私が理解しているように、プロトタイプは動作と機能性に関するものであり、ワイヤーフレームは要素（ボタン、フォームなど）の順序付け、配置、サイズ変更に関するものです。
ロジャーは、ワイヤーフレームやプロトタイプにアプローチする際の考え方が異なることを強調しています。
プロトタイプは幅広い概念を説明し、初期の低忠実度スケッチと高忠実度のほぼ完成した最終製品の間の多くのアーティファクトを説明するために使用できます。プロトタイプはインタラクティブである必要はありませんが、インタラクティブにすることができます。プロトタイプはデジタルである必要はありませんが、物理的な製品の場合もあります。プロトタイプでは、形状、機能、製品コンセプト、審美性、ビジュアル、素材など、さまざまな特性のあらゆる組み合わせに焦点を当てることができます。私の意見では、プロトタイプの主な価値は、プロトタイプが質問への回答を助けることです（製品は何をしますか？このアイデアは技術的に可能ですか？このレイアウトはメッセージを伝えますか？）。
ワイヤーフレームは、（単に）意図したレイアウトの概略的な視覚的説明として役立つアーティファクトです。
私の意見では、Wireframeは：
- 忠実度の低い概念図
- レイアウトとタスクフローオプションの探索に使用
- 一般的なデータを使用してオプションを探索するための高速で反復的なビジュアルコミュニケーション
- 関係者向けのバイインツール（設計者、クライアント、開発者はコーディング前にすべて同意）
- 入口、出口、および中断ポイントを備えた注釈付きのパスとフローのセット
- 機能的または一般的なストーリーボードにすることができます（Day in the Life）
プロトタイプは：
- 機能ページまたはコンポーネントの構築された高忠実度セット
- タスクフローの詳細ページコンポーネントが含まれています
- ターゲットを絞った、ユーザビリティテスト可能な特定のユーザータスクシナリオ
- 最終的なコーディングのための実際のナビゲーションと相互作用が含まれています
つまり、形式や意図が異なります。
忠実度が差別化要因になる可能性があることに同意します。
ワイヤーフレームに、個々のコンポーネントのフレームごとの詳細な相互作用の説明がページごとに含まれている場合、プロトタイピングの準備ができている可能性があります。
プロトタイピングソフトウェアでインタラクションをモデリングするよりも見栄えのよいプリントアウトを作成するのに多くの時間を費やしている場合は、おそらくその特定のプロジェクトのワイヤフレームで問題ないでしょう。
私のチームは現在、差異を分割するためにAxureを使用しています。クリック可能なインタラクティブな集中型プロトタイプで、印刷してワイヤーフレームとしても使用できます。トリックは、同じアーティファクトの細かさの各レベルで必要な情報を取り込むことです...
物理的な世界を使用して、車のアナロジー
ワイヤーフレーム=車の形と形、何をどこにあるかを視覚化し、ショールームで静的に保つ
プロトタイプ=試乗できる車。それが生産に入るポスト
私のWeb /アプリケーション開発の見解：
ワイヤーフレームは、さまざまなページタイプまたはページ関数のGUI要素を表示するために使用される静的モックアップです。
プロトタイプは、ワイヤーフレームの動的な対応物です。ウェブサイト/アプリのナビゲーション/機能アーキテクチャを提示するために使用される「クリックダミー」。
それらは、忠実度のさまざまなレベルでの相互作用のアイデアを説明する方法です。一般に、ワイヤーフレームは忠実度が低く、プロトタイプは忠実度が高くなる傾向があります。しかし、これらは間違いなくあいまいな用語であり、UXチームごとに定義が異なります。
私の非常に速い答えは忠実度でしょう。ワイヤーフレームは一般にfiが低く、プロトタイプが高くなります。ワイヤーフレームは初期の機能設計要素に対処しようとしますが、プロトタイプはワイヤーフレームのいくつかの要素を実践します。
紙の上に何かをスケッチすることができ、それをワイヤーフレームまたはプロトタイプと呼ぶことができます。ただし、理解できるのはワイヤーフレームであり、手に持っているのはプロトタイプです。
要するに、プロトタイプとマインドとブレインを備えたワイヤーフレーム。
モバイルアプリケーションまたはWebアプリケーションを設計する場合は、最初に各ページがどのように表示されるかをスケッチする必要があります。ビジネスコンセプトにのみ基づいて、デザイナーはアプリケーションフローとデザインの最初のドラフトを定義できます。これには、どのように見えるか、どのボタンがそこにあるか、どのフィールドがそこにあるかなどのスケッチがあります。それがワイヤーフレームです。の為に。
モックアップ
モックアップはより生き生きとした写真です。それらは視覚的により魅力的で、色、フォント、テーマ、ボタン、ロゴなどがあります。この段階では、フィールドのラベル、メモ、フォントタイプ、ナビゲーションメニューなどがデザインで指定されています。これは、モバイルアプリの外観やWebページの外観を正確に表しています。
ワイヤーフレームは、設計の「形式」に関する議論に焦点を合わせるのに最適ですが、プロトタイプは、設計の「機能」に関する議論に焦点を合わせるのに最適です。もちろん、さまざまなツールや方法が重複していることを考えると、用語は互換性があることがわかりますが、用語に関係なく、聴衆に提示したいものを理解する必要があります。
私の考えでは、ワイヤフレームは包括的ではない用語のように見え、通常はローファイおよびローテクのアーティファクトとアセットに使用されますが、プロトタイプはよりインタラクティブで洗練されている傾向があります。やりたい仕事に最適な道具を選ぶのが問題だと思います。