情報の最適化と改良は常にデザインの最初のステップです。 「これは百度アライアンスユーザーエクスペリエンスセンターのバナーにある文章です。ウェブデザインを行う過程で、私はこのような要約についての個人的な経験とアイデアをますます持っています。もちろん、この簡潔な文章には実際には多くの内容が含まれています。個人的には、少なくとも次の4つの側面が含まれていると思います。1.ウェブサイト全体の魅力の観点から、ウェブサイトの魅力をよりよく実現するために、ウェブページにどのような情報を配置する必要がありますか?どの情報を保持する必要がありますか?そして、どの情報を他のページに配置する必要がありますか、または単に破棄する必要がありますか? 2.ページに配置することを決定した情報について、どのようにテキストを書き、画像を選択して、機能性と視覚的な美しさの完璧な統一を実現すればよいですか? 3.情報の重要性を区別し、どれが重要で強調する必要があるか、そしてどれがそれほど重要ではないか? 4.一次情報と二次情報を区別した後、レイアウト、色、サイズ、つまり視覚的にどのように強調して表現すればよいですか? これら 4 つのパートにはそれぞれ議論すべきトピックがほぼ無限にあるため、この記事では、4 番目の側面、つまり Web ページ上のコア コンテンツと視覚表現の関係についてのみ、私の理解を整理して要約します。私が検討したすべての内容を書き留め、私の視点を説明するためにいくつかの具体的な例を示して、皆さんがよりよく理解できるように最善を尽くします。 1. コアコンテンツがページレイアウトに与える影響<br />下の画像はWordPressウェブサイト構築を提供する会社です。ホームページには、上からナビゲーション、ロゴ、スローガン、作品展示、選定理由、お問い合わせフォーム、ログリスト、メール購読、Twitter情報、著作権情報などの情報が表示されています。最初のビジュアルは、間違いなく会社のスローガンと仕事の展示であり、このウェブサイトのホームページの核となるコンテンツです。なぜなら、Webサイト構築会社として、自分たちが何をしているのか、どのようにそれをしているのかを直感的に顧客に知ってもらうことが、顧客が最も知りたいコンテンツであるはずだからです。では、コアコンテンツについてはどのような視覚的配慮がなされているのでしょうか? プロモーションスローガンでは、デザイナーが「wordpress」という単語の文字サイズを非常に大きくし、他のテキストと区別するために濃い灰色を使用して、会社がバックエンドとして特に WordPress を使用して Web サイトを構築していることを強調していることがわかります。宣伝スローガンの下の作品展示画像のサイズは非常に大きく、幅は540ピクセル、デザイン全体の幅は1000ピクセルです。ホームページ上のこのような大きなサイズの展示画像により、お客様は作品の本来の姿を非常に鮮明かつ直接的に確認することができ、会社の制作レベルを直感的に感じることができます。このような大規模な作品展示は、実はウェブサイト全体のレイアウトを漠然と決定づけているのです。考えてみてください。画面の左上の領域に幅 540 ピクセル、高さ 460 ピクセルの長方形を配置した後、次の領域にはどのような情報を配置すればよいでしょうか。実際には、積み木を配置するのと同じで、重要度に応じて 1 つずつ配置するだけです。もちろん、これが唯一のレイアウト方法ではありませんが、どのようなレイアウト方法を使用する場合でも、機能的な考慮に基づいて考える必要があります。私たちは創造性を持つことができますが、創造性と、既成概念にとらわれない純粋な創造性との違いを理解しなければなりません。 ![]() ![]() ![]() Puppetの完成作品から、デザインのアイデアに従って作られたグレーの背景は落ち着いていて控えめで、白い絵の縁と背景と鮮明なコントラストを形成し、グレーと白の配色はカラフルな絵と衝突しないことがわかります。絵がどのように変化しても、グレーと白と合わせることができます。そのため、カラフルな絵は白い背景と縁に対してより目を引くようになり、写真などの重要な情報を視覚的に十分に表現することができます。 ![]() ![]() |
<<: リフレッシュリダイレクトを実現する HTML ヘッドタグメタ
>>: CSS3のbox-shadowプロパティの使い方の詳細な例
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
目次序文JavaScript find() メソッドJavaScript filter() メソッド...
編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...
FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...
この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...
最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...
目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...
序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...
目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...
1 はじめにデータベース内のデータを操作するための SQL 文を記述するときに、いくつかの不快な問題...
1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...