我覺得“不難看”是對一個產品最起碼的要求，難看的產品往往都很難用。程式設計師在寫程式碼的時候往往只注重功能的實現和效能的提升，忽視了外觀和易用性，其實很多時候只要注意一些基本的規則，就可以大幅度提高產品的觀感。作為一個外行，我也算是苦苦自學了好長時間的設計，這裡打算分享一些我認為比較實用的技巧，希望可以幫助到同樣在摸索的人。
需要宣告的是，這裡的目標是做出“不難看”的設計，注意，只是“不難看”而已，怎麼做得好看我也在學習。另外，我的水平也很低，只是比較能體會外行的痛苦，如果有什麼錯誤的地方，歡迎批評指正。
下面我會從四個方面來入手：對齊，字型排印，配色和裝飾元素。
1. 對齊
之所以把“對齊”單獨列出來並且放在開頭說，是因為它是一個看上去簡單但非常容易被忽視的規則。如果你真的把所有該對齊的東西都對齊了，就會發現只是簡單遵循這一個規則就會有如此大的效果。
人的眼睛是喜歡秩序的，對齊就會讓人覺得愉悅。不過有一點例外：儘量別用居中對齊，除非你有充足的理由。居中對齊會讓人覺得很業餘，你自己可以試一下好幾段文字都居中是什麼效果。
當然，也有靠不規則來出彩的設計，但那是高階玩法，我們還是乖乖對齊比較好。關於對齊有一個很好的網站可以觀摩，那就是 IA (http://informationarchitects.net/)。它的上一個版本其實更容易看到對齊的效果，可以通過這裡檢視，頂部和底部的導航看上去沒什麼聯絡，如果你對比一下會發現它們對齊得都非常好。
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: http://www.zhuoqun.net/demo/link.html
如果把色彩比作槓鈴的話，那麼程式設計師的“色彩肌肉”可能只能舉起 5 磅的重量，所以開始的時候我們不能太勉強，不要試圖去掌控跨度很大的色彩，選中一個色彩之後，任何時候都只調整 H, S, B 中的一項即可。控制住變數，事情就不會變得太糟。
因為我們的力量有限，所以要儘可能少的使用色彩，也就是說要儘量重複使用色彩。比如說，有一種色彩我們用作連結的 :hover 色彩，同時一些高亮的文字的背景色也可以使用它，這樣不但減少了色彩種類，還會給人一種視覺上的一致性，有個很好的例子就是 http://www.subtraction.com/ ,這個網站的主人以前是紐約時報的設計總監，網站除了黑白之外這個網站只有一種橘黃色。
相信很多程式設計師都聽說過 Twitter Bootstrap. Twitter Bootstrap 是一個很酷的東西，極大地減少了設計工作，非常適合不懂設計的人快速搭建網站。但現在使用 Twitter Bootstrap 的人越來越多，很多網站看上去千篇一律，讓人非常厭煩。其實完全可以根據提到的規則來定製自己的 Twitter Bootstrap, 這裡我就以頂部的導航條為例簡單做一個 demo. 首先我們看到導航條的背景樣式是這樣的：
background: #2C2C2C; background-image: -webkit-linear-gradient(top, #333, #222);
現在我們把 #333 輸入到 PhotoShop 裡面，可以看到它的 HSB 的值為 0,0,20. 現在我們保持亮度(B) 不變，通過調整 H 和 S 找到一種舒服的顏色，比如 160,90,20. 但是這個顏色亮度太低了，所以我們增加 30 的亮度，顏色就變成了 160,90,50. 十六進位制為：#.0D8059.
然後我們對其它顏色做同樣的轉換。#222 的 HSB 為 0,0,13, 然後把它的 H 和 S 的值設定為和 #333 一樣，就變成了 160,90,13, 再增加 30 的亮度，就變成了 160,90,43. 十六進位制為：#0B6E4D.
同理， #2C2C2C 會轉換成 160,90,47. 十六進位制為：#0C7854.
然後把原來樣式裡面的三個相應的顏色都替換掉就行了。背景換了之後，你會發現選單選中後的背景顏色還沒有改，原來的顏色是 #222, 現在要改成 #0B6E4D. 此外連線上的文字顯得有些暗，原來的顏色是 #999, 現在改成 #DDD. 下面是完成後的 demo (只測試了 Chrome 瀏覽器):
http://zhuoqun.github.com/demo/navbar.html
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效果”的情況。它的變數太多了，要完全控制這些變數需要豐富的經驗和很好的感性，所以請多一些耐心，不要期望短期有大的進步。而這種耐心也是值得的：一旦你在這方面有所進步，它對你的影響就是全方位的，你不止可以做出好東西，也會在其它方面更有品味。
另外，技術和設計都是為了讓自己做的東西更好用，它們都是為產品服務的，而不是要凸顯自己的功能和地位。如果你通過努力終於掌握了一些設計知識和技巧以後，僅僅為了讓別人知道你也懂設計就故意在自己做的東西里加一些完全不必要的“炫耀”，那真是一件值得羞恥的事情。
來自：IT江湖
相關閱讀
評論(1)