Hoff NDS：Hoff Research 神经多样性设计系统规范

进行中的工作（WIP）：这份规范还在变化。

这是 Hoff NDS，我在 Hoff Research 的产品 中使用的设计系统，每个新项目我都会应用它，有时是悄悄地。每条规则背后的证据，在 面向神经多样性人群的设计系统那篇文章 里。这里只写规范本身。

目的与范围

这个系统的目的，是降低数字界面中的认知负荷、焦虑和错误，优先照顾神经多样性人群，同时让所有人受益。它覆盖三类限制：

• 永久性的，如低视力、阅读障碍和自闭症
• 暂时性的，如受伤、疲劳和药物影响
• 情境性的，如嘈杂环境、网络不好和压力

前提是：学习和决策发生在大脑里，而不是屏幕上。花在解读界面上的每一分力气，都是从真正的任务里拿走的。设计的作用，是降低阅读、导航和决策的成本。

它不是一个视觉主题，而是一套有依据的规则。每一节都写明规则、原因、服务的神经类型和背后的 UX 原则。规则里有数字时，数字是规范性的。

基础

认知负荷。ADHD 人群在高负荷下表现更差，反应时间波动更大。所以只保留服务于屏幕目标的内容。一个元素如果不能帮助完成任务，就会分散注意力。

好压力与坏压力。有一种紧张程度能帮助专注，也有一种会让人瘫痪。界面要吸收操作、寻找和犯错带来的压力，让人的紧张感用在内容上。

可预期性。布局、位置或名称的意外变化会打破心智模型、打断专注，对自闭症和 ADHD 人群代价更高。重要位置在各屏之间保持稳定，一个操作的名称从流程开始到结束保持不变，没有用户操作就不会有任何东西移动。

个性化是硬性要求。感官偏好在不同神经类型之间、以及同一类型内部都不一样。系统要求至少三套颜色主题（深色、浅色和高对比度）、三种文字大小，以及一个关闭动画的开关。这些控件放在明处，不埋在设置里。

复杂度守恒。有一个最低复杂度，去掉就会破坏功能。简化超过这个点，只会让一切更混乱。目标是去掉多余，而不是去掉功能。

设计师必须懂颜色，没错

决定颜色选择的是对比度，不是审美。正文目标是 7:1 或更高（AAA 级）。任何承载信息的文字，绝对下限是 4.5:1（AA 级）。

规则。整套配色都是低饱和度：不用霓虹色，不用鲜艳色，不用极端亮度。颜色从不作为唯一的信息载体。凡是用颜色表达的状态，都要配上文字、图标或形状。

原因。鲜艳的颜色和强烈的色彩对比会让自闭症、ADHD 和视觉压力人群感到不适和感官过载。ADHD 方面有证据表明颜色辨别能力下降，主要在蓝黄轴上；而红绿色盲是人群中最常见的色盲类型。两者都强化了"颜色不能作为唯一信号"的禁令。深色主题是默认值，因为很多使用发生在夜间，屏幕光越少干扰越小。

参考配色：

高对比度主题：黑色背景、白色文字、提亮的强调色和加粗的边框。每次修改 token，都用工具检查每一对颜色的对比度。弱化文本从不承载信息，只表示层级。

系统状态有固定语义：正向表示成功，注意表示错误和警告，强调色表示操作和选中。同一种颜色在另一个屏幕上绝不表示别的意思。

神经类型：低视力、色盲、Irlen 综合征与视觉压力、自闭症、ADHD。原则：一致连接性，以及美即好用效应，前提是美不能掩盖问题。

字体：别再花一整天找字体了

规则。使用人文主义无衬线字体，字母之间区分明显。正文 1rem 到 1.25rem，基准 16px，也就是 16 到 20px。行高 150% 到 170%。字母间距略微加大：正文 0.005em 到 0.02em，标签和说明等小字约 0.03em。标题至少比正文大 20%，用字重区分，绝不靠换字体家族。每行最多 66 个字符。

原因。人文主义字体的字腔更开放、字形更易区分，能在普通屏幕和不同字号下保持可读。更大的间距能减少拥挤效应，而拥挤效应对阅读障碍人群影响很大，这是证据最充分的排版改动。号称"专为阅读障碍"的字体在对照研究中没有显示出益处。

没有"撞脸"的字符。字体要能毫无歧义地区分大写 I、小写 l 和数字 1；镜像字母 b、d、p、q；数字 0 和字母 O。密码、代码、标识符等字母数字串，要用能保证这些区分的字体显示，并加大间距。

衬线字体只用于可选的编辑场景，绝不用于功能性文本，因为有些人用的是低像素密度的屏幕，衬线在上面会变糊。

神经类型：阅读障碍、计算障碍、低视力、执行功能、Irlen 综合征。原则：简洁律。

数字是通用语言

规则。长串数字像现实中那样分段：电话分段，证件号分段，卡号四位一组。数字输入框当场纠正可预见的错误，比如把字母 o 当成 0。所有用数字表示的数量或时间，都要配视觉辅助：写明百分比的进度条、高亮当前步骤的步骤计数器，或者表示比例的图形。

原因。计算障碍是一种与数字相关的持续性困难，与年龄和受教育程度无关。只用数字表示的剩余时间，对某些人来说没有意义。一条填了一半、写着"50%，第 3 步，共 6 步"的进度条，用三个通道传达同一条信息。但也有限度：用抽象动画完全取代数字就过头了，反而让人困惑。数字保留，视觉辅助同行。

神经类型：计算障碍、阅读障碍、执行功能、低视力。原则：简洁律、泰斯勒定律、奥卡姆剃刀。

间距、留白（拜托）和布局

规则。间距尺度以 4 为步长：4、8、12、16、24、32、48、64 和 96 像素。组与组之间留足空白。相关的放在一起，不相关的明显分开。只有一个主阅读栏；内容绝不在同一层级的并列栏里互相争抢。导航、内容和操作在每个屏幕、每种视口尺寸下都保持在同一区域。

原因。留白本身就是信息：它在阅读之前就传达了分组和层级。密集的布局会提高扫视成本，对 ADHD 的影响更大。固定的尺度消除了随意的决定，让节奏可预期。

神经类型：ADHD、阅读障碍、自闭症、执行功能。原则：简洁律、一致连接性、雅各布定律。

触控与点击目标

规则。任何可交互元素的最小目标为 48 × 48 像素。主要操作 60 × 60。面向儿童的界面以 60 为最小值，关键操作用 80 到 100 像素，尤其是 8 岁以下。相邻目标之间至少 8 像素，条件允许时 16 像素。可点击区域可以大于元素的视觉尺寸，容忍稍微点偏。

原因。目标越大、越近，选择时间和错误越少。对于有运动障碍的人和精细动作还在发育的儿童，大的区域能减少体力消耗。精确拖动对幼儿来说很难，必须始终提供点击的替代方式。

神经类型：运动协调障碍、ADHD、低视力、处于运动发育期的儿童。原则：菲茨定律。

动效

这一节关乎健康，而不是审美。任何内容每秒闪烁不得超过三次，没有例外，因为有引发光敏性癫痫的风险。

规则。过渡时长 200 到 500 毫秒，缓慢、可预期，并且整个产品用同一种类型；优先使用透明度和颜色变化，避免大幅位移。动画占据的面积小于屏幕的三分之一。没有任何动画会自动循环播放。始终遵循系统的"减少动态效果"偏好，用简单的透明度过渡代替动画；界面本身还要提供一个关闭所有动效的开关。禁止：持续旋转、视差、自动轮播、飞入的元素、彩纸效果，以及任何用户没要求的动效。

原因。屏幕上的运动会让前庭功能障碍人群恶心、头晕和迷失方向。无关动画对自闭症人群的干扰高于平均水平。对 ADHD 来说，持续的运动是永久的干扰，即使在余光里也一样，因为眼睛会被吸引过去。

神经类型：光敏性癫痫、前庭障碍、自闭症、ADHD、高敏感人群。原则：多尔蒂阈值。

按钮、链接和输入框

规则。可点击的东西看起来就要可点击，在视觉上与任何装饰元素区分开。每个可交互元素都有四种可见状态：默认、悬停、焦点和按下。焦点是一圈 3 像素、外扩 2 到 3 像素的高对比度描边，在任何主题下都可见，并且绝不移除。每个屏幕只有一个主要操作，主要、次要和弱化操作之间层级清晰。图标用来强化意图，但在重要操作上不能代替文字。

表单输入框：标签始终显示在输入框上方，绝不只用占位符，因为占位符恰恰在工作记忆最需要它的时候消失。格式不明显时，在输入框前给出提示文字。最小高度等于触控目标。在合适的时机校验：不是每按一个键就校验，也不是只在提交时才校验。

原因。按钮和链接是页面上最关键的元素。无障碍不止是语义化 HTML 和屏幕阅读器标签：视觉设计决定了人是犹豫还是行动。犹豫就是负荷，含糊就是推迟出现的错误。

神经类型：运动协调障碍、阅读障碍、ADHD、执行功能、键盘和屏幕阅读器用户。原则：菲茨定律、冯·雷斯托夫效应、奥卡姆剃刀。

表单与防错

规则。注册、支付、初始设置等繁重流程，拆成简短的步骤，每步一个主题，并清楚显示位置：当前第几步、共几步、接下来是什么。系统对输入宽容、对输出严格：接受空格、连字符、句点和大小写混用，并自动规范化。进度会被保存，因为对重点人群来说，被打断是常态，而不是例外。

错误提示不道歉、不指责、不含糊。用一句话说明发生了什么、怎么解决。例如："还差两位数字。手机号码共 11 位。"

原因。面对冗长而不透明的流程，ADHD 或执行功能有困难的人往往会放弃，或者走成本最低的路，即使是错的。位置可见的简短步骤，把一大笔成本拆成几笔小成本，并带来前进的感觉。

神经类型：ADHD、执行功能、计算障碍、焦虑。原则：米勒定律、波斯特尔定律、帕金森定律、峰终定律。

系统沟通

规则。警告、校验、通知和消息，在整个产品里每种类型只用一种视觉样式。成功提示温暖而直接。错误提示礼貌并以解决为导向。一个操作的名称在整个流程里保持一致：按钮写"发布"，确认就写"已发布"，绝不换同义词。通知是为了服务用户，而不是把用户拉回来：没有召回推送，没有制造出来的紧迫感，没有人为的稀缺。用户自己决定接收什么，默认是最少。

原因。打破惯例和风格不一致会引发不信任，并打断专注。新手引导不能代替清晰：屏幕在第一次交互之前就应该能看懂。教程是给失败的界面打的补丁。

神经类型：ADHD、阅读障碍、执行功能、自闭症。原则：雅各布定律、米勒定律、峰终定律。

字幕、音频和媒体

规则。所有带语音的媒体都有同步字幕，浅色文字配纯色深色背景，每段最多两行。音频绝不自动播放。每个播放器都有暂停、后退和调速。核心内容绝不只以音频或只以视频存在：始终有文字替代。

原因。字幕服务于聋人和听力较弱的人、通过阅读理解得更好的人、身处嘈杂环境的人，以及需要双通道强化的人。突如其来的声音对自闭症和高敏感人群是一种感官攻击。

神经类型：耳聋与听力下降、自闭症、ADHD、高敏感人群、听觉处理。原则：通道冗余和简洁律。

内容与写作语气

规则。用主动语态和短句，一句一个意思，一段一个主题。名称描述用户能控制和认得的东西，而不是系统是怎么搭建的。按钮准确说明会发生什么："保存修改"，而不是"提交"。语言简单但不幼稚。只有当术语正是用户需要学会的词时才用，并且第一次出现时解释。屏幕上的每个字都有作用；不能帮助理解的就删掉。

原因。对阅读障碍人群，以及任何处于负荷下的人来说，解码文字的成本会和内容本身争夺注意力。简洁就是无障碍。

神经类型：阅读障碍、ADHD、执行功能、非母语使用者。原则：奥卡姆剃刀、泰斯勒定律。

界面模式

规则。内容优先：每个屏幕都从用户的目标出发，不服务目标的东西就去掉。导航保持一致，同样的项目放在同样的位置。除非有真实且紧迫的风险，不用弹窗打断任务。没有用户操作，就不改变布局。控制信息密度：按需展开更多，而不是一股脑倒出来。长流程中提供专注模式，隐藏与当前任务无关的一切。

原因。面对许多相互竞争的选项，ADHD 人群容易卡住，或者选成本最低的任务。守恒复杂度，意味着把它花在能创造价值的地方：花在内容上，而不是操作上。

神经类型：ADHD、自闭症、执行功能、焦虑。原则：复杂性悖论、希克定律、雅各布定律、美即好用效应。

Token

考虑的神经类型

UX 原则

合规检查清单

发布任何屏幕之前：

• 所有信息性文字对比度至少 4.5:1，正文 7:1
• 人文主义无衬线字体，I、l 与 1，b、d、p 与 q，0 与 O 都能区分
• 行高 150% 或以上，每行最多 66 个字符
• 每个可交互目标至少 48 像素，并留 8 像素空隙
• 每个可交互元素都有可见的键盘焦点
• 没有每秒超过三次的闪烁
• 遵循减少动态效果，并提供本地动效控制
• 三套主题和三种文字大小都能正常工作
• 每个输入框都有可见标签，错误提示以解决为导向
• 长数字分段，数量配有视觉辅助
• 带语音的媒体有字幕且不自动播放
• 每个屏幕只有一个主要操作
• 每个操作的名称从流程开始到结束保持一致
• 没有强迫性留存机制

流程

这个系统是一份活文档。每条新规则都要附上依据和服务的神经类型，每条现有规则都可以用更好的证据来挑战。与真实的神经多样性人群一起测试是设计循环的一部分，采用参与式方法，而不是最后的验证环节。测试结果与规则矛盾时，规则就改，并记录修改的日期和原因。

Hoff Research. Make it simple, but significant.