为什么设计师要有成本思维，以及成本思维在做我们做设计时对我们有什么帮助。

不仅仅在工作中我们需要思考成本，在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩，所以贝克尔在《人类行为的经济学分析》中提到：人的任何行为都是理性选择的结果，无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人，但是大多数人就是如此。

在夜深人静的夜晚你饥肠辘辘想吃夜宵，你可以选择下楼到周边小吃店就餐，也可以选择叫外卖，前者付出的成本是你需要通过身体行动来交换最后的结果，后者则是花费一定的金钱来代替前者的行动。

那么我们通常会如何选择呢？如果这两种成本有很大的差异，比如需要到很遥远的地方那么除了身体行动成本外，时间成本也会计算其中，所以相比后者成本陡然增大，于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵，外卖点餐会特别影响口感，那么你可能会选择前者，这里由于外卖口感和主观意愿影响到了我们理性的选择。‘

1.为什么要关注成本

成本决定了收益的效率、大小和方式，小到你伸手拿一支笔你会选择最近的，大到我们人生的投资。成本与收益之间并非是直接关系，收益的大小的不取决于成本的大小，还有风险因素。例如我们在对UI界面进行优化，可以选择的方式有很多：

1.只调整视觉，替换样式

2.对页面逻辑进行重构

3.整体功能进行重新分类组合

......

我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同，我们都希望付出最小的成本达到最好的效果，于是我们就会考虑到风险因素，假如新流程用户不会用怎么办，假如新版本导致的数据下滑怎么办，假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。

你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间，提供更好的环境与服务，让他们产出更多的价值。还有假如你的车坏了，你最直接的方法就是花钱找人帮你修而不是自学自修，因为你将花费太高的成本。

再举一个例子，我们想提升能力，有的人选择自学、白嫖，有的人选择报培训班，这也只是时间和金钱上的成本选择，如果你的自学（白嫖）在短时间收益很大那就毫无疑问帮你省了一大笔钱，但是如果自学很久都毫无效果，那么时间就是你花费的成本，时间和金钱不同的是，时间不可逆。看起来花钱比花时间更好？不是，花钱也有风险，比如课程质量和服务很差，钱没了还学不到，甚至赔上了时间。但如果你选对了，那么收益就远远会大于自学。

2.设计师可以关注哪些成本

1.实现成本

实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗，例如我们希望提升用户下单的转化率，我们可以选择：1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围，在这几个方案中最低成本是2，因为只需要调整样式和简单开发就可以实现，但收益并不是最高的，而其他的方案需要更多的角色花费更多的时间来参与，但是收益也不是显而易见的。所以如果你的产品比较成熟，那么我们一定选择成本更低的方案，反之我们会进行更高成本的尝试。

还有比如我们找工作，新公司福利待遇比现在公司好50%，平台也更大，是否不需要思考直接去呢？当然不是，你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时，不仅仅是时间精力，还有我们的身体健康的成本，我会觉得远远不值，成本太高。

2.机会成本

我们先来看一下定义：机会成本是指面临多方案抉择时，被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子，比如当前版本我们有1个开发一个设计一个产品，我们面临着两个需求，但是资源和时间只够我们做一个需求，这时候2选1，那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本，相当于我们放弃了那个需求所拥有的价值。

再通俗一点讲，我现在有100万，面临着两个选择：1.银行理财，年收益4%，4000. 2.做生意投资，年收益8%，8000，那么就相当于我花费了这4w的潜在成本获得了8万的收益。

3.边际成本

边际成本的理解很简单，我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲，比如你一共学习10天，第一天学完你考了30分，第二天学完你考了50分……第8天学完你考了94分，第9天学完你考了98分第10天学完你考了100分，花费的单位天数一样但是每次增加的分数却越来越少，收益也就越来越少。

在做产品设计的时候，我们往往会有一个板块叫为你推荐，比如微信阅读中的这个板块，它一次提供了用户6本书，虽然算法可以算出有许多书，但是这里每次只提供给用户6本，是因为涉及到了边际成本，少量多次提供能够让用户更聚焦，更快的选择好书本进行阅读，每多提供几本书，用户选择阅读的时间成本就会越大。有同学会问：那我只给1本不就好了，用户就能马上读了，何必要推荐6本？

我们如何保证那一本刚好是用户想读的，没有办法做到如此精准，如果每次只推荐一本书，而用户尝试了几次都不喜欢，他们就会放弃，所以这里就会选择一个临界值，比如我们可以选择每次放不同数量的书，根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。

4.体验成本

体验成本也是我们设计师需要时刻关注的，俞军老师在产品方法论中提到，用户价值=新体验-旧体验-替换成本，体验成本可以包含很多信息，最主要的就是认知与交互的成本。

4.1认知成本

如何降低认知成本可以从以下这些点进行优化

4.1.1.文案

文案的设计要求是简单易懂，避免产生歧义，之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析，大家可以再思考一下，是否会产生歧义。还有确定、确认大家是否知道怎么用呢？

文案也需要有情感化，避免生硬、带负面情绪的问题等等

4.1.2.样式

视觉最为直观，一个按钮一个控件的样式是否能满足用户的心智和预期，将会影响用户的认知，例如以下的几个按钮，出现在不同场景用户会出现一系列问题：为什么我点了没用？为什么还不能点？我到底该点哪里？

还有你的品牌是否识别度高，也决定了用户对你的认知，最近小米花了百万请大师做了新的logo，在视觉上更加圆润，在圆logo的基础上做了很多的微调，实际上也是避免了太大的logo变化导致品牌认知成本的提高，认知成本一旦太高，品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。

4.1.3.信息

比如我们希望新用户去关注一些大咖、kol获得更好的推荐，但是如果我们只是将推荐者的头像和昵称给新用户，那么这个策略就是失败的。因为我们没有考虑新用户的认知：1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。

4.2.行为成本

我们通过利用肢体来和媒介进行交互，目的是完成某项任务。其实只需要你抬手，那么就是产生了成本，只不过某些成本是固定的无法减少的，比如你要去骑车那就需要去解锁，如果没有锁车可能就会被偷走，这是出于安全考虑。

行为成本在具体数字产品中我们可以发现很多，例如你只需要将手机拿起，屏幕就会亮，相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私，所以还需要通过指纹或者人脸进行识别。

例如几种不同的验证方式，利用滑动拼图来解锁和输入相关验证码解锁，前者比后者的学习成本和操作成本都低。

在移动端我总结了几个减少交互成本的方法，不妨来看下：

1.利用滑动代替点击

soul音频处理

日期选择

iPhone底部横条切换窗口

2.利用点击代替输入

游戏昵称随机

股票买入数量

这里也有同学会问，既然都可以代替，那滑动能否代替输入？必须也是可以的，例如iOS自带的计时器中选择时间的控制器，还有闹钟设置，这里要注意的是，滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的，比如房价筛选，房价本身量级很大，用户筛选也不会精确到个位数，在这里用点击和输入会比滑动的成本更低。

反例就是音量、明暗控制，大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入，需要大致的范围选点击，非常模糊的感受选择滑动。

3.在必要时利用语音代替输入

例如我们在开车进行导航的时候，打字输入非常不便，于是加入了语音输入。还有在微信进行账号切换时，我们可以选择利用语音输入数字来验证身份。

4.给予详细的提示

对于新用户操作复杂功能和界面的时候，提供更多提示能够很大程度上减少用户的操作成本。

5.尽量不使用二级手势

在iOS或者安卓的手势控制中，我们会发现又一些常用的手势比如：点击、拖动、轻扫、双击、缩放，这里我们可以定义为一级手势。还有一些不常用的比如：重按、长按、三指滑动、三指缩放等，这些手势的认知成本和行为成本都很高，定义为二级手势，不建议频繁使用。

总结

设计师在日常工作中接到的需求繁多，无论是在做需求之前还是在思考设计方案的时候，成本思维可以帮助我们很好的规避一些问题和风险，我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。

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

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

先看目录，大家按需取用，当然更建议全文阅读（全文7756字，建议阅读20分钟）

大部分设计师应该都遇到过这种场景：在做设计前并没有考虑到加载，但在进行还原度走查或者验收的时候才发现，由于某些页面数据请求较慢，导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。

归根结底是因为设计师在设计过程中，更多关注页面本身，而很少去思考页面在呈现过程中何时会出现白屏状态，都是后知后觉去补充完善。加载作为必备的一环，却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划，导致系统的加载体验缺失或者不统一。

因此希望这篇文章能够讲清楚中后台加载出现的场景和规则，对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。

加载通俗来讲就是用户从触发页面操作，到页面最终呈现的一个等待过程。这个过程始终存在不可避免，只是时间有快有慢。快的加载只需要几百毫秒就结束，但慢的加载就可能会达到几秒甚至十几秒，让人产生焦虑。

而为什么会有如此大的差距，这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址，再到我们看到完整页面的这个过程，网页到底经过了哪些步骤呢。经过资料查询和与前端确认，整体过程可以阐述如下：

从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段：用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。

而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型：静态资源和动态资源。

静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快，比如我们看到的展示型官网一般都是前端写好的静态资源。

动态资源：而对于页面上的动态变化的，需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，比如表格数据、统计数据等称为动态资源，这种都需要调用后台接口来进行返回，因此加载速度相比于静态资源就会更慢。

而它们的区分点用下图可以表示：

可以看到静态资源基本是直接返回，而动态资源还需要连接数据库调取资源，尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题，也基本上更多出现在动态资源的获取上。

当我们清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式：「默认处理」和「使用进度指示器」

2.1程序默认处理方式：直接显示

当我们对加载过程不进行任何处理时，程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式：

但是这种做法就会导致我们在页面加载过程中会出现空屏状态，比如上图切换到概览时出现了空屏状态，尤其是当遇到了网络缓慢的情况，会造成在加载时页面停留在当前状态下不动，往往会让用户陷入到「系统故障」的错觉。

2.2通用处理方式：进度指示器

这个名词说起来可能比较陌生，它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障，而是正在读取数据。

通过添加进度指示器来对空屏状态进行承载，能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡。

但是在体验过程中很容易发现一个问题，就是在产品的整体加载过程中，某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时，很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖：

想要更全面的把加载动画覆盖到所有页面，我们就需要弄清页面在哪些状态下会出现空屏状态，从而制定统一的加载动画规则。这个问题可以先思考一下，后面解答。

在制定统一加载规则之前，我们需要明确一个概念，就是加载的模态与非模态。

3.1模态加载

模态加载的含义就是当前加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（有的模态会提供取消按钮）。如果你的页面涉及到以下2种情况，可以考虑使用：

1.用户当前的操作本身不能与其他操作同时进行。比如系统更新，或者工具类的导入导出相关操作，我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载，比如protopie的导入操作；

2.当用户进入到一个全新的页面时，这个时候页面什么都没有，我们只能等待页面加载完成才能进行后续的操作，因此在这种情况下也可以采用模态加载，比如我们刚进入Asanan产品页面看到的首屏加载动画：

除了上述2种情况外，你也可以根据你的业务场景来进行模态加载的选择，但建议是尽量少用模态加载，其会对用户的打断和干扰性比较强。

3.2非模态加载

非模态加载的话，这种加载通常只会出现在需要加载的部分，不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。

非模态加载相比于模态加载会更轻量，因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载，比如飞书的左侧栏切换操作：

接下来我们进入正题，在这里我从加载的角度将网页整体加载过程分为呈现加载规则和操作加载规则。

我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后，我们就可以开始为我们的产品制定统一的加载规则，以保证后续页面加载的一致性。

4.1 页面的加载过程拆解

在拆解页面的加载过程前，我们进一步阐述之前提到的渲染原则，从前文中提到最后会经过「解码」和「渲染」2个步骤，这也是决定了我们看到的页面的最终呈现顺序：

1.页面的渲染顺序

我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式，JavaScript则是负责页面中的交互(当然JS也可以控制样式，这里只描述主要功能)。

页面在「解码」阶段，拿到的HTML文档会被解码为DOM树，同时将CSS文件解析成CSSOM，这两者结合后一起渲染页面，JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染，最后渲染交互。视觉的角度来讲就是先看到元素样式，然后才能进行对应操作。

2.页面呈现的视觉顺序

由于浏览器渲染顺序一般会根据代码的顺序进行渲染，而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的，因此我们看到的页面的视觉呈现顺序也是遵循从上到下，从左到右。

所以几乎所有的产品都是先看到顶栏，然后左侧边栏，然后其他内容。因此我们可以通过这个原则来拆解对应的页面，我们按照页面常规结构可以将其分为三个加载部分：顶栏、左侧导航栏、内容区域。而其加载顺序如图所示：

当知道对应页面的渲染顺序后，我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序：

我们的加载动画需要承载的就是上述这些白屏的地方，从而将加载细化为三种场景的拆分：全局加载+局部加载+内部加载。如图所示：

通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。

4.2 全局加载

如上图所示，全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景：

1.通过网址进入到一个新的页面时；

2.通过鼠标右键或网页刷新按钮对该页面刷新时；

3.通过页面操作需要新开页面时。

该全局加载的动画构成为：

1：覆盖整个页面的加载，由纯白色+加载动画构成；

2：加载类型为模态加载，因为用户在这种页面状态下并不能进行其它操作。

但在这里我们需要注意全局加载的开始和结束时间：

开始时间：当进入页面时立即呈现加载动画；

结束时间：当页面加载出顶栏的时候，此时停止加载。

为何要这么处理结束时间，原因其实图中已经给出了。这里再解释一下原则：只要有页面资源返回，我们的全局加载动画就会结束，随后启用局部加载来承接后续的状态，避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的，所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏，可以以左侧栏来作为结束标准。

4.3 局部加载

局部加载是用在页面整体框架加载的过程中，承接在全局加载后。局部加载的使用场景可以概括如下：

1.顶栏加载结束后，用在剩余框架的加载效果（具体体现为左侧边栏和右侧内容区域）；

2.对于涉及到局部页面的切换操作都会进行局部加载（比如左侧边栏的切换）；

光看文字可能不是特别清晰，在这里可以举一个动态的例子来帮助理解：

上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的，可以通过程序控制让这种加载动画只在初次加载时出现。

第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间：

但第二次的时候由于有缓存（缓存会加载我们的静态资源，能够让我们的页面框架在第二次时更快显示），这样在读取框架时基本不需要加载，我们就可以通过程序来直接去掉其中的局部加载动画，直接显示框架来进行呈现。

目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的，而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态，又避免了局部加载动画的频繁出现。

4.4 内部加载

内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束，但某些数据由于接口比较慢，此时还没有返回，这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况：

在进行内部加载的时候，需要注意，内部加载的时候一般标题是存在的，因为标题基本都是固定的，所以能够很快被拉取。比如Zoho的内部加载，加载时标题已经出现了：

通过这三种类型的加载，能够覆盖从用户输入网址，到页面渲染完成这个页面呈现过程中的全部加载场景。

说完页面的呈现规则，再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态，而且需要考虑到控件影响的其他页面范围。

5.1需要考虑控件本身加载

控件的加载并不是随时都需要，我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下：

比如图中的按钮的加载状态是必备的，在很多场景下都会用到。但是下拉列表和级联列表，在一般的场景下都不太需要进行加载，当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。

5.2当控件操作会影响到页面其他元素

这种控件比如日期筛选、表格筛选或者保存等操作，当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法：

1.被影响元素不可被操作，且该区域有遮罩+加载动画来覆盖；

2.被影响元素可进行操作，无任何动画，但操作并不会影响之前提交的结果；

这两种方案一种是利用遮罩防止用户无效操作，另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1，我认为被影响的元素是需要有遮罩+动画的，来避免用户在加载期间对其进行无效操作，比如示例中方案2后面修改的名称是没有被系统保存的。

需要注意的是如果在产品中使用方案1，我们的遮罩区域只需要覆盖被影响的元素就可以了（保存这种可以将按钮一起覆盖），比如通过筛选导致图表数据发生变化，这时只需覆盖图表区域，而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时，用户可以通过切换筛选项来打断当前加载。

上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时，则整体遵照页面呈现的规则进行加载。

上面阐述的加载已经完全能够覆盖我们页面整体的加载，但是还是需要提及一下骨架屏和进度条这两种加载形式。

先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的（骨架屏的加入使用会让用户感觉网页出现的更快）。那么为什么在大部分的B端业务页面中没被用到呢，主要有2点原因：

1.每种骨架屏都需要进行对应的定制开发，需要与加载后的页面框架保持一致，这会增加了开发成本。

2.中后台的业务界面对来说固定结构的页面会较少，这对于骨架屏的使用机会就相对较少。

个人认为在前期可以以统一加载体验为主，在后期业务相对成熟后，可以针对固定结构，通过骨架屏的使用优化加载体验。

再说进度条。我理解的进度条的使用条件：对于加载时间较长的规定场景可以考虑用进度条来承载，比如我们常见的游戏加载中进度条就用得比较多，因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。

进度条在特定场景下能够缓解用户焦虑，让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度，这也会导致有时候我们看着加载到99%，那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因，很大程度是没有那种加载特别长的场景。

因此这两种加载场景的使用会更加定制化，如果需要使用请根据具体的业务场景来进行选择。

如果把加载动画等比作页面加载的外在，那么缓存和加载策略则是页面加载的内核，合理使用缓存和加载策略可以从根本上提升我们页面的加载速度，让用户更快速地看到页面。

7.1 关于页面的资源缓存

大家肯定听过缓存这个概念，前后端都可以使用缓存。缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。在这里主要讲一下浏览器缓存：

从这张图可以看出，服务器在请求数据时，会进行缓存的判断，如果有缓存则首先读取缓存，如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度，缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存，这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。

但程序其实也可以对动态资源（也就是需要从数据库等拿到的资源）进行缓存的，并且可以设置缓存的过期时间（比如设置过期时间为1小时，那么1小时过后就会重新拉取新资源）。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略，从而提升整体的页面加载体验。

7.2 加载策略的正确使用

现阶段我们常用的主要有下列6种加载策略：

加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间，接下来我们详细看一下每种加载策略的具体使用策略：

7.2.1懒加载

懒加载是当内容落入视窗被用户看到时，才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计，能够让用户更快看到当前屏幕内的内容，减少等待时间。

比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载，这样能够保证用户在进入网页第一时间看到首屏内容，并且用户几乎感知不到这种加载延迟。

7.2.2预加载

预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中，等用户需要使用时，通过缓存直接调用呈现。比如用户在看A页面的时候，就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候，立刻就可以呈现。

比如某些页面在实际中加载比较慢，这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态（图中我将页面网络切换为断开状态），可以看到依旧可以点击全文进行查看和视频的部分预览。

7.2.3分步加载

当页面中有文字和图片时，优先加载占用网络资源小的，比如文字资源，然后再进行占用资源较大的加载，比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。

7.2.4分页加载

分页加载是我们目前很常见的方式，比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载，分页适用于数据量比较大的内容，比如表格数据或者大数据搜索场景可以使用。

分页加载可以理解为当前获取到100条数据，但是将100条数据分别拆成5页每页20条数据提供给用户，这样也可以让用户减少等待时间：

在目前还有一种滚动分页的加载，就是不提供视觉上的分页，而是当用户进行滚动时，自动加载一定数量的内容，这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略，有的也把这种滚动分页的方式称为自动加载。

7.2.5延迟加载

这里讲的延迟加载更多的是一种防护加载机制，一般延迟设置的时间为300ms。这里的延迟加载有2种使用，第一种多用于搜索，通过延迟加载能够让用户更好进行连续输入，避免搜索结果被高频率刷新，同时缓解服务器压力。如下图，可以看到我在输入1后会有个延迟才出现加载列表，并且我在连续输入12306的过程中是没有对结果进行更新的，当我输入完后才更新。

第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时，如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上，防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知：

延迟加载更多用于上述2种场景，对于其他情况的加载，直接加上就可以了，并不需要刻意设置延迟。

7.2.6后台加载

这里想要表达的含义是当用户在操作后，客户端立即反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作，即使你在断网的情况下都能够立刻发布，但实际上这个时候并没有发送成功，还需要上传到服务器后才你的朋友们才能看见。

这样的好处是用户使用起来非常流畅，但是坏处就是，当操作不成功时，用户并不能及时进行感知，仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作，毕竟很多发布的功能会同时影响很多业务线。

这里就拿微信的朋友圈发布来进行举例，下方手机状态都为断网状态，可以看到微信立即发布，而贴吧在这种状态下提示网络错误。

通过这些加载策略的选择性使用，能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识，这样我们不仅知道加载慢的原因，还可以利用加载策略去提升页面性能。

在整体的加载过程中，别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来，这时我们需要考虑对长时间的加载过程进行处理。

通常做法是我们要对加载状态有一个最长时间的限制，一般为加载不超过10s，超过最长时间后就进行异常状态显示（提示语+刷新按钮）。这样用户可以选择重新加载或者离开此页面，而不是一直等待。

在这里还想到一点，就是对于编辑页面，我们应当加入网络连接是否异常的判断，比如当进入到编辑页面后，如果遇到网络断开，需要在页面的顶部加上常驻提示条【当前网络连接断开】，这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。

加载在设计中是非常容易被忽略的模块，因为在大部分情况下网络速度都较快，人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点：

1.我们需要明白加载为什么会出现，这个过程是怎么样的；

2.加载的通用处理手段是怎么样的，非通用处理方式有哪些；

3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。

这样当我们在页面上遇到加载速度慢的问题时，在为其加上动画承载过渡的同时，还应该思考其加载缓慢背后的原因，是因为数据量太大还是加载策略的相关问题，是否可以将其进行懒加载或者分步加载，这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题，才是后续产品设计过程中的长久思路。

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

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

前言

 _

提及“设计的温度”，不得不提我们老生常谈的“情感化设计”，提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次：本能层、行为层、反思层，层层递进。

1/ 本能层的设计，是视觉的直接反馈，是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣；

2/ 行为层的设计，注重的是效用，产品功能是否好用，易用，用户使用产品过程中能否高效解决问题；

3/ 反思层的设计，是情感化设计的最高层次，指用户使用产品后，是否建立情感连接和记忆反馈。

因而，它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。

如果一款产品在满足基本功能，对于用户有用，同时好看并且易用，使用完之后还能产生愉悦以及满足感的话，那么这将是一款好的情感化设计产品，那必然是一个有“温度”的设计。

如果一个项目本身充满社会使命和责任感，那么“有温度的设计”将可以助推项目的落地链条，让使用平台的用户有“温度”，更让项目背后的人员感受到“温度”。

因为，接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗，用互联网思维去帮扶社会的乡村孤寡老人和留守儿童，用有温度的设计去践行有温度的项目。

项目背景

 _

随着我国社会经济的快速发展，农村青壮年劳动力转入城市，人口老龄化趋势加剧和家庭结构的演变，“空心村”越来越多，因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计，在农村独居和空巢老人超过3000万人，留守儿童也达到了近2000万人

孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题；而留守儿童因为缺少父母监管和陪伴，极易产生很多身体及心理问题，这两大群体是我国人群结构的重大组成部分，一个是未来的花朵和希望，一个是曾经发过光热的迟暮老人，他们需要关爱和守护，需要有一座“有温度”的桥梁，为留守儿童撑起蓝天、健康成长；为孤寡老人送达温暖、安享晚年。

基于社会现状，践行社会责任，腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会，预想搭建一个线上与线下结合的平台，成立“为村暖心小站”，立足于脱贫地区的农村社区，主要服务农村的一老一小以及其他需要帮助的困难群体，解决日间照料、健康护理及心理关怀等诸多问题。

设计思路

 _

1，定义产品形态

“暖心小站”的整个帮扶路径是以线上+线下相结合的模式，依据产品需求，在线上可以招募志愿者、发布救助需求、触达爱心人群；在线下建设实体服务站，开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。

那在线上的呈现形态上，主要考虑APP和小程序两种方式，经过对比分析，APP稳定性高、体验好，但是在乡村的受众群体内，互联网基础还是很薄弱的，要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广，占有率很高，那么依托于微信的生态、建立小程序，在推广层面会更加便捷和高效。同时，暖心小站本身结构简单，是一个非常轻量化的应用，这种特性也更适合以小程序为载体。

2，确定产品结构

在线上的产品框架上，设立两大专区：关爱老人专区和呵护小孩专区，各自创建知识宣导、在线课堂、爱心募捐等版块内容，同时在线上召集志愿者，在线下成立社区服务站，开展帮扶活动，然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。

确定框架之后，梳理角色和场景。本项目主要包含线下服务站的站长，工作人员，志愿者以及社会的爱心人士。

站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采，社会的爱心人士通过线上平台查看对应信息并参与对应活动，最终帮助农村的一老一小解决各种帮扶问题。

经过梳理分析，平台使用人群的年龄跨度较大，30岁到60岁这个群体占到了80%左右，所以在产品的呈现形式上将兼顾青年到老年的年龄跨度，让设计更友好，让产品有温度。

3，制定设计策略

定目标

基于前面分析，在农村现实环境中的孤寡老人和留守儿童，他们生活是灰暗的，情感是封闭的，他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖，让孤寡老人可以健康生活，让留守儿童可以健康成长。 

所以在设计目标的确定上：让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。

定色

品牌色的推导，是站在线下的实际场景感受来提炼，乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的，他们需要金灿灿的阳光给生活带来希望，而我们日常所的见的公益组织通常都是以红色系为主，似乎已经形成了作为公益组织的标识色，因为这种大红色传递爱心、带来温暖。

这些颜色都很有代表性，黄色代表阳光，红色代表公益，而暖心小站，将这两种颜色进行叠加融合，形成阳光橙，再以阳光黄纳入辅助色，形成温暖、友爱、活力、阳光的色彩体系。

定原则

在设计原则上，考虑到我们的用户群体年龄跨度比较大，一些年长用户互联网基础薄弱，为了让产品更有亲和力，让年长用户都能轻松上手，所以在策略上制定简单、易用、温暖的设计原则，保持框架简单清晰、交互简单易用，让产品有温度，让用户觉得有用、好用、还想用。

在“简单”方面，保持产品的页面框架要简单，结构要清晰，让用户清楚知道自己在哪里，所以在产品形态上只做了内容页的垂直展示，没有过多琐碎的信息入口，让页面信息更集中，浏览体验更聚焦，让年长用户也可以简单使用。

在“易用”方面，简单的框架和结构是易用的基础，在视觉元素的排列上，通过加大的图片、加大的间距、加大的圆角，通透的页面布局可以让内容陈列更集中，获取信息更高效。页面的间距以4px为基数，分为5个跨度，在统一性的基础上让界面更有节奏感，层级更清晰，从而提高产品的易用性。

在“温暖”方面，主要体现在在调性、元素、和内容上：

调性：以“温暖橙”+“阳光黄”为品牌色系贯穿始终，形成温暖、阳光的整体基调；

元素：在常规尺度上进行适当加大，加大的字体，加大的卡片占符，加大的点击区域，让产品更照顾年长用户的操作习惯，让产品更有温度；

内容：在内容及主图的运营展示上，突出“温暖”的调性，增强用户的共鸣，拉近用户与产品之间的距离。

整体视觉呈现

 _

整体以大面积的“温暖橙”为基调进行铺设，营造温暖阳光的质感，顶部展示产品名称和合作logo，增加产品的权威性和信赖度。

自上而下，控制大的间距和留白，分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。

一老一小的入口及详情：通过大头图的形式加强专题感知，引导用户点击。详情内展示相关的关爱资讯和助力入口，让用户可以选择性的进行点对点帮扶。

小站详情：分为小站介绍、人员风采、小站活动、和运营概况四个部分，清晰展示线下暖心小站的各项事务，让线上用户对线下小站有更全面的了解。

个人中心：功能简单，布局简洁，根据不同身份类型展示不同入口。作为站长的话，拥有志愿者审核、活动管理的权限，整体表现形式以统一的卡片式陈列，让内容更聚焦。

秉持“简单、易用、温暖”的设计原则，尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖，让用户想用，让产品好用。

经过多次推导与线下团队配合，小站1.0在今年5月初上线，第一批试点小站正在使用中，得到了较多正向良好的反馈，为乡村的一老一小带去了许多暖心的帮扶行动。

上线反馈

 _

产品上线之后，通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动，比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动，在重庆周家寨服务站新建了日间照料室，提升老人的居住生活质量。

今年5月20号，在中国互联网公益峰会上，为村暖心小站进行线上交流展示，获得了很多与会代表的关注和认可。

截止2021年7月，平台上线了两个试点小站，共举办了数10次线上+线下结合的活动，活动参与了520人，受到36000人以上的关注。暖心小站的建立和运营，对乡村的“一老一小”提供了更加有针对性和个性化的服务，同时加强对当地社会组织的培育和孵化，提升了服务对象的生活质量，促进和谐社区建设，助力乡村振兴。

通过这些试点小站的成果和反馈，让设计目标也得到一定程度的印证，让产品体现了“有温度、有故事、可以连接情感”的桥梁。

设计反思

 -

随着互联网的发展，人们对于产品不再是简单的形式服从功能，而是逐步转向形式服从情感。让设计回归情感，让有温度的设计去创造有温度的产品，可以增进人与产品之间的情感连接，让产品更有生命力。再者，用有“温度”的设计思维，去捕捉和解决社会问题，通过具有社会责任感的设计，推动社会进步，形成坚实有用的“设计力”。

那么，如何提升自己的设计力呢？可以概述三个保持一个向善。

保持热忱心

设计需要坚持，而坚持源于热爱，保持热忱之心会发现许多美好的事物，同一个需求会自发性地探索很多不同的解决方案，因此会洞察需求背后最本质的东西，切入要点寻找最优解。

还有一句话：“设计路上，唯有热爱，方能抵御岁月漫长”。

保持敏感度

这里的“敏感”指的是设计师要有好奇心，善于发现新事物，善于追踪最新行业动态，是一种职业敏感，是一种自觉行为，表现为热情、兴奋、敏锐，对新事物充满热情，对于新发现充满兴奋，能够特别敏锐的捕捉社会痛点解决设计难题。

保持共情力

生活中常说，有共情的人往往都特别感性、多愁善感，泪点低笑点也低，因为特别有代入感，而且对事物特别专注。

设计上所说的共情力则需要保持感性，同时也需要理性加持，不偏不倚。让设计师自己能切换到项目内的各种角色，不把自己当成局外人，将自己融于产品本身，随时切换为不同用户的视角，更能深入地发现、分析和解决问题，让设计站得住脚、更接地气，让设计有依有据。

让设计向善

设计的最终目的是传递需求、解决问题，这就意味着设计的初衷不同，那么最终的导向也会截然不同。

设计向善，保持“善”的初心，主张设计回归社会、回归到人心最本质的出发点，做有温度的设计、有仁心的设计、可持续的设计。

关注社会问题，保持一颗敏感而善良的心，用“设计向善”解决社会痛点，坚实巩固自己的设计力。

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

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

树形选择

关于树形选择，我们必须先知道它的基础概念，“树” 究竟是什么？我们先来看看树状结构的定义

树状结构：

树状结构其实是作为一种层次结构化的表达方式，它能够将树的抽象出来表达完整的构造关系，为什么叫做树，是因为它更像是一个上下颠倒的树，根部在最顶端，枝叶反而变为下方。

同样在对树状结构的整体命名上，也遵循了与之类似的表达方式：

节点（Node）：是树状结构当中的基本单位，使用节点可以表示 不同数据间的 组成关系（从属关系与并列关系）通常节点会分为几类特殊情况。

1.根节点：整个树状结构的开端被称为根节点。一个树状结构一定只有一个根，在思维导图中，根节点就代表着它的开端，用于延展出更多的树状结构。不过在目前的树形选择当中，因为对易用性的要求，通常会隐藏根节点，只展示子节点。而根节点隐藏在 标题、选项文本 当中。

2.子节点：根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制，在树形选择当中是直接展示出来的部分。

3.叶节点：没有连接到其他子节点的节点。叶节点属于一类特殊的子节点，它是整个树状结构的最末端节点，在树形选择当中是一个重要的概念，下面会展开来讲。

分支（Branch）：节点之间的链接，在我们树形选择当中，分支的线条可以选择显隐。其搭配的使用方式也有所不同

同时我们还会用到节点的几个基础的概念：

节点层级：指当前节点所在的层级，比如根节点为第一层级，根的子节点为第二层级，以此类推；

节点高度：对于某一节点的高度，便是该节点下所有叶节点从上到下的个数；

节点深度：指该节点到根节点的唯一路径长度，深度与层级较为类似。

树状结构究竟出现在生活中的什么地方呢？树状结构对于我们又有什么用呢？大家可能理解上会觉得很枯燥，我给大家举一个例子：

回忆一下我们小学使用字典时的场景，首先我们是先通过声母，去确定这个汉字的大概的页数范围，然后通过韵母去确定这个汉字的详细位置，最后通过音调找到想要寻找的汉字：

其实字典的设计，便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等，这些都是使用了完整的树形结构。

采用树形可以快速进行结构化的表达，其目的是为了用户能够快速地增删改查，想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》，里面讲了非常多的逻辑化思维、表达的方法与内容，内容比较多，而这种思维其实在我们工作生活中都能够用到。

树状结构组成：

1.层级缩进

为了将树的整个结构完整的表达出来，会使用层级缩进的方式进行区分，通常会使用 8px 对下一级节点进行缩进，这样能够表达更为完整的层级关系。

这里要注意，如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下，可以见解 Coding 编辑器的思路，即：将缩进内容使用“分支线”进行表达，更明确清晰。 这里使用层级线后，折叠图标也会有所不同，下面有明确解释。

2.折叠图标（节点按钮）

主要是将节点下的所有树叶与子节点进行展示，在整个树的结构中，折叠图标一般分为两种：三角折叠、方形折叠

三角折叠：为页面层级较少时使用。因为在较少的层级下，用户不用特意去思考当前节点所在层级究竟在哪。

方形折叠： 更多与页面层级线进行配合使用，通过层级缩进，将页面层级线标识清楚，能够更好的在多层级情况下进行合理区分。

3.选择控件

整个树形结构依旧是在选择录入框架下，分为单选和多选。因此需要对其类型有所展示，特别是在多选的场景下，一定要标明它的类型，方便用户进行理解使用。

通常这个控件可以在单选的时候进行隐藏，这里先按下不表，我在树形选择的类型当中深入给同学们进行分析理解。

4.选项文本

注意字数限制、超出后如何处理即可，我就不做过多介绍。

树形选择的类型：

在讲树形选择之前，我先为大家讲解关于与其相关的同类型产品，为了方便大家的记忆，我选择出了两类不同的组件进行对比，感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解，相信大家在看完之后一定会有所收获。

1.单选树

单选树只能选择叶节点，也就是需要将每个树展开过后才能进行选择。

它是一个较为传统的选择方式，因为它的选择热区较小并且理解成本较高，因此这种方式不太满足现如今对于B端产品效率提升方面的要求，并且要求十分特殊，因此使用较少，现多以单选节点树为主。

2.单选节点树

单选节点树与单选树最大的区别在于其能够选择子节点，这样可快速选择该子节点以及其各种叶节点。

同时传统的单选节点树中是采取单选按钮的方式，随着对B端要求的不断提高，并且在树的功能越发的复杂过后，几乎取消了 单选按钮 的形式，取而代之的是将整个 文本标签 作为选择的热区，用户点击过后即可进行选择。

因此在树形选择当中，逐渐将单选节点树演变成由两部分热区所组成的一个控件：

在左侧，主要以树类型的展开折叠操作，热区通常就是图标折叠图标这一部分；

在右侧，以选择该选项、节点的操作为主，热区范围以整个选项文本作为基础，进行延展即可。

这里还是提示以下新读者，这类选择一定要进行 Hover 状态处理，不然用户无法根据光标的变化判断是否可点击，当然老读者跳过就行～

3.多选节点树

大家在对比单选与多选时会发现，为什么不会存在多选树？不存在只选择选项的多选呢？

思考时间又到了，别忘下划，自己先想想呢～

虽然在理论上会存在多选树的情况，但是它存在的价值比较诡异。首先在树的节点当中，我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点；或者说它选择了该节点下的多个选项，因此在实际情况中这类场景过于的少，更多会用多选节点树进行代替。

当然，多选节点树与单选节点树在结构上是十分接近的，就是将复选框展示出来，方便大家进行选择。考虑到大家经验不足，建议这里复选框放在折叠图标前侧，原因有二：

• 在树形选择后续的拓展当中，经常会遇到选择增加一些操作功能，比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧，导致之后的操作无法进行更多的拓展，随之崩溃，对树形选择又是一顿乱造～

• 现有的基础架构基本都是沿用了这类设计，可减少前端同学的工作量，同时也减少他 BUG 的产生。

多选节点树的使用场景非常多，我举一个大家在树形选择中都会犯的例子，希望大家能够多理解其中存在的特殊逻辑：

比如在一个大型上市公司当中，我作为老板会去设定整个“设计部”的权限，并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师，很容易就会使用多选节点树，将整个组织架构进行选择，但是这样的选择与用户实际想要的内容是存在较大差异的。

在产品设计中，对于上诉的“设计部”这个概念其实是一个动态数据，即在之后新增到“设计部”的所有员工，我不必再去权限管理中重新配置。我们遇到动态数据的情况时，首先不建议大家采取树形选择，因为首先对于这个概念的理解成本很高，无法通过树形选择这样的方式让用户理解；同时系统对于这类动态数据的情况都建议特殊处理，至于怎么处理，大家可以在评论区讨论，我也会在后续文章当中为大家进行讲解。

树形选择的优点

易理解：

因为树状结构本身就已经存在很久，早在 DOS 计算机时代就有它的影子，经过长期累月的发展，用户在理解上也会相对更加容易

快浏览：

在数据量特别大的时候，能够根据子节点优先找到自己想要的叶节点，从而提升选择效率，与《选择录入02》当中讲到的 Tab选择十分类似，没看过的同学建议先去看看。

看结构：

结构，能够辅助人们进行快速记忆，从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知，从而更快了解业务。

树形选择常见误区：

数据量

首先对于树形选择本身的控件形式，你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。

当数据量过大时一定会出现异步加载、数据分页等诸多情况，因此在设计中，需对这类情况进行设计。

全选功能

全选功能本身较为简答，无外乎就是一个复选框的事情，但是在上面提到的数据量过大 + 全选的存在，会有些问题还需要大家进行留意。

键盘映射

在树形选择当中，都可以采取键盘操作从而提高效率。基本规则是：

↑键：向上切换同级节点；从第一子节点，顺序返回父节点；

↓键：向下切换同级节点；顺序进入已展开的第一子节点；

←键：关闭当前级别节点；返回上一级父节点；

→键：展开子节点列表；顺序进入已经展开的第一子节点；

回车键：提交当前 foucs 的节点选项；

树形选择是较为常见的一类方式，但由于大家对 基本的树形结构 认识不足，导致对其设计会有许多误区。

关于树形选择大家还有什么疑惑，可以在评论区咱们一起讨论～

任何一个新颖的设计浪潮，都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向，随时精准有力的拥抱变化。

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

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

前言

2021年至今「逆反差字体」这个原本偏小众的字体设计风格，从卷土重来到广泛应用，再次受到诸多设计师的追捧，一股新浪潮扑面而来。

纵观它的出现、流行与发展，身为设计师，期待本文可以通过对经典设计的客观分析，蓄力字体设计领域的经验和技巧，为2022年的创作积累更多灵感。

特征

PART 1.

——————————

商业的发展与驱动

Reverse contrast现在国内被称为「逆反差字体」。设计师皮特·比亚克（Peter Biľak）在2012年发表的文章中曾提到：这种逆反差字体的设计是有意通过违背读者的预期来吸引注意的，怪异的字母形式在日益饱和的商业信息世界中脱颖而出。

PART 2.

——————————

打破认知 重塑观感

二十世纪中，荷兰著名书法家和设计师格里特·诺泽尔（Gerrit Noordzij）倡导以书写走向作为字体设计的基础，通过习惯来定义书写理论：平移和扩张。这个逻辑反映出人们对拉丁字母普遍造型认知：横细竖粗。

竖笔画在西文字体中起到承重、平衡结构的作用。如果颠倒粗细对比关系，使其横粗竖细，就会造成横向视觉，让人产生印错的感觉，这与传统的三大主流西文字体的设计方法也是相差甚远。

逆向设计的规则营造出视觉上强烈的差异感，比起普通字体更怪诞、夸张，更具有戏剧性和情绪化，让人印象深刻。它最大的特点是重构了拉丁字母的视觉比例。经发展，中文表达上使用“逆反差”还是生动准确的。

知丨西字历史（逆反差字体的思辨）

PART 1-1

——————————

溯源

在商业广告海报张贴应用中Caslon Italian字体被铸造出来。这是19世纪初，工业革命在金属活字印刷领域的一个新奇的创新。

1825年，印刷工和社会改革家托马斯·卡森·汉萨德（Thomas Curson Hansard）把逆反差字体描述为“排版怪物”。

1854年，French Antique字体发行，造型如铁轨般的字型引来了一种新的风格——French Clarendon。它在美国广告制作中展开了大量生产使用。在获得市场认可后的半个多世纪，它仍在马戏团的海报和西部电影宣传上被广泛应用。

这组彩色的活字印刷样本，让逆反差的设计风格在当下更显复古。

19世纪，在追求创新的欧洲人看来，逆反差字体的古怪造型仍是离经叛道的。而现代设计师则带着更多反思和辩证，以非传统的审美来认识这种字体风格。

PART 1-2

——————————

遍布世界

20世纪，逆反差字体的浪潮席卷欧洲。瑞士著名的字体设计师马克斯·米丁格（Max Miedinger）于 1954年设计了自己的第一款逆反差字体Pro Arte。大名鼎鼎的Helvetica字体就是由他设计的。

20世纪80年代，远在亚洲的日本也接受了这股“逆浪潮”。当时的动漫和游戏开始风靡，热血与科幻的世界里结合字体夸张的造型，让设计简直天衣无缝。

1980年，在游戏UI中诞生了世界上第一款逆反差像素字体，让游戏世界充满着奇幻感。

这种像素化的设计方法，如今是很潮的视觉表达。

80年代，逆反差字体在音乐和书籍等多个包装领域的应用也是继往开来。

PART 1-3

——————————

今日应用

逆反差字体从未真正流行但也从未被抛弃过。如今，除了趣味盎然，又增加了更加疯狂的风格效果，最为典型的是Maelstrom。很多字体的诞生，都证明着逆反差的无无限可能性。

感丨汉字之力（民族文化的养分）

西文有着较为完整的逆反差字体更迭历史，汉字相对创造力偏弱。中国设计师在进行汉字逆反差设计的探索时，不妨大胆些，打破局限，从中国书法中吸取创作养分，这是民族文化理解上的考验，也是对民族文化的尊重。

PART 2-1

——————————

汉字书法与逆反差实践

大多书法风格多变，并没有严谨的横粗竖细。不过，难得能在清代的漆书中找到横粗竖细的规律存在，它牺牲了部分汉字的视觉结构，传达出一种钝拙感和趣味性，这正是漆书的魅力所在。

汉仪2020年1月出品一款汉仪吉金，灵感来源就是漆书，在其基础之上造型更加现代。

民国时期，在广告招贴、书籍封面上，也能发现很多逆反差风格的字体设计。这些都是汉字设计上逆反差的初次实验。

PART 2-2

——————————

汉字逆反差的设计鉴赏

徐学成是中国第一代字体设计师，在晚年仍坚持实验性设计的尝试，1998年他主持设计出华康雅艺体这款逆反差字体。

造字工房也推出过几款视觉冲击力强、节奏分明、充满艺术张力的字体：造字工房溢尚真体、彩体、超凡体等。

3type（三言）设计研发的基本美术体，在2020年10月进入试用阶段。它简单明了，拥有大胆灵动的字形，是为数不多的优秀中字逆反差字体。

基本美术体也是本文的灵感来源。曾路过顺爱烤肉公司，被牌匾上的字体所吸引，便开始了我对逆反差风格字体的探索研究。

日本一度受到美国Fantail（扇形尾）风格的西字影响，也展开过一系列的实验性尝试。最为典型的是写研在80年代，推出的「扇尾兰」字体，它凭借写研在行业内的影响力得以广泛的运用。

其后，C&G 花束字体、TA-Sigma字体等，这些极具逆反差风格的扇尾字形也在市场应用中大放异彩。

PART 2-3

——————————

案例赏析

历经200年的锻造与发展，逆反差字体如今获得了越来越多设计师的青睐，中外设计有目共睹。

野兽派美学（The brutalist aesthetic）频繁的应用于当代平面设计和网页设计中，逆反差字体有着原始且未经雕琢的质朴风格，往往在简洁精致的物体上形成鲜明对比，增加设计内容的趣味性。

悟丨关联与创造（结语）

近两年，看到了很多比例夸张、造型狂野的验性字体形式出现，这要归功于酸性设计的盛行。

酸性设计，是一种主观情绪化、美感与欲望交织、传达致幻又辛辣酸涩的一种复杂感受的体现。它强调出了失调和混沌共存的状态，这和逆反差字体的反叛精神极为契合，二者结合来表达科幻感与未来主义时情绪饱满而热烈。希望本文能帮助更多朋友梳理逆反差字体与设计风格的关联性。

逆反差字体是一场字体设计的视觉革命。看似怪诞，其实是对视觉设计规律的突破与创新，虽“有悖常理”，但并非昙花一现，它在字体设计的历史上拥有自己长久的舞台。

任何一个新颖的设计浪潮，都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向，随时精准有力的拥抱变化。

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

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

1 列表

客服系统常规使用的列表由顶部操作栏、表头、表体、底部操作栏构成。表格是为可读性而生，所以表格的易读、易对比、易操作才是表格设计的首要目标。

1.1应用场景

（1）展示大量结构化的数据。

（2）需要对数据进行排列、搜索、分页、操作等复杂行为。

1.2设计原则

(1)易读性

1）表头。保证表头字段名称精简易懂，既能节省列表空间，又能减轻视觉压力。表头的固定功能也能够很好体现系统界面的友好性，尤其当表头字段过多，数据类型不好识别的情况，固定表头能够大大提升用户的数据浏览效率。

2）行高。较小的行高可以承载更多的信息，但会降低视觉扫描效果，适宜的行高更利于阅读。目前客服系统常用规格为36px行高，但有些数据量大空间小的专区，需要展示尽可能多的数据时，会考虑会采用24px或30px等小行高，需要基于场景的需求进行选择。

3）行排序。可根据字段以及列表内容的必要性配备排序、筛选、搜索等功能，方便用户快速筛选信息或进行信息对比查看。

4）斑马线。斑马线能够增强用户视觉的横向引导，尤其阅读较宽表格且数量还多的列表，可以避免表格内容过多时，出现错行的现象。

5）分割线。横向分割线能够减轻列表竖直方向的视觉重量，只要采用合适的对齐方式，纵向分割线的作用就可有可无。当表头字段内容少，且易于区分时，可以考虑取掉单元格的纵向分割线，弱化表格形式，便于横向信息阅读、信息获取和信息间对比的同时，又能够简化页面。当数据量太多或单元表格较宽时，保留纵向分割线帮助提升浏览速度。

6）列宽。尽量减少展示的列的数量，关注用户需要的必要信息，当表头字段过多时采用横向滚动条的形式，保证列与列之间足够的呼吸感。

7）自定义列。不同用户信息侧重可能会有所不同，可通过自定义列的下拉面板对列表内容自定义展示。

8）列对齐。标题和内容一般采用左对齐，更符合用户的阅读顺序。金额数值排列采用右对齐，既方便用户读取数据，又方便进行纵向数据对比。

9）空白格。对于无数据项用-占位，不留白。

10）分页。客服系统列表数据庞大，通常采用分页来缓解加载压力，相对用户而言，通常滚屏会比分页更便利，所以，若无展示数据量要求且一屏能展示完时，会尽量避免使用分页。

当使用分页时，考虑到用户的操作习惯，可让用户自定义每页展示数量。

11）特殊标识。对于用户关注的数据状态变化，可以采用一些符号标识，便于用户快速定位信息的同时，也能更加直观的呈现数据变化。如下图，通过不同颜色和方向的箭头来反映数据变化。

12）全屏。全屏展示能够避免和表格无关内容的干扰，提供沉浸式阅读体验，可根据场景需要配置全屏阅读功能。

13）操作项。对于用户需要进行业务办理或高频点击的操作栏可以固定在列表的两侧，更方便用户对数据进行操作。当操作项太多或操作项不常用时，可通过收起较低频操作项，来节省页面空间，保证用户阅读高效性。

(2)易搜索

1）条件查询。一般位于表单查询页面上方查询条件模块，当查询区域内容过多时，可展示第一行的筛选项，其余收起。

2）表头筛选。在表头单元格右侧增加筛选图标，点击后出现筛选覆盖层，根据不同筛选类别，配置相对应的表单组件，可快速查找数据。

3）标签筛选。将用户常用筛选条件或关注目标设置为默认选项，如时间、状态、范围，一般位于顶部操作栏或表头区域。

(3)易操作

1）单条操作。单条数据操作一般固定在列表左侧或右侧。

2）批量操作。当对批量数据进行相同操作时，沿着用户的操作路径，建议将此类操作按钮放至底部操作栏。

3）全局操作。当进行一些“导入、新增、导出、其他页面跳转入口”等列表的全局操作，或进行模糊搜索、条件筛选等操作时，建议将操作按钮放至顶部操作栏。

4）详情。可在操作里加“详情”按钮，也可将名称项做成可点击样式，跳转详情。

5）树形结构展示。无须用户进行页面跳转，展开父级节点即可查看子级列表内容，一般控制在三层以内。

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

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

首屏页面是用户首次浏览网站时所接触的「第一视觉」，也就是说它是整个网站设计中的门面工程。因此，首屏页面的设计是网站设计的成功关键，它将关系到网页设计吸引用户停留并做出预期动作，或迫使他们直接离开网站。

对用户而言，要判断网站的用户体验是否足够优秀是很容易的事情，因为主观感受是很难被欺骗的。但作为网站设计师而言，需要花费大量的时间和精力去面对和体验各种复杂问题，才能完善整个网站用户体验的闭环。

随着互联网行业的快速发展，关于活动方案策划是活动运营很必要掌握的一个技能，本文为大家提供了一个万能活动方案策划的一个技巧，传授给大家，有需要的小伙伴儿快快接招！

思想的高度决定运营的深度，而运营的深度则体现在方案的专业性，方案的专业性则用活动的效果来判定。所以，这篇《2021运营人年度工作总结- -万能活动方案策划篇》要远远比我的上一篇总结《2021运营人年度工作总结- -常用模型篇》更重要，它不只是强调纯粹的学习，而更重要的是学以致用。

很多人认为运营是服务产品和用户的中间纽带，在这里，我再次强调一遍，我并不认可这个观点。

我认为的运营是营销与运作的组合。首先，是通过营销帮助企业赢得市场和客户，让企业获得生存下去的可能；然后，才是运作通过营销获取的客户和市场，实现盈利。

如果说营销是运营中的重中之重，那么方案策划则是营销中的重中之重，而方案的落地形式活动则是保证方案效果的重中之重，这也是为什么我们做梦都想做一款爆款方案策划，执行出一款爆款活动的原因，为什么2022年元旦已经过去了1周，我还在孜孜不倦的整理《2021运营人年度工作总结- -万能活动方案策划篇》。

一、方案策划思维养成

在正式的活动方案策划模板讲解之前，我们先来简单探探方案策划思维的养成。如何通过唾手可得的身边小事培养思维，通过通过分析不同行业的方案策划中心，培养自己的方案策划思维的全局性。

1. 从身边小事养成

针对策划，根据体量大小可以分为：小方案策划与大方案策划。可能有些人会好奇，什么是小活动方案策划，什么又是大活动方案策划？

我们在各大社交平台发表观点、发布朋友圈、参与各种话题活动。有些人的内容非常具有吸引力、反响特别好；而有些人的内容确是平淡无奇。前者正是把这些事件，当成小的活动方案进行策划的，思考更容易燃的点；而后者完全是自嗨，只是注重自我感情的抒发。

而我们常见的线上线下的各种形形色色的活动、各大企业的品牌宣传广告和会议都属于大方案策划。而在互联网中常见的转盘抽奖、集卡活动、种树活动、砍一刀等等活动更是属于大方案策划，并且这种活动越来越常见、越来越繁多，对专业人手的需要越来越高。

2. 向不同的行业大厂学习

由于方案设计包含市场营销和活动设计，而市场营销又是一个特别大类别。所以，在这里我们不做分析，主要分析和运营息息相关的方案策划，特别是用的最多的活动方案策划。互联网公司包含社交类、电商类、内容类等公司。虽然同属于互联网行业，但是，不同的类别往往方案策划的方向、展现程度、关注重点也不同。

比如社交类、娱乐类软件往往更喜欢话题类、低价领会员类、信息推送类、短信通知类。

举例，职场社交软件脉脉会推送#选错专业的你，过的怎么样 #长期摸鱼会怎们样 等话题活动；短视频娱乐软件抖音可以添加各式各样的热门话题，比如#人类萌宠养成记 #厉害了，我的国等等。

电商类软件往往更喜欢满减活动、砍一刀、拼团等优惠类的活动。比如；每一年的618、双11、双12活动。

内容类活动由于考虑到内容的增长和用户的增长，往往喜欢培养作者、培养用户使用习惯的活动。比如：今日头条、知乎针对自媒体作者的培训活动；趣头条针对用户阅读达到一定时间的红包奖励活动。

所以，作为方案策划人员，或者希望从事方案策划的人员，需要全面的向不同类型的大厂学习，提前明确自己所在的行业或者未来期待的行业，基于行业的现实情况进行方案策划。同时，我们也可以尝试着把其它不同行业的优秀策划方案引入到自己所在的行业，带来新的增长。

二、万能活动方案策划模板

一个人焦虑，是因为对自己所做工作的不自信；

一个人害怕，是因为对陌生事物的担惊受怕；

而这一切都是因为缺少一位领路人，或者缺少一个简单明了易理解的知识体系。俗话说：麻雀虽小，五脏俱全。那么，活动方案包含哪些元素，这些元素需要注意哪些事项呢？

模板必需元素1：活动名称

能够占领心智、简单易懂、易传播

模板必需元素2：活动目的

活动目的分为5类，分别是拉新类、活跃类、转化类、留存类、裂变类，主要用于为活动定基调和方向。

模板必需元素3：活动目标

为什么有了活动目的，还要有活动目标呢？这两块是否重复呢？

其实活动目的是为了定活动的方向和活动的基调，活动目标是为了制定数字化、具体化、可量化、可执行、可考核的目标。这些目标一方面让方案策划人员，目标更清晰；同时，也便于公司后期对公司内部人员的考核。

模板必需元素4：活动预算

活动预算分为两类：

一类是方案策划人员根据活动提前预估的预算，这类预算只具参考意义，不可具体对下执行；

另外一类是公司审批通过的预算，这类预算是活动的具体可以开支的预算，活动方案策划人员需要根据最终的预算进行调整，以及寻找奖品合作方洽谈价格和预算，实现预购、预生产或者采购的行为。

模板必需元素5：可行性设计

大部分运营新人对活动无从下手，往往是因为缺乏可行性设计的切入口。可行性设计可以参考电商活动的RSM模型。

R指Role，通过数据分析，筛选符合参与活动的角色用户；

S指Scene，打造符合角色用户的常用场景，通过场景让角色用户尽快进入角色，参与活动；

M指Motivation，用户参与活动的动机。这方面的内容相对较为复杂，主要是对人性的分析。有些活动方案策划人员希望利用七宗罪分析，有些人喜欢利用九型人格分析。如果没有太多想法，可以基于人群对名、利、权、色的基本需求进行分析。

模板必需元素6：活动形式

活动形式多种多样，当然也更多的形式需要活动方案策划人员进行开发。常见的活动类型有排名互动、游戏活动、优惠促销活动、拼团活动。

拉新方向的活动往往使用拼团活动，效果更好一些；比如，我们常见的2人成团或3人成团的拼团活动，在理想状态下往往是依据2ⁿ或3ⁿ等指数函数进行设计的；

活跃方向的活动往往使用游戏活动，效果更好一些；比如转盘活动、红包活动、老虎机活动、蚂蚁森林、开心农场等等；

转化和留存的活动往往使用优惠促销活动，效果更好一些；我们常见的618、双11、双12、会员生日活动都是优惠促销类活动；

裂变方向的活动往往使用排名活动，效果更好一些；这种排名活动可以依据用户的订单数、成交额、邀请新用户数量进行排名，从而实现订单的裂变或者新用户的裂变；

模板必需元素7：活动内容

在互联网的活动中，用户很少可以见到原版的活动内容，我们通常看到的比较多的是活动海报、详情页、落地页、广告链接等等。针对这一块内容，普通人的理解往往也是缺失的。但并不代表没有这方面内容，或者这方面内容不重要。

举例，我们参加的新品发布活动、会销活动，是不是都有工作人员精心准备的PPT。讲师通过对PPT的讲解，让大家对活动的内容更清晰、更明了。如果，作为一种创新型的活动，是十分有必要对种子活动用户，进行明细的活动内容讲解。

模板必需元素8：活动规则

活动规则的设计，需要为活动目标服务，同时规则需要具备引导性、易读性、易懂性、挑战性。如果一场活动的规则，方案策划人都需要思考良久才能明白其中逻辑，可谓是非常失败的典型了。同时，我们也不建议活动不利于用户的规则，通过小字的形式在不明显的位置展现，这不符合用户思维、粉丝思维和诚信品牌思维。

模板必需元素9：活动流程

每一场活动都需要有明确流程、路径、排期等信息，这便于与其它部门进行沟通协作；同时也方便执行人员有着清晰明了的执行方向、节奏、动作。针对流程设计，可以使用免费的ProcessOn在线快速便捷设计。

为了方便活动的实施把控监督与后续复盘，建议活动设计时提前思考活动路径数据埋点动作。这些数据都将成为公司的宝贵资产。

模板必需元素10：风险预案

风险与机会同时存在，在活动策划的同时，需要全面考虑来自政治、法律法规、友商、道德方面的风险。

模板必需元素11：协调资源

一场优秀的活动方案策划，绝对不是一个人能够完成的。

需要产品经理在APP上的活动应用的规划；

需要研发人员在繁忙的开发工作中做好活动程序的开发和测试；

需要设计人员安排好海报设计、规则设计、奖品设计等内容的设计；

需要采购人员对奖品的提前准备和仓储人员对活动管理等等。

模板必需元素12：活动复盘

一场活动无论效果好，还是效果差，都需要进行复盘。为了更好的扬长避短，也是为了后续活动的不断迭代。这种迭代思维对于活动方案策划人员绝对是不可或缺的。复盘包括不限于数据复盘、路径复盘、成本复盘、文案复盘。

最后附上《万能活动方案策划模板》，通过工具化的内容和标准化的SOP让活动策划的效率高上数千倍。

三、最后

作为一名活动方案策划人员或者准活动方案策划人员，需要善于发现自己身边与活动方案策划相关的小事，比如：朋友圈、话题活动等，善于通过这些小事培养自己的活动方案策划思维；合理利用本文中的万能活动方案策划模板，培养系统化的大型活动设计思维；同时，还需积极参与和学习其它互联网大厂的活动，为自己提供更多的思考和参考；另外，积极洞察市场上新的营销知识、运营知识，快速学习并学以致用。

文章来源：人人都是产品经理   作者：互联网运营的那些事

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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