碼農如何快速打造一個有設計感的網站

出處：http://www.geekpark.net/topics/176891

注：擁有屬於本身的網站是不少人的夢想，但大多數人只能藉助像 WordPress 這樣的 CMS 實現，甚至不少公司網站也是這樣。但這些網站大多數看起來都比較缺少設計感，通俗來說就是有點「土」。那麼對於像程序員以及其餘對設計比較小白們來講，如何能讓你的網站看起來更加前衛，有範，有設計感呢？極客公園編譯了 24WAYS 的文章How to Make Your Site Look Half-Decent in Half an Hour 爲您提供解決方法。

像我這樣的程序員來講常常被「設計」這個詞嚇到，由於我是一名程序員而不是設計師，我擁有的是計算機學位證，另外我對 Comic Sans 字體並不介意。（注：Comic Sans 字體是 Win95 附帶的一種漫畫字體，設計行業極爲排斥，設計師或那些擁有美學情結的人不屑與之爲伍。更多查看這篇爲何不要使用 Comic sans 字體）

雖然只是一名程序員，但我仍是想讓本身的網站看起來更加吸引人，一方面出於虛榮，由於這樣能夠顯得我更加「專業」，而另外一方面是出於現實，由於研究機構調查發現用戶會更加信任那些網站「看起來」很好的網站。可是由於很長時間一直從事的是編程工做，對設計並非熟悉，甚至懼怕，由於在我這個外行看來設計是由不少只能感覺不能言傳身教的規則以及所謂的設計感悟組成的，知識壁壘比較高。

可是不久以前我決定要盡我最大努力讓我網站看起來顯得更加專業一點，即便比不上真正由設計師操刀作出來的效果，但對像我這種沒有設計能力的人來講仍是頗有幫助的。

1. 使用 Bootstrap

若是你尚未使用 Bootstrap 的話那麼趕忙開始吧，這個來自 Twitter 的開源項目使得網站設計真正進入大衆化時代。

本質上 Bootstrap 是一種隔柵系統，由兩名 twitter 員工 Mark Otto 和 Jacob Thornton 開發的開源前端框架[注：想了解更多請查看什麼是 Twitter Bootstrap？]，它集成了不少 CSS 樣式的合集，能夠幫助那些不懂或者不擅長 CSS 的開發人員快速的創建一個外觀看起來很不錯的網站。

使用 Bootstrap 的另外一個好處就是網站自己就是自適應的（Responsive），能夠省去各類爲移動設備等的適配工做。此外，Bootstrap 仍是可定製的，能夠根據你的需求本身配置。(注：英文很差的能夠查看中文版的 Bootstrap 文檔或 Bootstrap中文網)

2. Bootstrap 定製指南

決定使用 Bootstrap 是邁出的重要一步，相比其餘能夠在前端開發上節省不少精力，但有利有弊，若是你決定使用 Bootstrap 的話就意味着頗有可能會和其餘人「撞框架」，就像默認的 WordPress 皮膚同樣，若是你們都徹底用 Bootstrap 的樣式的話，會讓很多見得多的人心生厭煩。

因此，若是實在抽不出時間的話能夠去Wrap Bootstrap購買一份主題皮膚，這些主題皮膚都是由專業的設計師設計的，雖然不會成爲惟必定製的，但已經看起來至關不錯了，並且這種方法是最快速的。接下來就是以 Narrow marketing 這個模板(下圖)爲例教你如何本身定製一份徹底屬於你本身的 Bootstrap 。

一. 字體

修改網頁字體是讓網站看起來更有特點、有現代感的捷徑，咱們能夠去谷歌的字體服務（免費正版）中隨意挑選本身喜歡的字體，可是要注意字體間的搭配，在這裏咱們選擇由 DesignShack 推薦的谷歌字體搭配中的一種：Cardo（用於標題） 和 Nobile（用於主體內文）。

1. 在網頁頭部中加入此代碼：

2. 在 CSS 樣式表 custom.css 中加入如下代碼：h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}

添加完後刷新便可查看效果了，如今咱們的網站樣式已經變成下面這樣了，看起來比默認好多了。

此外，除了谷歌的字體服務外還可使用像 Fontdeck或 Typekit 字體服務，它們的字體更多，更多的字體搭配方案能夠參考Type Connection。

二. 紋理

知道如何讓一個網站看起來更加高雅優雅一些嗎？是的，紋理。就像 24WAY 的背景紋理同樣。

可是這些紋理效果應該去哪裏尋找呢？設計師 Atle Mo 的 Subtle Patterns 網站是個不錯的去處，咱們接下來就使用這個網站上的 Cream Dust 紋理。點擊下載，將紋理圖片保存到本地，而後放到根目錄下的 /img/ 目錄文件夾中，最後到 CSS 樣式表中加入代碼 body { background: url(/img/cream_dust.png) repeat 0 0;} 便可。(若是須要更多樣式的紋理或紋理的其餘用法的話能夠看看 Smashing 的這篇文章)

添加紋理先後對比(大圖)

三. 圖標

這裏的圖標並非指那些透明的 PNG 圖片圖標，而是圖標字體，其加載方式和字體同樣，由 CSS 樣式控制，比起圖片圖標來講這種圖標字體加載速度更加，對資源的消耗也更低。在去年 24WAY 曾經有一篇如何在網站中使用圖標字體的文章。

對於 Bootstrap 框架來講，整合的圖標字體是Font Awesome(Shifticons也是一個不錯的選擇)，和谷歌的字體服務同樣也是免費開源的。要使用它只需將其下載下來，而後在根目錄下建立 /fonts/ 文件夾，將其放進去。而後再將 font-awesome.css 文件放到 /css/ 目錄文件夾。

接着將引用寫入網頁頭部中，代碼爲 ，這時候咱們能夠隨時在網站上任意地方自由使用這些圖標字體了，如要想將一個卡車圖標添加到註冊按鈕的話只需聲明一下就能夠， Sign up today。同時爲了防止加入圖標字體後引發按鈕拉伸變形，還須要一點點額外的工做，將按鈕寬度加大一點（.jumbotron .btn i { margin-right: 8px; }）。最後效果以下：

四. CSS3

將上面都搞定後接下來要作的就是再加點 CSS3 特效了，若是時間不夠的話簡單的添加上盒陰影box-shadow和字體陰影text-shadow就可讓網站增色很多，CSS 代碼以下。

h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }

若是時間足夠的話還能夠添加一個放射漸變填充效果，可讓標題的顯示效果更重一些，以下面對比圖所示。(若是想要更多 CSS 效果的話能夠去學習一下 CodeSchool 的在線教程)

五. jQuery

其實到這裏了話網站看起來已經很不錯了，但爲了讓它更加個性化，還須要再添加上一張背景圖片。對不少程序員來講這一步是比較難以進行的，那麼應該如何選擇一張設計師可能會使用的圖片呢？答案就是去iStockPhoto或相似的付費圖庫中去尋找。

這裏咱們將使用 Winter Sun 這張照片，爲了讓網站保持自適應佈局，還須要使用 Backstretch 這個 jQuery 插件讓背景圖能夠隨時自動調整大小。

1. 首先須要付費下載背景圖片，而後放到 /img/ 文件目錄中去。

2. 將此圖片設置爲的背景圖(background-p_w_picpath): $.backstretch("/img/winter.jpg");

3. 加入背景圖後網頁主題部分會產生遮擋，因此可讓其透明，這樣網站效果看起來會更加現代、有設計感。這裏可使用這個技巧將網站變得透明，代碼見右邊，.container-narrow {background: url(/img/cream_dust_transparent.png) repeat 0 0;}

 效果

六. 色調

到這幾乎差很少已經完成調整了，但若是你夠細心的話會發現按鈕以及導航菜單的顏色仍是 Bootstrap 默認的藍色系。在有着設計師存在網站，設計師都會負責進行網站色調的調整，爲了保證網站的一致性，全部按鈕和導航通常是三到四種顏色(更多能夠查看極客公園之間的文章小按鈕大學問)。

在這裏，雖然不可能像大公司網站那樣取色嚴謹，但仍是有一些快速的方法使網站看起來很搭配的。

1. 使用 GIMP 的取色器讀取背景圖片的主題顏色，確認其 GBR 十六進制值；

2. 使用 Color Scheme Designer確認與差別大但同時又互補的顏色；

3. 最後根據肯定的顏色來制定按鈕，能夠用[Bootstrap Buttons][]等在線直接生成。

這樣首頁上那個大大的註冊按鈕就搞定了，接下來是修改導航菜單的顏色，這個比較簡單，寫入代碼 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 便可。看看咋樣。

結語

若是經歷過了上面所說的流程的話，相信你已經能夠在比較短的時間內製做出了一個還能拿得出手的網站了。