翻译自Medium作者 Adam Wathan & Steve Schoger 的合作文章，有兴趣看原文的链接在这里。
下面开始正文了哦，其实我在翻译方面也是才疏学浅，只求尽量避免机器翻译的腔调😊
大概每一位开发者都会不可避免地陷入需要他们做出设计决策的场合，不管他们喜欢与否。可能在你的公司没有全职设计师，而你需要为自己实现几个界面上的小设计；又或者你在为自己的业余项目做编程而你当然希望它要比由Bootstrap搭的站点要好看点......
你当然可以很容易地举起你的手说：“我永远都做不好看，我又不是艺术家!" 但是事实证明有数不清的技巧可以帮助你提升设计水平，即使你不是设计专业出身。
这里就有7条可以立即上手的简单妙计来提高你的设计水平。
1. 不改字体大小——使用颜色和字重去创造层次
一个常见的错误是当我们在调整文本的时候去过度地依赖字体大小来控制层次。
“这行文本很重要吗？让我们把它变大一些。“
“这行文本是次要的吗？那让我们把它变小一点。”
不要把所有的重担都落到字体大小上，可以尝试用颜色和字重去做这件事。
“这行文本很重要吗？那就把它变粗一点。”
“这行文本是次要的吗？那就把它的颜色变轻盈一些。”
尝试专注于2-3种颜色：
- 给主要内容 (比如一篇文章的标题)选一个深色但不是黑色的颜色
- 给次要内容 (类似于一篇文章的发布日期)的填充色改为灰色
- 给辅助说明内容 (类似于页脚上的版权说明) 变成更浅的灰色
同样的，两种字重对界面设计来说通常也够用了：
- 对大多数的文本用正常的字重 (400或500，这取决于字体)
- 对你想强调的字体加粗字重 (600或700)
在界面设计中要避免使用400以下的字重；虽然它们作为大标题来阅读时是没有问题的，但是用在小尺寸里就会很难阅读。对不想强调的文本，如果你正在考虑使用更小的字重，不妨试一试用更浅的颜色或更小的字号来代替。
字重释疑：可以先简单地理解为字体的粗细，字重越大➡️字体展示越粗，字重越小➡️字体展示则越细。
2. 不要在彩色背景上使用灰色字体
在白色背景上给不想强调的文字填充浅灰色是一个好方法，但是在彩色背景上这种方法并不适用。
因为我们在白色背景上看到的灰色文本实际上是降低了对比度的结果。
使文本更接近于背景颜色实际上更有助于创造层次关系，而不是简单地填充浅灰色。
针对彩色背景，这里有两种减弱颜色对比度的方法：
1. 降低文本的不透明度
使用白色文字并降低不透明度。这一招可以让白色文字本身透出一点背景色，弱化次要文本的同时也不会和背景色之间有不协调的地方。
2. 基于背景图案去手动选择一个颜色
当你的背景色是一张图片或者图案时，这个方法要优于降低不透明度的效果。一味地降低不透明度会让文字变得像褪色效果。
色相释意：按说人话的方式来说，就是色彩本身的面貌。红色和蓝色就是不同的颜色，它们也拥有着截然不同的色相。
饱和度释意：可以理解为色彩的纯度，越纯粹 (不参杂其它颜色)的色彩观感上会越亮。
3. 调整阴影的距离
如上图所示，增加一个垂直的阴影偏移量 (Photoshop里选中图层-混合选项-投影设置)去代替大面积的阴影模糊散布，使得阴影看起来更柔和。
这样看起来的确更自然，因为它可以模拟从上方照下来的光源，就像我们在现实世界中经常看到的那样。
这种设置方法也同样适用于内阴影，比如你可以用在表格里的输入框中 (如下图所示)：
如果你想了解有关阴影设计的更多信息，那么Google出品的Material DesignGuidelines是一个极好的启蒙读本 (里面有一章就是专门讲解阴影的)
4. 更少地使用分隔线
当你需要在两个元素之间创造间隔的时候，尝试抵制立马就能联想到的分隔线吧。
虽然分隔线是区别两个元素的优秀方法，但也不是唯一的方式，使用太多分隔线会让你的设计变得杂乱无序。
等下一次发现自己想用分割线时，换一种想法来代替吧：
-
使用阴影
阴影在概括一个元素时可以像轮廓描边一样做得很好，而且阴影这种做法在达成同样效果时不会分散注意力，看起来更微妙。
阴影示例
2. 使用两种不同的背景色
区分邻近两个元素时，通常你需要做的是给它们填充不同的背景色。可如果你除了分隔线之外还使用了不同的背景色，尝试着移除分隔线，你可能并不需要它。
3. 添加更大的空间
有什么比仅增加空间间隔更好的方法来在元素之间建立区分？在不引入新UI组件的情况下，将两组元素进一步拉开间距是区分两者的最好方法。
5. 不要把本身尺寸小的图标刻意放大
如果你正在设计的东西涉及到了一些大图标 (例如登录页面的“功能”部分)，你可能会本能地去类似 Font Awesome 或者 Zondicons 扒拉一些免费的图标，然后放大一些尺寸直到符合自己的需求。
这些图标虽然是矢量图形，但如果一直放大尺寸，质量不会受到影响吗？这里要打上一个问号？
尽管矢量图形不会因为你放大尺寸而降低自身品质，但是那些被设定在16-24px的图标不会在你将其放大至其预期大小的3、4倍时仍旧看起来很专业。因为它们缺少细节，不成比例地放大反而会显得特别“矮胖”。
如果你只有小图标，尝试将它们封装在一个形状中，并把这个形状填上背景色 (如下图所示)：
如果你有预算的话，也可以使用为大图标设计的高级图标套件，比如 Heroicons 或者 Iconic。
6. 强调边框颜色，为平淡的设计增添色彩
如果你不是图形设计师，如何灵光一闪地从精美摄影或多彩插图中得到的视觉效果添加到你的UI中呢？
一个可以发挥巨大作用的简单技巧就是在界面的各个部分添加彩色的边框，否则它们会显得有些平淡。
以下面的警告信息为例：
或者高亮选中的导航项目：
甚至在整个布局的顶部加一条：
添加一条彩色的矩形描边不需要使用平面设计师的任何天赋，而且它还能让你的网站离设计感更近一步。
对颜色有选择恐惧吗？可以尝试着从 Dribbble 的颜色搜索中进行选择，以免因传统拾色器的无穷可能性而感到不知所措。
7. 不是每一个按钮都需要填充背景色的
当用户可以在一个页面上执行多个操作按钮时，很容易陷入基于语义来设计这些按钮的陷阱里。
“这是一个积极的操作吗？那就把按钮设为绿色吧。”
“这是要删除数据吗？那把这个按钮改成红色。”
语义确实是按钮设计中很重要的一部分，但其实还有一个更常见的考虑维度——层级被遗忘了
页面上的每个动作都位于金字塔的重要性层级中。大部分页面都只有一个最主要的操作和两三个次重要的操作，以及小部分很少使用的操作。
当我们设计这三种操作的时候，很重要的一点是要传达出它们在层次结构中的位置。
- 主要的操作应该是最明显的，实心、强对比度的背景颜色会比较合适。
- 二级操作应该做得清晰但不那么突出。轮廓描边的样式或者低对比度的背景色是更好的选择。
- 最不常用的操作 (三级操作)则应该做得能被发现但不那么显眼。设计这类操作的时候用类似链接的样式通常是最佳选择。
“那么警示性操作呢，难道它们不应该一直都是红色的吗？”
当在界面中遇到负面操作作为主按钮的时候，保留大而红的加粗样式，就像确认对话框里展示的那样 (见下图）
好了，到了这里整篇文章差不多就译完了，如果你喜欢的话可以持续关注哦！
