每个Web开发者都不可避免的遇到视觉设计的选择难题，不管他们喜不喜欢。
也许你的公司没有全职的设计人员，只能靠你自己来应用新的UI，又或者你在全权负责一个私活儿，你想让它看上去比那些模板化的BootStrap网站更有设计感。
你任何时候都可以摊手说：「我又不是艺术家，我永远也没法把页面做得多好。」但是其实此中有许多值得借鉴的小技巧可以帮助你提升作品的设计感，而且甚至不需要任何设计方面的才能。
一、使用颜色和字重来制造层级（而不是用尺寸）
在定义字符样式的时候，通常会错误地过于常用字符大小来制造层级关系。
「这段文字很重要，我们让它变大吧。」
「这段文字是第二层级的，我们把它变小吧。」
与其单靠字符大小来区分层级，不如交给颜色和字重来起到更好的作用。
「这段文字很重要，我们把它加粗吧。」
「这段文字是第二层级的，我们来使用一个更浅的颜色。」
同时，尽量把颜色控制在三种之内：
• 用一个深色（而不是纯黑）来定义最主要的文字内容（比如文章标题）
• 用灰色来定义次级内容（比如文章发布时间）
• 用一个更浅的灰色来定义辅助信息（比如在页脚的版权信息）
同样的，两种字重对于一般的UI来说已经够用了：
• 给一般文字设定一个正常的字重（根据字体，取400或500）
• 给你想要重点突出的文字设定一个更重的自重（取600或700）
避免使用小于400的字重：它们可以用在大标题上，但是应用在小字上会让阅读变得十分困难。如果你正想要使用更小的字重来进一步弱化文字，可以考虑选一个更浅的颜色或更小的字号。
二、不要在有颜色的背景上使用灰色文字
在白色背景上使用浅灰色来弱化文字是个好主意，但是用在其他颜色的背景上就不那么棒了。
之所以浅灰和白色搭配起来那么和谐，是因为其本质是在降低对比度。
让文字颜色接近背景颜色才是创造层级的正确之道，而不是简单的使用浅灰。
有两个方法可以在彩色背景上降低对比度的方法：
1. 降低白色文字的透明度
使用低透明度的白色文字。降低透明度能够将背景色透出来，从而降低文字的存在感且不至于与背景色冲突。
2. 基于背景色手工选取一个颜色
这比单纯降低透明度的效果要好，特别是当你的背景是图片或图案的情况下，降低透明度会让文字看起来有点褪色的感觉。
先选择一个与背景色相同的色相，然后调整饱和度和亮度来让它看起来更舒服。
三、调整你的投影
想让你的投影（Box-shadow）更突出，与其使用大量的模糊（blur）和扩展（spread），不如给它加一点纵向偏移。
这样做会让投影看起来更加自然，因为在现实世界中，我们通常会看到光线从上方投下来，从而在物体下方产生投影。
这个法则对内阴影（比如表单的输入框中的内阴影）也同样适用。
如果你有兴趣深度学习关于投影的设计，Material Design Guideline是个不错的参考。
四、少用边框
当你想要区隔两个部分的时候，尝试不要不加考虑就直奔边框（border）。
虽说边框是一个用来区分两个元素的好办法，但是它不是唯一的方法。而且，过度使用边框会让你的设计看起来很拥挤和古板。
下次你想要使用边框的时候，不妨试试下面几个替代方案：
1. 使用投影（Box-shadow）
投影与边框一样能胜任给元素做描边的效果，但是比边框更微妙，在实现同样目的的情况下更能减少视觉上的干扰。
2. 使用两种不同的背景色
给相连的两个元素应用稍微不同的背景色通常会让两者相互区隔。如果你已经在两种不同的背景色之间加了边框，试着把边框去掉吧，你不需要它了。
3. 添加额外的间距
有什么比增加间距更好的方法来区分两个元素呢？把元素远离彼此能够更好的创造区隔关系，而不需要增加任何新的视觉元素。
五、不要让本应该小的图标太大
当你想要给你做的东西添加一个大图标的时候（比如在落地页的「特色」部分），你也许会直觉式的从图标库中搜一个图标，然后放大到你想要的大小。
毕竟它们是矢量的，只要你缩放得当就不会损失任何品质。
但即使如此，那些本来以16到24像素的图标在放大三到四倍之后绝对不会好看到哪里去，它们缺少细节，从而放大后会让人产生一种简陋的印象。
如果你只有这些小图标可用，那么就试着把它们放到一个填充颜色的图形里面吧。
这会让你保持图标的实际尺寸，但是填充到更大的空间里。
六、使用着重色边框来给平淡的设计增加色彩
如果你不是一个视觉设计师，那么你怎么给那些没有夺目的照片和插画的作品增添色彩呢？
作为一个简单的小技巧，添加一个有颜色的边框往往能给平淡的界面增添一份生机。
举个例子，在提示框的一侧添加边框：
或者用来高亮显示一个选中的导航项：
或是横跨整个页面顶部：
添加一个有颜色的矩形不需要任何视觉设计的才能，却能给你的页面带来「设计感」。
七、不是每个按钮都需要背景色
当一个页面中有多个需要用户操作的动作时，往往很容易就会掉进单纯靠语义来设计的陷阱。
像Bootstrap这样的前端框架，通常会根据语义给你提供一系列可供选择的按钮样式：
「这是一个正向的按钮，那它设计成绿色。」
「这是删除按钮，那就用红色吧。」
语义对于按钮的设计是非常重要没错，但是按钮之间的层级关系也非常容易被忽视的重要维度。
页面中的每一个可操作项都能按照重要程度分级，大多数页面只有一个最重要的操作，一些页面有不那么重要的次级操作，更少的页面里还有三级操作。
在设计这些操作按钮的时候，能够通过层级来排布是很重要的。
• 主要操作需要非常显眼，推荐使用实底的、底色与背景色对比度大的样式。
• 次级操作需要简明清晰，但不过分突出。通常使用线框或是与背景色相近的底色的样式。
• 三级操作则要更加弱化，但仍然应该很容易找到。通常不需要过多的设计元素。
「那破坏性的操作呢，它们不应该时刻都是红色的吗？」
并不需要！如果在页面中，破坏性的操作不是最主要的操作，更好的处理方法是把它作为次级或三级操作按钮。
把大大的红色加粗样式留给这个消极操作真正成为界面中最重要的操作时再使用，比如在确认对话框里：
本文翻译自Adam Wathan & Steve Schoger发表在Medium专栏Refactoring UI中的《7 Practical Tips for Cheating at Design》。
