經(jīng)常看到程序員展示自己做的東西，有一些是創(chuàng)業(yè)項(xiàng)目，有一些是 Weekend Project, 不客氣地說(shuō)，大部分都挺難看的。在 10 年前，只要你做出一個(gè)功能齊全的東西，哪怕非常難看也會(huì)有很多人叫好，而現(xiàn)在網(wǎng)站和其它互聯(lián)網(wǎng)產(chǎn)品多如牛毛，沒(méi)有人再愿意忍受難看的東西了。

我 覺(jué)得“不難看”是對(duì)一個(gè)產(chǎn)品最起碼的要求，難看的產(chǎn)品往往都很難用。程序員在寫(xiě)代碼的時(shí)候往往只注重功能的實(shí)現(xiàn)和性能的提升，忽視了外觀和易用性，其實(shí)很 多時(shí)候只要注意一些基本的規(guī)則，就可以大幅度提高產(chǎn)品的觀感。作為一個(gè)外行，我也算是苦苦自學(xué)了好長(zhǎng)時(shí)間的設(shè)計(jì)，這里打算分享一些我認(rèn)為比較實(shí)用的技巧， 希望可以幫助到同樣在摸索的人。

需要聲明的是，這里的目標(biāo)是做出“不難看”的設(shè)計(jì)，注意，只是“不難看”而已，怎么做得好看我也在學(xué)習(xí)。另外，我的水平也很低，只是比較能體會(huì)外行的痛苦，如果有什么錯(cuò)誤的地方，歡迎批評(píng)指正。

下面我會(huì)從四個(gè)方面來(lái)入手：對(duì)齊，字體排印，配色和裝飾元素。

1. 對(duì)齊

之所以把“對(duì)齊”單獨(dú)列出來(lái)并且放在開(kāi)頭說(shuō)，是因?yàn)樗且粋€(gè)看上去簡(jiǎn)單但非常容易被忽視的規(guī)則。如果你真的把所有該對(duì)齊的東西都對(duì)齊了，就會(huì)發(fā)現(xiàn)只是簡(jiǎn)單遵循這一個(gè)規(guī)則就會(huì)有如此大的效果。

人的眼睛是喜歡秩序的，對(duì)齊就會(huì)讓人覺(jué)得愉悅。不過(guò)有一點(diǎn)例外：盡量別用居中對(duì)齊，除非你有充足的理由。居中對(duì)齊會(huì)讓人覺(jué)得很業(yè)余，你自己可以試一下好幾段文字都居中是什么效果。

當(dāng)然，也有靠不規(guī)則來(lái)出彩的設(shè)計(jì)，但那是高級(jí)玩法，我們還是乖乖對(duì)齊比較好。關(guān)于對(duì)齊有一個(gè)很好的網(wǎng)站可以觀摩，那就是 IA (http://informationarchitects.net/)。它的上一個(gè)版本其實(shí)更容易看到對(duì)齊的效果，可以通過(guò)這里查看，頂部和底部的導(dǎo)航看上去沒(méi)什么聯(lián)系，如果你對(duì)比一下會(huì)發(fā)現(xiàn)它們對(duì)齊得都非常好。

2. 字體排印（Typography）

字體排印，英文名詞叫做 Typography, 它包涵的東西很多，不只是字體的選擇，還包括行距、行寬以及字體間距等元素的設(shè)定，這些東西都左右著我們的閱讀體驗(yàn)。我們每天都閱讀大量東西，每天都會(huì)接 觸到“文字”，由這一點(diǎn)就可以看出字體排印的重要性。關(guān)于字體排印的具體知識(shí)我就不多說(shuō)了，有很多這方面的書(shū)和資料，這里只說(shuō)幾點(diǎn)容易被忽視的元素。

首先是行寬的設(shè)定，也就是每行顯示的文字個(gè)數(shù)。一般來(lái)說(shuō)，我們的閱讀順序都是從左到右，然后換行。如果每行顯示的文字個(gè)數(shù)太多，那么我們?cè)趽Q行的時(shí)候視線移 動(dòng)距離就比較長(zhǎng)，就容易感覺(jué)到疲勞，所以千萬(wàn)不要搞成只有一欄然后對(duì)屏幕自適應(yīng)寬度，那樣的閱讀體驗(yàn)非常差。如果非要做流動(dòng)布局，建議設(shè)置一下 max-width 屬性。

其次是行距，也就是兩行文字之間的距離。經(jīng)常看到有些人調(diào)整了字體大小卻忘記了調(diào)整行距，結(jié)果上下兩行幾乎擠在了一起，看起來(lái)非常累。如果你要調(diào)整字體大小，記得把行距也設(shè)置一下，就是 CSS 中的 line-height 屬性。

第三是字間距。有些時(shí)候因?yàn)樾枰覀儠?huì)把一些文字設(shè)置得非常大，有些文字設(shè)置得非常小，這個(gè)時(shí)候每個(gè)字之間的間距可能就會(huì)變得過(guò)大或者過(guò)小，這個(gè)時(shí)候就需 要調(diào)整一下，字體設(shè)計(jì)師們?cè)谠O(shè)計(jì)一款字體的時(shí)候也會(huì)考慮這個(gè)因素。在 CSS 里面，有個(gè)屬性叫 letter-spacing ，可以調(diào)整字間距。

最后想說(shuō)一下的是標(biāo)點(diǎn)。我們平時(shí)用到的很多標(biāo)點(diǎn)符號(hào)都是錯(cuò)誤的，比如說(shuō)，英文的省略號(hào)不是三個(gè)點(diǎn)：… 而是 … （MacOS X 的快捷鍵是 Option + ;），英文引號(hào)也不是 " 而是 “ （MacOS X 的快捷鍵是 Option + [），注意，這個(gè)和全角引號(hào)也不一樣。平時(shí)寫(xiě)文章聊天無(wú)所謂，但如果做設(shè)計(jì)的話，還是把標(biāo)點(diǎn)用對(duì)比較好。另外，名詞拼寫(xiě)最好也嚴(yán)謹(jǐn)一些，App Store 不是 appstore, Xcode 不是 xcode, iPad 不是 ipad…

上面提到的除了標(biāo)點(diǎn)之外，其余都是關(guān)于“空白”的問(wèn)題。很多程序員可能會(huì)關(guān)注字體的選擇，也知道 Helvetica 和 Arial 的區(qū)別，但是對(duì)字體之間的“空白”不太在意。而事實(shí)上，字體排印更多是對(duì)“空白”的設(shè)計(jì)，把“空白”的部分做好眼睛才能呼吸順暢。

3. 配色

配色一直以來(lái)都是個(gè)讓我頭疼的問(wèn)題，它看上去很難掌握，事實(shí)上也非常難以掌握。有一陣子我甚至懷疑我自己在色彩方面有生理缺陷，不然我他媽那么用功好歹應(yīng)該有點(diǎn)兒效果啊。后來(lái)做了一些色彩識(shí)別能力測(cè)試，才慢慢打消了破罐子破摔的念頭。

關(guān)于色彩基礎(chǔ)知識(shí)的書(shū)和資料我看了不少，三原色、互補(bǔ)色、色環(huán)和光譜等知識(shí)知道了很多，但這些東西對(duì)我的幫助微乎其微。并不是這些知識(shí)沒(méi)用，而是它們都需要 輔助以大量的練習(xí)，可能還需要一個(gè)好的老師親手指導(dǎo)，而我現(xiàn)在已經(jīng)沒(méi)時(shí)間和精力再?gòu)幕A(chǔ)開(kāi)始慢慢學(xué)畫(huà)畫(huà)了。不過(guò)，大量的閱讀和無(wú)用嘗試還是幫助我找到了一 些比較實(shí)用并有跡可循的東西，下面就說(shuō)一些竅門。程序員一般都是用十六進(jìn)制或者 RGB 來(lái)表示色彩，比如說(shuō) #FF0000 或者 rgb(100, 210, 241, 0.5) 之類。這種認(rèn)識(shí)色彩的方式非常不好，它們對(duì)你來(lái)說(shuō)只是一堆隨機(jī)數(shù)字，只是“碰巧”會(huì)出現(xiàn)那種色彩。而且即使你知道 #FF0000 是紅色，你也很難通過(guò)調(diào)整這些數(shù)字來(lái)找出你想要的色彩。現(xiàn)在我們不要再用十六進(jìn)制或者 RGB 來(lái)考慮色彩了，我們要用 HSB 模式: H(hues)表示色相，S(saturation)表示飽和度，B(brightness)表示亮度。

使用 HSB 來(lái)考慮色彩最大的好處是比較直觀，當(dāng)你調(diào)整色相(H),飽和度(S) 或亮度(B)中的某一項(xiàng)時(shí)，基本可以大概知道色彩會(huì)發(fā)生什么變化，這樣我們就可以選出比較可控的又“不難看”的色彩搭配。比如說(shuō)，我們可能選擇了某一種色 彩作為鏈接的色彩，那么就可以保持該色彩的色相(H), 飽和度(S) 值不變，只調(diào)整亮度(B) 的值，這樣就順利得到了一種比較深的色彩，可以用來(lái)做 :hover 色彩，如圖：

這樣用戶在鼠標(biāo)移動(dòng)到鏈接上的時(shí)候，得到的反饋就比較自然，這里是個(gè)簡(jiǎn)單的 demo:

http://zhuoqun.github.com/demo/link.html

如果把色彩比作杠鈴的話，那么程序員的“色彩肌肉”可能只能舉起 5 磅的重量，所以開(kāi)始的時(shí)候我們不能太勉強(qiáng)，不要試圖去掌控跨度很大的色彩，選中一個(gè)色彩之后，任何時(shí)候都只調(diào)整 H, S, B 中的一項(xiàng)即可。控制住變量，事情就不會(huì)變得太糟。

因?yàn)槲覀兊牧α坑邢蓿砸M可能少的使用色彩，也就是說(shuō)要盡量重復(fù)使用色彩。比如說(shuō)，有一種色彩我們用作鏈接的 :hover 色彩，同時(shí)一些高亮的文字的背景色也可以使用它，這樣不但減少了色彩種類，還會(huì)給人一種視覺(jué)上的一致性，有個(gè)很好的例子就是 http://www.subtraction.com/ ,這個(gè)網(wǎng)站的主人以前是紐約時(shí)報(bào)的設(shè)計(jì)總監(jiān)，網(wǎng)站除了黑白之外這個(gè)網(wǎng)站只有一種橘黃色。

相信很多程序員都聽(tīng)說(shuō)過(guò) Twitter Bootstrap. Twitter Bootstrap 是一個(gè)很酷的東西，極大地減少了設(shè)計(jì)工作，非常適合不懂設(shè)計(jì)的人快速搭建網(wǎng)站。但現(xiàn)在使用 Twitter Bootstrap 的人越來(lái)越多，很多網(wǎng)站看上去千篇一律，讓人非常厭煩。其實(shí)完全可以根據(jù)提到的規(guī)則來(lái)定制自己的 Twitter Bootstrap, 這里我就以頂部的導(dǎo)航條為例簡(jiǎn)單做一個(gè) demo.  首先我們看到導(dǎo)航條的背景樣式是這樣的：

background: #2C2C2C; 
background-image: -webkit-linear-gradient(top, #333, #222); 

現(xiàn) 在我們把 #333 輸入到 PhotoShop 里面，可以看到它的 HSB 的值為 0,0,20. 現(xiàn)在我們保持亮度(B) 不變，通過(guò)調(diào)整 H 和 S 找到一種舒服的顏色，比如 160,90,20. 但是這個(gè)顏色亮度太低了，所以我們?cè)黾?30 的亮度，顏色就變成了 160,90,50. 十六進(jìn)制為：#.0D8059.

然后我們對(duì)其它顏色做同樣的轉(zhuǎn)換。#222 的 HSB 為 0,0,13, 然后把它的 H 和 S 的值設(shè)置為和 #333 一樣，就變成了 160,90,13, 再增加 30 的亮度，就變成了 160,90,43. 十六進(jìn)制為：#0B6E4D.

同理， #2C2C2C 會(huì)轉(zhuǎn)換成 160,90,47. 十六進(jìn)制為：#0C7854.

然 后把原來(lái)樣式里面的三個(gè)相應(yīng)的顏色都替換掉就行了。背景換了之后，你會(huì)發(fā)現(xiàn)菜單選中后的背景顏色還沒(méi)有改，原來(lái)的顏色是 #222,  現(xiàn)在要改成 #0B6E4D. 此外連接上的文字顯得有些暗，原來(lái)的顏色是 #999, 現(xiàn)在改成 #DDD. 下面是完成后的 demo (只測(cè)試了 Chrome 瀏覽器):

http://zhuoqun.github.com/demo/navbar.html

4. 裝飾元素

裝 飾元素都是錦上添花的東西，上面提到的幾點(diǎn)如果做不好的話，裝飾元素再好看也沒(méi)用。最常用的裝飾元素是紋理和陰影。有時(shí)候我們想要給整個(gè)網(wǎng)頁(yè)一個(gè)背景，如 果是純色會(huì)顯得比較呆滯，用紋理平鋪會(huì)比較好一些，在網(wǎng)上搜 texture 會(huì)找到很多相應(yīng)圖片，我比較喜歡純色然后加一些 noise 的背景，這里有一個(gè)生成器可以幫你做到：http://www.noisetexturegenerator.com/

至 于陰影，有 text-shadow 和 box-shadow 等。我以前在一些網(wǎng)站瀏覽的時(shí)候，總覺(jué)得上面的文字比較特別，選中一看才發(fā)現(xiàn)都加了 text-shadow . text-shadow 如果用得好會(huì)產(chǎn)生一些很好的文字效果，而且不會(huì)影響閱讀體驗(yàn)。而如果想要一些立體效果，可以考慮 box-shadow, 但使用的時(shí)候要考慮到一致性和假想中的“光源”，相鄰的元素最好不要做出相反的陰影。

一般比較專業(yè)的網(wǎng)站在細(xì)節(jié)上都處理得非常好，從裝飾元素就可以看出來(lái)。因?yàn)楹芟矚g的 Twitter 的設(shè)計(jì)，有一陣子我就把它的首頁(yè)自己實(shí)現(xiàn)了一遍（可以在這里查看， 請(qǐng)用 Chrome 瀏覽器，因?yàn)橥祽袥](méi)用考慮瀏覽器差異）。在抄襲的過(guò)程中，我發(fā)現(xiàn)即使在一些常人不會(huì)注意到的細(xì)節(jié)上它都努力做到盡善盡美。比如說(shuō)輸入框上面的 placeholder 其實(shí)是用 span 浮動(dòng)在上面，因?yàn)樵?placeholder 沒(méi)那么豐富的效果。還有彈出窗口的那個(gè)小三角，乍看之下沒(méi)什么，但如果你查看代碼結(jié)構(gòu)，會(huì)發(fā)現(xiàn)有兩層：

這個(gè)讓我很好奇：應(yīng)該一個(gè) div 就可以實(shí)現(xiàn)才對(duì)啊。當(dāng)把 caret-inner 隱藏掉之后，發(fā)現(xiàn)原來(lái) caret-outer 是一個(gè)半透明的層，而且寬高都比 caret-inner 多了 1px，只是用來(lái)模擬陰影效果：

仔細(xì)看就能看到那個(gè)半透明的小三角

抄到這里的時(shí)候我感到非常震驚，然后十分肯定這樣的代碼是設(shè)計(jì)師自己寫(xiě)的，不然不可能把設(shè)計(jì)意圖實(shí)現(xiàn)得那么完美。這才是 real web designer 啊！知名設(shè)計(jì)師 Zeldman 也曾經(jīng)在 Twitter 上說(shuō)過(guò)："Real web designers write code. Always have, always will." Twitter 的設(shè)計(jì)師肯定都是自己寫(xiě) HTML 和 CSS 代碼。

從 Twitter 的例子可以看出，好的裝飾元素可以提升品質(zhì)感。但是也要注意一點(diǎn)，裝飾元素只是用來(lái)裝飾的，千萬(wàn)不要搞得太惹眼以至于喧賓奪主。

以上說(shuō)的這幾點(diǎn)中，修改容易并且見(jiàn)效最快的就是對(duì)齊和字體排印，把這兩點(diǎn)做好設(shè)計(jì)會(huì)直接上一個(gè)臺(tái)階。顏色用不好可以先不用，都用灰度也行，比如背景顏色 #EEE , 字體顏色 #333, 分割線顏色 #CCC …… 雖然簡(jiǎn)陋，但是“不難看”。

下面推薦一些資源，其中有書(shū)，也有在線的教程，大部分我都看過(guò)而且覺(jué)得不錯(cuò)。

1.《寫(xiě)給大家看的設(shè)計(jì)書(shū)》這本書(shū)簡(jiǎn)單易懂，介紹的也都是可以遵循的規(guī)則，很適合業(yè)余愛(ài)好者閱讀，非常推薦。

2. Type is Beautiful  很好的字體博客，里面的基礎(chǔ)文章非常值得一看。

3. Thinking with type 關(guān)于字體設(shè)計(jì)的好書(shū)，可以在線閱讀。

4. 《色彩設(shè)計(jì)的原理》最近出的書(shū)，淺顯易懂。

5. 《版面設(shè)計(jì)的原理》和 《色彩設(shè)計(jì)的原理》 是同一個(gè)系列，能學(xué)到很多關(guān)于布局的知識(shí)。 

6. Designing for the web 包含了字體排印、配色和版式設(shè)計(jì)等多方面內(nèi)容，值得一看。可以在線閱讀。

7. Twitter & Twitter Bootstrap. 如果你可以把 Twitter 整個(gè)網(wǎng)站自己寫(xiě)一遍，一定會(huì)受益匪淺。

學(xué) 習(xí)寫(xiě)程序雖然有時(shí)候也比較痛苦，但總體來(lái)說(shuō)還是比較開(kāi)心的，因?yàn)槟隳芎芸炜吹浇鉀Q問(wèn)題的成果。比如說(shuō)，有時(shí)候程序因?yàn)樯倭艘粋€(gè)分號(hào)而報(bào)錯(cuò)，當(dāng)你通過(guò)調(diào)試改 正了錯(cuò)誤，程序立刻就會(huì)運(yùn)行正常，得到你想要的結(jié)果。但是學(xué)習(xí)設(shè)計(jì)是完全不同的經(jīng)驗(yàn)，你很難遇到“只要做了XX就會(huì)有XX效果”的情況。它的變量太多了， 要完全控制這些變量需要豐富的經(jīng)驗(yàn)和很好的感性，所以請(qǐng)多一些耐心，不要期望短期有大的進(jìn)步。而這種耐心也是值得的：一旦你在這方面有所進(jìn)步，它對(duì)你的影 響就是全方位的，你不止可以做出好東西，也會(huì)在其它方面更有品味。

另外，技術(shù)和設(shè)計(jì)都是為了讓自己做的東西更好用，它們都是為產(chǎn)品服務(wù)的，而不是要凸顯自己的功能和地位。如果你通過(guò)努力終于掌握了一些設(shè)計(jì)知識(shí)和技巧以后，僅僅為了讓別人知道你也懂設(shè)計(jì)就故意在自己做的東西里加一些完全不必要的“炫耀”，那真是一件值得羞恥的事情。