我经常和其他设计师讨论产品愉悦感这个话题。在最近的一次聊天中，有人提出了一个有趣的问题：我们是否可以先专注于让产品令人愉悦，然后再考虑可用性等其他方面？这个问题立刻让我想起了“形式追随功能”这句话，所以我还是更喜欢功能和可用性优先的方式。但是，必须承认，这种以理性分析入手的“传统”设计思路，或多或少会让我们失去一些创造性突破的机会。或许我们可以从“好玩”的角度入手设计工作，先着眼于体验的乐趣，然后再将整个方案“拉”回一个受约束的框架中，从而最终成为一个可用的产品？无论从哪个角度实践，有一点是可以确定的：任何成功的设计都必须基于产品功能的可行性、可用性和可靠性。假设您已经有了一个可用的产品，并想在其中注入一些更能吸引人的东西，您会怎么做？我应该从哪里开始？以下是我的十点建议，希望能帮助您有效提升网站或应用产品的体验乐趣。1.优雅的视觉外观我们都知道第一印象的重要性。一个精心设计的界面可以在最短的时间内给用户带来视觉上“优雅”的冲击。以下产品通过优秀的视觉设计和对细节的把握，给用户留下了持久的良好印象，从而为长久愉悦的体验奠定了基础。YourKarmaYourKarma是一款移动Wi-Fi设备，最近我爱上了他们的网站。协调的排版、柔和的调色板、巧妙地使用图像和微妙的运动细节都结合在一起，创造了一个非常优雅的用户界面。PathPath的UI在文本、颜色匹配和图形元素方面几乎体现了像素级的精度。不仅为用户呈现出色的细节表现，更带来诸多堪称典范的用户体验。Rdio和新版MySpaceRdio和新版MySpace都采用了扁平化的风格，整体形象明亮清晰，配色、字体和图形元素都非常简洁精致。相关阅读：移动应用的视觉美学——浅谈三款高收益应用#p#2.表单和链接附近的小评论、按钮标题、404页面评论等文本通常在开发结束时匆匆忙忙过程完成。其实这种文字还是挺重要的。它们可以在交互过程的细节上帮助用户更好地完成任务。而且，如果你够细心，还可以在这些细微处加入一些个性化的特性，来提升交互的乐趣。性因素。很多Flickr网站都会在文字信息的个性化上下功夫。Flickr在这方面堪称典范。这是非常经典的。比如，用户每次访问都会看到不同语言的欢迎词，让人觉得很诙谐甚至调皮。.Clearleft的404页面Clearleft将其404页面视为展示网站个性的机会。通过像绕口令一样幽默、略带恶搞的文案，让用户感受到网站背后真人的存在，尽量减少用户遇到问题时的负面情绪。.FunnyorDie的邮件分享FunnyorDie在邮件分享表单的报错信息中也采用了一种有趣、自嘲的文案风格，与整个网站的主题个性相吻合。#p#3。个性化在现实生活中，我们或多或少地体验过人与无生命物体之间的情感联系。例如，您可能会给您的爱车取个昵称，或者喜欢把车头灯和保险杠变成笑脸。想想这是一件很奇怪的事情，但人类是一种喜欢建立“关系”的情感动物。将个性化元素融入产品中，可以有效填补人与机器之间的差距，让用户更多时候处于积极向上的情绪状态，提升产品体验的愉悦感。MailChimp当我们提到MailChimp时，我们几乎总是会想到他们的吉祥物猴子Freddie。正是这个吉祥物和相关元素赋予了MailChimp轻松愉快的个性。Gugafit矢量插画风格的卡通人物、明快活泼的配色、童趣风格的字体，这些遍布全站的个性化元素帮助Gugafit营造出温暖、健康、童趣的产品个性。推荐阅读：赋予产品个性——情感设计要素与实战案例4.有意义的动画效果当我们在现实生活中按下电灯开关时，我们能感受到真实而令人满意的触感，这种触觉反馈给我们，“用户”，让我们知道交互已完成。当我们与数字世界和软件界面交互时，这种让人们知道交互已成功完成的反馈变得更加重要。由于这些设备通常不提供真实的触觉反馈，我们通常可以依赖的是清晰明确的视觉反馈形式。以下示例中显示的动画在提供视觉反馈和增强体验乐趣方面做得很好。iPhone邮件列表刷新我个人最喜欢的动画是iPhone邮件应用程序中的下拉刷新。首先，功能清晰，用户可以收到“正在刷新”的反馈；同时，它也很有趣。它很好地模拟了现实世界中的拉伸效果。我总是喜欢一遍又一遍地玩。如果不处理页内跳转的滚动动画，网页中锚点之间的跳转会在瞬间硬生生完成，浏览者会感觉很突然，视觉焦点很难快速适应到新内容。.通过一些简单的JavaScript，我们可以使这种过渡更加顺畅，避免用户失去方向感。以下截图来自我的个人网站。下拉菜单动画效果比如耐克、伯顿网站的下拉菜单，可以通过动画效果真正做到“下拉”，而不是突然出现；即保证功能的实现，提高界面交互过程中的流畅体验。#p#5。键盘和鼠标交互我们通常所说的“人机交互”一般涉及键盘、鼠标或触摸屏设备。尤其是受当今多点触控屏幕设备的手势操作启发，在传统桌面环境下，围绕鼠标和键盘的操作特性，打造独特有趣的交互效果——如果使用得当，这也能提升用户的愉悦感。产品体验的好方法。todaythe12.com打开今天的the12.com，你会发现用鼠标与网页进行交互也是一件很有趣的事情。他们确实在页面的交互体验中融入了很多很棒的创意，尤其是在Projects部分，鼠标悬停在图片上触发的动画非常真实、自然且富有触感。BenTheBodyguardBenTheBodyguard将引人入胜的故事情节与简单却扣人心弦的滚动交互融为一体，带领用户跟随保镖Ben在黑夜中穿梭于街头，通过这种电影般的互动方式牢牢抓住用户注意力，有效传递产品信息。阿迪达斯滑雪板页面的视差滚动“视差”效果将页面的自然滚动与JavaScript定位技术相结合，是目前流行的设计趋势。越来越多的网站，尤其是单页网站，开始使用这种技术，因为它确实是一种视觉逼真且吸引人的方式。阿迪达斯官方滑雪板页面就是一个很好的例子。6、幽默设计中的幽默元素是淡化人与机器界限、引发积极反响的有效方式。幽默不仅可以化解人与人之间实际交流过程中的坚冰，还可以让软件界面更加友好。MailChimp链接和评论每次登录MailChimp时，右上角的吉祥物Freddie都会随机咕哝一些东西，例如笑话、歌词或视频链接。EnvyLabsEnvyLabs的“关于我们”页面使用带有搞笑注释的照片来取笑他们的设计师和开发人员。这种幽默能有效拉近浏览者与网站背后真人的距离。当表单验证失败时，幽默元素也可以在雅虎的注册页面中发挥积极作用。当你在雅虎注册时，如果你选择未来一年作为你的生日，你实际上会在验证消息中询问你是否来自未来。（我之前在微博上什至抱怨雅虎注册，因为安全问题要求我儿时闺蜜的姓氏必须是两个字……译者C7210注）7.从现实世界中汲取灵感也叫“拟物化”，利用物体在现实世界中作为二维UI环境中的隐喻，使信息和功能更容易被识别和理解。这种方式在触摸屏移动平台中更为流行，用户可以通过各种手势直接与目标对象进行交互。虽然有目前市场上对于苹果拟物化做法的负面声音很多，但不可否认的是，对于某些类型的产品，合适的拟物化设计风格确实可以让其更易于理解和使用，带来更生动、愉悦的体验。翻页效果iBooks在阅读应用中越来越普遍，事实上，在软件界面上，设计师确实可以使用更多的“数字化”箭头或按钮等方式来浏览，但卷曲的页面和左右滑动的手势可以让用户想起现实中翻书的感觉，让交互操作更加有趣和吸引人。iPhone的Podcast应用程序被许多苹果公司指责在其应用程序中使用了太多不必要的拟物化设计，这当然是一个有争议的话题，但最新版本的Podcast应用程序也属于这一类，例如模拟胶片卷轴等一个界面元素在功能上毫无意义，但它确实为整体产品体验增加了一层与现实世界的情感联系，让用户觉得这不仅仅是一个冰冷的数字程序。相关阅读：浅谈扁平化界面风格的设计美学#p#8.惊??喜（彩蛋）谁不喜欢惊喜？礼物和复活节彩蛋等概念不一定只适用于儿童或线下情况。一些网站在界面的一些小角落里隐藏着小惊喜。虽然它们在功能上没有实际作用，但可以有效地增加乐趣和愉悦，甚至可以引起用户的好奇心，增强他们的探索欲望。GoogleMoon刚刚发布时，有一个彩蛋。当您放大直到非常接近月球表面时，您会看到地图渲染得像奶酪。SupereightStudio在SupereightStudio的“关于我们”页面有一个隐藏的彩蛋，即使你知道它在哪里，也不一定能看清楚——点击MattHamm照片的那一刻，照片会切换到The星球大战中的机器人R2D2只是一眨眼的功夫（点击鼠标右键会持久化）。它根本没有任何功能，但是一旦你找到这个小彩蛋，你就会觉得这个平淡无奇的介绍页面背后有一个真正的人，即使这只是一个无害的小玩笑。iBooks中的隐藏标志在iBooks的图书馆界面中，如果你继续下拉整个书架，你会看到搜索栏上方隐藏着一个Apple标志。翻开这篇帖子，你会发现人们刚刚发现这个小细节时是如何愉快地讨论起来的；虽然在功能上没有什么实际意义，但是这个细节上的用心显然可以给产品收获带来另一个维度。9.隐身隐身不仅仅适用于超级英雄。俗话说，好的设计要像空气；只有糟糕的设计才会被注意到。这句话不仅仅针对界面设计，更针对整个产品的交互体验。IAWriter不同于其他流行的文字处理软件。IAWriter的界面极其简洁，让用户可以完全进入工作状态，专注于文字处理本身，而不会被任何不必要的功能和界面元素打扰。.#p#10。使用上下文和多设备体验近年来，移动设备的爆炸式增长迫使设计师越来越多地考虑用户使用产品时的设备环境。多设备生态系统的情况是一个挑战，但也是我们创造跨平台愉快体验的机会。Facebook的移动应用程序Facebook的网页和移动应用程序配合得很好，使用户可以随时随地通过不同的设备保持信息同步。我个人觉得他们的移动应用比网页能给用户带来更专注的产品体验。RdioRdio桌面端和移动端的体验模式比较相似，但在功能和UI设计上，针对不同的平台环境做了非常用心的处理，让用户在不同的设备和不同的使用场景下都能得到最好的体验。值得一提的是，当手机应用处于无网络连接状态时，唯一的警告方式就是将原本蓝色的导航栏变成灰色，通俗易懂，没有任何模态突兀的元素。时代杂志的响应式网站时代杂志在线是响应式设计的最佳范例之一。通过这项技术，他们的网站可以在导航和内容布局方面针对不同尺寸的设备进行相应调整，从而使单个网站在不同平台上实现最佳体验。相关阅读：什么是响应式网页设计？详细总结响应式网站的产品需求和设计流程对于任何界面来说，保证产品的功能性和易用性是最重要的前提；在此基础上，情感层面的设计原则和技巧，让用户在体验过程中更加愉悦，是推动产品走向成功的重要手段。本文介绍的一些方法非常容易理解和实施，而另一些则需要结合实际产品的特点精心规划和实施；同时希望本文中的例子能给大家带来一些更直观的思路。启发。英文原文：10WaysToAddDelightToYourWebsiteorApp翻译链接：http://beforweb.com/node/179
