<?xml version="1.0" encoding="UTF-8"?><!-- generator="WordPress/2.9" -->
<rss version="0.92">
<channel>
	<title>CSSZone</title>
	<link>http://www.csszone.net</link>
	<description>专注前端交互,专注用户体验</description>
	<lastBuildDate>Mon, 23 Aug 2010 13:35:20 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	
	<item>
		<title>用户体验杂谈</title>
		<description><![CDATA[很久没有这样能闲下来思考一些问题和抒发一下内心的感受了。忙了好大一阵子。曾连续3天没合眼，依然坚挺。就这样我还要抽出一丝丝时间出去找房子，还有空进了趟110。没时间跟房东纠结只好请警察来处理了..
今天网站首页上线了，可以松一口气了。前段时间做的一个网站用户体验真人录屏测试的项目，让我发现了很多网站存在的问题，也有很多想法，我觉得可以跟大家分享下。

UE的规则之一：红色严禁用于吸引眼球，只能用于出错或警告提示语。
以前网站首页为了主打某个产品，线下的产品经理要求某个产品标红并hot图标显示。好吧，跟他们是说不清道理的，他们只要醒目，其他一切不管。既然我无力反抗只好闭眼忍受了，于是线上运营部也借用此招，为了突出显示某个链接，给每个版块都标红显示1，2条。于是整个页面你就看到一片红海，于是那些黑色的链接反倒成了突出产品了。
红色过多会给用户压迫感，用户根本不敢下手，红绿灯中红色是令行禁止的颜色。其实在web界面中，蓝色加下划线的样式是最醒目的，因为条件反射用户会想去点击。红色的确很醒目，可用户不一定会去点击，用户只是看到了它而不会产生交互，它就是一个死链接，web界面是要让用户产生交互行为的。

强制在新窗口打开站内链接是不好的体验
在这次测试项目中，我发现每一位测试者的桌面上都会停留3个左右的页面，有时候会更多。可让我感到欣慰的是，大多数用户都会使用浏览器左上角的“返回”键。所以不必担心用户会不小心关闭窗口而离开我们的网站。
如果你作为用户，是希望做交互的发起者还是被动反馈者呢？
我们假设有2种情况：
1，用户想在新窗口打开链接，但在当前窗口打开了
2，用户想在当前窗口打开链接，但在新窗口打开了
第一种情况，用户可以使用右键菜单或者快捷方式在新窗口打开链接。此时，用户是交互的发起者，他们决定如何显示被链接页面。网站行为符合用户期望，从而产生好的用户体验。
第二种情况，用户直接点击链接，突然发现打开了一个新窗口。此时，用户是交互行为的被动反馈者，他们需要对被打开的链接方式做出反应——例如关掉自动弹出的窗口。而且，网站行为并不符合用户期望，结果导致糟糕的用户体验。
替用户去做决定是很令用户讨厌的，不要低估了用户的智商，也不要让浏览器左上角那么大一个后退键失去它的作用。全站所有站内超链接在当前窗口打开是最佳用户体验，豆瓣做到了这一点。

网站不是我们的炫技场，设计只是单纯的为了更好的交互。
我们太多的设计师都痴迷于创意设计，只要把网站设计的多么绚丽多彩，就认为自己是多么优秀的界面设计师了。其实我们更需要简单的设计师，清清楚楚简简单单用界面语言把事情告诉给用户。
有时候产品经理为了使界面功能更炫，放弃各种系统自带组件，让前端花大量时间去做js效果。一个陌生的新组件，用户在使用的时候并不一定能达到很好的体验，因为这个东西对于用户来说是个陌生的物品，并不符合用户的预期和使用习惯。google，我们的大神，极其简洁的界面。难道google聘不起高级设计师吗？google的界面设计师考虑的不是“好看”，而是“用什么样的视觉逻辑更清晰的呈现给用户界面内容”。

最后一点我想说的是产品经理应该把每个产品当作自己的孩子一样去看待，而不是简单做项目，一个新上的产品更需要关注的是后期跟踪和维护，要“养”才能成。
在现在这个公司呆了1年了，我经历了无数次的改版，真的是无数次了，即使每次的改版我都是负责前端这一块的，但连我自己都记不清楚改了多少次了，我说的改版是指从策划到设计到开发整个项目下来，而不是小改动。就在今天的例会上，又有新的页面要重新策划改版了。
我觉得现在产品经理的误区就是，当一个页面GA数据不理想的时候，往往不去找根本原因，能想到的唯一拉高数据的办法就是去改版，当用户新鲜感不再有的时候，是不是又要改版？一个频道首页上线半年了，内容从不更新，就好像一个房间半年你不去打扫，还有人愿意进来吗？很简单，只要你去扫扫，去更换里面的内容，自然又是一个新的房间，用户的新鲜感自然又有了。难道非要通过改版的方式，非要把房间里的装修全部打掉，甚至把整栋楼都拆掉重新盖一栋出来吗？这样治标不治本，大家都累。
我希望的产品经理应该是产品，运营，市场，交互，技术，界面等所有事情都要懂，但都不一定要亲力亲为。这也是我的目标。
 ]]></description>
		<link>http://www.csszone.net/?p=1682</link>
			</item>
	<item>
		<title>迷人的HTML5和CSS3应用实例</title>
		<description><![CDATA[HTML5 和 CSS3 已经在很多的网站编码中实现了应用，HTML5和CSS3给网站设计带来出色效果是之前其他编码语言无法比拟的。现在很多的流行浏览器都已经开始支持 HTML5 和 CSS3 ，从而为Web前端工作者学习和应用HTML5 和 CSS3 提供了更好的应用平台，这里是应用HTML5 和 CSS3 实现的Web效果，从这些迷人的Web效果中，总可以看出HTML5 和 CSS3 组合的超级能力了。
如果你想看到梦幻超炫的效果，就不要使用IE。
Slidenafill

GoogleBox

Bar Chart

Solar System

Colourful Clock

A Tribute to the Beatles

Coke Can

 ]]></description>
		<link>http://www.csszone.net/?p=1671</link>
			</item>
	<item>
		<title>我的网页我做主！</title>
		<description><![CDATA[当你与一个略懂中文的外国人面对面沟通时，你说，昨天我把杯子打碎了。他问：被子能碎吗？这时候，我们便出现了沟通障碍的问题。在浏览网站时，我们会时不时的冒出一些我们熟悉的技术用语，比如：bug,加载，缓冲，预订单等等。可是，你是否想到，这些是不是用户可以明白的，在一个新用户到达网站时，看到一个术语，猜不到，又没处问，好吧，继续看，接下来看到第二个，第三个，要我猜，好累啊，很多人便会自然的把网页关掉。
该如何很好的引导用户呢？首先要让用户明白，我们的语言是通俗易懂的，不要猜，也不要故作高深，更不要自作聪明的用一些很酷很另类的话语来迷惑用户。解决了沟通的问题，那么，用户在走到一半的时候有疑问该如何做？让用户有更多的自主和话语权，这是本篇文所要表达的一些观点和问题，欢迎大家参与讨论。

让我明白你在说什么，别让我思考
点击某网站首页侧边栏的新版反馈，弹出框显示是bug提交，那么，什么是bug，知道了什么是bug，我提的建议，我的疑问是否要在这里提交呢，不在这里，在哪里呢？我的问题提交后处理结果反馈在哪里能看到呢？——不知道。

在浏览网页时，我们自创的术语，是否是用户能接受或明白的呢？如果不是，那么是否会有解释呢？解释时是否可以不要重复出现，或者可以让用户有权关闭它。
大众点评：
1，在每一个网站自创用语，或生僻用语后，都有“什么意思？”的链接，鼠标放上去显示解释文字，鼠标移开，解释文字关闭。

2，这些话很重要，我看过已经知道了，不要重复出现了好吗？那么，我做主关闭它好了。

淘宝：
用户的每一步操作，都告诉该如何做，不允许的操作，告诉为什么，在有疑问的地方高亮显示一句话解释，点击下图中的问号，一句话解释关闭。

让我知道接下来我可以做什么，别让我不知去向
通过页面里的链接，面包屑，导航，引导用户去他想去的地方，回他想回的地方。别让我走到一半不知道该往哪儿走，也不知道该怎么回去。
1,去想去的地方，你的引导是用户想去的吗？想去的位置你放对了吗？

淘宝对于无法购买的宝贝的处理方法，用户可以有两个选择。问号上添加alt：为什么，问号可点击。

没有找到自己想要的，我还可以做什么？淘宝有类似关键词推荐，还有排行榜。

 点评对没有找到想要的结果的处理。

 淘宝对用户想去的地方的推荐，这里体现了商场货架的功能。

 宝宝树：当前论坛版块在闲置交易，页面里把所有上海论坛的版块列出，方便用户切换。

 Qzone对用户可能想去的地方的处理方式
2,回想回的地方，回去的位置你放对了吗？

回到顶部的位置

 途牛网不推荐取消预订，但不会绑架用户一定走下一步，上图是对于回到前一页面的处理
有新功能或去掉了哪些功能让我知道，别让我无所适从
新功能上线了，原先的搜索功能翻天覆地的变了，原来的订购页面也换了，再次来到这个页面，好陌生，你是否可以给我解答下你改变了什么？我该怎么做？

页面中对于新功能的页面处理。

点击了解新功能链接后出现的页面效果一目了然。
用起来不满意让我有机会说话，别让我有苦难言
很多时候，我们停留在某个网页上，希望找到想要的东西，找了半天却迷路了，或者根本找不到，在现实中我们迷路了可以问过路人，那么，浏览网页时，我们可以问谁？问了是否可以告诉我解决办法。
淘宝：
对每个产品模块，如“我的淘宝”“购物车”都有建议通道，让用户有更多的自主权。

（我的淘宝页面）

（购物车页面）

 在使用家电或数码产品时，我们常把用起来是不是方便作为购买的标准之一，同理，在浏览网页时，我们也会把用起来是不是顺手来作为体验好不好的重要标准。很多时候，体验已经贯彻到网站的每一个角落，例如，按钮的大小，图片的摆放位置，广告是否太多，文字解释是否清晰明白不啰嗦等等。如何做好体验，不是一句两句能说清楚的。而这里，仅仅写了网站体验中的一小部分。可以预见的还有设计统一性，美感，页面排布是否压力太大，文字说明太长，页面加载太慢，打开错误页面……但可以明白的一点是，只有我们自己先把网站做好，浏览时没有疑问或压力，才会让用户感觉更好。
 ]]></description>
		<link>http://www.csszone.net/?p=1630</link>
			</item>
	<item>
		<title>专注前端交互，专注用户体验</title>
		<description><![CDATA[博客停了将近2个月，这段时间一直很低潮，经过调整重新找到了新的方向。于是博客再次启动，由于工作重心发生了转变，我也对博客进行了重新定位：专注前端交互，专注用户体验。
前端交互，还是一个比较新的词。我们知道前端开发，知道交互设计，那前端交互就是融合了专业的前端开发技能和基本的交互设计能力。另一方面我也正计划做用户测试调查，并且关注用户体验。这就是我现在比较杂的工作内容，我喜欢这样一个状态，如果没有这样一个工作内容的调整，我可能就离开现在的公司了。其实我在大学的时候是从平面设计开始进入这行的，实习的时候也在做设计，只是没有系统的学习这方面的专业知识，再加上很长一段时间没有接触界面设计了，慢慢的退化了，photoshop已经没有以前那么熟练了，我相信做设计这行的，那都是骨子里的东西，有一天它会被激发出来的..
其实我一个人就是一整个UED团队！
 ]]></description>
		<link>http://www.csszone.net/?p=1621</link>
			</item>
	<item>
		<title>支付宝——马云团队正悄然构建新商业文明</title>
		<description><![CDATA[支付宝用了五年时间，将自己做成了一个占据中国第三方支付市场半壁江山的 “庞然大物”——用户数超过3亿、日交易额接近14亿元人民币。
马云并不甘愿只做第三方支付，马云团队正悄然构建新的商业文明。这是一个怎样的新商业文明？他们又是如何构建这一新商业文明的？我想，在揭晓之前，有必要探讨下旧商业文明与这一新商业文明之间的区别。
区别就在于，一个是分工文化，一个是融合文化。
分工文化其实是两百多年前，亚当 ▪ 斯密发现的工业文明的秘密，他在他的那本号称经济学奠基之作的《国富论》里提到了这么一个小例子。
亚当 ▪ 斯密发现，一个八个人组成的一个制针的工厂，八个人只要是按流水线，每一个人都有非常详尽的分工，一天八个人可以生产上万根针，而他一想如果一个人，独立去做针的话，也许一个人一天连一根针也做不了，这就是分工带来的神奇的效率增长。那么在整个工业时代，人类就是按照这种分工的逻辑在推动社会的进步。
但是在新商业文明时代，也许这种分工为导向的文明将会让位给那种以融合为导向的文明。
在支付宝这家公司的身上，我们就会看到这样的蜘丝马迹。比如说，企业和企业之间的边界融合掉了：在淘宝网上你能分得清哪个是商户，哪个是淘宝网？它们到底算是一家公司，还是算成是无数家公司？这个界限你很难界定。再比如说：公司和客户之间的边界，也在融合掉。你用支付宝，你享受了支付宝的服务，这个时候你是客户，但是不要忘记，这个时候在支付宝的服务器里，留下了你的消费的蛛丝马迹，而这一点将会成为支付宝将来最大的商业价值的载体。换句话说，你虽然是它的客户，但你也参与了支付宝价值的创造。再比如说：企业和社会之间的界线也在模糊。原来只是支付宝一家公司，存留下来这些商业信息，但是它和国家的金融安全之间界线又贴的是那样的近。所以支付宝CEO邵晓峰才会体现的如此如履薄冰的小心。
企业和企业之间，企业和客户之间，企业和社会之间，所有的边界都在消失，所有的融合都在这样的一个舞台上形成。
    所以想来，也是一件很感慨的事情，两百多年前亚当 ▪ 斯密他正处在农业文明向工业文明转进的那样的一个交接点，所以他用他的智慧提炼出了“分工”这样的一个概念，而今天我们恰好又处在从工业文明向信息文明转进的这个晨昏交替的这个时间，我们都是幸运的两代人，因为我们有幸见证了人类文明的这样的一种转化，从融合的农业社会向分工的工业社会，再走向融合的新商业文明的社会，这是一个多么具有美感的螺旋上升的线条啊。
 ]]></description>
		<link>http://www.csszone.net/?p=1598</link>
			</item>
	<item>
		<title>如今是web1.0，web2.0还是web3.0时代？</title>
		<description><![CDATA[ 从1989年，蒂姆•伯纳斯•李为自己发明的万维网申请了知识产权到2010年，已经是整整二十一年，我们有幸见证了web1.0到web2.0，再到 web3.0的一一出世。
那现在是web3.0的时代，还是web2.0时代？或者说web1.0已经彻底的成为历史了呢？
     我们都知道，网易，新浪，搜狐三大门户是web1.0的代表，那他们已经成为历史了吗？他们不但没有退出历史舞台，而且活的还挺滋润，张朝阳已经把2家搜狐公司送上了市。到底什么是web1.0呢？其本质就是联合，用户通过浏览器获取信息。换个更形象点的说法，web1.0就像妓女赚钱，比拼接客数量，说白了就是比流量，现在很多的个人网站，为了维持网站的正常运行，赚点小广告费，靠什么？流量是唯一能说服我去往他们站上投放广告的衡量标准。
     那2.0又是否已经过时了呢？在回答这个问题之前，先简要说下什么是web2.0。如果说1.0就像妓女赚钱，那2.0就是情妇赚钱，比拼包养质量，一种流行的说法“用户是否自己生产内容”，web2.0不像web1.0那样，靠流量赚钱，而更比拼用户的黏着度。1.0和2.0的差别就在于，妓女工作着眼于广度，情妇的工作着眼于深度，情妇除了肉体交易外，还有情感的互动，增加了客户对她的依赖程度，也增加了客户对她的投资。虽然情妇的客户数量远比妓女少，但单个客户带来的收益远大于妓女。web2.0的本质就是互动，那代表又是什么？博客，P2P下载，播客，社区。那一开始的那个问题“web2.0是否过时了”，也就不解自解了。但这也说明了2.0的一个致命缺点，那就是脆弱！纯粹的2.0会在商业模式上遭遇重大挑战，需要跟具体的产业结合起来才会获得巨大的商业价值和商业成功。
     2008年淘宝交易接近1000亿，2009年达到2000亿，2010年预计达到4000亿！多么庞大的数字！为什么我会提到淘宝？那是因为电子商务领域是web3.0的代表。 web3.0是在web2.0的基础上发展起来的能够更好的体现网民的劳动价值并且能够实现价值均衡分配的一种互联网方式。不管是B2C还是C2C，网民利用互联网提供的平台进行交易，在这个过程中，他们通过互联网进行劳动，并获得了财富。说完了电子商务，我想再提一个名词——“webgame”，网页游戏从上个世纪90年代的没落，到06年的再次兴起，再到09年的崛起，我们看到了3.0带来的巨大商业价值。有人会疑问，为什么webgame也属于 3.0，举个简单的例子，热血三国应该很多人都玩过，我们在通过攻城掠寨，不断的升级建筑，生产资源中花费了大量的时间，而我们可以在那里获得声誉和财富，而这个财富通过一定的方式可以在现实中兑换。这不正回到了web3.0的定义：“体现网民劳动价值”，“实现价值均衡分配”。所以我相信3.0还会继续壮大，毕竟电子商务还没有全面爆发，webgame也只是有了东山再起的苗头。
     说了这么多，我想回到今天的主题，web1.0到3.0，如今是谁的天下？举个例子，“驴妈妈旅游网”需要流量吗？当向人家介绍驴妈妈是如何庞大起来的时候，您的第一个数字是不是要举驴妈妈旅游网每天的流量呢？我想驴妈妈的第一步也是在做“广”，驴妈妈的路书，点评，攻略就是大量的信息，提供“read”，那就离不开1.0的定义。接下来就是做“粘”，粘住每个会员，让每个会员自行的生产内容。驴妈妈的空间，社区不正是在让会员和会员之间形成互动吗，自然回到了2.0。驴妈妈旅游网一方面是在做“出游导师”，一方面又是景区领先的B2C电子商务网站，是不是又回到了web3.0的定义。
我们很难去界定现在到底是2.0时代，还是3.0时代。我想说的是，其实他们并不排斥，是共存的，而且很多网站的模式是集三位一体的。
 ]]></description>
		<link>http://www.csszone.net/?p=1590</link>
			</item>
	<item>
		<title>揭开Mobile Web开发的神秘面纱</title>
		<description><![CDATA[在这篇文章中，将为大家努力揭开Mobile Web开发的神秘面纱，换句话说，也就是为了移动设备上的用户体验可以被接受，代码得怎么设计。这篇文章将阐述“Mobile Web”与普通网站的不同之处、可以让网站成功运行在移动设备和桌面浏览器上的基本技巧、一些Mobile Web设计中的建议和禁忌、以及大量资源 。


Mobile Web和普通网站到底有何不同呢？
这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。
在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。
移动领域的竞争环境并不平衡
在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、Firefox（以及其他Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。但是，移动设备领域在这方面却是不同寻常的：
你拥有能为“Full Web”提供支持的浏览器，像iPhone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。 
你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 CHTML或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
最后，你拥有OperaMini，以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90% 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 Ajax/JavaScript某些方面将支持的不是很好。
注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。
我们可以看到，在移动设备的跨浏览器兼容方面，你要思考的问题有很多。但是不要怕 – 我随后的建议会给你指引一个正确的方向；并且随着时间的推移，移动浏览器对标准的支持将会得到改善，届时我们前端开发者真的再也不需要为它们操心了。你问我这一切什么时候会实现？Who knows！
移动浏览器的其它限制还有那些？
当然，在移动设备上开发网站时，除了浏览器对标准的支持外，还会遇到其它更多的限制因素。设备自身的限制因素，你也不得不考虑。例如：
有限的控制 – 不要只假设你的用户会使用鼠标来控制页面中的一切，你也要提供键盘的选择。一些手机用户可能没有类似鼠标这样的东东，所以类似这样的结构 :hover 以及 onClick 对他们来说是没有用的（这对可用性方面也是非常重要的 – 一些残障用户可能在用手方面会有些缺陷）。为用户提供的表单设计也同样重要 – 你可能已经感受到，用手机来填写那些又臭又长的必填表单有多么不爽。为了解决这个问题，试着去把那一坨内容用下拉菜单的方式展现出来，这比等着用户一个字一个字手动输入来的更靠谱（译者注：目前国内有某些山寨机浏览器对下拉菜单的支持可能有不同程度的问题。例如基于MTK系统的联想i61，默认情况下会显示所有选项，而在某些情况下会产生变形和“漂移”，使用时需要谨慎些）。另外，给表单设置一个最有可能的初始值，也是一个好主意。 
有限的屏幕尺寸 – 想象一下你那美妙的1024×768的设计在240×320屏幕下，或者更小的屏幕下，它的可用性会是什么样子……有一些方法可以应对这个情况 – 你可以故意把页面设计的很简洁流畅，或者你可以通过采取功能检测或媒体类型检测（诸如此类）的手段，为移动设备提供不同的页面。另外对于屏幕尺寸，有些手机可能不需要这么麻烦，它们可能会提供“缩放模式”这样的机制，但是你却不能保证这一点。 
有限的内存和带宽 – 移动设备所提供的可用内存明显比台式机少得多。因此，在你设计站点时，需要特别小心的考虑那些超大容量的相册图片，以及交互式流媒体视频的应用程序。此外，一些移动浏览器提供了关闭图像显示的选项，但是你也同样不能确定这一点。 
有限的排版 – 我靠，你对台式机上那些排版非常痴情？你没有看到移动设备上的表现！虽然这条规则有很多例外情况，但大多数移动设备对字体的选择非常有限，只有一两种（like 1 or 2）。这个限制是由系统或浏览器决定的。
有限的颜色 [...]]]></description>
		<link>http://www.csszone.net/?p=1573</link>
			</item>
	<item>
		<title>新版Google Web</title>
		<description><![CDATA[据国外知名博客消息，Google 在针对某些用户测试其新版的网站风格，这里让我们先睹为快吧。从以下新旧版本的对比可以看出，Google的新版本网站更加注重操作性和可视性等用户体验方面。
Logo设计
Google的新Logo更大了，看起来更也比现在的老版本Logo更亮了，并且最大程度上减少了字母阴影效果，使得新版的Logo更有现代感了。

新LOGO

当前LOGO

首页
Google首页的搜索框更大了，两个搜索按钮也从默认的浏览器按钮样式，美化为新的CSS样式，使得其在不同的操作系统和不同浏览器中可以保持显示效果的一致性。
新版本（点击放大）

当前版本（点击放大）

搜索关键字提示功能
在首页的Ajax搜索关键字提示功能上，新版设计和当前版本区别不大，主要是关键字提示列表的样式发生了细微变化，从以前的灰色外框变成新的蓝色外框。
新版本（点击放大）

当前版本(点击放大)

搜索结果页
当前的搜索结果页的操作方式是必须手动点击“显示更多选项”链接，才会出现左侧侧边栏的百宝箱；而新版本则默认打开。
新版本（点击放大）

当前版本（点击放大）

搜索结果的内容
在搜索结果页面，除了项目的标题还保留下划线超链接形式外，其他的链接文本都取消了下划线样式。
新版本

当前版本

左侧边栏
相比当前的左侧边聊，新版本中左侧边栏的项目中，添加了图标内容链接，使得链接区域变的更大，更方便点击操作了。

页脚
新版本的页脚搜索框变的更大了，搜索按钮也进行了CSS样式化，并且使得翻页样式和新版本的Logo进行了匹配。
新版本

当前版本

虽然我们还没有看到真正的新版Google网站，但是从上面的特色来看，Google在网站的用户体验方面又有了非常大的进步，那么，你喜欢新版本的 Google吗？
 ]]></description>
		<link>http://www.csszone.net/?p=1532</link>
			</item>
	<item>
		<title>交互组件——搜索输入框的功能用户体验</title>
		<description><![CDATA[有数据显示，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。
搜索框作为电子商务网站中众多交互组件中的一个，在使用过程中能否为用户提供最方便的服务，直接关乎到用户能否将购买意图转变为真实的购买行为。
今天通过一些案例聊聊各种搜索输入框的功能，与大家分享，共同学习。





yahoo!的搜索提示框用了深色底浅色字，用户的注意力不容易分散，会集中在这一区块中。
而且yahoo!和google同样的，用户输入关键字后，会显示一些结果和参考关键字，让用户有更多的选择。
比如我在输入“驴妈妈”的时候，它会把相关的关键字进行组合，“驴妈妈 1元门票”，“驴妈妈 携程”，显然这为用户提供了更多的选择。
淘宝就多了一个搜索结果的条目数，小的提示能让用户知晓的信息更多了。
这些都是大型搜索引擎，自然搜索服务和用户体验都做的很到位。那旅游类网站，很少在首页上提供站内搜索功能的，即使有站内搜索也没有关键字信息提示功能。
驴妈妈首页的搜索框当你输入关键字后，会匹配此关键字的相关景点条目，方便用户选择他所需要的信息。曾经有人说过：用户从不思考  用户很懒  Don’t Make them Think,for they Don’t like. ……  所以我们需要为用户提供最傻瓜型的交互组件。
搜索输入框的属性

淘宝和驴妈妈的搜索框有点长。有啊适中。当当就太短了。
高度上，当当是最窄的。淘宝27px，高度比较合适，但是行高只有15px，感觉还是有点挤。
驴妈妈高度是32px，行高是22px，似乎有点高，不过目前大屏宽屏显示器已经很普及了，高分辨率下还是比较合适的。
有啊33px，跟驴妈妈32px相比，虽然数值上只有1px之差，但是视觉差别还是很大的，它的行高是19px，感官上很舒服。
搜索框的排版样式

我们把搜索框简化
拍拍和淘宝一样外层多了一个背景，视觉上更有整体性。
google的确定按钮在下方，如果不习惯用回车键确定的用户，要折行再点击，不太顺手。
bing的按钮采用内嵌式的，太小了，不利于点击。
接下来我们看看当当站内搜索的整体控件是怎样的：

我们看到在输入框的前面有一个下拉选择的步骤。
我们可以算一下：点击下拉+选择分类+输入关键字+确定，一共用了4步。
如果当当像百度一样，把所有分类都列出来，虽然减少一步，但界面就不够简洁了。
所以如何做到界面简洁，而用户体验又能很好，我们一直在找这样一个平衡点。
我希望的页面元素是这样的，它始终安静的呆在那里，当你不需要它的时候，它不会乱动和干扰到你，而你也清楚的知道它就在那里，当你使用它的时候，它能把隐藏于内的所有强大功能都一一体现出来。
一家之言，欢迎交流补充。
 ]]></description>
		<link>http://www.csszone.net/?p=1511</link>
			</item>
	<item>
		<title>XML语言的特色描述</title>
		<description><![CDATA[一直都对XML有种望尘莫及的感觉，后来对它有了进一步了解后，才发现它是这么的有亲和力。XML、 XLink、Namespace、DTD、Schema、CSS、XHTML这些莫名的单词其实也并没我们想象中的那么无理取闹。如果你是一个XML语言的初学者，那么我强烈建议你把这十个XML自身特点的描述看完，你可以清晰明了地掌握到XML的一些基本概念，然后消化掉，最后应用到自己的程序设计中去。

首先，需要指出的是文章来自网络，英文原文为W3C.org官方发布: XML in 10 points
XML是用来组织数据结构的
结构数据包括如: 电子数据表、地址簿、控制器参数、财务交易及技术绘图等。XML是一系列文字格式设计的规则(也可称之为指导方针或惯例)，来帮助你组织数据结构。XML不是一种程序语言,所以你不必一定是程序员，同样可以使用或学习它。XML使计算机简单地生成及读取数据,并确保数据结构精确。XML避免了一般语言设计的缺陷:它是可扩展的、跨平台、支持国际化及区域化的格式,绝对支持Unicode格式。
XML类似于HTML
和HTML一样,XML是使用标签(使用 “”包含)和属性(以”name”=”value”的形式)。一旦HTML指定了每一个标签和属性的定义,一般文字在浏览器中表现的形式后, XML只使用这些标签来界定一些资料的特殊意义,但整体句子的意思则随个别应用程式读取时界定。换句话说,如你看到一个XML档中的 “
”, 千万不要以为是段落的意思。根据XML上下文的解释，它可能是一个价?quot;price”、一个参表”parameter”、一个人 “person”、或…(这样谁可以界定一个”p”字的定义呢?)
XML是文字, 但不是被阅读的
制作电子数据表、地址簿及其它结果数据的程序一般是存储在磁盘中，以二进制或文字格式储存的。其中文字存储格式的好处是，人们在需要时阅读这些文字，而不须制作文件所用的程式; 另外, 你也可以用你喜爱的文字处理器来读取文件。文字格式也容许开发者更容易地理解应用程式。如HTML,XML档是一些人类无需阅读,但若有须要时亦可阅读的文字档案。不太像HTML,XML的规则是非常严 格。若忘记了一个标签或属性漏了一个引号便使这个XML档无法执行,但在HTML内这些错误却可以接受的。正规的XML定义防止程式尝试去猜测这个已被破 坏的XML档的意思;若发现一个被破坏了的档案,应用程式便会立刻在那儿停止并报告发生错误的讯息。
XML是很详尽的
因为XML是文字格式及其为使用标签来解放资料,XML文件差不多比所有以二进制格 式的文件档大。这点往往是XML设计者必定留意及考虑的。文字格式的好处是一切都很清楚(看上文第3点),但亦有不同程度的缺点。磁盘空间的价钱比以前大 幅降低;而其它的文件压缩程序如zip和gzip便能简易快捷地把文件压缩。此外,网络上的通讯协议,如数据机通讯协定及HTTP/1.1便可以在传送时 把资料压缩,节省效能跟二进位格式的文件同样有效率!
XML是一个技术大家族
XML1.0界定标签”tags”及属性”attributes”的定义。在 XML1.0以外,”XML家族”是一项成长中的技术专案以提供有用服务予以配合多项重要及须求率高的工作。XLink解释了怎样加入连结至一个XML 档。XPointer及XFragments文件部份发展的语法。XPointer有点像URL,但除指向一个网上文件外,它亦指向一件在XML文件内的 资料。CSS~界定文件式样语言,使用在XML上跟在HTML无异。XSL是表达版面式样”style sheets”的进阶语言。以XSLT,一种用作重新排列、加入或减除标签及属性的转化性语言为基础。DOM是用来从一种程式语言中,叫取XML档(及 HTML档)的一组标准。XML Schemas 1和2帮助开发者精确地界定它们自己的一套XML基础格式。还有其他种类的专案和工具可供考虑或正被开发中。可多留意W3C的技术报告。
XML是新事物,但不是全新的产物
XML的开发始于1996年,并于1998年2月成为W3C的推荐文 件;这可能使你认为这是一项并不十分成熟的技术。但事实上,这项技术并不如想象中的新!在XML之前曾有80年代初开发的SGML,一项自1986年有 ISO标准及被广泛地使用在大型文件策划专案中。HTML从1990年起开发。XML的设计者只要把SGML中最好的部份,以发展HTML的经验指引来开 发一些不逊于SGML,但比之更有规范和可更简易地使用的技术。虽然有些时候很难分辨演变和革命的成就…但可以确定的,是当SGML被广泛地使用在技 术文件而被其他种类的资料所疏忽时,XML的情况是刚好相反的!
XML带领HTML至XHTML
一个重要的文字性质的XML应用程式:W3C的XHTML,一个接替 HTML的格式。XHTML有许多跟HTML一样的原素。有一些语法为了配合XML规则而改变了。一份使用”XML基础”的文件代替及限制了XML的语法 其在某些方面的用法(例如:XHTML容许”
”但并不接受””);它更加入一些意义到语法上(XHTML指定 “
”的意思是段落”paragraph”,而不是价格”price”或人”person”或其他事物)。
XML是模块化的
XML容许你利用合并及再使用其他格式来自定新的文件格式。因为两种独立开发的格式可 能包含一些原材料或称号用着同一名称,所以当合并使用这些格式时得特别小心(如”
”在一份文件代表”段落paragraph”是否可能 在另一方代表”人物person”呢?)要解决当合并使用两种格式时出现名称混淆的问题,XML提供了一项名为namespace的概念。XSL和RDF 正是用了namespaces的以XML为基础的格式。XML Schema以简单的方法来合并两种规格以演变出包含了两种规格的第三种格式,是用来反映出在界定XML文件结构时用以引导的支援。
XML是RDF及Semantic Web的基础
XML提供了一个规范的守则予W3C的RDF,一种 用以表达资料(事实上,基本上是为知识)的语言。RDF就像一个网上连结的下一个层面。一般网上连结把一些文字连接到一些没有固定关连的事物上,唯RDF 可以把任何事物在连结起后给予一个关系名称:如”甲是乙的价格”可以是一件物品和一个价格总和的关系;又如”甲比乙重”可以是两个总和的关系;又或”甲是 乙的原因”可以是沐浴和你身体湿了的关系。当你在知识沟通的时候,不论是以XML/RDF或是以纯英语,人或机械上均须要同意某字词在某方面的用途。一系 列特定的文字可以用来形容一些特定的生活方式(从”购物”至”数学逻辑”)便称之为”Ontology”。RDF, Ontologies及其代表意思,使电脑可以帮我们执行所有Semantic Web活动。
XML是没有版权限制、跨平台独立且维护方便
当你选择XML为你计划的基础,你就像已得到一 些庞大及增长中的工具(其中一些可能已做到你所需要的)及工程技术员多年积累的技术经验。选择使用XML就像在进行资料库管理时选择SQL的程序:你依然 要建立你自己的资料库及你自己的程式及步骤来进行,及有许多工具和许多人来协助你。由于XML是没有版权限制,你可以建立你自己一套软体而无须支付任何费 用予别人。而庞大及增多中的支援意谓你无须依赖任何单一商号。 XML虽并不永远代表是最好的方案, 但永远值得你考虑。
 ]]></description>
		<link>http://www.csszone.net/?p=1488</link>
			</item>
</channel>
</rss>
