活捉一个野生网页进行改版

  第一步，我们对这个网页进行整体分析。   从网站的整体可以看出，这个网站还是有设计感的，但是对字体的选用还有一些小的细节存在这问题：红色的大写英文标题的字体给人不够大气。产品图片展示的效果不够精致。网页最后收尾部分略显杂乱。这应该是几年前流行的了。

  整体分析完成了，下面进入第二步，开始绘制网页了。我将分版块的进行分析和改版。

  

  第一部分，导航栏。原版的页面是通过文字左右的断线、短线和两边竖线都变为红色和底色上面的白色方块作为选中状态，它的缺点很明显：选中状态不够突出（1.短线太小，不抢眼。2.短线和细线太小，颜色不能突出。3.底色和高亮色的区别不大，不易识别）。

  改进方式：直接改变文字颜色，其它地方不变，这样做清晰明了。还能为程序员减轻负担，何乐而不为？

  第二部分，banner。这一部分改版前后各有好坏吧，这部分由于赶进度就找了一张banner图进行了小改动。原版的banner色彩和网页整体很配，但是把轮播条放banner之外总感觉有点怪。所以我就把轮播条放到了banner内部，并且缩小了尺寸，使其更加精致。

  第三部分，促销活动。原版的英文标题字体的问题在前面已经提到过了，就不多说了。其中有个重大的问题是，这个做电器的网站促销活动居然不是卖家电，而是酒店推广，这就耐人寻味了。还有一个问题是产品图片太大，占满了空间，让人压抑。

  改进方式：英文标题字体选用这种比较大气的字体。促销内容要符合网站的买点，换成家电的。把图片适当缩小，恰当的留白会让人更加舒服。

  除了这些，还对整个网站的视觉逻辑进行了重排：

   1.促销活动下面的“查看更多”去掉了边宽，换成了蓝色，简单而美观。灵感是从苹果网站里来的。

   2.价格标签用的是灰底配蓝字，凸显价格。并且加了一点阴影，让其不那么死板。

  第四部分，家电常识。这一部分最主要的是对排版进行了规范。该对其的对其。该替换的替换。其实改版后的“查看更多”可以移到家电常识的下面去，这样会让版面更加同一。

  第五部分，产品展示。原版里边最主要的问题是逻辑混乱。既有分类又有查看更多，都在导航里边，而且下边还有轮播。点击分类就在下面显示几个该分类的产品，那“查看更多”的位置也不会出现在导航栏里边。

  改进方式：多列几个产品进行展示就行了，看更多的商品就点击“查看更多”跳转到产品分类页面。商品的价格标签和上面促销部分一样，灰底蓝字加阴影。不过为了打破常规，增加设计感，将价格标签超出了图片范围，并且没有与之对其。

  第六部分，最新资讯和联系我们。原版这个部分显得比较拥挤，给人虎头蛇尾的感觉。

  改进方式：将其拆开为两部分。每个部分都是一个独立的个体。并且进行适当的排版，就会得到不一样的效果。

  

  改版结束，做个总结。设计一个网页不仅要关注每个版块的排版，更重要的是要从整体上看这个网站，找到各个版块之间的逻辑关系，这样的网站才能打动用户。其实这个网站还有一个返回顶部按钮的。结果忘了存。

  好了，这期文章结束，欢迎各位朋友交流学习。