1. 从零开始 细节稍后处理 当开始构思一个产品时，优先考虑产品的功能实现，而不是产品的界面交互。在设计好功能之前，过早的开始设计界面会导致很多的困扰。 在早期的设计阶段，应该尽量简单、高效的设计功能界面，例如忽略字体、阴影等细节样式，使用现实中的画笔或者 PRD 工具制作简单的原型图，并尽量不要使用色彩来强化视觉，使用灰度设计稿会更有利于设计出层级分明的界面。 不要过度设计 在这个阶段，设计产品交互、边缘情况的处理是非常困难的。不需要...
当开始构思一个产品时，优先考虑产品的功能实现，而不是产品的界面交互。在设计好功能之前，过早的开始设计界面会导致很多的困扰。
在早期的设计阶段，应该尽量简单、高效的设计功能界面，例如忽略字体、阴影等细节样式，使用现实中的画笔或者 PRD 工具制作简单的原型图，并尽量不要使用色彩来强化视觉，使用灰度设计稿会更有利于设计出层级分明的界面。
在这个阶段，设计产品交互、边缘情况的处理是非常困难的。不需要在一开始就设计完这些内容，而是通过短周期的迭代工作，首先设计想要构建的功能的简单版本，然后去实现它。在实际中遇到了问题再去解决，远比提前设计如何解决问题更加实际且高效。
不要从对手的设计中参考过多的设计，那样会让人感觉你的产品只是别人的二流版本。
提前定义设计系统可以很好的解决由于无限的设计样式可选项对设计造成的困扰。不必在一开始就定义好所有东西，只需要逐步将设计系统化，在有限的选项中匹配并通过排除法进行设计，可以有效降低决策负担，提高设计效率。
仅仅通过字体大小控制层级并不是一个好的设计，字体粗细和颜色深浅同样也是非常重要的。
降低透明度可以实现将字体颜色变灰从而降低其视觉权重，但透明度会使文本透出背景颜色，最好使用接近与背景颜色的一个新的浅色颜色。
当强调的手段不那么明显时，降低兄弟节点的强调层级，可以有效突出想要强调的节点。
姓名：张三 性别：男 标签，直接使用 张三 男 来表示。房间数：3 可以重新组合为 3个房间，从而使界面更清晰。例如在产品规格页面，有大量的规格属性需要展示，且为了让用户可以直接搜索，此时仍需要使用明确的标签，例如 iPhone 的规格页面会展示
尺寸： 14.7cm x 7.04cm x 0.76cm，用户通过页面查找 尺寸 标签，可以快速定位到尺寸属性。
文档层级中标题从 h1 到 h6
依次从一级标题到六级标题，在默认样式中往往字体大小会依次递减。而在视觉层级中，标题更像是一个页面标签而不是大标题，标题往往是支持性的内容而不是页面主要内容。
所以 tailwind 默认样式中 h1 到 h6 的标签是没有大小区分的。
加粗的字体或线条会增强层级，可以通过降低对比度来平衡视觉，例如：icon 和文字组合使用时，由于 icon 占据的面积更大导致 icon 的视觉权重更大，此时可以通过降低 icon 的对比度来平衡视觉。
语义在按钮设计中重要的组成部分，重要的按钮通过高亮引导，二级按钮应该明确但不突出，例如添加轮廓或浅色背景，三级按钮则是在视觉中展现但不突出表现。
危险或者具有破坏性的操作并不一定是红色的、大的提示按钮，如果不是主要操作也可以是二级或者三级按钮。
让设计变得更干净的方法首先就是为元素之间添加间距，但紧凑型的 UI 在某些数据密集型的页面仍然是有意义的，例如：仪表盘、数据表格等场景。
不必填充完整个界面，通过收缩画布使设计更简单，例如以移动端界面作为设计基础，当设计完成后再去适配更大的画布就会更简单高效。
所以 tailwind 以 mobile first 作为设计理念。
当内容在宽的画布中看起来不平衡时，尝试将内容通过多列布局进行优化，而不是加宽内容的宽度。
当内容或内容的某一个部分以固定宽度呈现更为合适时，例如：sidebar、登陆弹框、用户信息卡片等，以固定宽度定义内容宽度直到画布宽度无法支持内容展示。
容器与容器内的元素，在不同尺寸下，并不一定是等比例缩放的。例如设计不同大小的按钮组件，小的按钮组件文字会占据更多的空间，而大的按钮组件，文字放大到一个看起来仍比较优雅的大小，而按钮背景则可能变得更大以更加吸引用户视线。
模糊的间距会让内容变得不清晰，不同组之间的间距应该比组内元素之间的间距更大。
字体大小同样应该建立设计系统，同样在更大字体大小时有更大的刻度跳跃。
避免使用 em 作为字体单位，而是使用 px 或 rem 作为字体单位。
将文本宽度控制在 45 到 75 个字符之间，可以有效提高可读性。
行高随内容宽度变大而变大，随字体变大反而可能需要变小。
可以仅在鼠标 hover 时显示下划线或颜色。
对于 LTR 的语言，左对齐更有利于阅读。长文本应该使用左对齐，表格中的数字右对齐更有利于小数点的阅读。
粗体大标题的场景下，通过减小 letter-spacing 提高可读性。全大写字母的文字情况下，通过增加 letter-spacing 提高可读性。
使用 HSL 定义颜色
tailwind 的 color 配置就是通过这种方式来定义的，首先定义 500 基准颜色，然后通过调整 500 的颜色深浅获得 100 和 900 的颜色。再依次填充 200、300、400、600、700、800 的颜色。
灰色是低饱和度的，但可以调整一些色调让灰色看来起来更暖或更冷（色温）。
tailwind 的灰色组颜色其实就是有色温的灰色。
WCAG 建议小于 18px 的字体 对比度 至少是 4.5:1，大于 18px 的字体对比度至少是 3:1。
在深色背景上使用浅色文字时，对比度应大于 4.5:1。而更好的方式是使用浅色背景和深色文字，同时具备了色彩和可阅读性。
降低文字的层级，不只可以通过缩小字体大小，降低饱和度。例如在深色背景下，调整文字的色调，使其看起来更接近背景颜色同样可以降低文字的层级。
考虑到色盲症患者，不要只依赖颜色来区分内容。加入 icon、文字，并调整色块的亮度都可以起到区分颜色的作用。
通过模拟光源，来模拟现实世界中不同深度元素的视觉效果。例如阴影越长，元素看起来越高。
定义最小阴影和最大阴影，并填充中间的空白来建立高度系统。
在交互中加入阴影的互动，例如在鼠标 hover 时增加阴影，在点击按钮时减少阴影，都起到了增强交互的作用。
一个阴影模拟环境光，范围更大也更柔和，另一个阴影模拟环境光源无法影响的紧凑阴影，范围更小也更紧凑。当物体越来越高时，紧凑阴影会因为环境光源的介入而变淡并消失。
丰富的图片颜色会导致图片上方的文字难以阅读，可以通过
的方式来提升可阅读性。
用户上传的图片尺寸是不规则的，处理好不规则图片对布局可能的影响。同时图片边缘的颜色可能和背景颜色接近，可以考虑为图片增加边框或阴影来划分图片和背景。
ul ol blockquote 等标签的默认样式a 标签的默认样式form 中 checkbox radio 的默认样式设计数据空状态的界面时，如果数据依赖用户输入，那么在提示用户当前界面无数据的情况时，同时提供新增数据的按钮引导用户添加数据。
并且可以隐藏依赖数据的交互模块如筛选器、表头等，使界面更加简洁。
过多的线条会使界面显得凌乱