編者注：本文發(fā)表于12年底，里面有些例子和鏈接可能有些過時，但它的思想沒有過時，推薦給開發(fā)者們學(xué)習(xí)。

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

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

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

下面我會從四個方面來入手：對齊，字體排印，配色和裝飾元素。

1. 對齊

之所以把“對齊”單獨列出來并且放在開頭說，是因為它是一個看上去簡單但非常容易被忽視的規(guī)則。如果你真的把所有該對齊的東西都對齊了，就會發(fā)現(xiàn)只是簡單遵循這一個規(guī)則就會有如此大的效果。

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

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

2. 字體排印（Typography）

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

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

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

第三是字間距。有些時候因為需要，我們會把一些文字設(shè)置得非常大，有些文字設(shè)置得非常小，這個時候每個字之間的間距可能就會變得過大或者過小，這個時候就需要調(diào)整一下，字體設(shè)計師們在設(shè)計一款字體的時候也會考慮這個因素。在 CSS 里面，有個屬性叫 letter-spacing ，可以調(diào)整字間距。

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

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

3. 配色

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

關(guān)于色彩基礎(chǔ)知識的書和資料我看了不少，三原色、互補色、色環(huán)和光譜等知識知道了很多，但這些東西對我的幫助微乎其微。并不是這些知識沒用，而是它們都需要輔助以大量的練習(xí)，可能還需要一個好的老師親手指導(dǎo)，而我現(xiàn)在已經(jīng)沒時間和精力再從基礎(chǔ)開始慢慢學(xué)畫畫了。不過，大量的閱讀和無用嘗試還是幫助我找到了一些比較實用并有跡可循的東西，下面就說一些竅門。

程序員一般都是用十六進制或者 RGB 來表示色彩，比如說 #FF0000 或者 rgb(100, 210, 241, 0.5) 之類。這種認(rèn)識色彩的方式非常不好，它們對你來說只是一堆隨機數(shù)字，只是“碰巧”會出現(xiàn)那種色彩。而且即使你知道 #FF0000 是紅色，你也很難通過調(diào)整這些數(shù)字來找出你想要的色彩。現(xiàn)在我們不要再用十六進制或者 RGB 來考慮色彩了，我們要用 HSB 模式: H(hues)表示色相，S(saturation)表示飽和度，B(brightness)表示亮度。

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

這樣用戶在鼠標(biāo)移動到鏈接上的時候，得到的反饋就比較自然，這里是個簡單的 demo:?http://www.zhuoqun.net/demo/link.html

如果把色彩比作杠鈴的話，那么程序員的“色彩肌肉”可能只能舉起 5 磅的重量，所以開始的時候我們不能太勉強，不要試圖去掌控跨度很大的色彩，選中一個色彩之后，任何時候都只調(diào)整 H, S, B 中的一項即可?？刂谱∽兞?，事情就不會變得太糟。

因為我們的力量有限，所以要盡可能少的使用色彩，也就是說要盡量重復(fù)使用色彩。比如說，有一種色彩我們用作鏈接的 :hover 色彩，同時一些高亮的文字的背景色也可以使用它，這樣不但減少了色彩種類，還會給人一種視覺上的一致性，有個很好的例子就是?http://www.subtraction.com/?,這個網(wǎng)站的主人以前是紐約時報的設(shè)計總監(jiān)，網(wǎng)站除了黑白之外這個網(wǎng)站只有一種橘黃色。

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

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

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

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

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

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

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

4. 裝飾元素

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

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

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

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

仔細看就能看到那個半透明的小三角

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

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

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

下面推薦一些資源，其中有書，也有在線的教程，大部分我都看過而且覺得不錯。

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

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

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

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

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

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

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

學(xué)習(xí)寫程序雖然有時候也比較痛苦，但總體來說還是比較開心的，因為你能很快看到解決問題的成果。比如說，有時候程序因為少了一個分號而報錯，當(dāng)你通過調(diào)試改正了錯誤，程序立刻就會運行正常，得到你想要的結(jié)果。但是學(xué)習(xí)設(shè)計是完全不同的經(jīng)驗，你很難遇到“只要做了XX就會有XX效果”的情況。它的變量太多了，要完全控制這些變量需要豐富的經(jīng)驗和很好的感性，所以請多一些耐心，不要期望短期有大的進步。而這種耐心也是值得的：一旦你在這方面有所進步，它對你的影響就是全方位的，你不止可以做出好東西，也會在其它方面更有品味。

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

來源：CocoaChina