從douban.com豆瓣網站設計談網站重構

2024-04-27 13:53:04

字體：大中小

來源：轉載

供稿：網友

　　douban.com非常精巧的應用了div css，并且通過色系的運用，最大限度減少圖片等等方式既使得網站頁面清新可人，而且可以最大限度的壓縮了網頁的大小，從而使得訪問的效率得到了最大化。

　　第一次看douban.com，有一種拿著“讀書”雜志在手上閱讀的感覺，很素雅，似乎還有那么點書香氣息。被中國式網站強奸得都習以為常，以為網站也就這樣而且也只能這樣，無疑好多人第一次看到douban.com的時候都會被他的網站的簡潔所觸動，都會感覺眼前一亮!為什么會這樣呢，于是有些想法，來看看douban.com的網站設計方面的東西，看看他到底是怎么做的呢:

　　1、采用div css的頁面技術，從”網站重構“一書翻譯以來，此種布局方式已經開始深入人心，好處不多說(可以訪問ajie的w3cn.org 了解)，可說web2.0必備。

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

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

　　4、除上面以外，douban對圖片及其吝嗇，幾乎沒有。連用戶發評論，發帖都不可發圖片。這樣好處是非常明顯的，一個能夠使得用戶專注在文字上，而圖片部分都和網站核心相關，不會產生無關的東西。另外，使得網站訪問速度非常快。

　　5、不管什么頁面都是采用相同布局。布局采用上中下方式。最上面為導航;中間為2列方式，左邊為頁面核心內容，右面為輔助和相關功能和信息;下面是站務導航。所有導航同樣沒有一張圖片。

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

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

　　8、豆瓣的頁面長度，每個頁面非常短，一般2頁，不超過3頁。我一直認為太長的頁面會使得用戶失去耐心，而2-3頁是最好的選擇。之所以有這個長頁面只不過是門戶網站想多幾個廣告位置的做法，并不是每個網站都需要這樣。

　　9、廣告，豆瓣不同于其他網站，不提供花哨的廣告位，目前只有google文字廣告和“讀書”，“讀者”的文字廣告，我想他以后也只會提供文字鏈接廣告，假如提供了傳統的圖片、flash廣告，整個站點都會變樣。

　　10、不使用彈出窗口，這點剛開始不太習慣，后來我研究覺得這個應該跟網站受眾群有關系，大部分都是愛好讀書、音樂、電影者，所以讓用戶盡量順著線路走完還是比較好的，因為這些東西我看沒人都是跳著去欣賞的。因此我認為不習慣不彈出窗口的，可能也不太輕易真正在douban上長久安家，注定也不是 douban的核心用戶。

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

　　假如說要douban網站風格屬于什么流派，我想豆瓣應該是屬于google的簡約派!當然不能說是照搬，究竟這不同于早期我們抄歐美黑乎乎的很商業的風格，近2年抄韓國大色塊大圖大flash模版的那種做法。我覺得google的簡約有四個要害點:簡單(夠用的功能，包括頁面導航)、易用(簡單就入手，交互和ui)、體貼(貼近用戶心理)、專注(基于業務本身)，在此基礎上加入自己的網站行業特性，是否意味著國內web2.0網站重構的可能的趨勢呢?

　　原文:http://home.donews.com/donews/article/8/87717.html

上一篇：應該如何理解Web2.0標準？

下一篇：關于WebStandards一些思維和偶然想到的……