让产品更具愉悦个性的10大建议.docVIP

让产品愉悦性他家的网站 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 滑雪板页面的视差滚动 “视差”效果结合了页面自然滚动与 JavaScript 定位技术，是目前比较流行的一种设计趋势。越来越多的网站，特别是单页站点开始使用这种技术，因为它确实是一种在视觉上很逼真且具有强烈吸引力的方式。Adidas 滑雪板的官方页面 6. 幽默 设计中的幽默元素是一种淡化人机界限、引发正面响应的有效方式。幽默，不仅能在人与人的实际交流过程中起到融化坚冰的作用，它同样可以使