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