5. 找到， 身 的发现 边
淘宝宝 和店贝 铺
家买
家卖 快速 布店发 铺
有趣，高效
易用简单
用户 目标 设计
10. ADC 展
会
“ 个很有趣，可以考 加些跨 ，火箭等这 虑增 栏
形式。“
“ 是不是可以 距 ？“筛选 离
的用 反 都比 ，大家也表 了现场 户 馈 较积极 现 浓
厚的 趣， 多商 也有 的 。兴 许 户 积极 响应
17. 2
1/2
PC 端
37.9% “ 在宝 供 提贝 货紧张时
醒我”
58.9% “ 看到已收藏店 最近铺
的 惠活 ”优 动
《收藏 －夹 2011 年 家 品用买 产
体 研 告》户 验调 报
收藏 点 数据夹 击
翻页 PV1500 万 UV670 万
新上宝贝 PV910 万 UV72 万
21. ，以女性 主，男女比例是她们 为 1 : 3.8
，同 几乎都是手机淘宝用 ， 占手机淘宝用 的她们 时 户 约 户 18.5%
，很年 ，她们 轻 19-25 占岁约 64%
，月收入在她们 3000 元以下的群体 占约 61%
，是手机 街用 。她们 逛 户
《 而 》用研 告为逛 设计 报
“™ø¥µΩ’‚∏ˆÕºœÒ
–Ë“™ QuickTime˛ ∫Õ
Animation Ω‚—πÀı≥Öڰ£
25. 流 的方法设计
用 与 用的交互要素户 应
点节 流
焦点视觉 触点
点视 →视
点
触点→触
点
点视 →触
点
触点→视
点
Editor's Notes 大家好，我叫珊璞，我在淘宝从事移动交互设计已有两年，而之前在读研期间在百度有两年的视觉设计经验。 去年我负责过的主要业务有这四个，年初的一淘逛街，火眼，年末有一些自研项目，松果和文字杀。 在淘宝不断学习的过程打个比方，就像收集七龙珠一样，首先介绍一淘逛街这个项目里的收集，阐述一下我在这个项目中设计的创新思路和对流程的总结。 在淘宝强大的购物生态圈下，一淘原有的全网比价功能并没有得到用户的认同。于是需求方希望独辟蹊径，以淘宝的优势与手机的特性结合，建立一个 O2O 的线下购物平台，最终成为一个生活服务平台。在第一个版本，期望通过淘宝卖家在实体店打点的方式，来建立用户身边的商圈。 因此做这个客户端设计时，我们主要考虑到两部分的用户——一个是帮助买家找到，发现身边的淘宝宝贝和店铺；另一个是帮助卖家快速发布定位店铺，扩大客源。我们为卖家的设计就是简单易用，利用手机特性可以定位和拍店铺门面图等等。卖家的推广主要通过运营和招商，而我们设计的核心是让买家有趣有效的理解产品的价值。 同样是将用户引向商品的产品，市面上有的客户端是运营为主的导购如美丽说蘑菇街，同公司的天猫淘宝是对天猫淘宝内宝贝的推荐，另外还有京东，当当，乐淘，等等客户端，而一淘逛街在没有 PC 品牌的引导下，如何来让用户第一时间抓到其核心价值呢？因此我们第一版本的设计在于让用户明确产品提供的价值，让品牌的定位能在一开始站稳。因此我们抓住差异化的特征——身边的宝贝，为用户营造周边逛街的感觉。 初期设计在以距离为维度的列表中穿插里程碑，让用户感受到越逛越远的感觉。我们最终采用了后图的方案：在首页以更加明确清晰的地图来表达身边的这个概念。 而常规的搜索流程与淘宝等相似，给用户熟悉的购物体验，让用户觉得高效，有丰富的商品库。 在视觉完成后，我们希望产品能够有更多创新的亮点让用户觉得有趣的同时，记住产品的核心价值，我主动找到广告部门的石元同学的合作将首页和列表页的动画表达出来。 在这个动画里，首页的地图出现，对周边进行扫描，通过一辆驶出的小车表达公里数，然后告诉用户周边的宝贝数目，强化“身边宝贝”这个认知，在进入列表后，默认以距离排序，随着滑动列表，底部标志公里数的滑标会由走路的小人，切换到自行车，再切换到小车。 在项目结束后，我进行了整个项目的流程总结，用于分享给组内的新人，也让自己对流程有更好的把控。 在需求阶段，不仅仅从 PD 那得到需求就开始画原型，需要从 PD 处明确为什么要新增这样的功能，是否有数据，用研的支持，比如一淘逛街，关于买家和卖家对于线下购物的认同，是有用研投放的海量问卷作为基础的，我们需要对需求方施加影响，来保证需求的靠谱； 如何完成这样的功能，数据的来源，比如一淘初期打点商家质量良萎不齐，因此首页就不适合像美丽说等做成瀑布流，更适合以功能感来刺激用户，只要用户觉得这个功能总会有用的，对内容会有一定的宽容度；产品的目标以及至少半年内的规划，这对于交互深刻理解产品以及在设计上做出扩展性非常重要，也能使需求更加清晰。如果 PD 的思路不够明确，交互设计师可以主动向 PD 提供想法，双方需要达到对产品的共识。 如果是优化的需求，交互最好先取得线上的原始数据，以便验证优化的效果。交互对自己的原型也需要从可用性和创新两个方面来做评断，在交付原型给视觉的同时，需要帮助视觉理解产品和交互的核心，基础页面可以采用平台组件搭建，体现产品核心的地方同时也要有视觉的亮点。 在开发完成后，要积极的参与走查，在上线后，交互需要提取和观察数据，来验证设计的效果。 年末， 我有机会进行一些自研项目的尝试，这让我更多的具备的 PD 的意识，如何从生活中察觉需求，如何通过用户和数据验证自己的想法，并积极的进行部门内外的沟通来推进项目的进行。 需求源自日常生活，我发现我和同事在没有明确目的时，常常在收藏夹里翻看店铺的新品，为新品的下架而哀叹；而我也将购物车当收藏夹用，目的是为了快速发现喜欢的宝贝的状态变化；同时，我建立了一个“珊 D 肉璞团”群，公司的妹子们在里面分享宝贝，并一起团购来省邮费，而这些宝贝往往来自于大家的收藏夹。因此，购物的分享需求并非不强烈，而是需要建立在周边熟识的好友关系上。 确立了需求后的第一步，就是去取得数据和用研的支持，从 PC 端入手，我们可以发现收藏夹的用户量很大，每四个访问首页的就会来访问收藏夹，平均每人每日增加 2 个宝贝收藏和 1/2 店铺收藏，收藏行为很活跃，而收藏夹内的点击数据表明，新上宝贝的 UV 是高居第二的，仅次于翻页的点击。同时，在收藏夹的用户满意度调研的，需求最强烈的就是动态的推送。 新品和折扣这种即时性很强的消息，适合移动设备碎片化阅读的特性。因此，我从无线端也取得了各平台收藏夹的数据，由于各平台基数不一样，所以这里仅展示用户活跃程度，如图， H5 是唯一做了新品和促销的平台，其访问深度远高于其它平台。 这些前期的数据和用研资料，都是通过积极的与各条产品线的负责人沟通取得，因为这些结论，我的想法在内部得到了认可，同时，得到了 mac lab 的资源支持， 我们也主动尝试与收藏夹部门的 pd 进行沟通去获取接口，在这个过程中，还进行了一些跨部门的合作。 松果最终的交互稿是这样的，以抽屉式的导航模式，甚至去掉了整条 bar ，让用户专注于首页的宝贝瀑布流。左边拉开提供几个核心的功能频道，右边提供用户的个人信息。 我通过业余时间与两个前端一起完成了 web app 的文字杀，承担了从 PD 到视觉的工作。 去年团队合作最大的一件事，就是共同撰写了一本书。 在这本书里，我主要贡献了流设计方法的一章，主要的内容是对用户与应用交互体验的探索，我们认为用户在浏览界面的过程中会形成视觉焦点，视觉焦点是用户进行信息加工的载体，用户与界面接触留下的触点是用户对应用输入指令的载体。在视觉焦点和触点间，存在 4 种轨迹，也就是视线焦点间的视线流， ......., 而怎样的视线流更能减少用户的认知负荷，怎样的操作流使用户最为省力，对这些轨迹的研究能对用户注意力转移和操作工效等做更深入的分析。我们部门也将购入头戴式眼动仪，也有计划将来与用研进行合作，对流的设计产出更专业的结果。下面有一些比较典型的例子，由于时间关系，先跳过。 我们常规见到的搜索列表如左图，用户的注意力会被动态的加载吸引到中间，再被浓重色彩的顶栏标题吸引，当用户阅读真正需要的搜索列表内容后，需要返回或其它操作时，视线又必须向上进行寻找。我们认为，以内容为优先的设计应该让用户将更多的注意力放在内容上，而图中路径过长并反复的视线路径会增加用户的认知负荷，甚至页面中最吸引注意的是一些中间的加载状态以及用户已经知道的搜索词；因此我们按用户的心理预期来安排内容，可以看到用户有了较顺畅的视线流，顺畅的视线流会减少用户的认知负荷，让用户将最多的注意力放在列表的内容中。
