(转)如何做不难看的界面


上面提到的除了标点之外，其余都是关于“空白”的问题。很多程序员可能会关注字体的选择，也知道 Helvetica 和 Arial 的区别，但是对字体之间的“空白”不太在意。而事实上，字体排印更多是对“空白”的设计，把“空白”的部分做好眼睛才能呼吸顺畅。

3. 配色

配色一直以来都是个让我头疼的问题，它看上去很难掌握，事实上也非常难以掌握。有一阵子我甚至怀疑我自己在色彩方面有生理缺陷，不然我他妈那么用功好歹应该有点儿效果啊。后来做了一些色彩识别能力测试，才慢慢打消了破罐子破摔的念头。

关于色彩基础知识的书和资料我看了不少，三原色、互补色、色环和光谱等知识知道了很多，但这些东西对我的帮助微乎其微。并不是这些知识没用，而是它们都需要辅助以大量的练习，可能还需要一个好的老师亲手指导，而我现在已经没时间和精力再从基础开始慢慢学画画了。不过，大量的阅读和无用尝试还是帮助我找到了一些比较实用并有迹可循的东西，下面就说一些窍门。

程序员一般都是用十六进制或者 RGB 来表示色彩，比如说 #FF0000 或者 rgb(100, 210, 241, 0.5) 之类。这种认识色彩的方式非常不好，它们对你来说只是一堆随机数字，只是“碰巧”会出现那种色彩。而且即使你知道 #FF0000 是红色，你也很难通过调整这些数字来找出你想要的色彩。现在我们不要再用十六进制或者 RGB 来考虑色彩了，我们要用 HSB 模式: H(hues)表示色相，S(saturation)表示饱和度，B(brightness)表示亮度。

使用 HSB 来考虑色彩最大的好处是比较直观，当你调整色相(H),饱和度(S) 或亮度(B)中的某一项时，基本可以大概知道色彩会发生什么变化，这样我们就可以选出比较可控的又“不难看”的色彩搭配。比如说，我们可能选择了某一种色彩作为链接的色彩，那么就可以保持该色彩的色相(H), 饱和度(S) 值不变，只调整亮度(B) 的值，这样就顺利得到了一种比较深的色彩，可以用来做 :hover 色彩，如图：

从 Twitter 的例子可以看出，好的装饰元素可以提升品质感。但是也要注意一点，装饰元素只是用来装饰的，千万不要搞得太惹眼以至于喧宾夺主。

以上说的这几点中，修改容易并且见效最快的就是对齐和字体排印，把这两点做好设计会直接上一个台阶。颜色用不好可以先不用，都用灰度也行，比如背景颜色 #EEE , 字体颜色 #333, 分割线颜色 #CCC …… 虽然简陋，但是“不难看”。

下面推荐一些资源，其中有书，也有在线的教程，大部分我都看过而且觉得不错。

1.《写给大家看的设计书》这本书简单易懂，介绍的也都是可以遵循的规则，很适合业余爱好者阅读，非常推荐。

2. Type is Beautiful 很好的字体博客，里面的基础文章非常值得一看。

3. Thinking with type 关于字体设计的好书，可以在线阅读。

4. 《色彩设计的原理》最近出的书，浅显易懂。

5. 《版面设计的原理》和 《色彩设计的原理》 是同一个系列，能学到很多关于布局的知识。

6. Designing for the web 包含了字体排印、配色和版式设计等多方面内容，值得一看。可以在线阅读。

7. Twitter & Twitter Bootstrap. 如果你可以把 Twitter 整个网站自己写一遍，一定会受益匪浅。

学习写程序虽然有时候也比较痛苦，但总体来说还是比较开心的，因为你能很快看到解决问题的成果。比如说，有时候程序因为少了一个分号而报错，当你通过调试改正了错误，程序立刻就会运行正常，得到你想要的结果。但是学习设计是完全不同的经验，你很难遇到“只要做了XX就会有XX效果”的情况。它的变量太多了，要完全控制这些变量需要丰富的经验和很好的感性，所以请多一些耐心，不要期望短期有大的进步。而这种耐心也是值得的：一旦你在这方面有所进步，它对你的影响就是全方位的，你不止可以做出好东西，也会在其它方面更有品味。

另外，技术和设计都是为了让自己做的东西更好用，它们都是为产品服务的，而不是要凸显自己的功能和地位。如果你通过努力终于掌握了一些设计知识和技巧以后，仅仅为了让别人知道你也懂设计就故意在自己做的东西里加一些完全不必要的“炫耀”，那真是一件值得羞耻的事情。