<返回万峰的故事

版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处作者信息及本版权声明。
作者：万峰
地址：http://blog.tarwon.com/ui-for-tmall-shop.html

就像微软WP7提供UI设计文档给大家参考一样，本周更新了JJ、VM和ONLY的UI之后，我就透露周末会跟大家一起分享此次的设计思路，希望大家能给建议，帮助我们提高设计。本来想先分享一段视频的，但是@走人走人 这小子不给力，也不知道上传了没有。回头让他Post出来给大家看[Refer]。

因为是内部资料，都是英文的，请见谅。包含VI的部分，比较内部我会精简一些个性化的内容。可以说此次设计跳出了以往店铺改版针对淘宝设计的路径依赖，是推倒重来，也要感谢@索索sosuosuo @米饭小猴子 和@走人走人 在一个多月内在双十一活动的重重压力下狂加班完成工作[Refer]！

图片顺序比较错乱啦。正如上个围脖所讲，这次UI升级是根本性的升级。要感谢淘宝UED的努力（虽然我淘宝首页和时装周之类的UED很不满），店铺的可自定义性已经非常之高，包括壁纸部分的Bug修正之后，基本店铺首页可以100%自定义。这也就为“Back to People”的思路创造了可能[Refer]。

此次升级，由于淘宝的限制较少，但是我们都不懂CSS，所以还是基于纯HTML来设计的，很多很酷的UI设计，我们留给了官方商城，绝对震撼。不过由于老板对我个人不满，所以官方商城他根本没仔细看就否了，所以未来有机会我们推出商城之后，或者其他专业交流场合，我再跟大家分享[Refer]！

搞设计的都有灵感来源，毋庸讳言。除了WP7、iPad/iPhone之外，推荐大家看一下D&G、Guess、Miss Sixty首页、H&M的Social Media Room、Diesel的Be Stupid玩字游戏（现在好像没有了）、Burberry的artofthetrench.com等，也包括Uniqlo、Topshop、Mango的全球性网站[Refer]。

额，我应该没有遗漏什么吧？对了，还有AOL旗下的网站，例如Engadget等完全自媒体、推送化的咨询类网站，APP Store当中的各种轻量化、社交化、触摸化应用等，都是我们跳出淘宝，观察整个网络世界User Experience迅速被Apple扭转、变化的趋势[Refer]。

同时我们基本浏览了上百个纯正的西方电子商务网站，在如下cartfrenzy.com的列表中，截取了几十张截图作为参考。友情提醒：因为时尚、时装类品牌B2C网站的UI经常更新，所以遇到好的设计一定要立刻截图！否则第二天去可能就消失了[Refer]！

当然Google的 Boutiques.com以及Polyvore.com的趋势也被高度重视，只是淘宝所限，这些特性都无法支持。这些自媒体化、高度分享（开源）的新特性是大势所趋，希望淘宝能尽快跨越对狭义流量的控制，真正走向大淘宝/基础设施战略上来。我们只能期待绫致官网能采用这些特性了[Refer]。

可以说此次店铺升级是100%的Innovation(我大言不惭地写在扉页上了。)很多更新的特性，都是通过人工代码实现的。当然相对的，我们灵活应用网格化、模块化设计，能尽量节省人力物力啦[Refer]。

这句很重要：我们的总体目标是从让消费者的粘性从每周一次，上升到每日两次。这意味着UI要可以推送足够的信息。这是Facebook超越Google占据全世界39%PV的根本原因。很多公司会发现很多员工每天都要刷新人人、校内和微博数十次来！这个粘性是惊人的！也是能创造核心价值的[Refer]！

当然，我们依然需要照顾淘宝已有的客户体验，因此我们没有采取极端的方式来设计，我们仍然在首页保留了淘宝货架和店内分类等模块。等系统在1月完全搭建完成之后，我们也不排除A、B版来测试极端设计的影响。我们对淘宝的Traffic进行了一次分析，如图[Refer]。

页面被归类为三个种类/模块：Landing Page/Module（登陆页面）、Jumping P/M（跳转/导航页）和Content P/M（内容页面）。显而易见的是，之前被传统认为是Content Page的宝贝详情页，被我们归为了登陆页。这一点十分重要，甚至对京东这样的B2C也十分重要[Refer]。

相应层次的UI对应相应层次的VI来强化视觉和品牌。这点相当困难，我们还在努力强化落实当中。其实不难发现，网页正在碎片化：微博页面的信息由数十个来自其他媒体（博主）的内容组成；传统意义上的“主页”已经被颠覆，所有人看到的页面并不完全一样，是由定制的碎片组成的[Refer]。

我们截取了相应的分析，如图。如何让登陆页（首页/宝贝详情页/导航栏）充分地发挥作用，把有用的“信息碎片”嵌入到浏览行为当中，是首先要解决的问题。但是，淘宝不支持任何页面内容的推送，Web 2.0功能是淘宝架构下在店铺内永远不可实现的（我的淘宝倒是推送很多内容）[Refer]。

所以此次更新的第一个Feature，就是在淘宝环境下模拟Web 2.0体验，并希望作为传统B2C体验（首页-单品/首页-店内分类/二级-货架-单品）的有效补充。有一句潜台词一直没说“提供逛店发现的乐趣”。英文原文我写到：Web1.0的目录系统总是需要消费者点击，Web2.0我们进行推送[Refer]！

重要的题外话。几年前我拿到第一代iPhone的时候，发现虽然触感技术（微软很早就开始使用压感并统治了智能手机市场很多年）并不新鲜，但是Apple让有限的屏幕挪动来增加有效使用面积的方式，居然是如此的创新，竟然让我觉得用笔在3寸屏上点Start是如此不可思议[Refer]！

重要题外话2。到2010这个注定不平凡的一年，整个世界随着iPad的最终低价横扫市场，终于彻底被从鼠标和键盘的世界推进了一个新的纪元！当我觉得iOS的挑战者Andriod乏善可陈的时候，Web OS和WP7的UI设计又彻底颠覆了我对触摸世界、APP模式的看法[Refer]！

重要题外话3。原来UI的进化是加速的、几何级的。我们被可恶的Microsoft禁锢得太久了！而轻量话（APP及APP Store）、碎片化（WP7的格子设计和绝大多数的自媒体设计）、应用网页化（Chrome OS、Opera浏览器）和反目录化（运计算及搜索、智能文件夹）已经开始彻底颠覆C盘模式[Refer]。

重要题外话4。我们熟悉的信息获得、分析、储存和应用模式已经消失了。一个网站没有分享到新浪微博我会抓狂的！我还得下载图片，拷贝链接再写入自己的媒体当中？Oh, Shit。这不是好的体验[Refer]！

所以这次UI的第二个Feature，就是尽可能地更上网页/网站UI的形式，确保绫致的网站/网店能在UE上绝对领先。相信不久的将来，绫致的客户群在iPad上上网的时间将超过PC。事实上支付宝已经支持iOS和Linux。所以所有设计是从服务PC单平台的Click，全部转化到Any Device的Touch[Refer]。

我提到的一些灵感来源。其中D&G是最重要的。它的设计可以随着屏幕分辨率不同自适应！完全抛弃大广告、Banner这些设计，时尚度和资讯结合完美，完全不像很多大牌翻很多频道啥内容都没有，所有内容都裸露在首页，而且能被迅速分享移植到任意SNS，不愧是时装界的鬼才[Refer]！

由于淘宝的技术限制，页面空间特别有限。为了模拟推送的效果，必须讨巧，才能在Landing Page去迅速更新推送。幸好有Apple的高度可视化icon设计，我们将它们称为“Update Combos”，一串一串出现。在与用户接触的第一时间，迅速通过精简、精确视觉符号进行引导[Refer]。

通过颜色区分品牌；通过简单文字/图片区别活动、新品介绍、款式介绍、主题介绍等不同内容。为了尽快帮助消费者理解，在首页所有推送的Post上都会附加对应的icon。用户多来几次店，看到相应的icon设计和Post/Updates的对应关系，很快就能从多页面读懂我们的推送了[Refer]。

看起来，任何一个Post都需要一个icon，一个Post和一个内容页面的设计，很繁琐。但是高度模块化、程式化的设计，其实反而执行力很强。如果淘宝能够把任意图片转发到新浪微博的话，这些设计就太棒了。现在是靠我们的人手工发到@丹麦绫致时装官方微博 ，但是已经事半功倍啦[Refer]！

图片是在宝贝详情页和导航栏的示例。实际上，从今年年中起，进入绫致旗下的三店@杰克琼斯官方微博 @VEROMODA官方微博 和@ONLY官方微博 任意浏览，都不会有从一个店到另一个店的明显感觉了，成功实现了超级店的楼层化体验，最大化利用了流量。这和百丽等品牌店截然不同[Refer]。

为了强化三店合一的体验（当然我们会通过VI来区分品牌，这是必须照顾的），让用户获得充分的资讯、逛店的乐趣和详细的指引，我们准备了三店合一的Update Center，其中最大的功能是日历（Fashion Calendar），让用户不会错过店内的任何时尚潮流资讯。可惜现在还没有开通[Refer]。

今晚继续刷屏，见谅哈！在陈列方面，我们详细学习了地面店陈列的优点。其中最重要的部门就是分产品线陈列。正如我们逛ZARA、H&M、UNIQLO这样的“全能店”，品类丰富、从婴儿到成人，男女通吃，动不动就有2、3层上千平米空间，要想充分利用人流实际难度很大[Refer]。

实际上我们在大悦城、三里屯的Combined Shops，也是三店、四店合一的，覆盖从16岁到46岁的广大人群。面对上千个SKU，店铺陈列有死角，对动效率的影响就会很大。所以店面店的陈列师是十分重要的。对于绫致来说，每一季最重要的是灵感故事“Trend Story”[Refer]。

然而10年我们的店铺设计虽然也有分系列陈列，但是很弱，和所有淘宝店家一样，单店品类（店内分类）一直是店铺运营的核心。虽然在店内分类积累了很多经验，根据公司情况进行了多次重大升级，但对超级店铺，尤其是三店合一后面临3000个以上的SKU的陈列一直没有系统方案[Refer]。

所以我们认为10年在视觉上，我们是领先的，也是被抄袭得最严重的，有一些商城店甚至第一屏抄JJ第二屏抄ONLY第三屏抄VM。但只有视觉是不合格的。淘宝整体的用户体验仍然是Market，虽然单店内不允许出现其他店铺的产品已经很给力了。（京东等超市平台连这点都还不能满足）[Refer]。

反过来绫致三家店除了要解决3000个以上的SKU，每月上新过600的如何陈列能符合品牌形象的问题之外，还要进一步强化名店的概念。当然有点走题了。不过货品的分产品线陈列是此次系统升级的核心。为每个产品线定制独特VI的橱窗（字体、颜色均不同）-潮流故事[Refer]

为每个产品线定制独特VI的橱窗（字体、颜色均不同），细化到每季度的潮流故事（灵感、主打色、主打面料、主打款式和细节等），充分强化品牌商的优势。每个橱窗在店内通过Fashion Update Page可以跳转，在店内也安排Update Center进行保留。这些逐渐形成了Jumping Page[Refer]。

实际上从形式上来看，Uniqlo旗舰店的首页可说也是挺Web 2.0的，但是和我们这次相比，优衣库缺乏充分的Jumping Page设计，更多直接进入Content Page，而且顶在店内分类页上方，导致翻页体验特别糟糕。同时优衣库的店内分类本身也很乱，我基本放弃在优衣库网店购物了[Refer]。

所以Back To Fashion是11年我们在淘宝上反击的核心思路。仔细观察ZARA的店铺可以发现，四周墙面都是分系列和潮流搭配的，有相应的搭配墙。(所以FashionUpdate我甚至想改为Fashion Wall，和Facebook的Wall相呼应）[Refer]

除了分产品系列、分故事主题的陈列页面（依然是推送形式的），我们对上新页面进行了极大地改造。遵从我们的思路“碎片化”和“推送化”，上新中心（Arrival Updates）也将是高度模块化，仿微博形式的，甚至首页可能会有多个Update是指向这一个页面的[Refer]。

我并不认为这是浪费流量。相反，我认为这是为消费者节省跳转次数。没有必要让消费者为了信息反复回到目录/首页。这也是Web 2.0所呈现的巨大趋势。我希望用户在一定程度上，不再把首页放进浏览器收藏夹，最好是把三店合一的更新中心，或者是单品牌的更新中心收藏了[Refer]。

就好像收藏了一个时尚博主的博客主页一样。如此，我们UI升级的终极目标就彻底达成了。用户的粘性越大，到更新中心的频率就越高，我们店铺的流量和转化率就会越高，我们在淘宝上模拟从Web1.0到Web2.0的战略就越成功[Refer]。

在Fashion Update方面，我认为做得做好的是H&M，你可以看到他们每个月推出男装、女装、童装的各4个标准搭配（Looks），对灵感、印花等讲解得很细，How to wear拍摄很精美、用心。当然Zara的Lookbook和Catalog也是十分精美的。Fast Fashion是依靠这些原动力来影响市场的[Refer]。

我感觉从单品的陈列来看，@七格格家的格格 已经是巅峰了。虽然修片有点过，最终会伤害一部分不明真相的消费者，尤其是那些对品质感要求高、购买力强、时间不充裕的核心买家。要知道11年网购正在变化，客单价400甚至件单价400会慢慢普及。淘宝商城将成主流，淘货趋于长尾[Refer]。

淘小店和逛商城，两种几乎对立的核心用户体验，店家必须都要考虑满足。货比货，花费大量时间精力，适合小白领和大学生；牌比牌，购买决策快，适合男性和没时间逛街的中坚阶层。这要求店铺设计一定要碎片化、轻量化，店铺营销要节奏感强[Refer]。

其实网店有一点很好，就是类似于ZARA的排队试衣概念，自己挑、自己试、不满意就退货，符合大都市人高效、自信的消费心理。绫致现在超级店的导购系统，可以尝试改成Queue to Fit，而非Out的Lead to Fit。（是一家之言啊，老板们别见怪。大多数城市的大多数店都是需要导购的）[Refer]

所以网店的优势在于能不受导购干扰慢慢逛，不受时间干扰随时逛，不受空间干扰到处逛。这些都是用户粘性可以爆发性提高的基础。碎片化、推送化，实际是无痛化，用户每天来Check一下、打个卡，不带着购买目的来，带着购物袋走。这是此次UI升级的精髓啦[Refer]。

本周刷屏完毕。好像有几个核心没有展开陈述，特别想批判长尾理论。上次我跟金光大师说干脆写本10万字的小书算了。叫《对设计的设计》？对Zara陈列也没有详细说。对刚看到的Flipboard也没有详细说（他编辑-自编辑-他编辑）。以后再唠叨吧[Refer]。