My Secret Rainbow

设计思维的“破”与“立”

阿里巴巴_B2B_UED – 张加其：在互联网公司中，设计师的伙伴主要有产品经理、运营、技术。常规合作流程为产品、运营输入需求，设计师以自身的美感品位、创意才华输出设计方案，如果方案有一些撩拨用户的特效和细节，可能还得端上星巴克求技术哥哥帮忙实现。在这种习以为常的合作流程中，我们既难以决定需求的有无，也缺乏驱动下游技术的抓手，角色较被动。本文以挑货的改版，谈设计思维破局及特色价值建立的一次过程。

一、业务概况

在1688业务大盘中，老挑货是长图文为主的市场，买家通过看平台精选的长图文内容找货。随着业务的蓬勃，挑货变为基于买卖家关系的导购市场，买家通过看与其有关系的商家上新、活动、直播、爆款等动态来找货。

由于挑货业务定位和栏目内容较老版都发生了变化，故设计上对不同类型内容做差异化处理，让买家认知到各类型的商家动态都在挑货。

新挑货上线后，UV 较之前翻倍，多项关键业务指标也都超出预期。这为商家主动在挑货发内容提供了动力，也吸引了平台横向业务积极与挑货合作。

二、破的意识

如果设计师把角色定位为完成上游产品、运营需求的资源，那么在新挑货表现尚可的情况下，接下来要做的需求可以预见：基于现有卡片，改造一份增加商家文案后的卡片；根据横向业务输入的需求，基于已有的卡片样式，继续新增卡片类型。

踮起脚看，如果这会儿设计师选择被动等上游提需求，不主动做点不同，挑货将迎来三层「泥潭式」的重。

1. 第一重，用户将负担不必要的阅读成本

目前卡片已有5种类型，卡片加入商家文案后，信息层级将更臃肿，卡片类型预计到10种。横向业务不定期的需求输入，卡片类型还将持续增加。而看线上数据，用户基于内容类型做筛选的点击占比极低，反映出内容卡片做的差异化表达，为用户带来的价值并不大，反而增加了阅读负担。

2. 第二重，内部协作流程长，资源投入大

横向业务输入需求到挑货的产品和运营，产品经理和运营要和横向业务磨，类似于商家「镇店之宝」、「私密商品」、「优惠券」等内容是否要在挑货做。上游业务磨清楚后，召集横向业务的产品经理、运营、挑货的设计、技术开需求评审会，设计排期出方案，之后设计评审再技术排期，开发完成后上线——而这个流程，还只是新增一种内容卡片。

3. 第三重，技术基于业务逻辑开发，卡片类型越多，性能越难保障

挑货2.0改版时，技术对五种卡片单独进行开发，后续每新增一种卡片类型，都需投资源新开发。且卡片类型越多，页面加载速度越慢。挑货帧率一度在46徘徊，用户浏览挑货时，已经感受到明显的卡顿，若继续新增卡片类型，挑货可能会卡得让用户不爱这个老关系市场。

注：帧率为帧的位图图像连续出现在显示器上的频率（速率），指一秒内的刷新频率，在线上场景中，60是较完美状态，低于50用户将感受到卡顿。

局面将很「泥潭」，设计师如何来破？

设计师开始给自己加戏，为需求方代言，给自己提需求了。

4. 盘点卡片内容层级

由于内容类型做了差异化表达，不同内容卡片上，相同信息层级也分出多个样式，且业务即将新增商家文案及优惠券，这将使卡片多出更多信息层级及样式。卡片内容如图所示：

5. 重理信息框架

盘点卡片信息层级及优先级，以内容来源 内容描述 内容来收口。

盘点信息后，基于内容来源 内容描述 内容的逻辑做信息的删减融合。

• 内容来源区：在商家信息基础上 内容发布时间 买卖家关系描述字段；
• 内容描述区：将活动描述和商家文案融合，简化活动类型及时间描述，使之适配于所有内容卡片；
• 内容区：内容区图片展示从4种收口为2种。

6. 基于视觉框架组装卡片的设计

将收口后的信息层级抽象为视觉框架，并列出框架内的具体内容。基于此框架进行开发，可灵活组装出各类型动态，而非之前以单张卡片为单位进行设计及开发。同时，这种基于框架组装生成卡片的方式，也为承接未来的业务需求留足了扩展性。

「需求尽管来，都可以用新的信息框架组装。」

「假设有组不出来的特殊需求呢？」

「…新增框架」

以上只是设计师给自己加的戏，还得游说上下游的搞事伙伴，把戏落实进用户的屏幕。

先搞定上游，和产品经理及运营重点讲「三重泥潭」的第一重和第二重，同时把以上思考及方案作推销，产品经理及运营听完很认同，收下方案。

再搞定下游（当然也可以等产品经理和运营去向技术提需求，但我没这样做），和技术哥哥们聊，重点讲了三重泥潭的第一重和第三重，同时把以上思考及方案作推销，技术哥哥听完很感动，因为主管给他的核心业务指标是，把挑货徘徊在45的帧率提上去，新的框架设计思路，利于提高挑货的性能。

技术基于新的信息框架进行开发，灵活组装成多款内容卡片，产品经理和运营也可以基于这种轻量级卡片，灵活地和横向业务合作。当然，最大的价值是为用户带来了更简洁流畅的内容呈现。

三、如何立？

破的事情做了。从设计师的角色里踮起脚预见问题，主动给出解决方案并推动落地了，但设计师的特色价值又立在哪里呢？比如手机淘宝的「微淘」，也是用户关注店铺，集中看内容的场景，如何立出1688挑货和微淘的区别呢？

1688和淘宝的区别是 B 和 C 的区别，具体 BC间的差异，各位可移步《从买家差异看B类&C类电商体验设计创新》，本文仅拎出1688的挑货与手机淘宝的微淘间细节点的不一样（并不拎出微淘和挑货间有什么不一样）。

设计思维要立挑货区别于微淘的B类特色了！

1. 以日历立「商机尽在掌握」的B类特色

C类买家逛微淘主要找个人感兴趣的，而逛挑货的「买家」很可能是商人，他们是要从挑货中，挑出好货批发回去做生意赚钱。对来挑货的B类买家而言，挑货是基于老关系找商机、锁定商机的重要阵地。此外，挑货里的店铺活动、伙拼、直播等动态有时间范围，也支持买家通过「设置提醒」锁定商机。

所以在栏目的头部设计上，选择了日历的形式，承载每日上新和买家「设置提醒」锁定好的商机，内容筛选及内容卡片的「设置提醒」也都以日历icon 联动表达，营造挑货栏目「我的商机尽在掌握」的场景特色。

2. 基于B类特点的商家名称备注功能

做 B类买家线下调研时，我们发现买家逛1688，很难通过商家名定位和识别「这是哪位供应商」，什么原因呢？不同于淘宝短且易记的店铺名，1688的商家/公司名常有一二十个字，买家很难记住！看了也很难认出这是哪家供应商来着？此外，买家想采购时，有时候也会习惯加微信或直接电话联系商家。挑货作为1688基于关系的市场，让买家准确定位出动态来自于哪个商家，太重要了。所以我们希望支持 B类买家备注商家名称、电话、权益说明等内容，让买家通过备注商家信息及关系描述字段准确识别并定位商家，让买家对挑货这一老关系场有更强的感知。

3. 私密商品增强表达

通常来说，C类用户在淘宝上买了好东西，会想分享给自己的亲朋好友。而B类买家在1688发现了好东西，是要批发回去赚钱的，巴不得除了他就没更多人知道，所以 B类市场，有做私密的空间。在挑货这种基于老关系的市场，商家愿意为头部买家透露私密商品，为了让买家不辜负商家对他敞开的私密，我们对挑货「私密商品」进行了增强表达，加入撩拨用户的特效和细节。

4. 改版结果

通过「破」和「立」的这一系列动作，助力增强了挑货这一基于关系的市场在买家端的心智感知；技术基于新的信息框架开发，挑货的帧率从之前的45.69提升至54.36，用户浏览不再感觉到技术原因的卡顿；引导进店UV及引导进店率等关键业务指标也有一定提升。

结语

以上就是挑货改版过程中，个人设计思维「破」和「立」的运用，希望对大家有益处。最后想起一位哲人曾说的 「世上没有白走的路，每一步都算数」，想分享自己初入职时遇到过两个小事：

运营提需求，要在一个并不贴合用户预期的场景里「加个吸人眼球的banner」，当时求助主管，他莞尔一笑「这里流量大，运营只是想有做运营的空间，不一定是 banner，有很多开凿运营空间的方式啊。」我醍醐灌顶，输出了更利于做运营的其他方案，运营同学看到方案后惊叹「你你你，你太懂用户了，设计得真好！」

另一次评审，技术挑战设计的某处细节，评审后我沮丧我懊恼，主管又莞尔一笑，「设计可以的，不用太在意他说的，他不是觉得这里设计得不好，而是因为开发起来成本比较大」。:

写这篇总结前，并没有认为这两个事对自己有什么影响，写到这里才忽然意识到，也许第一个事情告诉我，设计思维可以破局，第二个事情告诉我，设计思维可以立稳价值。感谢各位阅读，希望读本文不是「白走的路」，未来能「算数」。

来源：AlibabaDesign