ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよく耳にします。デザイナーは時々、「ピクセルレベルまですでに洗練させているのに、なぜディテールが足りないと言うのですか? ディテールとは何ですか?」と不満を感じます。この記事では、具体的な例を使用して、デザインディテールに関する私の理解を説明します。
まず、デザインの詳細についてお話ししましょう。実は、これは非常に広い概念です。デザイン作業が成功するには、細部が適切に整っている必要がありますが、細部とは、ピクセルレベルの配置などの小さなことだけを指すのではなく、このフォームをここで使用しない場合は、少しテクスチャや質感を追加したほうがよいかどうか、全体的なデザインと調和しているかどうか、光と影の関係がアイコン全体またはインターフェイス全体と一致しているかどうかなども含まれます。
デザインの細部に取り組むときは、謙虚で、焦ってはいけません。たとえそれが非常に小さな点であっても、この点をデザイン全体の雰囲気に合わせるにはどうすればよいか、もっとよく考える必要があります。確信が持てたら、それを実行に移すことができます。作業量が少なく技術的に難しくないからといって、数ストロークで描いて、何度も見直しながら修正することは避けてください。そうすると、おそらく時間がかかり、期待した効果が得られません。次に、具体的な設計事例を用いて、設計の詳細とは何か、設計プロセス中に設計の詳細をうまく行うにはどうすればよいかを詳しく説明します。
図 1 に示すように、インターフェイス上にポップアップボックスが表示される必要があります。
デザインの詳細な分析 123WORDPRESS.COM

図 1 設計案製品の新機能に対応するために、このポップアップボックスに小さなグラバーを追加して、ポップアップボックスをドラッグできるようにする必要があります。デザイナーは、ポップアップボックスにいくつかの変更を加えて、ドラッグできるように見えるようにする必要があります。
要件は実際には非常に単純であり、参照できる既成の例が多数あります。ある程度の経験があるデザイナーであれば、基本的に参考資料を探す必要はなく、わずか数分でハンドルを描くことができます。設計要件プロセス全体を説明するために、図 2 に示すように、いくつかの参照図を示します。

図 2 つかむ手のリファレンス既存のより成熟したソフトウェアと比較すると、誰もが、つかめる部分に凹凸のパーティクルを追加して、摩擦が大きいように見えるようにし、この領域をつかんでドラッグできることを示します。したがって、このルールに従うだけで済みます。ドラッグ可能な部分は角ではなく端なので、水平線を追加することでドラッグできます。さて、この要件を満たすためにピクセルレベルまで改良してみましょう。

図 3 設計レンダリング設計案が非常に早く出来上がり、拡大して詳細を確認することもできます。

図4 デザインレンダリングの効果は、400%に拡大するとよくわかります。これは鉛筆で3ピクセルの線を描き、そこに投影を加えたものです。拡大して見てみましょう。

図 5 1600% にズームインした時のエフェクトは、かなり細かくなっていますね。3 ピクセルの高さのグラフィックに、ハイライト、シャドウ、トランジションが追加されています。このディテールはよくできていると思いませんか? まあ、ズームインした写真からすると、問題ないように見えます。しかし、インターフェイス全体を振り返ってみると、ふと、少し「ディテールが足りない」と感じます。一体何が起こっているのでしょうか?
明らかにピクセルレベルまで洗練されているのに、なぜまだ不安を感じるのでしょうか。よく考えてみると、おそらく次のような理由でしょう。このインターフェースの要素は、突起も含めてすべて丸みを帯びており、角はわずかに遷移していますが、グリップ部分はピクセルで直接描画されているため、気質自体に問題があります。しかし、高さ 3 ピクセルで丸みを持たせることはできるでしょうか? 実は可能です。
何がより良いかをよく考えてください。この要件は継続的な設計に属するため、まず既存のインターフェースの設計アイデアを理解する必要があります。インターフェースはスキューモーフィックスタイルで、上側がわずかに盛り上がっており、上端に 1 ピクセルのハイライトがあり、その後にセルフシャドウが続き、丸い角も非常に目立ちます。したがって、私たちがすべきことは、リアルで丸みのあるグリップを作成することです。グリップ部分をもう少し目立たせるために、ベースカラーを少し追加することもできます。
さて、まずは完成した原稿を見てみましょう。

図 6 最終的な設計はより信頼性が高くなったように見えます。次に、「詳細」の実装を見ていきます。

図7 400%拡大効果図

図 8 各要素の実装の概略図。実際、最初のドラフトではほとんどの点に注意を払っていましたが、パスを使用して丸い角の輪郭を描き、ピクセルを使用して厳密に輪郭を描くのではなく、Photoshop レイヤースタイルのベベルエンボスと内側の光彩を使用して突起自体の質感をシミュレートするなど、さらに改良を加えました。ハイライトレイヤーが改良され、中央が明るく、両側が暗くなりました。また、投影では、投影と外部グローの 2 つのレイヤーを使用して、よりリアルな投影効果をシミュレートします。新しく追加された背景色については、インターフェースに貼り付けられるため、インターフェース自体のテクスチャに合わせる必要があります。最上層にピクセルのハイライトがあり、その領域に影がある、といった具合です。
この時点で、インターフェースの詳細の最適化はほぼ完了しています。まとめると、いわゆるディテールとは、あるレベルでは、このデザイン作業におけるピクセルレベルのディテールが丁寧に行われているかどうかを指します。別のレベルでは、ピクセルレベルまで洗練させた後、洗練された部分が作品全体の気質と一致しているかどうかを振り返ります。これら 2 つのレベルのうち、実際には 2 番目のレベルの方が重要ですが、見落とされがちです。デザイナーが作品を作るとき、細部と全体の関係を常に意識する必要があります。細部は全体を支えるものであり、全体を理解した上で細部を深めていく必要があります。
上記はデザインの詳細についての私の個人的な理解です。ご意見やご提案がございましたら、お気軽にご相談ください。

<<: モバイルレイアウトにvw+remを使用する方法

>>: MySQL のストアドプロシージャを使用して 100 万件のレコードをすばやく生成する方法