从豆瓣网站设计谈网站重构

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

赞 (0)

相关推荐

  • 从豆瓣网站设计谈网站重构

    douban.com非常精巧的应用了div+css,并且通过色系的运用,最大限度减少图片等等方式既使得网站页面清新可人,而且可以最大限度的压缩了网页的大小,从而使得访问的效率得到了最大化. 第一次看douban.com,有一种拿着"读书"杂志在手上阅读的感觉,很素雅,好像还有那么点书香气息.被中国式网站强奸得都习以为常,以为网站也就这样而且也只能这样,无疑好多人第一次看到douban.com的时候都会被他的网站的简洁所触动,都会感觉眼前一亮!为什么会这样呢,于是有些想法,来看看doub

  • 网站设计应注意的25条有利于排名的建议

    第一条:网站优化最重要的是网站内容要准确定位客户,这一点是网站是否能吸引您真正期望的访问者的直接因素. 第二条:精心选择和网站主题及所瞄准的时常相关的关键字. 第三条:尽量在网站内容中利用选择的关键字,值得注意的是,关键字尽量出现在内容的前面部分. 第四条:网站的标题中一定要包含您认为最为重要的关键字. 第五条:在头部标记中尽量运用关键字,将帮助网站在基于该关键字在搜索结果中的排名. 第六条:尽量为图像加上ALT标记,在该标记中包含必要的关键字. 第七条:千万别让关键字的颜色和网页背景颜色相同,

  • 网站设计中25条有利于排名的建议

    第一条:网站优化最重要的是网站内容要准确定位客户,这一点是网站是否能吸引您真正期望的访问者的直接因素. 第二条:精心选择和网站主题及所瞄准的时常相关的关键字. 第三条:尽量在网站内容中利用选择的关键字,值得注意的是,关键字尽量出现在内容的前面部分. 第四条:网站的标题中一定要包含您认为最为重要的关键字. 第五条:在头部标记中尽量运用关键字,将帮助网站在基于该关键字在搜索结果中的排名. 第六条:尽量为图像加上ALT标记,在该标记中包含必要的关键字. 第七条:千万别让关键字的颜色和网页背景颜色相同,

  • 大型网站设计注意事项大全

    1.HTML静态化 其实大家都知道,效率最高.消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法.但是对于大量内容并且频繁更新的网站,我们无法全部手动去挨个实现,于是出现了我们常见的信息发布系统CMS,像我们常访问的各个门户站点的新闻频道,甚至他们的其他频道,都是通过信息发布系统来管理和实现的,信息发布系统可以实现最简单的信息录入自动生成静态页面,还能具备频道管理.权限管理.自动抓取等功能,对于一个大型网站来说,拥有一

  • 网站结构和网站优化关系分析

    游戏.下载等等都有自己独特的架构.如果网站的结构没有设置好的话,会严重影响网站的效果.但并不是网站结构设计的好就什么问题都解决了,要把网站优化的理念也设计进去,才是一个成功的网站结构. 网站优化中的网站结构优化对网站到底起什么作用呢?首先GOOGLE会用PR值来衡量网站的结构合理性,会赋予网站一个数值,数值越高说明你的网站结构更合理,GOOGLE就会收录更多的页面,带来更多的流量.其次网站结构会影响搜索引擎在网站页面上抓取的结果,也就控制了收录页面的数量和质量.如果网站结构合理又是什么样,说白了

  • 什么是真正的网站优化（网站优化的真正含义）？

    根据新竞争力网络营销管理顾问的研究,网站优化就是通过对网站功能.网站结构.网页布局.网站内容等要素的合理设计,使得网站内容和功能表现形式达到对用户友好并易于宣传推广的最佳效果,充分发挥网站的网络营销价值.  网站优化设计的含义具体表现在三个方面:对用户优化.对网络环境(搜索引擎等)优化,以及对网站运营维护的优化. (1)对用户优化: 经过网站的优化设计,用户可以方便地浏览网站的信息.使用网站的服务.具体表现是:以用户需求为导向,网站导航方便,网页下载速度尽可能快,网页布局合理并且适合

  • 浅谈订单重构之 MySQL 分库分表实战篇

    浅谈订单重构之 MySQL 分库分表实战篇

    目录 一.目标 二.环境准备 1.基本信息 2.数据库环境准备 3.建库 & 导入分表 三.配置&实践 1.pom文件 2.常量配置 3.yml 配置 4.分库分表策略 5.dao层编写 6.单元测试 四.总结 一.目标 本文将完成如下目标: 分表数量: 256    分库数量: 4 以用户ID(user_id) 为数据库分片Key 最后测试订单创建,更新,删除, 单订单号查询,根据user_id查询列表操作. 架构图: 表结构如下: CREATE TABLE `order_XXX` (

  • PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc

    Q:越来越多Web 2.0网站走向应用平台,你认为打造这类平台的关键为何? A:简单来看,应用平台就是API,任何Ajax或 Web 2.0类型的网站,都是在应用平台上运用了API来创造出视觉介面的互动效果.例如Yahoo Mail,透过简单的Request呼叫,来读取後续的信件.打造这类网站,如何规画解决问题的方式,会决定了网站未来的扩充性(Scalability),而非效能决定网站的发展. Q:如何规画网站架构,才会具有扩充性? A:将一个网站应用,分成几十个独立小程式,前端透过 API提供

  • asp.net小谈网站性能优化

    当然,网站性能优化是多方面的,这里先谈一下这些天来的所获: 1.书写代码的习惯: 再复杂的逻辑,也是从最简单的开始.在书写代码的过程中,很多不好的规范都会影响网站的性能: 以下是整理出来的些许代码习惯: 1)字符串的比较 用 string.Empty 代替 " " 2)在遍历过程中,先定义好计数变量, 再遍历, 这样会减少每次遍历就分配一次内存空间: 复制代码 代码如下: int i; for( i=0; i<100;i++) { // codeing } 3)同样的,用 Str

  • 70+漂亮且极具亲和力的导航菜单设计国外网站推荐

    70+漂亮且极具亲和力的导航菜单设计国外网站推荐

    导航菜单应当足够简单以让用户快速了解它,但还要包含一些必要的元素来引导用户浏览整个网站--融入一些有创意且漂亮的设计. 向大家推荐的70款优秀的导航菜单,有些是基于CSS设计的,有些是基于CSS+JavaScript的菜单,还有些是基于Flash的导航菜单设计,它们都有一个共同点:那就是它们都极具创意.界面对用户有好的,且完美的与网站的整体风格融合在一起. 1.基于CSS的导航菜单设计 Loodo让网站更有感觉的华丽的菜单 Acko.netSteven将他网站的导航菜单设计成了不同寻常的透视效果

随机推荐