Parlons de la reconstruction de sites Web à partir de la conception du site Web Douban_CSS/HTML

douban.com applique très intelligemment div+css, et grâce à l'utilisation de couleurs, en minimisant les images, etc., cela rend non seulement la page du site Web fraîche et agréable, mais compresse également la taille de la page Web au maximum, ce qui rend l'efficacité de l'accès maximisée.

Quand j'ai lu douban.com pour la première fois, j'avais l'impression de tenir un magazine de « lecture » dans ma main et de le lire. Il était très élégant et semblait avoir une saveur un peu livresque. Nous sommes tous habitués à être violés par des sites Web à la chinoise, pensant que c'est ce que sont les sites Web et ne peuvent être que ainsi. Sans aucun doute, beaucoup de gens seront touchés par la simplicité de son site Web lorsqu'ils verront douban.com pour la première fois. , et leurs yeux s'illumineront ! Pourquoi ? Ce sera comme ça, alors j'ai quelques idées. Jetons un coup d'œil au design du site douban.com et voyons comment il fait :

1. Utilisation de la technologie de page div+css. Depuis la traduction du livre "Website Reconstruction", cette méthode de mise en page a commencé à être profondément ancrée dans le cœur des gens. Il n'y a pas beaucoup d'avantages à dire (vous pouvez visiter le w3cn d'ajie. org pour en savoir plus), mais on peut dire qu'il s'agit d'un incontournable du web2.0.

2. Utilisez l'arrière-plan du bloc de couleur pour mettre en évidence l'ensemble du contenu. Les couleurs importantes sont le fond rose clair, bleu clair et blanc, ce qui est très rafraîchissant.

3. Le cœur de douban.com est constitué de livres, de musique, de films et d'utilisateurs (groupes), tous utilisant des vignettes, et les vignettes des utilisateurs (groupes) sont plus petites. Les images sur Internet des trois premières sont généralement plus belles et doivent être plus grandes. Ces dernières peuvent être téléchargées et conçues en images plus petites, ce qui peut améliorer l'apparence des images.

4. En plus de ce qui précède, douban est extrêmement avare de photos, presque aucune. Les utilisateurs ne sont pas autorisés à publier des photos même lorsqu'ils publient des commentaires ou des publications. Les avantages de ceci sont très évidents : cela permet aux utilisateurs de se concentrer sur le texte, tandis que les images sont liées au cœur du site Web et ne produiront pas d'éléments non pertinents. De plus, la vitesse d’accès au site Web est très rapide.

5. Quelle que soit la page, la même mise en page est utilisée. La mise en page adopte une approche haut-mi-bas. Le haut est la navigation ; le milieu est un format à 2 colonnes, avec le contenu principal de la page à gauche, les fonctions et informations auxiliaires et associées à droite et la navigation du site en bas ; Toute navigation n'a pas non plus d'image.

6. Douban est également ingénieux dans l'utilisation des feuilles de style. Les sélections de liens sont surlignées en bleu foncé, les clics sont surlignés en orange, les suppressions sont surlignées en rouge foncé et les livres/musique/films sont surlignés en rouge foncé. descriptions et L'icône du signet du site est verte, les étoiles recommandées sont rouges et le reste est noir éternel. Toute la palette de couleurs s'articule autour des nuances de bleu et de rouge ainsi que du vert. Cela correspond bien au logo de Douban et est très coordonné.

7. Les boutons sont rarement utilisés, mais j'ai décidé que comme il y a si peu de boutons, il vaut mieux ne pas les utiliser tous, c'est mieux !

8. La longueur des pages de Douban est très courte, généralement 2 pages et pas plus de 3 pages. J'ai toujours pensé que les pages trop longues rendraient les utilisateurs impatients, et 2-3 pages sont le meilleur choix. La raison pour laquelle cette page est longue est simplement parce que le site portail souhaite avoir plus de positions publicitaires. Tous les sites Web n'en ont pas besoin.

9. Publicité, Douban est différent des autres sites Web en ce sens qu'il ne propose pas d'espaces publicitaires sophistiqués. Actuellement, il ne propose que des annonces textuelles Google et des annonces textuelles pour "Lecture" et "Lecteurs". annonces à l'avenir. Si des images traditionnelles et des annonces flash sont fournies, l'ensemble du site changera.

10. N'utilisez pas de fenêtres pop-up. Je n'y étais pas habitué au début. Plus tard, j'ai fait des recherches et j'ai découvert que cela devait être lié au public du site Web. La plupart d'entre eux sont des gens qui aiment lire et écouter de la musique. , et des films, alors laissez les utilisateurs suivre le parcours autant que possible. Il vaut mieux terminer la promenade, car je ne pense pas que quiconque saute pour apprécier ces choses. Par conséquent, je pense que ceux qui ne sont pas habitués à ne pas avoir de fenêtres pop-up ne pourront peut-être pas vraiment s'installer sur Douban avant longtemps, et ils sont destinés à ne pas être les principaux utilisateurs de Douban.

En général, douban.com utilise très habilement div+css, et grâce à l'utilisation de couleurs, en minimisant les images, etc., cela rend non seulement la page du site Web fraîche et agréable, mais compresse également la page Web au maximum. . taille, maximisant ainsi l’efficacité de l’accès. Parce qu'il n'y a presque aucune information indésirable dans la page, la recherche Google est très efficace et la pertinence de chaque page rend l'ensemble du site très convivial pour les robots de recherche. En termes de présentation de l'interface utilisateur, l'ensemble du site Web a une présentation unifiée, très facile à utiliser et difficile à perdre pour les utilisateurs. Je pense que la philosophie de l'interface utilisateur de Douban peut aussi avoir quelque chose à voir avec les développeurs utilisant Python. Python est un arrangement rapide de logique fonctionnelle via l'indentation. Couplé à la simplicité de Python lui-même, les programmes Python sont très simples et clairs. De ce point de vue, la disposition de Douban peut être considérée comme l'agencement des programmes Python, et la philosophie de Douban peut également être considérée comme la philosophie de Python.

Si vous voulez dire à quel genre appartient le style du site Douban, je pense que Douban devrait appartenir au style minimaliste de Google. Bien sûr, on ne peut pas dire qu'il s'agit d'une copie. Après tout, c'est différent du style sombre et ! style commercial que nous avons copié en Europe et en Amérique au cours des 2 dernières années. C'est comme copier des modèles flash coréens avec de gros blocs de couleurs, de grandes images et de grandes images. Je pense que la simplicité de Google comporte quatre points clés : la simplicité (suffisamment de fonctions, y compris la navigation dans les pages), la facilité d'utilisation (il suffit de commencer par des interactions et une interface utilisateur simples), la prévenance (proche de la psychologie de l'utilisateur) et la concentration (basée sur l'entreprise elle-même). Sur cette base, en ajoutant les caractéristiques de votre propre secteur de site Web, cela signifie-t-il une tendance possible à la reconstruction de sites Web nationaux Web2.0 ?