「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればいいでしょうか?」 多くの学生がこの問題を懸念しています。Meizuの製品体験デザイナー@陈希_CHRISCHENがZhihuでこの質問に答え、初心者がすぐに高級なデザイン感覚を作り出すのに役立つ4つの非常に実用的な提案をまとめました。 とりあえず、視覚的なレベルで改善する方法として理解しましょう。もちろん、Web サイトは単なる視覚的なものではありません。最終的な結果は、複数の要素の完璧な組み合わせです。人々に「高級感」を感じさせるためには、まずデザインが一定のインパクトを持たなければなりません。したがって、この質問は、そのようなインパクトをどのように生み出すかとも解釈できます。 「シンプルで普通」の原則に従う 多くの人は、Web サイトには多くの特殊効果が必要だと誤解しています。アニメーションを多用しないように注意してください。また、アニメーションは誇張しすぎないようにしてください (PPT のブラインドのアニメーションなど)。オブジェクトの単純な動きと実際の操作によってもたらされるフィードバックに基づいてアニメーションを作成します。アニメーションは必要なときに表示され、必要のないときに飛び回らないようにします。 同様に、シンプルで効果的なレイアウトに従い、細部を使用して Web サイトを変更し、段落のレイアウト、フォントの選択、画像とテキストの織り交ぜ方などの詳細を通じて美観を高めます。 追伸。「趣味のない人を怖がるのではなく、趣味のない人が一生懸命働くことを怖がる」という言葉があったのを思い出しました。 空白を残すことをいとわない デザインには十分な余白が必要ですが、過剰ではなく、高級感を与えます。ページ上のスペースはどれも貴重なので、絶対に必要な場合を除いて、スペースをいっぱいにしすぎないようにしてください。さらに、空白スペースによって主題がより強調され、状況によっては適切な空白スペースによって異なる意味が生まれることもあります。 変化、つまりコントラスト すべては変化によって美しい。書道の構成はこの問題をうまく解釈することができます。大きさ、厚さ、軽さ、重さ、湿り気、乾燥などの対照的な美しさが、単純な言葉を魅力的にします。 ウェブサイトでも同じことが言えます。フォントのコントラストだけでも、多くの美しさを演出できます。フォントの変更をレイアウトに利用することも、直接的で効果的な方法です。 高画質画像 写真は雰囲気を作り出す最も効果的な方法であり、写真にテキストを重ねるのは非常に巧妙な方法です。高画質な画像自体の美しさは、画質を高めるのに十分です。 信じられないかもしれませんが、さらにクールなものがあります。伝説的な「白黒のノイズが大きな文字を圧倒し、高級感と上品さを醸し出す」という、その本質を捉えたものです。 レイアウトはシンプルで普通、余白が多くコントラストが強い。白黒+ノイズで加工された画像も壮大。あ~~デザインで救えないものがあるのかな? |
<<: MySQL のインデックスの原理とクエリの最適化の詳細な説明
1. 補助AIDE (Advanced Instruction Detection Environm...
この記事では、天気予報機能を実現するためのVueの具体的なコードを参考までに共有します。具体的な内容...
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
この記事の例では、画像の切り取りを実現するためのjsの具体的なコードを参考までに共有しています。具体...
Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...
<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...
序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...
以前のブログでは、Tomcatのサーバーの各コンポーネントの使用について学びました。 Tomcatは...
目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...
Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり...
この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...
IFNULL(式1,式2) expr1 が NULL でない場合、IFNULL() は expr1 ...
目次1. Dockerの設定2. レジストリとネットワークを作成する3. コンテナを起動する環境説明...
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...
目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...