
douban.com非常精巧的利用了div+css,并且通過(guò)色系的應(yīng)用,更大限度減少圖片等等方法既使得網(wǎng)站頁(yè)面清新可人,而且可以更大限度的壓縮了網(wǎng)頁(yè)的大小,從而使得拜訪的效率得到了更大化。
前幾次看douban.com,有一種拿著“讀書(shū)”雜志在手上瀏覽的感到,很素雅,似乎還有那么點(diǎn)書(shū)香氣息。被中國(guó)式網(wǎng)站強(qiáng)***得都習(xí)認(rèn)為常,認(rèn)為網(wǎng)站也就這樣而且也只能這樣,無(wú)疑好多人前幾次看到douban.com的時(shí)候都會(huì)被他的網(wǎng)站的簡(jiǎn)潔所觸動(dòng),都會(huì)感到眼前一亮!為什么會(huì)這樣呢,于是有些想法,來(lái)看看douban.com的網(wǎng)站設(shè)計(jì)方面的東西,看看他到底是怎么做的呢:
1、采用div+css的頁(yè)面技巧,從”網(wǎng)站重構(gòu)“一書(shū)翻譯以來(lái),此種布局方法已經(jīng)開(kāi)端深進(jìn)人心,利益未幾說(shuō)(可以拜訪ajie的w3cn.org 懂得),可說(shuō)web2.0**。
2、通過(guò)色塊底色來(lái)突出整塊內(nèi)容,重要色彩有淺粉,淺藍(lán),和白色底聯(lián)合起來(lái),非常清新。
3、douban.com的核心是書(shū)籍、音樂(lè)、電影和用戶(hù)(小組),都采用縮略圖,用戶(hù)(小組)的縮略圖小一些。前三者網(wǎng)上的圖片一般都比擬好看,也必需要大一些,后者由于可以上傳,設(shè)計(jì)成更小的圖,能使得圖片顯得好看。
4、除上面以外,douban對(duì)圖片及其吝嗇,幾乎沒(méi)有。連用戶(hù)發(fā)評(píng)論,發(fā)帖都不可發(fā)圖片。這樣利益是非常明顯的,一個(gè)能夠使得用戶(hù)專(zhuān)注在文字上,而圖片部分都和網(wǎng)站核心相干,不會(huì)產(chǎn)生無(wú)關(guān)的東西。另外,使得網(wǎng)站拜訪速度非???。
5、不管什么頁(yè)面都是采用雷同布局。布局采用上中下方法。更上面為導(dǎo)航;中間為2列方法,左邊為頁(yè)面核心內(nèi)容,右面為幫助和相干功效和信息;下面是站務(wù)導(dǎo)航。所有導(dǎo)航同樣沒(méi)有一張圖片。
6、樣式表應(yīng)用上douban也匠心前幾運(yùn),鏈接的選都是深藍(lán)反白,點(diǎn)上是橙色,刪除是深紅反白,書(shū)籍/音樂(lè)/電影應(yīng)用深紅反白,功效闡明和站點(diǎn)書(shū)簽 icon是綠色,推薦的星星是紅色,剩下的就是永恒不變的玄色了。全部色彩繚繞藍(lán)色和紅色色系以及綠色展開(kāi)。這個(gè)和douban的logo能符合在一起,非常的和諧。
7、button應(yīng)用的很少,不過(guò)我決定既然button都這么少了,還不如全部不用了,這樣更好!
8、豆瓣的頁(yè)面長(zhǎng)度,每個(gè)頁(yè)面非常短,一般2頁(yè),不超過(guò)3頁(yè)。我一直認(rèn)為太長(zhǎng)的頁(yè)面會(huì)使得用戶(hù)失往耐心,而2-3頁(yè)是更好的選擇。之所以有這個(gè)長(zhǎng)頁(yè)面只不過(guò)是門(mén)戶(hù)網(wǎng)站想多幾個(gè)廣告地位的做法,并不是每個(gè)網(wǎng)站都需要這樣。
9、廣告,豆瓣不同于其他網(wǎng)站,不供給花哨的廣告位,目前只有g(shù)oogle文字廣告和“讀書(shū)”,“讀者”的文字廣告,我想他以后也只會(huì)供給文字鏈接廣告,假如供給了傳統(tǒng)的圖片、flash廣告,全部站點(diǎn)都會(huì)變樣。
10、不應(yīng)用彈出窗口,這點(diǎn)剛開(kāi)端不太習(xí)慣,后來(lái)我研究感到這個(gè)應(yīng)當(dāng)跟網(wǎng)站受眾群有關(guān)系,大部分都是愛(ài)好讀書(shū)、音樂(lè)、電影者,所以讓用戶(hù)盡量順著線路走完還是比擬好的,由于這些東西我看沒(méi)人都是跳著往觀賞的。因此我認(rèn)為不習(xí)慣不彈出窗口的,可能也不太輕易真正在douban上長(zhǎng)久安家,注定也不是 douban的核心用戶(hù)。
總體來(lái)說(shuō),douban.com非常精巧的利用了div+css,并且通過(guò)色系的應(yīng)用,更大限度減少圖片等等方法既使得網(wǎng)站頁(yè)面清新可人,而且可以更大限度的壓縮了網(wǎng)頁(yè)的大小,從而使得拜訪的效率得到了更大化。由于頁(yè)面內(nèi)幾乎沒(méi)有垃圾信息,從而使得google檢索起來(lái)都非常有效率,而每頁(yè)的相干使得整站對(duì)檢索機(jī)器人也是非常友愛(ài)。ui布局上,全部網(wǎng)站同一布局,非常輕易上手,不輕易讓用戶(hù)迷失。豆瓣的ui哲學(xué)我想跟**應(yīng)用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)屬于什么流派,我想豆瓣應(yīng)當(dāng)是屬于google的簡(jiǎn)約派!當(dāng)然不能說(shuō)是照搬,畢竟這不同于早期我們抄歐美黑乎乎的很貿(mào)易的作風(fēng),近2年抄韓國(guó)大色塊大圖大flash模版的那種做法。我感到google的簡(jiǎn)約有四個(gè)關(guān)鍵點(diǎn):簡(jiǎn)略(夠用的功效,包含頁(yè)面導(dǎo)航)、易用(簡(jiǎn)略就進(jìn)手,交互和ui)、體貼(貼近用戶(hù)心理)、專(zhuān)注(基于業(yè)務(wù)本身),在此基礎(chǔ)上參加自己的網(wǎng)站行業(yè)特征,是否意味著國(guó)內(nèi)web2.0網(wǎng)站重構(gòu)的可能的趨勢(shì)呢?
從豆瓣網(wǎng)站設(shè)計(jì)談網(wǎng)站重構(gòu),歡迎合作。

查看更多寧波網(wǎng)站建設(shè)網(wǎng)站網(wǎng)站設(shè)計(jì)豆瓣