设计相关 用户体验设计中的巧妙过渡
一些网站不仅在内容，可用性，设计，功能等方面，让人耳目一新；交互设计细节和动画更是与众不同。我们将分享一些模型的经验，分析一下这些简单的模式为什么效果很好。 当我们设计数码产品时，我们一般使用 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 度，加号变成了叉号，叉号大家广泛理解为“关闭”： 简单的变换完全改变了图标的意义。这个小细节比让用户猜测接下来发生什么，以及理解图标是什么意思容易多了。这个切换对用户非常友好。此外，加号旋转总是跟内容保持一个方向，加强了信息的流动。 要点：让网站元素的每个状态都可理解。 渐进呈现表单和评论 许多博客和新闻网站的评论表单不是很友好，当你准备发表评论时，你只想输入评论而不是干别的，典型的问题是，它会询问你各种其它的事情，好烦人呐。 为了激发用户的评论热情，我们可以 仅显示最重要的元素：评论框。当用户点击输入区域时，展开相应的表单。真实世界渐进展现的例子，可以看纽约时报的 beta 网站： 你可以更进一步，当评论框获得焦点时展开表单。这么做有个问题，交互设计的基本原则提到：an action…