首頁 > web前端 > css教學 > 主體

從豆瓣網站設計談網站重建_CSS/HTML

WBOY
發布: 2016-05-16 12:10:49
原創
1601 人瀏覽過

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網站重構的可能的趨勢呢?

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!