假装是个设计师

每个 Web 开发人员都会遇到要做 UI 的情况，无论他喜欢与否。

也许你公司没有全职 UI 设计，所以你得自己来。也或许你在做一个 side-project，但你想让它比 Bootstrap 好看点。

你可以说「我又不是艺术家，别要求我太多」，但事实表明，你还是有很多技巧来提高自己的设计水平，当然了，这并不需要你有很好的 UI 技术。

以下是七个提升设计感的简单实践。

一、 用颜色和粗细来划分重点，而不是字体大小

文本样式的一个常见错误是过度依赖字体大小来划分重点结构。

「这段文字重要吗，字大点。」

「这段文字不太重要，字小点。」

不要总用字体来控制这些，尝试使用颜色和 font-wight 也可以完成同样的工作。比如：

「这段文字重要，加粗。」

「这段文字不重要，细一点。」

用两种或三种颜色划分你的内容：

• 重要内容用深色（但不是黑色）（如文章标题）
• 次重要内容用灰色（如文章发布日期）
• 不重要内容用浅灰色（如页脚的版权声明）

大多情况，两种 font-weight 就够了：

• 大部分的文字用普通 weight（400或500）
• 你强调的文字 weight（600或700）

400 以下的 weight 就别用了；大标题下还可以看清，小字体基本看不清。如果你想用更小的 weight 来弱化你的文字，用更淡的颜色或更小的字体吧。

二、彩色背景别用灰色字体

在白色背景下使用浅灰色字体可以弱化内容，但是在彩色背景下就不好了。

这是因为我们在白色背景下看灰色其实是降低了文字的对比度。

相比于使用灰色字体，让文本接近背景色更能突出文字重点。

彩色背景下，你可以通过两种方法降低对比度。

1.降低白字不透明度（opacity）

白色，低不透明度，再让背景色透过来一点，这样可以弱化文字，又不会在彩色背景下显得很违和。

2.根据背景色自己选一个合适的颜色

当你背景是图片或图案时，这种方法比降低不透明度要好一些。而且降低不透明度显得文字太暗了，就像水洗的一样。

选个和背景色相同的颜色，再慢慢调饱和度和亮度，直到看起来还不错。

3.正确使用阴影

相比于使用大阴影（blur）和暗角来让阴影更明显，不如添加垂直偏移 （vertical offset）。

这样看起来会更自然，因为它模拟了光源从上面照下来的效果，这和我们在现实世界看到的一样。

输入框和表格也可以这么用：

阴影设计是门艺术，感兴趣可以看看 Material Design Guidelines。

四、少用 border

当你想划分两个元素的边界时，先别考虑 border。

border 确实在划分边界上做的很不错，但这不是唯一的方法，滥用 border 会让你的设计特别杂乱。

你可以试试下面的方法：

1.box shadow

box shadow 不仅可以像 border那样做到划分边界，而且这种方法更精细，也不会太分散你的注意力。

2.两种背景色

相邻元素用不同的背景色就可以划分它们。

3.加空隙

有没有更好的办法划分不同元素的边界，而不只是简单地增加分割部分？当然有，把元素隔得更远就行了。

五、少用大图标，如果它们本身意义不大的话

如果你在设计一些大图标（比如登录页面的「功能」部分），试试 Font Awesome 或 Zondicons 这样的免费图标集，然后加大尺寸直到满足你的要求。

它们都是矢量图，所以不会在放大的过程中丢失细节。

虽然矢量图不会在拉伸时丢失细节，但本来在 16-24px绘制的图标非要拉伸到三倍四倍之大，真的不会显得很好看，他们会缺乏一些细节，比如不成比例的「矮胖」。

如果小图标可以满足你的要求，可以将它们包在另外一个形状中，并且为形状添加背景色。

这可以让实际图标更加接近预期的大小，同时可以填充更大的空间。

如果有预算，可以用大尺寸的高级矢量图，比如Heroicons or Iconic。

六、边框特写，给平淡的设计增加颜色

如果你不是 UI，怎么才能从你的用户界面中和其他那些好看的设计中脱颖而出呢。

简单却有效的一个技巧就是为某些部分添加色彩鲜艳的边框，这样不会感到乏味。

举个例子，在提醒信息的左边做文章。

高亮导航栏

顶端都加上也行。。

它不需要任何专业的 UI 设计人员帮你，但可以让你网站看起来更「大气」。

是不是不好选颜色，Dribbble’s color search 可以帮你。

七、不是每个按钮都需要颜色

当用户可以在一个页面有很多的选择时，很容易陷入语义化设计的陷阱。

比如 Bootstrap，无论何时添加新按钮，都可以选择不同的语义。

「积极动作，绿按钮。」

「删除数据，红按钮。」

语义是按钮设计的一个重要部分，但有一个更常见的重要维度被忽略了：重要性。

页面上的每个操作都处于金字塔的某个重要位置。但大多数页面只有一个真正重要的操作，一些不太重要的次要操作，以及一些很少使用的三级操作。

设计这些动作的时候，更重要的是理清这些按钮谁更重要。

• 重要动作应该突出，加粗，高对比度。
• 不太重要的动作应该清楚显示，但别太主导。用轮廓线，低对比度背景色。
• 三级操作可见即可，但不要引人注意。像链接一样处理吧。

「删除按钮呢，应不应该总是红色？」

没必要，如果它们不是页面中的主要操作，处理成二级或三级按钮即可。

保留大、红，粗样式在那些以负面操作为主的页面上，比如确认对话框。

原文链接：7 Practical Tips for Cheating at Design – Refactoring UI – Medium

作者：Adam Wathan & Steve Schoger

编译：@王隐在录音