强化设计 (harden)

强化设计（harden）

概述

harden 是提升界面健壮性和容错能力的技能。它的核心是：让界面在各种极端情况下都能正常工作，给用户良好体验。

作为设计师/开发者，你可能遇到过：

“用户名太长界面乱了”
“没有网络不知道怎么办”
“不同语言显示错位”

harden 就是解决这些的。

为什么需要强化

1. 真实环境复杂

用户会遇到：
- 网络不稳定
- 输入各种奇怪内容
- 使用不同语言
- 屏幕大小不一
- 特殊情况（空、超长、特殊字符）

强化 = 应对这些情况

2. 细节体现专业

普通界面：
- 正常情况能用
- 特殊情况崩溃

强化界面：
- 正常情况好用
- 特殊情况优雅处理

强化 = 专业体现

3. 减少客服负担

问题少 → 投诉少 → 成本低

强化前：
- 用户报错
- 客服处理
- 开发修复

强化后：
- 优雅处理
- 用户自助
- 无需干预

强化维度

1. 错误处理

表单验证：

✅ 正确：
- 即时验证
- 明确错误信息
- 指出具体问题

❌ 错误：
- 提交后才验证
- 只说"格式错误"
- 不知道哪里错

网络错误：

✅ 正确：
- 明确提示网络问题
- 提供重试按钮
- 缓存之前数据

❌ 错误：
- 显示系统错误代码
- 没有任何提示
- 不让重试

系统错误：

✅ 正确：
- 友好的错误页面
- 说明出了什么问题
- 提供解决方案

❌ 错误：
- 显示技术错误
- 用户看不懂
- 不知道怎么办

2. 国际化（i18n）

文字长度：

不同语言文字长度差异大：

English: "Submit"
Deutsch: "Absenden"
Français: "Soumettre"

设计要：
- 按钮够宽
- 不固定宽度
- 测试多语言

文字方向：

从右到左语言（RTL）：
- 阿拉伯语
- 希伯来语

设计要：
- 镜像布局
- 图标方向
- 对齐方式

格式：

日期格式：
- 美国：03/23/2026
- 欧洲：23/03/2026

数字格式：
- 美国：1,000.00
- 欧洲：1.000,00

3. 文本溢出

长文字：

✅ 正确：
- 截断 + 省略号
- 悬停显示全文
- 换行处理

❌ 错误：
- 溢出容器
- 布局错乱
- 无法阅读

长文件名：

✅ 正确：
- 截断中间
- 悬停显示完整
- 提示可以下载

长用户名：

✅ 正确：
- 限制最大长度
- 显示缩略 + @
- 不破坏布局

4. 边界情况

空状态：

没有数据时：
- 说明当前状态
- 提供行动按钮
- 给示例内容

加载状态：

数据加载中：
- 显示加载动画
- 显示进度
- 不要让用户等待

部分数据：

数据不完整：
- 显示已有数据
- 说明加载情况
- 不阻塞操作

5. 输入处理

特殊字符：

✅ 正确：
- 允许 emoji
- 处理特殊符号
- 过滤危险输入

❌ 错误：
- 突然崩溃
- 显示乱码
- 安全漏洞

粘贴处理：

✅ 正确：
- 处理粘贴内容
- 自动格式化
- 去除不必要字符

强化检查点

文本

长文字截断处理？
不同语言适配？
emoji 正常显示？

错误

表单验证友好？
网络错误有提示？
系统错误可恢复？

边界

空状态友好？
加载状态清晰？
离线状态处理？

安全

输入过滤？
XSS 防护？
特殊字符处理？

实践案例

案例 1：用户名处理

问题：用户输入超长用户名

处理：

显示：
- 最大 20 字符
- 超过显示 "user_name..."

存储：
- 完整存储
- 显示截断

交互：
- 悬停显示完整
- 设置页可编辑

案例 2：网络离线

问题：用户离线时使用

处理：

检测：
- 监听网络状态
- 实时提示

离线：
- 显示离线提示
- 缓存可用数据
- 禁用需要网络的操作

恢复：
- 自动重连
- 同步离线数据

案例 3：多语言表单

问题：德语表单太长

处理：

布局：
- 不固定按钮宽度
- 测试最长翻译
- 响应式适配

验证：
- 多语言错误消息
- 本地化格式
- RTL 支持

速查卡片

强化维度

错误处理
国际化
文本溢出
边界情况

错误处理

即时验证
友好提示
可恢复

边界情况

空状态
加载状态
离线状态

检查

长文本？
多语言？
错误友好？

与其他技能

polish - 打磨细节
optimize - 性能优化
adapt - 响应式适配

查看源文件: GitHub原始文件