我希望的产品经理应该是产品，运营，市场，交互，技术，界面等所有事情都要懂，但都不一定要亲力亲为。这也是我的目标。

在浏览网页时，我们自创的术语，是否是用户能接受或明白的呢？如果不是，那么是否会有解释呢？解释时是否可以不要重复出现，或者可以让用户有权关闭它。

大众点评：
1，在每一个网站自创用语，或生僻用语后，都有“什么意思？”的链接，鼠标放上去显示解释文字，鼠标移开，解释文字关闭。

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

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

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

1,去想去的地方，你的引导是用户想去的吗？想去的位置你放对了吗？

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

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

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

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

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

Qzone对用户可能想去的地方的处理方式

2,回想回的地方，回去的位置你放对了吗？

回到顶部的位置

途牛网不推荐取消预订，但不会绑架用户一定走下一步，上图是对于回到前一页面的处理

有新功能或去掉了哪些功能让我知道，别让我无所适从

新功能上线了，原先的搜索功能翻天覆地的变了，原来的订购页面也换了，再次来到这个页面，好陌生，你是否可以给我解答下你改变了什么？我该怎么做？

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

点击了解新功能链接后出现的页面效果一目了然。

用起来不满意让我有机会说话，别让我有苦难言
很多时候，我们停留在某个网页上，希望找到想要的东西，找了半天却迷路了，或者根本找不到，在现实中我们迷路了可以问过路人，那么，浏览网页时，我们可以问谁？问了是否可以告诉我解决办法。

淘宝：
对每个产品模块，如“我的淘宝”“购物车”都有建议通道，让用户有更多的自主权。

（我的淘宝页面）

（购物车页面）

在使用家电或数码产品时，我们常把用起来是不是方便作为购买的标准之一，同理，在浏览网页时，我们也会把用起来是不是顺手来作为体验好不好的重要标准。很多时候，体验已经贯彻到网站的每一个角落，例如，按钮的大小，图片的摆放位置，广告是否太多，文字解释是否清晰明白不啰嗦等等。如何做好体验，不是一句两句能说清楚的。而这里，仅仅写了网站体验中的一小部分。可以预见的还有设计统一性，美感，页面排布是否压力太大，文字说明太长，页面加载太慢，打开错误页面……但可以明白的一点是，只有我们自己先把网站做好，浏览时没有疑问或压力，才会让用户感觉更好。

马云并不甘愿只做第三方支付，马云团队正悄然构建新的商业文明。这是一个怎样的新商业文明？他们又是如何构建这一新商业文明的？我想，在揭晓之前，有必要探讨下旧商业文明与这一新商业文明之间的区别。
区别就在于，一个是分工文化，一个是融合文化。

分工文化其实是两百多年前，亚当 ▪ 斯密发现的工业文明的秘密，他在他的那本号称经济学奠基之作的《国富论》里提到了这么一个小例子。

亚当 ▪ 斯密发现，一个八个人组成的一个制针的工厂，八个人只要是按流水线，每一个人都有非常详尽的分工，一天八个人可以生产上万根针，而他一想如果一个人，独立去做针的话，也许一个人一天连一根针也做不了，这就是分工带来的神奇的效率增长。那么在整个工业时代，人类就是按照这种分工的逻辑在推动社会的进步。

但是在新商业文明时代，也许这种分工为导向的文明将会让位给那种以融合为导向的文明。

在支付宝这家公司的身上，我们就会看到这样的蜘丝马迹。比如说，企业和企业之间的边界融合掉了：在淘宝网上你能分得清哪个是商户，哪个是淘宝网？它们到底算是一家公司，还是算成是无数家公司？这个界限你很难界定。再比如说：公司和客户之间的边界，也在融合掉。你用支付宝，你享受了支付宝的服务，这个时候你是客户，但是不要忘记，这个时候在支付宝的服务器里，留下了你的消费的蛛丝马迹，而这一点将会成为支付宝将来最大的商业价值的载体。换句话说，你虽然是它的客户，但你也参与了支付宝价值的创造。再比如说：企业和社会之间的界线也在模糊。原来只是支付宝一家公司，存留下来这些商业信息，但是它和国家的金融安全之间界线又贴的是那样的近。所以支付宝CEO邵晓峰才会体现的如此如履薄冰的小心。

企业和企业之间，企业和客户之间，企业和社会之间，所有的边界都在消失，所有的融合都在这样的一个舞台上形成。

所以想来，也是一件很感慨的事情，两百多年前亚当 ▪ 斯密他正处在农业文明向工业文明转进的那样的一个交接点，所以他用他的智慧提炼出了“分工”这样的一个概念，而今天我们恰好又处在从工业文明向信息文明转进的这个晨昏交替的这个时间，我们都是幸运的两代人，因为我们有幸见证了人类文明的这样的一种转化，从融合的农业社会向分工的工业社会，再走向融合的新商业文明的社会，这是一个多么具有美感的螺旋上升的线条啊。

那现在是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时代。我想说的是，其实他们并不排斥，是共存的，而且很多网站的模式是集三位一体的。

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）。这个限制是由系统或浏览器决定的。
有限的颜色 – 一些移动设备在颜色方面的支持也非常有限。考虑你有多少页面的体验需要依赖于颜色，并确认那些对比色在移动设备上仍然支持。

这些限制因素，就是导致Mobile Web的体验与PC Web的体验不同之处的真正原因。千万别欺骗自己，觉得自己的网站在移动设备上的用户体验与台式机上会保持一致 – 这纯属YY。当然，你抛开浏览器，千方百计去确认用户体验这一点仍然值得肯定。

真正的办法，去确保你的网站为移动用户提供一个良好的体验，是测试，测试，再测试！一些Web设计师们已经认识到，除了他们自己的手机、台式机以及游戏机浏览器外，还需要有一大堆移动设备需要准备在手头。

解决问题的不同方法
人们普遍意识到，有三种办法可以解决移动开发的问题（已经被Cameron Moll证实了 – 找他的书看看）。可能的话，我建议你试试这三种方式 – 如前所述，在Opera，我们坚持相信One Web的理念 – 但是刚才我也说过，有些情况下这是很难实现的，或者也是没有必要的。下面是这三种方法：

务必坚持遵循Web标准
创建一个完全独立的移动网站
只创建一个站点(One Web)，但是根据浏览它的设备和浏览器情况，添加优化代码。
现在，让我们开始对这些点逐个讲解。

坚持遵循Web标准和最佳实践
一个好网站的基础，是要有一个好的HTML结构，以及美妙的CSS（表现）和JavaScript（行为）。如果你认真地遵循Web标准，大多数移动浏览器至少会很好地解析并至少会基本可用，这是非常有可能的。例如：

一个网站，有良好的HTML结构顺序并在HTML中没有装饰性图片，在移动浏览器的单列模式或移动模式中，会呈现得很有逻辑性。

如果你的表单元素中含有“label”元素，浏览器将把它渲染得更有表单区域的感觉。

如果你给CSS和JavaScript使用了优雅降级/渐进增强技术，浏览器如果不支持、简化、忽略某些属性，这时站点的可用性几率会大大增加。

如果你花费时间精力去研究的话，在提升移动用户体验方面，还有更多事情可以去做。如果你的目标受众包括大量使用非HTML浏览器（例如支持WAP或CHTML的某些日本浏览器）用户，那么你可能不得不检测设备并提供适当的内容。

提供一个完全独立的移动网站
如前所述，我认为如果可能的话应该尽量避免使用这种方式。你可以做设备检测并自动重定向来避免给用户使用带来麻烦，但是这意味着你不得不维护两套网站。最主要的方法是通过UA嗅探来识别浏览器，或在服务端进行设备功能检测，然后再给用户提供相应的站点。在dev.opera.com，有很多优秀的文章来讲述如何实现 – 查看最后的资源部分。

但也有例外，对于完全独立的网站来讲 – 你不得不始终考虑用户体验情况。某些类型的浏览设备可能不兼容于特定的网站或者特定的功能。例如，有一个大学校园网，带有部门电话号码的搜索功能，但同时也包含了一大堆校园历史的网页。如果你想去与某人会面却找不到他们部门时，你大概会想在移动设备上使用搜索功能，但你在外出的时候也不太可能想坐下来阅读那么多的文字。

在这种情况下，你可以使用下面提到的一些技巧，来为移动设备提供网站中某个功能的一部分，或者干脆为移动设备创建一套完全独立的网站。你只需检测用户使用的设备类型并自动提供给他相应的站点，并把这个过程完全公开给用户，但是很多很多人并不愿意这个功能把他们完全限制住，所以如果你要这么做的话，就需要给用户提供一个指向完整站点的链接，用户可以自行选择是否用它来访问完整站点。

一句话警告 – 设备检测很容易被滥用。你可能经常看到一个网站的桌面版本非常牛B，而它的移动站点却非常的垃圾。因为开发者只是将移动站点放在一个非常低标准的位置上。事实上，目标受众的设备水平并不均衡，现在很多的移动浏览器都具有处理完整Web页面的能力了！你应该尽可能地让设备发挥他们最高的处理能力，并且要发挥移动设备的特别优势，比如基于位置的服务（LBS），还有 tel: 协议 – 在超链接点击时它可以让设备拨打一个电话号码。

只提供一个网站(One Web)
进行到这里时，就开始变得有趣了。你可以再次依靠服务端功能检测，但这次是在单一网站的基础上进行优化，而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考，例如WURFL。它是以XML文件的形式开放的，你可以在设计优化内容之前，先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串，找出这些设备的其他细节参数，例如是否有摄像头，屏幕尺寸是多少，以及它的语言种类等信息。

在客户端，你已经得到了为移动设备而优化内容所需的两个条件 – 媒体类型（media types）和媒体查询（media queries）。

媒体类型(media types)
就像你知道的那样，你可以指定不同的CSS来实现不同的用途，例如：

＜link href=”main.css” type=”text/css” media=”screen” rel=”stylesheet”>
＜link href=”print.css” type=”text/css” media=”print” rel=”stylesheet”>
＜link href=”mobile.css” type=”text/css” media=”handheld” rel=”stylesheet”>手持类的媒体类型允许你针对移动设备使用优化版的样式（例如精简的布局和排版等）。这是一个被支持得很好的机制，实现起来也很简单，但它确实有它的缺陷。就像之前所说，它经常被开发者滥用，来给网站提供一个蹩脚的最低标准布局。事实上，OperaMini最近改变了默认类型，把默认使用手持型样式表（handheld stylesheet）改为屏幕型样式表（screen stylesheet）。OperaMini可以处理大多数完整网站，因此它并不真正需要使用手持型样式表（handheld stylesheet）。如果你乐意，你可以在OperaMini的浏览器选项中手动设置回移动视图。

媒体查询(media queries)
媒体查询是CSS3的一个构想，它的用途跟条件注释非常相似 – 你可以把一大堆CSS规则封装嵌入到一个媒体查询中，然后把它应用到你的标记结构中，这一切取决于一个条件，类似“屏幕尺寸是否小于480px？”然后把代码放进去，代码类似这样：

img {
margin: 0 0 10px 10px;
float: right;
}

@media all and (max-width: 480px) {
img {
margin: 10px auto;
float: none;
display: block;
}
}你甚至可以使用多个媒体查询，像下面这样：

body {
max-width:800px;
font-family:georgia, serif;
}

img {
margin:0 0 10px 10px;
float:right;
}

.info {
position:absolute;
left:8000px;
}

@media all and (max-width: 480px) {
img {
margin:10px auto;
float:none;
display:block;
}
}

@media all and (max-width: 240px) {
img {
display:none;
}
.info {
position:static;
}
}
OK，在这个例子中（源代码点击这里查看），浏览器中的图片在屏幕大于480px时会向右浮动，文本会环绕图片并通过外边距留出一点儿舒服的距离（另有一个信息隐藏在 p 元素中，并命名了一个 class 叫 info – 看看HTML代码）。文本流在一些小屏幕中看起来可能会有些蹩脚，因为那里没有足够的空间来让图片和定量的文本放置在同一行中，所以当屏幕小于480px时，图片就需要改变一下，让文本不再围绕在它旁边，而是用 display:block 让它们显示在不同行中。等等 – 还有更精彩的！如果屏幕非常小以至于不能有效地展示图片，那就让它们消失，然后让隐藏信息显示在图片那儿，替代那些图片显示文本描述 – 这是一种将信息传达给读者的一种另类技巧，利用它也可以为那些使用屏幕阅读器的盲人用户提供原始文本，以便他们顺利浏览网站。图1展示了三个不同的浏览视图，这是在那些支持媒体查询的浏览器中（例如Opera 9.5）表现出的不同形式。

图1：例子中三个不同的浏览模式

听起来挺好，但是有没有不足呢？好吧，目前浏览器对媒体查询的支持程度非常有限。Opera浏览器支持它们，Safari 3也可以（以及其它基于Webkit内核的现代浏览器），但是Firefox 3之前的版本并不支持，IE或其他浏览器也不支持。解决问题的方法之一，是使用媒体类型和媒体查询的组合。这种方法在我的这篇文章中做过解释。这是一种变通方案，但肯定不够理想。这点在将来应该会有所改善。

摘要总结
目前就是如此而已。我希望我的移动开发世界之旅会对各位有所帮助。我在这只是抛砖引玉，要想深入学习的话，可以查看下面这些资源。

Logo设计
Google的新Logo更大了，看起来更也比现在的老版本Logo更亮了，并且最大程度上减少了字母阴影效果，使得新版的Logo更有现代感了。

新LOGO

当前LOGO

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

新版本（点击放大）

当前版本（点击放大）

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

新版本（点击放大）

当前版本(点击放大)

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

新版本（点击放大）

当前版本（点击放大）

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

新版本

当前版本

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

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

新版本

当前版本

虽然我们还没有看到真正的新版Google网站，但是从上面的特色来看，Google在网站的用户体验方面又有了非常大的进步，那么，你喜欢新版本的 Google吗？

搜索框作为电子商务网站中众多交互组件中的一个，在使用过程中能否为用户提供最方便的服务，直接关乎到用户能否将购买意图转变为真实的购买行为。

今天通过一些案例聊聊各种搜索输入框的功能，与大家分享，共同学习。

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步。

如果当当像百度一样，把所有分类都列出来，虽然减少一步，但界面就不够简洁了。

所以如何做到界面简洁，而用户体验又能很好，我们一直在找这样一个平衡点。

我希望的页面元素是这样的，它始终安静的呆在那里，当你不需要它的时候，它不会乱动和干扰到你，而你也清楚的知道它就在那里，当你使用它的时候，它能把隐藏于内的所有强大功能都一一体现出来。

一家之言，欢迎交流补充。

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虽并不永远代表是最好的方案, 但永远值得你考虑。