收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 8691|回复: 35

白宫网站改版之深度剖析

[复制链接]
发表于 2009-2-3 10:10:32 | 显示全部楼层 |阅读模式
朋友推荐此文,个人感觉有点意思,特拿来与大家分享。

白宫网站

感谢COMSHARP CMS的投递
新闻来源:Smashing Magazine
美国政府是一个品牌,当白宫易主,人们希望看到一些新东西。这不是换个招牌那么简单,人们期待奥巴马兑现精选时的诺言,虽然这一切需要时间,不过,人们已经从白宫网站的改版中看到了巨大的变化。本文对新的白宫网站进行剖析,并同布什时代的白宫网站做一对比,两个政府的变化已经体现在新网站的设计,内容与技术当中。

视觉设计与版式
先看看布什时代的白宫网站(如下图),使用了单一背景色,以及比较暗淡的配色,白色,浅灰,海军蓝。Logo 位于左上角,很显眼,导航区占据了1/3 的页面空间,还略有点 CSS 对齐问题。



现在的白宫网站,白宫的标志低调了很多,位于页面主体内容之外,原先占据1/3空间的导航区不见了,而是大量使用了 jQuery 实现动态导航,jQuery 在菜单,Banner 图片等场合被大量使用。



微妙的渐变色以及水洗效果被保留下来,不过,蓝色变得更广更深。还在鼠标盘旋菜单中引入了红色元素。有趣的是,主导航条的左边加了个小小的星条旗标志,是否在暗示竞选期间的“星条旗胸章”之争?


在页面右上角,出现了邮件列表注册框,那个“GET UPDATES” 按钮的色调据说和奥巴马的肤色是一样的(美国人八卦起来也很无敌)。新设计中加入了一些古典元素,主背景中的五角星与建筑细节,以及页脚上方的灰色总统章。




页面侧边栏的配色和整个站点的配色呈现一致的低饱和度颜色,按钮同样适用咖啡色系,略呈渐变色。



字体
正文使用的是 Lucida Sans 字体,标题用的是 Georgia。这些老式字体为网站增添了些许古典与怀旧倾向。由于 sans-serif 字体在 Web 上的可读性,主要内容的字体使用了 Arial,不过图形化页首的文字不太清楚,似乎是加粗的 Serif 字体,用的是老式传单的字体风格,小写的代词,加全部大写的名词。



网站结构
从结构上看,整个站点显示了一种干净的结构,从上到下,从左到右。页首部分的幻灯式新闻图片带来华丽的视觉感受,左边关联的文字内容,可以让低分辨率用户,或使用代用浏览器(如屏幕阅读器)的用户在没看到图片之前就能理解图片的意思。

在800x600屏幕分辨率下,屏幕上只会显示到那个蓝色的内容标题,在这个分辨率下,页面并不左右滚动,但新闻标题部分就成了视觉的焦点。

新闻区域的下方,是三栏结构,分别为 Blog, 搜索与 Agenda,以及一个视频区域。
易用性与可访问性
网站的易用性方面似乎走了不少弯路,那个搜索框位于新闻去三栏结构的中间,使用的都是浅灰配色,很难被发现。右上角的邮件列表注册倒是很显眼,不过,那似乎应该是搜索框的位置。

文字的缩放可以正确地进行,不过主导航条是图片式的,这个缩放不了,但下拉菜单以及后面的页脚部分的文字都可以正确的缩放(当然在 IE6 中不行 -译者)。考虑到白宫网站的访问之广泛,如果对读屏软件更友好一些会更好,目前,主导航条的下拉菜单是无法被读屏软件读取的,其页脚部分的链接也要等整个页面全部完成后才会读到。


网站中的图片也做了很好的优化,虽然对拨号用户来说,不是问题,不过如果能提供一个纯文字版,也许会更好地实现可访问性。
能否通过验证?
恐怕不成。在 CSS2.1 验证测试中,有41处错误和1840个警告。

不过,从感官来说,新网站有了很大的改观,所使用的技术,风格都显示出美国政府正在努力改观其品牌形象与透明度,新的白宫网站走向一种新的,良好的设计路线。
原文作者 Katie Kelly 白天做 Web 前端开发设计,晚上沉迷于视频游戏。15年的经验让她欣赏干净的代码,友好的内容,以及客户导向的电子商务。在不和怪兽作战的时候,她在自己的网站 mediapyre 写一些 ASP.NET 设计方面的文章。

本文国际来源:http://www.smashingmagazine.com/ ... he-change-has-come/
中文翻译来源:COMSHARP CMS 官方网站

[[i] 本帖最后由 BlueSpirit 于 2009-2-3 10:11 编辑 ]
发表于 2009-2-3 15:05:40 | 显示全部楼层
很不错,奥巴马一上台,连网站都得重做。呵呵!~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 15:25:42 | 显示全部楼层
原帖由 [i]ibio 于 2009-2-3 15:05 发表
很不错,奥巴马一上台,连网站都得重做。呵呵!~

 我感觉改版后的网站比以前的有朝气
回复 支持 反对

使用道具 举报

发表于 2009-2-3 20:30:43 | 显示全部楼层
看来是我没品味了。还是喜欢老版的样式。记得第一次上布什的白宫网时,当时就觉得那种清淡的风格真是“惊为天人”。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 20:50:41 | 显示全部楼层
原帖由 [i]wangruisc 于 2009-2-3 20:30 发表
看来是我没品味了。还是喜欢老版的样式。记得第一次上布什的白宫网时,当时就觉得那种清淡的风格真是“惊为天人”。

这似乎跟品味无关哦,虽然感觉新鲜,但我到现在还有点不适应,曾经也很喜欢原来的那版
回复 支持 反对

使用道具 举报

发表于 2009-2-3 22:17:34 | 显示全部楼层
我是出来打酱油的。
回复 支持 反对

使用道具 举报

发表于 2009-2-4 00:25:46 | 显示全部楼层
好文章。政治化,也更人性化!
回复 支持 反对

使用道具 举报

发表于 2009-2-4 10:50:31 | 显示全部楼层
好文章,很喜欢这样深度分析的文章
回复 支持 反对

使用道具 举报

发表于 2009-2-5 02:04:09 | 显示全部楼层
延续了奥竞选使用的网站风格,很奥巴马
回复 支持 反对

使用道具 举报

发表于 2009-2-5 10:30:00 | 显示全部楼层
说实话,前段时间看了《阿甘正传》和《国家宝藏》,好怕总统被刺杀的悲剧再次上演。所在Smashing Magazine上看到这篇文章的时候就老想它更低调点就好了。
不过,肯定是我想多了~~哈哈~
回复 支持 反对

使用道具 举报

发表于 2009-2-11 15:41:29 | 显示全部楼层
从设计角度和用户体验角度讲还是很不错的啊。
回复 支持 反对

使用道具 举报

发表于 2009-2-11 18:14:47 | 显示全部楼层
国外网站的那种气质。。。
唉国内网站的差距好大
回复 支持 反对

使用道具 举报

发表于 2009-2-12 10:35:40 | 显示全部楼层
白宫的新网站是很棒的

不像国内的某政府网站,只有一张图片……一个链接都没有,完全浏览器兼容
回复 支持 反对

使用道具 举报

发表于 2009-2-12 11:22:39 | 显示全部楼层
大气,简介,舒适,成熟,自信。
果然不一样啊
回复 支持 反对

使用道具 举报

发表于 2009-2-15 20:04:25 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2009-2-16 11:57:36 | 显示全部楼层
比较简洁,还是不错,能不能找到布什时代的网站截图?
回复 支持 反对

使用道具 举报

发表于 2009-2-17 09:47:54 | 显示全部楼层
感觉布什时代的也非常不错
回复 支持 反对

使用道具 举报

发表于 2009-2-17 10:46:50 | 显示全部楼层
学习了
回复 支持 反对

使用道具 举报

发表于 2009-2-17 13:58:50 | 显示全部楼层
又改版了。
http://www.whitehouse.gov/
homepage.jpg
回复 支持 反对

使用道具 举报

发表于 2009-2-27 00:26:51 | 显示全部楼层
jQ出了多久我就用了多久.........
回复 支持 反对

使用道具 举报

发表于 2009-2-27 11:09:04 | 显示全部楼层
呵呵!!!!!!!!!!!!!!
回复 支持 反对

使用道具 举报

发表于 2009-3-2 10:37:55 | 显示全部楼层
有人讨论过伯克希尔哈撒韦公司的主页吗?

感觉那个才叫简介。内容之上。
回复 支持 反对

使用道具 举报

发表于 2009-3-7 11:16:34 | 显示全部楼层
最佩服的是,简洁大方耐看!
为什么国内的网站,无论哪个都复杂得多呢?
回复 支持 反对

使用道具 举报

发表于 2009-3-7 23:27:16 | 显示全部楼层
解析的很有深度~~
回复 支持 反对

使用道具 举报

发表于 2009-3-13 17:54:49 | 显示全部楼层
软文
回复 支持 反对

使用道具 举报

发表于 2009-3-13 19:06:53 | 显示全部楼层
废话不想多说,中国政府各级网站要什么时候能做到这10%的质量,我请全坛子吃火锅。
回复 支持 反对

使用道具 举报

发表于 2009-3-29 09:05:14 | 显示全部楼层
布什虽然不是什么好东西,但他那个时代的网站似乎更平和一些
奥巴马网站似乎更多注重的是政府的威严和权力
回复 支持 反对

使用道具 举报

发表于 2009-4-16 09:45:11 | 显示全部楼层
原帖由 [i]zilly 于 2009-3-29 09:05 发表
布什虽然不是什么好东西,但他那个时代的网站似乎更平和一些
奥巴马网站似乎更多注重的是政府的威严和权力

“小树丛”的功过几十年后可能会有很不同的评价,不过他在任的网站的确很平和一些。
回复 支持 反对

使用道具 举报

发表于 2009-4-16 11:43:17 | 显示全部楼层
分析的不错。。这种软文评得让人可以接受。!!
回复 支持 反对

使用道具 举报

发表于 2009-4-17 18:50:56 | 显示全部楼层
网站传达一届政府的理念,这一点他们做得很不错。。。照这样他们可以四年改一次版了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-27 19:50 , Processed in 0.141245 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表