第一次看douban.com，有一種拿著(zhù)“讀書(shū)”雜志在手上閱讀的感覺(jué)，很素雅，好像還有那么點(diǎn)書(shū)香氣息。被中國式網(wǎng)站強奸得都習以為常，以為網(wǎng)站也就這樣而且也只能這樣，無(wú)疑好多人第一次看到douban.com的時(shí)候都會(huì )被他的網(wǎng)站的簡(jiǎn)潔所觸動(dòng)，都會(huì )感覺(jué)眼前一亮！為什么會(huì )這樣呢，于是有些想法，來(lái)看看douban.com的網(wǎng)站設計方面的東西，看看他到底是怎么做的呢：

1、采用div+css的頁(yè)面技術(shù)，從”網(wǎng)站重構“一書(shū)翻譯以來(lái)，此種布局方式已經(jīng)開(kāi)始深入人心，好處不多說(shuō)（可以訪(fǎng)問(wèn)ajie的w3cn.org 了解），可說(shuō)web2.0必備。

2、通過(guò)色塊底色來(lái)突出整塊內容，重要顏色有淺粉，淺藍，和白色底結合起來(lái)，非常清爽。

3、douban.com的核心是書(shū)籍、音樂(lè )、電影和用戶(hù)（小組），都采用縮略圖，用戶(hù)（小組）的縮略圖小一些。前三者網(wǎng)上的圖片一般都比較好看，也必須要大一些，后者因為可以上傳，設計成更小的圖，能使得圖片顯得好看。

4、除上面以外，douban對圖片及其吝嗇，幾乎沒(méi)有。連用戶(hù)發(fā)評論，發(fā)帖都不可發(fā)圖片。這樣好處是非常明顯的，一個(gè)能夠使得用戶(hù)專(zhuān)注在文字上，而圖片部分都和網(wǎng)站核心相關(guān)，不會(huì )產(chǎn)生無(wú)關(guān)的東西。另外，使得網(wǎng)站訪(fǎng)問(wèn)速度非?？?。

5、不管什么頁(yè)面都是采用相同布局。布局采用上中下方式。最上面為導航；中間為2列方式，左邊為頁(yè)面核心內容，右面為輔助和相關(guān)功能和信息；下面是站務(wù)導航。所有導航同樣沒(méi)有一張圖片。

6、樣式表使用上douban也匠心獨運，鏈接的選都是深藍反白，點(diǎn)上是橙色，刪除是深紅反白，書(shū)籍/音樂(lè )/電影使用深紅反白，功能說(shuō)明和站點(diǎn)書(shū)簽 icon是綠色，推薦的星星是紅色，剩下的就是永恒不變的黑色了。整個(gè)顏色圍繞藍色和紅色色系以及綠色展開(kāi)。這個(gè)和douban的logo能符合在一起，非常的協(xié)調。

7、button使用的很少，不過(guò)我決定既然button都這么少了，還不如全部不用了，這樣更好！

8、豆瓣的頁(yè)面長(cháng)度，每個(gè)頁(yè)面非常短，一般2頁(yè)，不超過(guò)3頁(yè)。我一直認為太長(cháng)的頁(yè)面會(huì )使得用戶(hù)失去耐心，而2-3頁(yè)是最好的選擇。之所以有這個(gè)長(cháng)頁(yè)面只不過(guò)是門(mén)戶(hù)網(wǎng)站想多幾個(gè)廣告位置的做法，并不是每個(gè)網(wǎng)站都需要這樣。

9、廣告，豆瓣不同于其他網(wǎng)站，不提供花哨的廣告位，目前只有g(shù)oogle文字廣告和“讀書(shū)”，“讀者”的文字廣告，我想他以后也只會(huì )提供文字鏈接廣告，如果提供了傳統的圖片、flash廣告，整個(gè)站點(diǎn)都會(huì )變樣。

10、不使用彈出窗口，這點(diǎn)剛開(kāi)始不太習慣，后來(lái)我研究覺(jué)得這個(gè)應該跟網(wǎng)站受眾群有關(guān)系，大部分都是愛(ài)好讀書(shū)、音樂(lè )、電影者，所以讓用戶(hù)盡量順著(zhù)線(xiàn)路走完還是比較好的，因為這些東西我看沒(méi)人都是跳著(zhù)去欣賞的。因此我認為不習慣不彈出窗口的，可能也不太容易真正在douban上長(cháng)久安家，注定也不是 douban的核心用戶(hù)。

總體來(lái)說(shuō)，douban.com非常精巧的應用了div+css，并且通過(guò)色系的運用，最大限度減少圖片等等方式既使得網(wǎng)站頁(yè)面清新可人，而且可以最大限度的壓縮了網(wǎng)頁(yè)的大小，從而使得訪(fǎng)問(wèn)的效率得到了最大化。因為頁(yè)面內幾乎沒(méi)有垃圾信息，從而使得google檢索起來(lái)都非常有效率，而每頁(yè)的相關(guān)使得整站對檢索機器人也是非常友好。ui布局上，整個(gè)網(wǎng)站統一布局，非常容易上手，不容易讓用戶(hù)迷失。豆瓣的ui哲學(xué)我想跟開(kāi)發(fā)者使用python也可能有關(guān)系，python是一種通過(guò)縮進(jìn)來(lái)進(jìn)行功能邏輯快的編排，加上python本身的精悍，從而使得python程序非常的簡(jiǎn)約明了。從這個(gè)角度說(shuō)豆瓣布局可以看作python程序的編排，豆瓣的理念也可以看作python的理念。

如果說(shuō)要douban網(wǎng)站風(fēng)格屬于什么流派，我想豆瓣應該是屬于google的簡(jiǎn)約派！當然不能說(shuō)是照搬，畢竟這不同于早期我們抄歐美黑乎乎的很商業(yè)的風(fēng)格，近2年抄韓國大色塊大圖大flash模版的那種做法。我覺(jué)得google的簡(jiǎn)約有三個(gè)關(guān)鍵點(diǎn)：簡(jiǎn)單（夠用的功能，包括頁(yè)面導航）、易用（簡(jiǎn)單就入手，交互和ui）、體貼（貼近用戶(hù)心理）、專(zhuān)注（基于業(yè)務(wù)本身），在此基礎上加入自己的網(wǎng)站行業(yè)特性，是否意味著(zhù)國內web2.0網(wǎng)站重構的可能的趨勢呢？