web-dev-qa-db-ja.com

忠実度の高いワイヤフレームは目的を達成しませんか?

ワイヤーフレームの目的ではないフィデリティを削除する。グラフィックデザイン?

ワイヤーフレームの忠実度が高すぎるため、私は間違いなく初期段階の会議から脱線してしまいました。関係者全員が、使用すべき色の濃淡、または2つの要素の間にあるピクセルの数に正確に夢中になっています。

高忠実度を使用することで 一部の利点 が存在する可能性があることは理解していますが、特にプロジェクトの初期に使用すると、ソリューションよりも多くの問題が発生しませんか?

参照 ワイヤーフレームでの色の使用...これは「いいえ」ですか?

6
Dhaust

ワイヤーフレームの目的は忠実性を排除し、関係者がグラフィックデザインの詳細ではなく、構造、アーキテクチャ、コンテンツ、および一般的なレイアウトに集中するのを支援することではありませんか?

ワイヤーフレームの目的は、はい、構造に焦点を当てることです。必ずしも忠実性やグラフィックデザインを削除するわけではありません。時々それらは構造について話すために必要です。

wireframeprototyping の両方で質問にタグを付けました。どっち?彼らは同じものではありません。ワイヤーフレームは構造についてであり、プロトタイプは経験についてです。それぞれを正しい場所で使用してください。互換性はありません。

どの忠実度をいつ使用するかを学ぶのはあなた次第です。プロジェクトのニーズとクライアント、チーム、予算、能力などに応じて、プロジェクトのどの段階でどの忠実度が最適に機能するかを把握する必要があります。たとえば、私が現在設計しているアプリはリッチなエクスペリエンスです。プロトタイプでは、エクスペリエンスがどれだけリッチになるかを正確に伝える必要があります。そこで、私たちはHTMLから始め、その意図を伝えるためにビジュアルをすばやく洗練させました。他のプロジェクトではそれを望まないかもしれませんが、常にどちらか一方の方向に進むべきだと言っている包括的なルールはありません。

8
Rahul

プロトタイプの観点から、私はオプションのスペクトルがあることに気づきます:

paper wireframes <--------------------------------------------> working code

スペクトルのこれらの2つの端の間にいくつのステップを入れるかは、多くの事柄に依存しますが、物事が混乱する可能性があるところです。

私はワイヤーフレームをできる限りローファイにするのが大好きです。理想的には、彼らはUXの制限を離れることさえありません...それらは単にUXのスケッチパッドになります。そこから、チームはできるだけ早くコードで設計を開始します。プロダクションコードである必要はありませんが、実際のメディアに入れて使用するようになったら、その半分は終わりです。

それは真ん中のものですlooks finalに近いです-しかしそうではありません-そしてそれはクリック可能であるように感じます-しかし実際にはそうではありません-私が多くを考える場所です間違った方向に曲がることがあります。

9
DA01

HiFiとLoFiワイヤーフレームの解釈が異なります。私はレイアウトと高レベルのコンテンツ配置のためだけに低忠実度ワイヤーフレームを使用し、使用されているコンテンツについてより具体的にする必要がある場合は、高忠実度ワイヤーフレームを使用します。

私はより忠実なバージョンを使用することが多いので、具体的にして、設計チームと開発者に、より具体的な作業を提供することができます。

ワイヤーフレームとして分類されている間は、さらにハイファイで特定のコンテンツ(つまりlorem ipsumではない)を追加できます。

私が話していることのいくつかの簡単な例は次のとおりです。

ローファイワイヤーフレーム

lowfi wireframe

ハイファイワイヤーフレーム

hifi wireframe

5
JonW

私にとって、ワイヤーフレーミングとプロトタイピングは、設計(つまり、プリコーディング)プロセスの2つの別個の段階です。Rahulに同意してください。それらは同じものではありません。

ワイヤーフレームとの最初の対話はすべて維持するように努めています。単にページ/アプリケーションのコア情報アーキテクチャが正しいことを確認するだけです。ワイヤーフレームを忠実に保つことで、要素の移動、サイズ変更、追加、削除などをすべてすばやく簡単に行うことができます。

これらの側面についてクライアントと合意に達したら、ロジックと機能を追加して、相互作用を表現することができます。これがプロトタイプと忠実度の向上につながります。

これが理想的な世界における私たちのアプローチでしょう。ご存じのように、プロジェクトが理想的な世界に存在することは非常にまれです。場合によっては、非常に経験豊富でlo-fiワイヤーフレームが得られないクライアントに出会うことがあります。クライアントは、実際に提供しようとしているものに真剣に取り組むために、色、画像、機能、サンプルコンテンツを必要とします。 。または、完全にワイヤーフレームを取得し、プロトタイピングの追加の時間/労力なしで構築するのに十分細かく、詳細な一連の要件を持つクライアントを取得します。

両方を行うためのスキルが必要ですが、何に時間を費やし、どれだけの詳細を入力するかは、クライアントのタイプとコマーシャルによって決まります。

1
Sam K

一般的に言えば、ワイヤーフレーミングは、ディスカッション、レビュー、およびさらなる改善を可能にするためにアイデアを紙に載せる低コストで迅速な方法です。

初期段階のワイヤーフレームは、あまり時間をかけずに早く開始し、早い段階でフィードバックを受け取るために、忠実度が低くなります。これらの初期段階では、イベントのシーケンス、つまり、ユーザーがある状態から別の状態にどのように遷移するかにさらに焦点を当てる場合もあります。

初期のワイヤーフレームが牽引力と承認を獲得するにつれて、少し詳細でありそうなキーワードなどで具体化し始めます。

繰り返しが進むにつれて、ワイヤーフレーミングがローファイからハイファイに移行するのがわかります。

次の段階はプロトタイピングであり、いくつかのJavaScriptを使用して、静的から偽の振る舞いまで、さまざまなレベルのプロトタイプを作成できます。

それはすべて、プロジェクトの複雑さと、会議と承認の進行方法に依存します。

1
user6072

個人的には、ワイヤーフレームは紙のスケッチから本格的なグラフィック表現まで(機能なしで)どこにでもあり、ライフサイクルのどこにいるかに基づいて使用されるべきだと思います。サイトが頭の中にある場合は、紙のスケッチから始めます。サイトが何年もの間使用されておらず、機能の調整のみを行っている場合は、現在のスクリーンショットからのワイヤーフレームである可能性があります。ワイヤーフレームを使用することの目標に基づいて決定する必要があります。

1
RandomBrad