这个页面视觉冲击力强,主次分明,品牌形象表达极富张力。特别是顶部的大色块,用得非常大胆,而且效果出色(无论下面的banner怎么花哨,都不会抢过它了)。
但此页面有两个致命伤:
搜索框不明显,有被淹没的感觉;
左侧的分类菜单,起的是导航的作用,但没有与主导航产生任何的视觉关联。
这两个致命伤,严重地削弱了商城首页最主要的功能:引导流量。
所有电子商务网站首页,对流量的引导功能,都少不了这三样:搜索、分类、推荐。搜索和分类是用户主动自我引导,是精准流量。如果对这部分流量不能很好地把握,一定会从最终的销售数字上看到后果。
接下来我们分别分析这两个问题产生的原因。
先看这个搜索框的局部:
发现问题了么?还没有?^_^ 这样看应该非常明显了。这里有两个白色长条,一个是非常有用的搜索框,另一个是几乎无用的留白。它们在这么近的距离上同时出现(间隔太近),两侧又都是这么重、这么花哨的色彩,我们的眼睛和大脑,铁定会把它们归为一组。注意我的说法是归为一组,也就是在逻辑上把它们归作了一类,这还能不出问题么?当然被淹了。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)要解决这个问题也不难,同样是运用视觉语言来解决。比如让它们在空间上分开一点、让其中一个条换个颜色等等。
再来看菜单的局部:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)我们用同样的思路来看,这里面哪些东西是一组的? 很明显淘品牌和所有商品分类是一组,下面的菜单是另一组。从逻辑的角度来看它,问题是不是显而易见?
另一个问题就不是那么明显了,这要在搜索结果页面才能看到,也就是我上面提到出彩的交互。当用户鼠标hover在所有商品分类按钮上的时候。下面灰色的分类菜单会以Dropdown Menu的形式向下展开。所以这里还有一个隐含的逻辑问题需要解决,就是按钮与下拉菜单是一组。
这是我改的效果图(点击放大),看看是不是好了些:
一共有四处小改动:
加了个渐变背景,这样搜索框下面的白色长条就没有了;
把搜索框向上移了一点,继续拉开与下方空白之间的距离。这样一来,它就不会被淹了;
菜单的图标改成了红色,与顶上的导航呼应,形成一组;
把菜单向上移了十来个像素,冲进了大色块,并加了一点点投影,体现出它的下拉菜单特性。
所以视觉设计实际上在解决的还是交互问题或者极端一点说是逻辑问题。
某些设计师做了几年甚至十几年网页设计,却仍然认为网页设计是一个艺术问题,这是大错特错的。
淘宝大首页的问题就不说了,大家有兴趣的话可以跟着讨论讨论,也希望看到它尽快的完善。
淘宝的设计师已经是行业中千挑万选的精英,实际经验丰富,如果整个团队的设计理念和设计哲学的大方向正确,一定能继续保持领头羊的地位。