蓉儿

五、过渡转化的使用

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

展开/收起

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

位置变化 

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

告诉当前的状态 

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

三、不要打断任务流

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

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

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

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

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

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

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

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

一、直接操纵原则

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

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

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

瞬间设计是什么？

良好的用户体验，全在于那些完美的瞬间。在第一个瞬间，假设当一位用户从购物搜索结果页面跳转到某个店铺的时候，他此刻可能是想看看这个店铺的风格及其信用；而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则可能是询问怎验购买，从哪里注册，者看看商品是否打折，或者尝试联系这个卖家。
若想完成优秀的设计，我们就需要时刻扪心自问：在希望用户做些什么，界面应该如何鼓励他们完成这些任务？每一个瞬间对于完整的用户体验来说，都是不可或缺的一部分，因为他们都有可能加强也可能摧毁用户对某个产品或公司的信心。为什么这么说呢？因为用户在每时每刻所要完成的任务，对于此时此刻的他而言，那就是重要的任务。

设计师要做什么

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

Amazon 2.0(接上文）

这里我们可以看到亚马逊进行了重新设计，其标志性的“添加到购物车按钮”已经改头换面：

虽然是同样的形状和颜色，但现在是3D效果。 “准备购买”不再存在，而“立即购买”按钮现在要求用户登录。 此外，二手书市场占据了更多的屏幕空间 。 他们还大力推广了A9搜索引擎。

你是否注意到他们改变了“添加到希望清单”按钮，使得“添加到购物车按钮”占据视觉焦点， 他们还增加了一个辅助操（“添加到结婚登记处”“添加到结婚礼物列表”）。

今天的样子......

他们不再主推A9搜索引擎，二手书市场占用的空间已经不大，他们已经增加了一些辅助项目（“添加到购物清单”，“添加到婴儿注册表”和“告诉朋友“）。

  正如你所见，他们还增加了一个下拉菜单来调整数量，他的好处是你不必等到结帐时才能改变。 所以，如果你在开始时选择的是3，恭喜你，你已经是网上购物geek一族了......

今天上facebook发现了一个小错误，好吧，说我是细节控也可以，看图说话：

用openID登录的对话框，注意左下方的“登陆”错别字。关于“登陆”还是“登录”这个问题早就有争议的结果，为什么非死不可会犯这种低级错误？

反面说开去，今天闲逛时，发现一个叫wibiya地网站，在网站上方的导航栏默认显示1024的改变屏幕大小的功能，同时也考虑的宽屏的用户的切换需求。在这种情况下，页面能适应不同客户端浏览器和分辨率。记得千鸟写过的一篇排版自适应提升可访问性中提到了这些细节问题。

可见，细节要无微不至。

  平时读书的时候总是希望能有随时记录的小工具，我的个人习惯不太适应笔记本形式，觉得读书笔记还是用结构化的形式记录有感觉。今天意外发现了这个小工具，又小巧又好用，比微软的mindmap轻便不少，功能一点也不逊色，关键是再mac上的免费软件呢。

  试用了一下普通版（pro版本是收费的），截图如下：

    inspector功能可以设置关键字和添加备注，便于日后查询。当然，不光是读书笔记，用它来做日程列表，时间安排，项目管理，头脑风暴记录等一样很方便。

   下载地址：http://www.mindnode.com/

看了TED的“How Twitter's spectacular growth is being driven by unexpected uses”，视频中讲到Twitter的诞生其实源于很简单的需求－－告诉别人我在干嘛，这个产品的设计人员就是开始觉得好玩，自己和朋友家人能够随时了解而作的，而发展到今天的规模也是他们始料未及的，至于今后Twitter会变成什么样，他们诚实的说道：“我们不知道，我们会一直关注用户的声音”。

记得原先一朋友感慨道“人这辈子能做好一件事就很不错了”。我想做人如此，做产品一样是吧。好产品往往都是把一个需求做到极致。google搜索，twitter小简报，amazon交易，都是极简的经典例子。然而很多互联网产品都是功能极其庞大，每个都有，每个都没做到家，用户也不知道究竟该怎么用那么多功能，慢慢就失去兴趣离开。

倾听自己内心的声音，想想用户的实际需求，不要带着功利心去做设计。此话时刻铭记在心，时时提醒自己，和大家共勉。