設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよく耳にします。デザイナーは時々、「ピクセルレベルまですでに洗練させているのに、なぜディテールが足りないと言うのですか? ディテールとは何ですか?」と不満を感じます。この記事では、具体的な例を使用して、デザインディテールに関する私の理解を説明します。 まず、デザインの詳細についてお話ししましょう。実は、これは非常に広い概念です。デザイン作業が成功するには、細部が適切に整っている必要がありますが、細部とは、ピクセルレベルの配置などの小さなことだけを指すのではなく、このフォームをここで使用しない場合は、少しテクスチャや質感を追加したほうがよいかどうか、全体的なデザインと調和しているかどうか、光と影の関係がアイコン全体またはインターフェイス全体と一致しているかどうかなども含まれます。 デザインの細部に取り組むときは、謙虚で、焦ってはいけません。たとえそれが非常に小さな点であっても、この点をデザイン全体の雰囲気に合わせるにはどうすればよいか、もっとよく考える必要があります。確信が持てたら、それを実行に移すことができます。作業量が少なく技術的に難しくないからといって、数ストロークで描いて、何度も見直しながら修正することは避けてください。そうすると、おそらく時間がかかり、期待した効果が得られません。次に、具体的な設計事例を用いて、設計の詳細とは何か、設計プロセス中に設計の詳細をうまく行うにはどうすればよいかを詳しく説明します。 図 1 に示すように、インターフェイス上にポップアップ ボックスが表示される必要があります。 ![]() 要件は実際には非常に単純であり、参照できる既成の例が多数あります。ある程度の経験があるデザイナーであれば、基本的に参考資料を探す必要はなく、わずか数分でハンドルを描くことができます。設計要件プロセス全体を説明するために、図 2 に示すように、いくつかの参照図を示します。 ![]() ![]() ![]() ![]() 明らかにピクセルレベルまで洗練されているのに、なぜまだ不安を感じるのでしょうか。よく考えてみると、おそらく次のような理由でしょう。このインターフェースの要素は、突起も含めてすべて丸みを帯びており、角はわずかに遷移していますが、グリップ部分はピクセルで直接描画されているため、気質自体に問題があります。しかし、高さ 3 ピクセルで丸みを持たせることはできるでしょうか? 実は可能です。 何がより良いかをよく考えてください。この要件は継続的な設計に属するため、まず既存のインターフェースの設計アイデアを理解する必要があります。インターフェースはスキューモーフィック スタイルで、上側がわずかに盛り上がっており、上端に 1 ピクセルのハイライトがあり、その後にセルフ シャドウが続き、丸い角も非常に目立ちます。したがって、私たちがすべきことは、リアルで丸みのあるグリップを作成することです。グリップ部分をもう少し目立たせるために、ベースカラーを少し追加することもできます。 さて、まずは完成した原稿を見てみましょう。 ![]() ![]() ![]() この時点で、インターフェースの詳細の最適化はほぼ完了しています。まとめると、いわゆるディテールとは、あるレベルでは、このデザイン作業におけるピクセルレベルのディテールが丁寧に行われているかどうかを指します。別のレベルでは、ピクセルレベルまで洗練させた後、洗練された部分が作品全体の気質と一致しているかどうかを振り返ります。これら 2 つのレベルのうち、実際には 2 番目のレベルの方が重要ですが、見落とされがちです。デザイナーが作品を作るとき、細部と全体の関係を常に意識する必要があります。細部は全体を支えるものであり、全体を理解した上で細部を深めていく必要があります。 上記はデザインの詳細についての私の個人的な理解です。ご意見やご提案がございましたら、お気軽にご相談ください。 |
>>: MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法
目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...
ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...
目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...
1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...
今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...
Docker 学習https://www.cnblogs.com/poloyy/p/15257059...
目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...
この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...
CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...
準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...
目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...