# B端产品三大典型改版策略
消耗0碎片

作者:善月


一、可视化设计背景


1. 本地生活营销中台简介‍


中台是将系统的通用化能力进行打包整合,通过接口的形式赋能到外部系统,从而达到快速支持业务发展的目的。中台种类很多,比如我们的营销中台,是以阿里本地生活业务为背景的庞大信息枢纽架构,涵盖了餐饮、外卖、新零售等业务范畴,服务于广大运营、BD、产品等用户角色。这些常见的活动会场,都由中台创建。


832db5bb-2913-4787-ac63-9fdf8314700b.jpg


2. 中台的设计挑战


我们在做中台设计的过程中,发现中台体系庞大,链路错综复杂,问题也很多。不过这些页面之间都存有一些共性,通过对页面特征的分析,总结出了三种典型的业务场景类型:信息列表类、规则配置类、场景联动类。


b4f60e9f-e99b-415b-bbed-bc03bf5b86fc.png


通过对这些场景问题的探索,发现提升可视化程度是有效解决这三类场景所对应问题的突破口,故可视化设计策略成为本次的研究重点和攻克方向。


二、可视化设计实践


为了更好的帮助我们了解中台可视化设计方法和策略,我们将按照上文中总结出来的三类典型中台业务场景,分别探索每类场景下的可视化设计思路。


1. 信息列表类


列表是中后台最为常见的场景之一,传统的列表无非是字段的堆叠,大量相似信息的重复出现,降低了有效信息的捕获和整合效率,加重了认知负荷。


333e91a1-900a-491f-be16-200ac89b0e7e.png


大量列表让我们有种看不清重点的错觉,这种现象统称为“看不清”,为了解决这个问题,我们将列表按照其功能分成两大类:执行类和看板类。执行类列表目的是将所有字段展示完全,方便统一管理和操作;看板类则只要展示关键信息,起到快速查看和监控的作用。


e0c43269-7679-4363-ac74-1ec46bd70518.png


针对这两类列表,分别给出的设计手段是层级映射和看板映射,下面会对这两种映射方式展开介绍。


1.1  执行类列表


执行类列表采用层级映射法则,可分为三步:


68d358a8-9958-419b-85a7-7b572dd61b25.png


这里举一个营销列表的例子,营销列表的作用是对所有的活动进行一个高效的管理。


Step1:信息分类整合


将列表中的信息按照类型划分种类,比如营销列表的字段可以分为以下四类。


3d71d812-e5ac-42c7-9563-48c84817dc98.png


然后再将相同类型的信息整合在同一区域内,建立布局上的关系。


6ae8edef-72ad-4d09-9ee2-4be9a8e62159.png


Step2:视觉层级重构


将列表中各个模块更为重要的焦点信息进行突出展示,这里采用了放大字体、加粗、描黑以及图形化的手段,提升这些关键信息在页面中的视觉层级。


55b0e585-fe6f-42a8-9259-572752f04398.png


Step3:视觉流向设计


将各个模块内的信息进行重新的视觉布局,梳理它的视觉流向,使其更符合我们的阅读习惯。


60773231-2cae-4532-be26-c8622d14c715.png


通过前后对比,可以看到改版前视觉层级不清晰,内容冗余。改版后层级感突出,关键信息获取效率更高。


cf9f93e8-0146-4c6f-b205-ef937c8c702a.png


对比前后视觉流向可以看到,改版前视觉流向上下交替视觉消耗较大,改版后视觉流向平稳,阅读效率更高。


f3d84ba5-783a-4338-b29b-ad687f6e3b61.png


1.2  看板类列表


看板类列表采用看板映射法则,分成以下三步进行:


33d4c709-a860-4d55-89aa-a4b0505772a2.png


这里依旧举营销列表为例,这次要做的是营销看板,帮助监控和查看营销活动的时间和状态等信息。


Step1: 关键信息筛选


第一步选择关键信息,也就是我们最关注的决策信息。


3d71d812-e5ac-42c7-9563-48c84817dc98.png


Step2:视觉载体设计


然后选择视觉载体,首先根据营销看板的功能提炼出关键词,如:查看、时间、状态。围绕关键词寻找符合这些关键词寓意的载体参考物,比如日历、日程表、待办事项、备忘录等。这里我们选择日历进行载体设计。


e2009d0d-5cdf-43f0-be8c-b5cdd6824271.png


Step3:建立映射关系


建立营销日历的载体架构,类比日历的功能和结构,设计营销看板的结构和布局,并填充活动信息、时间、状态等内容,建立架构映射关系。


101f3d02-e577-4b23-b48f-3c1f0de489da.png


最后营销看板设计完成,可以看到改版后营销活动时间和状态一目了然,数据发展趋势也更加直观。


09bf4ab6-b3f5-4bcf-a008-2dd84eae8049.jpg


信息列表可视化小结:


综上所述,信息列表可视化方法可以作如下归纳:


(1)通过分析列表类的场景特点,将其分成两种类型的:执行类和看板类。

(2)为了解决看不清的问题,我们探索出相应的映射法则作为设计手段,通过筛选关键词,将关键词进行具象的描述,做相应的视觉载体设计。


ab3d87b7-61eb-4f90-ac19-1b39514a9eb0.png


2. 规则配置类


规则配置类页面是中台业务域中另一种常见的场景,其特点是配置项繁多,且逻辑复杂。繁琐的配置加上复杂的逻辑无疑加重了用户的认知负荷,导致操作低效。


df0e1321-3ca8-4c6d-90b2-98c0b1e7f929.png


复杂的规则让我们看不懂配置项背后的含义,这类现象统称为“看不懂”。针对该问题,我们意识到可以利用人眼对图形符号更为敏感这一特性,用图形符号代替文本描述,让抽象的概念和复杂的逻辑关系清晰可见,以此来降低理解门槛。


c9f18813-40d9-4224-b73a-c69674348a0c.png


为了更好的帮助我们理解图形符号映射法则,下面举个案例加以说明。


案例:选品特征组合可视化


这里是一个关于选品特征关系组合的例子。其背景是选品系统,目的是在大量商品中选择出符合我们要求和条件的商品。


3bc13a1e-32dc-4c5c-9bea-a0bd7c716e05.png


选品特征组合操作如下:首先选择符合要求的条件,然后再对选中的条件进行规则配置。这些配置当前是“是、否、包含、不包含”等文字的描述呈现条件之间的交并关系,然而这种形式会耗费不少脑力资源在解读文字信息上,无疑加重了我们的思维压力。


007fd631-6dac-43d8-81ca-677d5afd4619.jpg


为了减轻思维负担,我们采用图形符号映射法则进行设计。围绕特征组合的功能提取关键词,如关系、结构、组合等能够传达组合关系的词语,然后探索合适的载体。这里我们采用了布尔运算的符号来描述条件之间的“且、或”关系,形象的符号降低了语义理解难度。


c47f3bce-f51b-4c69-9117-fd537bb99a8d.png


规则配置可视化小结:

综上所述,由于规则配置类场景具有逻辑复杂难以理解的特点,造成看不懂的问题,可以用图形符号映射法则来解决。通过寻找符合场景特征的关键词,匹配合适的载体参考物,做具体的视觉载体设计。


41f03dff-b13f-4cda-bfbf-33a2867b93ac.png


3. 场景联动类


在中台业务域中,有许多与C端紧密相关的场景,但我们似乎并未抓住这种适合互动的机会,前中后台之间缺乏沟通与联动。如图所示,整个系统就像一座冰山,前台只是冰山一角,冰面之下隐藏着庞大的中台系统,这就形成了前后之间虽然关系紧密但彼此看不见的情况。


fff64ffa-e1b4-459d-b332-971b6563a8b7.png


为了解决看不见的问题,我们可以从加强C端与中台之间的联动入手,通过C端所见即所得法则建立前后台之间可视化的桥梁,把这层联动关系清晰展示。


b3220cc6-e3a3-4806-ba3a-b3ca636ced1a.png


为了更好的帮助我们了场景联动可视化的方法,下面举个常见的案例来介绍下所见即所得映射法则的用法。


案例:权益卡券可视化


“权益”在营销业务中经常被提及,优惠券是最常见的权益发放载体。这些看似简单的卡券背后其实有着复杂的配置规则,如下图所示,很多优惠券都需要经过繁琐的字段配置后,才能生成一张可用的卡券。


d0ee3d6c-cf7b-4ef3-87f6-7869e363475e.png


上述方式缺乏前后台之间的场景联动,影响卡券创建效率。所以这里可以做前后联动关系的映射,最简单的方式就是将C端的卡券样式作为载体参考,将配置中的页面结构、内容等都与券面建立对应关系。这种方法不仅简化了流程,也增强了对卡券创建后效果的体感。


9e3e6d93-8dec-4d72-b278-e0d71e48e7a3.png


场景联动可视化小结:


综上所述,在场景联动类业务中,因为与C端界面关系紧密但却并未将这层紧密的关系可视化的表达,导致看不见现象的发生,针对这类问题,我们可以采用所见即所得映射法来建立前后台之间的映射关系。


7a6c4b61-1d43-459e-a1d2-93fcde37db50.png


三、可视化设计总结


通过上文的研究和实践,最终总结出了一套适合当前中台可视化设计的方法:首先分析业务场景,根据其特点确定场景类型,思考是否存在该类场景下的典型问题,根据问题定位设计策略,执行匹配的映射法则。


做设计时,可以多维度提炼能够描述该类场景的关键词,然后寻找合适的载体参考物,进行相应的视觉载体设计。这就是整个可视化设计的流程。


8c9e912b-a04c-4478-a070-cee20e6c894c.png


进一步来说,可视化其实主要在做两件事:首先围绕场景特点多维度提取关键词,然后将关键词进行具象的表达,最终落地在对视觉载体的设计上。


f449030e-1600-46e1-8e15-50c640ae6a1a.jpg


更进一步来说,就是建立业务场景与视觉载体之间的映射关系。


94868733-5e4a-4683-b7f6-2154bff3cf7c.jpg


综上所述,可以用一句话来概括可视化设计的本质:通过对关键词的可视化表达,建立抽象业务场景与具象视觉载体之间的映射关系。