体验设计中从 1 到 N 的三板斧

现阶段众多产品发展过程中，大家都在做增长、留存、促活等活动。这时候设计作为需求承接方，很少有话语权，当然设计驱动那更难了。我根据自己上的交互课程，做了一些总结，帮助设计师了解业务，切入业务，从业务出发优化设计。

从 0-1 设计中，我们根据故事逻辑梳理出页面架构后，用户慢慢对架构逻辑有了认知，在 1-N 的迭代中，我们很难再改版页面架构逻辑，更多的是优化某个模块，某个点。下面根据设计的三板斧、三个方法来拆解页面的优化。

面：做宽
线：做深
点：做体系

一、面-做宽

面就是一个页面，这个页面针对不同人群显示不同内容。例如：淘宝首页的千人前面。
怎么把面做宽？

1、人群分层。

结合业务和数据 BI 同学一起分析用户，把用户根据不同特点分为多种类型。主要分为：全新用户、尝试性用户、成长/认知型用户、核心用户等等。那么怎么去区分这些类型么，下面我以一个 K12 在线教育产品 VIPKID 为例，讲一下用户分层不同种类用户名词解释。
全新用户：看到过 VIPkid 广告，仅对 VIPkid 平台有初步了解。
尝试性用户：上过体验课的用户。用户可能在朋友圈、综艺节目等看到了VIPkid 的广告，然后就下载 app 注册体验，在注册的同时，VIPkid 平台拿到了这位新注册用户的电话等相关信息。VIPkid 拿到用户信息后，客服开始一对一沟通约体验课，经过多次一对一沟通，用户同意听一次试听课。那么这种用户就被我们定义为尝试性用户。
成长/认知型用户：用户上完试听课，感觉 vk 的课程还不错，想要进一步了解。通过客服和运营的工作努力，这位用户成功买课，买了 vk 的一对一或小班课，那么这种用户就是 vk 平台的成长/认知型用户。
核心用户：用户上完首次购买课程后，又开始续费，通过客服的一对一沟通，最后也购买了 vk 平台的数学课、语文课等等。这种用户就是平台的核心用户。
以上是针对于公司有 BI 团队的用户分层，假如公司团队较小，初创团队，那么针对于用户分层可以简单分为两层：新用户和老用户。

2、定义分层人群特征

首先要确定分层人群占比。以下数据仅为参考。
全新用户 10%，尝试性用户 20%，成长/认知型用户 %，核心用户 %。成长/认知型用户、核心用户根据产品发展阶段进行针对性调整，没有准确数值。

全新用户 10%：

人群定义：基本没有业务行为的人，对平台没有任何认知的用户。
内容策略：权益型或互动型的内容，快速留住用户。
设计策略：权益驱动、快速认知。例如：直接给一个大红包，注册我们的平台即可领取大红包购物、首单免费、免费听课。

尝试性用户 10%：

人群定义：买过或者尝试过，不过程度不深，一周或者两周访问一次。
内容策略：大 V 或者权威机构、好友信息等，用户可以快速参与。
设计策略：低决策门槛、用户与场景的关联性。例如：低门槛活动、让用户能很快的参与活动。拼多多的拼购、新用户买一送一等等相关课程、买基金送红包等，这些活动一定要给用户有很强的参与感。

成长/认知用户：

人群定义：有认知、使用过产品，已经对产品有较为深入的了解
内容策略：用户收藏以及用户相关猜你喜欢的产品，直接面向用户卖货，减少决策链路。
设计策略：和用户强相关、适合用户认知的内容。例如：做一些留存、促活相关活动，转发朋友圈给一个什么奖励，发孩子学习课程进度到家长群给课程红包、坚持打卡结束后有勋章奖励等等。

核心用户：

人群定义：对产品深入使用的用户，基本每月使用超过10天以上的优质用户。
内容策略：好的工具和服务，以及用户已购产品的管理功能前置等等。
设计策略：信息准确全面，服务与内容的专业性。例如：通过数据分析，精准推送用户所浏览、观看的相关商品，减少用户操作路径，添加一键购买等功能。

总结来说：

全新用户：简化内容框架，从 0-1 建连接。
尝试性用户：框架上优化、低门槛、强关联。
成长/认知：标准框架，正常的货架展示产品。
核心用户：框架扩容，多点链接，深度服务。

3、定义分层信息框架

针对不同种类用户，展示不同信息框架。
全新用户：简化框架，突出利益点。
尝试性用户：适当增加可配置楼层，优化框架罗列信息。
核心用户：最大化利用首屏空间，展示更多用户相关信息。

总结

面-做宽。
第一步：用户分层。
第二步：群体特征画像。
第三步：分层信息框架。
第四步：分版页面。

二、线：做深

线：主要是指用户操作过程中的链路。做深的基本逻辑先找到关键漏损页。

在页面链路中，每增加一个页面，页面点击 30% 属于正常情况，但是我们看上图，第四步漏损达到42%，那么这个页面就是关键漏损页，要对这个页面进行优化，或者把第四步的功能前置到第三步页面中。

下面以支付宝为例：

支付宝最早版本，财富卡片只有信息的漏出，没有参与按钮，用户只有点击打开详情后才能参与到活动，打开详情后，由于信息展示、氛围等情况会扰乱用户视线、降低用户参与热度，这样就导致详情页面用户点击参与的漏损较大。现在我们看到的卡片，参与按钮前置，用户参与感很强，点击起来像小游戏一样，增强用户参与互动性，用户点击后直接来到参与结果页，把之前详情页面省略掉，把参与按钮前置，压缩操作链路，由之前的 3 步操作，变为 2 步操作，降低漏损。

下面再看电商的案例。

京东-从首页“办公帮手”卡片点击进来。用户点击进来以后看的都是属于办公相关商品，属于逛的状态，类似于我们去逛超市，看到想买、感兴趣的商品都会放到推车里，所以京东这边把加购按钮前置，方便用户直接加购。

天猫超市商品推荐商品列表。我们用故事逻辑来拆解一下，我家没有大米了，明天做饭没米吃，我打开天猫超市买一袋大米，但是由于平台满 88 才包邮，我想着再看看有什么别的商品凑单凑够包邮。于是我现在由精准购物的需求变成逛的需求，在逛的时候我可能想要这个，想要那个，天猫超市加购按钮前置，方便我更快的加购感兴趣的商品。

根据以上案例，可以总结出线-做深的步骤方法。
1、根据数据找到链路关键漏损页面。
2、优化链路。
3、功能、信息前置。

一句话总结一下，找到关键漏损点，把功能前置、压缩链路，最终提升效率。

三、点-做体系

App Store 首页卡片就是很典型的做体系案例。

App Store 首页的卡片就是一个容器，容器里面的内容千变万化，有 App 的介绍，有一组游戏整合，有故事插画模式介绍 App 等等，这些内容放在卡片容器内，排列展示。
Apple 制定卡片不同内容种类显示规则，保证卡片基本逻辑、扩展性和体验的一致性。然后把规则开发给第三方/业务人员，这样内容就会源源不断，久而久之，就会成为生态、体系。

创建点体系的步骤。
1、建立体感。
2、打造标杆。
3、框架定义。
4、边界定义。

建立体感
首先确定卡片内容的用处，卡片聚焦内容、直接操作、动态视频都可展示等等，卡片可以承接哪些内容。为方便业务和第三方理解，可以做一个 demo，用 demo 展示给第三方和业务。

打造标杆
开放给第三方之前，先做出一些标杆。例如：App Store 会有一些 Apple 官方的内容推荐，那么这些内容就是 Apple 打造的标杆。例如：卡片容器内可以显示视频、图片、应用列表、应用列表滑动等。

图片来源：jealyan 微信公众号：负能量补给站。https://mp.weixin.qq.com/s/kkwkkD9TMSYY6T476zViUA

框架定义
把卡片内每种展示规范给到第三方，告知他们具体模块的设计规范。

边界定义
告知业务人员错误的内容填充模式，以保证卡片扩展和体验的一致性。

总结：

容器只是一个白板，容器可以千变万化。例如淘宝 App 首页 feed 流的卡片，卡片内可以是 banner、楼层、配置资源位、商品图、广告、买家秀、视频、互动等等。设定好卡片内的结构后，这个卡片可以出现在任何地方，卡片即可以出现在淘宝的首页、也可以在淘宝购物车下方“你可能还喜欢”模块出现，也可以在某个落地活动页等。

点-即卡片可以根据不同用户灵活安排、每个人看到的内容都是不同的面，做到效率的最大化。卡片内容开放给第三方和业务人员后，卡片的内容就会源源不断，可以做出无限往下翻的 feed 流，让用户产生沉浸、卡片内容无限漏出，成为体系。