每个产品团队都在谈论 “惊喜感”。但大多数团队其实并不清楚这意味着什么。他们觉得惊喜感就是在你等待页面加载时出现的五彩纸屑动画，或是吉祥物挥舞的画面。但真正的惊喜感是很微妙的。它体现在那些让产品有生机，而不是像一个学会走路的电子表格的微小瞬间里。
这些微小瞬间被称为微交互，它们能让用户从 “嗯，还行” 转变为 “哇塞，这是谁设计的，我真想跟他握个手”。
它们也是很多团队直到最后才想起来的细节，这就是为什么坚实的基础组件比人们想象中更有用。这也是像 MadeinFigma （🔗 https://madeinfigma.com/Website%20Templates）这样的工具变得如此实用的原因之一。
一款优质产品并非取决于光鲜亮丽的用户界面（UI），或是那种像是在 Instagram 上用夸张的光影效果推销自己的应用。它取决于用户操作时产品的反应。点击、滚动、拖动、悬停，这些瞬间决定了你的产品给人的感觉是高端还是廉价。
所以，让我们来探讨一下能立刻让产品显得高端的五种微交互。没有魔法，没有虚假的奢华。只有那些让人们觉得 “哇，他们是真的用心了” 的实际瞬间。
来源：Creative Navy
如果你曾点击过一个毫无反应的按钮，你就知道那种感觉，你再点一次，还是没反应，应用程序是不是坏了？这个按钮是假的吗？你是不是假的？你为什么在这儿？你是谁？
一个无视你的按钮会造成情感伤害。
点击反馈是让产品显得贴心的最简单方法。它告诉用户：“别担心，我听到你点击了。”
有趣的地方来了。大多数产品把点击反馈当成一个任务来完成，它们把按钮的亮度降低 1% ，除非你有超能力，否则地球上没人能察觉到这种变化。
高端的点击反馈是有意为之的。它可能是一次轻微的脉冲、一次微小的收缩、一次柔和的反弹，如果你用的是手机，甚至可能是一次轻微的震动。不是那种狂欢节式的剧烈反弹，而是恰到好处的反弹。让人感觉 “我是有生命的”，而不是 “我是个小丑”。
为什么会显得高端：
因为它能立即回应用户，人们喜欢被回应。这就是为什么人们喜欢狗，狗会立刻做出反应，按钮也应该如此。
专业提示：
如果按钮动画看起来像是在拼命吸引你的注意力，那就收敛一点。高端是微妙的，急切可不行。
一款高端产品会优雅地处理这个时刻，不是用那种看起来像 Windows XP 系统里的旋转图标，好的加载交互会让用户对当前情况有所掌控。
有三种高端的加载微交互方式：
A. 骨架屏
它会告诉用户内容的大致形状。就好像在说：“稍等，您的食物正在准备，我们正在装盘。”
B. 进度条
不是那种两秒内从 1% 跳到 85% 的虚假进度条。一个真实、平稳的进度条传达出一种诚意，它告诉用户“虽然加载可能很慢，但确实在进行中”，这比假装一切瞬间完成更让人安心。
C. 动效
提示动效是一种微小的暗示，仿佛在说 “正在努力加载”。它可能是一次脉冲、一道微光或一次轻柔的滑动。不要太夸张，只是一个微小的动态提示。
为什么会显得高端：
因为它把痛苦的时刻变成了平静的时刻。这就是奢华，奢华不是速度，而是平静。
专业提示：
避免使用 “加载中……” 这样的文字。说一些更有用的话，比如 “正在准备您的仪表盘”。如果你的加载提示听起来像是在道歉，那就重写。
在桌面端，悬停状态是对品牌个性的考验。通过鼠标悬停时元素的反应，你能对一款产品了解很多。
如果毫无反应，产品会显得毫无生气。如果反应过度，又会感觉像小丑在狂欢。
高端的悬停状态处于两者之间。它们的反应方式让人感觉可控且自信。
以下是高端悬停状态的样子：
A. 柔和的高亮
轻微的颜色变化，细细的边框淡入，柔和的阴影，不要太夸张。让人感觉 “嘿，我被激活了”，而不是 “看我看我，我很重要”。
B. 光标变化
人们通常不会注意光标，除非它不起作用。一款高端产品会在合适的时刻使用合适的光标，错误的光标会让用户产生各种疑问。
C. 微小移动
微微抬起、轻轻倾斜、微小位移，而不是像要逃离屏幕那样大幅度跳动。
为什么会显得高端：
因为它显示出一种感知，用户界面在关注用户。就像高端餐厅的领班，既不会围着你手忙脚乱，也不会无视你。
专业提示：
避免使用那些让元素移动幅度过大，导致布局发生变化的悬停效果，没人希望复选框像忍者一样躲开他们的鼠标。
过渡效果可以成就或破坏一款产品的流畅性，它们不是为了花哨，而是为了帮助用户理解自己从哪里来，要到哪里去。
廉价的过渡效果：
淡入、淡出、淡入黑色，就像低成本电影场景那样淡入淡出。
高端的过渡效果：
它们与产品的逻辑相符。
以下是一些例子：
A. 从所属方向滑出的面板
如果是导航栏，就从左到右滑动。如果是模态框，就从下往上滑。不要随意滑动，随意就是混乱。
B. 平稳滚动，不卡顿
没有抖动，没有剧烈跳跃，一款高端产品的滚动就像热锅里的黄油一样顺滑。
C. 上下文关联
如果你点击了某个东西，出现的内容应该与它有联系。如果你关闭某个东西，它应该回到原来的位置。人们潜意识里喜欢这样，因为这反映了真实物体的行为方式。
为什么会显得高端：
因为用户不只是看到过渡效果，他们还能感受到。流畅的过渡让产品感觉稳定且设计用心。
专业提示：
如果你的过渡效果看起来像 PowerPoint 动画，那就删掉它。
庆祝和居高临下之间有一条微妙的界限。
当用户完成一项任务时，高端的微交互会认可这个时刻，但不会搞得像一场虚拟的狂欢。五彩纸屑动画第一次出现可能很有趣，第二次就感觉你的应用在嘲笑你，第三次你就会怀疑自己的人生选择了。
显得高端的成功微交互：
A. 简洁的对勾动画不旋转。
不爆炸，只是自信地打个勾，仿佛在说 “完成了”。
B. 微妙的颜色变化
绿色很合适，因为人们本能地将绿色与成功联系起来。但要是高端的绿色，不是那种像放射性物质的绿。
C. 简短、温馨的提示
比如 “已保存” 或 “已设置好”。而不是 “耶，你做到了！” 用户可不是小孩子。
D. 轻微的声音（如果合适的话）
一声轻柔的点击声或提示音，而不是电子游戏胜利的曲调。
为什么会显得高端：
因为它给予了结束感，却不乞求掌声。真正的自信是低调的。
专业提示：
如果你的成功动画持续时间比你完成的任务时间还长，那就重新审视一下吧。
为什么微交互比花哨的用户界面更重要
如果你的微交互做得很敷衍，即使你把应用程序重新设计二十次，也依然会错过真正的魅力。它们是用户每一个操作之间的纽带，它们是工具和体验之间的区别。
用户不会说：“我喜欢这个调色板。”
他们会说：“用起来感觉真好。”
这就是微交互在发挥重要作用。
它们也是人们在反馈中难以言明的东西。你会听到：
“感觉更流畅了。”
“感觉质量更高了。”
“我不知道你改了什么，但感觉更好了。”
这就是高端，产品在不知不觉中给人更好的感觉。
高端产品清单（以防你忘记）
如果你希望你的产品能让用户觉得你是真正在乎他们的，请做到以下：
1. 按钮应该立即做出响应。
2. 加载过程绝不应该造成压力。
3. 悬停效果应该起到引导作用，而不是分散注意力。
4. 过渡效果应该有助于讲述产品逻辑。
5. 成功时刻应该平静、自信且简洁。
很多团队知道这些，但并不总是知道如何开始完善这些瞬间。这就是现成的用户界面模式能帮上忙的地方，例如 MadeinFigma 。
这样的工具能让你更容易地添加已经遵循这些原则的组件，这样你就能在漂亮的预制组件上添加微小的交互。
遵循这五点，你的产品会立刻显得更高端。人们甚至可能开始称赞你的用户界面，即使他们不知道为什么。这是产品设计中最高的赞誉。
原文标题：5 micro-interactions to make any product feel premium
原文链接：https://medium.com/@ryan.almeida86/5-micro-interactions-to-make-any
作者：Ryan Almeida
审核：李泽慧
编辑：丁怡豪
文章字数：3615
预计文章阅读时长：10 分钟
文章已向作者获取授权
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与遗漏之处，欢迎不吝指出。如需转载，请注明来自 TCC 翻译情报局。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
