作為一個(gè)新車評(píng)的忠實(shí)粉絲，我關(guān)注新車評(píng)也已經(jīng)有很長(zhǎng)一段時(shí)間了。以前其實(shí)發(fā)言比較少，因?yàn)檎f(shuō)實(shí)話我總體上還是比較懶的一個(gè)人，打字實(shí)在是很麻煩一件事。

借著這次新車評(píng)改版，看到顏總博客里面的文章，正好我也從事IT行業(yè)、而且對(duì)UI設(shè)計(jì)也很感興趣，在這里發(fā)一篇“與車無(wú)關(guān)、但與XCP有關(guān)”的文章。

本篇文章共分為以下幾個(gè)部分：

0.定位分析

1.布局與色彩

2.實(shí)現(xiàn)——關(guān)于源碼的一點(diǎn)分析

3.搜索功能

4.關(guān)于RSS

5.總結(jié)：用戶體驗(yàn)與駕駛樂(lè)趣=========================

0.定位分析

一個(gè)網(wǎng)站的定位直接決定著網(wǎng)站的UI設(shè)計(jì)應(yīng)該是什么風(fēng)格，舉個(gè)例子說(shuō)，新浪、網(wǎng)易、搜狐幾大門戶的首頁(yè)風(fēng)格很類似，從上往下分別是：登錄、分類、廣告（最顯要位置），再往下就是焦點(diǎn)區(qū)，然后是各個(gè)板塊的更新。再看看幾個(gè)比較大眾化的汽車網(wǎng)站的首頁(yè)：汽車之家與愛(ài)卡作為門戶化的汽車網(wǎng)站，也與新浪等門戶網(wǎng)站的布局很類似。經(jīng)典門戶網(wǎng)站布局的方式如圖1。

新車評(píng)的定位與上述網(wǎng)站不同。以下引用“關(guān)于我們”中的描述：（FCKeditor沒(méi)有引用框，引用部分用斜體字表示，下同）

● 網(wǎng)站宗旨“新車評(píng)網(wǎng)- jxob.cn”是中國(guó)首個(gè)消費(fèi)者類汽車專業(yè)網(wǎng)站，成立于2006年7月，總部位于深圳，內(nèi)容面向全國(guó)。“新車評(píng)網(wǎng)”的宗旨是提供中立、專業(yè)和真實(shí)的汽車資訊，幫助消費(fèi)者做出最正確的購(gòu)車選擇?！?主要內(nèi)容“新車評(píng)網(wǎng)”在線發(fā)布國(guó)內(nèi)最專業(yè)、最實(shí)用的原創(chuàng)汽車測(cè)評(píng)，囊括市面上有售的大部分民用車型，將每款車的優(yōu)點(diǎn)和缺點(diǎn)一一列出，并給予“強(qiáng)烈推薦”、“值得推薦”、“尚可推薦”或“不作推薦”之一的具體評(píng)定。此外“新車評(píng)網(wǎng)”還設(shè)有購(gòu)車行情、用車知識(shí)、精美圖庫(kù)等精彩欄目，滿足您在選車、購(gòu)車到用車階段的不同需求。● 專業(yè)、易懂“新車評(píng)網(wǎng)”采用先進(jìn)、嚴(yán)謹(jǐn)?shù)臏y(cè)試流程和評(píng)判標(biāo)準(zhǔn)，同時(shí)以詳盡易懂的形式展現(xiàn)出來(lái)，給予消費(fèi)者最清晰、易明的購(gòu)車意見(jiàn)。與一般汽車門戶類以及專業(yè)門戶類網(wǎng)站不同，“新車評(píng)網(wǎng)”的訪問(wèn)群體絕大部分是計(jì)劃在短、中期內(nèi)買車的消費(fèi)者。因此，“新車評(píng)網(wǎng)”排除一切繁雜的花邊內(nèi)容，一心一意面向消費(fèi)者，是您身邊最方便、可信的購(gòu)車好參謀。

通過(guò)上述重點(diǎn)標(biāo)注，我想大家與我想的不謀而合，新車評(píng)的定位是：專業(yè)——與一般汽車門戶類網(wǎng)站的定位是不同的。然而最近新車評(píng)的變化讓我對(duì)于新車評(píng)的定位多少有了一些懷疑：出現(xiàn)了一些車市價(jià)格行情、與“汽車之家”十分類似的車型參數(shù)配置頁(yè)等等，這些都是以前新車評(píng)不太關(guān)注的。然而，上面的引用內(nèi)容中也提到：此外“新車評(píng)網(wǎng)”還設(shè)有購(gòu)車行情、用車知識(shí)、精美圖庫(kù)等精彩欄目，滿足您在選車、購(gòu)車到用車階段的不同需求。也就是說(shuō)，新車評(píng)包括這些內(nèi)容是符合定位的。關(guān)于這個(gè)問(wèn)題，我想引用一下新車評(píng)在《新車評(píng)網(wǎng)2009年度“強(qiáng)烈推薦”車型評(píng)選》中對(duì)“馬自達(dá)6：睿翼”點(diǎn)評(píng)的描述：

好開(kāi)易開(kāi)，新手老手“通吃”，這是睿翼自身的宣傳。廠家無(wú)疑已經(jīng)看清了主流消費(fèi)者喜歡什么——豪華、舒適、甚至平庸。于是，接替馬自達(dá)6的換代車型睿翼，居然努力去“靠攏”凱美瑞，這究竟是成功還是失敗的方向？不管廠家如何做營(yíng)銷，我們相信自己的感受和判斷。這臺(tái)新一代馬自達(dá)6——盡管換了個(gè)名字叫睿翼，它的強(qiáng)項(xiàng)依然是出色的操控表現(xiàn)，在我們的試車場(chǎng)、中高級(jí)車對(duì)比測(cè)試，睿翼總是能夠輕松討好所有駕駛者，以更快的過(guò)彎、更高的極限、更出色的人車交流，讓我們看到馬自達(dá)用心提升操控表現(xiàn)、并以此為品牌血統(tǒng)的堅(jiān)持。我們也看到，新馬6睿翼的車廂做工用料更高級(jí)了，裝備更齊全了，底盤隔音和濾震更完善了，這些都是扎扎實(shí)實(shí)的進(jìn)步，但它們都只是襯托紅花的綠葉，紅花就是操控水準(zhǔn)和駕駛樂(lè)趣。一汽馬自達(dá)最失敗的就是將像將綠葉蓋過(guò)紅花，想去攀比滿林子里的參天大樹(shù)。幸好，這一切不影響睿翼是一部好車——尤其是“好開(kāi)的車”的事實(shí)。

紅花與綠葉，這是一個(gè)很好的比喻。在新車評(píng)這樣定位專業(yè)的網(wǎng)站里面，我們更多希望看到的是“紅花——專業(yè)的車評(píng)、客觀公正的文章”，而不是“綠葉——車市價(jià)格行情、參數(shù)配置等等”。這說(shuō)到底是一個(gè)度的問(wèn)題，希望YYP和新車評(píng)的高層領(lǐng)導(dǎo)們能夠重視。目前來(lái)說(shuō)，我對(duì)XCP還是很滿意的，因?yàn)榧词乖谀壳白钚掳娴氖醉?yè)，一些軟文也只是出現(xiàn)在最下方的“車市動(dòng)態(tài)”中，并且標(biāo)明“來(lái)源：廠商供稿”。

如果你認(rèn)同新車評(píng)的專業(yè)性，那么請(qǐng)跟著我的思路進(jìn)入下一部分。

1.布局與色彩

布局的設(shè)計(jì)應(yīng)該與網(wǎng)站的定位緊密結(jié)合。對(duì)于新車評(píng)的首頁(yè)，說(shuō)實(shí)話作為一個(gè)IT從業(yè)者我一直很不滿意。一個(gè)專業(yè)的網(wǎng)站首頁(yè)的布局與門戶網(wǎng)站是不同的，而新車評(píng)的首頁(yè)太門戶化了。門戶化最簡(jiǎn)單的布局就是像上一部分所說(shuō)的，從上向下：登錄、分類、廣告、焦點(diǎn)區(qū)、各個(gè)板塊。

那么為什么說(shuō)這樣的布局比較適合門戶網(wǎng)站呢？因?yàn)殚T戶網(wǎng)站更多的是一個(gè)“信息集散中心”，門戶網(wǎng)站的定位是“范而雜”。也就是說(shuō)，門戶網(wǎng)站（不管是綜合門戶還是專業(yè)門戶），更多的是信息內(nèi)容非常廣泛、但每部分涉及的深度不夠。因此門戶網(wǎng)站在設(shè)計(jì)的時(shí)候，就需要更多的考慮如何將廣泛的信息展現(xiàn)給瀏覽者。因此，不論是國(guó)內(nèi)的門戶（新浪、汽車之家）還是國(guó)外的門戶（AOL）都采用這種設(shè)計(jì)方式。當(dāng)然也有一些國(guó)外門戶喜歡推陳出新，這不在我們這篇文章的討論范圍之內(nèi)。

然而新車評(píng)這類專業(yè)性的網(wǎng)站追求的是內(nèi)容“少而精”，這類網(wǎng)站的內(nèi)容追求質(zhì)、而不是量。那么專業(yè)性強(qiáng)的網(wǎng)站適合采用什么樣的布局呢？這在業(yè)界其實(shí)也有一些爭(zhēng)論。我個(gè)人比較推薦的布局方式是圖2這種方式。

這種布局適合于專業(yè)性比較強(qiáng)、同時(shí)訪問(wèn)群體比較固定的網(wǎng)站。這些網(wǎng)站的瀏覽者更多的關(guān)注網(wǎng)站“更新了什么”，而不是“有什么樣的內(nèi)容”，因?yàn)樗麄儗?duì)網(wǎng)站文章的質(zhì)量已經(jīng)有了比較高的信任度。對(duì)于這些瀏覽者來(lái)說(shuō)，圖2中的“焦點(diǎn)區(qū)”、“更新區(qū)”、“導(dǎo)航信息區(qū)”都是他們高效的信息獲取來(lái)源，同時(shí)“焦點(diǎn)區(qū)”的內(nèi)容對(duì)于初次訪問(wèn)的瀏覽者也可以起到很好的引導(dǎo)作用。不論對(duì)于新用戶還是老用戶來(lái)說(shuō)，頂部的“分類區(qū)”都提供了很好的分類信息獲取渠道。如果在這其中能夠自然融合一個(gè)“強(qiáng)有力的”搜索功能，將會(huì)為用戶提供更方便的信息獲取渠道。

下面我們看一下專業(yè)網(wǎng)站使用這類布局的實(shí)例：

色彩方面，我認(rèn)為此次新版的色彩我是比較滿意的。整體色彩比較穩(wěn)重、理性，能夠體現(xiàn)出很好的專業(yè)性，美中不足的是字體顏色有些混亂，感覺(jué)層次不清楚。如果說(shuō)顏色方面的改進(jìn)建議，我覺(jué)得可以更加大膽一點(diǎn)，這方面可以參考前面提到的dpreview.com，采用整體黑色風(fēng)格。順便說(shuō)一下，dpreview.com之所以會(huì)采用整體黑色的風(fēng)格，是因?yàn)楹芏嘞鄼C(jī)尤其是專業(yè)相機(jī)都是黑色的。因此，當(dāng)訪問(wèn)者一打開(kāi)dpreview.com的時(shí)候，給人的感覺(jué)就是——親切。親切，這正是我們后面總結(jié)中會(huì)提到的UI設(shè)計(jì)的一個(gè)關(guān)鍵點(diǎn)——accessibility（親和力）的一個(gè)重要部分。

2.實(shí)現(xiàn)——關(guān)于源碼的一些分析

說(shuō)實(shí)話，我不做一線開(kāi)發(fā)已經(jīng)有一段時(shí)間了，因此對(duì)源碼已經(jīng)沒(méi)有以前那么熟悉了。對(duì)于新車評(píng)此次新版的頁(yè)面源碼，我簡(jiǎn)單看了一下，可以看出，這是一個(gè)訓(xùn)練有素的團(tuán)隊(duì)寫(xiě)出來(lái)的代碼。HTML部分能夠很好的使用div、span以及l(fā)ist元素，以達(dá)到靈活性的目的。而這種靈活性，正是UI設(shè)計(jì)中第二個(gè)關(guān)鍵點(diǎn)——bulletproof（無(wú)懈可擊）。很顯然，開(kāi)發(fā)人員已經(jīng)理解了以下的兩點(diǎn)：合法的代碼，結(jié)構(gòu)、表現(xiàn)、行為三權(quán)分立。然而如果細(xì)說(shuō)一下，還是有不少可以改進(jìn)之處的。舉例來(lái)說(shuō)： （1）“分類區(qū)”（即id為new_menuc的div元素）中，各部分分類采用的是p元素。以我的經(jīng)驗(yàn)，這里使用list元素（即ul元素）更加適合，邏輯也更清晰一些。 （2）“焦點(diǎn)區(qū)”即每日聚焦，顯然用戶體驗(yàn)并不好，需要用戶去點(diǎn)擊箭頭才能滾動(dòng)顯示焦點(diǎn)內(nèi)容。這里還是使用自動(dòng)滾動(dòng)更合適。 （3）CSS代碼中，結(jié)構(gòu)比較凌亂，給人感覺(jué)層次感不強(qiáng)，主要是縮進(jìn)使用的不夠標(biāo)準(zhǔn)。同時(shí)，body,form,ul,li,em,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img,select,input,p{margin:0;padding:0;font-style: normal;}這一個(gè)定義完全可以簡(jiǎn)化為：* { margin:0; padding:0; }這樣，就可以基本解決在不同瀏覽器和平臺(tái)下對(duì)于空白部分的不一致呈現(xiàn)的問(wèn)題（表單元素除外），讓開(kāi)發(fā)人員能完全控制空白的處理。一個(gè)通配符的使用，使代碼的可讀性大大提升。

【小結(jié)】總結(jié)上面的三部分，我想套用新車評(píng)在做車評(píng)的一句話：新版首頁(yè)的用料比較扎實(shí)、厚道，但設(shè)計(jì)感略顯不足。

（今天上班很累，早點(diǎn)睡了，剩下的部分明天補(bǔ)充）