1. 前話

最近互聯(lián)網(wǎng)真是鬧劇一出接一出，先有小月月，后有李肛門，現(xiàn)有“3Q爭霸”。大部分網(wǎng)民這段時間肯定紛紛給力了。俗話說激情過后是空虛，70碼后的發(fā)展現(xiàn)在還有誰去fllow？大伙兒都是一個熱鬧看完趕場到下一場，比參觀世博還趕集。得了吧，李肛門的兒子不就13年有期，還是監(jiān)外服刑，敢問他是懷孕了？做點實在事吧，沒種去散步就別在網(wǎng)上亂吹噓，對不起89倒下的前輩！這里是車評網(wǎng)，俺一直忍著，趕在2w四保作業(yè)前寫上一篇為新車評的FACELIFE出點精力，算做點實在事。

2. 改版這點事

2.1 改版感想

自我關(guān)注xcp以來有印象的改版有三次，第一階段是最初面貌，主題基調(diào)為暗金色；第二階段較為短暫，主題基調(diào)改為藍(lán)色，輔以亮金色，沒過多久又恢復(fù)最初面貌；第三階段為現(xiàn)階段，主題基調(diào)改為白底，標(biāo)題欄以淡北卡藍(lán)為主，頁首導(dǎo)航欄改為亮金色。三次改版給我的感想是：

（1）xcp對網(wǎng)站的主題色調(diào)定位上一直搖擺不定，在以暗金色系和淡藍(lán)白底間徘徊了好幾回，幾次確定不下來。暴露出的對整體品牌打造的整體性不夠堅定。（2）頁面欄目模塊基本沒有實質(zhì)性的變動，在服務(wù)產(chǎn)品這點上倒是思路清晰。但存在欄目排版上相互矛盾或者不合理的地方，都是些細(xì)節(jié)性問題。

簡單點說幾次改版下來的效果一是版面編排上沒有實質(zhì)性進(jìn)步，二來美工方面較為薄弱。不過這兩點影響倒不是非常非常的負(fù)面，畢竟xcp的核心競爭力大家都很明白靠的是內(nèi)容資源取勝，在頁面上的落后雖然給用戶造成一定程度的不便，但總比直接套用各大門戶用爛的模板來的好上許多。

2.2 改版后的頁面分析

2.2.1 框架

單純說說頁面設(shè)計的規(guī)劃。首先咱們先從整體上入手，xcp采用傳統(tǒng)的窄式門戶框架，這樣的設(shè)計新太平洋網(wǎng)、華爾街日報中文站都在使用。其特點是以純色作為底層凸顯內(nèi)容區(qū)域并加快頁面加載的速度；以頁首導(dǎo)航欄為標(biāo)準(zhǔn)縱向延伸塑造整體結(jié)構(gòu)，所有的內(nèi)容都約束在以下范圍內(nèi)；這種排版多用在門戶類網(wǎng)站，因此整個首頁都以導(dǎo)航為設(shè)計原則。

如下圖所視，從上到小分別是欄目導(dǎo)航、焦點區(qū)域、搜索欄、AD欄、欄目索引、側(cè)邊欄和頁底區(qū)域。瀏覽完整個首頁最少需要拖動4次滑桿，這種縱向式的頁面設(shè)計決定了用戶的視覺焦點將由上至下逐漸減退，對于一名新訪問xcp的網(wǎng)民來說頁頭的欄目導(dǎo)航區(qū)域和焦點區(qū)域是決定他是否進(jìn)一步閱讀的印象關(guān)鍵。

如果要給這個首頁打分也就剛及格，色彩搭配扣10分，焦點區(qū)域的細(xì)節(jié)處理扣10分，第一視覺頁面的設(shè)計扣10分，整體性扣10分?，F(xiàn)在做汽車媒體的網(wǎng)站超級多這意味著同質(zhì)化現(xiàn)象及其嚴(yán)重，那些套模板只做轉(zhuǎn)貼的門戶肯定沒啥前途，而對一名新進(jìn)來的網(wǎng)民如何讓他第一眼就找到xcp的特色，讓他發(fā)現(xiàn)xcp與愛卡啊汽車之家啊越野e族啊的區(qū)別，就是首頁改版的重點，歸納一下也就簡單的兩點：

1. 內(nèi)容

2. 包裝

內(nèi)容自不用說，這是xcp的核心競爭力。所以這里重點說包裝，包裝換個說法就是裝B，怎么讓這個頁面一看上去很牛逼很有留下你的欲望，就在下面兩個方面：a. 色彩 b.圖片。

上圖為這次改版后的色彩搭配，明度較高，純度較低，整體色彩偏淡。所以現(xiàn)在網(wǎng)站看起來有點輕，壓不住腳。大家可以多留意純白的底色搭配，盡管白底能夠和內(nèi)容區(qū)域的白底形成天然的留白效果。大家是否覺得有些空和輕呢？下圖為xcp的第一視覺頁面，所謂第一視覺頁面是指你訪問網(wǎng)站所看到的第一個可視畫面（歡迎頁面、加載頁面除外），他的重要性猶如人的第一印象，決定網(wǎng)民是否愿意進(jìn)一步深入瀏覽。一般而言，平均每個人訪問一個新的網(wǎng)站最多不超過5個頁面，每個頁面如果不能吸引住他的注意力最多停留3秒。在這15秒以內(nèi)沒能一見鐘情網(wǎng)民基本上會說拜拜了。當(dāng)然，對于車評網(wǎng)站而言，有一大部分用戶是帶著目的性來的，大多愿意多看幾眼，這時候如果網(wǎng)站包裝足夠好，會大大地增加新用戶對網(wǎng)站的信任程度。

下圖是華爾街日報中文站的頁面設(shè)計，是我喜歡和推薦的網(wǎng)站。他同樣采用縱向編排，深灰的底色和新車評網(wǎng)的淡色系能形成鮮明的對比。大家不妨自己比較看看各種的差異。從色彩心理學(xué)的角度上看，淡的顏色往外放，深的顏色往里收，雖然大片留白是設(shè)計師試圖表達(dá)空間感的一種及其有效的方式，但在被空間束縛的門戶類版式中反而不大適用。

從網(wǎng)民的角度看，背景發(fā)散，內(nèi)容聚焦，時間一長更容易產(chǎn)生視覺疲勞。反觀華爾街日報相反的色彩調(diào)配，背景向里收，內(nèi)容向外放，不僅使內(nèi)容突出，并且營造出層次感，反而使版面顯得更為寬廣許多。

先去吃飯了，余下的有空再寫～～