`
adong
  • 浏览: 35977 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

顾豆瓣有感

阅读更多
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网站重构的可能的趋势呢?
分享到:
评论

相关推荐

    微信小程序仿豆瓣电影源码

    微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小...

    PHP仿豆瓣小组.zip

    PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿...

    微信小程序 豆瓣电影 (源码)

    微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣...

    小程序源码 豆瓣电影 (代码+截图)

    小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 ...

    豆瓣镜像, 豆瓣镜像源,用于python包安装指定下载源网站

    豆瓣镜像源

    微信小程序demo:豆瓣(源代码+截图)

    微信小程序demo:豆瓣(源代码+截图)微信小程序demo:豆瓣(源代码+截图)微信小程序demo:豆瓣(源代码+截图)微信小程序demo:豆瓣(源代码+截图)微信小程序demo:豆瓣(源代码+截图)微信小程序demo:豆瓣(源代码+截图)...

    基于微信小程序,构建的豆瓣电影项目,接口访问来自豆瓣api,目前功能有 搜索功能 下拉刷新 上拉加载

    基于微信小程序,构建的豆瓣电影项目,接口访问来自豆瓣api,目前功能有 搜索功能 下拉刷新 上拉加载 功能说明 接口访问来自豆瓣api,目前功能有 搜索功能 下拉刷新 上拉加载 代码说明 部分采用es6语言,组件化,...

    豆瓣的相关资料

    【标题】:“豆瓣的相关资料” 【内容详解】 豆瓣(Douban)是中国互联网上一个集书影音评分、评论和分享的平台,它以其独特的社区氛围和用户参与度著称。作为一个全面了解和探讨豆瓣的起点,我们可以从以下几个...

    微信小程序——豆瓣图书(截图+源码).zip

    微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip ...

    使用动态IP池+cookie爬取豆瓣豆瓣影评数据

    本教程将探讨如何利用动态IP池和cookie来爬取豆瓣网站上的影评数据,以实现更高效、稳定的数据抓取。 首先,我们需要了解动态IP池的概念。动态IP池是一个能够提供大量不同IP地址的系统,它在爬虫工作时可以频繁更换...

    重磅:豆瓣电影ID大全

    电影,电视剧,综艺等影视资源豆瓣ID,部分链接需要登录豆瓣才能打开哦~! 共计8W多条,适用于豆瓣信息采集!

    豆瓣api测试 豆瓣api测试

    豆瓣API是豆瓣平台提供的一种服务,允许开发者通过编程方式获取豆瓣网站上的各种数据,如电影、书籍、音乐等资源的信息,用户评论,评分等。这篇内容将深入探讨豆瓣API的测试及其重要性。 首先,我们来理解什么是...

    400+豆瓣验证码

    在本资源中,“400+豆瓣验证码”提供了400张来自豆瓣网站的登录和发帖时的验证码图片,这些图片可用于机器学习和图像识别的研究与学习。 首先,我们要理解验证码的基本原理。验证码通常由一串随机字符组成,这些...

    小程序源码 豆瓣图书 (代码+截图)

    小程序源码 豆瓣图书 (代码+截图)小程序源码 豆瓣图书 (代码+截图)小程序源码 豆瓣图书 (代码+截图)小程序源码 豆瓣图书 (代码+截图)小程序源码 豆瓣图书 (代码+截图)小程序源码 豆瓣图书 (代码+截图)小程序源码 ...

    豆瓣FM豆瓣音乐

    一款豆瓣音乐软件,多种类型的音乐,内容丰富

    wordpress豆瓣电影图书分享插件

    **WordPress豆瓣电影图书分享插件详解** WordPress是一个广泛使用的开源内容管理系统,其强大的扩展性和丰富的插件库使得网站开发者能够轻松实现各种功能。"WordPress豆瓣电影、图书、音乐和相册展示插件"是一个专...

    微信小程序——豆瓣电影(截图+源码).zip

    微信小程序——豆瓣电影(截图+源码).zip 微信小程序——豆瓣电影(截图+源码).zip 微信小程序——豆瓣电影(截图+源码).zip 微信小程序——豆瓣电影(截图+源码).zip 微信小程序——豆瓣电影(截图+源码).zip ...

    豆瓣电影top250爬虫

    "豆瓣电影top250爬虫"项目是一个专门针对豆瓣网站上电影Top250排行榜的数据抓取程序。这个爬虫的独特之处在于,它没有依赖像BeautifulSoup这样的成熟的HTML解析库,而是采用了纯字符串搜索的方式来解析网页内容,这...

    vue框架仿豆瓣模板

    在"vue框架仿豆瓣模板"项目中,我们将会深入探讨如何利用Vue.js来构建一个类似豆瓣的Web应用程序界面。 首先,Vue.js的核心概念包括组件化、虚拟DOM和数据绑定。组件是Vue应用的基本构建块,可以复用并包含独立的...

    Hadoop豆瓣电影分析可视化源码

    豆瓣用户每天都在对“看过”的电影进行“很差”到“力荐”的评价,豆瓣根据每部影片看过的人数以及该影片所得的评价等综合数据,通过算法分析产生豆瓣电影 Top 250。 为了分析电影产业的发展趋势,本次实验需要对...

Global site tag (gtag.js) - Google Analytics