用户体验打算中的难懂过渡

一些网站不仅在内容，可用性，打算，功能等方面，让东说念主修葺一新；交互打算细节和动画更是一鸣惊人。咱们将共享一些模子的教养，分析一下这些通俗的模式为什么后果很好。

当咱们打算数码居品时，咱们一般使用 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/