提升产品体验愉悦性的十个方法

我(英文原文作者)时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中，有人提到这样一个有意思的问题：

我们可以首先专注于提升产品的愉悦性，然后再考虑可用性等其他方面的问题吗?

这个问题立刻让我联想到“形式追随功能”这句话，所以我还是倾向于功能与可用性优先的方式。

不过必须承认，这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作，首先聚焦于体验的愉悦性，然后再将整个方案“拉”回到一个约束框架中，使它最终成为一个切实可用的产品?

无论我们的实践方式从哪个角度出发，有一点是无疑的：任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品，并且希望为其注入更多能够让用户在情感上为之吸引的元素，那么你应该做些什么呢?应该从何处入手?下面是我的十个建议，希望能够帮你有效的提升网站或应用产品的体验愉悦性。

1.优雅的视觉外观

我们都知道第一印象的重要性。精心雕琢的界面可以在最短时间内给用户带来视觉上的“优雅”冲击。下面这些产品就是通过出色的视觉设计以及对细节的把握给用户留下了可持续的良好印象，从而为长期的愉悦体验奠定了基础。

Your Karma

Your Karma是一款移动wi-fi设备，我最近很钟情于他家的网站。字体的协调搭配，柔和的配色，聪明的图像运用，精巧的细节动效，所有这些要素结合在一起构成了非常优雅的用户界面。

Path

Path的UI在文字、配色、图形元素等方面几乎都体现出了像素级的精准把握，不仅为用户呈现了极佳的细节表现，而且带来了很多具有典范性的使用体验。

Rdio和新版MySpace

Rdio和新版MySpace都采用了扁平化的风格，整体形象明亮清晰，配色、字体和图形元素都非常简约精炼。

相关阅读：移动应用的视觉美学- 谈三款拥有高收入的应用产品

2.文本

例如表单和链接附近的小注释、按钮标题、404页面注解等等，通常都是在开发流程后期匆匆完成的。实际上，这类文本还是蛮重要的，它们可以在交互流程的细节当中辅助用户更好的完成任务，而且，如果你足够用心，也可以在这些细微之处融入一些个性化的能够提升交互愉悦性的元素。

Flickr

很多网站都会在文本信息的个人化方面下功夫，Flickr在这方面做的很有示范性，非常经典的例如用户每次访问都会看到不同语言的欢迎辞，让人感觉很诙谐甚至是调皮。

Clearleft的404页面

Clearleft将其404页面看做展示网站人格的机会，通过绕口令一样幽默略显恶搞的文

案让用户感觉到网站背后真实人类的存在，在出现问题的状况下尽可能降低用户的负面感受。

Funny or Die的邮件共享

Funny or Die在邮件分享表单的错误提示中同样使用了好玩、自嘲风格的文案，和整个网站的主题个性保持一致。

3.个性化

在现实生活中，我们或多或少都体会过人与无生命物体之间的情感关联，譬如你可能会给自己的车起个昵称，或是喜欢把前照灯和保险杠看做是一张笑脸。这类事情想起来是蛮怪的，不过人类就是这样一种乐于建立“关系”的情感化的生物。

在产品中融入个性化的元素，可以有效的填补人与机器之间的沟壑，使用户在更多时候处于一种积极和正面的情感状态下，提升产品体验的愉悦性。

MailChimp

提到MailChimp，我们几乎都会想到他们的吉祥物Freddie猴子。正是这个吉祥物和相关的元素为MailChimp带来了一种让人觉得轻松愉悦的个性。

Gugafit

矢量插画风格的卡通人物、明亮活泼的配色、童稚风格的字体，这些遍布全站的个性化元素帮助Gugafit塑造出一种温暖、健康、充满童趣的产品个性。

推荐阅读：为产品赋予人格- 情感化设计的组成要素及实践案例

4.有意义的动画效果

我们在现实生活中按动灯的开关时，可以感受到真实的、能让人产生满足感的触感，这种触感会为我们这些“用户”提供反馈，让我们知道交互行为已经完成。

当我们与数码世界及软件界面进行交互时，这种能够让人了解到交互成功完成的反馈则变得尤为重要。由于这些设备通常无法提供真实的触感反馈，所以我们在更多时候所能依赖的就是清晰明确的视觉反馈形式。

下面这些例子中所展示的动画效果在提供视觉反馈和增强体验愉悦性这两方面的表现都很不错。

iPhone的邮件列表刷新

我个人最喜欢的动效来自于iPhone邮件应用中的下拉刷新，首先，它是具有明确的功能性的，用户可以接收到“刷新正在进行当中”的反馈信息;同时，它也很有意思，对真实世界当中的拉伸效果模拟的很到位，我总是喜欢翻来覆去的拉着玩儿。

页内跳转的滚屏动效

如果不进行任何处理，网页中锚点之间的跳转都是在一瞬间很突兀的完成的，浏览者会感到很突然，视觉焦点难以很快的适应新内容。借助一些简单的JavaScritp，我们可以使这类跳转变的更平滑顺畅，避免用户失去方向感。下面的截图来自我的个人站点。

下拉菜单动效

例如Nike和Burton网站当中的下拉菜单可以通过动画效果真正实现“下拉“，而非突然呈现;即确保功能的实现，也提升了界面交互操作过程中的顺畅体验。

5.键鼠交互

我们通常所说的“人机交互”一般会涉及到键盘、鼠标或触屏设备。特别是受到如今多点触屏设备手势操作的启发，在传统桌面端环境中，围绕着鼠标、键盘的操作特性，打造独特、有趣的交互效果——如果运用得当，这也是提升产品体验愉悦性的良好方式。

打开，你会发现使用鼠标与网页交互也是一件很有意思的事情。他们确实将很多很棒的创意融入到了页面的交互体验中，特别是在Projects部分，鼠标悬停在某张图片上所触发的动效非常真实自然，而且充满触感。

Ben The Bodyguard

Ben The Bodyguard将引人入胜的故事情节与简单却精彩的滚屏交互方式良好的整合在一起，带领用户跟随保镖Ben在夜色中穿行在街道上，通过这种互动电影般的方式牢牢的抓住用户的注意力，有效的传递了产品信息。

Adidas滑雪板页面的视差滚动