oxfords

牛津鞋

牛津鞋，不是布洛克鞋。牛津鞋是朴素的鞋款。布洛克鞋则是在同款鞋上打孔装饰的鞋款。这项技能用于打造精致、简洁、完善的界面，并去除那些让屏幕看起来像机器生成的装饰。

它不会让产品看起来引人注目，也不会为产品塑造品牌。它会决定屏幕上显示什么、显示在哪里、显眼程度如何、如何响应，以及哪些内容不应出现。

**每条规则背后的检验标准：**没人会逐字阅读屏幕。用户带着一个问题来到页面，然后寻找答案。一个选择要么能让他们更快找到答案，要么就只是装饰。

**简洁不等于千篇一律，也不等于毫无色彩。**去掉粗糙的设计后就此打住，只会得到一个白底灰字、带一个蓝色按钮的页面。这同样是一种默认样式。简洁关乎结构：每个元素的存在都有理由，并且都经过完善。产品的个性体现在色彩上。以中性色（白色、黑色、灰色）为基础，再叠加真正的配色方案。

使用方法

任务	操作
构建	按照构建顺序操作，阅读适用于当前界面的参考资料，并完成完成度检查。
审查	运行检查器，然后阅读 references/review.md。按“症状 -> 修复 -> 原因”的格式报告。
修复	只修改检查结果中指出的内容。保留现有文案、名称和标识。

项目自身的设计系统、设计令牌或品牌规则优先于这项技能。遵循它们，并将 Oxfords 用于所有未作规定的部分。

界面类型	优先阅读
仪表板、管理后台、表格、图表、设置（包括手机浏览器中的界面）	references/app-ui.md
原生移动应用界面	references/mobile.md
落地页、营销网站	references/landing.md
状态、表单、错误、UX 文案	references/states-forms-copy.md
色彩：选择和应用配色方案	references/palettes.md（每次构建都要阅读）
字体、图标、完整禁用清单	references/slop-floor.md
动效、手势、减少动态效果	references/motion.md
审查已完成的界面	references/review.md

构建顺序

1. 意图。 明确用户来这里要做什么。从实现该功能的控件开始。每添加一样东西，都要问问它是否实现了朴素版本做不到的事。只有当意图扩展时，才增加功能。
2. 先写内容。 在开始布局前，写好每个标签、数字和名称。使用不均匀、可信的数据：看起来真实的名称、奇怪的总数、一个很长的值。只展示人们会扫一眼查看的信息；详情放在下一层。一个界面只做一件事。
3. 让数据决定组件。 一组固定的值用标签。数字右对齐，并使用等宽数字。基于时间的数据用时间线或汇总图表，而不是按时间排序的表格。非活跃项留在原位，并置灰。不要下意识地选择表格或一排卡片。
4. 沿边缘布局。 标签左对齐，值右对齐，只将不需要阅读的内容居中。每个元素都贴齐一个边缘，并为下一个元素形成边缘。通过将内容移到边缘来填补空白，而不是添加内容。先采用人们熟悉的布局（从上到下、从左到右，导航置顶或置左），再考虑独特设计。
5. 颜色。 从中性色开始：白色、黑色或灰色页面，中性表面，近黑或近白文字。然后，除非项目有自己的颜色，否则从 references/palettes.md 中选择一套配色，并将其中三种颜色分别用作主色、辅色和点缀色。写一句说明为什么适合。绝不使用骨白色或奶油色页面；绝不用中性色搭配一个蓝色按钮。
6. 层级。 先看尺寸，再看位置、字重，最后看颜色。最重要的内容放在左上方，并且尺寸最大。分组、排序、堆叠，然后删除布局已经表达出的所有标签。强调是相对的：弱化周边元素，而不是给主视觉上色。
7. 披露。 主要操作始终可见，并带有标签。次要操作放在菜单中，或在悬停时显示，同时在触屏上提供明确可见的等效操作。罕见操作放在弹出框中。绝不把主要项目藏在点击之后。
8. 容器。 先尝试内嵌，前提是放得下。然后：简单且不阻断操作的内容用弹出框；复杂但仍属于同一页面的内容用模态框，之后再确认；大型或永久性的内容用新页面，并提供返回方式；在移动设备上，选择内容时不离开当前页面，则用底部抽屉。
9. 不可见层。 状态、反馈、焦点、空内容和损坏内容。这部分最容易被跳过。“完成”检查清单会列出这些内容。

完成检查

检查你为该屏幕构建的每一项。“无”需要说明理由。

项目	必须具备
按钮	默认、悬停、焦点可见、按下、禁用状态；禁用原因须用旁边的文字说明；仅在用户需要等待时显示加载状态
输入框	上方有持久标签；有焦点状态；字段下方显示错误及修复方法；出错后保留输入内容
每项操作	在 100ms 内于用户视线所在处给出响应：控件原地变化，或显示可撤销的 toast
破坏性操作	尽可能提供撤销；否则显示确认信息，明确指出对象，并让按钮标签写明操作
仅图标控件	提供无障碍名称和工具提示；不为所有人普遍熟知的内容须改用文字标签
空状态	首次运行（用一句话说明，并提供能填充内容的那个操作）和无结果（引用查询内容，并提供清除查询的选项）
加载和失败	约 300ms 后显示形状与结果相符的骨架屏；错误须说明失败原因及恢复方法；处理离线和无权限情况
混乱内容	长名称截断时仍可查看完整值；0、1、10,000 行均可正常工作；处理缺失图片
表格	支持搜索、筛选或排序；数字右对齐；每行仅有一个主要操作；选择行后，在现有工具栏中显示批量操作
图表	使用简单折线图或柱状图；显示坐标轴数值、网格线、标签、范围或指标控件，以及悬停或聚焦时显示的数值
导航	显示当前位置；项目名称反映其内容；进行分组；不常用项目放在最后；顶层项目约五个
键盘和对比度	所有内容均可通过 Tab 键访问，并显示焦点；Esc 关闭浮层；正文文本对比度为 4.5:1，大号文本和图标为 3:1；状态不能只靠颜色区分
触控	点击目标为 44px；不能有只能通过悬停使用的内容；输入框为 16px；遵循安全区域要求
动效	反馈动效不超过 250ms，绝不阻塞输入；提供保留反馈效果的减少动态版本
颜色	以中性色为基础（白、黑、灰），覆盖屏幕大部分区域；使用有名称且有理由的配色；三种颜色都要使用，且各自承担一种作用；页面不能使用骨白色或奶油色
一致性	使用一种字体、一套配色、一套统一笔画粗细的图标、一种对应每个层级的圆角；相同事物在所有位置的外观和行为都一致
低质量设计底线	检查器通过，或为每条警告写明一行理由

低质量设计底线

生成式界面的常见痕迹。请移除这些痕迹，不要重新设计它们。完整列表及替代方案见 references/slop-floor.md。

• 结构： 当前导航项或卡片侧边有彩色条；所有内容都装进卡片；卡片套卡片；每个标题上方都有小号大写标签；编号的章节标签；问候语标题栏；图标加数字的平铺行；多个页面重复显示相同数据；不起作用的控件。
• 字体和图标： 无人选择的默认字体（Inter、Geist、Roboto、Poppins、Montserrat、 DM Sans、Space Grotesk、Instrument Serif、Playfair Display、Fraunces）；在无衬线标题中插入衬线字体文字；用 emoji 充当图标；默认描边的常见图标集；每个标题上方都有色调方框中的图标。
• 颜色： 骨白色或奶油色页面搭配橙色或红色点缀；中性页面上唯一的颜色是一个蓝色按钮；整个界面都被配色中的颜色染色，没有中性色；紫色或靛蓝渐变；渐变文字；光晕和模糊色块；每种状态都使用色调胶囊标签。
• 动效： 弹跳效果；所有内容在滚动时向上淡入；脉动圆点；跑马灯；脚本显示内容前将其隐藏。
• 文案： 天衣无缝、轻而易举、解锁、提升、增强；“Get started”和“Submit”；Acme 和 Jane Doe；随意编造的整数；感叹号和长破折号。

对你构建的内容运行检查器：

node scripts/check.mjs path/to/build

检查器会指出机械化痕迹，并对需要判断的项目发出警告。修复每条发现的问题，或用一行说明这是有意为之。

数值

项目	数值
间距	以 4 为倍数；根据用途采用不同间距：组内为 4-12，组间为 24-40；标题上方的留白应大于下方
圆角	每个层级各用一种（控件、卡片）；嵌套内层圆角 = 外层圆角减去间距
按钮内边距	水平方向约为垂直方向的两倍
图标尺寸	与文本行高一致；描边粗细与文本字重匹配
字体比例	约分为六档，比例之外最多再用一个主视觉数字或标题。Web 应用正文为 13-14px，极少超过 24px。原生应用正文为 17pt，最小为 15。营销内容正文为 16px 或更大。不得小于 11px
行长与行距	45-75 个字符；正文行距约为 1.5，展示文字为 1.05-1.2
标题字距	仅大型展示字体使用 -2% 至 -4%；正文为 0
交互目标	触控为 44px；桌面端绝对下限为 24px
反馈时长	按下反馈为 100-150ms；常规过渡为 150-250ms；覆盖层最长为 400ms；退出速度应快于进入
缓动	使用 ease-out，不要有过冲
阴影	柔和、低对比度，并与背景色调相衬；如果你注意到了阴影，那它就不对
深色模式层次	不使用阴影：每向上一层，颜色都比下层稍亮、饱和度稍低
手机背景	纯黑 #000 或纯白 #FFF；导航层使用 Liquid Glass
对比度	文本为 4.5:1，大号文本、图标、输入框边框和焦点环为 3:1

完成前的四项检查

• 眯眼看。 模糊视线。应当有一个元素最先映入眼帘，而且应该是正确的元素。
• 删减。 移除一个元素。如果没有任何东西变差，就不要加回来。
• 替换。 放上竞争对手的 logo。如果依然合适，说明内容太过泛化。
• 说明理由。 指出任意一个数值。你应该能说清为什么选它，而不是默认值。

致谢

Oxfords 建立在他人的成果之上。请参阅仓库中的 CREDITS.md。