-
Web サイトをより良く、W3C 標準に適合させ、優れたユーザー エクスペリエンスを実現するにはどうすればよいでしょうか? これは多くの Web ページ制作者が直面している問題であり、Netgather Web マスターが最終的に次のような結果をもたらした問題でもあります。長期的な実践作業において、この記事が皆さんのお役に立てば幸いです。欠点があれば修正してください。
1. ウェブサイトのテーマを理解し、ウェブサイトに表示されるコンテンツと閲覧グループの大半を明確にする
ユーザーにとって有益な Web サイトを構築したい場合は、Web サイトのデザイン全体において、ユーザーが何を必要としているかを最初に考慮する必要があります。すべてはこの側面を中心に行う必要があります。ユーザーが欲しいものをすぐに入手できない場合、またはサイトが使いにくい場合、そのサイトは失敗です。ユーザーは失望し、二度と Web サイトにログインできなくなる可能性があります。小さな例: 株の Web サイトを作成したいが、その Web サイトのフォント サイズが 12 ピクセルである場合、考えてみてください。自宅で退職して株で投機する老人の数は、たとえあなたの Web サイトであっても、少なくありません。内容 どんなに優れていても、鋭くても、モニターに虫眼鏡をかざしてウェブサイトを見ることは不可能であり、その結果、多くのユーザーを失うだけです。
2. 合理的なカラーマッチング
Webデザイナーにとって、どのようなWebサイトを作りたいかが決まったら、そのテーマをより合理的に反映するために色を選択したり、レイアウトしたりするプロセスを経る必要があります。個人的には、非常にパーソナライズされた Web サイトを構築していないのであれば、カラーマッチングは難しい作業ではないと思います。まず、メインカラーを特定します。実際、業界の色の特性はそれほど重要ではありません。業界とカラー マッチングの関係を生み出すのは、人々の認識だけです。たとえば、ホテルの Web サイトを構築している場合、当然、それを赤にすることはできません。 ? 実際のところ、これは人々の認識によるもので、私たち二人とも赤はお祝いの色であり、したがって葬儀場にはふさわしくないと考えていたからです。たとえば、一般にテクノロジーまたはテクノロジーベースの Web サイトには青が適しており、女性的な Web サイトにはピンクが適しています。 2番目に、補助色と仕上げ色 ウェブサイトのメインカラーを確認するには、補助色と仕上げ色も同じ色の組み合わせと隣接する色の組み合わせを使用することがほとんどです。隣接カラー マッチングは、メイン カラーの透明度、彩度、明暗を変更することによって得られます。隣接カラー マッチングは、カラー ホイール上の隣接する色 (赤とオレンジなど) を取得することによって得られます。仕上げ色は通常、Web ページのより重要なコンテンツやボタンで使用され、Web ページの視覚的な疲労を解消します。過度の外観は避けるのが合理的です。そうしないと逆効果になります。
3. 優れた Web レイアウト
Web ページのレイアウトで把握すべき要素は、明確な優先順位、調整と整頓、ユーザーの視覚的習慣の尊重、およびコンテンツの合理的な配置です。ユーザーが望むものをできるだけ最初に表示し、潜在的な誘導ユーザーの行動に注意を払います。ことわざにあるように、「良い記憶力は悪いペンほど優れているわけではない」 Web サイトのインターフェイスをデザインするときは、まず鉛筆を使用して Web サイトのレイアウトをスケッチし、目的を達成した後に描画ソフトウェアを使用して作成し、修正する必要があります。望ましい効果。デザインのレンダリングでは、できるだけ少ない大きなカラー ブロックを使用し、ナビゲーションを強調し、明確なセクションを設けて、すっきりとした、簡潔で、きちんとした、調和のとれた効果を実現します。たとえば、ナビゲーション バーにはマウス効果を適切に追加する必要があります。Web ページの線の色の違いは、存在するかどうかに関係なく、あまり目立たないようにしてください。画像とテキストの間隔は合理的かつ均一である必要があり、同じレベルのテキスト スタイルは統一されている必要があり、日常生活の物理的特性が尊重される必要があります (たとえば、照明が明るくなります)。片側が明るく、反対側が明るい、またはオブジェクトに巻き付くリボンのように、転換点はわずかに突き出ていて、微妙な丸い影を持つ必要があります)...
Webページレンダリングの制作が確認できましたら、HTMLページの制作を開始いたします。
4.Webページのタイトルとメタ
Web ページのタイトルとメタは、基本的な列とコンテンツ ページに基づいて作成する必要があります。サイト全体で同じ形式を使用しないでください。ヘッダー タグは、検索エンジンにほとんど影響を与えません。キーワードの積み重ね。
5.h1～h6タグの利用
ウェブページの h1 タグは 1 回だけ使用できます。 Web サイトのホーム ページ、チャンネル ページ、リスト ページでは、それぞれ Web サイト名、チャンネル名、列リスト名に h1 タグを使用できますが、Web サイトの記事詳細ページでは h1 タグを使用する必要があります。記事タイトルに使用させていただきます。 h2 ～ h6 タグは、Web サイトの階層に従って、ページ上で繰り返し使用できます。
6.CSSファイル
リンクを使用して外部から CSS ファイルをインポートしてみたり、CSS スタイルをリセットするためによく使用する Reset.css を記述してみます。 *{} の使用は避けてください。ファイル サイズを減らすには、1 つのスタイルを 1 行に記述して、クラス定義を使用し、さまざまなブラウザーでの CSS ハック手法を避けてください。
7.背景画像の最適化
ウェブサイトの実際のコンテンツに加えて、フレーム内で使用される画像は、実際の状況に応じて可能な限り CSS ファイルで定義する必要があり、読み込み速度を向上させるために、背景画像も可能な限りマージする必要があります。非常に小さな画像を広い領域にタイル表示しないことをお勧めします。
8.ページの入れ子を減らすためのdiv+cssレイアウト
div+css レイアウトを使用する目的は、ページ コードを削減し、Web サイトの構造を階層化し、コンテンツとプレゼンテーションを分離することです。ネストを減らすと、検索エンジンに優しいだけでなく、ページ サイズが削減され、その後のメンテナンスや変更が容易になります。
9. ページ js の最適化
マージ可能な JS ファイルが 1 つにマージされるため、大規模なループや過剰な階層参照が削減され、読み込みと実行速度が向上します。
10. デッドリンクや空の接続を避ける
見たい記事をクリックしただけで「このページは表示できません」と表示されたら、ユーザーはどんなにイライラするでしょう。
11. 適切なテキストとグラフィック
Web サイトを意図的に画像で埋めないでください。検索エンジンは alt 属性を除いて画像を認識しません。適切な場所に写真を追加すると、訪問者を惹きつけ、長い文章を読む疲れを軽減できます。
12. Web ページ画像の要件
画像表示が変形しないように、Web ページ画像に alt 属性と width および height 属性を追加します。
13. さまざまなブラウザで Web サイトをテストします。
より多くの人が Web サイトを正常に閲覧できるようにするには、さまざまな主流ブラウザでページをテストし、Web サイトが正常に動作することを確認してください。
14. W3C 検証に合格しました。
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
著者トマトのパーソナルスペース