web-dev-qa-db-ja.com

ワイヤーフレームのピクセル精度?

私が設計プロセスにどのように取り組むかを見たいと思っていたクライアントのために、Axureを使用してインタラクティブなワイヤーフレームのシリーズを設計するように依頼されました。比較的中程度の忠実度でグレースケールでデザインを作成しましたが、他のデザイナーからは、ワイヤーフレームを可能な限り完全なピクセルにすることを強くお勧めしました(プレースホルダーを使用していて、色は使用していません)。ワイヤーフレームの概念は、概念の証明をすばやく示し、思考プロセスを推進することなので、これについて少し混乱しています。

クリーンでうまく設計されたワイヤーフレームは目に心地よく、より肯定的な反応があるかもしれませんが、問題は、ピクセルを完璧にする\正確にするために、視覚的なデザインを作成するのと同じくらいの時間がかかり、入りたくないということです。これが、色が適用されてデザインが完成した最後のシェルであると考えるユーザーのわな。

だから私の質問は、ワイヤーフレームをピクセル完璧にすることには本当に利点があるのか​​、そしてそれらの特定のケースはどこにあるのかということです。

私は質問 ワイヤーフレームの詳細度ワイヤーフレームで色を使用する…これは「いいえ」ですか? を見ましたが、私が持っている質問に答えません。

編集:ピクセルパーフェクトとは、完全な配置のようなものでした。グリッドのコンテンツの両側に正確な間隔があり、正確なアイコンサイズを使用しています。モバイルスペースで使用されます

9
Mervin

私の意見では、ワイヤーフレームピクセルimperfectを使用することは間違いなく進むべき道です。私は2つの理由で大ざっぱなスタイルを好む:

  1. それが私のインスピレーションを駆り立てます。完璧に見えるワイヤーフレームを作成することを心配しないことで、さまざまな反復をテストするのが簡単になり、いつよりもはるかに創造的なアプローチを実行できます厳密で完全に整列したワイヤーフレームを作成します。
  2. 通常、クライアントはピクセルパーフェクトワイヤフレームを見ると、完成したデザインであるかのように判断します。 大ざっぱなスタイルを使用することで、これが進行中の概念的な作業であることははるかに明確です。クライアントがなぜ私がそうしなかったのかと尋ねる頻度は想像できないでしょうどの色も使用しません。

ところで、大ざっぱなワイヤーフレームを作成するための本当に素晴らしいツールは Balsamiq Mockups です。

10
vincent.io

ワイヤーフレームの高度な磨き-そして確かにピクセルの完璧な配置はこれに分類される-は、経験豊富なクライアントがあなたがお金を浪費していることを示している

ワイヤーフレームは学習した言語であることを忘れないでください。これらはアイデアを伝えるための省略形であり、聴衆の誰もがその言語に堪能な場合にのみ機能します。これらは、「これはまだ完了しておらず、私たち全員がそれを確実に理解できるようにしたい」というコンテキストを意図的に持っているという点で、疑似コードに相当します。それらは、アイデアを視覚的に伝えるために必要な絶対最小作業量です。

ピクセル完全配置はそのメッセージを混乱させます。これは、何とかしてワイヤーフレーム以上であるとクライアントに言います。そして、彼らがそれを理解すると、経験豊富なクライアントは、それらのラインを完全に整列させるためにどれだけのお金を費やしたのか疑問に思うでしょう(そしてすべきです)。

あなたの同僚は間違っています。最低レベルの忠実度以外のワイヤーフレームを作成しても意味がありません。聴衆の一部の利害関係者の経験のレベルが(あるはずであるように)心配されている場合は、それらを特定し、それらの人々にとって適切な設計成果物を決定することに焦点を当てる必要があります。

編集:ここで良い議論: ワイヤーフレームをクライアントにデモするためのアドバイス

4
Pete

次の場合はpixelperfectワイヤフレームを実行しないでください

  1. webサイトの動作を理解し始めたところです。イテレーションは揺れる。
  2. ワイヤーフレームは内部でのみ使用され、アイデアを得るために私は紙の上に物を投げつけますしかし、私がワイヤーフレームを提示してクライアントに提供するつもりなら、私はそれらにもっと力を入れます。

次の場合にpixelperfectワイヤーフレームを実行:

  1. ワイヤーフレームツールを使用すると、作業が速くなります(グリッドとオブジェクトの自動整列をサポートしているように)。そうでなければそれを発汗しないでください。そして、あなたは絶対に箱を揃えることをいじり始めることから始めません。
  2. ユーザーと一緒にプロトタイプとしてワイヤーフレームをテストします。テストの参加者がほぼ完成したサイトのように見えるものを使用しようとしても、コントラストの悪いラフスケッチなどでユーザビリティの問題が発生する可能性があるため、ワイヤーフレームの配置が適切に設計されているとよくなります。

  3. あなたは本当に理解する必要があります実際のコンテンツがソリューションに適合する場合。たとえば、製品カテゴリページはワイヤーフレームに基づいて機能すると思いますが、実際には、5列のバージョンではなく、4列分のスペースしかありません。 (うん、これは実際にはピクセルの完成度に依存しているのではなく、プロポーションについてです)

また

洗練されたワイヤーフレームに対する一般的な議論があります。これは、クライアントがこれをWebサイトが見るものだと考えるように混乱させるようなものです。ええと、私はこの仕事を12年以上続けています。灰色がかったワイヤーフレームとデザインコンプの違いを理解できないクライアントに出会ったことは一度もありません。

はい。ワイヤーフレームのオーバーデザインにクライアントの予算を浪費している可能性がありますが、[収集、作成、変更ワイヤーフレームコンポーネントを長年にわたって使用しているので、時間の経過とともに一流のデザインを設計する時間はかかりません。ずさんなものの代わりにワイヤーフレーム。

最後に、ほとんどのクライアントは、私たちが行う多くの作業を実際には理解していません(デジタルメディアは、多くの人々にとって不思議で恐ろしいように見えます)振る舞い、オフィスの様子、仕事のプレゼンテーションの仕方、配達の様子。 プロ並みのワイヤーフレームを使用すると、より有能で信頼できるようになります。そして、それはあなた自身とあなたの代理店にとって重要です。

4
Tony Bolero

他の設計者から、ワイヤーフレームをできるだけピクセルに近づけるよう強く勧められました

これらは、ワイヤーフレームの目的、またはWebの一般的な仕組みを理解していないデザイナーです。

Axureをビジュアルデザインツールに変えることは、誰にとっても悪夢です。ビジュアルデザインツールではありません。それは反復的なプロトタイピングツールであり、物事を反復的に正常に行うためのものであり、人間が可能な限りシンプルに保つ必要があります。

Axureで「スケッチ」モードを有効にすることをお勧めします。すべての文字を波打つ線に変え、手書きフォントを使用します。これは、これは視覚的なデザインではありませんという事実を強調するのに役立ち、フローと相互作用のレビューにクライアントをより集中させることができます。

webはそもそもピクセル完璧ではないことをデザイナーに思い出させます。 ;)

今、それらをピクセル完璧にすることには利点がありますか?

はい、実際に!利点は、ビジュアルデザイナーが自分の仕事についてそれほど深く考える必要がないことです。それとクライアントは彼らを幸せにする本当にきれいな画面を見ることになります。

しかし、悲しいかな、どちらにも大きな欠点があります。まず、ビジュアルデザイナーは自分の才能、スキル、経験をテーブルに持ち込む必要があります。ワイヤーフレームの内容は、ビジュアルデザイナーのスキルに基づいて非常によく変わる可能性があります。そのため、ピクセルの完全なワイヤーフレームに「固定」したい場合、停滞につながる可能性があります。

クライアントに関しては、ビジュアルデザインはデザイン思考の他のすべての側面に勝ります。クライアントがアイコンと色を見始めたら、それだけが集中します。多くの場合、全体的なユーザーエクスペリエンスが損なわれます。したがって、そのプロセスをできる限り完全に分離しておく必要があります。

2
DA01

「きれいな」ワイヤーフレームがクライアントによってより好意的に判断されるケースは間違いなくあります。 審美的なユーザビリティ効果 について読んだ後、ワイヤフレームの方法を変更し、OmnigraffleまたはIllustratorでより迅速に手書きのスケッチと完全に整列されていないものを作成しようとしました。これにより、主要なアイデアやコンセプトに集中できます。また、完成していないと感じた場合に、クライアントがワイヤーフレーム/デザインについてフィードバックを行うのも簡単です。

1
fluxd