佳木斯湛栽影视文化发展公司

主頁 > 知識(shí)庫 > 從豆瓣網(wǎng)站設(shè)計(jì)談網(wǎng)站重構(gòu)

從豆瓣網(wǎng)站設(shè)計(jì)談網(wǎng)站重構(gòu)

熱門標(biāo)簽:呼叫中心市場(chǎng)需求 鐵路電話系統(tǒng) 智能手機(jī) 銀行業(yè)務(wù) 美圖手機(jī) 服務(wù)器配置 檢查注冊(cè)表項(xiàng) 網(wǎng)站文章發(fā)布

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

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

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

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

3、douban.com的核心是書籍、音樂、電影和用戶(小組),都采用縮略圖,用戶(小組)的縮略圖小一些。前三者網(wǎng)上的圖片一般都比較好看,也必須要大一些,后者因?yàn)榭梢陨蟼?,設(shè)計(jì)成更小的圖,能使得圖片顯得好看。

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

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

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

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

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

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

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

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

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

標(biāo)簽:長治 新疆 紅河 沈陽 滄州 樂山 上海 河南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《從豆瓣網(wǎng)站設(shè)計(jì)談網(wǎng)站重構(gòu)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    龙州县| 鄂托克前旗| 洛浦县| 宿州市| 北碚区| 新乐市| 水富县| 太康县| 庄河市| 稷山县| 凤翔县| 靖安县| 崇信县| 长垣县| 凌海市| 雅江县| 察隅县| 长治市| 马龙县| 佛学| 武汉市| 鱼台县| 英超| 齐齐哈尔市| 岳普湖县| 巴马| 玉环县| 邯郸县| 萨迦县| 泰和县| 崇礼县| 西充县| 南丰县| 肇州县| 峨边| 古浪县| 安龙县| 克拉玛依市| 磐安县| 清远市| 梁平县|