web-dev-qa-db-ja.com

モックアップ、プロトタイプ、ワイヤーフレームの違い

私はUXデザインの新入生です。モックアップ、ワイヤーフレーム、プロトタイプの違いを理解するのは難しいと思います。彼らは同じことを言及していますか?

8
Jay Lee

ワイヤフレームは、詳細に触れずに基本的な要素を表示する回路図です。

enter image description here

プロトタイプは、将来の設計の詳細なシミュレーションであり、多くの場合、相互作用を模倣するところまでです。特定のプログラムを使用するか、ダミーのデータやサービスをコーディングすることにより、紙に作成できます。 enter image description here

モックアップは、ワイヤーフレーム、ハイファイデザイン、プロトタイプの両方を含むデザインのクラスです。つまり、モックアップを求められたときに、詳細レベルが理解されていない限り、詳細レベルを確認する必要があります。

6
Zoe K

ワイヤーフレームは、レイアウトのアウトラインスケッチです。実際の完成品のようには見えません。さまざまな要素がどこにあるかを示しているだけです。

wireframe

プロトタイプとモックアップ...正確な定義とそれらを区別する方法はありません。

私にとって「モックアップ」はまだかなり初期の段階にあるように聞こえますが、「プロトタイプ」はほぼ完成しており、ベータ版がほぼ完成しています。ただし、これは単なる感じであり、一般的に2つの単語はかなり交換可能です。

6
the other one

私の8年間の経験では、これが一貫して使用されていることを知りませんでした。誰かがワイヤーフレームやモックアップについて話す場合、同じことを意味するものに頼ることはできません。特にモックアップについて:一部のビジュアルデザイナーは忠実度の高いビジュアルデザインをモックアップと呼び、一部のUXの人々は非常に忠実度の低いものをモックアップと呼びます。 予想される内容に同意する場合は、例を示すことをお勧めします。

プロトタイプには、非常に多くの種類があります。しかし、一般的にプロトタイプはさまざまな状態と最小限の対話性をシミュレートします。プロトタイプでのTodd Zaki Warfelのテイクは気に入っています。

プロトタイプは、その忠実度、機能、またはその作成方法に関係なく、設計の意図を取り込み、その設計の複数の状態をシミュレーションします。ワイヤーフレームとストーリーボードは、デザインの静的な表現であり、それ自体はデザインの複数の状態をシミュレートしません。違いは、シミュレーションと複数の状態の部分です。

プロトタイピング-開業医向けガイド。 Todd Zaki Warfel著

4
Roland Studer

Rollandに完全に同意します。このそれぞれの使用法について考えることをお勧めします。

Mockup:しばしば「ゾーニング」を指します。私は常にこれから始めます。これを使用して、ページテンプレートで要素と情報を配置します。

Wireframes:本当によく似ています他のもの答え、私は少し精度を追加します、あなたは実際のコンテンツを使用(実際のテキスト、実際の写真)。

Prototypes:ユーザーインタラクションやさまざまな状態などをシミュレートすることになっています。モックアップ、ワイヤーフレーム、またはグラフィックデザインに基づくいくつかのhi-fiプロトタイプ(条件、実際データベース)など。プロトタイプと言います「表示」だけでなく使用することを意図しています。

2
Brice