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

借著這次新車評改版，看到顏總博客里面的文章，正好我也從事IT行業(yè)、而且對UI設(shè)計(jì)也很感興趣，在這里發(fā)一篇“與車無關(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)與駕駛樂趣=========================

0.定位分析

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

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

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

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

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

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

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

1.布局與色彩

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

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

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

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

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

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

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

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

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

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