ワイヤーフレームで色を使用しています...これは「いいえ」ですか？
最近、ワイヤーフレームでの色の使用に関する社内の議論が始まりました。ジュニアデザイナーは、素敵なワイヤーフレームセットを完成させ、最後にすべてをグレースケールに変換するように言われました。彼らは色がワイヤーフレームであってはならないことを言われました。
グレースケールでの設計が役立ついくつかの理由がわかります。
- アクセシビリティのため（色を区別する必要がない）
- ワイヤーフレームでビジュアルデザインを誤って伝えることのないようにしてください（場合によっては、クライアントが色の選択をビジュアルデザインの決定となるように関連付けて、視覚的な違いを伝える方法に反対することがあります）
私は実際には色付きのアイコンのパレットを使用しており、色を使用して視覚的な違いを伝えます。場合によっては、さまざまなグレーシェードを使用したり、パターンを使用したりすることしかできないことがあります。
そこに標準的な実践とは何ですか？色付きと色なしのワイヤーフレームを見てきました。
ワイヤーフレームの目的が何であるかを考えずに、同僚が思い込みで少し迷子になったように聞こえます。 ウィキペディアが提供する緩い定義から始めましょう ：
Webサイトのワイヤフレーム（「Webワイヤフレーム」、「Webワイヤフレーム」、「Webワイヤフレーム」も）は、Webサイトの構造とページ間の関係を提案するためにインターフェース設計で使用される基本的なビジュアルガイドです。 Webページのワイヤーフレームは、インターフェースの基本的な要素のレイアウトの同様の図です。通常、アートワークが開発される前にワイヤーフレームが完成します。
他の単語や用語と同様に、それが実際に何を意味するかを検討することが重要です。 ワイヤーフレームモデル は、接続を示すことによってレンダリングされる、ポリゴンモデルの物理構造の表現について話すときに3Dモデリングで使用される用語です頂点間のポイント。ワイヤーフレームモデルのポイントは何ですか？それはその構成をよりよく理解するために構造の「根性」を示すことです。
ウィキペディアがそれを議論するようにウェブサイトのワイヤーフレームに引き継がれるとき、私たちはその意味がどのように適用されるかを考慮する必要があります、そしてウィキペディアの定義はそれを釘付けにします：.
ご存知のように、色やそのビジュアルガイドの外観については触れられていません。重要なことは、それがウェブサイトの構造がどのように機能するかを示唆しているということです。それを達成する限り、それは効果的なワイヤーフレームです。したがって、たとえば、これらはすべて「有効な」ワイヤーフレームです。
- ナプキンのスケッチ
- 37signalsのドラフトまたはiPad上の他のアプリでのスケッチ
- balsamiq Mockupsなどのツールを使用して作成された大ざっぱなワイヤフレーム
- axureやIllustratorなどを使用して作成された、よりタイトなワイヤフレーム
- photoshopで作成されたサイトの軽量デザイン。ページの構造が明確になり、関連するデザイン要素も含まれます。
- ページを構成する要素を確認できる、FireworksのHTMLエクスポート可能なデザイン
- 完全にインタラクティブなHTML/CSSワイヤーフレーム
それは忠実度と詳細の問題です。おそらく、成果物に期待される忠実度の種類を明確にし、設計者をその道に沿って導く必要があります。ただし、「ワイヤーフレームで色を使用する必要がある」という問題ではありません。色がサイトの構造を伝えるのに役立つ場合は、ワイヤーフレームで絶対色を使用する必要があります。
同意した。
通常、色は、基本的な構造、レイアウト、およびIA（情報アーキテクチャ）について「想定されている」ディスカッションに感情的/文化的な含みをもたらします。これについては議論の余地がありますが、少なくともColorを使用することで、より多くの情報がレンダリングに伝達されることに同意できます。
ワイヤーフレームの要点は、必要なものだけを伝え、それ以外は伝えないことです。
私の実際の経験では、人々は「ワイヤーフレーム」という用語を使用して、ラーフルがリストするアーティファクトのすべてを意味します。
私の経験から、それは主にあなたがリストした2番目の理由です：
- 内部の利害関係者でさえ、「現実的」に見えるワイヤーフレームに混乱することがあります。私のAxureモックアップは、組織で使用されている他のPowerPointモックアップよりも忠実度が高いので、グラフィックデザインに関連するコメントが表示されることがあります。
- 私の友人が作成したHi-Fiワイヤーフレームは、顧客が実際に気に入ったのですぐに実装できました:)
グレースケールからフルカラーになり、また戻ってきました。フルカラーは、発生する必要のある議論にとって本当に気が散る傾向があると私は思います。
余談ですが、私はたまたま私と開発者の間にグラフィックデザイナーがいないプロジェクトにいるだけなので、「現実的な」または「本当にきれいな」ワイヤーフレームはそのまま実装される危険性があります。私はグラフィックデザイナーではないので、これは災害をかなり保証します...
ワイヤーフレームの色の1つの欠点は、コントロールの忠実度が（など）高いことに加えて、遅かれ早かれ、開発者の1人がGUIを外観にする必要があると想定することですワイヤーフレームのように。
知っている。知っている。これは、ワイヤーフレームの目的に関する大きな誤解を示しています。
しかし、それは本当に起こります。
コンポーネントの注釈には、色の使用を予約する傾向があります。たとえば、最終的なサイトのデザインがまったく異なるカラーストーリーである場合でも、ハイパーリンクのように動作することを意図したテキストの一部が青色で下線が引かれていることを確認します。静的ではなく、ユーザー入力ごとに異なるテキストのビットは、別の色になります。疑わしいさまざまなボックスやラインがある場合、またはさらに磨く必要があることがわかっている場合は、それらに赤いラインを設定します。ワイヤーフレームの真上にドロップされた注釈であるテキストのブロックは、淡黄色の背景の塗りつぶしを取得します。
視覚的に見るのはとても怖いですが、それはコミュニケーションに役立ちます。表現しないこと。
個人的には、なんらかの機能を持たせるなら色でいいと思います。
リンクやボタンが青色になっているなど、ワイヤーフレームのインタラクティブな要素に色を使用する傾向があります。これは、クライアントに提示するときにインタラクティブな要素を明確に強調するのに役立ちます。
また、緑、オレンジ、赤を使用して、アイテムのリストでさまざまな警告状態を示しています。これにより、クライアントへの機能の通信が速くなりました。これは、以前の純粋なグレースケールバージョンではあまりわかりませんでした。
ただし、少なくとも初期のワイヤーフレームやモックアップでは、装飾的な要素として色を使用しません。他の人が応答したように、クライアントは時々、それがどのように「見える」か、またはそれがどのように機能するかに夢中になることがあります。これにより、プロセスが少し遅くなる可能性があります。