在此之前，我需要叠甲，我本身并不是做平面设计或者其他设计工作的，但是我认为如果要和前端打交道，积累一些 UI / UX 相关的简单技巧和概念有助于提高审美。
文章内容来自于我在网上冲浪时这看一点那看一点的积累。所以本文其实相当于野路子出身。虽然涉及不深，但我认为也许能对完全没有 UI / UX 相关概念的人提供帮助。
功能性特征与标识符
简单说在设计时便可以通过 UI 元素的特征来传递某种信息，就像写文章会使用 粗体 来进行强调一样。
最常见的例子比如说对于无法被按下的按钮，会让其颜色更淡。当前选中的选项卡具有与其他选项卡不同的背景等等。
——例如b站，在鼠标悬停在可点击物件上的时候会变色，并且悬停会显示按钮意图以及快捷键。
更公式一点的例子则是比如说导航栏激活项的高亮、悬停高亮、工具提示等等。
视觉层次
通常 UI 上要显示不同物件来展示，但物件之间本身的「重量」不同。
比如说在网上阅读文章的时候，重点当然是文章主体而不是「返回顶部」按钮。
这个时候根据物件去分别进行设计，用不同层次来突出重点就很有用了。
比如说可以设置不同颜色、尺寸和字重，或者利用背景对比度来制造差异。让文章的文字放在 UI 正中间铺开，而按钮放在左下角或者右下角这种原理屏幕中心的地方，并加以选择和背景色对比度不那么高的颜色来让其低调。
通过这样可以让物件在视觉上进行分层，从而引导用户快速注意到重点信息。
网格布局和间距
UI 是否使用网格设计实际上并没有什么必须的理由，但是通常会有惯例使用特定网格。
比如说 Boostrap 常见的 12 列布局 + 8 像素间距，并在此基础上让平板使用 8 列，移动端使用 4 列。
又或者 8 点式网格，4 点式网格。
但总而言之，是否遵循这样的设计并非重点，重点是设计原则带来的好处。例如「所有间距值都选同一个基数的整数倍（如8px、16px、24px）」好处在于在缩放的时候都能对间距进行对半分，从而让 UI 整体具有一致性。
排版和字号
排版实际上很有趣，因为基本上是围绕字体和文本展开，思路和写文章有些相像。
不同的字体、字号给人的感觉会不一样，在阅读的时候感觉也不一样。
最简单的例如衬线体和非衬线体的选择。衬线体更能表现出某种主观感受与古典，例如宋体可以象征理性，楷体更为情绪。而非衬线体例如黑体这样的印刷体会显得现代和品牌化、屏幕友好。
虽然偏题，但是排版设计的历史相当古老，例如在书本排版中因为脱离屏幕会选择宋体这样的字体作为主要字体，而网络文章更会倾向于选择黑体作为主要字体，这种差异原因之一是黑体对于屏幕更友好。
此外还有艺术体这样的字体（例如得意黑），通常用于封面品牌设计，不过这样就扯远了。
另一个常见的重点则是字号和字重。大字号和粗体会更加醒目，小字号和细体存在感更弱（也不容易看清）。
除此外，还有行距与字距、段距这种特意设计后可以显著改善 UI 风格和体验的点。
色彩理论
前面在提到视觉层次的时候提及过可以用色彩来制造层次，而这里则是换一个视角从色彩调配角度出发去选择合适颜色。
毕竟显然 UI 如果使用高饱和度的红配绿大面积铺色，绝对是地狱配色，不仅视觉上看着刺眼，还会影响红绿色盲用户的可访问性。
此外还有像「色彩情绪」这样的存在——例如蓝色传递信任与冷静，橙色代表活力与促销，绿色关联安全与通过，红色代表危险或热情。
如果拿不准可以考虑 60-30-10 规则对色彩进行平衡。UI 的颜色 60% 为主色调，用来给人传达 UI 基调；30% 为副色调，用来制造对比和层次感；10% 为强调色，用来突出可交互按钮或者关键元素。
至于选择合适的色彩，如果不知道怎么配色，那就可以按基调选一个主色，然后找工具根据主色生成一些 色阶 然后用就行，至少不会犯大块红配绿这种错误。
夜间模式
UI 和其他平面设计不同，UI 可能需要考虑夜间设计。
在夜间设计的时候，需要注意对比度、饱和度、亮度的控制。因为背景暗下来了，原先的物件可能会显得过亮或者太过于鲜艳而降低体验。而这种时候就需要将主色饱和度降低，或者使用深灰替换纯黑，降低亮度对比度。
图标
因为图标通常很可能会和文本排在一起，因此在设计的时候需要留意图标是否破坏了间距或者文本的排版。
反馈和状态
在设计可交互物件的时候需要设计反馈，具有状态的物件应该可以显示状态。
这样用户才能知道他在和 UI 交互而不是和图片交互。
借鉴
如果遇到什么困难，借鉴和学习当然是一个好办法。