Douban WebサイトデザインからWebサイト再構築の話_CSS/HTML

douban.com は div+css を非常に巧みに適用し、色の使用、写真の最小化などにより、ウェブサイトのページを新鮮で快適なものにするだけでなく、ウェブページのサイズを最大限に圧縮します。したがって、アクセス効率が最大化されます。

初めてdouban.comを読んだとき、まるで「読書」雑誌を手に持って読んでいるような気分になりました。とても上品で、ちょっと本っぽい感じがしました。私たちは皆、中国風の Web サイトにレイプされることに慣れており、これが Web サイトというものであり、このようなものでしかあり得ないと考えています。間違いなく、多くの人が初めて douban.com を見たとき、彼の Web サイトのシンプルさに感動するでしょう。そうすると目が光ります。なぜでしょう？それでは、douban.com の Web サイトのデザインを見てみましょう。

1. div+css ページ技術の使用。書籍「Web サイト再構成」の翻訳以来、このレイアウト方法は人々の心に深く根付き始めています。 (ajie の w3cn を参照してください)。 org で詳細を確認してください) が、Web2.0 には必須であると言えます。

2. カラーブロックの背景を使用して、コンテンツ全体を強調します。重要な色は、ライトピンク、ライトブルー、ホワイトの背景で、とても爽やかです。

3. douban.com の核となるのは書籍、音楽、映画、ユーザー (グループ) であり、すべてサムネイルが使用されており、ユーザー (グループ) のサムネイルは小さくなります。インターネット上の最初の 3 つの写真は一般に見栄えが良く、後者はアップロードして小さな写真にデザインできるため、見栄えがよくなります。

4. 上記に加えて、douban は写真に非常にケチで、ほとんどありません。コメントや投稿を投稿する場合でも、写真を投稿することはできません。この利点は非常に明白で、ユーザーはテキストに集中できる一方で、画像は Web サイトの核心に関連しており、無関係なものは生成されません。また、Webサイトのアクセス速度も非常に速いです。

5. どのページでも同じレイアウトが使用されます。レイアウトは上中下アプローチを採用しています。上部はナビゲーションで、中央は 2 列形式で、左側にページの主要なコンテンツ、右側に補助機能と関連情報、そしてその下にサイト ナビゲーションがあります。すべてのナビゲーションにも画像はありません。

6. Douban は、スタイル シートの使用にも工夫を凝らしています。リンクの選択は濃い青でハイライトされ、クリックはオレンジでハイライトされ、削除は濃い赤でハイライトされ、書籍/音楽/映画は濃い赤でハイライトされます。説明とサイトのブックマークアイコンは緑色、推奨される星は赤色、残りは永遠の黒色です。カラーパレット全体は、緑だけでなく青と赤の色合いを中心に展開しています。 Doubanのロゴともよく合っていて、とても統一感があります。

7. ボタンはほとんど使用されませんが、ボタンが少ないので、すべてを使用しないほうが良いと判断しました。

8. Douban のページの長さは非常に短く、通常は 2 ページ、最大でも 3 ページです。私は、ページが長すぎるとユーザーをイライラさせるので、2 ～ 3 ページが最良の選択であると常々信じてきました。この長いページがある理由は、ポータル Web サイトがより多くの広告掲載位置を必要としているだけで、すべての Web サイトがこれを必要とするわけではありません。

9. 広告、Douban は他の Web サイトと異なり、派手な広告スペースを提供していません。現時点では、Google テキスト広告と「Reading」と「Readers」向けのテキスト広告のみが提供されると思います。将来的には従来の画像とフラッシュ広告が提供され、サイト全体が変更されます。

10. ポップアップ ウィンドウを使用しないでください。最初はこれに慣れていませんでしたが、後で調べたところ、これは Web サイトの閲覧者に関係していることがわかりました。 、映画などを楽しみにしている人はいないと思うので、できるだけルートをたどるようにしてください。したがって、ポップアップウィンドウがないことに慣れていない人は、長く Douban に落ち着くことができない可能性があり、Douban のコアユーザーではない運命にあると思います。

一般的に、douban.com は div+css を非常に巧みに使用しており、色の使用、写真の最小化などにより、ウェブサイトのページを新鮮で快適なものにするだけでなく、ウェブページを最大限に圧縮します。 .サイズを大きくすることで、アクセス効率を最大化します。ページにはジャンク情報がほとんどないため、Google 検索は非常に効率的であり、各ページの関連性により、サイト全体が検索ロボットにとって非常に使いやすいものになっています。 UIレイアウトに関しては、Webサイト全体が統一されたレイアウトとなっており、非常に使いやすく、ユーザーにとって迷いにくいものになっています。 Douban の UI 哲学は、Python を使用する開発者にも関係があると思います。Python は、インデントによる関数ロジックの高速な配置と相まって、Python プログラムは非常にシンプルで明確です。この観点から見ると、Douban のレイアウトは Python プログラムの配列であると見ることができ、Douban の哲学は Python の哲学であるとも言えます。

Douban のウェブサイトのスタイルがどのジャンルに属するかというと、Douban は Google のミニマリスト スタイルに属すると思います。もちろん、これはダークなスタイルとは異なります。過去 2 年間にヨーロッパとアメリカでコピーしたコマーシャル スタイルは、大きなカラー ブロック、大きな写真、大きな写真を使用した韓国の Flash テンプレートをコピーするようなものです。 Google のシンプルさには、シンプルさ (ページ ナビゲーションを含む十分な機能)、使いやすさ (シンプルなインタラクションと UI から始めるだけ)、思いやり (ユーザー心理に近い)、焦点 (ビジネスそのものに基づく) の 4 つの重要なポイントがあると思います。これを踏まえて、自社のWebサイト業界の特徴を加えてみると、国内のWeb2.0によるWebサイト再構築の可能性はあるのでしょうか?