作为一个新车评的忠实粉丝，我关注新车评也已经有很长一段时间了。以前其实发言比较少，因为说实话我总体上还是比较懒的一个人，打字实在是很麻烦一件事。

借着这次新车评改版，看到颜总博客里面的文章，正好我也从事IT行业、而且对UI设计也很感兴趣，在这里发一篇“与车无关、但与XCP有关”的文章。

本篇文章共分为以下几个部分：

0.定位分析

1.布局与色彩

2.实现——关于源码的一点分析

3.搜索功能

4.关于RSS

5.总结：用户体验与驾驶乐趣=========================

0.定位分析

一个网站的定位直接决定着网站的UI设计应该是什么风格，举个例子说，新浪、网易、搜狐几大门户的首页风格很类似，从上往下分别是：登录、分类、广告（最显要位置），再往下就是焦点区，然后是各个板块的更新。再看看几个比较大众化的汽车网站的首页：汽车之家与爱卡作为门户化的汽车网站，也与新浪等门户网站的布局很类似。经典门户网站布局的方式如图1。

新车评的定位与上述网站不同。以下引用“关于我们”中的描述：（FCKeditor没有引用框，引用部分用斜体字表示，下同）

● 网站宗旨“新车评网- www.xincheping.com”是中国首个消费者类汽车专业网站，成立于2006年7月，总部位于深圳，内容面向全国。“新车评网”的宗旨是提供中立、专业和真实的汽车资讯，帮助消费者做出最正确的购车选择。● 主要内容“新车评网”在线发布国内最专业、最实用的原创汽车测评，囊括市面上有售的大部分民用车型，将每款车的优点和缺点一一列出，并给予“强烈推荐”、“值得推荐”、“尚可推荐”或“不作推荐”之一的具体评定。此外“新车评网”还设有购车行情、用车知识、精美图库等精彩栏目，满足您在选车、购车到用车阶段的不同需求。● 专业、易懂“新车评网”采用先进、严谨的测试流程和评判标准，同时以详尽易懂的形式展现出来，给予消费者最清晰、易明的购车意见。与一般汽车门户类以及专业门户类网站不同，“新车评网”的访问群体绝大部分是计划在短、中期内买车的消费者。因此，“新车评网”排除一切繁杂的花边内容，一心一意面向消费者，是您身边最方便、可信的购车好参谋。

通过上述重点标注，我想大家与我想的不谋而合，新车评的定位是：专业——与一般汽车门户类网站的定位是不同的。然而最近新车评的变化让我对于新车评的定位多少有了一些怀疑：出现了一些车市价格行情、与“汽车之家”十分类似的车型参数配置页等等，这些都是以前新车评不太关注的。然而，上面的引用内容中也提到：此外“新车评网”还设有购车行情、用车知识、精美图库等精彩栏目，满足您在选车、购车到用车阶段的不同需求。也就是说，新车评包括这些内容是符合定位的。关于这个问题，我想引用一下新车评在《新车评网2009年度“强烈推荐”车型评选》中对“马自达6：睿翼”点评的描述：

好开易开，新手老手“通吃”，这是睿翼自身的宣传。厂家无疑已经看清了主流消费者喜欢什么——豪华、舒适、甚至平庸。于是，接替马自达6的换代车型睿翼，居然努力去“靠拢”凯美瑞，这究竟是成功还是失败的方向？不管厂家如何做营销，我们相信自己的感受和判断。这台新一代马自达6——尽管换了个名字叫睿翼，它的强项依然是出色的操控表现，在我们的试车场、中高级车对比测试，睿翼总是能够轻松讨好所有驾驶者，以更快的过弯、更高的极限、更出色的人车交流，让我们看到马自达用心提升操控表现、并以此为品牌血统的坚持。我们也看到，新马6睿翼的车厢做工用料更高级了，装备更齐全了，底盘隔音和滤震更完善了，这些都是扎扎实实的进步，但它们都只是衬托红花的绿叶，红花就是操控水准和驾驶乐趣。一汽马自达最失败的就是将像将绿叶盖过红花，想去攀比满林子里的参天大树。幸好，这一切不影响睿翼是一部好车——尤其是“好开的车”的事实。

红花与绿叶，这是一个很好的比喻。在新车评这样定位专业的网站里面，我们更多希望看到的是“红花——专业的车评、客观公正的文章”，而不是“绿叶——车市价格行情、参数配置等等”。这说到底是一个度的问题，希望YYP和新车评的高层领导们能够重视。目前来说，我对XCP还是很满意的，因为即使在目前最新版的首页，一些软文也只是出现在最下方的“车市动态”中，并且标明“来源：厂商供稿”。

如果你认同新车评的专业性，那么请跟着我的思路进入下一部分。

1.布局与色彩

布局的设计应该与网站的定位紧密结合。对于新车评的首页，说实话作为一个IT从业者我一直很不满意。一个专业的网站首页的布局与门户网站是不同的，而新车评的首页太门户化了。门户化最简单的布局就是像上一部分所说的，从上向下：登录、分类、广告、焦点区、各个板块。

那么为什么说这样的布局比较适合门户网站呢？因为门户网站更多的是一个“信息集散中心”，门户网站的定位是“范而杂”。也就是说，门户网站（不管是综合门户还是专业门户），更多的是信息内容非常广泛、但每部分涉及的深度不够。因此门户网站在设计的时候，就需要更多的考虑如何将广泛的信息展现给浏览者。因此，不论是国内的门户（新浪、汽车之家）还是国外的门户（AOL）都采用这种设计方式。当然也有一些国外门户喜欢推陈出新，这不在我们这篇文章的讨论范围之内。

然而新车评这类专业性的网站追求的是内容“少而精”，这类网站的内容追求质、而不是量。那么专业性强的网站适合采用什么样的布局呢？这在业界其实也有一些争论。我个人比较推荐的布局方式是图2这种方式。

这种布局适合于专业性比较强、同时访问群体比较固定的网站。这些网站的浏览者更多的关注网站“更新了什么”，而不是“有什么样的内容”，因为他们对网站文章的质量已经有了比较高的信任度。对于这些浏览者来说，图2中的“焦点区”、“更新区”、“导航信息区”都是他们高效的信息获取来源，同时“焦点区”的内容对于初次访问的浏览者也可以起到很好的引导作用。不论对于新用户还是老用户来说，顶部的“分类区”都提供了很好的分类信息获取渠道。如果在这其中能够自然融合一个“强有力的”搜索功能，将会为用户提供更方便的信息获取渠道。

下面我们看一下专业网站使用这类布局的实例：

色彩方面，我认为此次新版的色彩我是比较满意的。整体色彩比较稳重、理性，能够体现出很好的专业性，美中不足的是字体颜色有些混乱，感觉层次不清楚。如果说颜色方面的改进建议，我觉得可以更加大胆一点，这方面可以参考前面提到的dpreview.com，采用整体黑色风格。顺便说一下，dpreview.com之所以会采用整体黑色的风格，是因为很多相机尤其是专业相机都是黑色的。因此，当访问者一打开dpreview.com的时候，给人的感觉就是——亲切。亲切，这正是我们后面总结中会提到的UI设计的一个关键点——accessibility（亲和力）的一个重要部分。

2.实现——关于源码的一些分析

说实话，我不做一线开发已经有一段时间了，因此对源码已经没有以前那么熟悉了。对于新车评此次新版的页面源码，我简单看了一下，可以看出，这是一个训练有素的团队写出来的代码。HTML部分能够很好的使用div、span以及list元素，以达到灵活性的目的。而这种灵活性，正是UI设计中第二个关键点——bulletproof（无懈可击）。很显然，开发人员已经理解了以下的两点：合法的代码，结构、表现、行为三权分立。然而如果细说一下，还是有不少可以改进之处的。举例来说： （1）“分类区”（即id为new_menuc的div元素）中，各部分分类采用的是p元素。以我的经验，这里使用list元素（即ul元素）更加适合，逻辑也更清晰一些。 （2）“焦点区”即每日聚焦，显然用户体验并不好，需要用户去点击箭头才能滚动显示焦点内容。这里还是使用自动滚动更合适。 （3）CSS代码中，结构比较凌乱，给人感觉层次感不强，主要是缩进使用的不够标准。同时，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;}这一个定义完全可以简化为：* { margin:0; padding:0; }这样，就可以基本解决在不同浏览器和平台下对于空白部分的不一致呈现的问题（表单元素除外），让开发人员能完全控制空白的处理。一个通配符的使用，使代码的可读性大大提升。

【小结】总结上面的三部分，我想套用新车评在做车评的一句话：新版首页的用料比较扎实、厚道，但设计感略显不足。

（今天上班很累，早点睡了，剩下的部分明天补充）