1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 用户体验 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

我来做淘宝商城的首页设计--九分科技

时间:2020-06-05   分类:用户体验    作者:网络   来源:网络整理   点击:72

我来做淘宝商城的首页设计--九分科技

本文来自九分网络

今天淘宝首页的导航又改版了,和上一次淘宝商城改版一样,微博上的朋友七嘴八舌给了不少意见,粗粗看来大多是负面的意见。我一向认为负面意见大家都会提,重要的是能提出有建设性的意见。刚好现在已经离开淘宝,反倒可以公开地说说我的意见,对错都请大家多指教了。

九分网络

这两次改版,从交互上来说没有大的问题。大首页中规中矩,横向Tab为主导航、左侧纵向Tab为辅导航(非二级导航,如为二级,最好还是横的),把 淘宝目前的“主业”、“辅业”说得非常清楚了。

内容采集来自9fen.net

商城首页交互更有“出彩”的地方,就是左上角的“所有商品分类”。这个交互在搜索结果页面可以体现出它的优势来,算是一个很好的借鉴(应该来自 amazon )。

九分网络

但是,从视觉设计上来讲,两个页面都有一些问题。特别是大首页的视觉设计,可以算得上是重大失误。 www.9fen.net

我们说“设计=解决问题”,而视觉设计,就是“用视觉语言去解决逻辑问题”。 举一个很简单的例 子,如果一个东西重要,我们会让它居中、留白、加大、加粗等等。居中(位置)、留白(色彩)这些都是视觉语言,我们用它来解决一个逻辑问题——“重要”。 内容采集来自9fen.net

视觉设计师在做设计的时候,一定要牢牢记住这句话。打开PS之前心里应该很明白:我要解决的逻辑问题是什么?然后再打开PS,开始选择你掌握的视觉 语言。

本文来自九分网络

在这里我只以商城首页为例来具体讲讲它的问题。只说商城首页是因为我知道它的设计师是我曾经的徒弟飞飞,她是淘宝最出色的视觉设计师之一,也是我带 过的视觉设计师中最有灵气的一位。

copyright 9fen.net

这是目前的商城首页(点击放大): 本文来自九分网络

这个页面视觉冲击力强,主次分明,品牌形象表达极富张力。特别是顶部的大色块,用得非常大胆,而且效果出色(无论下面的banner怎么花哨,都不 会抢过它了)。 www.9fen.net

但此页面有两个致命伤: www.9fen.net

搜索框不明显,有“被淹没”的感觉; 九分网络

左侧的分类菜单,起的是导航的作用,但没有与“主导航”产生任何的视觉关联。

内容采集来自9fen.net

这两个致命伤,严重地削弱了商城首页最主要的功能:引导流量。 copyright 9fen.net

所有电子商务网站首页,对流量的引导功能,都少不了这三样:搜索、分类、推荐。搜索和分类是用户主动自我引导,是精准流量。如果对这部分流量不能很 好地把握,一定会从最终的销售数字上看到后果。

内容采集来自9fen.net

接下来我们分别分析这两个问题产生的原因。

内容采集来自9fen.net

先看这个搜索框的局部:

内容采集来自9fen.net

toabao-mall-nav-search 内容采集来自9fen.net

九分网络

发现问题了么?还没有?^_^ 这样看应该非常明显了。这里有两个白色长条,一个是非常有用的搜索框,另一个是无乎无用的留白。它们在这么近的距离上同时出现(间隔太近),两侧又都是这 么重、这么花哨的色彩,我们的眼睛和大脑,铁定会把它们归为一组。注意我的说法是——“归为一组”,也就是在逻辑上把 它们归作了一类,这还能不出问题么?当然被淹了。 www.9fen.net

要解决这个问题也不难,同样是运用视觉语言来解决。比如让它们在空间上分开一点、让其中一个条换个颜色等等。 九分网络

再来看菜单的局部:

copyright 9fen.net

toabao-mall-nav-cat

内容采集来自9fen.net

www.9fen.net

我们用同样的思路来看,这里面哪些东西是一组的? 很明显“淘品牌”和“所有商品分类”是一组,下面的菜单是另一组。从逻辑的角度来看它,问题是不是显而易见?

九分网络

另一个问题就不是那么明显了,这要在搜索结果页面才能看到,也就是我上面提到“出彩的交互”。当用户鼠标hover在“所有商品分类”按钮上的时 候。下面灰色的分类菜单会以Dropdown Menu的形式向下展开。所以这里还有一个隐含的逻辑问题需要解决,就是“按钮”与“下拉菜单”是一组。

内容采集来自9fen.net

这是我改的效果图(点击放大),看看是不是好了些:

九分网络

toabao-mall-nav

内容采集来自9fen.net

本文来自九分网络

一共有四处小改动: 本文来自九分网络

加了个渐变背景; 九分网络

把搜索框向上移了一点,与第1点配合,它就不会被淹了; 九分网络

菜单的图标改成了红色,与顶上的导航呼应,形成一组;

www.9fen.net

把菜单向上移了十来个像素,冲进了大色块,并加了一点点投影,体现出它的“下拉菜单”特性。 copyright 9fen.net

所以视觉设计实际上在解决的还是交互问题——或者极端一点说——是逻辑问题。

九分网络

某些设计师做了几年甚至十几年网页设计,却仍然认为网页设计是一个艺术问题,这是大错特错的。

本文来自九分网络

淘宝大首页的问题就不说了,大家有兴趣的话可以跟着讨论讨论,也希望看到它尽快的完善。 内容采集来自9fen.net

标签: 用户体验

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----