程序员如何做出“不难看”的设计精选.pdfVIP

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