瞬间设计 - UCD大社区

瞬间设计 (四)

蓉儿 — 2009-12-21 22:04:50

五、过渡转化的使用

在《mind hack》一书中，揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力，这正是负责视觉处理的第二块区域的功能。这就说明了 “动画”或“动态的变换效果”会成为web界面中吸引人注目的地方。过渡的使用它会造成视觉干扰，扰乱我们的思维，只有在特定的情况下使用特定的方式才能达到到理想的效果。

展开/收起

苹果网站左侧分类导航栏采用了响应式展开收起的动画方式，不仅节省了空间，还把注意力聚焦在当前的tab下面。

位置变化

google（不是谷歌）的个性化搜索帮助在用户登录时对每条搜索信息进行相关操作，你可以发表评论，将该信息置顶或删除，用来维护自己想要的信息。点击关闭按钮后，他就通过瞬间气体消失的动画生动的表现当前的信息已经删除。点击那个小箭头，当前信息会动态漂移到最顶部。告诉你他的位置已经出现了变化，如果不用这个动画效果，你可能会莫名其妙，甚至没有发现它的变化。

告诉当前的状态

flickr批量上传时，通常系统处理时间会比较长，甚至还有可能产生错误导致操作中断。他们采用了对每个照片的上传进度进行实时反馈为了，告诉用户当前的状态，从而给他们的错觉认为该过程不是那么长，加速了用户的等待时间。

告诉当前的状态

igoogle在页面又是个告诉当前状态的例子。用户带开页面时会提前显示各个组件的样式框，同时显示“正在加载”的状态告诉用户内容还在处理中。

Gap是一个年轻品牌的服饰

购物网站。他们的

购物车在默认时显示在导航栏上，用户不会太过关注。一旦有新的商品被加入“购物车”，就会以下拉菜单的形式显示新加入的商品，从而建立起对应关系。

六即时响应

用户进行的每一步交互，都希望看到清晰、及时的提示和上下文反馈。Apple Human Interface Guildeline早有提到过“反馈和沟通”原理，对其有如下描述：

……通过提供适当的反馈让用户获得足够信息，当用户开始某一操作时，要给出相应的提示，以表明应用程序已经接受用户输入且在对其进行处理。……

接下来我们看看都有哪些及时响应的方式。

即时预览

同样还是Gap网站。在鼠标移到商品图片时，会默认自动化分出的区块（类似于放大镜），右侧显示被放大的预览图片来查看每个细节。

实时更新

BingTweets是一个由微软、Twitter和Federated Media共同打造即使搜索的独立网站。它的好处就是可以搜索twitter上最新最快的消息。你可以从不同tab下的标签里实时哪些是当前最热的（大号字体显示），由于twitter的更新非常频繁，因此这些标签也是动态变化的，这一分钟和下一分钟看到的最热的标签都不同。

案例

淘宝的注册页面交互过程很复杂，及时检验显得很重要。他能够告诉用户当前输入是否正确，而不用再点击提交时再做判断。比如说：在点击输入表单给予操作提示；输入出错离开焦点给予错误提示；“会员名”输入时有5-20个字符的限制，为了告诉用户当前输入的字符数（有的用户不理解什么是字符）等。

最后的最后

写到这里，应该结束了。不过我还想分享关于“乔布斯”的3个小故事。

在 macintosh系统开发阶段，设计团队竟然花了6个月时间用于细化滚动条，以达到令乔布斯满意的程度。滚动条在任何计算机操作系统里都是很重要的部分，但却从不是用户界面中最显眼的要素。尽管如此，乔布斯还是坚持要对滚动条改成希望的样子，设计团队不得不修改了一个版本又一个版本。

“乔布斯可以一个像素一个像素地进行对比，来看看是否匹配。”设计工程师说，“他会一直深入到每个细节里去，详加勘察每一方面到像素的级别上去。若是有出入，“某些工程师可就要挨一顿臭骂了。

在itunes发布会的前20分钟，乔布斯还在和其他设计师针对左上角的字体进行讨论，而其他的高层却急得火烧眉毛，因为他们似乎还有更重要的事等待他确认。

设计的品质在于细节，只有偏执狂才能成功。我一直以这些小例子作为激励我设计路上前进的动力，每次在我纠结这个地方用下拉框还是radio button的时候，用12号宋体还是14号雅黑体的时候，我都不会在认为这是浪费时间，是的，也许这些微小的细节和瞬间我们很容易忽略掉，但是正是这些细小的东西在潜移默化的改变着人们的生活，还有什么比做这些事情跟激动人心的呢:- )

相关话题：瞬间设计源地址：http://lovelyrosa.blogbus.com/logs/54554089.html

瞬间设计（二）

蓉儿 — 2009-12-19 09:29:18

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

一、直接操纵原则

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

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

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

相关话题：瞬间设计源地址：http://lovelyrosa.blogbus.com/logs/54132978.html

瞬间设计（三）

蓉儿 — 2009-12-19 09:26:01

三、不要打断任务流

用户在每选择一个操作时都希望当前的任务是连贯的。页面刷新会人为的造成用户体验——或者说用户心流的中断。

[在由harper pernnial 出版的《心流：最佳体验的心理学》一书中，把心流定义为：当人们进入一种全神贯注的状态时，他会感觉一切都是水到渠成，不费吹灰之力。]

1.三个重要的交互相应参数

Jakob Nielsen提出了关于交互的相应参数，这三个准则30年后的今天依然是不变的。[Miller 1968; Card et al. 1991]

0.1秒是用户判断系统瞬时反应的时间，意味着在该时间内显示反馈结果用户是可以接受的。

1.0秒是用户保持不间断的思维流的限定时间，即用户会注意到这样的延迟。如果没有特别的信息反馈该操作超过0.1而少于1秒，他们会比较难以忍受。

10 秒是保持用户关注当前对话框的极限时间。对于长时间的延迟，用户会想在等待计算机完成期间处理其它事务。所以需要显示计算机将要完成的时间（通常选择进度条或百分比来表示），不然用户期待会大打折扣……

相关话题：瞬间设计源地址：http://lovelyrosa.blogbus.com/logs/54236074.html

瞬间设计(一)

蓉儿 — 2009-12-05 21:03:51

瞬间设计是什么？

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

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

设计师要做什么？

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

从一个例子开始

如何设计美好的瞬间？在开始之前，请大家先回想一下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.想象各种可能性

相关话题：瞬间设计源地址：http://lovelyrosa.blogbus.com/logs/52872529.html