design-justice

设计正义：以公平为核心的数字设计

为边缘群体设计，让所有人受益。如果某种设计适用于没有稳定手机、居住不稳定、有创伤经历且数字素养较低的人 → 它就能更好地服务所有人。

理念

设计正义（Sasha Costanza-Chock）+ 创伤知情设计 + 数字公平设计

核心原则：设计决策影响最大的人应成为设计流程的核心，而不应被视为边缘案例。

适用场景

✅ 适用于：

• 服务于康复和重返社会人群的应用
• 政府／公民科技应用
• 面向弱势群体的医疗保健门户
• 住房／福利申请
• 法律援助和法院自助工具
• 非营利组织服务平台
• 任何在共享／公共设备上使用的应用

❌ 不适用于：

• 企业级 B2B SaaS（约束条件不同）
• 营销漏斗优化
• 游戏化／最大化用户互动
• 社交媒体功能
• 一般性的“让它更美观”用户体验需求

---

决策树：适用哪种模式？

User has unstable phone number?
├── YES → See: Authentication Without Stable Phones
└── NO → Standard auth OK

User may lose internet mid-task?
├── YES → See: Offline-First Design
└── NO → Standard web patterns OK

User may be on shared/public device?
├── YES → See: Shared Device Privacy
└── NO → Standard session management OK

Form is complex or emotionally difficult?
├── YES → See: Trauma-Informed Forms
└── NO → Standard form patterns OK

User has history of system trauma?
├── YES → Apply ALL trauma-informed patterns
└── UNKNOWN → Assume YES for civic/legal/benefits apps

---

模式 1：没有稳定手机时的身份验证

反模式：以手机为先的身份验证

新手想法：“人人都有手机，短信双重身份验证很安全”

现实情况：

• 曾被监禁的人中，25% 无法稳定使用手机
• 居住不稳定期间，电话号码经常变更
• 预付费手机会因欠费而停机
• 短信双重身份验证会让人无法使用关键服务

时间线：

• 2020 年以前：短信双重身份验证被视为最佳实践
• 2020 年起：Code for America 记录了访问障碍
• 2024 年起：电子邮件优先 + 备用码正逐渐成为公民科技的标准

正确模式

需求	模式	实现方式
主要身份验证	电子邮件优先	电子邮件作为标识符，手机号为可选项
双重身份验证	多种方式	电子邮件或备用码或个案工作者验证
账户恢复	可打印的代码	可抄写的一次性代码
绕过验证	可信赖的中介	个案经理通过组织电子邮件验证
必需访问	无需注册模式	无需账户即可使用核心功能

实现检查清单

□ Email is primary identifier (phone optional)
□ Backup codes can be printed/written
□ Case worker recovery pathway exists
□ Core features work without login
□ Sessions are not device-locked
□ Phone number changes don't lock accounts
□ "Forgot password" has non-SMS option

---

模式 2：离线优先／间歇性访问

反模式：假设始终在线

新手想法：“只要显示‘无连接’错误即可”

现实情况：

• 公共图书馆的电脑有使用时限
• 移动数据会在月中用完
• 收容所的 Wi-Fi 不稳定
• 用户可能只有一次机会完成表单

正确模式

需求	模式	实现方式
数据持久化	本地优先	立即保存到 localStorage/IndexedDB
表单状态	自动保存	每次字段变更时保存，而非仅在提交时保存
提交	后台同步	将操作加入队列，连接恢复后再同步
UI 反馈	乐观更新	立即更新 UI，在后台同步
进度	随处续办	让用户能从上次离开的确切位置继续
状态	显示同步状态	“已在本地保存”／“正在同步……”／“已是最新”
降级	离线时平稳运行	无网络时仍可使用核心功能

实现检查清单

□ PWA with service worker caching
□ All form data saves to localStorage on every change
□ Clear sync status indicator visible
□ Offline mode tested (airplane mode)
□ Background sync when connection returns
□ No data loss on connection drop (verified)
□ Multi-step flows don't timeout
□ Minimal asset downloads (text-first views available)

代码模式：自动保存钩子

// Save form state on every change
function useAutoSave(key: string, data: any) {
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify({
      data,
      savedAt: new Date().toISOString(),
      synced: false
    }));
  }, [key, data]);

  // Return saved data on mount
  return useMemo(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved).data : null;
  }, [key]);
}

---

模式 3：共享／公共设备隐私

反模式：持久会话

新手想法：“记住我能改善用户体验”

现实情况：

• 图书馆电脑由多人使用
• 收容所的电脑是共享的
• 前一位用户的数据可见 = 安全风险
• 家庭暴力幸存者需要隐私

正确模式

需求	模式	实现方式
默认状态	隐私模式开启	不自动保存敏感信息
退出登录	显眼的按钮	确保按钮一目了然，而非藏在菜单中
超时	警告 + 自动退出登录	“还剩 5 分钟。继续吗？”
表单	默认关闭自动填充	对敏感字段禁用浏览器自动填充
模式切换	“正在使用公共电脑？”	一键启用额外隐私模式
Cookie	仅会话选项	关闭浏览器时清除

实施检查清单

□ "Remember me" is UNCHECKED by default
□ Logout button visible on every page
□ Session timeout with save-progress warning
□ Sensitive fields have autocomplete="off"
□ Incognito mode suggested in UI for public computers
□ No cached personal data after logout
□ "Working on a shared computer?" toggle available

---

模式 4：创伤知情表单与流程

反模式：官僚式盘问

新手的想法：“为了提高效率，一开始就收集所有信息”

现实：

• 冗长的表单会让人不堪重负，进而放弃填写
• 红色错误文字会引发羞耻感
• 法律术语会造成焦虑
• 突如其来的要求让人感觉像是陷阱
• “讲述你的故事”文本框会带来巨大的认知负担

正确模式

需求	模式	实施方式
长度	分段显示进度	拆分成简短的部分，并逐一保存
语言	通俗易懂的语言	阅读难度为 6 至 8 年级
复杂度	每页一个问题	适用于困难话题
进度	清晰的指示	始终显示“第 2 步，共 5 步”
验证	宽容的输入方式	自动格式化，接受不同写法
默认值	智能预填	预填可推断的信息
帮助	就地显示，不要隐藏	帮助文本应始终可见，不要放在模态框中
流程	可跳过并返回	绝不要强制用户完成可选字段

语气指南

✅ 应使用：

• 以人为本的措辞：“有定罪记录的人”
• 明确的时间安排：“我们会在 3 至 5 天内审核”
• 表示理解：“这个流程可能会让人感到沮丧”
• 肯定性的表达：“你正在取得进展”

❌ 应避免：

• 带有羞辱意味的措辞：“你的犯罪过往……”
• 模糊的时间安排：“我们会再联系你”
• 责备：“你没有完成……”
• 假定有罪的措辞：“你的罪行……”

颜色与视觉指南

✅ Calm palette:
- Success: Soft green (#4a9d9e), not aggressive lime
- Warning: Warm amber (#d4a03a), not alarming yellow
- Error: Muted terracotta (#c97a5d), not aggressive red
- Background: Cream/warm neutrals

❌ Avoid:
- Aggressive red for errors
- High-contrast warning colors
- Flashing or pulsing elements
- Visual "alarm" states

实施检查清单

□ No form longer than 5 fields per page
□ Progress indicator on all multi-step flows
□ Help text inline, not in tooltips/modals
□ Forgiving validation (formats automatically)
□ No required fields that aren't truly required
□ "Skip for now" on optional sections
□ Calm color palette (no aggressive reds)
□ Person-first language throughout
□ Clear "what happens next" on every screen

---

模式 5：针对撤销定罪记录／清除记录

反模式：假定用户了解相关知识

新手的想法：“他们知道自己的案件编号”

现实：

• 人们不记得多年前的案件编号
• 法律术语令人困惑
• 县与司法管辖区的边界并不清晰
• 相关文件可能无法获取

正确模式

需求	模式	实施方式
资格	先进行资格检查	在收集信息前，先显示用户是否符合资格
文件	提供多种上传方式	电子邮件、传真、邮寄、亲自递交、拍照
地点	自动检测	不要让用户自行判断司法管辖区
记录	查询工具	帮助用户查找自己的案件编号
术语	通俗易懂的语言	定义每个法律术语
时间安排	明确说明预期	“大多数案件需要 60 至 90 天”
费用	突出显示减免费用选项	默认流程应为申请费用减免

实施检查清单

□ Eligibility checker before signup/info collection
□ Case number lookup tool or "I don't know" option
□ County auto-detected from address
□ Document upload alternatives (not just scan)
□ Legal terms have inline definitions
□ Expected timeline stated clearly
□ Fee waiver is default, not hidden option
□ "Not eligible" includes explanation WHY

---

Code for America 原则

公民科技领域的黄金标准：

1. 自动办理优于申请办理 - 不要要求有记录的人主动采取行动
2. 默认免费 - 自动减免费用，而不是要求用户申请
3. 由政府完成工作 - 不要给个人增加负担
4. 与受影响的人共同设计 - 不要只对他们进行用户研究
5. 假设数据存在缺漏 - 围绕不完整记录进行设计
6. 后端自动化 - 尽量减少员工耗时，避免人工瓶颈

---

快速审核清单

针对任何公民服务／法律／福利申请进行检查：

AUTHENTICATION
□ Can user sign up with just email?
□ Is there a non-SMS account recovery option?
□ Do core features work without login?

OFFLINE/INTERMITTENT
□ Does form data survive connection loss?
□ Is there visible "saved" indicator?
□ Can user resume exactly where they left off?

SHARED DEVICES
□ Is "remember me" unchecked by default?
□ Is logout button prominent?
□ Does session timeout with warning?

FORMS
□ Is reading level ≤8th grade?
□ Are there ≤5 fields per page?
□ Is help text inline (not hidden)?
□ Are required fields truly required?

TONE
□ Is language person-first?
□ Are timelines explicit?
□ Is error messaging non-blaming?
□ Are colors calm (no aggressive red)?

LEGAL/EXPUNGEMENT SPECIFIC
□ Is eligibility checked first?
□ Are fee waivers prominent?
□ Is "I don't know my case number" handled?

---

参考资料

• /references/authentication-patterns.md - 详细的身份验证实施指南
• /references/offline-first-patterns.md - PWA 与同步模式
• /references/trauma-informed-language.md - 语气与措辞指南
• /references/code-for-america-learnings.md - CfA 案例研究

推荐阅读

• Design Justice Network 原则
• Code for America 的设计原则
• C4 Innovations 的公平工作（无家可归者响应系统）
• Innovation Unit 的露宿者数字服务可及性项目
• Sasha Costanza-Chock：《Design Justice》（2020）