我来做淘宝商城的首页设计
2010-05-05 20:28:34今天淘宝首页的导航又改版了，和上一次淘宝商城改版一样，微博上的朋友七嘴八舌给了不少意见，粗粗看来大多是负面的意见。我一向认为负面意见大家都会提，重要的是能提出有建设性的意见。刚好现在已经离开淘宝，反倒可以公开地说说我的意见，对错都请大家多指教了。
这两次改版，从交互上来说没有大的问题。大首页中规中矩，横向Tab为主导航、左侧纵向Tab为辅导航（非二级导航，如为二级，最好还是横的），把淘宝目前的“主业”、“辅业”说得非常清楚了。
商城首页交互更有“出彩”的地方，就是左上角的“所有商品分类”。这个交互在搜索结果页面可以体现出它的优势来，算是一个很好的借鉴（应该来自amazon )。
但是，从视觉设计上来讲，两个页面都有一些问题。特别是大首页的视觉设计，可以算得上是重大失误。
我们说“设计=解决问题”，而视觉设计，就是“用视觉语言去解决逻辑问题”。举一个很简单的例 子，如果一个东西重要，我们会让它居中、留白、加大、加粗等等。居中（位置）、留白（色彩）这些都是视觉语言，我们用它来解决一个逻辑问题——“重要”。
视觉设计师在做设计的时候，一定要牢牢记住这句话。打开PS之前心里应该很明白：我要解决的逻辑问题是什么？然后再打开PS，开始选择你掌握的视觉语言。
在这里我只以商城首页为例来具体讲讲它的问题。只说商城首页是因为我知道它的设计师是我曾经的徒弟飞飞，她是淘宝最出色的视觉设计师之一，也是我带过的视觉设计师中最有灵气的一位。
这是目前的商城首页（点击放大）：
这个页面视觉冲击力强，主次分明，品牌形象表达极富张力。特别是顶部的大色块，用得非常大胆，而且效果出色（无论下面的banner怎么花哨，都不会抢过它了）。
但此页面有两个致命伤：
- 搜索框不明显，有“被淹没”的感觉；
- 左侧的分类菜单，起的是导航的作用，但没有与“主导航”产生任何的视觉关联。
这两个致命伤，严重地削弱了商城首页最主要的功能：引导流量。
所有电子商务网站首页，对流量的引导功能，都少不了这三样：搜索、分类、推荐。搜索和分类是用户主动自我引导，是精准流量。如果对这部分流量不能很好地把握，一定会从最终的销售数字上看到后果。
接下来我们分别分析这两个问题产生的原因。
先看这个搜索框的局部：
发现问题了么？还没有？^_^ 这样看应该非常明显了。这里有两个白色长条，一个是非常有用的搜索框，另一个是几乎无用的留白。它们在这么近的距离上同时出现（间隔太近），两侧又都是这么重、这么花哨的色彩，我们的眼睛和大脑，铁定会把它们归为一组。注意我的说法是——“归为一组”，也就是在逻辑上把它们归作了一类，这还能不出问题么？当然被淹了。
要解决这个问题也不难，同样是运用视觉语言来解决。比如让它们在空间上分开一点、让其中一个条换个颜色等等。
再来看菜单的局部：
我们用同样的思路来看，这里面哪些东西是一组的？ 很明显“淘品牌”和“所有商品分类”是一组，下面的菜单是另一组。从逻辑的角度来看它，问题是不是显而易见？
另一个问题就不是那么明显了，这要在搜索结果页面才能看到，也就是我上面提到“出彩的交互”。当用户鼠标hover在“所有商品分类”按钮上的时候。下面灰色的分类菜单会以Dropdown Menu的形式向下展开。所以这里还有一个隐含的逻辑问题需要解决，就是“按钮”与“下拉菜单”是一组。
这是我改的效果图（点击放大），看看是不是好了些：
一共有四处小改动：
- 加了个渐变背景，这样搜索框下面的白色长条就没有了；
- 把搜索框向上移了一点，继续拉开与下方空白之间的距离。这样一来，它就不会被淹了；
- 菜单的图标改成了红色，与顶上的导航呼应，形成一组；
- 把菜单向上移了十来个像素，冲进了大色块，并加了一点点投影，体现出它的“下拉菜单”特性。
所以视觉设计实际上在解决的还是交互问题——或者极端一点说——是逻辑问题。
某些设计师做了几年甚至十几年网页设计，却仍然认为网页设计是一个艺术问题，这是大错特错的。
淘宝大首页的问题就不说了，大家有兴趣的话可以跟着讨论讨论，也希望看到它尽快的完善。
淘宝的设计师已经是行业中千挑万选的精英，实际经验丰富，如果整个团队的“设计理念”和“设计哲学”的大方向正确，一定能继续保持领头羊的地位。
全文
May 5th, 2010 at 20:54:55
哥，你还是那么牛！o(∩_∩)o 哈哈
May 5th, 2010 at 21:53:42
改后的效果好多了。不过我在想啊，在加了渐变的背景之后，左侧的菜单不上移的话，也应该够突出了吧，上移之后的感觉是漂浮在那个大色块的上面，还是有点怪
May 5th, 2010 at 21:53:50
啊，无语了，飞飞知道在说什么……
May 5th, 2010 at 22:20:48
第3、4点体现功力，为内心纯粹的人鼓掌！
May 5th, 2010 at 22:27:59
设计的哲学 和 设计的责任感 很重要。
May 5th, 2010 at 22:51:53
飘过吧
May 5th, 2010 at 22:52:52
@豆子：渐变并不是为了突出菜单，而是为了去掉搜索框下面的白色条。 我这里是为了说明道理，做了一个欠考虑的方案，相应淘宝一定会出一个更好的方案。
@mimiqiao：啥事无语？
May 5th, 2010 at 23:02:09
如果分类菜单的图标不是单色的话会不会更好呢
May 5th, 2010 at 23:06:16
@kidcvs，应该不会更好，反而会喧宾夺主。这几个图标的设计是非常见功力的，目前的很不错。
May 6th, 2010 at 00:08:29
打到点子上了。
尤其喜欢把导航栏插进去一些，有阴影就立体起来了，有了层次感。
第一点上你加渐变背景是为了突出视觉层次吗？那整个头要不要也有个影子下来？
对搜索框，我看法一样，如果能在里面灰色放个把关键词，是不是会有提示，也算增加“我是搜索条”的感觉？
May 6th, 2010 at 00:10:32
N久未见设计好文了，激动下。
言语之间足见功力。承志，牛的！
我一直拼命的解释“视觉设计，最基本要解释清楚页面各内容之间的逻辑和结构关系。然后才是漂亮”。 但，今天看到“用视觉语言去解决逻辑问题”这句话，我认为更准确。
May 6th, 2010 at 00:25:30
[...] 原文地址：http://blog.sharkui.com/2010/05/05/design-of-taobao-mall/ 作者：Sh4rk （承志） 这篇日志由 胖胡斐, 发表在 2010-05-06 于 00:23, 文件归档于 未分类 标签为 . 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL. [...]
May 6th, 2010 at 00:59:30
我是来学习的。
May 6th, 2010 at 01:07:29
改动后确实出彩，感觉原首页中纯白色的背景与彩色斑斓的其它页面元素，放在一起确实是醒目，但有些晃眼，调整后舒服多了。
May 6th, 2010 at 07:51:47
刚进来以为是写淘宝大首页的文章（最近淘宝大首页刚上新版），发现是淘宝商城的，也提1点意见：总觉得搜索框可以再高一些。不知你是否看了最近GOOGLE list页的一点小改进。
May 6th, 2010 at 08:51:18
提一个拙见：商城首页下面的1f,2f…左边的菜单都是灰，很容易理解为不可点击
May 6th, 2010 at 09:00:38
期待对淘宝首页的评价
May 6th, 2010 at 09:03:44
我发现您的色感不如您徒弟，就从您这个blog的黄色就能感觉出来
May 6th, 2010 at 09:07:22
对这个首页我的第一感是卖广告。做为用户来说，进入首页会很茫然，全是推荐的商家活动而不见商家，而要找到自己想要的，需要茫然操作。太过了。当然这是淘宝商城目前的策略所决定的。无话可说。
May 6th, 2010 at 09:20:16
调整之后确实没有了你说的那些问题，但总感觉少了些品质感。那个渐变加得很好，的确是很见功力，但我想飞飞确定的风格应该是尽量少用渐变吧，因为设计要有创新、要突破嘛。搜索和导航的话，有需求的人自然会去找，位置都没有变化，很容易找到的。倒是如果把顶部所有东西都突出，广告的吸引力势必会降低，我想作为首页，还是多推点广告比较重要吧？
其实我觉得这个页面最大的问题是留白不够。顶部有点拥挤，logo偏小，branding不够突出。可以试一下把顶部的几个icon缩小一些，顶部再加高一些…
May 6th, 2010 at 09:22:06
@豆子
如果左侧菜单不上移的话，菜单顶部与搜索框顶部无法对齐，很可能会有乱的感觉
May 6th, 2010 at 09:38:06
尤其搜索空白，改后非常清楚了！
May 6th, 2010 at 09:39:23
看了一些大家的回复，其实好多朋友还是没有看明白我这篇要说明的问题。
如果你对一个页面的评价，还是从“好看”出现，无法从用户需求开始，符合逻辑地说明你选择的每一个视觉语言，你就很难突破为一个出色的“Web Designer”。
这个转变是很难的，先要推翻我们自己的“直觉”，然后再重新建立自己的设计哲学和理念，并最终落实到方法论的层面。
有点罗嗦，我也知道想让所有设计师明白（或同意）这个道理是“不可能的任务”。但我总想，未来我再回头做设计的可能性已经非常小，多找到一个同道，也是很开心的事：）
May 6th, 2010 at 09:41:16
我觉得1，2，3改的挺好的，确实解决了搜索框与下面白条冲突的问题，顶一个~
但是对于菜单冲进大色块，我认为虽然解决了逻辑上的问题，但是不能很好的满足视觉。个人意见，欢迎讨论
May 6th, 2010 at 09:58:05
1、2点修改的思路是可以，不过效果欠佳，用色也比较脏，一下子没了商城的品质感。
3、4点修改加上的投影不利于页面构建，样式也很粗糙，没用心做的感觉，不够考究，对于视觉设计师来说是耻辱哈。
May 6th, 2010 at 10:01:56
说的非常到位，正在优化，马上做，做精彩！
May 6th, 2010 at 10:17:58
观点很专业。仅提下自己的看法。其一：诚然用视觉语言去解决逻辑问题很好，但我们有多少普通用户或者说买家会关注这些细节多于视觉要素？他们不会分析。其二：在看修改前的页面时我的第一眼落在商城的Logo,第二眼是母亲节特惠。修改后第一眼落在logo处，第二眼落在了左侧菜单上。—如果商城的策略是突出商家活动，我想修改前已经做的很好，这也仅是我个人习惯下的认知。
ps.偶是为了看评论从ucd订阅转进来的，也不得不忍受这博里怪异的色彩以及这乱乱的评论设计。。。
May 6th, 2010 at 10:27:58
nice，改动过后，搜索和左侧导航对用户更能起到引导作用
May 6th, 2010 at 10:28:10
我不懂UED，只是从运营的角度扯：
我还是觉得搜索太弱了，虽然我们都觉得促销给客户的刺激非常好，但不能忘记，我们的机会是在客户自主搜索上，所以，搜索的展现和位置应该可以再强化下，体现商城的平台效应和价值。
May 6th, 2010 at 10:28:46
您很注意淘宝上的设计，是否忘记了自己这个BLOG？
我连找个地方回第一页都那么难@_@
May 6th, 2010 at 10:29:00
@T,
1.我们要这么去做设计，就是不要让用户或买家去关注这些细节；
2.做设计千万千万不要把自己当作用户。
3.这个blog的theme是比较糟，纯粹是因为我个人爱好，希望所有的设计在ubuntu下完成，但要命的是我的ubuntu挂掉很久了，也没时间去重装。为了信守诺言（http://blog.sharkui.com/2007/10/09/design_in_ubuntu/），就这样半成品扔着了。再说，这是我个人的博客，我就是做成font-size:50px，那也我个人的玩乐罢了。
关注重点。
May 6th, 2010 at 10:39:57
在嘛?旺旺上加我一下吧, 花名: 游仙
May 6th, 2010 at 11:31:50
“所有商品分类”已经加上了个“向下”的提示标识，是否还有整体向上的必要？！
May 6th, 2010 at 14:16:02
说得不错。而且说到问题所在；
但是有一点我是不赞同的。”菜单的图标改成了红色，与顶上的导航呼应，形成一组；“
我觉得图标改成红色，变得很脏，不简洁，有一种很不舒服感觉；
“把菜单向上移了十来个像素，冲进了大色块，并加了一点点投影，体现出它的“下拉菜单”特性。”
做到这一点就已经解决了问题。没有必要画蛇添足了。
May 6th, 2010 at 14:31:53
关注重点。
头脑清晰很重要。
做什么都不例外。
May 6th, 2010 at 15:03:11
文章很受用，设计师理应多些思考。
大家的评论也很精彩 ：）
May 6th, 2010 at 15:27:16
说的挺好…
“视觉设计实际上在解决的还是交互问题——或者极端一点说——是逻辑问题。”
May 6th, 2010 at 17:08:26
“品牌厂家直销”这一行好空。。。。
May 6th, 2010 at 20:20:26
4.把菜单向上移了十来个像素，冲进了大色块，并加了一点点投影，体现出它的“下拉菜单”特性。————内页此处怎么处理？
May 6th, 2010 at 23:17:08
搜索对淘宝挺重要的，所以推崇韩国naver的做法，把搜索框做成VI的重要部分
May 6th, 2010 at 23:44:27
大家说了很多，我就不重复了那些赞美之词了。
但确实学到东西了，一定留下足迹，不然不厚道
May 7th, 2010 at 09:45:56
价值帖，更多的是在于引发了讨论~~~ 仰慕~
May 7th, 2010 at 09:50:58
学习了，说的不错～
May 7th, 2010 at 10:46:26
说实在的，除了视觉上的一点你的看法之外，从信息架构到品牌传递，从功能设置到交互体验，你这个版本真的不适合。
May 7th, 2010 at 12:39:23
起初，不觉得你提出的问题有问题。
但对比了解决方案的那一刻，震精了。
May 7th, 2010 at 12:39:29
关键是视觉在解决逻辑问题的时候度的判断每人是不一样的。
文章说的突出搜索是一个逻辑但是如果我判断原来的已经够突出了完成这个逻辑了，那就没有必要改。
逻辑不难,度却很难。
May 7th, 2010 at 16:32:03
[...] 第二篇《我来做淘宝商城的首页设计》 [...]
May 8th, 2010 at 15:13:39
用视觉语言去解决逻辑问题 是方法不是目的，目的决定设计方法。
May 9th, 2010 at 07:13:12
学习了。视觉语言去解决逻辑问题的表述让我打开了思路。
不过，由于每个人的逻辑不一样，所以设计也不一定要遵循设计师所想象的逻辑。
先说左导航。整个是灰色块浑然一体，已然是视觉焦点，逻辑也很清楚，不需要上面“所有商品分类”来指引；俨然已是视觉中心第二的地位（第一视觉是大幅广告），使之不会与上方的“淘品牌”归到一组。而冲进去的做法，反倒有把“所有商品分类”归到“淘品牌”的大banner结构的趋势，视觉焦点被转移至左上角。
再说搜索。搜索条跟“所有商品分类”保持同一水平，很舒服；而底部留白，红色条偏细，问题都不大，视觉没被冲散。我觉得，留白在无形中是强化了搜索条的（盗用了留白，使搜索条看起来更高），你们有感觉到吗？而作者的改版，渐变色的使用、提高了搜索条的位置，其实无甚作用；多了一种间隔色，反而感觉更不好了，不干脆。（其实对搜索条也并无强化多少）
最后评价一下改版的加了颜色的图标。个人觉得必要性不大，最多把页面往左边平衡一点。左导航已经很强化、很显眼了。而且，灰色图标，我认为是跟整个页面左侧图标保持一致的做法，看看下面的品牌logo，都是灰色的。
May 9th, 2010 at 10:35:58
[...] 别让用户同时接受你众多产品的逻辑。 这还是产品需要考虑的问题。Sh4rk说设计是“用视觉语言去解决逻辑问题”，就是这个道理。 [...]
May 9th, 2010 at 23:08:38
跟我最近搞的一个页面的设计差不多，色彩，布局，呵呵
May 9th, 2010 at 23:29:28
火眼金睛啊！佩服
May 10th, 2010 at 11:44:05
个人认为，红色图标改的不好~~
May 10th, 2010 at 13:28:11
非常同意“用视觉语言去解决逻辑问题”的观点。看了上面的回复，大家更多的关注是Shark对“淘宝商场首页”的4个改动，而并非在理解他观点。“用视觉语言去解决逻辑问题”是对Web Designer的另一种诠释，也是更高的一种境界。
May 12th, 2010 at 02:00:03
shark,对于淘宝我一直不明白，为什么没有同时搜索两件产品的功能，比如，我想买产品A和B，希望一个卖家同时有这两件产品，为什么主页不提供这样的搜索呢
May 12th, 2010 at 02:09:44
第四点我认为是点睛的一笔，刚去淘宝商城看了下，不改实在是显得太扁平了。并且淘品牌，品牌店铺，名鞋馆，积分兑换四个按钮的大小位置导致看起来视线往两边撇，，，而且还不是同种类的。。。
May 14th, 2010 at 15:41:53
膜拜，学习
May 25th, 2010 at 20:16:42
用视觉语言去解决逻辑问题， 我不是很顶这个，我倒认为：视觉语言解决的是信息的优先层级与归类、用户视线引导的问题。
承志，我一直是你粉丝，呵呵，你离开淘宝去创业非常支持你！
有一天我也会和你一样，找到一个好的创业团队。
May 26th, 2010 at 04:31:47
好的！做的不错哦。。。加油
May 26th, 2010 at 17:05:58
膜拜，3，4点很赞，增强了逻辑性~
June 2nd, 2010 at 10:06:21
每一次都是一个提供，目前的页面还是不错的
June 3rd, 2010 at 20:28:47
个人觉得淘宝上的网页设计还是不错的，毕竟是大站，貌似没什么突破。
June 9th, 2010 at 15:50:04
背景加的很好！导航上移和图表变红不敢苟同！个人愚见
June 12th, 2010 at 01:41:26
说点自己的一些感受，最近在帮一运动品牌做他们淘宝官方旗舰店的设计。由于淘宝商场的头部用的大红色过于抢眼，导致在设计UI时怎么做都不像是这个运动品牌的东西。个人的看法是：在设计商场UI时也应顾及到其承载在上的各种品牌。否则，商场的UI就变成页面的头部与内容在视觉上互相打架了。
June 27th, 2010 at 21:50:05
没有完美的世界，只有追求完美的心，呵呵。
July 6th, 2010 at 23:20:21
不错的设计，希望将来越来越美哦！
July 12th, 2010 at 11:16:41
图文并茂，写的真好，也许改后的页面没有原来的页面“好看”，但是确实逻辑性非常清楚了。很有收获，感觉自己现在设计的一个缺点就是逻辑性不强。希望能从这篇文章里得到突破。
July 16th, 2010 at 20:54:11
你好，我是通用磨坊的Yvonne，哈根达斯是我们旗下的品牌。目前哈根达斯在淘宝上开了店，想请专门的团队设计一下，请问你的团队有兴趣吗？哈根达斯店铺地址：http://store.taobao.com/shop/view_shop-d0a1ffa85f056b0da4b23aad823a7cdc.htm
我的邮箱：gmic.pr@genmills.com 谢谢！
July 29th, 2010 at 09:29:18
[...] 引用地址：http://blog.sharkui.com/2010/05/05/design-of-taobao-mall/ This entry was posted in 信息艺术设计. Bookmark the permalink. [...]