分享
 
 
 

从豆瓣(douban.com)网站设计谈网站重构

王朝html/css/js·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

douban.com非常精巧的应用了div+css,并且通过色系的运用,最大限度减少图片等等方式既使得网站页面清新可人,而且可以最大限度的压缩了网页的大小,从而使得访问的效率得到了最大化。

第一次看douban.com,有一种拿着“读书”杂志在手上阅读的感觉,很素雅,好像还有那么点书香气息。被中国式网站强奸得都习以为常,以为网站也就这样而且也只能这样,无疑好多人第一次看到douban.com的时候都会被他的网站的简洁所触动,都会感觉眼前一亮!为什么会这样呢,于是有些想法,来看看douban.com的网站设计方面的东西,看看他到底是怎么做的呢:

1、采用div+css的页面技术,从”网站重构“一书翻译以来,此种布局方式已经开始深入人心,好处不多说(可以访问ajie的w3cn.org 了解),可说web2.0必备。

2、通过色块底色来突出整块内容,重要颜色有浅粉,浅蓝,和白色底结合起来,非常清爽。

3、douban.com的核心是书籍、音乐、电影和用户(小组),都采用缩略图,用户(小组)的缩略图小一些。前三者网上的图片一般都比较好看,也必须要大一些,后者因为可以上传,设计成更小的图,能使得图片显得好看。

4、除上面以外,douban对图片及其吝啬,几乎没有。连用户发评论,发帖都不可发图片。这样好处是非常明显的,一个能够使得用户专注在文字上,而图片部分都和网站核心相关,不会产生无关的东西。另外,使得网站访问速度非常快。

5、不管什么页面都是采用相同布局。布局采用上中下方式。最上面为导航;中间为2列方式,左边为页面核心内容,右面为辅助和相关功能和信息;下面是站务导航。所有导航同样没有一张图片。

6、样式表使用上douban也匠心独运,链接的选都是深蓝反白,点上是橙色,删除是深红反白,书籍/音乐/电影使用深红反白,功能说明和站点书签 icon是绿色,推荐的星星是红色,剩下的就是永恒不变的黑色了。整个颜色围绕蓝色和红色色系以及绿色展开。这个和douban的logo能符合在一起,非常的协调。

7、button使用的很少,不过我决定既然button都这么少了,还不如全部不用了,这样更好!

8、豆瓣的页面长度,每个页面非常短,一般2页,不超过3页。我一直认为太长的页面会使得用户失去耐心,而2-3页是最好的选择。之所以有这个长页面只不过是门户网站想多几个广告位置的做法,并不是每个网站都需要这样。

9、广告,豆瓣不同于其他网站,不提供花哨的广告位,目前只有google文字广告和“读书”,“读者”的文字广告,我想他以后也只会提供文字链接广告,如果提供了传统的图片、flash广告,整个站点都会变样。

10、不使用弹出窗口,这点刚开始不太习惯,后来我研究觉得这个应该跟网站受众群有关系,大部分都是爱好读书、音乐、电影者,所以让用户尽量顺着线路走完还是比较好的,因为这些东西我看没人都是跳着去欣赏的。因此我认为不习惯不弹出窗口的,可能也不太容易真正在douban上长久安家,注定也不是 douban的核心用户。

总体来说,douban.com非常精巧的应用了div+css,并且通过色系的运用,最大限度减少图片等等方式既使得网站页面清新可人,而且可以最大限度的压缩了网页的大小,从而使得访问的效率得到了最大化。因为页面内几乎没有垃圾信息,从而使得google检索起来都非常有效率,而每页的相关使得整站对检索机器人也是非常友好。ui布局上,整个网站统一布局,非常容易上手,不容易让用户迷失。豆瓣的ui哲学我想跟开发者使用python也可能有关系,python是一种通过缩进来进行功能逻辑快的编排,加上python本身的精悍,从而使得python程序非常的简约明了。从这个角度说豆瓣布局可以看作python程序的编排,豆瓣的理念也可以看作python的理念。

如果说要douban网站风格属于什么流派,我想豆瓣应该是属于google的简约派!当然不能说是照搬,毕竟这不同于早期我们抄欧美黑乎乎的很商业的风格,近2年抄韩国大色块大图大flash模版的那种做法。我觉得google的简约有四个关键点:简单(够用的功能,包括页面导航)、易用(简单就入手,交互和ui)、体贴(贴近用户心理)、专注(基于业务本身),在此基础上加入自己的网站行业特性,是否意味着国内web2.0网站重构的可能的趋势呢?

ps 我的douban id : http://www.douban.com/people/redeye/

原文:http://home.donews.com/donews/article/8/87717.html

作者:王宗义 来源:Donews

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有