一些网站不仅在内容，可用性，策动，功能等方面，让东谈主修葺一新；交互策动细节和动画更是不同凡响。咱们将共享一些模子的训戒，分析一下这些简单的花式为什么遵守很好。

当咱们策动数码居品时，咱们一般使用 Photoshop 和 Sketch 此类软件。大无数稀有年行业训戒的东谈主明明显白策动不单是是视觉传达。尽管如斯，有些东谈主还是不竭作念静态策动。Steve Jobs 如斯描写策动：

“It’s not just what it looks like and feels like. Design is how it works.” “策动不单是是看起来和感受到的姿色。策动是怎么责任。”

咱们关于居品的体验和印象起首于诸多身分的麇集，交互饰演一个根基的脚色。咱们无法念念象用户界面是静态策动，随后再添加交互魔法。相背，咱们需要在早期加入交互特质，把它当成自然的构成部分。

让咱们望望一些狡饰的交互，它们是一些高深的动画，优雅地改善了用户体验。

动画转动

超相接老是驳斥不一，当点击一个相接时，不错生硬地跳转，收尾是丢失荆棘文。

对网站而言，罕见是长网站，加一个线性转动动画，不错改善用户体验：

对比底下望望：

对比下默许行径和动画行径，跳过内容不再是意外志的行径；它是一个决定。实质上，《Hope Lies at 24 Frames Per Second》此文中的菜单按钮莫得任何动画，它花了我1分多钟才明白的确发生了什么。

重点：界面的短暂变化用户很难符合，老是奉告他们发生了什么。

有景况的切换

让咱们望望另一个例子：切换菜单。用户点击“+”号加多内欢跃伸开元素。通过旋转 45 度，加号酿成了叉号，叉号人人平凡交融为“关闭”：

简单的变换皆备更变了图标的真谛。这个小细节比让用户测度接下来发生什么，以及交融图标是什么真谛容易多了。这个切换对用户罕见友好。此外，加号旋转老是跟内容保执一个标的，加强了信息的流动。

重点：让网站元素的每个景况都可交融。

#p#

渐进呈现表单和评论

好多博客和新闻网站的评论表单不是很友好，当你准备发表评论时，你只念念输入评论而不是干别的，典型的问题是，它会究诘你多样其它的事情，好烦东谈主呐。

为了激励用户的评论温雅，咱们不错仅泄露最蹙迫的元素：评论框。当用户点击输入区域时，伸开相应的表单。真确天下渐推崇现的例子，不错看纽约时报的 beta 网站：

你不错更进一步，当评论框获取焦点时伸开表单。这样作念有个问题，交互策动的基本原则提到：an action should always happen close to where the interaction occurs （一个行径老是发生在离交互点最近的所在）（关注焦点隔壁）。咱们不错再进一步，给评论框添加动画指导用户：

你还不错把评论框固定在顶部，不才面伸开相应内容，泄露附加字段。

如你所见，这样作念减少了杂乱，令评论表单更招引东谈主。

更好的作念法是，当用户到达页面底部时自动加载评论。咱们应该避强迫迫用户去点击，除非有更好的原理。

重点：渐推崇现为了减少 UI 组件的呈现，用户需要它们时再泄露出来。

Pull To Refresh （拉动刷新）

最令东谈主快活的交互之一是伴跟着 iPhone 出现， Loren Brichter 倡导的 “拉动刷新”。用户不错更新可卷动的时序型内容。你不错在 Twitter 的应用中看到此遵守。

为什么遵守这样好？在拉动刷新出现之前，用户必须点击浏览器的刷新按钮加载更多内容。把用户发现更多内容的愿望和刷新行径相干起来，明确的点击行径变得好固执。

重点：结合意图和行径，体验变得愈加无缝。

Sticky Labels （粘性标签）

粘性标签是另一个高深而实用的组合，它把用户界面与有真谛的过渡集合起来。望望 Edenspiekermann’s use of this technique 的独揽。

项想法签一直固定在内容的左侧，直到下一个技俩出现。这个遵守类似 iOS 地址本，它为较长区域提供了荆棘文。过渡遵守不仅加多了标的感，况兼提供了基于荆棘文的描写。

重点：长区域中添加了有价值信息的提要好像标题不错使用粘性标签。

#p#

Affordance Transition （自讲解的过渡遵守）

自讲解的观念源于说明情愫学，指一个对象的特征，它用于指导用户。

在用户界面策动的荆棘文，EU 网站的可用性词汇 （PDF）中如斯界说自讲解性：

Ridges（棱线）频频用于晋升自讲解性。按钮周围的棱线示意按钮是可操作的。这种用户体验工夫被 iOS 上的相机应用平凡推行。

iOS 6 的锁屏附近的相机图标，示意不错拖动。Apple 在 iOS 7里移除了它，明显是因为用户习尚让它看起来更像一个孤立的图标。其后是何如作念的：当你拖动按钮，锁屏弹起，相机出现不才面。这是一项将用户指向功能的很好的工夫。

重点：在界面上，赐与元素高度自讲解性，它会把用户指向功能。

Context-Based Hiding（基于荆棘文藏匿）

iOS 上的 Google Chrome 运行后有个基于荆棘文藏匿功能，见下图：

基本理念是当用户向下转动页面，浏览器导航面板自动藏匿。当用户再次朝上转动页面，领域面板出现。这种步调不仅改善了荆棘体裁验（专注于内容本人），况兼加多了屏幕可用空间。屏幕空间在转移训诲尤为蹙迫。

领先假定用户将一直浏览关注的内容。当他们罢手浏览，荆棘文可能更变；因此，导航面板需要再行出现。这一工夫检朴屏幕空间的同期，查验某种假定是否超出了你的测试用例。

iOS 处罚的更好，当到达页面的底部时，领域面板再次出现。这是一个动态整合用户需求的绝佳的例子。

重点：使用基于荆棘文的藏匿功能晋升用户关注度，检朴屏幕空间。

Focus Transition（焦点过渡）

当通过键盘导航时，用户按下 Tab 键，频频搞不清焦点转移到那边了。通过动画指引他们到达页面指定位置。过渡是高深的，但在指援用户方面影响广宽。

重点：为用户指明标的，非论他们怎么导航。

总之

这几个例子只是是九牛一毛闭幕，本文重点不是秀一些最新最酷的交互工夫，而是强调怎么通过眇小的交互细节大大晋升用户体验。

淌若咱们念念策动出更好的数字居品，咱们需要挑战现时的信念，望望何种交互花式更能便捷用户的使用。我没说要类似造轮子，然则不要罢手探索。因此，走出你的安乐窝，保执探索，敢于尝试。

淌若你可爱本文，不错在 Twitter 上关注我，好像到瑞士请我吃一块瑞士巧克力。

原文相接：http://blog.jobbole.com/51255/