提升产品体验愉悦性方法.docVIP

提升产品体验愉悦性的方法 这是我偶尔看到的一篇文章，虽然有点长，但对我们设计师非常有启发，特别整理排版收藏啦！ 我 (英文原文作者) 时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中，有人提到这样一个有意思的问题：我们可以首先专注于提升产品的愉悦性，然后再考虑可用性等其他方面的问题吗？ 这个问题立刻让我联想到“形式追随功能”这句话，所以我还是倾向于功能与可用性优先的方式。 不过必须承认，这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作，首先聚焦于体验的愉悦性，然后再将整个方案“拉”回到一个约束框架中，使它最终成为一个切实可用的产品？ 无论我们的实践方式从哪个角度出发，有一点是无疑的：任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品，并且希望为其注入更多能够让用户在情感上为之吸引的元素，那么你应该做些什么呢？应该从何处入手？下面是我的十个建议，希望能够帮你有效的提升网站或应用产品的体验愉悦性。 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?网站当中的下拉菜单可以通过动画效果真正实