﻿﻿<?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/posts</link>
 			<description>最新文章 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2009-01-06 15:13:41</pubDate>			<item>
				<title>表单设计的最佳体验</title>
				<link>http://www.yeeyan.com/articles/view/8217/3893</link>
				<description>&lt;p&gt;原文：&lt;a href=&quot;http://www.lukew.com/resources/articles/WebForms_LukeW.pdf&quot;&gt;http://www.lukew.com/resources/articles/WebForms_LukeW.pdf&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;为什么表单设计非常重要？&lt;br /&gt;&lt;br /&gt;- 表单是用户与网站之间进行&amp;ldquo;对话&amp;rdquo;的方式&lt;br /&gt;- 从商业上&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使用户能够实现购买行为&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使商家实现销售利润最大化&lt;br /&gt;- 从交互的角度&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使用户能够参与&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使商家能够增加用户并形成社区&lt;br /&gt;- 从参与角度&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使用户能够操作和贡献内容&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使商家可以积累内容和数据&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;设计&lt;/em&gt;&lt;/span&gt;原则&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 使痛苦减少到最小&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;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 清晰的完成路径&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 考虑用户的背景和使用情景&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;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 确保交流的连续性&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;br /&gt;对效果的分析&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 易用性测试&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 错误，提示，帮助，完成率，每次任务花费时间，满意度分值&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 眼球跟踪&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 完成时间，关注点,扫视路径&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 用户帮助&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 最重要的问题，事故次数&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;- 常用解决方案，独特的方法&lt;br /&gt;&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;br /&gt;&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;设计&lt;/em&gt;&lt;/span&gt;模式&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;信息+互动+反馈&lt;br /&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;br /&gt;信息&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 布局&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 输入&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 格式，必填项目&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 首要动作和次要动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 帮助和提示&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 视觉层级&lt;br /&gt;&lt;br /&gt;标签顶端对齐方式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当被收集的数据是熟悉的&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 最少的完成时间&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 需要更大的垂直空间&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 间距和对比对于有效的视觉扫描很关键&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 对于本地化和复杂的输入有更高的灵活性&lt;br /&gt;&lt;br /&gt;标签右对齐方式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 标签和输入框有清晰的联系&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 需要较少的垂直空间&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 由于左侧的不对齐，快速扫描所有标签变得比较困难&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 很快的完成时间&lt;br /&gt;&lt;br /&gt;标签左对齐方式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当需要的数据不熟悉时&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 标签的扫描比较容易&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 标签与输入框的联系不紧密&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 改变标签长度可能对布局产生破坏和削弱&lt;br /&gt;&lt;br /&gt;眼球跟踪&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 2006年7月matteo panzo的研究&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 左对齐&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 右对齐&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 顶端对齐&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;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 减少完成时间以及熟悉的数据输入：上对齐&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 如果希望节省垂直空间：右对齐&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 对于用户不熟悉或者高级的数据项：左对齐&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;必填项目&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 必填项的指示在以下情况下最有用：&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用户能够通过扫描表单知道什么需要填写&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 选填项指示在以下情况下最有用：&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 很少的项目是选填项&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当所有项目都是必填项时指示就没有用处&lt;br /&gt;&lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 尽量避免选填项&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 必填项多，则标明选填项目&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 选填项多，则标明必填项&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 文字最好，但*经常被用于必填项目&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 将标识和标签连在一起&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;输入域长度&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 输入域长度可以提供有价值的affordances&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 适当的域长度为输入提供足够的空间&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 混乱的域长度可能给表单增加视觉噪音&lt;br /&gt;&lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 如果可能，use field length as an affordance&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 否则，考虑一个一致的长度提供足够的输入空间&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;内容分组&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 内容关系提供了结构化组织表单的方式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 分组提供了&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;br /&gt;太多的内容分组会导致额外的视觉噪音，降低可读性&lt;br /&gt;最小化分组的好处：减少视觉噪音，更直接的完成路径&lt;br /&gt;&lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 将表单内关联的内容进行分组&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用最少数量的视觉元素来表达关系&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 不是所有的表单动作是平等的&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 动作的视觉呈现需要与他们的重要性相匹配&lt;br /&gt;&lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 如果可能，避免次要动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 否则，用清晰的视觉识别来区分主要和次要动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;帮助和提示&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 在下面的情况下，帮助提示是有用的：&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;&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 然而，过度使用帮助和提示会很快overwhelm表单&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 在下面的情况下，你也许需要考虑动态提示&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;&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;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 除非必要，尽量少的使用帮助、提示&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 明显和与数据输入区最相邻的帮助是最有效的&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当收集很多用户不熟悉的数据时，考虑使用动态提示系统&lt;br /&gt;&lt;br /&gt;交互&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 用户完成的路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用键盘的tab键进行控制&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 逐步出现&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 依赖性出现&lt;br /&gt;&lt;br /&gt;完成路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 每个表单的首要目标都是希望用户填完&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 每一个输入项目需要考虑和操作&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 提供清晰的路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 提供聪明的默认值&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 去掉所有不必要的数据请求&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用聪明的默认值&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 给用户提供灵活的数据输入选择&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 清晰的完成路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 对于长表单，提供进度和保存功能&lt;br /&gt;&lt;br /&gt;tabbing&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 许多用户通过tab在表单项目之间跳转&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 合理的html将保证跳转正确工作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 多列式的表单结构可能与tabbing顺序相冲突&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 记得考虑tabbing&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用tabindex属性来控制tabbing顺序&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;设计&lt;/em&gt;&lt;/span&gt;表单布局时考虑tabbing预期&lt;br /&gt;&lt;br /&gt;阶段性提醒&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 不是所有用户一次需要所有可选项&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 合理使用的阶段性提醒提供了额外的选项&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;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 根据用户需求的优先级来安排阶段性提醒&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 最有效的方法是让用户来触发&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用一致的提醒方式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;依赖性选择输入&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 有时候一个数据需要与其他的数据输入相关联&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;br /&gt;依赖型显现输入&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 页面级别&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 需要额外的步骤&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 区块标签&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 手指区块标签&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 需要遵循完成路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 区块选择项&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 下方暴露和行间暴露&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 有让用户迷惑的潜在危险&lt;br /&gt;&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;br /&gt;最好的体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 在首选项之间保持清晰的关系&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 将额外输入项与他们的触发器之间保持清晰的关联&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 避免&amp;ldquo;跳跃&amp;rdquo;造成首选项之间关联的减弱&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;反馈&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 文中校验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 一致性&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 错误&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 提示形式和解决方案&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 进度&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 提示形式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 成功&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;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当数据输入时提供直接的反馈&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 帮助用户不超出限制&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 如：&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;&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;br /&gt;最佳体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当输入项的出错率很高时考虑文中校验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用建议输入来减少歧义&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 沟通界限&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;报错&lt;/em&gt;&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 错误被用来保证所有数据项被正确提供&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 清晰的标签，affordances，帮助提示和校验可以帮助减少错误&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 但一些错误仍然会出现&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 用尽量少的步骤提供清晰的解决方案&lt;br /&gt;&lt;br /&gt;最佳体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当错误发生时提供清楚地交流：优先的位置和视觉反差&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 提供修正错误的方法&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 将错误信息与相关输入项关联起来&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当错误发生时用视觉语言来double&lt;br /&gt;&lt;br /&gt;进度&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 一些时候动作需要有执行的时间&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 上传&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当动作进行中时提供反馈&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 例如：将提交按钮disable&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;最佳体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 提供任务的进度提示&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当用户点击提交后，将其disable以避免重复的提交&lt;br /&gt;&lt;br /&gt;成功&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当成功完成表单时，在上下文中确认数据输入&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 通过以下形式提供反馈&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;最佳体验&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 当数据提交成功后给与清晰的交流&lt;br /&gt;&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;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 避免改变用户提供的输入&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;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 如果获取信息是困难的，那么让用户知道比直接给用户一个表单更优先&lt;br /&gt;&lt;br /&gt;可用性和标签形式&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用label标签将数据与标签关联&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 能够被screen reader正确识别&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 多数浏览器将带标签的文字处理为可点击：更大的动作&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 使用tabindex属性提供tabbing路径&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 提供tabbing顺序的控制&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 使表单可以通过键盘来导航&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 考虑为支持键盘输入提供accesskey属性&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - 直接到达相关的输入项&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 考虑fieldset属性将内容分组&lt;br /&gt;&lt;br /&gt;表单创建工具&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - wufoo&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - www.formassembly.com&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - www.icebrrg.com&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt;更多信息&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - 功能性表单&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;设计&lt;/em&gt;&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - www.lukew.com/ff/&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - site-seeing：A Visual Approach to &lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;Web&lt;/em&gt;&lt;/span&gt; Usability&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; - Wiley &amp;amp; Sons&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; - luke@lukew.com&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/70&quot; target=&quot;_blank&quot;&gt;表单按钮&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.yeeyan.com/articles/view/8217/3893&quot; target=&quot;_blank&quot;&gt;http://www.yeeyan.com/articles/view/8217/3893&lt;/a&gt;&lt;/p&gt;</description>
				<author>吾凡 </author>
				<pubdate>2009-01-05 20:34:59</pubdate>
			</item>			<item>
				<title>记淘宝网09年首页改版类目设计</title>
				<link>http://hd8010213.ourhost.cn/article.asp?id=31</link>
				<description>&lt;p&gt;去死吧2008.~!~&lt;br /&gt;　&amp;nbsp;&amp;nbsp; 在太古时期，有一种凶猛的怪兽，散居在深山密林中，人们管它们叫&amp;ldquo;年&amp;rdquo;。&amp;ldquo;年&amp;rdquo;的形貌狰狞，生性凶残，专食飞禽走兽、鳞介虫豸，一天换一种口味，从磕头虫一直吃到大活人，让人谈&amp;ldquo;年&amp;rdquo;色变。08&quot;年&quot;终于走了.相信很多人艰难的渡过这一年.历史又翻开新的一页经历过历史的人方知难.&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;新的一年,新的淘宝网的首页也经历了一次艰难的改版,一直是受人关注的焦点的首页,每次一个小的改动一定会让你深刻体会一句话即&quot;牵一发而动全局&quot;,而在淘宝网上那个庞大的类目,也是很多人视为淘宝网首页甚至整个阿里巴巴集团最经典也最专业的一个商品垂直频道.经过多年的历史洗礼.很多人会发现这个类目表也日渐的庞大.有幸参与设计了首页的这一块的交互创新.这个庞大的类目表是否还是用户所需的,是否用户的体验好呢?通过UED用研部门的专业分析也得出了一定的结论.&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;简单的用户分析上来说,大部份用户使用这里的类目,一般都是一些只明确所需用品.比如:&quot;最近我想买个数码产品或最近我想买件衣物&quot;.有点类似于一个用户在一个大商场&quot;半目标&quot;购物闲逛时的心情,那用户会想,我是要买去服饰一条街呢还是去数码一条街呢?针对此类用户目标的设计,对该类目进行了一个小的创新尝试.我们也做了很多的方案.PK后方见真图(关门放图)&lt;br /&gt;&lt;img style=&quot;cursor: pointer;&quot; title=&quot;在新窗口打开图片&quot; src=&quot;http://hd8010213.ourhost.cn/attachments/month_0901/0200915124356.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt;第一稿,这一稿被P原因来自于前端及淘宝网类目的不断变化.这种的设计限制了高度而前端还需要大量的计划.最终被拿下.&lt;br /&gt;&lt;img style=&quot;cursor: pointer;&quot; title=&quot;在新窗口打开图片&quot; src=&quot;http://hd8010213.ourhost.cn/attachments/month_0901/620091512542.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt;第二稿,这一稿被P原因来自于类目运营的同事.这种处理方式,直接影响某几个类目的公平性,不过进行了修改后,将可能应用于淘宝我的要买频道.&lt;br /&gt;&lt;img style=&quot;cursor: pointer;&quot; title=&quot;在新窗口打开图片&quot; src=&quot;http://hd8010213.ourhost.cn/attachments/month_0901/w20091513237.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt;其实还经历过好几稿,不是因为太过复杂就是有点白痴.而这一版也遭遇严重讨伐.声音来自用研部门.数据显视用户对中文首字母压根不敏感,极少人用.唉.继续.&lt;br /&gt;最终版来自UED所有人的努力.请看卢山真面目.&lt;br /&gt;&lt;img style=&quot;cursor: pointer;&quot; title=&quot;在新窗口打开图片&quot; src=&quot;http://hd8010213.ourhost.cn/attachments/month_0901/x20091513539.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt;最后一版就留由大家来评吧.~!&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/132&quot; target=&quot;_blank&quot;&gt;淘宝&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://hd8010213.ourhost.cn/article.asp?id=31&quot; target=&quot;_blank&quot;&gt;http://hd8010213.ourhost.cn/article.asp?id=31&lt;/a&gt;&lt;/p&gt;</description>
				<author>李坏</author>
				<pubdate>2009-01-05 18:55:50</pubdate>
			</item>			<item>
				<title>管理者，请你远离产品开发/设计部门</title>
				<link>http://blog.sina.com.cn/s/blog_564cabe30100bxmb.html</link>
				<description>&lt;p&gt;先说一个身边真正发生过的故事，可能大家会对故事情节感觉非常熟悉。&lt;br /&gt;&lt;br /&gt;一家小型电子商务公司，管理者就是公司的创始人，他有些技术开发背景。因为产品面向海外市场，他也比较关注产品设计与可用性。由于他对自己的技术、设计能力的自信，总是对开发部与设计部成员的能力持怀疑态度，经常插手他们的工作。&lt;br /&gt;&lt;br /&gt;一次，开发人员就新产品需求、设计文档的要求，提出开发方案A。这位管理者看后，以其经验判断认为不理想，并给出方案B。开发人员觉得方案B有些问题，但一时又没有找到有说服力的例证，无奈只好以此方案进行开发。&lt;br /&gt;&lt;br /&gt;果然，在开发过程中，由于管理者仓促间所提出方案，在设计上确实存在不合理的疏漏，导致项目出现了一些问题。当开发人员想方设法将问题一一解决后，突然发现，这个DEBUG后的开发方案B，已经变得与他们最初提出的方案A并无二致。&lt;br /&gt;&lt;br /&gt;而此时，该项目已经严重超期，那位管理者还为此非常不满，认为是开发人员能力的问题导致的。此后，管理者对开发工作的介入变得更多，而开发人员也开始变化，一部分对领导的这种超权行为越来越不满意，矛盾变得更加激化，后面工作中的沟通变得更加困难；另一部分则变得越来越没有积极性，领导要求怎么做就怎么做。&lt;br /&gt;&lt;br /&gt;刚好看到UCDChina.com中的一篇文章《&lt;a href=&quot;http://ucdchina.com/blog/?p=4&quot; target=&quot;_blank&quot;&gt;管理者不应直接参与产品的开发与设计&lt;/a&gt;》，感觉说得太有道理了。上面这个故事，可以用来充实文章的论据。&lt;br /&gt;&lt;br /&gt;其实团队管理者关注团队产品的成败，是非常正常的心态。他们插手设计、开发工作，无非是希望把产品更得更好，动机是无庸质疑的。尽管如此，还是不建议管理者过多的介入具体的开发与设计工作，即使是领域专家型的管理者，过多的插手具体设计、开发工作，也得不到预期的结果，可能对于项目来说，往往事与愿违，由此产生的恶性干扰多于良性的指导，这是得不偿失的。&lt;br /&gt;&lt;br /&gt;为什么会这样？原因很多：&lt;br /&gt;&lt;br /&gt;1、因为管理者与团队成员的权重不同，有管理者参与的项目，往往不能非常公平地对待其它项目涉众。尽管，管理者本意是以其对项目的理解和自身的经验，为设计、开发团队提供一些指导和建议，至少也会增加一种思路。但往往事与愿违，管理者介入后，一般会导致所有项目涉众的思维模式，会被管理者所左右，就因为他是团队的管理者。&lt;br /&gt;&lt;br /&gt;大家想想，是否经常遇到这样的情况，设计、开发人员深思熟虑后形成的方案，经常因为管理者的一点儿质疑，而被否决；而管理者的灵光一闪，都可能形成一个决策，如果其它团队成员想到推翻它，必须经过周密、详实的举证与论述，这本就不公平，对项目也绝对没有好处，这会影响到团队成员的思路，甚至导致他们逐渐推动思考的动力。&lt;br /&gt;&lt;br /&gt;2、因为技术背景与对项目的关注点不同，管理者与设计、开发人员会处在不同层面，看问题角度肯定是不同的。其实，能从多个不同角度看待产品，这本来是好事，可以把问题考虑得更全面一些。但如果以管理者的角度，去干扰设计、开发中的问题，那就是另外一码儿事了。&lt;br /&gt;&lt;br /&gt;《论语&amp;bull;泰伯》：&amp;ldquo;子曰：不在其位，不谋其政。&amp;rdquo;&lt;br /&gt;&lt;br /&gt;这句话说得非常好，这不是推卸责任意思，而恰恰是出于更负责的角度考虑。为了便于理解，这里把&amp;ldquo;位&amp;rdquo;理解为&amp;ldquo;职位&amp;rdquo;。&lt;br /&gt;&lt;br /&gt;每个职位有不同的职责，职责会影响人的立场，不同立场、知识背景的人理解、处理同一个问题，其结果肯定是不一样的。也许管理者认为自己可以做到&amp;ldquo;换位思考 &amp;rdquo;，即便如此也是搁靴搔痒的状态，其结果绝对差强人意。比如，管理者明白不能让UI设计师去考虑代码优化的问题，那又为什么自己去犯同样的错误呢？&lt;br /&gt;&lt;br /&gt;正所谓术业有专攻，专业的工作还是让专业的人去做，那才可能达到令人满意的结果。&lt;br /&gt;&lt;br /&gt;3、有人说，在IT行业，许多管理者都是优秀程序员或策划、设计师出身，这种领域专家型的管理者插手做具体设计、开发工作，应该有对项目、对团队成员有帮助。&lt;br /&gt;&lt;br /&gt;其实不然，前面提到的两点问题，对于这样的管理者也依然存在。而且，文章开头提到的那位管理者也曾经是开发人员，本身也是位不错的产品设计师。为什么团队成员在他的指导下，项目进展依然不顺利呢？&lt;br /&gt;&lt;br /&gt;从事过产品设计、程序开发工作的朋友应该很清楚，这样的工作需要投入大量的时间与精力，这是一个反复尝试与迭代的过程。好的设计与优秀的编码，绝对不是通过纸上谈兵或灵光一闪就可以得到的（当然，这个世界是有天才存在的，也许他们拍拍脑袋就可以把产品设计得非常完美，程序编码也可以没有任何BUG，但毕竟这种天才少得没有说服力）。有的时候，即使写好伪代码，也不能百之百的确保业务逻辑没问题。&lt;br /&gt;&lt;br /&gt;而团队的管理者，往往事务缠身，他们没有精力（也不应该）深入于其中任何一项具体工作，那样就会犯下过于关注细节的管理大忌。而浅尝辄止的心态，恰恰又是做好设计与开发工作的大忌。这样看来，管理者兼顾设计、开发工作，并取得好的结果，根本是一项不可能完成的任务。&lt;br /&gt;&lt;br /&gt;当然，领域专家型的管理者是可遇而不可求的，他丰富的经验与思路都是对团队成员有帮助的，但仅此而已，具体的设计、开发工作还是应该让设计师和程序员来做。&lt;br /&gt;&lt;br /&gt;基于上面分析，如果管理者仍执意要插手设计与开发工作，就必须保证自己的观点（或决策）是100%准确与全面的，这样才不会对项目有负面影响。&lt;br /&gt;&lt;br /&gt;当然，这样的要求是不合理的，也没有人敢做此承诺，所以，管理者们还去做好本职工作吧，那里才是发挥你们特长的地方。好的管理者，要懂得放权，要对团队成员应该有足够的信任，相信他们的工作能力，也相信他们的工作态度。正所谓：用人不疑，疑人不用。&lt;br /&gt;&lt;br /&gt;如果管理者实在想参与设计、开发工作，那就干脆转行吧。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/1&quot; target=&quot;_blank&quot;&gt;产品设计团队协作&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://blog.sina.com.cn/s/blog_564cabe30100bxmb.html&quot; target=&quot;_blank&quot;&gt;http://blog.sina.com.cn/s/blog_564cabe30100bxmb.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>行云流水泵</author>
				<pubdate>2009-01-05 18:42:42</pubdate>
			</item>			<item>
				<title>浅谈评论留言的设计</title>
				<link>http://www.prower.cn/interaction/977</link>
				<description>&lt;p&gt;网易新闻的2008年终策划专题&amp;mdash;&amp;mdash;&lt;a href=&quot;http://news.163.com/special/0001sp/2008ending.html&quot; target=&quot;_blank&quot;&gt;无跟帖，不新闻&lt;/a&gt;，一下子把新闻后面的评论提升到了一个新的高度；而专注于IT新闻的cnBeta.com同样也对2008年的&lt;a href=&quot;http://www.cnbeta.com/articles/73700.htm&quot; target=&quot;_blank&quot;&gt;精彩评论&lt;/a&gt;做了一个整理&amp;hellip;&amp;hellip;&lt;/p&gt;
 
&lt;p&gt;网络媒体与传统的纸质媒体最大的不同点之一，即是网络媒体可以实现与读者及读者之间的即时互动，而这种互动方式以评论最为常见及最受关注，甚至这些评论改变了很多人的阅读习惯，于是出现了粗略扫瞄新闻然后细品评论的这样一类&lt;a href=&quot;http://www.douban.com/group/review163/&quot; target=&quot;_blank&quot;&gt;人群&lt;/a&gt;。&lt;/p&gt;
 
&lt;p&gt;网易新闻后的评论已经形成了一种独特的文化，这里已经成了评论娱乐化的集散地，更似乎已经成了很多人上网易看新闻的最重要的理由，所以网易新闻会将评论推上一个新的高度，即使新闻后面的评论与新闻本身的内容并无多大关系，甚至毫无关系可言。但做为一个商业网站来说，人气流量始终是他们最关注的。&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;而显然的，这种可能与文章本身毫无关系的评论是许多网站或是博客所不愿见到的，因为这在很大程度上降低了评论的质量，也会拖累整个网站的质量，所以豆瓣甚至不惜提高评论门槛&amp;mdash;&amp;mdash;将评论框置于最后一个评论后面&amp;mdash;&amp;mdash;以期提高评论质量。（&lt;a href=&quot;http://www.douban.com/group/topic/5012675/&quot; target=&quot;_blank&quot;&gt;请看这里&lt;/a&gt;）&lt;/p&gt;
 
&lt;p&gt;这在一定程度上让豆瓣的评论功能变得很难使用，尤其是在豆瓣每页的评论数有&lt;a href=&quot;http://www.prower.cn/interaction/543&quot; target=&quot;_blank&quot;&gt;100条&lt;/a&gt;的情况下，很多情况下不得不拖动长长的滚动条到底部去寻找评论框，而且可能还要面对评论翻页的情况，所以在豆瓣要写一条评论将变成&amp;ldquo;很困难&amp;rdquo;的事。&lt;/p&gt;
 
&lt;p&gt;豆瓣对评论框做如此设计的理由应该是相信用户只要有足够的评论诉求，就会跨过这些&amp;ldquo;困难&amp;rdquo;寻找评论框，而且这在一定程度上减少了那些诸如&amp;ldquo;顶&amp;rdquo;、&amp;ldquo; 赞&amp;rdquo;之类的低质量甚至是毫无意义的评论。提高评论成本保证评论内容相对的高质量的同时，也产生另外的问题，豆瓣如此的评论设计在一定程度上是在&amp;ldquo;强迫&amp;rdquo;用户查看已经存在的评论内容，而且有多少用户的评论诉求会强烈到跨过这些长长的评论内容，谁能保证低诉求的评论就不能产生高质量的评论内容？&lt;/p&gt;
 
&lt;p&gt;与正文内容相比，评论内容是另一种意义上的&amp;ldquo;正文&amp;rdquo;，可能是对正文内容的一种延伸，也可能是对正文内容的一种探讨，甚至可能是对正文内容中观点的一种纠正，所以与正文相比，评论同样重要。&lt;/p&gt;
 
&lt;p&gt;但是提高评论门槛的设计，很大程度上在阻碍着交流的顺畅性，即使这种设计的本身是出自于对评论内容质量的保证。&lt;/p&gt;
 
&lt;p&gt;如何在保证评论顺畅性的同时保证评论质量，可以参考一下digg的设计。&lt;/p&gt;
 
&lt;p&gt;评论内容是基于正文内容的，所以对于评论内容质量的筛选也可以交由正文作者去决定，质量高的靠前排，这本身也是对即将做评论的用户做一个好的引导，而意义不大或者毫无意义的评论则按正常的时间先后来排序。&lt;/p&gt;
 
&lt;p&gt;很多网站的评论都做了如此设计，网易评论也是其中之一，但这些网站把评论质量的高低权限交给了本身就为娱乐而来的用户们，所以评论内容严重偏离了正文本身，也间接的导致了评论质量的下降。&lt;/p&gt;
 
&lt;p&gt;给用户提供简单易用的评论功能，同时把评论质量的掌控权交给作者，在保证用户交流的顺畅性的同时也提高评论质量。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/78&quot; target=&quot;_blank&quot;&gt;留言和评论&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.prower.cn/interaction/977&quot; target=&quot;_blank&quot;&gt;http://www.prower.cn/interaction/977&lt;/a&gt;&lt;/p&gt;</description>
				<author>Prower</author>
				<pubdate>2009-01-04 20:30:29</pubdate>
			</item>			<item>
				<title>奇怪的关闭按钮</title>
				<link>http://ued.taobao.com/blog/2009/01/04/%E9%99%8C%E7%94%9F%E7%BD%91%E9%A1%B5%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89%E2%80%94%E2%80%94%E5%A5%87%E6%80%AA%E7%9A%84%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE/</link>
				<description>&lt;div class=&quot;cnt&quot;&gt;
&lt;div&gt;我们在浏览网页的时候偶尔会遇到一些陌生的网页交互行为，通常情况下它们并不会影响你的正常使用，之所以出现情况往往是因为，设计师在设计某个交互方式的时候，遇到了常用的交互模式无法解决的问题，因此会采用一种创新的交互模式来解决问题。通常情况下这些创新的交互方式将会是我们学习的绝佳案例。对设计师拓宽思路很有好处，今天我们介绍的是一个来自google的sns社区orkut 的对关闭按钮的创新应用。&lt;br /&gt;&lt;img src=&quot;http://lh4.ggpht.com/_5odpl-RtZps/SVnYQALCopI/AAAAAAAAAYE/jVv39NgiaqE/2008-12-30_155447.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;p&gt;&lt;strong&gt;应用场景：&lt;/strong&gt;orkut组件是默认展示在profile页面的，可以通过执行两种操作隐藏和移除来关闭该组件在profile里的显示状态，区别是隐藏后该组件还可以在组建库中找回，移除后组件无法找回只能重新添加。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;通常我们会采取的方案：&lt;br /&gt;&lt;/strong&gt;&lt;img src=&quot;http://lh4.ggpht.com/_5odpl-RtZps/SWCIETS-biI/AAAAAAAAAb0/sFP5oONsqf4/c257c7529a9056100df3e315.jpg&quot; alt=&quot;&quot; width=&quot;191&quot; height=&quot;44&quot; /&gt;&amp;nbsp;如图，通常遇到这种情况我们会设计两个按钮一个隐藏一个移除。&lt;strong&gt;好处：&lt;/strong&gt;两个任务直接展现，操作也很直接。只需一次点击即可。&lt;strong&gt;弊端：&lt;/strong&gt;用户不理解隐藏和移除代表什么意思，无法预知操作结果，两个动作的操作结果在此页面的表现是一样的，而且操作在当前页面不可逆。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;挑战：&lt;/strong&gt;&lt;strong&gt;&lt;span&gt;怎样以一种清晰的方式告诉用户隐藏和移除的区别&lt;/span&gt;&lt;/strong&gt;，两个动作行为结果是一样的，即此组件从当前页面消失，区别是隐藏的组件还可以在组件列表被找到而移除的组件则不能。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;解决思路：&lt;/strong&gt;对动作进行相对详细的文字解释是表现这种区别的最直接的方法，但页面空间非常有限，因此不可能在页面中直接添加动作解释。这时候选择弹出窗成了一个很自然的选择（就是在点关闭按钮后弹出窗口，在弹出窗中我们可以对隐藏和移除两个行为做出更清晰的解释，用户就可一作出更明确的选择）。最终，设计师选择的是，类似于下拉菜单的，小面积的浮出层。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;最终方案：&lt;/strong&gt;把两种操作整合为一个关闭按钮（关闭按钮恰好可以概括两个操作在当前页面的相同结果，是这两个操作的交集，因此语义上非常恰当），在点关闭后用户会看到两个有详细注释的按钮，&amp;ldquo;hide from my profile（在当前页面隐藏）&amp;rdquo;和&amp;ldquo;remove this application（移除此组件）&amp;rdquo;这时候用户就可以作出相对准确的选择了。&lt;/p&gt;
 
&lt;div&gt;&lt;img class=&quot;blogimg&quot; src=&quot;http://lh5.ggpht.com/_5odpl-RtZps/SViCTsTmn9I/AAAAAAAAAXM/DVfFHK1NPq4/orkutX.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; width=&quot;454&quot; height=&quot;130&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;设计师之所以没有选择弹出窗的形式，是因为这样做会增加用户的认知负担，并且从可逆性角度考虑即使用户勿删了组件仍然可以用添加组件的方式找回，所以线上的这种方式是最佳的选择。&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/70&quot; target=&quot;_blank&quot;&gt;表单按钮&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://ued.taobao.com/blog/2009/01/04/%E9%99%8C%E7%94%9F%E7%BD%91%E9%A1%B5%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89%E2%80%94%E2%80%94%E5%A5%87%E6%80%AA%E7%9A%84%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE/&quot; target=&quot;_blank&quot;&gt;http://ued.taobao.com/blog/2009/01/04/%E9%99%8C%E7%94%9F%E7%BD%91%E9%A1%B5%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89%E2%80%94%E2%80%94%E5%A5%87%E6%80%AA%E7%9A%84%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE/&lt;/a&gt;&lt;/p&gt;</description>
				<author>无酬</author>
				<pubdate>2009-01-04 20:17:12</pubdate>
			</item>			<item>
				<title>SNS的行为基础和未来趋势——大众SNS的游戏化和活动化</title>
				<link>http://www.far2go.cn/blog/post/sns-trends-and-basis.html</link>
				<description>&lt;p&gt;&lt;strong&gt;我用2个问题作为开场：人们使用SNS的目的是什么？用什么来衡量SNS的成功？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;网上分析SNS
的文章很多，一搜一大堆：研究facebook为什么成功，国内SNS为什么不成功，先从N个维度来剖析，然后是商业模式，用户亲和度，界面友好程度，用
户粘性&amp;hellip;&amp;hellip;随便几万字上下，有关专家也耐不住寂寞来点评开心网和白领网瘾趋势，说实话，不看也罢，没一个靠谱的。&lt;/p&gt;
&lt;p&gt;有些很扯，有些也许没错，但我要说的是很多人看问题的方向因此被误导，因为这些都太着眼于局部和片段，一头钻在各种表象上，却没有看到背后的东西。&lt;/p&gt;
&lt;p&gt;最核心的东西，往往十分简单、一针见血。&lt;br /&gt;SNS之所以叫做Social Networking Services，Social是其根源，一切都基于人与人之间的社交行为。&lt;/p&gt;
&lt;p&gt;人们上SNS，有2个基本目的是不会改变的：&lt;br /&gt;1.&amp;nbsp;&amp;nbsp;&amp;nbsp; 认识更多的人 （前提是自己感兴趣的人）&lt;br /&gt;2.&amp;nbsp;&amp;nbsp;&amp;nbsp; 和已经认识的人熟知起来&lt;/p&gt;
&lt;p&gt;所以衡量一个SNS是否成功的基本，就看：&lt;br /&gt;1.&amp;nbsp;&amp;nbsp;&amp;nbsp; 能否帮助用户方便容易的认识更多的人&lt;br /&gt;2.&amp;nbsp;&amp;nbsp;&amp;nbsp; 能否帮助已经认识的人建立更加亲密的关系。&lt;/p&gt;
&lt;p&gt;第一点是基础，SNS如果不能帮助用户方便的去认识更多的人，这是完败，死不足惜。但更多的SNS是在第二点上做得不够好&amp;mdash;&amp;mdash;这是我要说的重点，也正是这个，是未来的趋势所在。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;关于Social行为&amp;mdash;&amp;mdash;人建立亲密关系的轨迹&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;说到Social就不能不提社会心理学。即便今天通讯技术和互联网已经极大的影响了人的社交行为（例如网络变成了人们很重要的社交入口之一），但人之间相互联系和影响的原理没有任何改变。&lt;/p&gt;
&lt;p&gt;人与人之间的关系发展，是沿着这么一条轨迹：遇见&amp;mdash;&amp;mdash;吸引&amp;mdash;&amp;mdash;认识&amp;mdash;&amp;mdash;多次接触和了解&amp;mdash;&amp;mdash;亲密 （有兴趣可以看多年前写的另一篇文章&amp;ldquo;&lt;a href=&quot;http://www.far2go.cn/blog/post/how-we-like-somone.html&quot; target=&quot;_blank&quot;&gt;喜欢是怎样产生的&lt;/a&gt;&amp;rdquo;）&lt;/p&gt;
&lt;p&gt;首先，遇见一个人&amp;mdash;&amp;mdash;被吸引&amp;mdash;&amp;mdash;直到认识，这是一切关系发展的基础。接触是起点，他能不能吸引你，决定了你想不想认识他。什么是产生吸引的关键点呢？相貌、兴趣爱好、知识思想、社会地位等。&lt;/p&gt;
&lt;p&gt;然后，人们需要多次的接触和了解去增进友谊，培养亲密关系。人之间的感情需要时间来培养，经常看到自然就会熟悉。另外，人们需要时间去相互了解和交流，由自己是不是得到回报而决定深交（精神的回报如感情、关爱、兴趣和知识&amp;hellip;&amp;hellip;物质的回报如金钱和地位&amp;hellip;&amp;hellip;）&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;第一点：让我们相识！&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;互联网之前，我们只能接触到自己日常行动范围内的人，十分有限。一方面是根本见不到，另一方面，就算遇见一个人，被他吸引，但也很难主动去交谈认识。&lt;/p&gt;
&lt;p&gt;认识陌生人是现实社会中一个很难冲破的障碍。（不然天涯上也就不会有那么多类似&amp;ldquo;如何认识一个公交/地铁/某地方的MM&amp;rdquo;的征集贴了，往往几百楼建议盖着，十天半个月过去了还没具体行动）&lt;/p&gt;
&lt;p&gt;请看看自己父辈，他们的婚姻，他们的好友，几乎都是同学、校友、单位同事、业务伙伴、老乡等之间产生的，因为他们一生只接触和认识到这些人。&lt;/p&gt;
&lt;p&gt;今天，互联网把人们从物理空间中解放，人的行动范围变为现实和网络两方面，可能接触到的人被几何等级的放大。只要花点时间，你可以搜索到一位比你小/大十岁的外省异性，或者另一个国家的一位社会工作者。&lt;/p&gt;
&lt;p&gt;然后，你会去查看他/她的照片（外表）、个性签名和资料（行为个性）、发表的文章和看法(知识)等去决定是否认识他。就像之前说的，即便在网络上，人们的社交行为本质是不变的。唯一和现实社会中不同的是，认识的门槛大大降低了，轻松点击一下&amp;ldquo;加为好友&amp;rdquo;便可。&lt;/p&gt;
&lt;p&gt;所以在帮助用户认识更多人这一点上，搭乘互联网的大趋势，很多网络服务都做得不错（虽然还是有不清白的，也有做得不错却没想通为什么的）。&lt;/p&gt;
&lt;p&gt;其实对于SNS来说，让用户相识只有2个关键点，解决方案则可以有很多：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;帮助用户发现更多其他人，提供更多入口和线索 &lt;br /&gt; &lt;span style=&quot;color: #808080;&quot;&gt;（用户搜索，好友的好友，圈子和小组，兴趣组织，同城，随机&amp;hellip;）&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;鼓励产生吸引的信息&lt;br /&gt; &lt;span style=&quot;color: #808080;&quot;&gt;（真实照片，个性签名，兴趣爱好，日记，看法和评论，行为记录&amp;hellip;）&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;现在大家应该明白为什么说很多人分析SNS成功与否是不靠谱的了，因为他们一头扎到一个个具体的解决方案中，却没想到什么引起了这些，着眼点太低导致无法看到宏观的根源。&lt;/p&gt;
&lt;p&gt;我相信史玉柱在这方面是个明白人，非常犀利，比很多&amp;ldquo;资深用户体验人士&amp;rdquo;都强，单从他搞巨人的美女认证就可以看出来。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;第二点：让我们熟知吧！&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;这是一个深深的分界线。优秀和平庸的关键就在这里。&lt;/p&gt;
&lt;p&gt;在现在，很多SNS中，用户之间的关系止步于认识而已。&lt;br /&gt;在未来，无法提供引导用户深入发展关系的途径则代表着失败。&lt;/p&gt;
&lt;p&gt;不论是在现实世界还是网络，关键点只有一个：提供鼓励人与人进行交流和互动的机会。&lt;/p&gt;
&lt;p&gt;人与人之间需要通过多次的互动和交流，加上一定时间积累才可能建立更深入的关系。&lt;/p&gt;
&lt;p&gt;在
现实中，人们会通过见面，聊天，吃饭，聚会，一起参加活动等社交活动来增进友情，包括一个团队的共同协作和努力。这就是为什么往往网上的&amp;ldquo;教学贴&amp;rdquo;说到要
泡一个mm，认识后要多接触，多约出来玩，甚至要狐朋狗友一起帮忙&amp;ldquo;创造机会&amp;rdquo;。结识一个大人物也是如此，多接触，多交流，甚至合作，&amp;ldquo;创造机会&amp;rdquo;。&lt;/p&gt;
&lt;p&gt;&amp;ldquo;创造机会&amp;rdquo;四个字就是关键点的朴实表述。不是什么复杂理论，N个维度，不是潮流新趋势，模式创新，不是什么玄虚的用户体验。这是自人类社会存在以来就一直延续的社交行为特征。&lt;/p&gt;
&lt;p&gt;在网络上，我们要为用户之间创造机会，引导他们去进行交流和互动，推动他们建立更亲密的关系。&lt;/p&gt;
&lt;p&gt;不用去想破脑袋，因为成功的User Case已如漫天繁星一般:&lt;/p&gt;
&lt;p&gt;当某人很久后还怀念那几个熟悉的ID和帮自己杀出重围的兄弟们的时候；当年远隔千里的网友互称&amp;ldquo;老公老婆&amp;rdquo;，一看到对方不在线就心烦意乱的时候，这个关系算不算亲密？&lt;/p&gt;
&lt;p&gt;当几个人每天都在细心呵护着那个常去的地方，频繁交流看法，研究探讨，互喷或赞许的时候，这个关系算不算亲密？&lt;/p&gt;
&lt;p&gt;当大家坐在一起喝茶热烈讨论起网上的活动，喜爱的书籍和音乐的时候，当线上关系延续到线下的时候，这个关系算不算亲密？&lt;/p&gt;
&lt;p&gt;&amp;ldquo;创造机会&amp;rdquo;的有效方法是：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;让人们共同参与一个事物，进行互动和协作&lt;br /&gt; &lt;span style=&quot;color: #808080;&quot;&gt;（组队，配对，娱乐，游戏，获取成功&amp;hellip;&amp;hellip;）&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;让人们寻找到相似处，鼓励思想的交融和讨论，产生社交回报&lt;br /&gt; &lt;span style=&quot;color: #808080;&quot;&gt;（兴趣、爱好、思想的表现和交流碰撞&amp;hellip;&amp;hellip;）&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;这时让我们重复一下副标题：大众社交网络的游戏化和活动化，是SNS的重要发展方向。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;大众SNS游戏化和活动化&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;对于大众化的社交网络，如Facebook，My space，校内，开心，用户的基本目的十分强烈：&amp;ldquo;认识人&amp;rdquo;和&amp;ldquo;更亲密&amp;rdquo;，顺便消磨时间和解闷，同时现代人的耐心都不是很足够。&lt;/p&gt;
&lt;p&gt;在SNS中给对方发邮件、评论和涂鸦这些方式非常低效，有很大的障碍，特别在你根本不清楚对方喜好、兴趣、背景的情况下，很难对建立关系有立竿见影的作用。有些人要么放弃，要么要一个QQ转移到IM平台继续发展。&lt;/p&gt;
&lt;p&gt;为了让人们共同参与一个事物，进行互动和协作，游戏成为一个很好的切入点。&lt;/p&gt;
&lt;p&gt;游戏本身是一种娱乐，不管个人的兴趣个性千差万别，都能够很自然的参与进来。游戏中人们紧密协作杀出重围并取得宝物（协作和成功），者相互玩耍融入情景（交流和接触），这些对于关系的建立非常高效。&lt;/p&gt;
&lt;p&gt;拿开心网来说，他的游戏都多少体现了这个核心。朋友买卖中多次的买入，安抚他/她和折磨他/她；咬人本身就带有些暧昧的意思，且必须去别人家休息；直到最近的买房子插件，把游戏环境视觉化，让用户设计自己美丽的小屋，再引导他们去抢人，去进行&amp;ldquo;异性合租&amp;rdquo;。&lt;/p&gt;
&lt;p&gt;今年的网游也有&amp;ldquo;可圈可点&amp;rdquo;之处。巨人中男女互抱这些小游戏，到最近爆出的&amp;ldquo;游戏中召唤女玩家进行桑拿按摩&amp;rdquo;，抛开道德范畴，不得不说史玉柱把用户心理研究得非常透彻。&lt;/p&gt;
&lt;p&gt;SNS
可以向游戏化发展，网游其实也有向SNS渗透的潜力。网游和SNS较大的区别之一就是用户档案是虚拟的ID，不像SNS是较真实的个人档案和信息。但如果
可以绑定呢？史玉柱购买51.com就说明了这种可能性，如果他把今后的网游和51.com的用户进行一个绑定，不是不可能，这样就有可能让社区&amp;mdash;&amp;mdash;游戏
&amp;mdash;&amp;mdash;社区&amp;mdash;&amp;mdash;线下关系 成为一个流畅的环。&lt;/p&gt;
&lt;p&gt;第二个切入点是活动。&lt;/p&gt;
&lt;p&gt;虽然如今很多社交行为都转移到了网上，但人的关系始终存在一个从网络延伸回现实的趋势（即便史密斯这么明理的一个家伙也总想跑到现实世界中去找尼奥）。在真实世界的交流和互动是一个强力的推进。&lt;/p&gt;
&lt;p&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;/p&gt;
&lt;p&gt;任何东西脱离不了其根源。之所以说游戏化和活动化是大众SNS的趋势，因为我认为在可预见的未来，对帮助用户建立更亲密关系来说这是两个十分高效的手段。&lt;/p&gt;
&lt;p&gt;近
年还有很多细分SNS的兴起，他们往往专注于某一个特定范围的人群，有一定门槛。例如养宠物爱好者的SNS，病人共享治疗信息的SNS，专业职业人士交流
的SNS等。对于这些SNS来说，游戏不是一个好的方法。因为对于这些用户来说，寻求相似性、思想和知识的交流是最主要的。但对于一些细分SNS，活动也
许还是有效的手段。&lt;/p&gt;
&lt;p&gt;最后，用这篇文章作为自己这一年的结束，希望它可以照亮一些东西，感谢2008。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://www.far2go.cn/blog/post/sns-trends-and-basis.html&quot; target=&quot;_blank&quot;&gt;http://www.far2go.cn/blog/post/sns-trends-and-basis.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>JJYY</author>
				<pubdate>2009-01-02 00:44:56</pubdate>
			</item>			<item>
				<title>用户研究第二季——操作录像</title>
				<link>http://www.kdued.com/2008/12/ur/</link>
				<description>&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; text-indent: 21pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;a href=&quot;http://www.kdued.com/2008/11/ur1/&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;上一季&lt;/span&gt;&lt;/strong&gt;&lt;/a&gt;谈到了使用调查问卷来收集支持用户模型数据的方法，但这只是第一步。如果能综合其他方法，那么收集到的数据将会更有说服力。&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; text-indent: 21pt;&quot;&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 微软雅黑;&quot;&gt;用户操作录像就是另一个数据收集方法。当然如果具备用户研究实验室的条件进行同步录像甚至用眼动议是最好的，如果条件不允许，我们可以用例如&lt;span&gt;&lt;a href=&quot;http://baike.baidu.com/view/1481587.htm&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;Camtasia Studio&lt;/span&gt;&lt;/strong&gt;&lt;/a&gt;&lt;/span&gt;这样的录屏工具来做。这类的录像工具很简单，他会完整的录制下你的全部操作过程，包括了鼠标点击和键盘录入。然后我们再根据录像中的操作停滞，误点击，误操作等来分析用户在使用过程中遇到了什么问题。这种方法最大的优点就是能直观展现用户的真实操作，用户如何使用与你的设计初衷有什么区别一目了然。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; text-indent: 21pt;&quot;&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt; text-indent: 21pt;&quot;&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-499&quot; src=&quot;http://www.kdued.com/wp-content/uploads/e6938de4bd9ce5bd95e5838f.jpg&quot; alt=&quot;操作录像&quot; width=&quot;600&quot; height=&quot;381&quot; /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;font-size: 10.5pt; font-family: 微软雅黑;&quot;&gt;当然操作录像的方法如果能结合问卷调查来使用，会对后期的分析工作有很大的帮助。以下简单谈几点这两种数据收集方法的注意事项：&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;1.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;2.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;3.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;4.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;5.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;6.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;结合问卷中的信息来分析操作录像。如果问卷中用户就表示出了自己&lt;span&gt;IT&lt;/span&gt;技能水平不高，那么在录像中的一些操作就未必代表你的设计有缺陷。&lt;/span&gt;&lt;/p&gt;
 
&lt;p class=&quot;MsoNormal&quot; style=&quot;margin: 0cm 0cm 0pt 56.25pt; text-indent: -35.25pt;&quot;&gt;&lt;span style=&quot;font-family: 微软雅黑;&quot;&gt;&lt;span&gt;7.&lt;span style=&quot;font: 7pt &quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&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;font-family: 微软雅黑;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;或许这是&lt;span&gt;2008&lt;/span&gt;年&lt;span&gt;KDUED&lt;/span&gt;的最后一篇文章。谨以此文纪念今年&lt;span&gt;KDUED团队&lt;/span&gt;的进步，并感谢所有&lt;span&gt;KDUED&lt;/span&gt;成员以及关心&lt;span&gt;KDUED&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;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;祝大家&lt;span&gt;2009&lt;/span&gt;年身体健康，万事顺意！&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/122&quot; target=&quot;_blank&quot;&gt;ucd的工具和软件&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.kdued.com/2008/12/ur/&quot; target=&quot;_blank&quot;&gt;http://www.kdued.com/2008/12/ur/&lt;/a&gt;&lt;/p&gt;</description>
				<author>Villiamin</author>
				<pubdate>2009-01-01 20:00:58</pubdate>
			</item>			<item>
				<title>QQmail 很好，很贴心</title>
				<link>http://2simple.cn/2008/12/blog-post_31.htm</link>
				<description>&lt;p&gt;&lt;img src=&quot;http://2simple.cn/img08q4/tellthem.jpg&quot; alt=&quot;&quot; width=&quot;421&quot; height=&quot;113&quot; /&gt;&lt;br /&gt;&lt;br /&gt;QQMail发信成功之后，有个&amp;ldquo;告诉他们有信了&amp;rdquo;按钮，点击会启动web chat，而且可以多个收件人同时提示，爽！&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/142&quot; target=&quot;_blank&quot;&gt;QQmail&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://2simple.cn/2008/12/blog-post_31.htm&quot; target=&quot;_blank&quot;&gt;http://2simple.cn/2008/12/blog-post_31.htm&lt;/a&gt;&lt;/p&gt;</description>
				<author>Datou</author>
				<pubdate>2009-01-01 19:52:17</pubdate>
			</item>			<item>
				<title>4大主流视频分享网站用户体验分析</title>
				<link>http://blog.sina.com.cn/s/blog_4925ad980100bhq3.html</link>
				<description>&lt;p&gt;随着中国网民数突破2亿成为世界互联网用户最多的国家，视频分享网站更是进入一个激烈竞争的阶段，笔者平时就非常关注视频网站发展，目前国内视频网站还处于烧钱的状态，但往往用户的选择才是决定最后的成败，流量不是一切，大家拼的是自己的产品是否能满足用户的需求。&lt;/p&gt;
&lt;p&gt;今天就想来聊聊对几大主流视频分享网站的用户感受，主要针对用户接触最多的网站首页，搜索列表页及播放页这3部分来分析&lt;/p&gt;
&lt;p&gt;我挑选了下面这几个网站：&lt;a href=&quot;http://www.youku.com/&quot; target=&quot;_blank&quot;&gt;优酷网&lt;/a&gt;&amp;nbsp; &lt;a href=&quot;http://www.ku6.com/&quot; target=&quot;_blank&quot;&gt;酷6网&lt;/a&gt;&amp;nbsp; &lt;a href=&quot;http://www.tudou.com/&quot; target=&quot;_blank&quot;&gt;土豆网&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://kankan.xunlei.com/&quot; target=&quot;_blank&quot;&gt;迅雷看看&lt;/a&gt;&amp;nbsp;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;优酷网首页&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static14.photo.sina.com.cn/orignal/4925ad98g5f52a287d90d&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static14.photo.sina.com.cn/bmiddle/4925ad98g5f52a287d90d&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;据报道优酷现在已经是流量第一的视频网站，这其中肯定有大量广告带来的流量，但我觉得另外很重要的原因是优酷现在逐步转向视频门户网站发展，首页推荐的视频几乎都是时下流行的新闻，这些本来就是搜索引擎每天的主要流量，所以应该从搜索引擎带来不少流量。&lt;/p&gt;
&lt;p&gt;所以我们既要以一个视频门户用户的角度来体验优酷，优酷首页整体比较淡雅，栏目分类、搜索区域、广告区域等结构布局比较清晰，但个人觉得第一屏图片过多，会有点突不出重点，有时反而会忽略掉右侧的很淡的登录区域，建议中间6个小视频可以改成图文混和的方式会使页面较为平衡些。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;br /&gt;优酷网搜索列表页&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static3.photo.sina.com.cn/orignal/4925ad98g5f52e3934512&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static3.photo.sina.com.cn/bmiddle/4925ad98g5f52e3934512&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;这个页面一上来就有个问题，首页的搜索框是在右侧的，但现在又到左侧的，顶部的统一性非常重要。在整个整体设计上还是非常清晰的，有视频类型、视频属性分类、排列方式等。但我第一眼会搞不懂第1行为什么空了2个，仔细才发现第1行是该视频的专辑，这个视频只有3个专辑所以才会空了2个位置，但用户可能一开始会看不懂。&lt;br /&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;优酷网播放页&lt;br /&gt;&lt;/strong&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static8.photo.sina.com.cn/orignal/4925ad98g6feeb3ca4207&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;img src=&quot;http://static8.photo.sina.com.cn/bmiddle/4925ad98g6feeb3ca4207&quot; alt=&quot;&quot; /&gt;&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;这页搜索框又回到右侧了，优酷的播放区域是靠左侧，宽度大概占了半个屏幕，播放区域下侧是一些常用的用户行为按钮，比如收藏、引用等；右侧是视频信息及相关视频，整个第一屏涵盖了主要的信息，用户可以一目了然无需拖动滚动框。但整个页面的广告部分有点乱，虽然设计师把广告放在右侧尽量不影响用户的浏览，但由于google AD这种是随机产生内容，有时会出现八杆子打不到一起的广告内容，因此页面会显得比较凌乱，我个人也不太赞成一个页面放太多不同类型的广告。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;酷6网首页&lt;br /&gt;&lt;/strong&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static11.photo.sina.com.cn/orignal/4925ad98g5f5373b31ffa&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;img src=&quot;http://static11.photo.sina.com.cn/bmiddle/4925ad98g5f5373b31ffa&quot; alt=&quot;&quot; /&gt;&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;酷6首页整个给人很清新的感觉，在色彩上处理的比较好,第一屏内容相比优酷就比较平衡，图文混搭的很合理，其他的布局和优酷类似，基本格局还是比较清晰，但酷6在颜色上处理比较好，所以整体感会比优酷稍好；但我发现页面顶部的导航栏非常拥挤，上面分了6个大分类，下面有分类10几个小类，甚至酷6还做起代理网页游戏的业务，看来盈利的压力确实很大啊，更令我受不了的是最右侧竟然还挤进一个可口可乐广告，以至于登录框不得不和导航栏靠得很近，我差点没找到哪里登录。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;酷6网搜索列表页&lt;br /&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static11.photo.sina.com.cn/orignal/4925ad98g5f5391cdd95a&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static11.photo.sina.com.cn/bmiddle/4925ad98g5f5391cdd95a&quot; alt=&quot;&quot; /&gt; &lt;/a&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #000000;&quot;&gt;在搜索列表页的顶部倒是大幅的简化，就留了4个大类和一个搜索栏；酷6的搜索列表页整体布局和优酷差不多，有一点改进的是把专辑视频和下面普通视频中间加了一条分割线，这样虽然没有很明显但也至少做了一个区隔；这个页面最大的问题是颜色非常混乱，光蓝色就有4种，还同时充斥了灰色和黑色，我觉得这应该尽快改进啦&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;酷6网播放页&lt;br /&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static6.photo.sina.com.cn/orignal/4925ad98g5f53b66cb185&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static6.photo.sina.com.cn/bmiddle/4925ad98g5f53b66cb185&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #000000;&quot;&gt;酷6也是采用靠左侧播放的设计，和优酷不同的是视频信息放到了播放区域下面，右侧则是相关视频及推荐视频，我觉得这样也是不错的设计,页面广告的位置也较为合理，主要分布在视频的缓存中、右侧1个和底部这3处，不影响整个页面的布局；另外酷6最近加了一个特别的换皮肤功能，就是在页面的右上角上可以选择4种不同的皮肤颜色，我觉得这个个性化设计非常讨巧，只不过要注意部分广告和不同皮肤颜色的搭配问题。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;土豆网首页&lt;br /&gt;&lt;/strong&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static4.photo.sina.com.cn/orignal/4925ad98g5f53df4251a3&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;img src=&quot;http://static4.photo.sina.com.cn/bmiddle/4925ad98g5f53df4251a3&quot; alt=&quot;&quot; /&gt;&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;&lt;font color=&quot;#000000&quot;&gt;土豆的首页设计和之前的2个网站就有很大不同，非常简洁，舍弃很多不重要的内容，色彩也非常舒服，用户无需太多思考就可以快速获取页面信息，导航栏也非常清晰。个人觉得改进的地方是中间的翻页推荐，土豆用大块区域来做时间推荐，但选用的图片完全没有设计感，在视觉上是个美中不足，如果能像淘宝翻页推荐那样都是精心设计的图片那会给用户更好的体验。&lt;/font&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;土豆网搜索列表页&lt;br /&gt;&lt;/strong&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static4.photo.sina.com.cn/orignal/4925ad98g5f5404c1ed63&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;&lt;img src=&quot;http://static4.photo.sina.com.cn/bmiddle/4925ad98g5f5404c1ed63&quot; alt=&quot;&quot; /&gt;&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;土豆的搜索列表页的设计还是相当不错的，针对连续剧之类的视频，还增加的剧集列表的分类，黑豆的视频和普通视频分割的也很明显，另外把豆单和普通视频用标签的形式分割也是不错的选择，其他设计也都不错。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;土豆网播放页&lt;br /&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static8.photo.sina.com.cn/orignal/4925ad98g5f541a1368d7&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static8.photo.sina.com.cn/bmiddle/4925ad98g5f541a1368d7&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;土豆播放页的布局是比较大胆的，采用居中播放+大背景广告，而且整个页面采用黑色背景；我想设计师是想给用户一个在电影院看电影的感觉，我个人是满喜欢这种设计的，虽然变成了黑色，但顶部导航栏布局没有发生任何变化，对用户的影响其实并不大。而且土豆近期在播放功能上下了功夫,除了像飞速土豆这样的软件外，在线还可以调视频亮度，这是非常实用的功能。不过由于这种居中的设计，相关视频和推荐视频的区域就被迫放到第2屏，用户浏览起来会造成一定的不便，如果能把相关视频放在视频左侧做成弹出式的设计也许会更好。&lt;/font&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;迅雷看看首页&lt;/strong&gt;&lt;br /&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static4.photo.sina.com.cn/orignal/4925ad98g6feed453fd73&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static4.photo.sina.com.cn/bmiddle/4925ad98g6feed453fd73&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;迅雷看看严格说不能算是独立的视频网站，但目前的人气也是极速狂飙，依靠迅雷丰富的资源逐渐对其他视频网站产生了很大压力。最近迅雷看看刚刚改版，这就是最新改版的页面，由于迅雷看看定位非常清楚，放弃原创视频和一些短片，专注于电视、电影、动漫、综艺，页面第1屏都是时下最流行的电影电视等，每个电影下面还有用户的推荐指数，我个人觉得迅雷看看的首页设计是直接了当直接抓住用户所需，另外右侧的观看记录是个非常贴心的设计，提醒用户之前曾看过哪些电视电影，是否还要继续看下集，我每次都会用这个功能。&lt;/font&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/span&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;strong&gt;迅雷看看搜索列表页&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #009933;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;由于是直接连接gougou.com的搜索列表页，所以不予置评。&lt;/font&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #009933;&quot;&gt;迅雷看看播放页&lt;br /&gt;&lt;a href=&quot;http://blog.photo.sina.com.cn/showpic.html#url=http://static6.photo.sina.com.cn/orignal/4925ad98g5f547c648df5&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://static6.photo.sina.com.cn/bmiddle/4925ad98g5f547c648df5&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #000000;&quot;&gt;迅雷看看和土豆一样也是采用居中播放，而且还变宽了,但2侧目前还是空着的，不知道以后会不会放广告。迅雷看看最大的特点是能发电影自动裁剪能若干个小段落，这样在缓存时速度更快，如果是连续剧的话会整理好每一集形成列表，用户无需再重新搜索下一集，这是其他视频网站无法做到的，虽然迅雷看看也是用户上传视频，但迅雷看看会做整理，其实有点B2C的感觉。迅雷看看在用户体验上还特别考虑到用户之间的联系，把看过该片的用户还看过其他哪些电影推荐给用户其实是非常人性化的，喜欢该片的用户他们的喜好可能是一样的，所以这个功能是非常使用，而且有很多网站也开始采用这样的功能，比如当当网就有类似的功能。&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;我给几个网站评了下星级&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 视频数&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 流畅度&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 清晰度&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 功能&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 操作&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 视觉美观&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/p&gt;
&lt;p&gt;优酷&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;★★★&lt;/p&gt;
&lt;p&gt;酷6&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★&lt;/p&gt;
&lt;p&gt;土豆&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★&lt;/p&gt;
&lt;p&gt;迅雷看看&amp;nbsp;&amp;nbsp; ★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ★★★★★&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp; ★★★★&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;★★★★&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://blog.sina.com.cn/s/blog_4925ad980100bhq3.html&quot; target=&quot;_blank&quot;&gt;http://blog.sina.com.cn/s/blog_4925ad980100bhq3.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>橘左近</author>
				<pubdate>2008-12-31 19:23:29</pubdate>
			</item>			<item>
				<title>开发人员经常犯的8个设计错误 </title>
				<link>http://ued.taobao.com/blog/2008/02/01/8-web-design-mistakes-that-developers-make/</link>
				<description>&lt;p&gt;设计师在抱怨开发人员不尊重Web标准，后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期&amp;hellip;&amp;hellip;如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率？相信很多网站或软件开发公司都越到类似的问题。&lt;/p&gt;
&lt;p&gt;从UED的角度而言，我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过，用户体验不只是UED的事情，而是整个开发团队乃至整个公司需要参与的事情。&lt;/p&gt;
&lt;p&gt;我们不能只是抱怨，我们去理解开发人员。同样，我们做出努力，让开发人员去理解我们。&lt;/p&gt;
&lt;p&gt;我们努力去先做出改变。（小马按语）&lt;/p&gt;
&lt;p&gt;原文地址： &lt;a href=&quot;http://www.wakeuplater.com/website-building/8-web-design-mistakes-that-developers-make.aspx&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;8 Web Design Mistakes That Developers Make &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;一个优秀的网站是优秀的设计和优秀的代码的结合，你经常发现设计师不得不去理解代码，而开发人员尝试自己去设计。&lt;/span&gt; &lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;开发人员花费大学生涯和与其他开发人员一起学习，我可以肯定的说程序员并不是设计师。谢天谢地，我们以前可以评判代码是否重用或者符合正确的&lt;/span&gt;&lt;span&gt;OO&lt;/span&gt;&lt;span style=&quot;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;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;现在据我所知，程序员可能从不需要任何设计的知识（或者说，设计师从不需要了解程序）。但事实是，每一个拥有个人项目、少量客户或是管理角色的程序员都需要设计。甚至，我可以说，显而易见，一个自由工作者最大优势就在于，培养潜在的客户让他们渴望&lt;strong&gt;理解整个网站的建构过程。&lt;/strong&gt;所以一个人正在学习做一个开发人员的同时，也需要学设计（至少尝试去做），以下就是我曾经听说或者犯过的&lt;/span&gt;&lt;span&gt;8&lt;/span&gt;&lt;span&gt;个错误。&lt;br /&gt;&lt;/span&gt;&amp;lt; ![endif]--&amp;gt;&amp;lt;!--[if !vml]--&amp;gt;&lt;a href=&quot;http://www.colourlovers.com/&quot; target=&quot;_blank&quot;&gt;&lt;img style=&quot;CURSOR: pointer&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/9bc782dfa05cc7f5e06a46927ebcd491.gif&quot; border=&quot;0&quot; alt=&quot;图片点击可在新窗口打开查看&quot; hspace=&quot;10&quot; vspace=&quot;10&quot; width=&quot;220&quot; height=&quot;260&quot; align=&quot;right&quot; /&gt;&lt;/a&gt;&amp;lt;!--[endif]--&amp;gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;我知道什么看起来很好（我有&lt;/span&gt;&lt;span&gt;photoshop&lt;/span&gt;&lt;/strong&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;）&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;这是成为差劲的设计师的原因之一。更无可救药的是本来就很差劲了，还以为自己很好。每个好的设计师都有一个度量好设计的&amp;ldquo;设计标准&amp;rdquo;，这个经验来自于自己经常看好的设计。你需要把时间花费在看伟大的设计上，诸如&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;http://www.thefwa.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;TheFWA&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.faveup.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;FaveUp&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.designiskinky.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;Design is Kinky&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;, &lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;和我个人喜欢的&lt;/span&gt; &lt;span&gt;&lt;a href=&quot;http://www.behance.net/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;Behance Network&lt;/span&gt;&lt;/span&gt;&lt;/a&gt; &lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;这些网站。你可能也知道如何去挑选设计杂志，比如&lt;/span&gt;&lt;span&gt;How&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;或者&lt;/span&gt;&lt;span&gt;print&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;（注意两者并不都是美国的，可能更加国际化一些）。就像好的程序员喜欢看（或评论）其他人的代码一样，好的设计师也总是环顾他人的工作成果，无论是站点、广告牌还是菜单。没有一个好的&amp;ldquo;设计标准&amp;rdquo;，即使有大量的&lt;/span&gt;&lt;span&gt;photoshop&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&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;一再地使用蓝色和白色&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;大多数程序员嘲笑一个设计师总是花费大量的时间来为站点挑选精确的颜色。但是，颜色总要比你想象中还重要，并且你不能在站点构建的时候来更改（至少，那时候就不得不花费大的气力）。象很多事物一样，观察一个好的设计师的配色方案是很有帮助的，寻找配色方案最好的一个站点是&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;http://www.colourlovers.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;COLOURlovers&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;我把每样东西都居中&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&lt;/span&gt;&lt;/strong&gt;&lt;span&gt;&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;大多数情况下，将标题、标语和副本的一部分居中很自然。但是通常，将网页上的文字居中就很外行了。左对齐是很保险的做法，但往往最好是视情况而定。更好地是，在&lt;/span&gt;&lt;span&gt;photoshop&lt;/span&gt;&lt;span&gt;中利用标尺和网格精确地计算你网站的各个部分。这并不意味着你的设计像格子一样，但是眼睛可以注意到理应被排成一行的几部分却没有这样排列的情况（特别是文本）。每个像素都很重要。&lt;br /&gt;&lt;/span&gt;&lt;a href=&quot;http://www.iliveonyourvisits.com/helvetica/&quot; target=&quot;_blank&quot;&gt;&lt;img style=&quot;CURSOR: pointer&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/edf61e1d31547c7cca3e7816f84eb936.gif&quot; border=&quot;0&quot; alt=&quot;图片点击可在新窗口打开查看&quot; hspace=&quot;10&quot; vspace=&quot;10&quot; width=&quot;220&quot; height=&quot;260&quot; align=&quot;right&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;使用免费的字体&lt;/span&gt;&lt;span&gt;&amp;hellip;&lt;/span&gt;&lt;/strong&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;它对于我来说看起来不错&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;我曾有一段时间这样想：（&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;）所有的衬线字看起来都一样（&lt;/span&gt;&lt;span&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&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;我们可以在那里放置更多的信息&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;在拥有程序员和设计师的团队里工作，两者间一个普遍的争论是&amp;ldquo;空间的利用&amp;rdquo;，程序员想在页面明显的位置放置尽可能多的信息。设计师争论道，眼睛不可能承受如此多的东西，最好只是在明显的位置只放置&lt;/span&gt;&lt;span&gt;logo&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;和标语。尝试去找到最佳的平衡，需要知道（&lt;/span&gt;&lt;span&gt;a&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;）杂乱的网站可能没有效果（&lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;）留白不是设计师偷懒&lt;/span&gt; &lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;（&lt;/span&gt;&lt;span&gt;c&lt;/span&gt;&lt;span&gt;）被称作&amp;ldquo;空&amp;rdquo;的部分是很必要的，以便突出其它元素。&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;我可不想为照片付钱&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;槽糕的图片或照片可以毁灭一个合理的网站，同时经过简单处理的伟大图片可以看起来很好。在网页上那么多的资源，没有理由使用差劲的图片。对于非营利站点而言，可以查看&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;http://www.sxc.hu/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;stock.xchng&lt;/span&gt;&lt;/span&gt;&lt;/a&gt; &lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;或&lt;/span&gt; &lt;span&gt;&lt;a href=&quot;http://www.flickr.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;Flickr&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;。对于商业的站点，有许许多多的站点，比如&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;http://www.istockphoto.com/index.php?refnum=sryan571&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;iStockPhoto&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;（但是需要了解版权的知识，因为不久后，你可能在其他站点上看到同样的照片了）。最后不要为在诸如&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;http://www.veer.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;Veer&lt;/span&gt;&lt;/span&gt;&lt;/a&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&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;我无需询问意见&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;更多地询问而不是闭门造车，你会成为你们设计师的最大粉丝（尽管你戴着一副玫瑰色的眼镜）。你需要询问你认识的设计师，以便得到坦诚的评价。不幸的是，我知道大多数被我问过的人，都只是赞誉而非批评。所以让你的自尊滚一边去吧，戴上&amp;ldquo;知识&amp;rdquo;这顶帽子。因为这些人是设计师而你不是。然后在你得到了他们的反馈之后，尊重他们、信任他们，并做一些改变。&lt;/span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/&quot; target=&quot;_blank&quot;&gt;&lt;img style=&quot;CURSOR: pointer&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/8378c0befc05cff361d8afb65f2bb72d.gif&quot; border=&quot;0&quot; alt=&quot;图片点击可在新窗口打开查看&quot; hspace=&quot;10&quot; vspace=&quot;10&quot; width=&quot;220&quot; height=&quot;260&quot; align=&quot;right&quot; /&gt;&lt;/a&gt;&lt;strong&gt;&lt;span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;strong&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;&amp;ldquo;无需得到太多细节&amp;rdquo;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;就像你很一般的代码需要等待提高（虽然仍能执行），你也有一些还说的过去的设计，但是离伟大差得远呢。看伟大的设计很容易这样想&amp;ldquo;这看起来没什么嘛&amp;rdquo;，但是事实上，伟大的设计花费了很多的时间（特别是对设计的新手）。但是有这些伟大的设计，你只是看到了最终的产品，并不知道设计者期间经历了多少次编辑和修改。甚至，你可能会惊讶于一条分割线会为设计带来多大的不同。当你把所有元素刚放在一起的时候，别以为设计做&amp;ldquo;完&amp;rdquo;了。&lt;/span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;总而言之，伟大的设计（就像伟大的代码）很耗时间、耐心和技巧&amp;mdash;&amp;mdash;因此，应该得到适当的尊重。尽管作为程序员（或者是内容编辑还是其他的&lt;/span&gt;&lt;span&gt;web&lt;/span&gt;&lt;span style=&quot;FONT-FAMILY: 宋体&quot;&gt;员工），你可能从不需要设计整个一个站点，但我有一种感觉，或多或少，你不得不做一点设计。如果可能的话，你尽量不要犯以上的错误&lt;/span&gt;&lt;span&gt;&amp;hellip;&amp;hellip;&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span&gt;&lt;/span&gt;&amp;nbsp;&lt;em&gt;（译得有误的地方，望赐教、敬请谅解）&lt;/em&gt;&lt;/p&gt;
&lt;p class=&quot;MsoNormal&quot;&gt;&lt;span&gt;&lt;/span&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://ued.taobao.com/blog/2008/02/01/8-web-design-mistakes-that-developers-make/&quot; target=&quot;_blank&quot;&gt;http://ued.taobao.com/blog/2008/02/01/8-web-design-mistakes-that-developers-make/&lt;/a&gt;&lt;/p&gt;</description>
				<author>轻侯</author>
				<pubdate>2008-12-31 15:40:19</pubdate>
			</item>			<item>
				<title>谷歌用户资料修改的一些问题</title>
				<link>http://sakuracomic.spaces.live.com/blog/cns!97FD0E4F75F1D939!309.entry</link>
				<description>&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;上周末，开始浮出水面。学习做一名勤奋的互联网观察员。&lt;/p&gt;
 
&lt;p&gt;正巧，申请加入的白鸦他们的UCDCHINA讨论组。&lt;/p&gt;
 
&lt;p&gt;挂着个真名好没意思。还是改成我喜欢的露露.周(lulu.zhou)比较好。&lt;/p&gt;
 
&lt;p&gt;不过一看那个资料修改页面，就有点晕晕。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://blufiles.storage.msn.com/y1pvqhPR1sn-k7lRWuR_ESrzLvawvrvesmcN-Wa9-Gt80ysb3_fkDeKegdvqFW3SLjxd0V379nS2dk?PARTNER=WRITER&quot;&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://blufiles.storage.msn.com/y1pvqhPR1sn-k7lRWuR_ESrzLvawvrvesmcN-Wa9-Gt80ysb3_fkDeKegdvqFW3SLjxd0V379nS2dk?PARTNER=WRITER&quot;&gt;&lt;img style=&quot;border-width: 0px;&quot; src=&quot;http://blufiles.storage.msn.com/y1pvqhPR1sn-k56-tjAYTfvTvB7KxD4ytuLnAN-pM2IDWdTACQo3DMBofRyQqZ3nWDtoY6Y12MUyUc?PARTNER=WRITER&quot; border=&quot;0&quot; alt=&quot;group2&quot; width=&quot;510&quot; height=&quot;344&quot; /&gt;&lt;/a&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;姓名：_______&lt;/p&gt;
 
&lt;p&gt;位置：_______&lt;/p&gt;
 
&lt;p&gt;名称：_______&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;姓名，这个选项很明显，是填我自己的名字。位置？大概是所在地吧。接下来，就到了很奇怪的地方了。&lt;/p&gt;
 
&lt;p&gt;名称？what？ 是昵称吗，还是其它什么的。&lt;/p&gt;
 
&lt;p&gt;如果是昵称的话，那为什么又要放在位置下面呢。&lt;/p&gt;
 
&lt;p&gt;如果不是昵称，那上面2个选项是不是要重新考虑下要填的内容了。&lt;/p&gt;
 
&lt;p&gt;这一番疑惑让我在填这个表单上犹豫了差不多有几分钟。&lt;/p&gt;
 
&lt;p&gt;真不希望看到这种类似汉化过来的语言。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/70&quot; target=&quot;_blank&quot;&gt;表单按钮&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://sakuracomic.spaces.live.com/blog/cns!97FD0E4F75F1D939!309.entry&quot; target=&quot;_blank&quot;&gt;http://sakuracomic.spaces.live.com/blog/cns!97FD0E4F75F1D939!309.entry&lt;/a&gt;&lt;/p&gt;</description>
				<author>露露.周</author>
				<pubdate>2008-12-31 15:34:22</pubdate>
			</item>			<item>
				<title>年度最糟設計：高雄市的新型行人倒數計時號誌</title>
				<link>http://taiwan.chtsai.org/2008/12/31/niandu_zuizao_sheji/</link>
				<description>&lt;p&gt;2008 年的倒數第三天，我來到高雄市十全一路與自由一路口。我經常步行經過此處，因此很快就注意到行人倒數計時號誌變得有點不一樣了。這組號誌將傳統由兩個燈面組成的號誌合為&lt;a title=&quot;單體行人號誌燈，環保省錢尚實在&quot; href=&quot;http://www.tbkc.gov.tw/news.asp?id=751&quot;&gt;單體&lt;/a&gt;，非常有特色。但在顯示的設計上就顯得非常不專業，違反了良好號誌設計應遵守的原則，導致易識性（legibility）極差。我在台灣各地看過太多設計不良的號誌，但是從沒看過問題如此嚴重的。&lt;/p&gt;
&lt;p&gt;用路人可能會從不同的地方觀看號誌，他們觀看的角度、距離與時間都未必是最佳的。用路人也可能在不同天候觀看號誌，也許寒風吹得眼睛流淚，也許下雨，也許起霧，總之他們觀看號誌時未必會有非常好的影像品質。因此，任何交通號誌的設計都必須滿足一個非常重要的條件：&lt;strong&gt;在各種不良觀看情況下都要有足夠的易識性&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;要在不良觀看情況下維持易識性，關鍵在&lt;strong&gt;低空間頻率（low spatial frequency）&lt;/strong&gt;訊息的特性。換個方式說，就是把影像模糊化後仍能辨識的特性。如果用整塊區域的閃爍來代表剩餘時間，閃得越急表示剩餘時間越少，那麼即使觀看情況非常不佳，觀看者還是能知覺到閃爍的頻率。又如一般的小綠人號誌，雖然變動的區域僅限於小綠人的手腳而不是整個影像，但仍然大到足以讓觀看者在不良觀看情況知覺到畫面改變的頻率。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://farm4.static.flickr.com/3098/3150467194_3e5992c22d_m.jpg&quot; alt=&quot;&quot; width=&quot;240&quot; height=&quot;130&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://farm4.static.flickr.com/3221/3149689561_6479ab849a_m.jpg&quot; alt=&quot;&quot; width=&quot;240&quot; height=&quot;130&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://farm4.static.flickr.com/3248/3150554752_333e449949_m.jpg&quot; alt=&quot;&quot; width=&quot;240&quot; height=&quot;130&quot; /&gt;&lt;/p&gt;
&lt;p&gt;高雄市的這組新型行人倒數計時號誌，是由 25&amp;times;32 = 800 個像素（LED）組成的。不論是在紅燈或綠燈的時間，畫面中間 21&amp;times;28 = 588 像素的區域都是沒有任何變化的，佔號誌顯示區域的比例達 73.5%。號誌利用畫面邊緣一條兩個像素寬的線進行倒數，以一分鐘的綠燈為例，平均每秒熄滅 4 個像素。換句話說，每秒鐘畫面的變動只有 &lt;strong&gt;0.5%&lt;/strong&gt;！而且變動不是在畫面的中心，而是在&lt;strong&gt;邊緣&lt;/strong&gt;！&lt;/p&gt;
&lt;p&gt;如此細微的變動屬於高空間頻率訊息，觀看者要在非常理想的觀看情況下才能察覺。即使是在晴天，即使距離適當，即使有足夠時間觀看，只要不是正對著號誌，邊緣的細微變化就可能被號誌邊緣的遮罩擋住。這個號誌設計太糟，即使從正面看還是會有易識性的問題。你可以親自體驗一下。請看一下第二與第三張圖，綠燈的兩個畫面與紅燈的兩個畫面。你多快能夠發現兩個畫面不同的地方？&lt;/p&gt;
&lt;p&gt;我們在觀看號誌時習慣注視畫面中央，因此良好的設計應該將重要的訊息置於中央。這組號誌不僅讓重要訊息不易辨識，還將這些訊息置於遠離中央的區域。當使用者依過去習慣凝視畫面中央時，邊緣的影像就會落在視網膜中央窩（fovea）以外解析度較低的區域（parafovea）。那些區域只能處理低空間頻率的訊息，當然也就難以察覺畫面邊緣的細微變化。&lt;/p&gt;
&lt;p&gt;就算你發現號誌畫面邊緣的細微變化好了。如果要知道還有多少時間，眼睛也不能凝視一個定點，而必須跟著消失的光點繞畫面一圈。人的眼球運動控制系統當然做得到這件事，但是你如果試過就知道，很辛苦的。一般人在正常的生活中不太有機會、也不太需要這樣做。我搜尋我的記憶，這種事情通常只在研究眼球運動控制的實驗作業中發生。&lt;/p&gt;
&lt;p&gt;這組號誌或許的確在硬體功能上有所創新，但很可惜的是，顯然沒有在認知心理學與人因工程的基礎上、以使用者為中心對整體設計作過評估。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;延伸閱讀：&lt;/strong&gt;&lt;a title=&quot;Taiwan 2.0 &amp;raquo; 配置錯亂的交通號誌&quot; href=&quot;http://taiwan.chtsai.org/2007/08/18/peizhi_cuoluan_de_jiaotong_haozhi/&quot;&gt;配置錯亂的交通號誌&lt;/a&gt;；&lt;a title=&quot;Taiwan 2.0 &amp;raquo; 削足適履的英文路標&quot; href=&quot;http://taiwan.chtsai.org/2006/01/02/xuezu-shilu_de_yingwen_lubiao/&quot;&gt;削足適履的英文路標&lt;/a&gt;。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://taiwan.chtsai.org/2008/12/31/niandu_zuizao_sheji/&quot; target=&quot;_blank&quot;&gt;http://taiwan.chtsai.org/2008/12/31/niandu_zuizao_sheji/&lt;/a&gt;&lt;/p&gt;</description>
				<author>蔡志浩</author>
				<pubdate>2008-12-31 13:04:00</pubdate>
			</item>			<item>
				<title>淘宝又改版了，发现点小问题</title>
				<link>http://ucdchina.com/post/1619</link>
				<description>&lt;div&gt;
&lt;div&gt;我只注意到两个方面，一个是搜索框改变，一个是用户注册引导区的改变。嘿嘿，发现改的和自己之前想的有些形似，有点小自豪，哈哈。&lt;/div&gt;
 
&lt;div&gt;俺收集的早期搜索框一：&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_1230688901QWwK.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
 
&lt;div&gt;俺收集的早期搜索框二：&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_12306888997o1k.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
 
&lt;div&gt;俺收集的早期搜索框三：&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_1230688900cn2c.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;后来我猜测淘宝今后的发展路线：&lt;/div&gt;
 
&lt;div&gt;
&lt;div style=&quot;cursor: pointer; position: relative;&quot;&gt;&lt;img id=&quot;uchomelocalimg[]&quot; style=&quot;width: 500px;&quot; title=&quot;点击图片，在新窗口显示原始尺寸&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_12306889016Tw5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
 
&lt;div&gt;现在：&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_12306889005VwH.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;嘿嘿，有一点神似。&lt;/div&gt;
 
&lt;div&gt;今天看到段兄说淘宝改版了，我就去看了看，发现一个小问题，当然，是我自己看来的小问题。从我&amp;ldquo;早期收集的搜索框三&amp;rdquo;的时候，开始发现&amp;ldquo;我的淘宝&amp;rdquo;被移动到左上的位置，同上图。然后我登陆，从左上侧我的淘宝进入，结果发现我的淘宝出现在中间，于是我回到首页：&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_123068890082XY.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
 
&lt;div&gt;发现这么个情况，&amp;ldquo;我的淘宝&amp;rdquo;与用户操作区（灰色区域）分别列与顶部两侧，下图：&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
 
&lt;div&gt;&lt;img id=&quot;uchomelocalimg[]&quot; src=&quot;http://www.5gme.com/attachment/200812/31/5007_1230688900eH9m.gif&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;1、将同一功能的位置不断的换来换去是否合理？&lt;/div&gt;
 
&lt;div&gt;2、登陆后用户中心与&amp;ldquo;我的淘宝&amp;rdquo;分列两侧是否合理，或者说我的淘宝不属于用户操作区？&lt;/div&gt;
 
&lt;div&gt;3、用户最习惯的操作区是左上还是右上？&amp;ldquo;我要买&amp;rdquo;&amp;ldquo;我要卖&amp;rdquo;&amp;ldquo;我的淘宝&amp;rdquo;是否应该和&amp;ldquo;消费者社区&amp;rdquo;&amp;ldquo;支付宝&amp;rdquo;&amp;ldquo;阿里旺旺&amp;rdquo;互换？&lt;/div&gt;
 
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/132&quot; target=&quot;_blank&quot;&gt;淘宝&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://ucdchina.com/post/1619&quot; target=&quot;_blank&quot;&gt;http://ucdchina.com/post/1619&lt;/a&gt;&lt;/p&gt;</description>
				<author>倪浩</author>
				<pubdate>2008-12-31 12:51:09</pubdate>
			</item>			<item>
				<title>何为”用户体验专家“</title>
				<link>http://douis.wordpress.com.cn/2008/12/30/%E4%BD%95%E4%B8%BA%E2%80%9C%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%B8%93%E5%AE%B6%E2%80%9D%EF%BC%9F/</link>
				<description>&lt;div class=&quot;entry&quot;&gt;
&lt;p&gt;作者：&lt;a href=&quot;http://www.oreillynet.com/pub/au/3442&quot;&gt;RJ Owen&lt;/a&gt;&amp;nbsp;&lt;br /&gt; 译者：&lt;a href=&quot;http://ucdchina.com/topic/59&quot; target=&quot;_blank&quot;&gt;UCD翻译小组&lt;/a&gt;，&lt;a href=&quot;http://douis.wordpress.com.cn/&quot;&gt;Li Douis&lt;/a&gt;&amp;nbsp;&lt;br /&gt; 原文地址：&amp;nbsp;&lt;a href=&quot;http://www.insideria.com/2008/12/what-makes-a-user-experience-e.html&quot;&gt;http://www.insideria.com/2008/12/what-makes-a-user-experience-e.html&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;如果你跟我一样，你也一定听说过很多那个叫做&amp;ldquo;用户体验&amp;rdquo;的神奇东西。它能把你那平凡、老旧、web1.0的垃圾软件变成&lt;span&gt;&lt;span&gt;被围困在&lt;/span&gt;&lt;/span&gt;糟糕界面&lt;span&gt;&lt;span&gt;的&lt;/span&gt;&lt;/span&gt;世界中的华丽的希望灯塔；如果你跟我一样，你也一定发现了遍地开花的&amp;ldquo;用户体验&amp;rdquo;，迎接着各种缩写（UX&lt;span&gt;&lt;span&gt;、&lt;/span&gt;&lt;/span&gt;XD&lt;span&gt;&lt;span&gt;、&lt;/span&gt;&lt;/span&gt;EX&lt;span&gt;&lt;span&gt;、&lt;/span&gt;&lt;/span&gt;UXD等），还努力去理解到底那些时髦的东西&lt;span&gt;&lt;span&gt;实为何物；&lt;/span&gt;&lt;/span&gt;如果你跟我一样，你也一定已经开始怀疑这个模糊的、不可思议的术语，而且如果你什么都跟我一样，那你也一定期待着有人能给你澄清一下。&lt;/p&gt;
 
&lt;h2&gt;用户体验：过去和现在&lt;/h2&gt;
 
&lt;p&gt;大部分人谈及用户体验都言必称苹果。有些人看完iPod的广告，则恍然大悟，意识到外形和易用性的确可以提升销售，至少&lt;span&gt;&lt;span&gt;看起来&lt;/span&gt;&lt;/span&gt;如此。更不用说象柯达这样的公司已经鼓吹&lt;span&gt;&lt;span&gt;了&lt;/span&gt;&lt;/span&gt;多年；&lt;span&gt;&lt;span&gt;而&lt;/span&gt;&lt;/span&gt;直到苹果出现&lt;span&gt;之前，没人&lt;/span&gt;&lt;span&gt;&lt;span&gt;能掌握真正的密诀&lt;/span&gt;&lt;/span&gt;。于是&lt;span&gt;&lt;span&gt;Adobe&lt;/span&gt;&lt;/span&gt;&lt;span&gt;也&lt;/span&gt;开始&lt;span&gt;&lt;span&gt;大肆宣扬&lt;/span&gt;&lt;/span&gt;，使用专业术语把它的产品差异化，我们其他人&lt;span&gt;&lt;span&gt;则&lt;/span&gt;&lt;/span&gt;紧随其后：用户体验变成了我们产品的最大特色。谁都可以掌握科技&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;推销者如是说。但是，并非谁都能解决用户的实际问题。&lt;/p&gt;
 
&lt;p&gt;在一定程度上，我想我们都是正确的。过去10年中我们用过的许多软件都是一团糟，回头看看我们甚至都会惊讶于我们怎么忍受过来的。用户体验的确是个问题，而且的确，它也许是我们都去购买iPod却很少买iRiver&lt;span&gt;&lt;span&gt;播&lt;/span&gt;&lt;/span&gt;放器的主要原因。&lt;/p&gt;
 
&lt;p&gt;但是正如很多成功的、新兴的而又定义模糊的行业一样，用户体验行业也带来了一大堆的混乱，并应运而生了一大堆混乱的人&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;那些混乱的客户，虽然他们&lt;span&gt;&lt;span&gt;知道自己&lt;/span&gt;&lt;/span&gt;需要用户体验专家却束手无策；那些混乱的从业者们，已经开始给自己贴上用户体验专家的标签却还一知半解。这一群人的出发点是好的，但他们要么是混淆了自己做的事情与&lt;span&gt;&lt;span&gt;真正的&lt;/span&gt;&lt;/span&gt;用户体验&lt;span&gt;&lt;span&gt;工作&lt;/span&gt;&lt;/span&gt;的区别，要么就是跟其他人一样渴望着学习。他们肯定知道&lt;span&gt;&lt;span&gt;改进&lt;/span&gt;&lt;/span&gt;用户体验对销售有好处，所以他们&lt;span&gt;&lt;span&gt;仍然&lt;/span&gt;&lt;/span&gt;乐此不疲。&lt;/p&gt;
 
&lt;p&gt;这种情况我们似曾相识。还记得web1.0的初期、图形设计师突然变身网站设计师、程序员突然变身为HTML专家那些时候吗？还记得Flash5一面世大家就纷纷用flash改造网站吗？就因为到处加入动画和闪光效果&lt;span&gt;&lt;span&gt;能&lt;/span&gt;&lt;/span&gt;让人觉得无比&amp;ldquo;动人&amp;rdquo;。最近，用户体验呈混乱状态的趋势也是一个好事&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;它意味着用户体验是很重要的，给我们的行业提供了一个转变。但是这并不&lt;span&gt;&lt;span&gt;是&lt;/span&gt;&lt;/span&gt;说我们&lt;span&gt;&lt;span&gt;就&lt;/span&gt;&lt;/span&gt;要任由混乱持续，或者坐视web自己解决问题&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;现在我们这种讨论&lt;span&gt;&lt;span&gt;也是一种解决&lt;/span&gt;&lt;/span&gt;问题&lt;span&gt;&lt;span&gt;的方式&lt;/span&gt;&lt;/span&gt;。&lt;/p&gt;
 
&lt;p&gt;我认为讨论很重要的原因，是因为我眼看着太多人接受了那些半生不熟的用户体验方法论，甚至一知半解。用户体验，对大多数人来说是往死里去做可爱的界
面、漂亮的调色板、给什么都来个Flash，凡是有几分貌似苹果机的界面就成了优秀用户体验的代表。我不是说这些东西不好不重要，但它们只是用户体验里沧
海一粟。&lt;/p&gt;
 
&lt;h2&gt;它是什么&lt;/h2&gt;
 
&lt;p&gt;既然那些都不是用户体验，我要说说用户体验是什么。&lt;/p&gt;
 
&lt;p&gt;我是真的很想说说，但我要声明：我可没有在撒谎编造、添油加醋、信口雌黄。虽然我曾和许多优秀的设计师共事而且我觉得我&lt;span&gt;&lt;span&gt;有&lt;/span&gt;&lt;/span&gt;说话的资本，&lt;span&gt;&lt;span&gt;可&lt;/span&gt;&lt;/span&gt;我真的无法&lt;span&gt;&lt;span&gt;用一句话就把这个概念说清楚&lt;/span&gt;&lt;/span&gt;。我是个程序员，即使是我真的很喜欢用户体验，但我不是个专家，所以我也无法假扮专家。&lt;/p&gt;
 
&lt;p&gt;我很走运地曾经和一些真正的专家一起工作过，所以我能提供给你的是一些他们的不同之处。下面是我见过的、真正的用户体验专家做的五件尚未被人模仿的事：&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;1.) 他们&lt;span&gt;&lt;span&gt;发起&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;strong&gt;&amp;ldquo;探索会议&amp;rdquo;。&lt;/strong&gt;在你的项目开始之前，他们和你坐在一起，试着了解你的领域。他们关注工作流程和架构，而且懂得对你的品牌提出&lt;span&gt;&lt;span&gt;正确&lt;/span&gt;&lt;/span&gt;的问题。每&lt;span&gt;&lt;span&gt;一次会议&lt;/span&gt;&lt;/span&gt;重点关注&lt;span&gt;&lt;span&gt;于&lt;/span&gt;&lt;/span&gt;提取用户目标和用户故事。&lt;span&gt;&lt;span&gt;这些都和&lt;/span&gt;&lt;/span&gt;随之而来的下一&lt;span&gt;&lt;span&gt;步有密切关系&lt;/span&gt;&lt;/span&gt;：&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;2.）他们关注用户的故事。&lt;/strong&gt;他们努力的去发现产品中的&amp;ldquo;用户痛点&amp;rdquo;，而不是功能特性。大多数探索会议都集中&lt;span&gt;&lt;span&gt;于从&lt;/span&gt;&lt;/span&gt;你&lt;span&gt;&lt;span&gt;那儿&lt;/span&gt;&lt;/span&gt;尽可能&lt;span&gt;&lt;span&gt;多地&lt;/span&gt;&lt;/span&gt;获取这些用户故事。但很微妙的一点是，他们会试着&lt;span&gt;同时&lt;/span&gt;改变你的思维模式：重点关注用户而不是特性，他们貌似一直在暗示这一点，即便他们很少直接说出来。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;3.）他们做用户调查。&lt;/strong&gt;这无疑是很重要而且最最不同的。碰头会开过之后，你们的UX专家是不是回到工作室画几张草图就行了？真正的专家不是这样&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;他们对自己未知的事情抱有一种明智的尊重，他们甚至在开始线框图之前就坚持在用户工作的地方进行&lt;span&gt;&lt;span&gt;现场&lt;/span&gt;&lt;/span&gt;观察。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;4.) 他们通常不是视觉设计师。&lt;/strong&gt;视觉设计师很重要，用户体验的视觉呈现当然也很重要。但是同样的，程序员也很重要，软件安全和性能也一样重要。一个真正的用户体验专家可能出身于设计师或程序员，但现在他们彻底不同了。他们不依靠photoshop、fireworks或Eclipse&lt;span&gt;&lt;span&gt;──&lt;/span&gt;&lt;/span&gt;他们的工作更象心理学家，试图理解用户的思考方式。他们在逐渐成长的人际交互领域或古老的信息架构领域有丰富经验。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;5.）最后，他们深知&lt;span&gt;&lt;span&gt;良好的&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;strong&gt;用户体验如同客户服务。&lt;/strong&gt;用户体验是为用户提供的&lt;span&gt;&lt;span&gt;服务&lt;/span&gt;&lt;/span&gt;，用户同时也是客户。所以用户体验实际上是客户服务的&lt;span&gt;&lt;span&gt;一种个性化&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;服务&lt;/span&gt;&lt;/span&gt;。&lt;span&gt;&lt;span&gt;想象一下，&lt;/span&gt;&lt;/span&gt;你的用户体验专家不回电话、开会迟到、邮件也写不好、无法及时充分的为你&lt;span&gt;&lt;span&gt;或他们的客户&lt;/span&gt;&lt;/span&gt;提供良好体验，那么他们也同样无法给你的&lt;span&gt;&lt;span&gt;客户&lt;/span&gt;&lt;/span&gt;提供&lt;span&gt;&lt;span&gt;良&lt;/span&gt;&lt;/span&gt;好的体验。&lt;/p&gt;
 
&lt;p&gt;评估一个用户体验专家的时候，不管是在公司内部还是职位招聘，要注意以上五点。如果他们能够理解，则以我看来他们有点靠谱可以详谈。如果他们不理解，那么很可能你在跟一个没经验的人打交道。&lt;/p&gt;
 
&lt;h2&gt;展望&lt;/h2&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;现在已经&lt;/span&gt;&lt;/span&gt;2008年底&lt;span&gt;&lt;span&gt;了&lt;/span&gt;&lt;/span&gt;，我既感到这一年里用户体验领域令人鼓舞的进展，也更感到2009年它即将面临的成熟所带来的挑战。但愿到明年&lt;span&gt;&lt;span&gt;的&lt;/span&gt;&lt;/span&gt;这个时候，我们将会更好的定义用户体验专家们从事的事情和他们的真正&lt;span&gt;&lt;span&gt;位置&lt;/span&gt;&lt;/span&gt;，还将得到一些让其他人能够取道效法的更好途径。我感慨于其他人的努力，比如&lt;a id=&quot;gkr1&quot; title=&quot;Francisoc Inchauste的UX革命&quot; href=&quot;http://www.insideria.com/2008/12/a-better-ria-assembly-line.html&quot; target=&quot;_blank&quot;&gt;Francisoc Inchauste的UX革命&lt;/a&gt;&amp;nbsp;以及Adaptive Path（注：作者所在的公司名）的工作，并寄希望于那些聚焦与此的工作会继续带来用户体验领域的成熟。&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;最后我想提供一些专家的链接地址。我从Adaptive Path团队那里得到了一些，比如Ethan Eisman，Alan
Cooper以及其他一些网址。但是我不确定这样做对不对。我把这个问题留给你──你有没有一个用户体验的链接收藏呢？你是否是一个有自己blog的专
家？回复我吧，把你的资源贴在回复中，帮助分享你的知识。&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/1&quot; target=&quot;_blank&quot;&gt;产品设计团队协作&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/59&quot; target=&quot;_blank&quot;&gt;UCD翻译小组&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://douis.wordpress.com.cn/2008/12/30/%E4%BD%95%E4%B8%BA%E2%80%9C%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%B8%93%E5%AE%B6%E2%80%9D%EF%BC%9F/&quot; target=&quot;_blank&quot;&gt;http://douis.wordpress.com.cn/2008/12/30/%E4%BD%95%E4%B8%BA%E2%80%9C%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E4%B8%93%E5%AE%B6%E2%80%9D%EF%BC%9F/&lt;/a&gt;&lt;/p&gt;</description>
				<author>Douis</author>
				<pubdate>2008-12-31 10:11:51</pubdate>
			</item>			<item>
				<title>Web设计中的黄金分割</title>
				<link>http://www.yeeyan.com/articles/view/blackanger/22846</link>
				<description>&lt;div class=&quot;text&quot;&gt;
&lt;p&gt;数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是&lt;a href=&quot;http://en.wikipedia.org/wiki/Golden_ratio&quot;&gt;黄金分割&lt;/a&gt;，也被称为神之比例，希腊字母表示其为 &amp;Phi; (&lt;a href=&quot;http://en.wikipedia.org/wiki/Phi_%28letter%29&quot;&gt;phi&lt;/a&gt;). 本教程会剖析一个网站的布局，以及如何对其黄金分割。&lt;/p&gt;
&lt;/div&gt;
 
&lt;div class=&quot;clearfix&quot;&gt;&lt;img class=&quot;avatar avatar-80&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/c205c0e8e4dafe9bf8ff32314b3aaa7b.jpeg&quot; alt=&quot;&quot; width=&quot;80&quot; height=&quot;80&quot; /&gt; 
&lt;div class=&quot;author_text&quot;&gt;
&lt;h4&gt;作者: &lt;a title=&quot;Visit Jarel Remick's website&quot; href=&quot;http://www.jremick.com/&quot;&gt;Jarel Remick&lt;/a&gt;&lt;/h4&gt;
 
&lt;p&gt;是&lt;a href=&quot;http://themeforest.net/user/xmdsys/portfolio?ref=xmdsys&quot;&gt;ThemeForest&lt;/a&gt;的一名作者，在Moscow, Idaho.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
 
&lt;h3&gt;&lt;span class=&quot;bodytag&quot;&gt;&lt;em&gt;网页&lt;/em&gt;&lt;/span&gt;骨架&lt;/h3&gt;
 
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2008-12/969e982344b4fdcbb0e4be97c0f05398.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。&lt;/p&gt;
 
&lt;h3&gt;Container&lt;/h3&gt;
 
&lt;p&gt;所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。&lt;/p&gt;
 
&lt;p&gt;container的类型:&lt;/p&gt;
 &lt;ol&gt; 
&lt;li&gt;Liquid: 根据浏览器宽度填充。&lt;/li&gt;
 
&lt;li&gt;Fixed: 指定的宽度，并不会根据浏览器宽度改变。&lt;/li&gt;
 &lt;/ol&gt; 
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2008-12/98c6022d5f2446ddfa2461aa898f8f4a.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;Header&lt;/h3&gt;
 
&lt;p&gt;header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fixed 。&lt;/p&gt;
 
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2008-12/72f242bbbd6333e99d06d0383826c118.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;Logo&lt;/h3&gt;
 
&lt;p&gt;你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。&lt;/p&gt;
 
&lt;h3&gt;Navigation&lt;/h3&gt;
 
&lt;p&gt;页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。 它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;navigation类型:&lt;/p&gt;
 &lt;ol&gt; 
&lt;li&gt;Horizontal: 水平显示，被称为&amp;lsquo;navigation&amp;rsquo;。&lt;/li&gt;
 
&lt;li&gt;Vertical: 垂直显示，被称为&amp;lsquo;menu&amp;rsquo;&lt;/li&gt;
 &lt;/ol&gt; 
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2008-12/1af5be74b4da684a5fbd598d4490ba3d.jpeg&quot; alt=&quot;&