PC客户端UI设计有哪些规范？

作为一名前端开发，一直从事PC端组件的设计、主题的架构，特别是维护开源项目的时候，在缺少设计师参与的情况下，前端开发应该有基本的UI设计规范指南和理论知识。我比较认可以下的设计规范或者常识应用：

品牌色如何在UI系统中应用

1. 品牌色有多个的情况下，使用高对比度的颜色应用在重要的交互元素，另外一个应用在装饰性元素；
2. 使用品牌色创建单色调色板，同个色相下颜色更加统一协调舒服；

品牌主色的应用

1. 可在黑色和白色中间增加一些基于品牌色的浅色色彩；
2. 将品牌主色应用在Action动作上，尽量避免把主色应用在没有交互的元素上；
3. 把主色应用在标题，用户会错以为是可点击的链接；

理解浅色和暗黑色UI风格

1. 浅色UI普遍通用，黑色的文字，浅色的背景，营造轻快、干净的美感；
2. 暗黑色主题相反，营造一种戏剧性、强大和奢侈感；
3. 浅色和暗黑风格的融合，使用得当，也可以很好的创建视觉层次；

用颜色来定义清晰的UI层次

1. 重要的元素要有足够的饱和度；
2. 重要的元素应该具有更高的对比度；
3. 色相突出的颜色应该应用在重要的地方，比如错误提示；

化繁为简

1. 使用渐进式展开，而不是一次性显示；
2. 不要把极简主义和简单主义混为一谈；
3. 对复杂的元素进行分组归类；
4. 级别深且复杂的菜单，可以一次性展示，让用户更容易找到；

UI设计应该大道至简少即是多

1. 删除重复的元素来简化页面；
2. 简化风格提示用户可访问性；
3. 不是所有的链接都需要下划线；

破坏性的行为添加适当的阻力

1. 经典的破坏性行为比如删除、清空等操作，可弹出确认框，用不同的设计表达对应的阻力：
2. 主色按钮表达轻度危险；
3. 警告色危险按钮高亮表达中度危险；
4. 在警告色危险按钮基础上，添加复选框，再次确认；
5. 危险行为结束后，可允许恢复操作；

Button 你使用对了吗

1. 定义三种重要级别的按钮；
2. 使用唯一的主要Button用在重要级别最高的；
3. 重要级别同等重要的情况下，使用次要Button；
4. 三级按钮用在在不重要的动作，比如删除；

在单列布局中堆叠表单字段

1. 单列移动路径更短；
2. Label应该放在顶部，可避免注意力来回扫描，label过长移动端也很友好；
3. 表单过高时，相似项可并一行；

如何确保浮于图片上的文字易读

1. 添加90%到0%的黑色渐变；
2. 添加50%的黑色蒙版覆盖图片之上；
3. 虚化图片，增加图片和文字的对比度；

关于UI中的文本段落

1. 单行不要过长，对应中文字符可以在20~40个字之间，太长用户难以回到开头和结尾；
2. 文本也不必占满宽度，按合理的推荐字数限制，左对齐或者整体居中；

关于前端字体排版

1. 多种字体应用在UI上，将会变得难以理解和杂乱；
2. 仅使用常规体和粗体两种粗细；
3. 确定你的body字体大小，逐级*1.250的系数确定下一个级别的字体大小；

UI操作路径尽量缩短

1. 减少操作路径，避免相关联的操作移动距离过大；
2. 有效点击至少48pt；

关于UI的对齐

1. 避免多种对齐方式，
2. 左对齐可以提成可读性；
3. 文字较少时，可以居中对齐，按钮可以设置占满100%宽度；

关于页面 Hero Banner

1. 确保重要信息足够大；
2. 确保重要信息颜色有更大的对比度；
3. 重要信息有更大的间距；
4. 重要信息前置；

清晰的视觉效果让用户更快更容易找到想要的信息，并且更快做决策，提高转化率。

确保相似的外观，功能一致

如果元素看起来长得一样，大脑会解释它们有一样的功能。

暗黑模式下，如何确定你的主题色调

1. 根据主色，确定出五个等级的渐变色；
2. 在卡片组件中测试你的颜色是否安全；
3. 如果你的主色是暗色调，链接和按钮需要做调整；

如何快速建立一个简单的主题体系

1. 确定主色，根据主色生成单色调的渐变色；
2. 确定不同级别元素的大小粗细；
3. 确定你的Space间距尺寸；
4. 确定你不同尺寸的阴影；
5. 确定不同尺寸的圆角尺寸；

这里还有一个根据具体的卡片例子，从最初的状态到优化后的状态，是一个很好的理解前端UI规范的典范。

相关阅读：