UI 设计风格精修演示 / Inclusive Design

包容设计Inclusive Design

为永久性、暂时性与情境性的障碍而设计。它不是为「少数人」另开小灶，而是承认每个人在不同时刻，都需要同一界面的不同使用方式——看清、听清、单手、简化，都只是同一次挂号的不同走法。

演示主题 / 康宁社区卫生服务中心预约挂号 / 一个界面，四种走法，一条听觉路径 / 理念参考微软包容设计工具箱的永久、暂时、情境三分类

障碍是一个谱系，不是少数人的标签

微软包容设计工具箱把障碍分为三类：永久性长期存在，暂时性伴随伤病，情境性来自环境。人行道坡道最初为轮椅使用者而设，如今拖行李箱的人、推婴儿车的人、送货的骑手都在用它——为谱系一端做的设计，会服务整条谱系，这正是包容设计的杠杆。

障碍谱系矩阵：看见、听见、操作、说出四行，对应永久性、暂时性、情境性三列
能力	永久性	暂时性	情境性
看见	视网膜色素变性，视野逐渐收窄	眼科术后散瞳，畏光模糊一天	正午强光下，屏幕反光如镜
听见	感音神经性听障	中耳炎引起的听力下降	地铁隧道里的持续轰鸣
操作	单侧上肢缺失	手腕骨折打着石膏	一只手抱着熟睡的婴儿
说出	构音障碍	急性喉炎暂时失声	安静考场里不便出声

同一列的处境，需要同一种设计回应。所以下面演示的四种模式，不对应「残障用户」，而对应整条谱系上任何时刻的任何人。

四位真实处境的使用者

他们不是「无障碍模式的用户」，只是四种常见处境。点每张卡底部的按钮，下方演示区会立刻切到对应形态，并自动滚动过去。

情境性 / 单手操作

陈默 / 34 岁

单手抱着婴儿的家长

周三清晨，她一手抱着刚睡着的女儿站在社区中心门口，只能用拇指在晃动的屏幕上完成全部预约操作。

不小于 44 像素的触控目标
拇指可达的底部操作条
一步一题，不用长页面找

情境性 / 强光环境

老周 / 58 岁

正午强光下的道路养护工

午休时他坐在路边花坛上扫码预约体检，阳光直射，屏幕像一面镜子，浅灰字几乎全部消失。

黑底白字的 AAA 级对比
加粗边框与焦点环
状态不靠颜色单独区分

永久性 / 年龄相关

何阿姨 / 67 岁

不戴老花镜看不清字的长者

她不戴镜时手机上的字像蒙了层雾，戴上又容易眼花，习惯把字号调到最大再慢慢按。

整体放大的字号与行距
同样放大的可点区域
清晰分步，不赶时间

永久性 / 视觉通道之外

林川 / 29 岁

依赖读屏软件的视障用户

他是推拿师，用读屏软件「听」完整个页面，靠语义结构与自动播报完成预约，从不看布局长什么样。

语义分组与完整标签
状态变化主动播报
合理的焦点顺序

一次挂号，四种走法

这是康宁社区卫生服务中心的真实预约流程。用下面的模式切换，或点上方人物卡里的按钮，同一界面会以不同形态工作——切换真实生效，可以完整走完预约，不是截图。

标准视窗 / 基线形态：全部信息平铺，适合双手、坐姿与良好光线下的短暂操作。

康宁社区卫生服务中心 / 预约挂号

号源图例：✓ 充足 / ！紧张 / ✕ 约满

尚未选择，请从第一步开始。

第一步 / 选择科室

第二步 / 选择日期与时段

日期

时段

第三步 / 确认并提交

科室: 未选择
时间: 未选择
报到方式: 现场分诊台扫码报到

选中与提交在支持振动的设备上伴随 10 毫秒轻震 / 全部状态变化同步写入读屏实时播报区

听觉路径 / 不用眼睛完成同一次挂号

读屏用户沿语义结构线性前进：分组、标签、状态被逐一播报。左下是本次演示的读屏文稿节选，右侧按钮可以用浏览器原生语音真实朗读，不依赖任何视觉通道。

读屏播报文稿（节选）

「康宁社区卫生服务中心预约挂号分组」
「第一步选择科室分组共 5 个选项」
「康复理疗切换按钮未按下」
按下后：「康复理疗已按下」
「状态已选康复理疗尚未选择日期」
「10月10日周五切换按钮已按下」
「09:30 仅余 3 个紧张切换按钮未按下」
「10:30 约满按钮已禁用」
「确认挂号按钮」
「预约成功预约号 KN-2026-4831」

真实语音出口

演示区里的「语音播报当前选择」与这里的整段朗读，都调用浏览器内置的语音合成接口，中文语音即时可用；焦点顺序、分组与状态播报则交给完整的语义结构。

触觉是第三条通道：支持振动接口的手机上，选中轻震 10 毫秒，提交成功以短促双震确认，无需看也不必听。

旁白 / 每个设计决定背后的为什么

包容设计不是清单式的合规，而是一组可以解释的决定。以下六条，每一条都能在上面的演示里找到对应。

触控目标不小于 44 像素

抱着婴儿的拇指在晃动中落点会偏移，目标越大误触越少。这是单手路径的物理前提，也顺带方便了戴手套的人和手抖的长者。

选中态等于勾号加边框加文字

色觉障碍者约占男性的百分之八，任何状态都不单独依赖颜色传达。勾号、反色边框与文字三重编码，黑白打印也能读懂。

同一表单可拆成一步一题

信息不变，认知负荷被切小。单手用户获得线性路径，读屏用户获得可预期的顺序，注意力有限的人也不用长页面来回找。

状态变化写入实时播报区

选择结果主动推送，读屏用户不必来回搜索页面变化。看得见的人看到状态行，看不见的人听到同一句话，信息完全等价。

高对比按 AAA 7:1 以上校准

正午屏幕反光会让对比度损失过半，7:1 在强光下仍有冗余。黑底白字加粗边框，是这个损失模型下的安全余量。

全页只有一次入场动效

前庭功能敏感的用户，动画是负担而非装饰。一次克制的进场之后页面静止，系统级减少动态偏好还会把它彻底关掉。