程序员如何做出“不难看”的设计

4. 装饰元素

　　装 饰元素都是锦上添花的东西，上面提到的几点如果做不好的话，装饰元素再好看也没用。最常用的装饰元素是纹理和阴影。有时候我们想要给整个网页一个背景，如 果是纯色会显得比较呆滞，用纹理平铺会比较好一些，在网上搜 texture 会找到很多相应图片，我比较喜欢纯色然后加一些 noise 的背景，这里有一个生成器可以帮你做到：http://www.noisetexturegenerator.com/

　　至 于阴影，有 text-shadow 和 box-shadow 等。我以前在一些网站浏览的时候，总觉得上面的文字比较特别，选中一看才发现都加了 text-shadow . text-shadow 如果用得好会产生一些很好的文字效果，而且不会影响阅读体验。而如果想要一些立体效果，可以考虑 box-shadow, 但使用的时候要考虑到一致性和假想中的“光源”，相邻的元素最好不要做出相反的阴影。

　　一般比较专业的网站在细节上都处理得非常好，从装饰元素就可以看出来。因为很喜欢的 Twitter 的设计，有一阵子我就把它的首页自己实现了一遍（可以在这里查看， 请用 Chrome 浏览器，因为偷懒没用考虑浏览器差异）。在抄袭的过程中，我发现即使在一些常人不会注意到的细节上它都努力做到尽善尽美。比如说输入框上面的 placeholder 其实是用 span 浮动在上面，因为原生的 placeholder 没那么丰富的效果。还有弹出窗口的那个小三角，乍看之下没什么，但如果你查看代码结构，会发现有两层：

　　这个让我很好奇：应该一个 div 就可以实现才对啊。当把 caret-inner 隐藏掉之后，发现原来 caret-outer 是一个半透明的层，而且宽高都比 caret-inner 多了 1px，只是用来模拟阴影效果：

仔细看就能看到那个半透明的小三角

　　抄到这里的时候我感到非常震惊，然后十分肯定这样的代码是设计师自己写的，不然不可能把设计意图实现得那么完美。这才是 real web designer 啊！知名设计师 Zeldman 也曾经在 Twitter 上说过："Real web designers write code. Always have, always will." Twitter 的设计师肯定都是自己写 HTML 和 CSS 代码。

　　从 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效果”的情况。它的变量太多了， 要完全控制这些变量需要丰富的经验和很好的感性，所以请多一些耐心，不要期望短期有大的进步。而这种耐心也是值得的：一旦你在这方面有所进步，它对你的影 响就是全方位的，你不止可以做出好东西，也会在其它方面更有品味。

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

来源：zhuoqun的日记