﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>搜索框 - UCD大社区</title>
 			<link>http://ucdchina.com/rss/topic_posts?id=115</link>
 			<description>搜索框 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2026-05-14 08:28:10</pubDate>			<item>
				<title>搜索框suggestion提示还能做点啥</title>
				<link>http://ucdchina.com/snap/5471</link>
				<description>&lt;div dir=&quot;ltr&quot;&gt;今天看到&lt;a href=&quot;http://zhuhequn.aliued.cn/2009/11/11/%E9%98%BF%E9%87%8C%E8%BE%93%E5%85%A5%E6%A1%86%E4%BA%A4%E4%BA%92%E5%B0%9D%E8%AF%95%E3%80%81%E5%90%AF%E5%8F%91%E5%BC%8F%E8%AF%84%E4%BC%B0%E5%8F%8A%E4%BC%98%E5%8C%96%E5%BB%BA%E8%AE%AE/&quot; target=&quot;_blank&quot;&gt;aliued朱鹤群同学&lt;/a&gt;的搜索框提示设计，其中提到的搜索框提示、交互设计的目的很有体会。&lt;br /&gt; &lt;br /&gt;&lt;a href=&quot;http://www.google.org.cn/posts/google-suggest-adds-universal-search.html&quot; target=&quot;_blank&quot;&gt;谷奥报道&lt;/a&gt;，最近Google的搜索框suggestion加入更多的提示功能，谷歌叫做加入通用搜索功能，比如可以直接显示天气，度量转换和简洁明确答案类。&lt;a href=&quot;http://blog.loverty.org/2005/09/yahoo.html&quot; target=&quot;_blank&quot;&gt;Yahoo 2005年9月搞得instant search服务&lt;/a&gt;的suggestion中出shortcut功能很类似。雅虎的一些在搜索方面的想法确实挺好的，10月份web2.0峰会上谷歌创始人之一Brin评价说&quot;雅虎（在搜索方面）拥有大量的创新，我希望雅虎仍能够在搜索领域进行创新&quot;，并对雅虎放弃搜索投奔微软表示遗憾。&lt;br /&gt; &lt;br /&gt;搜索输入框这个提示到底有什么价值？&lt;br /&gt;1 提高输入效率，降低输入成本，&lt;br /&gt;2 提升输入便利性、可参考性、有效性&lt;br /&gt;&lt;br /&gt;除了这些可见的成效，一个输入框的下拉框能玩出多少花来？是否还有其他意义？比如试图降低用户更自然语言的query表达等。&lt;br /&gt;搜索框提示其实有个颇为遗憾的就是浏览器本来记录的input框提示的信息无法呈现，这个是否可以跟搜索历史记录相结合解决掉呢？&lt;br /&gt;&lt;br /&gt;在有道的搜索框提示中，输入网站名提示网址挺有意思是一个对搜索框提示很有意思的发挥。&lt;a href=&quot;http://blog.loverty.org/2008/05/soso.html&quot; target=&quot;_blank&quot;&gt;soso的输入框提示&lt;/a&gt;也很有意思。&lt;br /&gt;&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;https://blogger.googleusercontent.com/tracker/11151143-7369006296199111415?l=blog.loverty.org&quot; alt=&quot;&quot; width=&quot;1&quot; height=&quot;1&quot; /&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;p&gt;&lt;img src=&quot;http://feeds.feedburner.com/%7Er/loverty/%7E4/ajApZ_ZhWXI&quot; alt=&quot;&quot; width=&quot;1&quot; height=&quot;1&quot; /&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://blog.loverty.org/2009/12/suggestion.html?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+loverty+%28blog.loverty.org%29&quot; target=&quot;_blank&quot;&gt;http://blog.loverty.org/2009/12/suggestion.html?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+loverty+%28blog.loverty.org%29&lt;/a&gt;&lt;/p&gt;</description>
				<author>noreply@blogger.com (loverty)</author>
				<pubDate>2009-12-12 20:14:27</pubDate>
			</item>			<item>
				<title>阿里输入框交互尝试、启发式评估及优化建议</title>
				<link>http://ucdchina.com/snap/5467</link>
				<description>&lt;h4 style=&quot;text-align: left;&quot;&gt;&amp;middot;设计目的：&lt;/h4&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 在不影响现有用户使用习惯的前提下，提升搜索输入流程的便利性；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 在有限的空间内，增强首页搜索操作的历史回溯能力，减少老用户的搜索操作成本，提高他们的搜索效率；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 对新用户的搜索引导更丰富，增加搜索的趣味性；&lt;/p&gt;
 
&lt;h4 style=&quot;text-align: left;&quot;&gt;&amp;middot;设计方案草稿：&lt;/h4&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;主要流程&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1.1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/4e1965e0ea7f844740cf863903c79eb4.png&quot; alt=&quot;002&quot; width=&quot;467&quot; height=&quot;74&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1.1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 在图1.1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1.2）；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/976667e85c209b076831a77726644ef5.png&quot; alt=&quot;003&quot; width=&quot;467&quot; height=&quot;284&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1.2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 在图1.2状态下，在输入框的最后方显示&amp;ldquo;一键清空&amp;rdquo;图标，当用户点击此图标后，将清空所有输入信息，并收回下拉框，输入框内仅保留光标；（如图1.3）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/7dfd1b3741ae8d0572bf816e37de7e62.png&quot; alt=&quot;004&quot; width=&quot;467&quot; height=&quot;74&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1.3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出我们的推荐热词列表（10条），并提示每条热词的搜索次数；（如图1.4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/bdd5b639147a9412e3d5ae6fd493fe6f.png&quot; alt=&quot;005&quot; width=&quot;467&quot; height=&quot;311&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1.4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;②如果用户有过任何的搜索行为记录，我们将弹出下拉框，给用户最近的10条搜索历史记录，不满10条的话显示全部，超过10条显示最近的10条，根据搜索时间顺序排列，显示最近一次搜索时间；（如图1.5）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/2e9abf0232b2515e365531ea997ed6fe.png&quot; alt=&quot;006&quot; width=&quot;467&quot; height=&quot;310&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1.5&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;5） 在弹出任何的下拉列表中，只要鼠标点选了其中的任何一条内容（也可以通过键盘光标移动+回车确认）后，就实现即时的搜索行为，引入搜索结果页面；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;分支流程1&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2.1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/4e1965e0ea7f844740cf863903c79eb4.png&quot; alt=&quot;002&quot; width=&quot;467&quot; height=&quot;74&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2.1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 在图2.1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2.2）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/7dfd1b3741ae8d0572bf816e37de7e62.png&quot; alt=&quot;004&quot; width=&quot;467&quot; height=&quot;74&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2.2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2.3）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/86b759a5cadcf6509f3bc572569b1e0e.png&quot; alt=&quot;004&quot; width=&quot;467&quot; height=&quot;73&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2.3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 在输入框内已有输入信息的状态下，（如图2.4），点击Tab，实现切换搜索维度操作后，保留输入信息；（如图2.5）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/a3d7f955175b5b6f06e80680c4d4fcbc.png&quot; alt=&quot;005&quot; width=&quot;467&quot; height=&quot;71&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2.4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/bab9817fcf6775323910e631090668a7.png&quot; alt=&quot;006&quot; width=&quot;467&quot; height=&quot;73&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2.5&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;分支流程2&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3.1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/6943b3380559bda9f3afc5c819dba5b5.png&quot; alt=&quot;002&quot; width=&quot;466&quot; height=&quot;283&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3.1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息和一键清空图标；（如图3.2）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/258308c11c65c501d280becc4c6fc2a1.png&quot; alt=&quot;003&quot; width=&quot;466&quot; height=&quot;78&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3.2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 在图3.2页面状态下，如果用户点击搜索框下方的箭头按钮，将根据用户属性对应弹出热词推荐或搜索历史记录下拉框（如图3.3）；此时点击下拉框内的任意条目，被选中词条将取代输入框内的词，引发搜索并进入搜索结果页面；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/aff999fb440600edebd35423e9c84504.png&quot; alt=&quot;004&quot; width=&quot;466&quot; height=&quot;611&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3.3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 在图3.3状态下，如果点击一键清空键，将清空输入框内信息，收回下拉框，仅光标在输入框内显示；（如图3.4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/7dfd1b3741ae8d0572bf816e37de7e62.png&quot; alt=&quot;004&quot; width=&quot;467&quot; height=&quot;74&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3.4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;5） 在图3.1的页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3.4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/834204989b7b98856a7fd590b2f99aab.png&quot; alt=&quot;005&quot; width=&quot;466&quot; height=&quot;284&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3.4&lt;/p&gt;
 
&lt;h4 style=&quot;text-align: left;&quot;&gt;&amp;middot;启发式评估意见整理&amp;mdash;&amp;mdash;主要争议点：&lt;/h4&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） &lt;strong&gt;默认焦点：&lt;/strong&gt;默认光标在输入框内，同时输入框内光标后有说明性文本，从用户习惯上讲没有先例，开发的可行性也需要评估；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;设计师评估：光标默认在输入框内的设计，符合目前主流搜索引擎的规范，说明性文本是用来指导新用户输入操作，其本身不存在歧义和误导，唯一需要考虑的是前端实现方面的可能及成本。所以我们暂定，在技术支持的前提下，保留设计。&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） &lt;strong&gt;一键删除：&lt;/strong&gt;新增此功能的必要性存在争议，图标语义也不是很明晰，容易让用户产生&amp;ldquo;关闭联想词下拉框&amp;rdquo;的误解，进而发生误删输入内容的可能；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;设计师评估：综合评估了该功能的使用场景，确实觉得在首页上的相关场景不多，同时图标还存在误导用户、引发争议的可能，所以决定先在搜索list等页面的搜索框测试功能，等确认效果后才同步到首页；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） &lt;strong&gt;下拉推荐：&lt;/strong&gt;下拉触发区块物理尺寸偏小，用户不容易发现，同时点击式的触发的条件也增加了用户的发现、使用成本；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;设计师评估：从视觉上将确实有点小，但我们前期的设计出发点就是在不打扰现有正常流程的前提下，尝试给老用户和高端用户一些新的交互体验，所以我们仍然决定支持现有的图标尺寸和触发条件，等上线测试后再决定下阶段的优化方向。&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） &lt;strong&gt;共用区块：&lt;/strong&gt;针对不同属性的用户，提供不同的推荐内容。同时从视觉上看，联想词下拉框也共用了此区块，只是在形式上略有差别。正是由于在公共区块存在不同反馈结果的可能，所以预计会对用户造成较高的理解、学习、使用成本；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;设计师评估：&lt;/strong&gt;根据共用区块提供的三类参考信息的目的（匹配并提供最符合用户想法的输入词，帮助用户高效完成输入操作）来看，我们认为应该不会对用户的理解、使用造成太大的困惑，更不会造成用户的操作失败。但考虑到评估期间内的争议比较突出，我们决定先期采用历史记录和热词推荐合并显示的方案，上线测试后再决定下阶段的优化方向。&lt;/p&gt;
 
&lt;h4 style=&quot;text-align: left;&quot;&gt;&amp;middot;优化设计方案：&lt;/h4&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;主要流程&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图1-1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/2cd333c923539f5fca4aef5e46d302b4.png&quot; alt=&quot;001&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1-1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 在图1-1页面状态下，当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数信息（如图1-2）；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/f2a206d556d4b274f0d46f2b4b475928.png&quot; alt=&quot;002&quot; width=&quot;468&quot; height=&quot;287&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1-2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 在图1-1页面状态下，在没有任何输入的情况下，点击搜索框下方箭头按钮将有两种可能情况：&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;①如果是全新用户，即没有任何搜索相关的行为记录，我们将弹出下拉框，给出推荐热词搜索（10条），提示每条热词的搜索次数，并说明搜索历史为&amp;ldquo;暂无&amp;rdquo;；（如图1-3）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/23c3dd40605126abd71493b8772512cb.png&quot; alt=&quot;004&quot; width=&quot;468&quot; height=&quot;339&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1-3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;②如果用户有过搜索行为，我们将弹出下拉框，给出用户最近的搜索历史记录，不满7条的话显示全部，超过7条显示最近的7条，根据搜索时间顺序排列，同时根据实际显示搜索历史的条数，对应显示热词搜索的条数（历史+热词=10条）（如图1-4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/e404d66e60b3cdad385a340442508890.png&quot; alt=&quot;005&quot; width=&quot;468&quot; height=&quot;339&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图1-4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 在图1-3、1-4页面状态下，在弹出的下拉框中，用户点选了其中的任何一条内容（可以是通过鼠标或者键盘光标移动+回车进行选择）后，就实现即时的关键词搜索操作，引入搜索结果页面；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;分支流程1&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 进入页面，光标默认放置在输入框内，支持用户直接输入操作。同时，光标后跟随当前搜索维度下的输入提示信息；（如图2-1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/2cd333c923539f5fca4aef5e46d302b4.png&quot; alt=&quot;001&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 在图2-1页面状态下，如果鼠标点击输入框内部区域，则清空系统的输入提示信息，仍保留输入光标，处于待输入状态；（如图2-2）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/69e204c0049ad381f3cfc35de6ea3da1.png&quot; alt=&quot;006&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 如果用户点击搜索框上方的Tab键，将实现切换搜索维度操作，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-3）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/7bc8c6e6b3af164aa5da3e778423e798.png&quot; alt=&quot;007&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 如果用户点击Tab项&amp;ldquo;更多&amp;rdquo;，将弹出下拉式选择框；（如图2-4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/8b9fbc7058823d7f948615ea91760f96.png&quot; alt=&quot;008&quot; width=&quot;468&quot; height=&quot;191&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;5） 在页面2-4状态下，如果用户点击非触发的空白区域，即未选择下拉框中任意一个选项，将回复到最近的搜索维度；（如图2-5）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/2cd333c923539f5fca4aef5e46d302b4.png&quot; alt=&quot;001&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-5&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;6） 在页面2-4状态下，如果用户选择下拉框中任意一个选项，将切换Tab到该搜索维度，光标维持在输入框内，同时系统显示当前维度下的输入提示信息；（如图2-6）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/3715d046ba35368b5359563808ff5ca3.png&quot; alt=&quot;009&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图2-6&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;7） 在页面2-6状态下，点击最后那个Tab项&amp;ldquo;博客&amp;rdquo;，将弹出下拉框，后续交互逻辑同页面2-4；（如图2-7）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/9bbb8511943b555535773ba937b03264.png&quot; alt=&quot;010&quot; width=&quot;468&quot; height=&quot;191&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图 2-7&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;分支流程2&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 当用户输入任意关键词后，在输入框内部，清空系统默认的输入提示信息，显示当前输入内容。同时，自动向下弹出联想词推荐，并给出可能的搜索结果数量；（如图3-1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/f2a206d556d4b274f0d46f2b4b475928.png&quot; alt=&quot;002&quot; width=&quot;468&quot; height=&quot;287&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3-1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 如果用户点击页面其他无操作空白区，取消关键词联想推荐的下拉框，但保留搜索框内的输入信息；（如图3-2）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/76b8ce5df9f432642842c78d3ca21aa6.png&quot; alt=&quot;011&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3-2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 在图3-2页面状态下，如果用户点击搜索框下方的箭头按钮，将弹出下拉框，显示搜索历史和热词搜索（如图3-3）；此时点选下拉框内的任意条目，被选中词条将取代输入框内的词，直接引发搜索行为并进入搜索结果页面；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/1de18d91b45f33f1cc4032d061aa179b.png&quot; alt=&quot;012&quot; width=&quot;468&quot; height=&quot;339&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3-3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;4） 在图3-3页面状态下，如果点击弹出框下方箭头按钮，将收回下拉框，输入框内保留现有的输入信息；（如图3-4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/76b8ce5df9f432642842c78d3ca21aa6.png&quot; alt=&quot;011&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3-4&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;5） 在图3-4页面状态下，如果发生任何的输入性操作，包括删除部分现有信息（除输入框内信息为空的情况外）、追加输入等行为，均弹出联想推荐下拉框；（如图3-5）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/b0da0f5356e1807bc3f5d287a0395270.png&quot; alt=&quot;013&quot; width=&quot;468&quot; height=&quot;287&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图3-5&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&amp;middot;分支流程3&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;1） 当输入框中没有任何输入信息时候，点击Tab，仅切换到对应的搜索维度；（如图4-1）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/332a7d3c38959822050577985440fadc.png&quot; alt=&quot;014&quot; width=&quot;468&quot; height=&quot;456&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图4-1&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;2） 当输入框中有任何信息时（如图4-2），点击非当前维度的Tab（比如点击&amp;ldquo;公司&amp;rdquo;项），直接引发对应维度下的搜索行为并进入搜索结果页面；&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/76b8ce5df9f432642842c78d3ca21aa6.png&quot; alt=&quot;011&quot; width=&quot;468&quot; height=&quot;76&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图4-2&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;3） 在图4-1的各状态下，点击&amp;ldquo;搜索&amp;rdquo;按钮，将进入各模块对应的引导页面；（如图4-3、图4-4）&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/893bea212f35b63a63938133f791d617.png&quot; alt=&quot;016&quot; width=&quot;468&quot; height=&quot;177&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图4-3&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-12/15f2bf4fe9fee1197c1e6833dd8d2ff2.png&quot; alt=&quot;015&quot; width=&quot;468&quot; height=&quot;481&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;图4-4&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.aliued.cn/?p=2203&quot; target=&quot;_blank&quot;&gt;http://www.aliued.cn/?p=2203&lt;/a&gt;&lt;/p&gt;</description>
				<author>zhuhequn</author>
				<pubDate>2009-12-11 21:48:52</pubDate>
			</item>			<item>
				<title>空搜索如何设计？</title>
				<link>http://ucdchina.com/snap/3064</link>
				<description>&lt;p&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 题续&lt;/span&gt;&lt;a href=&quot;http://www.ikent.me/blog/1389&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;上篇&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-size: small;&quot;&gt;，继续说说关于搜索的设计。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 下午的时候群里一个童鞋列出了一些电子商务网站对于空搜索的处理结果，然后引发了一个关于空搜索处理的讨论。这里，&lt;strong&gt;空搜索指的是：不在搜索框里输入任何内容，直接点击搜索按钮。&lt;/strong&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 可以肯定的是，造成空搜索的用户的比例应该不大，主要是误操作，当然也不排除向我这样的探索者。但是作为电子商务网站用户体验的一部分，这个地方必须要考虑到。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 我们先来看看主流电子商务网站的处理结果（这里不需要讨论搜索引擎的返回结果，因为它就是做搜索的，没有也没必要去给你推送什么其他的内容）：&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 阿里巴巴中国站；弹出提示框&amp;ldquo;请输入产品名称&amp;rdquo;，点击确定后没有任何反应&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 慧聪；弹出提示框&amp;ldquo;请输入查询内容&amp;rdquo;，点击确定后光标落在输入框内&amp;ldquo;输入你感兴趣的内容&amp;rdquo;后面&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 百度有啊；跳转到查看所有分类页面&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 淘宝；跳转到查看所有分类页面&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 拍拍；跳转到查看所有分类页面&lt;br /&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; 卓越；跳转到搜索结果页面，提示找到0条搜索结果&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 亚马逊；刷新一次页面&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 从结果上看，主要分为4类：弹出窗口提示、跳转到列表页、显示0条搜索结果、刷新一次页面。那么，哪个网站的设计的用户体验最爽呢？&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
前几天我正好对网站搜索部分做了一次改版，采取的是优化了的弹窗形式：弹出窗口提示输入关键词，该窗口自动在3秒内关闭，关闭后光标被移动到搜索输入框
内，且框内原先的提示信息被清除掉，弹窗的位置控制在离搜索框很近的位置，目的在于不要造成宽屏用户的鼠标长途奔袭。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 于是我最开始的时候倾向与这种结果的返回。出发点是在于对于用户的误操作给出善意的提醒，同时尽最大可能不给用户造成额外的负担。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 洗澡的时候突然觉得这样的做法有点不符合老大经常教导我的&amp;ldquo;&lt;a href=&quot;http://www.ikent.me/blog/1331&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;产品要和运营挂钩&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;rdquo;的原则。应该尽最大的努力展示网站的内容给我的用户，同时想办法引导他们去点击去使用，那么，从这个角度来看，淘宝、拍拍的做法应该是合理的。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 擦干身子抽了颗烟，觉得这样似乎也不是很妥，于是找&lt;/span&gt;&lt;a onclick=&quot;javascript:pageTracker._trackPageview ('/outbound/hi.baidu.com');&quot; href=&quot;http://hi.baidu.com/wkcow&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;wkcow&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-size: small;&quot;&gt;讨教了一下，被点醒了，其实最好的用户体验设计应该是亚马逊。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
首先，空搜索既然是用户的误操作就需要给用户一些提醒，那么没有任何反应的设计必然是错误的，因为用户看到没动，可能认为是网站出问题了，这种设计是最最
傻的；其次，对于弹出窗口的设计用户是不愿意去等待那3秒的，那么就必须要点一次确定，这样就多了一次交互，还是给用户增加了负担，且在设计上要考虑弹出
窗口的位置、光标的位置的问题，这种设计事实上很累也很傻；第三，返回列表页的设计是想给用户推送一些其他的内容，但是实际上用户是不会理睬这些内容的，
且这个结果改变了用户的初衷，更改了最简单的流程。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
亚马逊的设计恰恰是一个最最正常的流程，不需要交互、不需要解释，就是一个简单的刷新已经告诉了用户很多信息：点击搜索按钮，网址执行了该操作，但你输入
的是空白，我也就给你一个空白的结果（这里，卓越跳转到搜索结果页，且提示搜索结果为0的做法是一个很不人性化的机械的执行用户操作的傻设计）。&lt;br /&gt; &lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 把这次的探讨总结成一句话共勉：&lt;strong&gt;注重用户体验，就需要尽可能的减少交互，不给用户增加不必要的负担！&lt;/strong&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Update：发布的&lt;/span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;a onclick=&quot;javascript:pageTracker._trackPageview ('/outbound/www.5gme.com');&quot; href=&quot;http://www.5gme.com/space-1783-do-blog-id-56280.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;5G&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;之后，老白和白鸦给出2种更优化的方法；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 之一：干嘛要刷新页面？&amp;nbsp; &amp;nbsp;这不还是让人和机器交互了一次吗，万一页面大这个刷新的成本有多少？ 就让他点了以后输入框做个简单的提醒（比如输入框的光标出现，或者输入框的颜色闪动等小到有那么有点反应即可），不行吗？&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 之二：没有空搜索，搜索栏默认热词，光标过去立即清空，等待用户录入同时提供下拉备选。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 谁还有更好的方法？欢迎探讨。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/252&quot; target=&quot;_blank&quot;&gt;站内搜索&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.ikent.me/blog/1404&quot; target=&quot;_blank&quot;&gt;http://www.ikent.me/blog/1404&lt;/a&gt;&lt;/p&gt;</description>
				<author>kent.zhu</author>
				<pubDate>2009-04-11 22:03:08</pubDate>
			</item>			<item>
				<title>把搜索框还给搜索</title>
				<link>http://ucdchina.com/snap/2939</link>
				<description>&lt;p&gt;&lt;span style=&quot;font-size:small&quot;&gt;&lt;strong&gt;1、搜索框的意义&lt;/strong&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 用户总是和你想的不一样，用户很多时候是不会按照你设定的导航走的，他们更多的时候是上来就直接输入关键字进行搜索。对于购物者而言，如果清楚的知道想要什么，他们会很明确的使用搜索框，这种情况下购物者显示出了明确的购物意图，因此搜索框能够把该意图转变为真实的购买行为。来自Fast Search的数据显示，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 如果一个网站没有足够合理的信息架构体系，那么搜索引擎不仅仅是有帮助性的，甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。事实上，搜索是用户了解在一些综合性网站内容最直接有效的方式。最好的搜索设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上，但却有强力搜索的能力和范围宽 广的功能。&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 所以，如果你的网站没有足够清晰的信息架构体系，那么，请把你的搜索框还给搜索，不要再试图去绑架你的搜索框！&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size:small&quot;&gt;&lt;strong&gt;2、被绑架的搜索框&lt;/strong&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size:small&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-04/e69e7a51c453ce7214bba421dc05d760.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;101&quot; /&gt; &lt;span style=&quot;color:#ffffff&quot;&gt;http://www.zghzp.com/&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 不可否认，右侧的背景很美，但是我是来搜索的不是来欣赏图片的，这个背景搞的我都不知道这个搜索还有上面的频道切换是不是可以点击了（我试图去点击新版上线，未果）。这个设计的用户体验差及了。&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-04/e22dafb372038e7af7e82d4a648a6f26.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;29&quot; /&gt; &lt;span style=&quot;color:#ffffff&quot;&gt;http://www.shtimber.com/&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 搜索跟留言板有什么关系？搞个留言板的按钮跟搜索放在一起是什么逻辑？这让我在想搜索的时候很不爽&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-04/baf3eeb62e97f4e69c606da49296d4e6.jpeg&quot; alt=&quot;&quot; /&gt; &lt;span style=&quot;color:#ffffff&quot;&gt;http://cn.china.cn/&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp; 这个很让我无语，在搜索按钮后面补个按钮就罢了，居然还来个比搜索按钮还大2倍多的按钮&amp;hellip;&amp;hellip; &amp;nbsp; &lt;br /&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-04/59b256ee145c971cf6bb7c44d6ad41bc.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;51&quot; /&gt; &lt;span style=&quot;color:#ffffff&quot;&gt;http://b2b.hc360.com&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 这个大概是我见过的最无语的搜索框了。想不清楚为什么现在还有设计师会把&amp;ldquo;设为首页&amp;rdquo;、&amp;ldquo;收藏本页&amp;rdquo;这样的功能摆出来，而且是摆在搜索框上。&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2009-04/18a59e9b2f50e7b28e9b339e875a1732.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;36&quot; /&gt;&amp;nbsp; &lt;span style=&quot;color:#ffffff&quot;&gt;http://www.8035.com/&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 对于这个，首先视觉完全被放在了那2个&amp;ldquo;新&amp;rdquo;、&amp;ldquo;热&amp;rdquo;上去了，压根没有想着点前面的东西了；不知道为什么要把这2个东西摆在搜索按钮的后面，还有，这么长的搜索框是否是在告诉我，你们网站的东西很难找，需要很长的关键词呢？&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 现在很多网站都倾向于搞一个这样会闪的gif图片来突出某些内容，我习惯把这些东西叫小蚂蚁。有的网站搞的很夸张，这小蚂蚁长的胖的出奇，用户的吸引力完全都放在了那只胖蚂蚁上，根本没有想着胖蚂蚁前面的东西；有的网站觉得每个栏目都需要突出于是每个栏目上都搞个&amp;ldquo;新&amp;rdquo;、&amp;ldquo;热点&amp;rdquo;，最后的结果就是整个网站看着就像个蚂蚁窝。个人觉得要想用这个小玩意赢得好的用户体验，至少要保证3点：小、简、少。小，不至于让我感觉感觉突兀；简，能表达意思就可以了；少，不至于搞的我想点了不知道点哪里。&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size:small&quot;&gt;&lt;strong&gt;3、把搜索框还给搜索&lt;/strong&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 把搜索框还给搜索！搜索就是搜索，不要给搜索背上太多的东西。一个搜索频道、一个搜索输入框、一个搜索按钮这样就已经足够多了，再多一点搜索框都会受不了！当然，你也可以让你的搜索框更精简，精简到只有一个搜索框。&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 把搜索叫搜索！搜索的位置要明显到用户第一眼就能看到且随时能够找到；输入框应该让用户感觉可以输入；搜索按钮看上去应该更像是个按钮；不要把无关的东西在搜索按钮边上，它就应该一个人待着！&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.ikent.me/blog/1389&quot; target=&quot;_blank&quot;&gt;http://www.ikent.me/blog/1389&lt;/a&gt;&lt;/p&gt;</description>
				<author>kent.zhu</author>
				<pubDate>2009-04-01 08:12:09</pubDate>
			</item>			<item>
				<title>从用户群体看细节交互</title>
				<link>http://ucdchina.com/snap/551</link>
				<description>&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-size: 12pt;&quot;&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/a1b68740dd664b73484a0c9d27634f39.png&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;strong&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;上图&lt;span&gt;A&lt;/span&gt;：&lt;span&gt;IE&lt;/span&gt;上&lt;span&gt;google&lt;/span&gt;的搜索框设计，鼠标移动到&lt;span&gt;&amp;ldquo;&lt;/span&gt;搜索&lt;span&gt;&amp;rdquo;&lt;/span&gt;触发操作。&lt;span&gt;&lt;br /&gt;&lt;/span&gt;上图&lt;span&gt;B&lt;/span&gt;：火狐中&lt;span&gt;google&lt;/span&gt;的搜索框设计，用放大镜标识触发。&lt;span&gt;&lt;br /&gt;&lt;/span&gt;上图&lt;span&gt;C&lt;/span&gt;：&lt;span&gt;IE&lt;/span&gt;上搜索框设计，用按钮的方式标识触发操作。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;西贝在多处进行操作习惯的调研，比如蓝色论坛、&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;QQ&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;群&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;（非互联网活跃用户）、&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;QQ&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;群&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;2&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;（大多是做&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;HCI&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;的）等。针对不同的用户群体提出了同样的问题：&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;background: yellow none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-family: 宋体;&quot;&gt;哪种搜索最易用，是我最期望的，为什么？&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&lt;strong&gt;普通用户&lt;/strong&gt;（对快捷操作不熟悉，不是资深的网民）：&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;心理上需要安全感，觉得全部显示出来是最安全的。设计要明确的给出&amp;ldquo;你要我怎么操作，哪里是用来点击的，哪里是用来选择的，我在哪里输入信息&amp;rdquo;。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;A&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;：最常见的，最明确的。但是&amp;ldquo;搜索&amp;rdquo;用文字表达，要去点击才知道是按钮的操作。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;B&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;：多了一份简洁，但是按钮再输入框中，有误认为是图标的概念。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;C&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;：了解如何操作，就是不清楚下拉的选择为什么是在后面操作。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;总结出来的样式：&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/7d69ecbe9756b6fa03c8e810357482b0.jpeg&quot; alt=&quot;&quot; /&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&lt;strong&gt;成熟型用户：&lt;span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;表现方式变得不再重要，基本来说使用&amp;ldquo;&lt;span&gt;Enter&lt;/span&gt;键&amp;rdquo;。使用键盘操作多，少量使用鼠标的用户在输入后，最快的满足方式就是&lt;span&gt;Enter&lt;/span&gt;建。而且西贝意外的发现成熟型人员比较喜欢输入后才寻类别，不知道是调研的群体比较狭窄还是调研的人都比较喜欢这个方式&lt;span&gt;~&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;所以思路就是这样的&amp;ldquo;输入》类别》&lt;span&gt;Enter&lt;/span&gt;搜索&amp;rdquo;。那么&lt;span&gt;C&lt;/span&gt;方案就是比较适合的了。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;总结出来的样式：&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/9c05721eeee72b0ba7fbe7f9b5530071.jpeg&quot; alt=&quot;&quot; /&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;那么，是不是可以说忽视考虑资深网民的操作习惯，采用&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;Enter&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;的快捷键就&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;ok&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;了？重要的就是考虑普通网民的设计了呢？而且美观和简洁当道的&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;Web&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;世界，是不是图标放到输入框下，做可以点击的样子就是最合理呢？&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;如下方式是最好的吗？欢迎大家给不同意见：&amp;nbsp;&lt;br /&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/a32f3e15155803e240471870e526bee3.jpeg&quot; alt=&quot;&quot; /&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;附调研部分意见：&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;不熟练用户会将鼠标放到放大镜那里，有变化会更好，即&lt;span&gt;ie&lt;/span&gt;上的搜索框的那种效果。。。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;习惯输入内容后&lt;span&gt;enter&lt;/span&gt;。&lt;span&gt;&lt;br /&gt;&lt;/span&gt;并且在输入完后，就有选择搜索引擎类别，这也挺方便。&lt;span&gt;&lt;br /&gt;&lt;/span&gt;有些喜欢输入前寻类别，个人偏向后者。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;通常我只用&lt;span&gt;enter&lt;/span&gt;按键。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;估计是因为用本本久了，所以偏向喜欢&lt;span&gt;C&lt;/span&gt;。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;我会选&lt;span&gt;C&lt;/span&gt;，比较直观，不需要思考过程，箭头下拉的指示也比较明确&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;对于普通网民来，他们绝大部分就只知道点&lt;span&gt;&amp;ldquo;&lt;/span&gt;按钮&lt;span&gt;&amp;rdquo;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;AC&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;都可以吧。&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;最好是输入搜素关键词后，直接&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;enter&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;按键就可以搜索。&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;选&lt;span&gt;C&lt;/span&gt;，操作可提示性和美化程度结合得比较好。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;我和很多人都是直接回车提交信息的。&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;我选&lt;span&gt;B~&lt;/span&gt;。&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;google&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;一直都提倡输入内容后直接按回车键，这点在用&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;GOOGLE&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;网站搜索的时候也会提示，所以在&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;A&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;里的搜索没有做直接的提示为按钮也在情理之中，从这一点来说，&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;B&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;无疑是最佳的选择，因为不会在视线里造成其它的困绕。相对来说我觉得&lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-family: Calibri;&quot;&gt;C&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;是最难理解的，因为在我输入内容的同时它不能够为我指明当前搜索引擎的名称。&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;。。。&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&lt;/span&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;欢迎拍砖讨论&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;banlon的建议:&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; line-height: 19.2pt;&quot;&gt;&lt;span style=&quot;font-family: 宋体;&quot;&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/6a6686856b8b1716f21f65958454face.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.ucdcn.com/space.php?uid=24&amp;do=blog&amp;id=92&quot; target=&quot;_blank&quot;&gt;http://www.ucdcn.com/space.php?uid=24&amp;do=blog&amp;id=92&lt;/a&gt;&lt;/p&gt;</description>
				<author>西贝</author>
				<pubDate>2008-09-15 15:56:48</pubDate>
			</item>			<item>
				<title>思考关于搜索框的设计</title>
				<link>http://ucdchina.com/snap/1346</link>
				<description>&lt;p&gt;在内容为主的网站中，搜索框往往是最常用的设计元素之一。从可用性的角度来看，搜索功能是用户有了明确的内容想看的时候最后使用的功能。如果一个网站没有足够合理的信息架构体系，那么搜索引擎不仅仅是有帮助性的，甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。事实上，搜索是用户了解在一些综合性网站内容最直接有效的方式。最好的设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上，但却有强力搜索的能力和范围宽广的功能。&lt;/p&gt;
 
&lt;p&gt;在现实中，网站往往会随着时间的推移，新的内容不断的增递，而且这些新内容会更加重要，那么他对你之前设计的信息架构会有一定挑战，可能新的内容不一定适合整个信息架构，这个时候会和你的当时精心设计架构是有违背的。那么你的内容会打散在各个地方，每块内容都会看上去比较特别，感觉不是在网站架构中的一样。&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;当内容被分散四处，没有内容组织的时候，用户就更加困难找到他说需要的信息了。用户的可用性降低了，没有他所需信息的时候，用户会选择离开网站，或去Google去试试运气。这个时候还有唯一的希望那就是：一个搜索框。&lt;/p&gt;
 
&lt;p&gt;虽然搜索的背后需要很高深厉害的程序算法，但不要忽视了前台的UI设计，我想可以看看更多现有网站的搜索框的设计。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;什么时候需要搜索？&lt;/strong&gt;&lt;br /&gt; 并非每一个网站都需要搜索功能的，但随之网站越来越多内容，它是满足用户以最快速度获得所需信息的最有效的方法。如果网站导航非常简单直观，没有内容能逃出网站的导航的话，那么搜索对于这样的网站没有太大作用。&lt;br /&gt; 搜索应该是一种预防性的功能，因为当导航系统十分庞大复杂的时候，搜索是能力立即去解决麻烦的方法。它可以培养用户要如何使用网络获得他们想要的信息。&lt;/p&gt;
 
&lt;p&gt;因此，如果网站够大，或者网站会逐渐庞大的网站，早点考虑优化自己的搜索引擎，那么您的用户会感谢你滴。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;搜索框=输入框+提交按钮&lt;/strong&gt;&lt;br /&gt; 在设计中的搜索框变得很重要。输入框必须清晰可见，很容易辨认和使用。有人可能会认为，在搜索框并不需要什么设计。看上去，这只有两个简单的要素：输入框和提交按钮。任何设计都不平凡。设计是很多要考虑的，比如：输入框的长度取舍，输入文字显示的设计。有些设计师就连提交按钮都没有设计上去。&lt;/p&gt;
 
&lt;p&gt;事实上，设计的搜寻框是一个大问题。因为当用户有需求找某些信息的时候，搜索是最有效果的功能。那么搜索框的位置很重要，还有输入框应该让用户感觉可以输入，搜索按钮看上去应该更像是个按钮。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.maidow.com/blog/wp-content/uploads/2008/12/techcrunch2.jpg&quot;&gt;&lt;img title=&quot;techcrunch2&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/3c8ff5c5293398f0431b7da955119174.jpeg&quot; alt=&quot;&quot; width=&quot;467&quot; height=&quot;302&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;看看&lt;a href=&quot;http://www.techcrunch.com/&quot;&gt;TechCrunch&lt;/a&gt;的设计，输入框和提交按钮，在配色方案完全符合网站的整体视觉风格。然而，它导致了一个问题：乍看之下，这真的很难看到的搜索框。用户可以搜索它，因为它不站出来是不容易发现。虽然位置的搜索框不错，很容易忽视，但这是不是一件好事。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;搜索框容易犯的错误&lt;/strong&gt;&lt;br /&gt; 在设计的时候我发现了几个问题：&lt;br /&gt; 1.&amp;nbsp;把搜索框放到页面底部，或隐藏在导航菜单中。&lt;br /&gt; 2.&amp;nbsp;将输入框设计比较短，暗示让用户使用短词来查询。&lt;br /&gt; 3.&amp;nbsp;提交按钮设计的比较小，迫使用户必须让鼠标指向非常精准。&lt;br /&gt; 4.&amp;nbsp;搜索框比较难让用户发现。&lt;br /&gt; 5.&amp;nbsp;搜索框的形式和其他功能形式一样的设计，比如联系人中的设计。&lt;br /&gt; 6.&amp;nbsp;在全设计中的页面（推广宣传），搜索框被设计的很难发现。&lt;br /&gt; 7.&amp;nbsp;提供功能过于强大的搜索，当用户是需要简单。&lt;br /&gt; 8.&amp;nbsp;提交按钮的名字随意的乱叫。&lt;br /&gt; 9.&amp;nbsp;并非搜索的功能，当看上去很像搜索框。&lt;br /&gt; 10.&amp;nbsp;提供多个提交按钮。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.maidow.com/blog/wp-content/uploads/2008/12/wikipedia_org.jpg&quot;&gt;&lt;img title=&quot;wikipedia_org&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/66cd4cd81c4dc8fd62e4052fb97468f4.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;90&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://en.wikipedia.org/wiki/Main_Page&quot;&gt;Wikipedia&lt;/a&gt;的搜索框就没有很直观的体现搜索。用户点击&amp;ldquo;Go&amp;rdquo;和&amp;ldquo;Search&amp;rdquo;有什么区别？功能上有什么不同？能不能在设计上让他们不太一样么。&lt;br /&gt; &lt;strong&gt;设计体贴的搜索框&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color:#999999&quot;&gt;让我们来看看一些经常反复出现的困难和问题，设计师可能会在设计搜索框时所顾虑的。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;搜索框放在什么位置？&lt;/strong&gt;&lt;br /&gt; 有比较多的可能性，但只有少许是正确的设计。最方便的地方是网站顶部左上角或右上角。这两个位置比较让用户发现。因为用户最常见的&lt;a href=&quot;http://www.useit.com/alertbox/reading_pattern.html&quot;&gt;F-型眼扫描模式&lt;/a&gt;。很多的博客往往将搜索框放在网站底部，看上去这个不是个好主意，但可能处于广告等的考虑吧。&lt;br /&gt; &lt;a href=&quot;http://www.maidow.com/blog/wp-content/uploads/2008/12/housingworks_org.jpg&quot;&gt;&lt;img title=&quot;housingworks_org&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/6dab0181d3c706066510345ea1483e36.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;95&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;如何命名提交按钮？&lt;/strong&gt;&lt;br /&gt; 让提交按钮根据使用场景和用户情感化的设计来命名，是一个不错的主意。如：查找、查询、搜索或者一个ICON来表示。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.maidow.com/blog/wp-content/uploads/2008/12/carhartt-streetwear_com.jpg&quot;&gt;&lt;img title=&quot;carhartt-streetwear_com&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/91a4d460c2dc97bc2944e6ceea220eb2.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;80&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;这样的搜索按钮图片是非常让用户困惑的。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;如何让用户如何搜索？&lt;/strong&gt;&lt;br /&gt; 一个很好的想法就是把提示的文字放在输入框内，当鼠标点击输入框时提示消失。这样能明确告知该怎么利用搜索框。虽然它需要用小小段JavaScript来实现。&lt;br /&gt; &amp;nbsp;&lt;a href=&quot;http://www.maidow.com/blog/wp-content/uploads/2008/12/nyc_everyblock_com.jpg&quot;&gt;&lt;img title=&quot;nyc_everyblock_com&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/5d528eff6381b35eb565d686c86f6fad.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;80&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 许多网站开始使用Google提供的一些搜索服务，但是可能用户不太喜欢这样的搜索结果，而且Google的算法也不太适合某些公司的网站需求。当不可否认Google的出现打破了一些规则。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/115&quot; target=&quot;_blank&quot;&gt;搜索框&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.maidow.com/blog/?p=252&quot; target=&quot;_blank&quot;&gt;http://www.maidow.com/blog/?p=252&lt;/a&gt;&lt;/p&gt;</description>
				<author>Maison</author>
				<pubDate>2008-12-09 08:00:37</pubDate>
			</item></channel></rss>