申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
知识普及 » 我来做淘宝商城的首页设计
我来做淘宝商城的首页设计
奈薇网站制作
于
2019-07-07 21:01
发表
阅读次数
2321
次
今天淘宝首页的导航又改版了，和上一次淘宝商城改版一样，微博上的朋友七嘴八舌给了不少意见，粗粗看来大多是负面的意见。我一向认为负面意见大家都会提，重要的是能提出有建设性的意见。刚好现在已经离开淘宝，反倒可以公开地说说我的意见，对错都请大家多指教了。
这两次改版，从交互上来说没有大的问题。大首页中规中矩，横向Tab为主导航、左侧纵向Tab为辅导航（非二级导航，如为二级，最好还是横的），把淘宝目前的“主业”、“辅业”说得非常清楚了。
商城首页交互更有“出彩”的地方，就是左上角的“所有商品分类”。这个交互在搜索结果页面可以体现出它的优势来，算是一个很好的借鉴（应该来自amazon)。
但是，从视觉设计上来讲，两个页面都有一些问题。特别是大首页的视觉设计，可以算得上是重大失误。
我们说“设计=解决问题”，而视觉设计，就是“用视觉语言去解决逻辑问题”。举一个很简单的例子，如果一个东西重要，我们会让它居中、留白、加大、加粗等等。居中（位置）、留白（色彩）这些都是视觉语言，我们用它来解决一个逻辑问题——“重要”。
视觉设计师在做设计的时候，一定要牢牢记住这句话。打开PS之前心里应该很明白：我要解决的逻辑问题是什么？然后再打开PS，开始选择你掌握的视觉语言。
在这里我只以商城首页为例来具体讲讲它的问题。只说商城首页是因为我知道它的设计师是我曾经的徒弟飞飞，她是淘宝最出色的视觉设计师之一，也是我带过的视觉设计师中最有灵气的一位。
这是目前的商城首页：
这个页面视觉冲击力强，主次分明，品牌形象表达极富张力。特别是顶部的大色块，用得非常大胆，而且效果出色（无论下面的banner怎么花哨，都不会抢过它了）。
但此页面有两个致命伤：
搜索框不明显，有“被淹没”的感觉；左侧的分类菜单，起的是导航的作用，但没有与“主导航”产生任何的视觉关联。这两个致命伤，严重地削弱了商城首页最主要的功能：引导流量。
所有电子商务网站首页，对流量的引导功能，都少不了这三样：搜索、分类、推荐。搜索和分类是用户主动自我引导，是精准流量。如果对这部分流量不能很好地把握，一定会从最终的销售数字上看到后果。
接下来我们分别分析这两个问题产生的原因。
先看这个搜索框的局部：
发现问题了么？还没有？^_^这样看应该非常明显了。这里有两个白色长条，一个是非常有用的搜索框，另一个是几乎无用的留白。它们在这么近的距离上同时出现（间隔太近），两侧又都是这么重、这么花哨的色彩，我们的眼睛和大脑，铁定会把它们归为一组。注意我的说法是——“归为一组”，也就是在逻辑上把它们归作了一类，这还能不出问题么？当然被淹了。
要解决这个问题也不难，同样是运用视觉语言来解决。比如让它们在空间上分开一点、让其中一个条换个颜色等等。
再来看菜单的局部：
我们用同样的思路来看，这里面哪些东西是一组的？很明显“淘品牌”和“所有商品分类”是一组，下面的菜单是另一组。从逻辑的角度来看它，问题是不是显而易见？
另一个问题就不是那么明显了，这要在搜索结果页面才能看到，也就是我上面提到“出彩的交互”。当用户鼠标hover在“所有商品分类”按钮上的时候。下面灰色的分类菜单会以DropdownMenu的形式向下展开。所以这里还有一个隐含的逻辑问题需要解决，就是“按钮”与“下拉菜单”是一组。
这是我改的效果图，看看是不是好了些：
一共有四处小改动：
加了个渐变背景，这样搜索框下面的白色长条就没有了；把搜索框向上移了一点，继续拉开与下方空白之间的距离。这样一来，它就不会被淹了；菜单的图标改成了红色，与顶上的导航呼应，形成一组；把菜单向上移了十来个像素，冲进了大色块，并加了一点点投影，体现出它的“下拉菜单”特性。所以视觉设计实际上在解决的还是交互问题——或者极端一点说——是逻辑问题。
某些设计师做了几年甚至十几年
网页设计
，却仍然认为
网页设计
是一个艺术问题，这是大错特错的。
淘宝大首页的问题就不说了，大家有兴趣的话可以跟着讨论讨论，也希望看到它尽快的完善。
淘宝的设计师已经是行业中千挑万选的精英，实际经验丰富，如果整个团队的“设计理念”和“设计哲学”的大方向正确，一定能继续保持领头羊的地位。
我来做淘宝商城的首页设计相关标签：
网站建设方案
，
网页制作
，
网站制作方案
，
网站建造
相关热点推荐
细节处理让网页设计与众
企业网站建站的首要解决
网站如何吸引用户，提高
保持网站流量对网站改版
做网站设计应该更看重框
搜索引擎优化(SEO)
如何挑选专业的网站建设
奈薇建站网科技2017
如何推广网站宣传
好设计应该是平凡的设计
交互设计实用指南系列–
HTML5技术的优点和
行之有效的网络推广方式
网页中背景纹理的7个设
青岛公司如何做英文网站
做网站优化需要达到的目
方便和实用
网站颜色在网站建造策划
浅谈网站首页元素的放置
关于网站排名的基本原则
优化你的google
影响网站排名的一些不必
新站如何尽快让搜索引擎
网络广告与网站推广的步
青岛网站建设之SEO优
交互设计有效性之操作入
设计网页页面内容要新颖
让设计散发文化韵味
青岛做网站多少钱
TDK是什么？有什么作
如何选择一家好的青岛网
WEB站点的质量测试是
谈网页优化及网站优化的
网站推广之如何炒红你的
网络分析的前置知识（一
Google面包屑导航
北京网站设计应从运营和
响应式网站的利与弊
为何青岛网站建设公司提
青岛高端定制网站价格
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户