界面工艺
大多数界面的失败不在于想法本身，而在于执行——近乎一致的间距、近乎清晰的层级、近乎正确的排版。
在重新设计样式之前先进行诊断
询问这个屏幕的目的是什么。一个首要操作，最多一个次要操作。如果你无法说出首要操作是什么，那么布局问题其实是产品问题，再多的样式调整也无法解决它。
真正体现视觉质量的要素
层级。 观看者在阅读任何内容之前就应该知道往哪里看。通过大小、粗细和间距来实现——按此顺序。颜色是层级工具中最弱且最容易被过度使用的。
间距韵律。 相关元素靠得更近，不相关元素离得更远，而且间隙来自一个统一的尺度。不一致的间距是用户能感觉到却说不出名字的缺陷。正确运用就近原则，简约的布局也会显得经过精心设计。
排版。 界面中使用一种字体家族，最多两种。设置一个真正的字号比例，并按照其步进值使用，而不是随意创造大小。正文文字应有舒适的度量——大约60–75个字符——并且行高随度量变宽而增大。
表面的克制。 边框、阴影和填充都会分隔元素。每个边界只选用一种。三者叠加使用就是为什么界面在正常密度下看起来很杂乱的原因。
对齐。 每个元素都与某个对象对齐。没有任何对齐的元素即使是有意为之，也会让人觉得是错误。
密度是一个决策
信息密集型的工具和营销页面需要截然不同的处理方式。确定当前属于哪一类并坚持下去——那种尴尬的中间地带，一个数据表格却带有落地页的内边距，对两者都没好处。
完成所有状态
加载、空状态、错误和溢出是产品感觉未完成的地方。空状态是一个设计机会；一个没有上下文的加载动画则是一种妥协。长字符串、长列表和小屏幕都必须被妥善处理，而不是心存侥幸。
深色模式是一个调色板，而不是反转
反转浅色主题会产生典型的糟糕深色模式：纯黑背景、纯白文字，以及毫无作用的阴影。
- 使用非常深的灰色而非纯黑，使用略微暗淡的白色而非纯白。两者之间的最大对比度会产生光晕效应，并且阅读起来确实很累。
- 层级关系反转：在浅色主题中，凸起的表面投射阴影；在深色主题中，它们变得更亮。在深色底色上，阴影本身无法传达任何信息。
- 在白色上能正常显示的饱和颜色在深色上会产生视觉振动。为深色调色板降低饱和度和提亮强调色，而不是直接复用。
- 从一开始就在令牌层级同时定义这两个调色板。事后添加意味着要审计每一个表面。
可访问性底线
以下不是美化选项——低于这些标准，一些人将完全无法使用界面。
- 文本对比度达到相对于其实际背景的标准比率，包括图片上的文字和彩色按钮内的文字。
- 永远不要仅用颜色来承载含义。表示错误的红色边框也需要文字或图标。
- 每个交互元素都必须可通过键盘访问，顺序合理，并有可见的焦点状态。
- 触摸目标足够大以便可靠点击，相邻目标之间留有间距。
- 尊重减少动画偏好：无法禁用的动画会对某些用户造成真实症状。
- 使用真实的语义元素——按钮就是按钮，标题按顺序排列。样式化的
div对辅助技术是不可见的。
绝对不要
- 通过增加视觉重量来解决由过多相同元素造成的层级问题。应该移除元素而不是增加重量。
- 居中正文。
- 在没有匹配的焦点状态的情况下发布悬停状态。