支付宝体验设计精髓读书笔记

# 前言

《支付宝体验设计精髓》从学设计、做设计、看设计和玩设计4个维度进行了总结，其中包含了19个设计领域的重要主题，每个主题都围绕AUX团队的设计实践深度展开。

本书由于内容较多，根据4个维度划分四篇文章分享给大家。本文是第一篇，内容是第一个维度“学设计”中的5个主题。全文共计10442个字符，建议阅读时长21分钟。

# 目录

01 行业设计“五步法”

02 无规矩不成方圆—设计规范的建设

03 设计走查表 

04 图标设计与验证　          

05 敏捷开发模式下的设计协作

以医疗产品设计为例

一、充分的行业调研

1.桌面研究

2.田野调查

二、圈定目标人群，明确用户分类与行为特征

1. 人口学特征

2. 用户分层

3. 行为特征

三、仿真分析，搭建用户场景

1. 场景是什么？

2. 为什么要搭建场景？

3. 场景该如何搭建？

4. 模型展现方式？

四、筛选核心需求，建立需求管理

1. 评估需求

2. 排序需求

3. 需求变更管理

五、建立交互框架，输出交互方案

1. 信息架构设计

2. 流程图

3. 页面交互细节设计

建立系统级的设计规范    

设计规范是用户体验的最低标准！——吴明

一、规矩成就方圆

1. 规范1.0 ——样式库

2. 规范2.0 ——交互规范文档、视觉规范文档

3. 规范3.0 ——自上而下的设计规范体系：设计原则、基础规范、单元控件、标准组件，然后落地到开发控件库

二、设计原则

1. 简单的力量

  （1）一个页面只做一件事情，突出两个重点

  （2）删除不必要的内容，隐藏次要的内容

2. 高效的执行

  （1）1秒钟等待：用户能忍受的等待时间是6~8秒

  （2）转移注意力

  （3）一次点击：减少用户操作的次数，提高操作效率，成全人类“懒”的天性

          以手机充值交互优化为例：以前需要四次点击，优化后将充值金额平铺展现，一次点击即可付款

  （4）三级跳：模态窗口就可以减少页面的跳转

          某热门应用：首页-详情页-个人页-详情页-个人页：如何返回？

3. 人性的对话（用户使用应用的过程就是人机对话的过程）

界面中展示的信息是系统向用户传递信息，用户的操作就是再向系统传递信息

（1）适时反馈

       1）反馈方式：对话框、小气泡“Toast”、多态按钮、动画、声音/震动

       2）过度反馈：多余弹框、多余展示删除成功的小气泡

（2）情感关怀

       1）安抚和关怀：系统繁忙情感化设计提醒

       2）正向强化：

               a.用户进入余额宝页面时，通过金额数字的增长动画，加强用户在查看收益和本金时候的喜悦感，加深用户对余额宝这个产品乃至支付宝的情感。

               b.开启支付宝会员的时候，通过一个完整的页面和动画告知用户获得的排名与会员等级，强化用户获得会员身份和等级时的自我认同感。

（3）智能服务（智能手机要够智能）

        1）支付宝登录，用户在应用中填写过的信息都可以记录到系统中，免去用户二次输入的麻烦，提升用户的操作效率。

        2）新卡号输入，自动将卡号分隔为4个数字一段，方便用户阅读和核对，并且根据卡号自动识别所属银行，减少用户的输入操作。

三、基础规范

设计原则在思维层面指导我们做出符合整体体验价值观的设计决策

1. 设计风格

（1）设计风格是整合品牌传播的一种表现，它能理性地反映品牌个性与共性，从而建立品牌知名度、美誉度、忠诚度及品牌联想度。

（2）支付宝给用户传达简单、高效、人性化的理念。而极简主义指设计从功能出发，形式以满足功能而存在，没有功能性的修饰全部去掉。这种设计风格，感官上简约整洁，品味和思想上更为优雅。

（3）极简主义设计时，只有图片、颜色、字体及大小、线条、icon风格、留白的处理等设计元素之间完美配合，才能达到理想的效果。

2. 色彩

（1）品牌色在界面设计中的使用应同时具备品牌识别性以及界面功能性，色彩的运用应达到信息传递、动作指 引、交互反馈，或是强化和凸显某一个元素的目的。

（2）支付宝移动端通过视觉感官来增强品牌色的引用，主要有3种途径：

        当前选中项、主操作按钮、操作类文案信息

3. 字体

    个性App字体做个性设计，会产生3个方面的影响：对增加App安装包的大小；用户在使用该App时，增加额外的学习成本和适应成本；个性字体与系统字体没有统一性。

（1）字体集

       1）IOS系统（苹果）：在WWDC 2015 大会上，苹果公司专门为中国用户打造了全新字体——苹方字体，同时支持简体中文、繁体中文、香港中文，看来苹果公司很注重中国人的用户体验。

       2）Android系统（谷歌）：中文字体未更新；Roboto是Android系统的默认英文及数字体。

（2）行高

        1）IOS系统（苹果）：设计采用默认行高验收时发现技术开发的页面和设计稿不一致，所以文字行高采用与技术开发对等的参数产出设计稿即可解决这一问题。

             小气泡“Toast”总结公式： Y=2 x ceil ( X/10 ) + X   

             公式中：X 为字号（ sketch里的字号）； Y为行高；ceil ()为向上取整数

             例如：24=2 x ceil ( 20/10 ) + 20    也就是说，当X 字号为20时，根据公式计算得出，Y行高为24

        2）Android系统（谷歌）：由于各机型的字体不同，文字行高为系统默认，不做设置

（3）标点

        1）中文字

            中文：在汉字国际码中采用全角字符

            标点符号：输入中文时，所输入的标点符号同时应采用全角字符

        2）英文、数字、特殊字符

             英文、数字、特殊字符：采用半角输入模式

             标点符号：同时应采用半角输入模式

（4）空格

        “空格”应用到实际的设计中，总结以下3点经验： 

        1）中英文混排：中英文之间加半角空格，方便用户阅读时进行区分。

        2）数字与单位之间：需增加空格，方便用户精确查阅数字【用户对数字（=金额）非常关注】，但度、百分比与数字之间无须增加空格。

        3）中文之间链接文字：需增加空格。在技术上实现链接时，可增大可点区域，同时给用户传达可点击感。

（5）对齐

        1）文字：中文或英文均可以采用左对齐的方式。

        2）数字：通常采用右对齐或小数点对齐，便于对个、十、百、千位上的数字进行对比；三个数字以上，使用千分符作为分隔，便于用户识别。

4. 图标

（1）图标网格

          使用图标网格可确保图标设计的一致性，从而建立一套明确的图形元素定位规则

（2）关键线的形状

        1）关键线的形状是网格的基础

        2）利用这些核心形状作为向导，即可使整个相关产品的图标保持一致的视觉比例

（3）产品图标

        产品图标是传达品牌内涵的一个重要载体，是一个品牌下产品、服务和工具的一种视觉表现，通过对每个功能属性的调用，确定用4种色彩区分各功能，能够以简洁的外形、鲜明的颜色友好地传递产品的核心理念与内涵。

5. 适配

（1）IOS适配：主流机型

（2）Android适配：主流机型

（3）APP设计开发必须考虑适配各种屏幕，一个基本思路如下：

        选择一种尺寸作为设计和开发基准；定义一套适配规则，自动适配剩下尺寸；特殊适配效果给出设计效果

        1）IOS适配流程

        2）Android适配流程

（4）只交付一套设计稿，默认的适配规则总结起来就是：

        1）文字流式

        2）控件弹性

        3）图片等比缩放

        4）适配系数

        5）特殊适配：单独考虑屏幕适配方案

四、控件&组件

一致性的原则要求，系统中同样功能的元素、控件、界面、应该在样式、交互行为上都保持一致。

通过对支付宝数百个页面的拆解和分析，我们根据页面元素的稳定性，将所有的页面元素归纳为不同的5个层级，并且分别定义每个层级的设计自由度。

1. 系统层

2. 框架层

3. 临时层

4. 内容层

5. 输出规范

五、输出规范

规范如果没有人使用，那就是一堆文档，我们要让规范帮助大家提升工作效率、沟通效率

1. 规范文档&UIKit

（1）根据设计师的工作规范，我们将设计规范氛围规范文档和UIKit两部分输出

（2）规范文档是最全的文档：设计原则、基础规范、以及每个控件的样式和使用规则

（3）UIKit则是控件样式的集合，提供和维护最新的样式源文件

2. 开发基础控件库

    建设开发的基础控件库，让各个产品的开发都可以直接调用和配置参数，这是规范和标准化执行的终极环节

3. 总结

    规范是死的，设计是活的

为规避设计缺陷，设计师在项目过程中可以逐步建立设计走查表

设计走查表相关因素：

1. App：硬件设备、软件支持、兼容性

2. 人：时间、地点、环境

3. 环境：网络环境、使用环境

一、硬件特性

设计前期应该注意的问题

1. 制定适配原则（任何产品）

    首先是制定native适配方案，如现实的文字和图片的适配

（1）数量不变进行同比放大适配

（2）同行数量增多，图片字号大小不变

（3）避免比规则背景

（4）不同设备适配时遮挡

2. 账户在设备上的切换

（1）统一设备，不同账户切换

       1）切换的新账户曾经在本设备登录过，则帮助用户加载展示客户端存储的本地内容，并且标记用户未处理的新信息。

       2）在加载过程中给出明确的加载状态、内容展示。

（2）不同设备，同一账号IOS切换

       先确定该账户是否支持多设备同时登录（多点登录）

       1）单点登录：则在登录B设备时，A设备的账户自动被挤下线（单点登录的安全限制），并提示用户，设备是在何时何地登录的，所以退出了当前的登录状态。

       2）多点登录：则注意内容的同步，且内容被操作过后的状态也需要同步到各个设备上。特别是同时登录时push通知下发及同步，不能让用户操作重复阅读的工作。

       3）如果设计的产品与优惠、红包等相关，则要判断设备ID，避免用户刷优惠或红包，对产品或活动造成影响

（3）横竖屏显示效果

       先确定应用是否支持横竖屏

       1）不支持：则锁定竖向或横向的单一方向

       2）支持：则考虑竖向和横向两种模式下的显示效果

二、软件特性

设计师需掌握设计相关的软件特性来帮助设计

1. 操作系统特性

  在新产品规划初期，需要确定新产品覆盖的系统及系统版本号

（1）IOS系统支持很多手势操作：故IPhone的用户更容易接受手势操作

（2）Android因为硬件设备的差异比较大，对手势的支持也有较大的差异，因此较为隐藏的手势操作不适合使用

2. 制定多平台的设计规范

（1）比如统一的表单操作、选项卡、浮层提示、加载、刷新等

（2）组控件的统一，可以有效的提高产品优化的效率，降低开发成本，同时能保证用户体验的一致性

3. 版本兼容时间

（1）版本覆盖时间

（2）更新提示强弱

（3）兼容性展示

三、网络特性

通过设计策略可以避免网络环境的各种状态对用户体验造成的影响

1.快速启动

应用在启动时需要一个加载时间，为避免用户在等待时间感到枯燥、乏味，可采取以下三种方式：

（1）让用户感知到应用的启动速度比较快：使用一张与应用相同的图片，用户点击时，就显示

（2）作为一个产品品牌展示区：启动页展示产品的广告语

（3）作为一个广告展示区：启动页面可以是产品代言人或者某个时间段的活动

2.合理缓存

页面合理缓存可以让用户感受到应用的速度更快，不浪费流量

（1）应用首页有比较固定的内容时需要做缓存

（2）已有内容的页面不需要全页面加载，可以先展示较旧的内容然后加载出比较新的内容

（3）相比每次进入都重新加载，缓存会让用户有更好的体验

3.弱网环境

（1）弱网环境下加载失败

       1）加载时间控制在8秒内，并且尽可能采取有趣的加载来降低用户的等待时间

       2）加载失败后，要给予用户重试的机会，并且告知加载失败的原因

（2）弱网环境下内容展示不全

        只出现站位图或者空白图片

（3）弱网无网状态下数据传输/设置生效机制

        可以有效提升用户体验，让用户不受网络环境的限制

       1）弱网无网，需要发布内容出去，可以支持用户本地发出，本地可见

       2）当有网络请求时，再将内容上传到服务端，并且让其他用户可见

（4）中断、超时

       1）若网络中断时，帮助用户保持当前的输入内容或者浏览内容，重新连接到网络的用户可以继续当前的任务

       2）若超时，则给用户提示，让用户停止等待，重新请求网络或退出

四、页面状态

可以用生命周期来描述一个页面的状态

1. 页面初始化

（1）启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览

（2）页面初始化需配合加载策略进行

2. 页面刷新

通过刷新可以更新当前页面的数据

（1）一般采用用户手动下拉刷新，不需要对整体页面进行刷新，只需要拉去最新的状态显示出来即可。

（2）如当前页面设计数字的提醒或同志，则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新状态。

3. 页面加载

（1）分步加载

        1）全页面加载的一种方式，为了尽快显示页面内容，可以先加载文字内容，再加载图片等内容

        2）在用户网速不够快的情况下可以尽快预览到内容

        3）这种加载方式通常应用在用户首次进入页面时

（2）懒加载

        1）也称为延迟加载，即在需要的时候才加载

        2）效率低，但占用内存小

        3）一般在页面浏览过程中加载新内容时采用这种方式

（3）智能加载

        1）第一种策略：是在产品中增加网络判断的机制，如果在弱网环境下，提前压缩图片并显示小图片，使其能尽量展示预览出的内容，点击小图，可查看大图。最好是可以让用户点击未加载的内容后继续加载，不需要重新刷新页面（只针对客户端页面）。

        2）第二种策略：是降低图片视频质量，点击后可以加载高清图片或者点击播放视频选择高清模式。而在网络环境不佳的情况下，则默认帮助用户降低质量，减少流量的耗损。

4. 页面内容被限流

（1）一般产品页面不会遇到限流的问题

（2）活动页面可能因为访问量太大而遭遇限流（eg：支付宝春晚发红包过程中，预测到活动中人流量比较大，提前设计限流页面，让用户有较好的体验）

5. 页面内容为空

（1）一般与用户相关的页面可能为空，如我的动态、评论等

（2）不能显示，可以先试用调皮一点的文案避免空页面显得过于枯燥

6. 页面内容失效

（1）一般固定入口不会有页面失效的状态

（2）非固定入口的页面失效后，可以将入口下掉或者在用户进入后刷新出可用内容

（3）页面也需要考虑信息的时效性、延迟、过期等问题

五、页面流程完整性

除了用抽象的流程图来确保流程的完整性以外，还可以通过以下四种设计原则来确保完整性上的体验

1. 快速回到首页/主要页面

    用户不管在应用什么位置，都可以快速回到首页/主要页面，这就要求在搭建整体信息构架的时候，结构足够扁平，并且所有的页面流程都必须形成一个有效的闭环。

2. 让用户始终知道自己在哪儿

（1）通过页面标题来让用户确认当前的位置

（2）通过页面之间跳转的转场动效让用户确认当前的位置

（3）用户可以沿原路返回

3. 返回到原来的浏览位置

（1）明确任何一个可点击的去向，且去向是可返回的

（2）返回问题连带定位，从哪里去返回到哪里

（3）特殊路径需要定制，可能会出现连跳好几个页面的情况，在验收过程中需要重点注意

六、消息通知

根据消息的强弱进行消息通知的设计

1. 强消息通知

（1）可以使用客户端推送用户可以在手机屏幕或者手机通知栏预览到内容

（2）用户可以通过通知的新消息直达详情页或通知列表

（3）用户未读的信息可以标记出未读数字

2. 弱消息通知

（1）可以在用户打开应用后，在内容层上统一提示，告诉共有XX条新消息

（2）点击后可查看所有消息内容

七、细节

设计细节有非常多的点，设计师可以根据自己的需求来制定细节的走查，以下是五种比较通用的细节点

1. 点击状态

  按钮点击状态包括：开始、结束、不可点、失效、已领完、已过期等

2. 发送状态

   发送状态分两种

（1）发送后需要较长时间返回结果的，此时发送后直接到结果页面，显示当前进度和最终结果及其时间

（2）发送后较短时间就返回结果的，此时发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面

3. 输入

（1）减少输入

        在移动端输入成本比较高

      1）可以通过表单、选项卡、默认填入值来减少输入

      2）在社交会话中，则可以通过更多的语言、图片、视频来减少输入，让用户沟通得更轻松

（2）输入限制

      1）在内容不确定多寡的输入框内，可采用暗文或数字的方式来帮助用户确认当前的输入内容有没有超过限制

      2）输入的内容一定要做长度限制，因为不只是在输入过程中会遇到显示的问题，在发布后也会有显示问题

4. 反馈

（1）即时反馈

      1）用户操作后，有需要反馈的信息在操作后立刻给出，反馈的区域不能距用户的操作区太远，否则会被忽略

      2）如果是非阻塞式的反馈，那反馈方式要轻，不要因反馈而干扰用户当前的任务，对用户造成困扰

（2）反馈效果

      1）所有的点击都要有明确的反馈状态，点击后会出现一系列的状态变化

      2）如有的按钮只可以被点击一次，用户点击后首先按钮状态会改变，其次会产生一个与点击相关的操作结果反馈。

5. 音效

（1）应用音效需要考虑其大小，配合操作使用时是否有延迟

（2）特别需要考虑用户当前的使用场景出现声音是否合适

八、与时间、数字相关性问题

1. 时间

（1）制定时间规范

        1）根据产品设计需求，在前期根据场景规划时间显示规则，如格式是“2016-3-16”还是“2016/03/16”

        2）用在列表页面，详情页面还是会话页面都要提前规范好

（2）不同场景下时间格式的选择

        1）用户对于时间的感知根据场景的不同会有很大的差异

        2）对时间进行设计时，一定是根据使用场景来进行时间的设计

（3）有效/失效时间

        1）消息、卡券、红包都会有时效性，内容失效后需要处理，可能由清除或者其他功能来支持

        2）有的内容没有生效期，但会变成历史内容，历史内容与现有的内容需要进行一定的区分

2. 数量

    规范数量规则时，需考虑以下问题：

（1）是否为零，为零时应该显示还是隐藏？

（2）刷新是否影响数字变化？

（3）数字是否会减少，当数字减少为零时是否有反馈或界面变化？

一、图标设计四部曲

图标设计只是设计阶段的第一步，我们要整体考虑它的应用性在界面中的风格

1. 构思方向

  图标指"图"(图形、图像)+“标”

（1）提炼主题关键词

（2）脑暴、找参照物

（3）考虑界面的质感、色系、视觉效果，主要设计方向风格，勾勒基本轮廓图形

2. 设计造型（形态）

（1）空间纬度

        1）二维图标

        2）三维图标

（2）时间纬度

        1）静态图标：一直保持着视觉形态不会随着时间推移而改变的图标

        2）动态图标：随着时间推移其视觉形态会发生变化的图标，它的变化常常是连贯的动画

             a. 优点：因其丰富的变化性而使得图标设计有了更多的变化，更加容易引起用户的注意，增加其与用户的交互性。

             b. 缺点：会因其太容易引起用户的注意而分散用户的注意力，从而干扰用户获取其他的信息，或者浪费用户太多的时间在于界面的交互上。

3. 风格定位

（1）扁平简洁风格

        1）简单，可识别性很强，一目了然，降低用户对图形的理解难度

        2）支付宝首页图标就是典型的扁平简洁风格

        3）扁平化的优点：

             扁平化利于突出重点，把不必要的东西都弱化，只保留最重要的；扁平化利于加载速度

（2）华丽质感写实风格

        1）功能性强，多用于吸引用户的宣传产品图标

        2）有些拟物图标有明显的触感，用现实世界的材质来表现，极度仿真写实

（3）独创个性风格

        1）特点：功能性强，吸引用户并指向具体的操作，图标风格独特而不简单明了，但通过略微的理解可以明白其功能。

        2）视觉形态表现比较多样化，二维和三维都比较常见

        3）色彩可以很丰富，但要根据具体的风格而定

        4）形状有限定轮廓和不限定轮廓之分，也是多种多样的

        5）质感的表现上也比较丰富和有个性，有素描手绘的、写实细致的、二维绘画的等

4. 细节整合

  打磨图标调整大小、比例、角度、元素的数量、明暗关系，视觉上保证图标整体一致性

  对于设计师来说，图标设计最重要的部分在于要弄清楚图标的功能是什么，抓住主要功能，列出尽可能多的方案从不同角度去思考，画出多种图形方案来扩充自己的思路。之后进行删减，最终输出一个贴切的设计方案。

二、图标可用性测试

1. 定义目标用户的3个角度

（1）人口学特征：性别、年龄、学历、职业、地域等

（2）使用动机：个人、企业、买家、卖家等

（3）使用经验：产品的使用时长、竞品的使用情况、互联网的使用年限等

2. 图标可用性评估方向

（1）图标的可识别性、差异性是影响用户理解的两个主要因素

        1）可识别性低，用户会理解不了图标想要传达的含义

        2）一个界面中若个别图标差异性不是很大，用户会产生视觉混淆，分辨不出来

（2）图标的可用性测试前期任务为：分别给出图标和图标名称，请用户一一对应

3. 图标可用性检验方法

（1）根据相关研究，影响图形符号认知的因素包含视觉复杂性、熟悉性、语义距离、具体性等

        1）视觉复杂性——图形细节的多少，组合图形元素的多少

        2）熟悉性——对图标中图形以及所表达的语义的熟悉程度

        3）语义距离——图标中的图形和其表达的功能含义之间的关联程度

                               关联性大的语义距离小，关联性小的语义距离大

        4）具体性——图标中的图形与现实生活中的物体相似度。相似度越高的越具体，相似度越低的越抽象

（2）根据外部用户的测试结果，将用户看不懂的图标根据以下四个纬度进行评分

        1）视觉复杂性——要求被试人员根据图形细节的多少，组合图形元素的多少，在五点量表（李克特量表）上打分

        2）熟悉性——根据对该图形的熟悉程度打分

        3）语义距离——根据对图标与其表达的功能含义之间的语义距离远近打分

        4）具体性——根据对图标的具体性进行测定

敏捷开发则以人为核心，迭代开发、循序渐进，将一个大项目分解为多个互相联系、分开运作的小项目，设定多个发布节点分批上线，这样既能提高效率，也能根据上线后的用户反馈来调整后续的产品策略。

一、需求分析阶段

1. 专业支持

    产品经理确定需求时，经常会在一些点上难以抉择，这时设计师通过专业支持来给产品经理一些关键意见，通过用研产出角色模型，通过市场分析和竞品研究产出竞品分析报告，帮助决策。

2. 快速输出原型

    和产品经理一起进行原型，梳理出框架图和典型界面，给予页面帮助其理清产品思路。

3. 换位思考

（1）产品经理需求不合理时，设计应深入思考产品经理的需求背后的商业目的，是否有更好的方式来达到此商业目标。

（2）设计师需要深入了解业务，开阔自己视野，才能提出有说服力的论据和产品经理PK，所以进入项目越早越好，这样才能更清晰地了解原始的产品诉求。

4. 尽早邀请视觉设计师加入

（1）从需求阶段就加入，使视觉设计师可以完整地参与整个项目流程，对需求的理解很透彻。

（2）交互设计师保证用户的体验流程，视觉设计师保证用户看到的界面美观，视觉设计稿在项目前期可以设计成一些概念高，确定视觉风格，和交互稿的设计并行，这样可以节约大量时间。

二、设计阶段

在敏捷开发项目中，会有多个子项目同步进行，彼此之间的业务模块既有关联又相互独立，设计师之间的信息同步就显得非常重要了。为了保证项目进度和设计的统一性，采用下面几个方法。

1. 约定规范，信息同步

    约定规范，并持续进行更新同步

2. 了解全局，互相走查

     和产品经理一起进行原型，梳理出框架图和典型界面，给予页面帮助其理清产品思路

3. 细节抓大放小

（1）不要在线框图的美观性上太过纠结，将主要精力放在“解决问题”上去

（2）一定要做到布局和结构清晰，标注正确，特别是一些状态变化较多的控件

4. 主动沟通，协调推动

三、开发阶段

1. 了解一定的开发知识

（1）基础的技术框架知识

（2）界面的调用逻辑

（3）那些控件可以调用系统框架修改，哪些需要另外开发

2. 主动沟通

（1）一是输出设计稿时一定要做设计宣讲，将业务逻辑、设计原型和设计原则向开发人员解释清楚，避免有理解不一致的地方。

（2）二是设计有变更及时同步到相关人员

（3）验收时走查，有问题及时反馈

# 写在最后

非常感谢您的耐心阅读，如文章有表达错误或者错别字，欢迎大家指出～ 

码字不易，如果您能给点个赞那就更好了，笔芯～～