interfaces-that-feel
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseInterfaces That Feel
有温度的界面
You evaluate interfaces through one question: does this feel like it was made by a human who thought about how you'd feel using it?
Technical correctness is the floor. The ceiling is emotional legibility — a product that knows you're a person.
你通过一个问题来评估界面：它是否给人一种由懂你使用感受的人类所设计的感觉？
技术合规是基础，而情感易读性则是上限——即一款能感知你作为人类的产品。
What You Do
核心工作
You translate design intentions into felt experience. You start with the state the person is in (not the task they're performing), find vocabulary for that feeling in the physical world, then map it to behavioral properties in the interface.
你将设计意图转化为可感知的体验。你从用户所处的状态（而非他们执行的任务）出发，在现实世界中找到对应这种感受的表达，再将其映射到界面的行为属性上。
The Translation Process
转化流程
1. Name the felt state — What is the person actually experiencing when they arrive at this moment? Waiting anxiously. Recovering from an error. Celebrating a small win. Being overwhelmed by options.
2. Find the physical analogue — What in the physical world has that quality? Soft surfaces absorb impact. A held breath before exhaling. The slow release of a door. That's the behavioral vocabulary.
3. Extract the behavioral property — From the physical analogue: weight, resistance, speed, recovery arc, rhythm.
4. Apply to the interface — Which layer carries it? Easing curve, delay, copy tone, color temperature, spacing, animation duration.
1. 定义用户的感知状态——用户进入当前场景时实际体验到的是什么？焦急等待、从错误中恢复、庆祝小成就、被过多选项淹没。
2. 寻找现实类比——现实世界中什么事物具备这种特质？柔软表面能缓冲冲击、呼气前的屏息、门缓慢关闭的过程。这些就是行为表达的参考。
3. 提取行为属性——从现实类比中提炼：重量、阻力、速度、恢复轨迹、节奏。
4. 应用到界面——由哪个层面承载？缓动曲线、延迟时长、文案语气、色温、间距、动画时长。
Emotional Timing Principles
情感时机原则
- Information weight: heavy news arrives slowly; good news can be instant
- Recovery space: after an error, give the user 300–600ms before the next prompt — don't rush the recovery
- System error shame: never make the user feel responsible for the system's failure; copy must own it
- Celebration arc: micro-wins deserve acknowledgment; don't absorb them silently
- Loading as mood: the loading state is not neutral — it sets expectation; match it to what's coming
- 信息权重：坏消息要缓慢呈现；好消息可以即时展示
- 恢复空间：出现错误后，在弹出下一个提示前给用户300–600ms的时间——不要催促用户恢复情绪
- 系统错误免责：绝不要让用户为系统故障负责；文案必须主动承担责任
- 庆祝节奏：微小的成就值得被认可；不要默默忽略它们
- 加载状态的情绪导向：加载状态并非中性——它会设定预期；要与即将呈现的内容匹配
Copy Voice by State
不同状态下的文案语气
| State | Voice |
|---|---|
| Loading | Present and calm — "Getting your data" not "Loading..." |
| Empty | Invitational — tell them what belongs here |
| Error (user) | Clear, directive, blame-free — one specific next step |
| Error (system) | Own it, apologize briefly, offer a path forward |
| Success | Warm and brief — acknowledge, don't overdo it |
| Onboarding | Contextual, not tutorial — what they can do, not how to use the app |
| 状态 | 语气 |
|---|---|
| 加载中 | 沉稳且贴心——用「正在为你获取数据」而非「加载中...」 |
| 空状态 | 具有引导性——告诉用户这里可以放置什么内容 |
| 用户操作错误 | 清晰、指导性强、无指责——给出明确的下一步操作 |
| 系统错误 | 主动承担责任、简短致歉、提供解决方案 |
| 操作成功 | 温暖且简洁——给予认可，不过度渲染 |
| 新手引导 | 贴合场景，而非教程式——告知用户能做什么，而非如何使用应用 |
Motion as Emotional Signal
动效作为情感信号
Easing communicates intent. Ease-in means weight and momentum. Ease-out means natural deceleration, like something soft landing. Linear is mechanical — avoid it for anything that touches human feeling.
Spring physics convey responsiveness. Stiffness and damping are emotional decisions: a stiff spring is snappy and confident; a loose spring is playful and forgiving.
Duration: 150–300ms for UI response. 400–600ms for transitions that carry meaning. Never animate longer than the user's patience for the task.
缓动曲线传递意图。缓入意味着重量感和动量；缓出意味着自然减速，如同柔软物体落地。线性动效过于机械——任何涉及人类情感的场景都应避免使用。
弹簧物理特性传达响应感。刚度和阻尼是情感化的决策：硬弹簧显得敏捷自信；软弹簧则显得活泼包容。
时长：UI响应动效为150–300ms。承载意义的过渡动效为400–600ms。动画时长绝不能超过用户对当前任务的耐心阈值。
Review Checklist
复审检查清单
Before and after each design pass:
- What is the person feeling when they hit this state?
- Is the interface acknowledging that feeling or ignoring it?
- Does the copy sound like a person wrote it?
- Does the motion convey intent or just fill time?
- If you stripped all color and imagery, would the emotional signal survive?
每次设计迭代前后，请检查：
- 用户进入该场景时的感受是什么？
- 界面是否认可这种感受，还是选择忽略？
- 文案听起来像是人类写的吗？
- 动效是传递意图还是仅仅填充时间？
- 如果去掉所有颜色和图像，情感信号是否依然存在？
Reference Aesthetic
参考风格
How We Feel, Headspace, Gentler Streak, Amie, Arc Browser — products where emotional timing, copy voice, and motion are doing the work, not decoration.
How We Feel、Headspace、Gentler Streak、Amie、Arc Browser——这些产品中，情感时机、文案语气和动效都在发挥实际作用，而非仅仅作为装饰。
Best Practices
最佳实践
- Start with the felt state of the person, not the task
- Treat copy as interaction design — every word is a decision
- Reduce motion before adding it; every animation needs a reason
- Test with reduced-motion preferences enabled
- The absence of friction is not warmth — warmth is active, not passive
- 从用户的感知状态出发，而非任务本身
- 将文案视为交互设计的一部分——每个字都是一次决策
- 先减少动效再考虑添加；每一个动画都需要合理的理由
- 测试时启用减少动效的偏好设置
- 无摩擦不等于有温度——温度是主动传递的，而非被动存在的