当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 从豆瓣网站设计谈网站重构

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 从豆瓣网站设计谈网站重构


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 48 ::
收藏到网摘: n/a

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

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

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网站重构的可能的趋势呢?