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

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

推薦する

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

MySQL ストアド プロシージャの in、out、inout パラメータの例と概要

ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...

純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

Linux環境でのDockerインストールチュートリアル

1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...

JavaScript リフレクション学習のヒント

目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

リンクをクリックしたときにファイルのダウンロードダイアログボックスをポップアップ表示するには、HTML で href を使用します。

今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...

Docker での FastAPI デプロイの詳細なプロセス

Docker 学習https://www.cnblogs.com/poloyy/p/15257059...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

HTML の基礎必読 - CSS スタイルシートの包括的な理解

CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...

MySQL 子テーブルで外部キー制約チェックを無効にする方法

準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...

フックを使用して React コンポーネントを書くときに注意すべき 5 つの点

目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...