经常看到程序员展示自己做的东西，有一些是创业项目，有一些是 Weekend Project, 不客气地说，大部分都挺难看的。在 10 年前，只要你做出一个功能齐全的东西，哪怕非常难看也会有很多人叫好，而现在网站和其它互联网产品多如牛毛，没有人再愿意忍受难看的东西了。
我觉得“不难看”是对一个产品最起码的要求，难看的产品往往都很难用。程序员在写代码的时候往往只注重功能的实现和性能的提升，忽视了外观和易用性，其实很多时候只要注意一些基本的规则，就可以大幅度提高产品的观感。作为一个外行，我也算是苦苦自学了好长时间的设计，这里打算分享一些我认为比较实用的技巧，希望可以帮助到同样在摸索的人。
需要声明的是，这里的目标是做出“不难看”的设计，注意，只是“不难看”而已，怎么做得好看我也在学习。另外，我的水平也很低，只是比较能体会外行的痛苦，如果有什么错误的地方，欢迎批评指正。
下面我会从四个方面来入手：对齐，字体排印，配色和装饰元素。
1. 对齐
之所以把“对齐”单独列出来并且放在开头说，是因为它是一个看上去简单但非常容易被忽视的规则。如果你真的把所有该对齐的东西都对齐了，就会发现只是简单遵循这一个规则就会有如此大的效果。
人的眼睛是喜欢秩序的，对齐就会让人觉得愉悦。不过有一点例外：尽量别用居中对齐，除非你有充足的理由。居中对齐会让人觉得很业余，你自己可以试一下好几段文字都居中是什么效果。
当然，也有靠不规则来出彩的设计，但那是高级玩法，我们还是乖乖对齐比较好。关于对齐有一个很好的网站可以观摩，那就是 IA ()。它的上一个版本其实更容易看到对齐的效果，可以通过这里查看，顶部和底部的导航看上去没什么联系，如果你对比一下会发现它们对齐得都非常好。
2. 字体排印（Typography）
字体排印，英文名词叫做 Typography, 它包涵的东西很多，不只是字体的选择，还包括行距、行宽以及字体间距等元素的设定，这些东西都左右着我们的阅读体验。我们每天都阅读大量东西，每天都会接触到“文字”，由这一点就可以看出字体排印的重要性。关于字体排印的具体知识我就不多说了，有很多这方面的书和资料，这里只说几点容易被忽视的元素。
首先是行宽的设定，也就是每行显示的文字个数。一般来说，我们的阅读顺序都是从左到右，然后换行。如果每行显示的文字个数太多，那么我们在换行的时候视线移动距离就比较长，就容易感觉到疲劳，所以千万不要搞成只有一栏然后对屏幕自适应宽度，那样的阅读体验非常差。如果非要做流动布局，建议设置一下 max-width 属性。
其次是行距，也就是两行文字之间的距离。经常看到有些人调整了字体大小却忘记了调整行距，结果上下两行几乎挤在了一起，看起来非常累。如果你要调整字体大小，记得把行距也设置一下，就是 CSS 中的 line-height 属性。
第三是字间距。有些时候因为需要，我们会把一些文字设置得非常大，有些文字设置得非常小，这个时候每个字之间的间距可能就会变得过大或者过小，这个时候就需要调整一下，，字体设计师们在设计一款字体的时候也会考虑这个因素。在 CSS 里面，有个属性叫 letter-spacing ，可以调整字间距。
最后想说一下的是标点。我们平时用到的很多标点符号都是错误的，比如说，英文的省略号不是三个点：… 而是 … （MacOS X 的快捷键是 Option + ;），英文引号也不是 ” 而是 “ （MacOS X 的快捷键是 Option + [），注意，这个和全角引号也不一样。平时写文章聊天无所谓，但如果做设计的话，还是把标点用对比较好。另外，名词拼写最好也严谨一些，App Store 不是 appstore, Xcode 不是 xcode, iPad 不是 ipad…
上面提到的除了标点之外，其余都是关于“空白”的问题。很多程序员可能会关注字体的选择，也知道 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 色彩，如图：
这样用户在鼠标移动到链接上的时候，得到的反馈就比较自然，这里是个简单的 demo:
如果把色彩比作杠铃的话，那么程序员的“色彩肌肉”可能只能举起 5 磅的重量，所以开始的时候我们不能太勉强，不要试图去掌控跨度很大的色彩，选中一个色彩之后，任何时候都只调整 H, S, B 中的一项即可。控制住变量，事情就不会变得太糟。
伟人之所以伟大，是因为他与别人共处逆境时，
