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

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

推薦する

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

Docker-compose を使用して GitLab をデプロイする方法

Docker-compose は GitLab をデプロイします1. Dockerをインストールする...

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

CSS 複数 3 列適応レイアウト実装の詳細な説明

序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...

Unicode 署名 BOM の詳細な説明

Unicode 署名 BOM - BOM とは何ですか? BOM は Byte Order Mark...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

three.js を使って立体的な矢印線を描く詳細な手順

需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...

ショッピングカートの計算を実現する js メソッド

この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...

ウェブページのフッターで注意すべきことのまとめ

たくさんのリンクおそらく、このようなサイトをたくさん見たことがあるでしょう。ページの下部に 50 個...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

Vueコンポーネント化の基本的な使用方法の詳細

目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

CentOS7仮想マシンで固定IPアドレスを設定する方法

私の開発環境は、VMWare 仮想マシンに CentOS をインストールし、ホスト ファイルにインタ...