《网站重构》,豆瓣网页设计分析

《网站重构》,豆瓣网页设计分析,从豆瓣网站设计谈网站重构

本文主要从豆瓣网站的设计来介绍网站改造。

Douban.com巧妙地应用了div css,并通过使用颜色系统、最小化图片等方式,不仅使网站页面清新宜人,还最大限度地缩小了网页的大小,从而最大限度地提高了访问效率。

第一次看到douban.com,我有一种手里拿着一本《读书》杂志在读书的感觉。很素雅,似乎还有一点点书香气息。人们习惯了中文网站,以为网站就是这样,也只有这样。毫无疑问,很多人第一眼看到豆瓣网的网站都会被它的简洁所感动,会觉得眼前一亮!为什么会这样呢?所以我有一些想法。我们来看看豆瓣网的网站设计,看看他是怎么做的:

1.利用div css的页面技术,自从翻译了《网站重建》这本书之后,这种布局已经深入人心,优点不多(可以去阿杰的《w3cn.org》了解一下)。可以说web2.0是必须的。

2.通过色块背景色突出整个内容。重要的颜色是浅粉色,浅蓝色,白色背景,很清爽。

3.douban.com的核心是书籍、音乐、电影和用户(群),都采用缩略图,用户(群)的缩略图更小。前三张网上的图一般都好看,而且肯定也比较大。后者可以让图片好看,因为可以上传,可以设计成更小的图片。

4.除了以上,豆瓣对图片极其吝啬,几乎没有。用户即使评论或发帖也不能发图。这个优势非常明显。一个可以让用户专注于文字,而图片都是和网站核心相关的,不会产生任何不相关的东西。另外,网站访问速度很快。

5.无论什么页面在相同的布局中。布局是上上下下。最上面是导航;中间有两栏,左边是页面的核心内容,右边是辅助和相关的功能和信息;以下是站内导航。所有导航中也没有图片。

6.豆瓣在样式表的使用上也是别出心裁。链接都是深蓝色和白色,圆点是橙色,删除是深红色和白色,书籍/音乐/电影是深红色和白色,功能描述和网站书签图标是绿色,推荐的星星是红色,其余是永恒的黑色。整个颜色分布在蓝色、红色和绿色周围。豆瓣的这个logo能和它保持一致,很和谐。

7.按钮很少用,但我决定,既然按钮这么少,不如不要全部用。这样更好!

8.豆瓣的页面长度,每页都很短,一般2页,不超过3页。我一直认为页面太长会让用户失去耐心,2-3页是最好的选择。之所以会有这个长页面,只是门户网站想有更多的广告位,并不是每个网站都需要这个。

9.广告。豆瓣不像其他网站,不提供花哨的广告位。目前只有谷歌文字广告和“阅读”和“读者”的文字广告。我觉得他以后只会提供文字链接广告。如果提供传统的图片和flash广告,整个网站就不一样了。

10.不要用弹窗,我一开始不习惯。后来我觉得应该和网站的受众有关系。大部分都是喜欢看书,音乐,电影的人,所以用户还是尽量走路线比较好,因为我觉得没有人跳着去享受这些东西。所以,我觉得那些不习惯不弹窗的人,可能不太容易真正在豆瓣上长久立足,他们注定不是豆瓣的核心用户。

总的来说,douban.com熟练地应用了div css,并通过使用颜色系统、最小化图片等。不仅使网页清新宜人,而且最大限度地缩小了网页的大小,从而最大限度地提高了访问效率。由于页面中几乎没有垃圾信息,使得google搜索的效率非常高,每个页面的相关性使得整个站对搜索机器人非常友好。ui布局方面,整个网站有统一的布局,非常好用,用户不容易迷路。我觉得豆瓣的ui哲学可能也和开发者使用python有关系。python是一种通过缩进快速布局函数逻辑的方式,python本身的精粹性使得python程序非常简单明了。从这个角度来说,豆瓣的布局可以看作是python程序的布局,豆瓣的概念也可以看作是python的概念。

如果豆瓣网站的风格属于任何流派,我想豆瓣应该属于谷歌的简约派!当然也不能说是抄袭。毕竟这不同于我们早期照搬欧美黑商业风格的方式,也不同于最近两年照搬韩国的大色块、大画面、大闪光灯模板。我认为google的简单有四个关键点:简单(功能足够,包括页面导航)、易用(从简单、交互、ui入手)、体贴(贴近用户心理)、专注(基于业务本身)。在此基础上加入自己的网站行业特色是否意味着国内web2.0网站重构的可能趋势?

《网站重构》,豆瓣网页设计分析