設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよく耳にします。デザイナーは時々、「ピクセルレベルまですでに洗練させているのに、なぜディテールが足りないと言うのですか? ディテールとは何ですか?」と不満を感じます。この記事では、具体的な例を使用して、デザインディテールに関する私の理解を説明します。 まず、デザインの詳細についてお話ししましょう。実は、これは非常に広い概念です。デザイン作業が成功するには、細部が適切に整っている必要がありますが、細部とは、ピクセルレベルの配置などの小さなことだけを指すのではなく、このフォームをここで使用しない場合は、少しテクスチャや質感を追加したほうがよいかどうか、全体的なデザインと調和しているかどうか、光と影の関係がアイコン全体またはインターフェイス全体と一致しているかどうかなども含まれます。 デザインの細部に取り組むときは、謙虚で、焦ってはいけません。たとえそれが非常に小さな点であっても、この点をデザイン全体の雰囲気に合わせるにはどうすればよいか、もっとよく考える必要があります。確信が持てたら、それを実行に移すことができます。作業量が少なく技術的に難しくないからといって、数ストロークで描いて、何度も見直しながら修正することは避けてください。そうすると、おそらく時間がかかり、期待した効果が得られません。次に、具体的な設計事例を用いて、設計の詳細とは何か、設計プロセス中に設計の詳細をうまく行うにはどうすればよいかを詳しく説明します。 図 1 に示すように、インターフェイス上にポップアップ ボックスが表示される必要があります。 ![]() 要件は実際には非常に単純であり、参照できる既成の例が多数あります。ある程度の経験があるデザイナーであれば、基本的に参考資料を探す必要はなく、わずか数分でハンドルを描くことができます。設計要件プロセス全体を説明するために、図 2 に示すように、いくつかの参照図を示します。 ![]() ![]() ![]() ![]() 明らかにピクセルレベルまで洗練されているのに、なぜまだ不安を感じるのでしょうか。よく考えてみると、おそらく次のような理由でしょう。このインターフェースの要素は、突起も含めてすべて丸みを帯びており、角はわずかに遷移していますが、グリップ部分はピクセルで直接描画されているため、気質自体に問題があります。しかし、高さ 3 ピクセルで丸みを持たせることはできるでしょうか? 実は可能です。 何がより良いかをよく考えてください。この要件は継続的な設計に属するため、まず既存のインターフェースの設計アイデアを理解する必要があります。インターフェースはスキューモーフィック スタイルで、上側がわずかに盛り上がっており、上端に 1 ピクセルのハイライトがあり、その後にセルフ シャドウが続き、丸い角も非常に目立ちます。したがって、私たちがすべきことは、リアルで丸みのあるグリップを作成することです。グリップ部分をもう少し目立たせるために、ベースカラーを少し追加することもできます。 さて、まずは完成した原稿を見てみましょう。 ![]() ![]() ![]() この時点で、インターフェースの詳細の最適化はほぼ完了しています。まとめると、いわゆるディテールとは、あるレベルでは、このデザイン作業におけるピクセルレベルのディテールが丁寧に行われているかどうかを指します。別のレベルでは、ピクセルレベルまで洗練させた後、洗練された部分が作品全体の気質と一致しているかどうかを振り返ります。これら 2 つのレベルのうち、実際には 2 番目のレベルの方が重要ですが、見落とされがちです。デザイナーが作品を作るとき、細部と全体の関係を常に意識する必要があります。細部は全体を支えるものであり、全体を理解した上で細部を深めていく必要があります。 上記はデザインの詳細についての私の個人的な理解です。ご意見やご提案がございましたら、お気軽にご相談ください。 |
>>: MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法
目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...
目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...
Docker-compose は GitLab をデプロイします1. Dockerをインストールする...
目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...
序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...
Unicode 署名 BOM - BOM とは何ですか? BOM は Byte Order Mark...
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...
この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...
たくさんのリンクおそらく、このようなサイトをたくさん見たことがあるでしょう。ページの下部に 50 個...
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
<meta http-equiv="x-ua-compatible" コン...
目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...
私の開発環境は、VMWare 仮想マシンに CentOS をインストールし、ホスト ファイルにインタ...