用户体验设计思想：瞬间设计

瞬间设计是什么？

良好的用户体验，全在于那些完美的瞬间。在第一个瞬间，假设当一位用户从购物搜索结果页面跳转到某个店铺的时候，他此刻可能是想看看这个店铺的风格及其信用；而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则可能是询问怎验购买，从哪里注册，者看看商品是否打折，或者尝试联系这个卖家。

若想完成优秀的设计，我们就需要时刻自问：在希望用户做些什么，界面应该如何鼓励他们完成这些任务？每一个瞬间对于完整的用户体验来说，都是不可或缺的一部分，因为他们都有可能加强也可能摧毁用户对某个产品或公司的信心。为什么这么说呢？因为每个人在每时每刻所要完成的任务，对于此时此刻的他而言，那就是重要的任务。

设计师要做什么？

我们的工作不是设计花哨的页面，而是要设计美好的瞬间，确保每时每刻都完美，是设计师的职责和价值所在。在用户进行选择的瞬间，我们要帮助他们做出正确的决定，我们要留意创建怎样的交互行为以及鼓励人们输入，编辑，搜索和共享，激励他们完成所有的他们希望做的事情，我们还应该设计各种手段帮助人们提高工作效率——即使他们天生忘性大，老出错，或者总是三心二意。可以说设计师的工作就是考虑所有这些瞬间——设计一些东西来支持用户达成每一个目标，而不会干扰或者妨碍到他们，同时，把这些完全不同的部分凝成为一个整体。只有这样他们才能相信我们产品，喜欢我们的服务。

从一个例子开始

如何设计美好的瞬间？在开始之前，请大家先回想一下igoogle界面，这个产品大家一定很熟悉，有的设计师几乎每天都用到它。igoogle有很多关于拖拽的操作，而拖拽这个复杂的交互行为需要不同的状态（我们称之为瞬间）来表现其交互事件（Event），yahoo模式库曾对其进行详细的划分，他们分别是：

• 页面加载（Page Load）
• 鼠标悬停在拖动目标上（Mouse Hover Over Drag Object）
• 鼠标按下拖动目标区域（Mouse Down On Drag Region of Drag Object）
• 拖动发起（Drag Initiate）
  • 拖动原位置（Drag Over Original Location）
  • 拖动离开原位置（Drag Leaves Original Location）
• 拖动重新进入原位置（Drag Re-enters Original Location）
• 拖动有效区域（Drag Over Valid Target）
  • 拖动进入有效的区域（Drag Enters Valid Target）
  • 拖动悬停于有效的区域（Drag Hovers Over Valid Target）
• 拖动推出有效的区域（Drag Exits Valid Target）
• 拖动非操作区域（Drag Over Invalid Target）
  • 拖动进入无效的区域（Drag Enters Invalid Target）
  • 拖动悬停于无效的区域（Drag Hovers Over Invalid Target）
  • 拖动退出无效区域（Drag Exits Invalid Target）
• 拖动非具体目标（Drag Over No Specific Target）
• 接受放置（Drop Accepted）
  • 接受放置起始（Drop Accepted Begins）
  • 接受放置结束（Drop Accepted Ends）
• 拒绝放置（Drop Rejected）
• 放置于原位置（Drop On Original Location）

此外，拖动的目标模块包含了以下界面元素（Actor)，用于展示以上交互事件的种种有趣的瞬间，他们分别是：

• 页面（静态文字，图片）Page (static text, images provided)
• 光标（Cursor）
• 工具提示（Tool Tip）
• 模块（Drag module）
• 模块存放区（Drag module’s Parent Container）
• 模块放置区（Drop Target）

针对每个界面元素所表现的交互事件不同，我们就可以得到很多有趣的交互瞬间，如以下表格所示：

细心的你也许会发现，为什么这里只列举了少数的事件和元素，而没有都列举出来。其实这是因为部分特殊的交互事件非常复杂，很难一一列举。仅仅“拖动进入到无效的区域”这个交互事件就有很多种情况，比如：把模块拖动到浏览器地址栏里的情况；把模块移动到toolbar下方时的情况；还有“移动模块到有效的区域”过程中，该有效区内的模块会被挤到其他的区域内，什么时候作为判断来移动呢？尝试后你会发现当被拖动模块超出了原有模块尺寸的1/2时，就会发生跳转等等。

由这个例子我们不难看出要设计美好的瞬间，要做到以下几点：

1.关注分秒的响应（比如说我们要考虑到页面的加载效果）

2.关注微妙的细节（鼠标hover上去的光标显示效果，移到哪里显示等等）

3.想象各种可能性

好的设计绝不是单纯的因为天才的创意或者灵感爆发的一瞬间而产生的，只有设计师在“持续改进”的迭代方法中才能达到好的效果，你必须通过不断的“质疑自己”，在不同的设计种找到缺点，并寻求更好的方案来改进它。Bill-Scott在他的《Web界面设计》里提到了关于富交互设计的六个原则告诉我们如何发现并找到解决的办法，我遵循这些设计原则，通过实例和数据来和大家一起分析一些有趣的瞬间，指导我们的设计。

一、直接操纵原则

直接操纵原则就像Alan Cooper在《ABOUT FACE 2.0》中陈述的那样”：“在哪里输入，就在哪里输出“。例如编辑内容的操作完全可以不用重新打开页面，而直接在当前页面进行就可以了。

flickr是用到即时编辑照片信息的网站。这种方式更直截了当，用户不用切换当前页面就能完成。他们将更乐意为他们照片改名字，那么也就意味着会有更多与照片有关的元数据被记录下来，方便其他用户更好的搜索和浏览。我们先分析一下在这个操作的交互瞬间。

每个交互元素在不同触发事 件下所表现的响应状态。其中橘黄色区域是隐藏在初始状态后面发生的动作和出现的元素。

邀请编辑——默认情况下，标题正常显示。当鼠标悬停在标题上，标题立刻显示黄色背景条和一个“click to edit”的提示条出现，这种邀请提示的好处是——告诉用户当前区域是可编辑的并引导他们去点击。

编辑——单击以后，就立即进入到编辑模式，标题原位置出现了标题表单和”save”“cancel”按钮，用户就能非常清楚他们是在编辑标题。（这种方式的缺点就是多出来的按钮会把照片顶到下一行，造成排版不稳定）

完成——保存方式有很多种，flickr采用了文本的”saving…“临时替换标题，一旦保存完成，新标题就会以非编辑的样式出现。

上述过程中，使用到了一些邀请提示用户完成编辑，只满足了”可操作性“。那么用户怎样才能发现这个功能呢？这就涉及到”可访问性“问题。上述例子只有在鼠标移上去时才能被用户发现是可编辑性的，那么很可能存在一部分用户没有用鼠标移上去而忽略这些邀请。为了让功能更易被发现，可以采用在标题边放”编辑“链接。单击该链接便可触发编辑。（不过这也会影响到页面的视觉干扰问题，如果有过多的功能提示会造成页面噪点过多，可用率下降。）因此，做设计是要权衡易读性和易编辑性哪个重要，做出取舍。

二、保持轻量级

Digg在早期的时候，用户想要推一篇文章，需要经过两步操作。而现在的改进版——只要单击”digg“马山就可以记录一次投票。就因为”单击，结束“容易了一点，带来了用户活跃度和网站点击率的飞速增长，这正是交互轻量级设计的一大作用。

怎样通过简化交互，实现操作更接近内容，从而保证设计的轻量级呢？

1.费茨定律

费茨定律指的是：移动点或者手指到达目标的时间和移动距离的对数成正比。用公式表示为：

e = a + b log2 ( D / S + 1 )来计算。其中

D：鼠标达到目标的距离 S：目标的宽度（尺寸）

我们可以简单的理解为：目标定位越容易，距离鼠标当前的位置就应该越近，目标占用空间应该更大。为了简单，我们可以把功能都集中到一块（如放在菜单栏和工具栏中）。但是这样就违反了费茨定律（找起来会很费劲，距离也会增加）。通过上下文工具把操作放在相关内容附近是不错的办法。[注：上下文工具是桌面右键菜单的web版]2.实时可见的工具digg在每篇文章旁边，有一个推举的记分卡，下方的”digg it“按钮要比其他的操作显得明显。鼠标悬停的时候”digg it“的按钮边框变成黑色突出显示，单击”digg“后，投票结果马上记录并在记分卡上实时更新。同时”digg“按钮灰掉不可点，标签文本也变成灰色”dugg“。

   和digg一样，豆瓣的打分也是网站的核心功能。因此明确的操作（评级）邀请非常重要。打分后，用户可以随意更改打分分值，对评价作出删除和修改。

shutterstock把加入的收藏的图片总是显示在页面底部的遮罩层中，用户可以随时看到并编辑自己添加的图片。

3.保持关键内容可见

Gmail在页面加载的时候考虑了用户慢速连接的使用情况，减少样式的加载，使用备选方案保证主要内容可见。

淘宝的listing页面一次改版，鼠标悬停在宝贝图片上时，不仅出现大图，同时还在时间维度上对卖家推荐的商品轮播显示，用户同样可以点击下方的小图来选择查看。不仅保证了关键内容可见，同时解决了多信息的展现和交互。

4.只做一件事情

Llinkdin消息列表中，用户名承载着两个交互行为：鼠标点击后会跳转到用户profile页面，而鼠标悬停0.5秒以后出现弹出层，显示该用户的简介。如果我们不做0.5秒的限制，就会出现用户在鼠标以上去时立刻显示弹出层，那么很可能会有用户认为这个链接只具备这一种操作功能，而忽略了它可以点击的功能。所以对一个交互行为只赋予它一种功能，多种功能需要考虑用其它方式去实现。

 

  Amazon用另外一种方式来解决多功能的展现。星星打分的信息包括两方面：鼠标悬停展现弹出层显示每颗星的打分人数；鼠标点击后显示评价详情页面。如果把这两个信息同时通过点击星星来实现就会出现上述类似问题。amazon则是通过增加一个类似下拉的按钮来承载鼠标悬停的交互行为，把点击行为只留给星星。