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