88VIP在淘宝多业务合作场景下的设计挑战

付费会员88VIP是一个横向连结了众多权益与服务的会员品牌，涉及诸多业务交集。其中任何细微的增加和改动，都涉及到开发、产品、用户体验的大变动。而设计师在这样繁复的项目中将如何把控全局、如何推动业务，扮演着怎样的角色？这篇文章将给你带来答案。

业务背景

━

作为一个全新的会员品牌，在详细阐述之前先快速带大家了解一下88会员吧。近12个月在淘宝、天猫等阿里旗下业务有购买行为的用户都属于88会员，而期间的购买行为会对应着具体的淘气值。淘气值1000分及以上的会员统称为88超级会员。所有会员在购买VIP后即可升级为88VIP，享受天猫超市&天猫国际直营&精选大牌9.5折、专享爆款、300元购物券，同享优酷、饿了么、淘票票、虾米的会员身份。

这样会员体系以及权益内容，为88VIP的推出带来了两个设计挑战：

1、88品牌大体系下如何让用户感知会员的分层心智？这也是本次品牌升级与视觉规范制订的由来。

2、如此复杂的会员权益，在阿里庞大的生态体系中，当涉及到众多业务的合作时，如何在全链路进行打通？针对这一挑战，我们建立了核心交互链路并逐步拓展完善，同时建立全链路入口的引导，连结打通各业务的会员账号。

下文就将详细讲述我们对以上两个挑战的应对策略。

品牌升级与视觉设计规范

━

在业务交织非常复杂的淘宝，会员体系的业务策略是希望促成88超级会员向88VIP更多的转化，并且沿用88品牌为用户降低新认识的成本。

这样的策略下，付费会员必须与原会员体系产生联系又有区别。同时我们希望这个付费会员不是“高冷”的，希望为用户传达更年轻、更时尚鲜活的情感，在这样的背景下，品牌升级势在必行。

下图为原88超级会员与88VIP的品牌调性对比，在原88超级会员的基础上，我们做了Logo形变，并为Logo赋予了更多轻盈、鲜活的时尚元素。

品牌升级一方面可以更好地传达不同类型会员的心智区别，另一方面则为后续88VIP在全链路的设计提供了良好的基础。

由于项目涉及多方业务的合作，因而需要基于品牌调性产出统一的设计规范以统一全链路的设计风格，从而更好地把控业务合作时的设计质量，下面将结合几个案例进行说明：

♦Logo字形

88VIP字体为细长比例方中带圆风格，大部分使用场景需添加字体渐变质感，黑色背景下采用渐变质感的金色字体，浅色背景下则可选择用白色或者深棕色质感的字体。

♦打标样式

根据落地场景各自视觉风格的不同，88VIP在淘宝采用椭圆标，在天猫采用方圆角标。应用场景主要在搜索列表、详情文字、宝贝卡片以及其他小场景，以结合文字组合使用为主。

♦配色规范

整体使用渐变色体系加强质感，品牌LOGO主要配色为有质感金色的和炫酷黑，在活动及营销场景可配合更多彩的颜色突出更亲和的氛围。

♦卡片样式

VIP大卡透出“深色卡背景＋底纹＋金色文字信息”，用于页面身份卡与宣传卡；VIP卡小icon则应用于偏图形类场景，展示空间较大的页面模块，在保证比例圆角一致情况可做大小调整。

更多的设计规范这里不再一一赘述，一套完整成熟的规范不仅能统一全链路的设计风格，更能提升设计效率。

在接下来对全链路应用场景的介绍中，将会看到设计规范的具体应用。

全链路权益打通

━

项目成立之初，88VIP的权益因为业务调整而每天变化，为了让设计节奏不被业务打乱，所以一开始就需要依据产品特点，确定核心交互链路。各链路下的核心页面，再依据业务内容不断调整完善，用“模块化”的方式组织核心页面的内容层级与布局，从而实现快速迭代。

01|核心交互链路

核心交互链路是根据项目性质决定的，市面上其他电商的付费会员几乎都是非常单纯的购物权益，开卡前由一个导购类长页面引导开卡，在开卡后引导购买。而88VIP的权益更加复杂，既包含淘内的折扣、券、爆款低价商品，又包含淘外的会员权益，所以心智是分散的。这些复杂的业务背景为设计带来诸多要求：

1、整体全链路的入口，让用户可以从多个位置灵活进出；

2、开卡前统一的权益包装，能帮助用户快速了解88VIP；

3、支付开卡后通过个性化引流，贯穿使用多个权益场景；

4、最后要通过集中的导购阵地引导用户购物，通过集中的权益管理让用户了解不同权益的使用状态；

5、整个链路还需要淘外的二方业务（如优酷）做端内承接以及账号与淘宝打通。

02|核心页面的内容层级与布局组织

88VIP全链路的页面从本质而言都是为用户透传权益内容，根据核心交互链路确立的核心页面如下：

1、宣导页 – 权益包装引导开通

2、开通成功页 – 个性化引导权益使用

3、88VIP中心页 – 导购

4、我的88VIP页 – 权益管理

这些核心页面表达的权益内容相同且一一对应，但不同的使用阶段对应不同的页面，不同页面对权益的解释重点与形式不同。

例如精选大牌9.5折权益模块：在宣导页，为侧重展示品牌之多列出了动态变化的品牌墙；在开通成功页，则只需一个按钮模块导流；在88VIP中心页，通过品牌商品进行直接的导购；在“我的88VIP”页，则只通过展示一个入口来表达拥有了这个权益即可。

当一个权益内容因为业务调整发生改变时，全链路的页面里该权益模块都需要调整，模块化后的调整不会影响页面的整体结构还能提醒自己还剩哪些模块需要调整。

需要强调的是，这里的模块化并不是说表现形式，而是将内容“分类”、“分块”，灵活组织来把控全局。

♦宣导页 – 权益包装

宣导页的重点在于对权益进行包装以引导开卡，所以采用H5概览的形式表达权益核心吸引点并凸显金钱价值。宣导页的每一类权益模块就是一个H5子页面，通过翻页达到对权益分类的作用，让用户对权益类型与内容快速认知，而不是一次性全部抛给用户去记忆。

♦开通成功页 –个性化引导权益使用

开通成功页侧重通过个性化引导让用户贯穿使用多个权益场景。一方面是出于业务之间的合作导流，另一方面也方便用户使用体验的直观性。例如，用户从优酷入口开通88VIP，则引导使用优酷权益。全链路中有多个入口的权益使用场景，对不同权益使用场景的引导模块化设计后，即便权益内容发生变化，也只需要替换设计素材，而无需改动交互方式，有助于提升设计效率。

♦88VIP中心 – 导购

88VIP中心是淘宝内88VIP的核心运营阵地，自然侧重引导用户前往购物。

导购核心通常以商品展示为主，区别于宣导页概览性的展示方式，将商品以不同的运营主题来模块化展示。比如“专享爆款商品”为最推荐给用户的模块，突显划算、火爆的信息，“精选大牌9.5折”图显推荐品牌的商品透出。

不同的购物权益各自独立成一个模块，方便业务运营随时调整导购优先级。

♦我的88VIP – 权益管理

“我的88VIP”页面的核心功能是集中化的权益管理，让用户了解不同权益的使用状态与规则。

88VIP权益中的二方会员身份权益如优酷、虾米等，需要用户绑定对应的账号才能享受权益，因而在这个页面中将该权益模块放大，对绑定账号提供强引导。

当然，在项目具体进行中，不同二方会员权益的接入进度有较大的差异。对设计和产品来说，对对方的账号体系了解是逐步完善的，中间存在许多更改迭代。模块化的分类与排布方式可以让变化的成本大大降低，业务内容改变时只需要更改模块内的交互与内容，不影响整个页面的结构。

如下图，项目一开始时对账号的需求只是展示账号信息、可用状态、引导绑定，后来接入更多业务会员后发现了二方账号体系混乱的问题，例如优酷账号心智分散，许多用户存在多个账号绑定过淘宝，故系统会优先推荐一个账号引导二次确认。

设计将未绑定状态用黑白展示、绑定并确认后用彩色展示，并强化文案提示，从而区分账号是否激活。排版上让确认账号与更换账号并列，使其产生一种是否选择关系，让用户明白只能选择一个来操作。

03|全链路的入口表达

88VIP权益内容包含淘宝内的购物权益和淘宝外如优酷等二方会员权益，入口类型相应地也分为淘内和二方两种。按入口性质划分又包含以下类型：资源位入口（如pop、banner）、固定阵地入口（如会员中心）、链路入口（如搜索、购买）。

不同的入口涉及到与对方入口业务方的合作，通过制定入口设计规范可提升合作效率，并在入口传达88VIP的品牌心智。同时，入口包含开通前与开头后不同状态，根据不同状态引导目的不同需要差异化表达。

♦淘宝内入口

淘宝的资源位入口通常为banner、pop等实时性、短期存在的权益内容提供展示空间，以吸引开通；而固定入口则是长期存在的，更需要表达出开通前后的差异。

如下图，在我的淘宝、会员中心、88VIP中心，开通前侧重展示权益以吸引开通，开通后侧重88VIP身份传达品牌心智。并在形式上用统一的信封式样，以有一个固定的心智表达。

注：由于业务的复杂性，部分设计未完全还原

链路入口则更加流程化，在淘宝内主要是购物链路，从搜索、猜你喜欢到商品详情，再从购物车、订单到购物成功。

整个流程中，符合88VIP折扣的商品，在开通前通过展示88VIP折扣标突显折扣权益以吸引开通，在开通后则展示省钱金额以吸引购物。

♦二方客户端内入口与承接

优酷、虾米等二方业务入口相比淘宝内的入口，虽然都是进入88VIP的入口，但本质完全不同。淘宝内的入口主要是表达权益以吸引用户开通或者使用，二方入口则侧重表达88VIP的会员身份，以和二方自己的会员身份做区分，其中表达身份的载体包括身份卡、身份标、身份通知等。

二方各业务任何细微的改动都涉及到开发、产品、用户体验的大变动。对于这些业务合作，我们无法一一亲自去设计、开发、改造。只能在整体的设计规范下筛选出更具体的可表现身份的内容供给合作业务方使用，我们再去把控、审核。

04|二方账号与淘宝账号打通

针对88VIP的权益打通，除了以上链路页面的引导，更重要的是还需将二方会员账号与淘系打通，用户才能享受到二方的会员权益。

用户从88VIP管理页可以进入绑定账号流程，但由于二方账号体系各自不同，账号绑定流程也各自不同。

为了统一心智，我们对各个二方账号绑定流程的UI与交互做了规范。交互上统一标准流程，可通过账密、手机、邮箱来绑定，并且系统抓取用户已经绑定过的账号信息进行推荐，用户可选择一个账号作为最终权益发放的账号，以此简化绑定账号流程。

在规范约束下，各个二方业务根据自身账号情况选择主要绑定方式并调整细化，最终再与88VIP一起审核调整。

由于绑定页面的最终设计是由各二方业务自行产出，88VIP只是将其设计结果加入整体的链路中。为了保证体验的统一性而不是各自为政，我们提前制定了UI的布局规范结构。

绑定页面头部允许开放给各二方业务，以个性化体现其品牌特色，可自定义色彩与纹样，让用户明确区分各个绑定的账号体系。绑定页下方的交互组件样式则相对固定，仅开放允许自行调整组合方式。

写在最后

━

在实际工作中，经常会存在设计、需求、开发并行的情况，需求也并不明确、总是处于变化之中，这种情况下设计往往很容易被业务带跑，陷入无尽的更改中。

此时，设计需要建立核心的设计思路，布局整体的框架结构，从而即便业务内容的变化，也只是替换其中的内容和部分细节交互，不会影响整体体验，这样对项目的推进以及管理都能更有效。

后续，88VIP还可能不断的新增权益内容、与更多业务合作，有了当前的核心框架后，设计得以在此基础上充分考虑兼容性进行更便捷的迭代。

其次，设计中往往并不是一个人在设计，而是涉及诸多设计师间、业务间的合作，建立一套有效的设计规范能更容易达成一个共识的结果。

最后，在大型跨沟通的项目中，全局思想也极其重要。在全局思考下切分核心页面，在核心页面下切分子模块，一层层地推动最终的实现，才能有条不紊的让项目快速落地。

*注：文章中的内容为2018.8.8日上线内容，项目在持续迭代中，与目前实际线上内容有所不同。

原文始发于微信公众号（淘宝设计）：88VIP在淘宝多业务合作场景下的设计挑战