谈到 B 端组件，很多人的印象是多且杂，想要全面准确的熟悉这些它们，需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情，我一般是按照使用场景去对组件分类整理。

下面我们根据这个分类框架来逐个聊聊这些组件。

一、基础组件

说到基础组件，我想再将其细分成两个大类：一类是通用组件；一类是栅格/导航。怎么去更深刻的理解这两类的区别呢，我们可以打个这样的形象比方：

通过这个比方我们不难理解，栅格/导航是先给页面定下了基本框架，而通用组件则是在这个框架基础上搭建页面的所用到基本元素。

1. 通用组件

常见通用组件一般包含：色彩/字体/间距/圆角/分割线/按钮。需要注意的是，通用组件看起来似乎很简单，但却是决定产品品牌调性、界面细节品质的重要因素，在设计过程中需要引起我们的高度重视。

色彩

色彩可分为主色，功能色，中性色三类。下面谈谈这三类颜色如何配置，以及如何定义这些颜色梯度。

① 主色

主色的选取

主色作为产品的主要色调，在选取时应当优先选择品牌色，但有一点要注意的是 B 端和 C 端不一样，B 端一般不适合采用暖色系作为主色，如果品牌色为暖色调，则尽量考虑另选取一个冷色系作为主色，原因有两点：一是为了避免和警告、错误色冲突，产生歧义；二是冷色系带有商务、专业、冷静的情感，更符合 B 端产品调性。

同时主色选取应避免高亮、荧光色、灰调高的颜色。

主色的应用

主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。

② 功能色

功能色主要用于页面表征状态，常见有成功色、警告色、报错色等。

成功色

主要用于操作结果成功提示以及标签配色等。

警告色

主要用于警告提醒功能以及标签配色等。

报错色

主要用于系统报错提示、圆点提示、以及标签配色等。

③ 中性色

中性色在页面设计中应用非常广泛，从线条到文字再到图形等等都可以见到它的影子。
Tips：无论我们主色调是什么，中性色在调色时建议可加入适量的蓝色调，可让页面观感更清爽。

④ 颜色梯度

选取好了颜色后，怎么去更合理的定义每个颜色的梯度呢？（这里主要指对主色以及功能色定义梯度）

我的方法是给颜色加一层半透明黑/白遮罩，当我们需要浅色，通过调整白色遮罩透明度得到合适颜色；而当我们需要深色时，则通过调整黑色遮罩透明度得到合适颜色。

这样定义颜色梯优点是后续如果需要更改配色，只需一键替换全局色即可，大大提高工作效率。

文字

文字规范包含字体、字号、字重、行高等。

① 字体/字重

B 端字体/字重一般按照如下规范即可：

② 字号

不同于 C 端，B 端在字号选择上应当尽量保持克制。研究表明，Web 端上正文字号为 14 时，可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级，优先级从高到低的手法应该是颜色、字重、字号，也就是说一般尽量不采用字号大小区分文字层级。

③ 行高

行高可以参照下面的公式或行高参照表快速获得，如果通过公式算出行高非整数或非偶数，可就近取偶整数。

间距

关于间距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考虑到 4 的颗粒度偏小，因此可优先考虑 8px 的倍数作为间距值，在一些特殊场景可采用 4px 的倍数间距值。

分割线

分割线宽度一般统一为 1px 即可，同时注意颜色不可过深，以免干扰主体信息。如果需要不同层级分割线，可用颜色深浅来区分。

圆角

圆角大小一般根据使用场景控制在 2-3 个梯度即可，既不能全部统一一个圆角值，同时也不适合出现过多圆角值。同时圆角值不要过大，建议控制在 2-6px，以符合 B 端产品严谨专业调性。

按钮

这里从按钮的大小/状态/排放位置几个纬度来讲。

① 按钮尺寸

按钮高度一般情况下可以设置 3-4 种尺寸按钮，足以满足各种使用场景。至于按钮宽度，我们一般定义一个最小值，当超过最小值时，可设置 padding 值，按钮宽度根据内容自适应。

② 按钮状态

操作按钮过程中，按钮会呈现不同的交互状态。

③ 按钮位置

对于主次按钮组合，主次按钮排放位置应该怎么规定呢？可分为两种场景：一是当为从左到右阅读顺序时，主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时，主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时，应权衡优先级做出取舍。

2. 栅格/导航

熟悉通用组件后，我们要通栅格/导航来确定产品页面框架。

栅格

栅格可以有效地保证设计的一致性、让页面布局更具规律，并提高团队协作效率。应该如何设计栅格呢？

① 栅格区域的划定

我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层，而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。

② 栅格自适应规则

随着页面宽度变化，一般来说是通过栏宽变化实现自适应。

③ 栅格栏数的确定

根据页面内容丰富程度，栅格栏数一般定 12 或者 24 栏，考虑到 B 端产品功能往往比较复杂，建议采用 24 栏即可。

④ 上下布局栅格

⑤ 左右布局栅格

导航

导航可分为全局导航与局部导航。

① 全局导航

全局导航包含顶部导航、侧边导航、混合导航。

这三种导航样式各具特点，应结合产品特性选择合适的导航样式。这里要注意的一点是，当产品可用性和用户体验产生冲突时，应优先保证产品可用性。

② 局部导航

局部导航包含面包屑、标签页、步骤条、分页器。

面包屑

面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系，并且可以快速回到上几级导航。

标签页

标签页可以帮助用户在一个页面实现快速切换不同内容，提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。

步骤条

当任务复杂或者存在先后关系时，可将其分解成一系列步骤，这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条，作用包含 3 点：一是让用户对操作流程长度和步骤有个预期，二是明确知道自己目前所在步骤，三是可以对用户的任务完成度有明确的度量。

步骤条一般分为横向与纵向两种样式。

步骤条小 Tips：当步骤条中有操作难度偏大的内容时，为了提高用户操作完成率，我们可以考虑把其放在靠后的步骤中，原因是用户前面已经完成了大部分简单操作，后面碰到高难度操作后，出于损失厌恶心理，不会轻易放弃操作。

分页器

当有大量内容需要展现时进行分页加载处理，分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。

分页器一般分为迷你、简易、自定义三种样式。

妙用分页器小 Tips：当表格中需要对数据全选操作时，为了提高操作效率，可将自定义每页跳数调到最大。例如一共 100 条数据，默认每页 10 条数据，要完成全选需要点击 9 次翻页，10 次全选（表格的全选框勾选后一般只选中当前页面全部数据，而不是所有页面总数据），当把每页条数调整为 50 后，则只需翻页 1 次，点击 2 次全选即可。

到这里关于 B 端的基础组件就全部梳理完了，后续我们就来揭开展示组件的神秘面纱。

部分参考资料：

1. 《B 端产品设计-Mia》
2. 《Ant Design》

作者：huang。亮      来源：优设网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一. SaaS的本质是什么

SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。

在Saas之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。

Saas模式的提出者是Salesforce创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：

1. 传统软件部署实施交付的失败率非常高；

2. 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。

基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有CRM项目中大约55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）

从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的SaaS模式通常是按照用户的使用年费来收取。

两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；

所以SaaS是长期主义的事情。

失败的Saas生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。

所以，Saas模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。

那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。

吴昊老师，在《SaaS创业路线图》中的讲到：SaaS的本质是续费。这个观点我比较赞同，SaaS的经营本质在于可持续。

二.从新认识B端用户体验

那么，决定SaaS的成功因素是什么呢？

我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。

传统软件在一次交付实施后，客户付80%的钱，剩下的20%能不能收回来就不那么重要。但SaaS模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。

因此，和传统软件相比SaaS的用户体验的价值就更为重要，它直接影响SaaS的续费和流失。

相信“用户体验”这个词大家应该非常熟悉，接下来我们从新认识什么是用户体验？

官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在20世纪90年代中期提出的。产品大神俞军老师说过用户体验的本质是“ 用户最小成本满足需求 ”。

基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。

怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。

如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。

企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。

所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。

由此，可以看出在SaaS的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。

那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。

因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。

产品设计，应该把复杂留给自己、把简单留给用户。

关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。

用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。

构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。

三. SaaS如何进行用户体验设计

回顾Saas的商业模式，Saas的商业模式决定我们提供的这个服务不是靠人海战术，因为Saas软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。

那么Saas服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻SaaS产品体验的设计策略模型。

第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。

第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。

设计原则，是指导我们做正确设计的方针。

设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。

1. 当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）

2. 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）

3.用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）

4. 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）

紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。

设计策略，是指导我们如何进行做正确的设计。

在SaaS产品分类上，常见的SaaS产品主要分为3类，行业SaaS、职能SaaS和通用SaaS。

每刻报销产品从核心业务来说是职能类Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业Saas的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。

下图是每刻系统经过6年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题10%。

关于帮助引导

我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于Saas系统认知问题是用户体验的第一大问题。

帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。

相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。

本文小结

SaaS的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。

在SaaS模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV客户长期价值。

SaaS的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为SaaS商业模式不可或缺的产品竞争力。

作者：周大虾07      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、图标是什么

图标在界面设计中，虽然很小，但是却是界面中重要组成部分之一。通过将显示物体图形化的形式，将功能本意高度浓缩成一个图标，再通过视觉隐喻更快地让用户理解功能，同时图形与文字相比，图形更加生动形象，视觉能力更强、更便于记忆，用户可以根据图形快速定位功能位置。而顺着时代的发展，图标不再仅仅以工具的形式出现，更多的起到装饰页面，也不断延伸出不同的图标类型与图标设计风格。

1. 工具层面

1.1 降低用户理解成本

图形与复杂的文字相比，更加简洁，相应的识别效率也会更高。图标可以将复杂的文字描述高度浓缩成一个图标，通过视觉隐喻的方式让用户联想到现实生活中的物体，更直观地呈现图标代表的功能，更快理解功能的意义

1.2 减轻页面负担

像一些通用常见的图标，如搜索、播放按钮、更多等，仅需要一个图标就能清晰地传递功能意义给用户，省文字的描述，节省更多的页面空间与阅读压力。

1.3 更快定位功能位置

图标与文字相比有更丰富的表现形式与颜色，所以视觉冲击也就更强，也能更快地被识别出来，当用户熟悉了产品后，只需要通过图标就能快速找到想要的功能，当功能位置发生变化时，不需再重新阅读枯燥的文字找到对应的功能，只需从图标形状、颜色上区别，找到对应的功能。

2.装饰层面

2.1 传递品牌调性

随着互联网的发展，同类型的产品越来越多，要在各个产品中突围，除好用的功能外还要有特色的外观。在图标中融入能代表产品品牌的符号，强化品牌调性，保持图标的独特性，给用户留下深刻的印象，一看图标就知道是哪个产品。

2.2 增强产品吸引力

如今用户对产品的要求除了要有好用、有用的功能外，还希望有更好的视觉享受。一组好看、有趣的图标可以带给用户更好的第一印象，增强产品对用户的吸引力。

2.3 渲染气氛

根据不同的节日或运营活动，设计相应氛围的图标，帮助产品渲染节日氛围或加强用户对产品主题运营活动的感知力度

二、图标绘制的基本原则

1.  可识别性

图标与文字在一定程度上起到相同的作用，都是通过特定的表现形式来传达某种信息给用户。顺着时代发展，图标的设计更精细化，产生了更多的设计风格，但图标的本质还是没变的，是用户进入功能的入口。因此，一个能被用户快速识别、快速理解的图标相当重要，是图标设计的基本要求。我们绘制图标时要尽量去掉辅助、无用的元素，保留最清晰、直接、有代表性的元素。

2. 风格统一

设计师在设计图标时，除了会根据产品类型、用户群体、品牌调性等因素决定使用哪种图标风格外，还要根据图标的具体使用位置，因此在一个产品中，常常会出现多种风格类型的图标，而风格统一指的是在某个特定功能模块内的图标风格要保持一致，是面性的图标就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小统一

圆形、正方形、三角形，在这三个图形虽然高度相同，但是整体上三个图形的视觉重量并不相同。在实际的操作中，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个方向缺得越多，就往那个方向移动一点。

4. 色彩统一

色彩的统一指的是图标色彩在饱和度与明度上保持特征统一，数值在一定的范围内发生改变；而在色相的选择上保持匹配度，像一些单色系的图标，通常使用的都是产品的主题色，而多彩图标，常会以主题色为主，拓展出临近色、相似色、对比色，目前市面上大多数的图标颜色会使用同类色与邻近色。对于饱和度与明度的调节，我通过利用灰度模式进行辅助，使图标视觉更统一柔和，不会出现其中一个亮眼或暗沉。

5. 占比统一

5.1 正负形占比统一

正负形的合理使用是图标能否传达准确意思的关键，因此也是常会出现的组成元素。在绘制图标的正负形，注意保持占比统一，其中某个图形正负形太大或太小，会显得突兀、别扭，失去统一性，界面整体质感会大大降低。

5.2 颜色占比统一

在绘制图标时，确定图标中的主色和辅色，绘制时尽量保证主色和辅色占比相同，保持图标的统一性。

6. 疏密统一

有规律地将线条组织在一起，利于形成统一的视觉风格。同时，线条间可以保持一定的留白，不需要太密集，太密集的线性图标，缩小后反而会影响识别。同时，给图标留出一些空间，使线与线之间不会太挤，增强图标的呼吸感。

安利一个国外的图标大神Myicons✨，简单的线性图标一样可以很精致。

三、不同风格的图标

目前市面上的图标主要有四种类型，分别是：线性图标、面性图标、写实拟物图标和三维立体图标。而不同的图标中组合的元素都会有一些差异，相同类型的图标中也会有不同的图标风格。

1. 线性图标

线性图标主要还是由线性组成，设计师可以通过改变线的粗细、线的端点、圆角大小或加入一些面性元素在里面来使线性图标更加丰富、有趣，但整体来说纯线性图标更纤细、简洁，使得视觉冲击力稍微弱了些。

1.1.1 单色

单色是线性最基础的表达方式，这种设计风格单调、视觉冲击较差，但是制作难度低，设计所耗费的时间页更断，因此常常会出现在个人中心页中，仅需要有图标显示功能入口，设计要求并不高的功能模块中。

1.1.2 双色

双色图标与单色图标相比，视觉冲击力更强，应用范围更广，通常会融入品牌主色，是除了线面图标外出现在首页中的线性图标。因为双色图标可以加入品牌色，增强品牌感的同时，使图标增加了设计感，不会像单色图标那么单调乏味，因此双色图标也会以“次要功能”的形式出现在首页当中。

像在“去哪儿旅行App”和“平安银行App”中，页面已经存在一组视觉冲击、视觉层级更高的一组面性图标，但是因为业务需求露出更多功能入口，因此就可以使用线性图标这种视觉冲击力弱一点的图标搭配，既不会抢走主视觉，也能满足业务需求。

1.1.3 断点图标

断点图标在目前的app图标设计上较少使用。虽然断点风格图标在表达上有一定的局限性，但是图标设计感更强，图标更有趣味性。

断点图标并不是随便删除某个描点，在断点的位置选择上和断点的大小都是要注意的地方。断点位置的选择要注意两点：

1 ) 保持相同角度，能更好地增强图标的协调性，避免造成图标的视觉混乱降低用户的视觉体验。

2 ) 选择在线的拐角处，利用连续性原理，在一定的路径下使这种线的断裂保持视觉连贯性，保持图形整体性。

1.1.4 线面结合

在原本的线性图标上加入色块，就会产生新的设计风格--线面图标。线面图标比较特殊，图标的视觉层级会随着图标中包含的色块大小而变化，色块越大，视觉冲击力也越强。因此在设计线面结合图标时，要先确定图标在该页面中的重要程度，如果是主要功能则将色块的占比加大。

1.2 线的影响

图标中的线主要由两个元素组成，一个是线的粗细，一个是线的端点，而这两个元素也是主要控制线性图标的性格。以常用的48px图标盒子为例，常用线的粗细有2px、3px、4px，图标的线越粗图标越有力量感反之图标越纤细；而图标的圆角越小时图标越稳重、专业，像一些办公软件、金融产品，图标的圆角就比较小。圆角越大图标越饱满亲和力更强，像一些儿童学习类软件就会使用大圆角的图标设计。

因此，图标的线粗细与圆角大小，都根据不同产品类型与目标用户确定。而大多数线性图标主要有四种基础造型：纤细+小圆角、纤细+大圆角、粗描边+小圆角/无圆角、粗描边+大圆角。

1.2.1 纤细+小圆角

精致、严谨，多用在银行、新闻类APP。没有圆角，会使图标更加尖锐，对于银行类APP会给人一种威胁，但是太大的圆角，显得有点轻浮、可爱，不符合银行庄严的感觉，所以稍微添加一些圆角，使图标更有亲和力的同时，也保留一些庄严的感觉。

1.2.2 纤细+大圆角

更加精致、有亲和力，这种风格是目前市面上软件使用得最多的一种线性图标风格。

1.2.3 粗描边+无圆角/小圆角

粗旷、个性、有很强的力量感。更多的用在运动、汽车这类主要用户倾向男性的软件，同时也会在一些潮流类电商软件中出现，凸显更有个性的设计风格。

1.2.4 粗描边+大圆角

圆润、可爱、亲和力强，常用在偏向儿童的产品

2. 面性图标

面性图标时软件使用的最多的一种图标类型，设计师通过改变色块、图形圆角、正负形和底托等元素，让面性图标呈现不同的设计风格，但无论是哪种设计风格，面性图标设计冲击力相比面性图标更强，因此市面上大多数核心功能都会用到面性图标来提高功能的设计层级，让功能在页面中更加突出。

2.1 扁平风格扁平风格的图标常为单色图标，图标整体没有渐变、高光、阴影等装饰性设计效果，因此更加简洁，更突出功能本身，图标功能性更强，图标制作成本低，曾经也是风靡一时。但扁平风格的图标缺少亮点与制作成本的原因，导致图标同质化严重，缺少特点，很难被人记住，因此现在很少被使用。

2.2 渐变色块

在扁平风的基础上，在色块上添加渐变色，在保留了扁平图标的功能性外，使图标色彩更加丰富，在不同类型的软件中都可以使用这种风格，算是一个比较百搭的图标风格。同时渐变色块也是很多面性图标的组合基础，在渐变色块这个基础上还可以添加不同的效果形成不同设计风格。

在设计渐变色块风格的图标时要注意两点：

1 ) 市面上的app都会选择同类色作为渐变色，然后通过改变颜色的饱和度，使渐变色的明亮对比更加明显的同时，颜色过渡也更加柔和舒服，使图标更有通透感，增加视觉冲击力。

2 ) 在设计这种有白色色块在顶部的图标时，可以给色块添加一个浅浅的透明渐变，让色块过渡自然一些，同时也可以添加一层浅浅的阴影，增加层次感。

2.3 图层叠加

图层叠加风格的图标看上去像两个透明图层叠加在一起的感觉，图标层次感强，细节也更加丰富，图标风格更新颖、更年轻化，因此如果在设计一个年轻人使用或者希望打造年轻化页面感受的时候，可以尝试使用图层叠加风格。

绘制图层叠加风格的图标时要注意：

1 ) 重叠在一起的那个色块是通过布尔运算得到的，并不是通过简单的透明图层得到的。而重叠在一起的那个色块也不宜过于显眼，毕竟看的是图标的整体。因此可以参考一下“智行火车票”，通过改变饱和度5%到10%和使用15%左右的同类色，就可以让用户看得清图标的变化，同时也不会是色块太突兀影响观感。

2 ) 尽量统一叠加部分图形与图标之间的占比。

2.4 毛玻璃

毛玻璃是近年最火的一种设计风格，不仅设计风格新颖、特别，而且还有很强的质感表现，因此不仅在金融产品，还是生鲜产品或票务产品，都有毛玻璃风格的图标。

而在设计毛玻璃图标时，里面也有很多细节需要注意：

1 ) 背景模糊效果不需要太大，有一种若隐若现的感觉就可以。如果调太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的图层不需要用纯白色。像百度这种同类色配色的毛玻璃图标，只需要将图标的主色调低饱和度后，就可以使用。这样的好处是不仅让图标颜色过渡更加自然，同时有更多的组合方式、更多的层次。

3 ) 使用边缘光。毛玻璃图标有很多相互重叠的图形，如果重叠的图形颜色相近的话，图形边缘就会被弱化，使用边缘光可以明确图形边界，增加层次感。同时使用边缘光，还可以为图形塑造类似玻璃的厚度，细节更加丰富。

2.5 晶白风格

晶白类图标利用圆角正方形或圆形作为底托再在上面添加一个主色为白色的图标，然后通过调节透明度、投影、渐变给图标添加一些质感，是常见的图标风格，也是使用了很久的一种设计风格。

后面也延伸出了另一种设计风格图标主题通常不会是统一的造型，像喜马拉雅这种图标，图标本身元素复杂、细节较多，形状也更加不可控，因此用一个浅色圆形底托，将他们统一起来。不仅可以将复杂的图形统一起来，还可以添加吸引人眼球的渐变色更好地增加图标的视觉占比，有更强的视觉冲击感。

在绘制晶白风格时，注意两点：

1 ) 可以适当改变底托图形的形状，增强差异化。

2 ) 统一光源，越白的地方越亮，注意控制好透明度的变化与角度。

2.6 实物展示

这类图标会出现在生鲜类、药品类、潮流电商类产品中，因为使用图标很难将这些类型概括起来，直接使用图片展示更加直观，但因为图片细节、元素更多更复杂，如果使用太多会使图标看起来很杂乱。

3. 写实向图标

写实向图标模拟现实中的物体，更贴近生活，用户对这类图标理解能力也更强，绘制难度也更高，绘制时间也更长。写实向图标除了基本的色块组合、颜色搭配外，还有更多的透视与光影来增强实感。常常用在运营设计上，或用在一些特殊界面模块从而增强视觉层级。

3.1 轻拟物图标

轻拟物图标是最近很好的的设计风格，但是轻拟物图标出现在界面设计上还是比较少的。因为轻拟物图标元素比较复杂，视觉冲击力强，放在界面上有可能抢走用户对核心内容的关注度，通常会运用在运营设计长图、弹窗、核心功能等。

而绘制轻拟物图标，主要注意的是光影的打造。光影主要由这几个元素组成：亮面、暗面、明暗交接线、反光。在绘制轻拟物图标时，主要注意以下几点：

1 ) 在绘制轻拟物图标时，不一定需要使用统一色相中的颜色，可以通过改变颜色的饱和度明度的对比和冷暖色的对比来营造光影，使图标色彩更丰富、对比更明显。

2 ) 反光可以使用图标主色的对比色，降低饱和度，提高明度，运用在轻拟物图标边缘，使边缘更更清晰，不会糊在一起，图标整体立体感更强。

3 ) 明暗对比越明显，轻拟物图标越显通透、立体。

3.2 2.5D图标

2.5D曾经是很火的一种设计风格，但是现在已经逐渐被轻拟物与建模替代。2.5D图标固定展示了三个面，有很强的立体感，常常运用在科技类的网站设计中。

在绘制2.5D风格图标时，要注意：

1)统一好图标的厚度。

3.3 3D图标

随着时代进步，3D逐渐成为一个主流的设计风格。通过专业软件给予了图形材质质感、真实的光影，更加贴近生活真实物件，同时还可以配合动效的设计，有很强的视觉冲击力和新鲜感。常常出现在网页设计中、运营设计中。目前绘制3D图标主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉满；Blender则是完全免费的软件，目前热度也是疯狂涨，在渲染方面虽然没有oc好，但是还是可以满足日常工作。

而在绘制3D图标需要注意以下几点：

1 ) 统一主光源方向。建模里面会出现很多打光类型，如主光、辅光（有时不止一个）、边缘光等。

2 ) 统一摄像机位置。摄像机与物体的距离、角度影响渲染的最终效果。

3 ) 用数值定义物体大小。建模软件不像绘图软件那样强调物体的数值大小，拉远看物体就是小，拉近看就是大，做一个物体时还好，但是要做一组3D图标时，就要定义好物体的大小，使图标更加统一。

四、如何确定使用哪种类型的图标

不同风格的图标有着不同的特点，设计师要根据图标放置位置和功能选择图标类型。其中最有决定性的因素就是图标的重量，而影响图标重量的因素有：占比、颜色、细节元素。线性图标在界面中占比较少，因此看起来会更加简洁，视觉冲击力弱，常用在重要程度低，不需要突出展示的功能上；面性图标占比更高，视觉上会更加饱满，同时颜色色块使图标更加显眼，视觉冲击力得到力增强，使用户对图标的感知力更高，是最常用的图标类型，用在各个重要功能入口上；轻拟物和3D图标除了占比高、颜色丰富，还有各种光影、材质的细节，图标元素更多，视觉冲击力也更强了，也因为图标复杂、视觉冲击力强，因此很少出现在界面上，通常运用在一些特殊运营入口或需要吸引用户的大模块中。

不同的类型在界面中也会搭配出现。

五、图标的绘制

1. 图标盒子

图标盒子是辅助绘制图标的一个工具，帮助设计师在设计图标时更好地规范好各个图标的尺寸大小。而图标盒子也有很多种，我最常用的是48*48px，这个尺寸对于线条的控制比较方便，通常用1px、2px、3px。

工具始终都是工具，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个地方缺得越多，哪个地方就拉伸一点。

2. 图标的绘制方法

图标中会存在标准化图标，像删除就是一个垃圾桶、像首页通常是一个家的图标、还有搜索则是放大镜的图，照片是两个山一个太阳，这些图标都习惯以这种表达方式出现，用户已经习惯了这种表现形式，因此对于标准化图标，尽量维持以往的变现形式，让用户更好地理解图标意思。

非标准化图标可以细分为具象与抽象，对于具象类图标，现实中有实物可以参照。这类图标的设计较为简单，可以在某度上寻找相关照片，根据实物的造型进行提炼和简化。

抽象图标则较为复杂，通常是某些特定行为的名词，没有具体直接的参照物。因此在设计前，我们要先充分理解功能本身，这个功能是什么、用户怎么用，然后提炼关键词，接着根据关键词发散思维，寻找相关联的图形来表示含义。例如“社区”功能，功能目的是提供一个让用户互相交流的环境，同时吸引无目的的用户逛起来发现感兴趣的话题，让更多的信息流得到曝光从功能目的中提炼一下关键词：聚在一起、发现、交流。接着发散思维进行脑暴，聚在一起：一群人-圈子-同一个世界的人-星球，发现：看-眼睛；寻找-望远镜-雷达-指南针，交流：聊天-聊天气泡-声波。

六、图标的使用场景

图标运用在功能入口上是最基础的使用场景之一，如首页中的金刚区、个人中心都会用到很多图标作为功能入口。

1. 金刚区

目前国内的APP包含的功能有很多，而金刚区的作用就整合产品功能并放置在首页中，提高这些功能的曝光量，给其他功能引流，让更多用户知道或使用上产品功能，增强用户对产品的粘性。像美团，很多人对他的了解是一个外卖工具，但它里面还有很多其他功能，使用金刚区展示它多元化的服务。

金刚区图标通常会有1～3行，根据业务具体需求做调整，在每行中会有4～5个图标。尺寸范围一般在40px～48px左右（@1x），同时会根据具体的业务需求，调整大小，最终都是一预览效果为准。

2. 个人中心

个人中心是个人类型功能、运营活动入口和工具的集合地，是除了金刚区外，含图标最多的一个地方。个人中心中包含很多不同类型的功能，可以使用卡片式的设计，将功能图标更好地分类。在图标风格的选择上，个人类型功能是最重要的功能，通常会以面性风格放置在顶部，如果个人中心中需要展示运营入口时，需要减弱个人类型功能图标的视觉冲击，会使用线性风格图标。

3. 运营入口

运营入口主要作用是让用户点击后跳转到产品活动页，因此具有强视觉冲击力的图标，会更吸引用户眼球，从而提高点击运营入口的机会。

因此运营入口上，通常会使用面性图标、写实向图标或3d图标。因为写实向图标或3D图标可以提高视觉层级，因此经常运用在主要运营板块上，而面性图标相比下较弱，当页面已存在一个主视觉或主要功能时，运用在运营板块上。

4. 主题板块

在软件中会有很多不同主题的信息板块，同时信息板块间有较大的差异，如果全部展示出来会使页面样式不同统一、信息混乱导致降低用户的阅读体验。因此使用主题板块，将不同主题信息集中在一起，然后露出部分关键信息在页面中，保证视觉统一的同时，还可以起到流量分发的作用，让用户在茫茫信息流中快速找到自己感兴趣的方向，提供用户阅读体验。

纯文字的排版在信息流中略显枯燥，而图标在主题板块中起到润色主题的作用，渲染主题气氛，提高不同主题板块的识别度与差异化。对于一些长标题的主题板块，只需要记住图标就能快速定位主题板块位置。

5. 底部tab栏

底部tab栏功能数量通常在2～5个，在设计时，要设计点击前和点击后两个图标状态，同时帮助两个状态是有明显的变化。底部tab栏图标大小通常在22px（@1x）左右，而图标底下的文字时10px（@1x）。底部tab栏作为最常出现的区域，是传达产品品牌感、提升产品辨识度、记忆点的重要区域，很多产品都会在底部tab栏的图标设计上加入品牌元素，增强辨识度。

七、如何提高图标设计能力

1. 阶段一：临摹

临摹是人类学习一个新技能开始，就像婴儿学习父母说话一样。但是一开始很多都不会临摹，或者照着画也不会，那我们应该如何去做？

1.1 临摹效果不佳

1 ) 提高审美能力，多看一些主流的图标，可以上追波看看目前流行的设计风格，不行的话就去看看大厂都在画怎样的图标。

2 ) 明确自己的能力，对自己目前的设计水平有一个客观的评价，到一个怎样的水平。很多人都急于求成，最基础的线性图标都不会就上来搞轻拟物，画来画去都不好看，最后就放弃了。

3 ) 敢于支出自己的不足，许多人画了许多时间去画一组图标，就很容易被自己催眠，以为自己已经画得很好了，其实还会有很多不足。所以我们要敢于指出自己的不足，在前期临摹阶段，画完后多去对比原作，自 己有哪些地方没有原作做得好的

1.2 会了，但没完全会

什么是会了，指的是可以绘制出于优秀原作一样的图标；什么是没完全会，指的是不知道原作是怎么达到这个好看的效果的。而且很重要的一点是，你临摹的作品可能也有一些不好，需要改进的地方，以此在这个阶段我们要做的是：

1 ) 多看别人总结的知识点，知道如何去判断一个图标是否还有可以改进的地方，这样绘制是不是正确的

2 ) 懂得总结与思考，原作是用来什么样的手法让我觉得它是好看的，这些技法怎么用，还可以用在哪

2. 阶段二：半原创

临摹是一个提升自己的手法，但不代表可以直接用到自己的作品中，直接复制别人的设计，并不叫设计师，复制粘贴谁不会啊，所以在懂得如何临摹后，我们要敢于尝试半原创。这里说的半原创不是指在别人图标的基础上加上两笔就是半原创，而是要吸取了优秀图标的优点后，重新设计出一个有相同特点的图标。那我们应该如何半原创呢？

1 ) 还是多看，但是不同于临摹阶段，我们在临摹的时候还要多想，这个图标的特点是什么、怎么做、还能怎么用，积累图标不同的表现形式2 ) 多练，这个建立在多临摹上，目的知道别人的技法是什么做的，练习了不同的技法后，将它们再融合在一起

3. 阶段三：原创

第三个阶段，也是最难得阶段。目前很多情况都是只能成为融图设计师，将不同作品优秀的点组合起来。但如果要建立自己的风格也是要做融图设计师的基础上，多想、多尝试，敢于突破，在一次次的融图后，发现出自己的特点，为自己的作品打上自己标签，输出具有差异化特点的设计。最有印象的就是夸克的设计，品牌特色很明显，其实我们每个人也可以成为一个品牌，只要我们足够努力

作者：阿恒的设计笔记     来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

目录

一、回顾 Vue2 的全局引用方式

  1. 简单项目的全局引用

2. 复杂项目的三步封装

二、Vue3 中的使用 

1. provide/inject 方式

2. getCurrentInstance 组合式API引入

一、回顾 Vue2 的全局引用方式

  1. 简单项目的全局引用

    如果只是简单几个页面的使用，无需太过复杂的配置就可以直接再 main.js 中进行挂载

    


        


            


            

        

        


            

                import Vue from "vue";
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
            

        

    

    


        


            


            

        

        


            

                /* 第二步引入axios */
            

        

    

    


        


            


            

        

        


            

                import axios from 'axios'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 挂载一个自定义属性$http
            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$http = axios
            

        

    

    


        


            


            

        

        


            

                // 全局配置axios请求根路径(axios.默认配置.请求根路径)
            

        

    

    


        


            


            

        

        


            

                axios.defaults.baseURL = 'http://yufei.shop:3000'
            

        

    

    


        


            


            

        

        


            


            

        

    

   页面使用

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData(){
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                this.$http.get('/barry').then(res=>{
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                console.log('res',res)
            

        

    

    


        


            


            

        

        


            

                )}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

2. 复杂项目的三步封装

  ① 新建 util/request.js (配置全局的Axios，请求拦截、响应拦截等)

        关于 VFrame 有疑问的同学可以移步  前端不使用 il8n，如何优雅的实现多语言？

    


        


            


            

        

        


            

                import axios from "axios";
            

        

    

    


        


            


            

        

        


            

                import { Notification, MessageBox, Message } from "element-ui";
            

        

    

    


        


            


            

        

        


            

                import store from "@/store";
            

        

    

    


        


            


            

        

        


            

                import { getToken } from "@/utils/auth";
            

        

    

    


        


            


            

        

        


            

                import errorCode from "@/utils/errorCode";
            

        

    

    


        


            


            

        

        


            

                import Cookies from "js-cookie";
            

        

    

    


        


            


            

        

        


            

                import VFrame from "../framework/VFrame.js";
            

        

    

    


        


            


            

        

        


            

                import CONSTANT from '@/CONSTANT.js'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
            

        

    

    


        


            


            

        

        


            

                // 创建axios实例
            

        

    

    


        


            


            

        

        


            

                const service = axios.create({
            

        

    

    


        


            


            

        

        


            

                // axios中请求配置有baseURL选项，表示请求URL公共部分
            

        

    

    


        


            


            

        

        


            

                baseURL: process.env.VUE_APP_BASE_API,
            

        

    

    


        


            


            

        

        


            

                // 超时
            

        

    

    


        


            


            

        

        


            

                timeout: 120000
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                // request拦截器
            

        

    

    


        


            


            

        

        


            

                service.interceptors.request.use(
            

        

    

    


        


            


            

        

        


            

                config => {
            

        

    

    


        


            


            

        

        


            

                // 是否需要设置 token
            

        

    

    


        


            


            

        

        


            

                const isToken = (config.headers || {}).isToken === false;
            

        

    

    


        


            


            

        

        


            

                if (getToken() && !isToken) {
            

        

    

    


        


            


            

        

        


            

                config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
            

        

    

    


        


            


            

        

        


            

                if (cultureName) {
            

        

    

    


        


            


            

        

        


            

                config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 让每个请求携带自定义token 请根据实际情况自行修改
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                // get请求映射params参数
            

        

    

    


        


            


            

        

        


            

                if (config.method === "get" && config.params) {
            

        

    

    


        


            


            

        

        


            

                let url = config.url + "?";
            

        

    

    


        


            


            

        

        


            

                for (const propName of Object.keys(config.params)) {
            

        

    

    


        


            


            

        

        


            

                const value = config.params[propName];
            

        

    

    


        


            


            

        

        


            

                var part = encodeURIComponent(propName) + "=";
            

        

    

    


        


            


            

        

        


            

                if (value !== null && typeof value !== "undefined") {
            

        

    

    


        


            


            

        

        


            

                if (typeof value === "object") {
            

        

    

    


        


            


            

        

        


            

                for (const key of Object.keys(value)) {
            

        

    

    


        


            


            

        

        


            

                let params = propName + "[" + key + "]";
            

        

    

    


        


            


            

        

        


            

                var subPart = encodeURIComponent(params) + "=";
            

        

    

    


        


            


            

        

        


            

                url += subPart + encodeURIComponent(value[key]) + "&";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                url += part + encodeURIComponent(value) + "&";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                url = url.slice(0, -1);
            

        

    

    


        


            


            

        

        


            

                config.params = {};
            

        

    

    


        


            


            

        

        


            

                config.url = url;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return config;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log(error);
            

        

    

    


        


            


            

        

        


            

                Promise.reject(error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 响应拦截器
            

        

    

    


        


            


            

        

        


            

                service.interceptors.response.use(
            

        

    

    


        


            


            

        

        


            

                res => {
            

        

    

    


        


            


            

        

        


            

                // 未设置状态码则默认成功状态
            

        

    

    


        


            


            

        

        


            

                const code = res.data.code || 200;
            

        

    

    


        


            


            

        

        


            

                // 获取错误信息
            

        

    

    


        


            


            

        

        


            

                const msg = errorCode[code] || res.data.msg || errorCode["default"];
            

        

    

    


        


            


            

        

        


            

                if (code === 401) {
            

        

    

    


        


            


            

        

        


            

                MessageBox.alert(
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SessionExpired"),
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SystemInfo"),
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                confirmButtonText: VFrame.l("Relogin"),
            

        

    

    


        


            


            

        

        


            

                type: "warning"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ).then(() => {
            

        

    

    


        


            


            

        

        


            

                store.dispatch("LogOut").then(() => {
            

        

    

    


        


            


            

        

        


            

                location.href = "/index";
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                } else if (code === 500) {
            

        

    

    


        


            


            

        

        


            

                Message({
            

        

    

    


        


            


            

        

        


            

                message: msg,
            

        

    

    


        


            


            

        

        


            

                type: "error"
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                if (res.data.data) {
            

        

    

    


        


            


            

        

        


            

                console.error(res.data.data)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(new Error(msg));
            

        

    

    


        


            


            

        

        


            

                } else if (code !== 200) {
            

        

    

    


        


            


            

        

        


            

                Notification.error({
            

        

    

    


        


            


            

        

        


            

                title: msg
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return Promise.reject("error");
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                if (res.data.uxApi) {
            

        

    

    


        


            


            

        

        


            

                if (res.data.success) {
            

        

    

    


        


            


            

        

        


            

                return res.data.result;
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                Notification.error({ title: res.data.error });
            

        

    

    


        


            


            

        

        


            

                console.error(res);
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(res.data.error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                return res.data;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log("err" + error);
            

        

    

    


        


            


            

        

        


            

                let { message } = error;
            

        

    

    


        


            


            

        

        


            

                if (message == "Network Error") {
            

        

    

    


        


            


            

        

        


            

                message = VFrame.l("TheBackEndPortConnectionIsAbnormal");
            

        

    

    


        


            


            

        

        


            

                } else if (message.includes("timeout")) {
            

        

    

    


        


            


            

        

        


            

                message = VFrame.l("TheSystemInterfaceRequestTimedOut");
            

        

    

    


        


            


            

        

        


            

                } else if (message.includes("Request failed with status code")) {
            

        

    

    


        


            


            

        

        


            

                message =
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SystemInterface") +
            

        

    

    


        


            


            

        

        


            

                message.substr(message.length - 3) +
            

        

    

    


        


            


            

        

        


            

                VFrame.l("Abnormal");
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Message({
            

        

    

    


        


            


            

        

        


            

                message: VFrame.l(message),
            

        

    

    


        


            


            

        

        


            

                type: "error",
            

        

    

    


        


            


            

        

        


            

                duration: 5 * 1000
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default service;
            

        

    

  ② 新建 api/login.js (配置页面所需使用的 api)

    


        


            


            

        

        


            

                import request from '@/utils/request'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 登录方法
            

        

    

    


        


            


            

        

        


            

                export function login(username, password,shopOrgId,counter, code, uuid) {
            

        

    

    


        


            


            

        

        


            

                const data = {
            

        

    

    


        


            


            

        

        


            

                username,
            

        

    

    


        


            


            

        

        


            

                password,
            

        

    

    


        


            


            

        

        


            

                shopOrgId,
            

        

    

    


        


            


            

        

        


            

                counter,
            

        

    

    


        


            


            

        

        


            

                uuid
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/login',
            

        

    

    


        


            


            

        

        


            

                method: 'post',
            

        

    

    


        


            


            

        

        


            

                data: data
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 获取用户详细信息
            

        

    

    


        


            


            

        

        


            

                export function getInfo() {
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/getInfo',
            

        

    

    


        


            


            

        

        


            

                method: 'get'
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 退出方法
            

        

    

    


        


            


            

        

        


            

                export function logout() {
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/logout',
            

        

    

    


        


            


            

        

        


            

                method: 'post'
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

  ③ 页面使用引入

    


        


            


            

        

        


            

                import { login } from "@/api/login.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                接下来不用多说，相信大家已经会使用了
            

        

    

二、Vue3 中的使用 

 上面回顾完 Vue2 中使用 axios 我们来一起看看 Vue3 中axios的使用( 简单Demo，前台使用Vue3，后台使用 node.js )，仅供学习！

1. provide/inject 方式

    ① main.js 中 使用 provide 传入

    


        


            


            

        

        


            

                import {
            

        

    

    


        


            


            

        

        


            

                createApp
            

        

    

    


        


            


            

        

        


            

                } from 'vue'
            

        

    

    


        


            


            

        

        


            

                import App from './App.vue'
            

        

    

    


        


            


            

        

        


            

                import router from './router'
            

        

    

    


        


            


            

        

        


            

                import store from './store'
            

        

    

    


        


            


            

        

        


            

                import "lib-flexible/flexible.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                import axios from "@/util/request.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const app = createApp(App);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.provide('$axios', axios)
            

        

    

    


        


            


            

        

        


            

                app.use(store).use(router).mount('#app');
            

        

    




    

    ② 需要用到的页面使用 inject 接受

    


        


            


            

        

        


            

                import { ref, reactive, inject, onMounted} from "vue";
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                setup() {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const $axios = inject("$axios");
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await $axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                onMounted(() => {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                return { getData }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

这个就是借助 provide 做一个派发，和 Vue2 中的差距使用方法差距不大 

2. getCurrentInstance 组合式API引入

 ① main.js 中挂载

    


        


            


            

        

        


            

                import {
            

        

    

    


        


            


            

        

        


            

                createApp
            

        

    

    


        


            


            

        

        


            

                } from 'vue'
            

        

    

    


        


            


            

        

        


            

                import App from './App.vue'
            

        

    

    


        


            


            

        

        


            

                import router from './router'
            

        

    

    


        


            


            

        

        


            

                import store from './store'
            

        

    

    


        


            


            

        

        


            

                import "lib-flexible/flexible.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                import axios from "@/util/request.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const app = createApp(App);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /* 挂载全局对象 */
            

        

    

    


        


            


            

        

        


            

                app.config.globalProperties.$axios = axios;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.use(store).use(router).mount('#app');
            

        

    




    

/* 挂载全局对象 */
app.config.globalProperties.$axios = axios;

重点就是上面这句

② 需要用的页面使用 Composition Api -- getCurrentInstance 拿到

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                import { reactive, onMounted, getCurrentInstance } from "vue";
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                setup() {
            

        

    

    


        


            


            

        

        


            

                let data = reactive([]);
            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 1. 通过getCurrentInstance方法获取当前实例
            

        

    

    


        


            


            

        

        


            

                 * 再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                const currentInstance = getCurrentInstance();
            

        

    

    


        


            


            

        

        


            

                const { $axios } = currentInstance.appContext.config.globalProperties;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 2. 通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const { proxy } = currentInstance;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await $axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData2 = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await proxy.$axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data2", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                onMounted(() => {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return { getData };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




    

下图可以看到我们确实调用了 2次 API 

其实通过 Composition API 中的 getCurrentInstance 方法也是有两种方式的

 1. 通过 getCurrentInstance 方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。        

    


        


            


                


                

            

            


                

                    const currentInstance = getCurrentInstance();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const { $axios } = currentInstance.appContext.config.globalProperties;
                

            

        

    

 2. 通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。

    


        


            


                


                

            

            


                

                    const currentInstance = getCurrentInstance();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const { proxy } = currentInstance;
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const getData2 = async () => {
                

            

        

        


            


                


                

            

            


                

                    data = await proxy.$axios({ url: "/one/data" });
                

            

        

        


            


                


                

            

            


                

                    console.log("data2", data);
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术，所以用 JavaScript 检测浏览器在线/离线状态非常常见。

无论浏览器是否在线，navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线，则设置为 true ，否则设置为 false 。

 if(navigator.onLine) { // true|false // ... }

online 和 offline 事件：

当浏览器脱机或上线时，浏览器还支持 online 和 offline 事件。

window.addEventListener('online', function(e){console.log('online')});
window.addEventListener('offline', function(e){console.log('offline');});

你可以使用几种熟悉的方式来注册事件：

• 在 window，document，或 document.body 上使用 addEventListener
• 将 document 或 document.body 的 ononline 或 onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
• 在 HTML 标记中的 body 标签上指定 οnοnline=”…” 或 οnοffline=”…” 特性。

注意事项：

• IE8中需要给document.body绑定事件而不是window
• 在线离线的变化指的是物理上的网络链接变化，如果是在控制台将网络限制为 offline 则不会触发相应的事件。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）</title>
    <style type="text/css"> #status {
            position: fixed;
            width: 100%;
            font: bold 1em sans-serif;
            color: #FFF;
            padding: 0.5em;
        }
        #log {
            padding: 2.5em 0.5em 0.5em;
            font: 1em sans-serif;
        }
        .online {
            background: green;
        }
        .offline {
            background: red;
        } </style>
</head>
<body>
<div id="status"></div>
<div id="log"></div>
<button type="button" id="test">检查状态</button>
<script> window.addEventListener('load', function () { var testBtn = document.getElementById("test"); var status = document.getElementById("status"); var log = document.getElementById("log");

    function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();

        log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | ");
    }

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    testBtn.addEventListener("click", updateOnlineStatus);
    updateOnlineStatus();
}); </script>
</body>
</html>
    

        
    

总结：

1、navigator.online属性提供浏览器是否在线的布尔值

2、浏览器脱机或上线还支持online和offline事件（IE8需要给document.body绑定事件而不是window）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

第一步：打开iconfont官网新建项目并添加自己所需要的图标

这里是iconfont的网址链接： iconfon官网

新建项目

$不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已$

• App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示
• 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头，如 “\ue123”（注意不能写成"\e123"）。

选择自己需要的图标加入购物车再添加到项目中

第二步：下载我们所需要的iconfont.css文件并引入到项目中

下载项目并解压

将iconfont.css文件复制放到我们的项目中去，一般放在static静态文件目录下

第三步：修改iconfont.css文件中的内容并全局引用

需要注意的是，当我们在项目中新添加了图标后，需要重新复制修改iconfont.css中的内容，要不然新添加的图标是找不到的

在移动端引用的时候要在App.vue文件中进行全局注册，而不是main.js中

第四步：使用iconfont图标进行开发

在开发中我们常用的有两种方式，这两种方式以及注意事项我在以下内容都有演示：

• 在页面文件中直接使用标签
• 使用APPplus原生的自定义导航栏iconfont右侧自定义图标

1.在页面文件中直接使用标签

两种方式代码的获取方式如下图所示：

• 使用uniCode码
• Font Class 名称

2.使用APPplus原生的自定义导航栏iconfont右侧自定义图标

使用iconfont图标的文件内容（忽略css样式）：

需要配合static目录下的iconfont.tff文件，这个文件在我们下载到本地的时候那个目录中，与iconfont.css在一个目录中：

pages.json文件中配置iconfont图标：

这三步完成，我们配置自定义原生导航栏的自定义图标就完成啦！

五：需要注意的点写在这里：

1. iconfont官网创建项目的时候，不要勾选$彩色$ 那个多选框，否则使用的时候不能更改颜色
2. 如果项目重新添加了新的图标，需要重新生成在线链接，更新iconfont.css文件
3. 自定义原生导航栏使用iconfont图标时，必须配合iconfont.ttf文件使用

作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

什么是共识？

我们所说的共识，是指达成了广泛的一致。 比如，一群人去吃晚饭， 如果他们对于提议“吃某火锅”没有任何异议，那么就可以说共识达成了。 如果存在异议，那么他们就必须通过某种方法决定吃什么。 在极端情况下，这群人就会分开。

什么是共识机制？

区块链要成为一个难以攻破的、公开的、不可篡改数据记录的去中心化诚实可信系统，需要在尽可能短的时间内做到分布式数据记录的安全、明确及不可逆，提供一个最坚实且去中心化的系统。共识机制在区块链中成为了重要的因素之一。

区块链分布式记账的方式使得每个人手上都有一本完整的账本，全网共有。但是随着节点的不断增多，数据越多，账本也越安全，难以摧毁。除此之外，任意一个或者部分节点的账本被篡改，都不可能被全网认同，除非你能控制51%的节点，即51%攻击，但是这耗能巨大，几乎是不可能的。同时随着节点不断增加，谁来记账，如何选择合适的人来记账成为一个问题，而制定一个记账人的选择方式以及规定，让大家来遵守这个规定，达成共识，这就是区块链里面的共识机制。

共识机制是区块链节点就区块信息达成全网一致共识的机制，说得更直白一些就是要解决所谓去中心化的信任问题，因为每个节点之间默认是不认识且不可靠的，同时每个节点都不能知道其他节点是否宕机或者背叛的情况下，尽可能的保证记录信息的准确性以及安全性。同时节点越分散，效率越低，网络对于信息的满意度越高，越安全。

共识机制的目标

区块链作为一种按时间顺序存储数据的数据结构，可支持不同的共识机制。共识机制是区块链技术的重要组件。区块链共识机制的目标是使所有的诚实节点保存一致的区块链视图，同时满足两个性质：
1）一致性：所有诚实节点保存的区块链的前缀部分完全相同。
2）有效性：由某诚实节点发布的信息终将被其他所有诚实节点记录在自己的区块链中。

为什么需要共识机制?

在分布式系统中，各个不同的主机通过异步通信方式组成网络集群。为了保证每个主机达成一致的状态共识，就需要在主机之间进行状态复制。异步系统中，可能会出现各样的问题，例如主机出现故障无法通信，或者性能下降，而网络也可能发生拥堵延迟，类似的种种故障有可能会发生错误信息在系统内传播。因此需要在默认不可靠的异步网络中定义容错协议，以确保各主机达成安全可靠的状态共识。所以，利用区块链构造基于互联网的去中心化账本，需要解决的首要问题是如何实现不同账本节点上的账本数据的一致性和正确性。

这就需要借鉴已有的在分布式系统中实现状态共识的算法，确定网络中选择记账节点的机制，以及如何保障账本数据在全网中形成正确、一致的共识。

如何评价一个共识机制的优劣:

1. 安全性:能否有效防止二次支付，私自挖矿
2. 扩展性:当系统成员和待确认交易数量增加时，所带来的系统负载和网络通信量的变化，通常以网络吞吐量来衡量
3. 性能效率:每秒可以处理的交易数量
4. 资源消耗:达成共识过程中，所要消耗的CPU、内存等计算资源

共识机制分类

没有一种共识机制是完美无缺的，各共识机制都有其优缺点，有些共识机制是为解决一些特定的问题而生。

BTC作为区块链的第一个应用，它的共识机制PoW共识机制曾经一枝独秀，但是随着区块链技术的不断发展，各类不同的共识机制开始不断涌现，各有千秋，各有拥趸。

常见的共识就机制包括：POW（工作量证明机制）、POS（权益证明机制）、POW+POS（混合共识机制）、DPOS（股份授权证明）等等，另外还有Pool验证池、Ripple瑞波共识协议、PBFT（使用拜占庭容错算法）等等

PoW( Proof of Work)工作量证明：多劳多得

最早（也是第一个）被应用的共识机制，最先被BTC采用并且获取了巨大成功，它支撑了BTC系统长达 10 多年无重大故障使其平稳运行。而且 PoW 构想也符合创始人中本聪最初的设想：人人皆可挖矿、按劳分配、公平公正。

PoW 属于按劳分配，多劳多得，就如同大家在BTC系统中一起进行数学运算，最先运算出的才能获得奖励。是一种衡量计算机工作量的共识机制。BTC使用的就是工作量证明机制。

工作量证明主要通过哈希计算找出合理数据的步骤来完成：将区块头数据带入哈希函数计算公式，不断调整区块头数据中的随机数，直到计算出满足特定标准的哈希值，工作量证明就会完成。

简单来说就是多劳多得，谁的算力强，计算得就更快，获得记账权的概率就越高，算力竞争的胜者将获得相应区块记账权和BTC奖励。 因此,矿机芯片的算力越高,挖矿的时间更长,就可以获得更多的数字货币。进行运算获得奖励的过程称之为挖矿，参与挖矿的人们称之为矿工。这种证明方式决定了其验证过程需要大量的数据计算，而其他节点却很容易验证计算结果是否正确，因此 区块链系统无法被恶意节点所欺骗。但是这种证明方式需要消耗大量能源(电力及计算硬件损耗)，很不 环保。并且在理论上，如果集合了全网51%的算力即可对区块链网络进行有效攻击，因此许多基于比特币 代码产生的、市值较小的山寨币很容易遭受攻击。

代表token：BTC、BCH、LTC等。

优点

• 公平公正：去中心化程度高，人人都可以参与获得记账权；
• 安全系数高：全网算力越高，其安全程度也越高，如破坏该系统需要投入巨大成本；
• 算法简单，容易实现

缺点

• 资源浪费：因每一笔交易都需要通过多数矿工的确认，在这些矿工进行运算的过程中消耗大量的电力资源等。
• 效率低下：区块的确认时间难以缩短；容易产生分叉，需要等待多个确认。
• 算力集中：根据往年数据显示，在资本大量进入的情况下，过去一年矿池算力份额排名前五位的矿池占据了BTC总算力份额的 65%，马太效应逐渐显现，而算力过度集中还存在着 51% 攻击的风险。
• 永远没有最终性，需要检查点机制来弥补最终性。

PoS(Proof of Stake)股权证明算法：持有越多，获得越多

因 PoW 存在的问题，PoS 在主流算法一路畅通的“杀了出来”，成为了最具有挑战者。近几年，基于 PoS共识打造的区块链项目越来越多，如目前市值保持第二的ETH也加入了 PoS。“Staking经济”在 2019年成为了热门词语，同时也被交易所和钱包大力追捧。

POS机制采用类似股权证明与投票的机制，选出记帐人，由它来创建区块。持有股权愈多则有较大的特权，且需负担更多的责任来产生区块，同时也获得更多收益的权力。 POS 机制中一般用币龄来计算记账权，每个币持有一天算一个币龄,比如 持有 100 个币,总共持有了 30 天,那么此时的币龄就为 3000。在 POS机制下,如果记账人发现一个 POS 区块, 他的币龄就会被清空为 0,每被清空 365 币龄,将会从区块中获得 0.05 个币的利息(可理解为年利率 5%)。

PoS权益证明同样需要通过计算找出合理的哈希值来完成。 但不同的是权益证明机制通过节点持有加密货币的时间和数量来判断节点的权益大小。根据权益大小不同，用户之间看到的计算目标值也不同。权益大的节点，获得目标值更加简单，更容易获得下一个区块的记账权。 这种方式不需要每个节点都进行大量的运算，节省了电力能源。同时全网51%的算力攻击在权益证明机制下是无效的，因为发起这种攻击反而会损害自身的利益。但是可能会出现币种持有数量大的节点权力过 大，对区块链记账享有绝对支配权的情况，容易引发信任问题。

在 PoS 机制中，是不需要消耗电力来进行运算，而是通过抵押 token 来获得打包区块的权利。当一笔交易发生时，系统会对打包区块和验证区块的节点来进行奖励，奖励则是增发或者解锁的 token。

代表token：ADA、ONT、ATOM等。

优点

• 不浪费资源、效率高：因其不需要拼算力挖矿，同时缩短了共识达成的时间，转账效率提高了；
• 弱化了中心矿池规模经济的需求：算力集中垄断的情形也得到了缓解，个体竞争力差别相对减小；

缺点

• 被动形成中心化：因去中心化程度，容易出现强者恒强的情况，会导致富者越富，资源越来越集中的情况。
• 安全隐患：PoS机制实现较为复杂，容易产生安全漏洞。
• 无权益问题（Nothing at Stake）：用户在PoS中可以同时在两个分叉上面下注；无论哪一个分叉后面被公认为主链，该用户都可以获得奖励而没有机会成本的损失。这样也在事实上会干扰共识的形成。
• 还是需要挖矿，本质上没有解决商业应用的痛点。

DPOS(Delegated Proof-of-Stake)股份授权证明

DPoS 机制是在 PoS 的基础上进行了改良，举例来说就是大家公认的投出选票，选举出一定数量的代表，让这些代表进行验证和记账等，可以理解为PoS 的升级版。与PoS的主要区别在于持币者投出一定数量的节点，代理他们进行验证和记账。其合规监管、性能、资源消耗和容错性与PoS相似。

DPoS的工作原理为：每个股东按其持股比例拥有影响力，51%股东投票的结果将是不可逆且有约束力的。其挑战是通过及时而高效的方法达到51%批准。为达到这个目标，每个股东可以将其投票权授予一名代表。获票数最多的前100位代表按既定时间表轮流产生区块。每名代表分配到一个时间段来生产区块。所有的代表将收到等同于一个平均水平的区块所含交易费的10%作为报酬。如果一个平均水平的区块含有100股作为交易费，一名代表将获得1股作为报酬。DPoS的投票模式可以每30秒产生一个新区块。

简单点说：DPoS 委托权益证明通过由持币人投票选举出一定数量的代表来达成共识。 每个持币人的投票所占的比重 与他持有的币种数量有关，持有的越多，所占的比重越大。被选出的代表可拥有记账权，轮流进行记账;未能很好履行职责的代表还会被投票除名。这一任期结束后，新的代表会再次通过投票产生。

代表token：EOS、TRX等。

优点

• 比 PoS 机制拥有更高的效率和性能：相比于 PoS 机制，DPoS 大幅缩小了参与验证和记账的节点数量，可以达到秒级的共识验证。

缺点

• 整个共识机制还是依赖于token，很多商业应用是不需要代币存在的。
• 去中心化程度低：相比较于只能说是弱中心化；
• 安全问题严重：类 PoS 机制的通病，相信大家都看到过报道，如被黑客攻击等等。

PoC(Proof of Capacity)容量证明机制

PoC 机制早在 2014年存在了，但只是一直处于“落魄阶段”，简单说就是没火，无人问津。2019年随着POC一大公链Yottachain的崛起，越来越多的矿工加入了POC硬盘挖矿这个行业大军了。它是POW共识机制的一种，以硬盘作为共识参与者，它的特点是牺牲性能获得安全可信，相对POW减少了非常多的安全和信任成本，更低成本解决了全局信任和安全，几乎不耗电力资源，并且可共享和复用的信任生态。

PoC 机制是通过普通硬盘挖矿的共识机制。简单来说就是利用计算机硬盘中的闲置空间来进行存储进行挖矿获取收益，硬盘空间越大，存储的内容越多获得的收益就越大。 它更多地关注内存而不是处理能力。 从某种意义上说，这是对PoW的改进，即使在挖掘开始之前，容量证明也要求节点将预先计算的哈希值存储在其硬盘驱动器和其他内存单元上，这个过程称为绘图，绘图使容量证明成为比工作证明更快的机制。这种方法的另一个优点是它可以节省大量能源，这与工作量证明机制不同。更不用说，硬盘存储更多哈希值的任何技术改进也将为不在区块链中的人改进技术，这与许多制造商制造的专用芯片不同，后者除了采矿之外什么都不做。

IPFS 也类似，但不同的是 IPFS 衍生的区块链项目（激励层Filecoin）是一种去中心化存储服务的 Marketplace（撮合交易的市场），它的重点在于如何在系统参与者互不信任的条件下，实现存储和检索工作的量化；PoC 是一种底层共识机制，与 PoW、PoS一样都是去中心化网络达成一致性状态的算法。由此来看，两者是完全不同的概念，唯一的共同点就是都可以使用硬盘向网络贡献价值来换取收益。

代表token：BTT、BHD等。

优点

• 挖矿门槛较低：只要有硬盘就可以进行挖矿，大大降低了挖矿门槛；PoC的矿机耗电量低、噪音小、成本低，适合家庭挖矿和人人挖矿。
• 去中心化程度较高：抵押机制提高了算力集中化的门槛，即便有超级矿工出现，普通散户也可以继续获得收益。
• 能源消耗低，节能：相比于PoW，POC挖矿将算力替换成硬盘空间，在很大程度的杜绝了POW挖矿造成的资源浪费以及对环境不友好等问题，同时降低了挖矿成本，让矿工从挖矿中赚取更多的利润。
• 反垄断：用硬盘容量替代了算力，天然具有抗ASIC的属性

缺点

• 未来发展的局限性可能较大
• 可能会有政策性风险
• PoC并没有实现真正的平等

DAG(Directed acyclic graph)有向无环图：无区块链概念

有向无环图是计算机科学中众所周知的数据结构。事实上，区块链也是DAG的一个例子，因为它有一个明确的方向，没有任何循环，并且是一个图。1OTA使用的Tangle也是DAG共识机制的一种形式。在这种机制中，每个块必须有两个父块。所以，为了通过DAG共识机制完成一笔交易，用户需要验证自己之前的两笔交易。这种机制的最大优势是它可以减少延迟和交易费用。然而，这种共识模型对提高可扩展性几乎没有任何作用，而且极易受到攻击，因为任何攻击只需要34%的哈希算力就可以破坏系统。

DAG最初出现就是为了解决区块链的效率问题。其通过改变区块的链式存储结构，通过DAG的拓扑结构来存储区块。在区块打包时间不变的情况下，网络中可以并行的打包N个区块，网络中的交易就可以容纳N倍。

之后DAG发展成为脱离区块链，提出了blockless无区块的概念。新交易发起时，只需要选择网络中已经存在的并且比较新的交易作为链接确认，这一做法解决了网络宽度问题，大大加快了交易速度。

代表token：IOTA、byteball等。
前段时间国内首个基于DAG的物联网区块链项目ITC万物链也取得了不小的涨幅。

优点

• 交易速度快;
• 无需挖矿;
• 极低的手续费

缺点

• 网络规模不大，导致极易成为中心化;
• 安全性低于PoW机制

PBFT(Practical Byzantine Fault Tolerance)实用拜占庭容错：分布式一致性算法

实用拜占庭容错在保证活性和安全性(liveness & safety)的前提下提供了(n-1)/3的容错性。
在分布式计算上，不同的计算机透过讯息交换，尝试达成共识;但有时候，系统上协调计算机(Coordinator / Commander)或成员计算机 (Member /Lieutanent)可能因系统错误并交换错的讯息，导致影响最终的系统一致性。拜占庭将军问题就根据错误计算机的数量，寻找可能的解决办法，这无法找到一个绝对的答案，但只可以用来验证一个机制的有效程度。而拜占庭问题的可能解决方法为：在 N ≥ 3F + 1 的情况下一致性是可能解决。其中，N为计算机总数，F为有问题计算机总数。信息在计算机间互相交换后，各计算机列出所有得到的信息，以大多数的结果作为解决办法。

优点

• 系统运转可以脱离币的存在，pbft算法共识各节点由业务的参与方或者监管方组成，安全性与稳定性由业务相关方保证。
• 共识的时延大约在2~5秒钟，基本达到商用实时处理的要求。
• 共识效率高，可满足高频交易量的需求。

缺点

• 当有1/3或以上记账人停止工作后，系统将无法提供服务；
• 当有1/3或以上记账人联合作恶，且其它所有的记账人被恰好分割为两个网络孤岛时，恶意记账人可以使系统出现分叉，但是会留下密码学证据

实用拜占庭容错主要应用于央行的数字货币以及布萌区块链。

dBFT(delegated BFT)授权拜占庭容错算法

小蚁采用的dBFT机制，是由权益来选出记账人，然后记账人之间通过拜占庭容错算法来达成共识。dBFT和PBFT的关系类似于PoS和DPoS的关系。

dBFT在PBFT基础上进行了以下改进：

1. 将C/S架构的请求响应模式，改进为适合P2P网络的对等节点模式；
2. 将静态的共识参与节点改进为可动态进入、退出的动态共识参与节点；
3. 为共识参与节点的产生设计了一套基于持有权益比例的投票机制，通过投票决定共识参与节点（记账节点）；
4. 在区块链中引入数字证书，解决了投票中对记账节点真实身份的认证问题。

优点

• 专业化的记账人；
• 可以容忍任何类型的错误；
• 记账由多人协同完成，每一个区块都有最终性，不会分叉；
• 算法的可靠性有严格的数学证明；

缺点

• 当有1/3或以上记账人停止工作后，系统将无法提供服务；
• 当有1/3或以上记账人联合作恶，且其它所有的记账人被恰好分割为两个网络孤岛时，恶意记账人可以使系统出现分叉，但是会留下密码学证据；

以上总结来说，dBFT机制最核心的一点，就是最大限度地确保系统的最终性，使区块链能够适用于真正的金融应用场景。

Pool验证池——私有链专用

基于传统的分布式一致性技术，加上数据验证机制;之前曾是行业链大范围在使用的共识机制，但是随着私有链项目的逐渐减少渐渐开始势微。

优点

不需要token也可以工作，在成熟的分布式一致性算法（Pasox、Raft）基础上，实现秒级共识验证。

缺点

去中心化程度不如bictoin；更适合多方参与的多中心商业模式。

参考

拜占庭将军问题

拜占庭将军问题是一个协议问题，拜占庭帝国军队的将军们必须全体一致的决定是否攻击某一支敌军。问题是这些将军在地理上是分隔开来的，并且将军中存在叛徒。叛徒可以任意行动以达到以下目标：欺骗某些将军采取进攻行动；促成一个不是所有将军都同意的决定，如当将军们不希望进攻时促成进攻行动；或者迷惑某些将军，使他们无法做出决定。如果叛徒达到了这些目的之一，则任何攻击行动的结果都是注定要失败的，只有完全达成一致的努力才能获得胜利。

这一问题是一种对现实世界的模型化，尤指网络当中由于软硬件错误、网络阻塞及恶意攻击导致的各种未知行为。
显然，在此处默认了将军们在达成一致的过程中正确的传递出了自己的决定，也就是说叛徒只存在于将军当中，不存在于传令兵当中。故要让拜占庭将军问题有解，必须要具备一个重要前提，即信道必须是安全可靠的。关于信道可靠问题，会引出两军问题。两军问题的结论是，在一个不可靠的通信链路上试图通过通信以达成一致是基本不可能或者十分困难的。

拜占庭容错

拜占庭将军问题提出后，有很多的算法被提出用于解决这个问题。这类算法统称拜占庭容错算法（BFT: Byzantine Fault Tolerance）。简略来说，拜占庭容错（BFT）不是某一个具体算法，而是能够抵抗拜占庭将军问题导致的一系列失利的系统特点。 这意味着即使某些节点出现缺点或恶意行为，拜占庭容错系统也能够继续运转。本质上来说，拜占庭容错方案就是少数服从多数。

拜占庭将军问题的原始论文给出了一些解决思路，但其更注重理论上的可行性。算法效率不高，算法复杂度为指数级，且文中明确指出时间成本及消息传递数量很大。因此不具备太大的实用价值。

拜占庭容错系统需要达成如下两个指标：
● 安全性：任何已经完成的请求都不会被更改，它可以在以后请求看到。在区块链系统中，可以理解为，已经生成的账本不可篡改，并且可以被节点随时查看。
● 活性：可以接受并且执行非拜占庭客户端的请求，不会被任何因素影响而导致非拜占庭客户端的请求不能执行。在区块链系统中，可以理解为，系统需要持续生成区块，为用户记账，这主要靠挖矿的激励机制来保证。

拜占庭系统目前普遍采用的假设条件包括:
● 拜占庭节点的行为可以是任意的，拜占庭节点之间可以共谋；
● 节点之间的错误是不相关的；
● 节点之间通过异步网络连接，网络中的消息可能丢失、乱序、延时到达；
● 服务器之间传递的信息,第三方可以知晓 ,但是不能窜改、伪造信息的内容和验证信息的完整性；

科普 | 什么是共识机制？

详解区块链中常见的八大共识机制！

区块链的几大共识机制及优缺点

作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

你有想过你的孩子一边喝六个核桃，一边听樊登读书吗？如果没有，这是因为你不知道樊登读书的销售场景有多丰富，他们和六个核桃就设计了一个联名套餐，售价429元。
你有想过你的办公场地可以加入一个读书角，让员工每天读书学习吗？如果没有，这是因为你不知道樊登读书有一个服务叫数字阅读空间，它可以让你的员工一键扫码即可阅读学习。
你有想过樊登读书2023年会解读什么书吗？如果你想知道，你可以购买他的「未来书单」，他都为你设计好了，不仅有52本实体书，还会给你一份未来书单专属认证的学员徽章。
如果不去拆解樊登读书，你根本不知道这个产品可以把读书这个原本枯燥乏味的学习形式变得这么有创意，绝对超出你的想象。
樊登，作为前央视的主持人，在2013年创办了樊登读书会以后，发展不到10年，APP会员数已经突破了6000万，年营收超过10亿，全国线下樊登读书运营中心超过2000家，成为了知识付费行业的一个独角兽。这样一个读书产品，到底有什么魅力，能让用户对它如此着迷，樊登又是如何找到他的书中黄金屋，本期设计大侦探，为大家带来樊登读书的产品拆解，让我们一看究竟。

一、导读

1. 内容结构
全文11158字，分为六个部分，分别是导读、产品画像、读书服务、内容服务、会员服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群
第一类，UI/交互设计师，可以跳出执行层，去思考樊登读书的产品设计策略，提升产品分析能力；
第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；
第三类，知识付费行业从业者，通过对樊登读书的全面拆解，获取竞品设计参考。

3. 分析模型
我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考樊登读书为什么这样设计。
第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于分析产品的功能价值。
第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。
第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。

二、产品画像
在本节，我们将会通过樊登读书官网、百度百科、易观千帆和七麦数据等资料网站，让大家对樊登读书有一个初步的了解。

1. 产品介绍
樊登读书成立于2013年，是前央视主持人樊登创办的知识付费品牌。樊登读书APP是一款为用户提供书籍精华解读（非电子书）、精品课程教授、社群学习等知识服务的软件，致力于为3亿国人养成阅读习惯。根据樊登读书2022年三季度的社会责任报告显示，樊登读书目前会员数突破6000万，音视频累计播放超45亿人次，用户收听总时长超8.1亿小时，是知识付费行业的头部品牌。

2. 商业模式
樊登读书以读书点亮生活为价值主张，旨在帮助3亿国人养成阅读习惯，目标用户群体有C端大众消费者以及B端企业客户。樊登读书作为一个知识付费平台，吸引了众多知识创作者加入，主要为用户提供内容生产、出版合作、线上电商和线下书店四块业务，其次通过线下加盟代理的模式，目前在全国已经建立超过2000家城市运营中心。樊登读书的盈利模式非常丰富，除了最基础的会员VIP服务，还有课程、训练营、听书和电商等增值服务，年营收在2021年就超过10个亿。

3. 用户画像
樊登读书的用户群体男女比例均衡，女性占比54.67%，男性占比45.33%；年龄以24-30岁居多，占比40.21%，其次为31-35岁，占比26.36%；樊登读书的用户消费能力较强，中等以上消费者占比71.09%；用户以三线城市最多占比23.20%，一线城市仅占8.93%，其中广东省最多，山东和河南省位居前三。

4. 信息结构
樊登读书的菜单栏主要分为「首页」、「樊登讲书」、「免费视频」和「我的」四个一级栏目。「首页」以TAB切换的形式向用户展示不同的子栏目内容，非常夯实；「樊登讲书」是范登读书的王牌栏目，可以收听樊登每年讲解的52本书；「免费视频」是一个短视频栏目，主要截取樊登讲书视频的精华内容，通过沉浸式的体验，提升用户使用产品时长；「我的」就是用户中心，主要储存用户的读书数据，可以查看历史读书记录、订单和购买历史等内容。

5. 重要迭代记录
樊登读书的首个APP版本发布于2015年2月16日，截止到10月28日，APP版本已经更新至V5.56.0版本，平均1年更新次数为33次。

版本迭代重要记录
2015年12月，发布V3.0.1版本，Slogan为「成功人士有声阅读神器」；
2017年8月，发布V3.9.0版本，Slogan升级为「帮助3亿国人养成阅读习惯的学习型社区」；
2018年4月，发布V3.9.16版本，品牌形象全新升级，加入知识课程等内容；
2018年7月，发布V3.9.22版本，樊登读书会更名为樊登读书；
2018年10月，发布V3.9.26版本，Slogan升级为「读书点亮生活」；
2020年5月，非凡精读馆公测上线，为用户带来更多专家解读书籍；
2021年7月，发布V5.18.0版本，上线李蕾慢读栏目；

6. 产品生命周期
根据易观千帆数据显示，截止到2022年7月，樊登读书月活跃用户人数115.94万，注册用户超过6000万，年营收早在2021年就超过10亿。明年即将年满十岁的樊登读书，目前处于产品生命周期的成熟期，当下聚焦于商业变现和用户增长。

7. 竞争图谱
和听书类APP相比，樊登读书月活跃用户人数排名第19，喜马拉雅1.3亿月活跃用户人数全网第一；和读书类APP相比，樊登读书排名第四，起点读书月活跃用户人数1762.70万全网第一。

三、读书服务
「读书服务」是樊登读书最核心的服务，是实现商业变现最重要的方式。从讲书人去拆分，樊登读书设计了樊登讲书（火车头）、李蕾讲经典（前央视主持人，自带流量和曝光度）和非凡精读（汇聚各行业精英大咖）三个版块。从知识学习的场景拆分，樊登读书设计了「课程」和「书城」两大版块，如今的樊登读书，已经成为一个非常丰富的知识付费学习平台，不仅有各种知识付费、职业培训课程，还有训练营、系统课，以及有声书和实体书销售等业务，内容非常夯实。从用户群体去拆分，樊登读书还设计了企业共读营、线下翻转课堂和数字阅读空间这些面向企业的读书服务，把读书赋能给企业，为他们提供提供综合性的读书解决方案，以建立学习型组织为目标。

1. 个人IP
樊登读书以「樊登」这个超级IP作为火车头，每年讲解52本书为底层服务内容，现在加入了「非凡精读」和「李蕾讲经典」两个内容栏目。这两个栏目，不仅可以丰富平台的内容，还可以弥补樊登一年只讲52本书的数量缺陷，从而满足更多用户的需求。

1.1 樊登讲书
「樊登讲书」是樊登读书的王牌栏目，是吸引用户收听和付费的主要内容。樊登以每年为用户讲解52本书和提炼45分钟书籍精华为卖点，帮助那些没有时间读书、读不懂书的人培养阅读习惯。从内容分类看，「樊登讲书」主要分为心灵、个人成长、亲子家庭、人文历史、商业财经、社科新知、健康生活和作者光临9个栏目。其中亲子家庭是最热门的内容之一，育儿的书籍是樊登最吸引用户的内容，樊登还拥有育儿专家的头衔。

1.1.1 讲书详情页
①「讲书」有三种传播形式，默认为音频，其次还有视频和文稿，非常丰富，用户可以在头部自由切换。每一本书就像一个产品、一个主题，除了收听讲书内容，还支持下载音频和思维导图，其次还加入了增值服务，比如实体书购买和训练营（根据这本书的主题设计）。

②讲书详情介绍分为解读时间轴、评论话题、荐语、你将获得、作者简介和精彩选段六个部分。这里的内容结构设计得非常好，「解读时间轴」是把讲书的内容拆分，让用户快速获取讲书的结构；「评论话题」是为了增加用户互动，以评论领礼品的形式提升用户活跃度；「荐语」和「你将获得」，是为了吸引用户阅读，让用户知道这本书对自己有什么帮助；「精彩选段」把这本书的一些名言警句以图片海报的形式设计出来，吸引用户分享传播。

③「文稿」的设计体验特别好，和其他音频产品相比，樊登读书的文稿像是参考了微信读书这样的阅读产品。用户可以划线，可以发表想法，划线最终会生成笔记储存在用户中心，还可以把划线的内容生成海报分享，为平台拉新引流。

1.2 李蕾讲经典
李蕾是前央视主持人，2021年加入樊登读书。围绕「李蕾」这个个人IP，樊登读书设计了「李蕾讲经典」栏目，每年为用户解读52部经典名著，包含世界名著、国风经典、名人传记和中国现代经典。在商业变现的设计形式方面，樊登读书把「李蕾讲经典」作为一个独立的栏目，用户需要单独购买VIP会员才能收听。

1.3 非凡精读
「非凡精读」是樊登携手80+各领域大咖为用户深度解读好书，樊登读书作为一个读书平台，链接了其他优质领域的大咖，为用户提供更丰富的内容。
非凡精读的栏目首页分为金刚区（镇馆之宝、听书指南、好书共读和全部书籍）、本周新书、最近在读、为你推荐、今日限免、精选书单、非凡主讲人和口碑好书八个部分，书籍类型包含个人成长、家庭经营、心灵疗愈、人文经典等内容，其次「非凡精读」的内容也需要用户单独购买VIP会员才能收听。

2. 课程
樊登读书充分利用知识付费的消费场景，吸引了众多知识付费KOL加入平台，为用户提供丰富的知识付费课程。根据官方数据统计，目前平台已经有198门课程，包含个人成长、亲子家庭、人文历史、商业财经、社科新知、声音剧、有声书、新父母和樊登专区9个栏目。
课程栏目首页的设计，主要包含金刚区、热销课程、课程合集、限免节目、最近在学和专属为你推荐六个内容。在销售方式上，课程是以单个付费的形式销售，定价在100-300元之间。

2.1 樊登课程
樊登不仅讲书，还设计了很多的课程，比如樊登讲《论语》、可复制的领导力这些以代表作设计出来的课程。樊登课程的栏目首页包含了精选好课、限免试听、热销周边和学习园地四个内容。

2.2 技能培训
樊登读书还吸引了众多职场知识创作者的加入，为用户提供职场技能培训课程，比如7天求职实战训练营、个人IP打造课、0基础抖音商业化实操课等，课程形式有录播课也有系统课，定价也不便宜。

2.3 训练营
相比课程和讲书，训练营是一个动态的系统课程服务，是解决用户学习的最后一公里。当用户听完书以后，事实上只是勾起了用户的学习兴趣，如果要想把知识吃透，还需要深入学习。「训练营」就是为了解决这样的痛点而设计的，不仅可以帮助用户解决学以致用的痛点还增加了新的变现形式。其次训练营的内容形式非常丰富，不仅包含常见的打卡返现活动，还有系统班、私教课，变现能力非常强。

2.3.1 打卡返现
「打卡返现」是训练营比较常见的一个活动形式，活动规则是用户需要缴纳保证金才能参与学习打卡，如果全勤，可以退回保证金，反之保证金将会被扣除。这个服务，对于用户的活跃度提升有很大的帮助，其次以全勤退还保证金为噱头，但事实上能拿回保证金的用户很少。

2.3.2 小课程
「小课程」是指培训时间在3-7天左右的训练营，比如7天《焦虑自救手册》行动营（199元）、3天《分享阅读》线上启动营（9.9元）。这类小课程是樊登读书训练营的核心内容，属于短频快的业务，商业变现能力极强。

2.3.3 系统课
「系统课」是指培训时间在15天以上的训练营，比如21天《爆款视频号》训练营（售价1980元）、家庭教育实战讲师认证营（售价8980元）这样的课程。系统课是属于高利润产品，定价均在1500元以上。

2.4 新父母
「新父母」是樊登读书联合「新教育研究院」共同发起的栏目，用户人群是30-45岁这个用户群体，旨在通过正确的教育理念帮助传统的父母找到全新的教育方法，和孩子建立和谐、健康的亲子关系。整个栏目首页主要分为入门必修、父母进阶和副业变现三个内容。「入门必修」为父母提供了新父母五门必修大课，售价590元；「父母进阶」是实战特训营，通过直播授课、小班实操教学，帮助父母快速掌握育儿难题，售价898元；「副业变现」是系统课，通过31天的系统学习，帮助有意向在亲子育儿领域发展副业的父母通过专业的培训成长为一名实战讲师，售价8980元。

2.5 知识副业
樊登读书提供7种形式的知识副业，分别是樊登小店、知识主播、知识顾问、翻转师、社群运营官、沟通力讲师和兼职客服。其中翻转师、社群运营官和沟通力讲师这三个需要付费报名学习的岗位，目标人群以自由讲师、教师、企业培训者为主，为樊登读书源源不断补充讲师资源。

2.5.1 樊登小店
樊登小店就是樊登读书入门级的分销商，用户可以零成本申请加入。每个用户都可以拥有自己的一个小书店，可以通过建立自己的社群或朋友圈进行书籍分享，用户下单后，出版社直接发货，店主赚取销售提成。

2.5.2 知识主播
知识主播就是负责樊登读书的电商直播，通过直播带货，实现副业收入。知识主播可以免费报名，分为兼职主播和全职主播。

2.5.3 知识顾问
知识顾问就是为用户解决知识困惑的咨询师，本质是樊登读书的销售。用户可免费报名，樊登读书提供系统的专业培训。

2.5.4 翻转师
翻转师是樊登读书·雨知教育的核心服务，课程体系分为六大板块，目标人群是自由讲师、教师、企业培训者等，最终帮助他们成为樊登读书的授课讲师、知识主播和知识顾问。翻转师是付费的系统培训，定价5686元。

2.5.5 社群运营官
社群运营官属于一个付费的系统培训，定价3980元。这个服务主要针对在校学生、全职宝妈、自由职业和朝九晚五的上班族，通过21天的系统培训学习，掌握社群运营的知识和技巧，其次也有机会成为樊登读书签约的樊登读书运营官。

2.5.6 沟通力讲师
沟通力讲师也是付费服务，价格没有公开。沟通力讲师主要是通过学习樊登的《可复制的沟通力》课程，最终有机会成为樊登读书沟通力团队的签约讲师机会。

2.5.7 兼职客服
兼职客服就是主要帮助樊登读书处理客服的工作，只要用户有时间，都可以报名申请参与。

3. 书城

3.1 有声书
「有声书」包含了樊登专区、情感家庭、心灵疗愈、小说文艺等内容，为用户提供更多的听书选择，不过相比喜马拉雅、微信听书这样以开通VIP会员付费收听的模式，樊登的有声书直接以单本书籍售价，而且单价不低，均价在19-39元之间。

3.2 心选商城
「心选商城」是樊登读书官方为用户提供的一个在线购买实体书和周边产品的平台，从书籍数量看，内容包含了儿童科普、儿童绘本、职场进阶、心灵治愈、人文社科等类型，非常夯实；从商品类型看，除了书籍，心选商城还支持各种周边、联名商品的购买。和传统的书城相比，心选商城的内容设计非常创新。

3.2.1 三本好书
「三本好书」的本质是一个组合套装，但是樊登读书用书单的形式来设计，不仅增加了销售量，还为用户设计了充足的购买理由。在「三本好书」的介绍里，文案是这样的描述——多读一本书，解决更多生活中的问题；多读一本书，收获更多的归属感、幸福感；多读一本书，更深度拓展和提升思维认知，可谓情怀满满，让用户产生了强烈的购买欲望。

3.2.2 樊登未来书单
「樊登未来书单」定价2199元，属于高利润产品，它主要有三个卖点，第一，每月会把当月樊登即将解读的4本书籍提前邮寄给用户，让用户可以抢先读；第二，赠送樊登专属证书、52本书的思维导图实体卡片、1本专属定制未来书单礼记和微信专属社群，不仅拥有精美的实物礼品，还能享受专属社群，突出尊贵感；第三，以选书、读书、用书和“写”书四个环节的服务帮助用户每周读透一本书、实现跨越式增长为卖点，为「未来书单」增加了「学习」属性，从而让用户感觉自己买的不是书单，而是成长。

4. 企业服务

4.1 企业读书
「企业读书」面对的是企业用户，以读书学习为切入点，帮助企业员工建立读书习惯，协助企业打造学习型组织。「企业读书」是一个综合性的读书解决方案，由内容、工具和服务构成。在内容端，为企业提供樊登读书超过800+优质内容，还可以为企业量身定制书单；在工具端，为企业员工提供一个满足多场景学习的高效工具，企业还可以通过PC管理端查看企业员工的读书数据，实现数字化管理；在服务端，为企业提供专家团队1V1支持服务，赋能企业组织线下活动，最终帮助企业员工建立阅读习惯。

4.1.1 企业共读营
「企业共读营」是通过优质书单和共读工具，让员工在21天社群的督促和专家指导下，一起共读，通过听、学、教、练和评五个步骤帮助员工学习读书，打造全流程的闭环训练场景，旨在帮助员工养成读书的习惯，为组织营造读书氛围。

4.1.2 线下翻转课堂
「线下翻转课堂」是由专业引导师带领学员共同解构一本书，帮助学员理清逻辑结构、重点知识，深化实际场景应用，在交流互动中营造良好的读书氛围。「线下翻转课堂」就像一次企业员工拓展活动，以读书沟通为主题，充分调动员工的学习热情，增强团队学习氛围，丰富企业员工生活。

4.1.3 数字阅读空间
「数字阅读空间」就是在企业办公场地可利用的空间里面，通过硬件设备作为载体，将图片、文字、音视频等内容置入，让员工扫码就可以收听，同时通过这样的设计，为企业打造阅读的氛围。

4.2 开放平台
樊登读书已经把读书做成了标准化的产品，支持接入网页、小程序、APP、车载等终端，打造了一个通过接入樊登读书API就可以实现合作的第三方开放平台。目前樊登读书有针对教育、银行、出行等行业设计了解决方案，创意惊人。

5. 总结
从读书服务我们可以看出，樊登读书是一个非常有创意和变现能力超强的产品。不管是面对C端大众消费者，还是面对B端企业用户，他都可以把「读书」赋能到到不同的场景和主题中。比如「新父母」这样的栏目，就是抓住了众多传统的父母对孩子教育没有正确方式的痛点，让用户看着就难受、看着就羞愧、看着就恨不得立马开通会员学习。
其次樊登的商业变现形式设计，非常有层次感。以「新父母」这个服务为例，首先为你推荐基础课程，如果用户的自律性不够或者无法理解，它又设计了训练营，二次变现。更厉害的是，它为读书赋予了“副业变现”这个属性，然后通过8980元的系统课，帮助那些全职或想做副业赚钱的妈妈用户群体进行系统培训，层层推进。这样的设计方式，甚至在企业端也复制了一套，变现能力惊人。

四、内容服务
「内容服务」是帮助产品实现用户留存和激活的关键方式。樊登读书如今已经把「免费视频」作为APP的一级栏目，通过1-2分钟的精华片段播放，可以有效提升新用户的激活率，最终成为付费用户；其次樊登读书还有精彩丰富的线下线下活动。

1. 免费视频
「免费视频」是一个短视频栏目，内容主要从樊登讲书的视频提炼出精华片段剪辑成1-2分钟的短视频。这个栏目设计得非常好，第一，把一个长达45分钟的读书视频拆分出来以后，不仅可以降低阅读成本，还增加了碎片化阅读的形式，降低用户读书的时间成本，可以极大提升用户的读书时间；第二，一个免费视频对新用户来说，就是一次免费试听，通过对精华内容的提炼，对用户的激活有非常大的帮助；第三，免费视频同时可以作为高质的短视频素材，分发到抖音、视频号、小红书和知乎等平台，帮助平台传播引流。

2. 活动
樊登读书的「活动』是用户运营的主要方式之一，活动分为线下活动和线上活动两种形式。樊登读书的活动主题非常丰富，不仅可以直接分享平台的热门书籍，比如《非暴力沟通》、《职场焦虑》、《陪孩子终身成长》等，还可以结合樊登自己创作的系列书籍为主题，比如《可复制的职场沟通力》等，内容的边际成本非常低，可不断复制。樊登读书在全国拥有2000多家城市运营中心，每一次活动，其实就是一次分享传播和新用户激活，另外樊登读书的活动不是免费参加，很多活动都需要付费报名参与，变现能力非常强。

2.1. 沐光公益
沐光公益是樊登读书创立的公益品牌，主要为落后的偏远山区孩子们建立爱心图书室，帮助孩子们建立阅读习惯。他的捐赠规则是当用户捐赠的光束足够多，樊登读书就会为欠发达地区捐赠一座“沐光书屋”。用户可以通过两种方式为山区的孩子们进行捐赠，第一种是在樊登读书APP每听完一本书就会产生一束光；第二种就是通过在樊登读书的直播间购买书籍，捐献一束光。这样的活动设计，结合了公益，更容易打动用户，重新让用户更愿意多读书，提升用户活跃度。

3. 眼界
「眼界」是由上海科创教育和樊登读书联合打造的一个内容栏目，从2022年9月15日到2023年1月31日，每周更新一期专题内容，目前已更新六期。从这个栏目可以看出，樊登读书不仅仅是一个听书产品，而是成为一个有深度的教育学习平台。未来类似这样高质量的栏目相信会越来越多，这会对品牌的宣传、公信力以及用户的留存起到非常大的帮助。

4. 发现
「发现」这个版块，藏得比较深，在「用户中心」的「常用工具」。但这个版块的内容非常夯实，它就是一个社区，有热点新闻、视频、文章、活动、书友等十余个栏目。从内容设计看，这个栏目有很多想象空间，比如目前内容的生产形式是以媒体号发布，用户还可以关注，未来樊登打造自己的读书社区吗？由于资料有限，并不知道未来这个栏目会怎样定位和规划。

5. 总结
从内容服务的拆解，我们可以看出樊登读书的未来发展空间非常大。首先短视频的设计会极大提升用户使用产品的时间，让产品有更多的可能性。其次通过「发现」这个版块的设计推导，也许未来樊登读书会朝着一个读书社区发展。

五、会员服务
「会员服务」是樊登读书实现用户留存和传播拉新的重要方式。樊登读书的会员服务非常丰富，而且有很多创新点。樊登读书设计了四种VIP会员卡，分别是樊登讲书、非凡精读、李蕾讲经典和心选黑卡，享受不同的会员权益服务；在用户运营方面，为用户提供专业完善的学习分析工具，记录用户的学习时长，其次还有每日签到、成长福利和小书童服务；在用户福利方面，还为用户设计了礼品卡、联合福利、听书卡和车主福利；最后为了吸引用户分享推广，还设计了邀请好友和组队读书两种方式。

1. VIP会员卡

1.1 樊登讲书
樊登讲书的VIP会员售价388元一年，拥有内容（可收听樊登讲书栏目所有内容）、功能（支持音频、视频和文稿）、服务（专属书童服务）、折扣（购买课程享受折扣）和亲友（1人购买多人免费听）五大特权。
其次樊登读书还设计了一个多听多送卡的会员升级服务，售价488元，鼓励已付费的会员进行会员升级。升级以后可赠送下一年的樊登讲书年卡，每周听1本书可赠送7天VIP时间，不限时间积累，赠满1年即可获得下一年VIP。

1.2 非凡精读
非凡精读会员定价388元一年，购买后可以畅听非凡精读800+本优质书籍资源，服务内容主要是每周更新3本好书、5张14天樊登讲书亲友卡和每月发放价值超300元的学习福袋。

1.3 李蕾读经典
李蕾讲经典定价也是388元一年，购买后可以畅听李蕾讲经典的所有内容，还拥有5张李蕾讲经典亲友卡以及400+分钟配套朗读节目。

1.4 心选黑卡
心选黑卡是心选商城的会员VIP，定价99元一年，购买后，可以享受最低9.2折的购物折扣，还拥有专属的黑卡月券和社群。

2. 用户运营

2.1 成长福利
樊登读书根据用户每天读书的时间记录详细的读书数据，包括累计学习天数、累计学习时长等，这里的交互体验设计得非常友好，用户可以直接滑动日历查看过去半年的读书时间，非常方便。

2.1.1 勋章
勋章分为五大类，分别是小试牛刀（门槛低，用户通过完善资料、评论和分享即可获得）、学无止境（门槛略高，根据学习时间来颁发勋章）、推荐达人（鼓励用户分享拉新）、读书小队（根据书单任务设计）和限量勋章（根据用户忠诚度设计，分为相伴1周年、2周年和3周年等），可以看出设计得非常用心。

2.2 学习历史
「学习历史」就是用户学习数据看板，樊登读书会把用户每周的学习数据都记录下来，包括当周学习时长，历史学习时长等，其次还提供测试、笔记、想法、下载记录和阅读记录等功能。

2.2.1 学习数据
「学习数据」的统计维度非常细，为用户生成今日、本周以及历史学习时长记录，根据用户的阅读习惯生成「听书偏好指数」。其次还设计了一个影响指数，也就是如果用户分享给好友以后，「学习数据」也会统计好友的读书时长，生成用户的影响听书时长，设计得特别有创意。

2.2.2 测试
当用户听完一本书，为了帮助用户更好的理解这本书的知识，樊登读书设计了一个测试答题的环节。用户答完题以后，不仅可以查看答案解析，还可以生成朋友圈海报分享，传播拉新。

2.3 每日签到
用户可以通过每日签到领取积分，以7天为一个周期，连续签到积分加倍，积分可以在商品购买时候进行抵扣。在任务中心，樊登读书设计了不同的小任务，以极低的行动成本鼓励用户进行分享、读书和评论从而赢取积分。

2.4 小书童
小书童的设计非常巧妙，它并不是一个智能AI客服，而是让用户添加企业微信客服，这其实是把用户留存和销售场景移植到微信上，从而实现用户激活和复购。

3. 用户福利

3.1 礼品卡
「礼品卡」是一种线上的虚拟VIP卡，用户可以购买赠送给好友，售价388元，其实就是樊登讲书的VIP。樊登读书把礼品卡设计成了一种裂变形式，官方会给用户赠送限时的礼品卡（一般为7天），好友领取以后，用户还可以获得3天的VIP时长，传播拉新能力非常强。

3.2 联合福利
「联合福利」就是樊登读书通过学习的场景链接了其他第三方品牌，以联名的形式向用户推出联合服务。可以说，樊登读书把读书学习和场景的链接，发挥到了极致，比如六个核桃×樊登读书联名套装，你可能想不到还有这样的套餐，一边喝六个核桃，一边听樊登读书。

3.3 领听书卡
「领听书卡」这个用户权益主要是回馈教师和医护这两个行业的用户群体。樊登读书设计得特别巧妙，如果你是这两类用户，你可以填入个人信息进行申请；如果你不是，你可以分享给你的老师或朋友（职业为教师和医护），这样的设计简直让用户很难有抵抗力，让用户主动为产品拉新。而且听书卡只有1个月的福利，免费试听结束后极大可能转化为付费会员。

3.4 车主福利
「车主福利」也是一个樊登读书和其他行业完美链接的活动形式，樊登读书通过和一些汽车品牌进行深度合作，直接以车载应用的形式载入到汽车设备，用户在驾车的时候可以直接收听樊登读书的内容，多场景提升用户黏度，让用户随时随地都能收听。

4. 用户推广

4.1 邀请好友
「邀请好友」的设计特别简单，但是海报的文案非常打动人，通过很多名言警句和热门书籍生成的海报，直接转发给好友或发布在朋友圈，有新用户注册付费以后，老用户则可以领取听书时长。

4.2 组队读书
「组队读书」的活动规则很简单，所有人都可以发起组队，三人成组开始听书，完成任务以后可以获取积分。这个活动对用户的拉新和提升活跃度有很大帮助，老用户为了获取更多的积分，邀请到越多的新用户，组队奖励就会翻倍。

5. 总结
从会员服务的拆解我们可以看出，樊登读书的用户运营和营销形式设计得非常丰富。为了增加用户的投入成本，他们设计了非常专业完善的学习统计工具，通过勋章、测试、每日签到形式鼓励用户每天听书、学习。其次还引导用户添加「小书童」，通过1V1、高频的链接，和用户建立关系，实现激活和复购。在营销形式方面，以领书卡为例，如果你是老师，你可以直接领取，而如果你不是老师，那你可以分享给你的老师，这样的拉新方式，非常值得学习。

六、设计总结

1. 极致的单点突破
樊登读书可谓是一个单点突破的典型案例。樊登在《讲好一本书》中分享过他的创业历程。最初用户就是不想读、没时间看、读不懂，他们愿意给樊登交钱让他读给他们听。所以樊登从成立樊登读书开始，就以每年52本经典好书为主要卖点，解决用户没时间读书、读不懂书这个痛点，单点突破，最终打造了樊登这个超级火车头，把讲书这件事，做到极致，才有了今天超过6000万会员的樊登读书会。

2. 天马行空的创意
樊登读书在内容层的设计可谓天马行空。它不仅把读书设计了一个标准化的产品，支持消费者随时收听、学习。而且升级成了一个块芯片，可以即插即用，比如读书开放平台，支持多设备、多场景的对接，让樊登读书和其他行业进行更深入的链接。甚至一个普通心选商城，樊登读书都能设计出三个书单、未来书单这样的创意服务。

3. 丰富的变现形式
樊登的商业变现形式实在太丰富了，就像齐天大圣的72变，在任何环节，都能让用户为知识掏腰包。你可能想象不到你的孩子可以一边喝六个黑桃一边听樊登读书，又或者你的全职太太正在通过樊登读书的系统训练营正在学习如何通过副业变现，甚至当你听完《焦虑自救手册》手足无措的时候，你发现原来还有王丹老师为你设计了一个走出焦虑的行动营。

作者：设计大侦探

 来源：站酷

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司