如期而至，这是标签栏控件总结的第二期。这一期真是掏空职业经验，希望对你的工作有所帮助。

这一期我们来聊一聊标签栏中的关键元素——图标。

图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。

标签栏图标规范

1. 图标样式

图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。

我调研了诸多的应用程序，发现主流的 APP 标签栏样式变化，大致分为以下五种。其中占比最多的是「由线型转面型」。

调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在 1pt-2pt 之间。

2. 图标视觉大小

上一期我们讲到，iOS 定义了一套标签栏图标的尺寸规范。

iOS 在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

那么为什么 iOS 会根据不同的图标形状给出不同的图标尺寸呢？因为 50px×50px 的正方形比 50px×50px 的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）

于是我们看到许多平台都推出了图标辅助网格规范 ¹。其实如果遵从「面积相等」原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：

但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考「面积相等」原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。

记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。

3. 图标输出尺寸

iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt；Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。

但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？

于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为「安全边距」。

对于安全边距的规定：Material Design 全平台规定图标的安全间距统一 2dp；iOS 则根据不同的图标使用场景给出的不同的图标网格和图标安全间距 2。

静态图标

标签栏的图标一般分为静态图标和动态图标两种。

静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付 .png 格式文件；如果是矢量图建议交付 .svg 格式文件。

1. 位图图标

使用位图时请注意以下两点：

不同项目环境输出的切图套数不同

• 交付 iOS 原生的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图文件；
• 交付 Android 原生的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图文件（@0.75x 和 @1x 切图层分别用于 ldpi 和 mdpi 分辨率设备，但这些设备现在几乎已退出市场，所以可不考虑，但最终视项目真实需求确定。）；
• 交付 web 项目的切图需要试情况而定，一般常用 @2x 切图，因为 @2x 向下适配 @1x、向上适配 @3x，都不会产生太大的图片失真。但有时候前端小哥会要求用到其他倍率切图，所以最终以具体需求而定。

请注意：这里我所提到的倍率全都是「绝对倍率」，这个概念非常关键。

「绝对倍率」指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用 @2x 作图时，为了保证「绝对倍率」不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。

如果你在 @2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。

有一点绕的话，我们以 Sketch 导出位图切图为例：

所以如果你日常使用的是 Sketch，也是用 Sketch 原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：

如果你日常使用的是 PS，用 Cutterman 切图，那么 Cutterman 会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是「绝对倍率」，不用像 Sketch 当中一样换算。前提是「设置当前画布为：Auto（自动识别）」。

假设你在 @2x 下作图，执意不管不顾「绝对倍率」，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。

注意切图文件大小

切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是 UI 必备的技能之一。

虽然图标的文件大小一般只有几 KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。

这里推荐一个压缩 .png 文件大小，但几乎不会产生失真的免费网站 tinypng³（是我曾经深爱的一位前端小哥推荐给我的，在此表示感谢）。

2. 矢量图

位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题，但对于矢量图，这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI 可以在 Sketch 或 Ai 中制作。

一般与前端人员对接有在线图标库对接与本地文件对接两种。

在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont⁴；本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。

如果 .svg 切图输出后，与设计稿中样式不符，请注意排查以下三点：

svg 不支持渐变颜色填充；

• svg 不支持描边，请将所有的描边轮廓化。Sketch 中可通过「图层-轮廓化」；AI 中可通过「对象－路径－轮廓化描边」；
• 要确保一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。

动态图标

为了提升用户体验和产品趣味性，动效微交互的标签栏图标也越来越流行了。

动效在前端落地的方法其实有很多：

• 前端代码直接实现：代码是很强大的，但通常用代码直接写复杂动效会很浪费项目时间。简单维度的动效如位移、透明度、大小变化等可以借助代码，但复杂动效就不要去打扰前端小哥了；
• 直接刚 gif：这已经是老旧技术时代的动画解决方案了，文件大且请求文件也需要时间，有时候无法给用户及时的触控反馈。再者它是位图的原因，在高分辨率屏幕上缩放容易失真。
• png 序列帧：我们知道，动画是一张一张的静态图交替变化形成的。如果将每一帧动画都拆分成一张图片，就有了 png 序列帧。所以一套动画的 png 序列帧往往非常多，文件大小自然就变大了。所以后来也有团队引进了雪碧图的方式，但文件大小依然不乐观。并且同样是位图的原因，高分辨率屏幕容易失真。
• Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 给 iOS 和 Android 提供的常用动画预设，是较早将动效代码化的开源技术方案，但动画效果预设只有弹簧/衰减等一些简单样式。后来 Facebook 又推出了 Keyframes，允许设计师自己在 Ae 中自定义动画并导出，然后交付给前端人员。
• Lottie 动画：和 Facebook Keyframes 相同，都是结合 Ae 输出动画代码。但是 Lottie 更厉害的地方在于，它比起 Facebook Keyframes 来支持的 Ae 样式更多，例如蒙版、遮罩、修剪路径等等。

所以综上所述，落地标签栏动态图标，目前最高效可行的还是 Lottie 动画。

1. Lottie的背景

Lottie 是 Airbnb 开源的一个跨平台动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。很花式的动画也可以把文件大小做到非常小。

UI 与前端对接是通过交付一个 json 代码文件。

如果这是你第一次接触 Lottie，再好不过的体验方法就是玩一玩阿里提供的一站式动画平台：犸良动画 5。它最底层采用的技术就是 Lottie，只是被阿里二次封装了许多预设的动画效果，你可以自定义其中的元素与参数，然后试着导出你的第一个 json 文件。

2. Lottie如何上手

接下来是简单粗暴的 UI 与前端对接实现 Lottie 动画落地的全步骤参考。在此之前，想要全方位了解 Lottie 的相关信息，请参阅 Lottie 官方说明文档 6。

步骤一：安装 Ae 和 bodymovin

制作 Lottie 动画，首先你必需两个工具：Ae 和 bodymovin 插件。

Ae 最低版本要求为 Ae CC2014。又因为据很多设计师反馈，目前 bodymovin 在汉化后的 Ae 中使用会出现诸多问题，所以后面的教程都是基于 Ae 英文版。如果你汉化了Ae，最好在需要制作 Lottie 动画时取消汉化。

然后获取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就适用于你当前的项目，因为前端使用的 bodymovin 解析包可能无法解析你用最新版 bodymovin 插件输出的 json 文件。

一旦确定使用 Lottie，前端人员会在 GitHub 查询 Lottie 相关文档的，所以 UI 只需要配合前端确定一下合适的 bodymovin 插件版本就可以了。最终走查时，一定要确保当前 bodymovin 输出的动画在项目所需要运行的所有环境中可运行，才说明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。

获取了 bodymovin 后，将 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 会自动识别插件安装到 Ae。

安装完成后，就可以在 AE 的「窗口-扩展」中看到 bodymovin 啦。

步骤二：将 Sketch 或 Ai 中的文件导入 Ae

如果你技术娴熟，当然也可以直接在 Ae 中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案，再到 Ae 中制作动画，那你需要了解如何将图案导入 Ae。

Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作图，可直接存储为 .ai 文件，再在 Ae 中打开。

如果你使用的是 Sketch，可以先导出为 .svg，再用 Ai 打开该 .svg 文件，转换存储格式为 .ai，最后到 Ae 中打开。

当然，Sketch 还有直接和 Ae 对接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同时安装 AEUX 插件，Sketch 负责传送，Ae 负责接收。具体的使用方法可以在官网教程中查看，我就不再赘述了。

步骤三：制作动效并输出

和静态图标同理，为了保证落地时图标视觉大小一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie 官方建议：因为 Lottie 输出的是矢量动画，所以建议以 @1x 输出动效，前端人员在任何屏幕上放大并不会失真。

在制作之前请务必详细阅读 Lottie 所支持的 Ae 参数文档10，以免辛苦做出的动效，前端无法解析。特别提醒：原生环境中 bodymovin 是不支持解析 Ae 表达式的。

完成制作动效后，就可以通过 bodymovin 导出动效了。

步骤四：预览与交付

导出完成后在你的目的地文件夹中将存在一个 .json 文档，如果你的动效中还使用了位图，系统还会自动生成一个 images 文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。

.json 文件中记录的动效代码 UI 不需要过多关心，但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。

UI 自检动效或其他相关人员需要预览动效的时候，可以用 LottieFiles11，拖入 .json 文件即可预览。iOS 和 Android 还可以下载 LottieFiles APP，扫描预览页中的二维码即可在移动端预览。

总结

整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范，然后制作位图、矢量、动效图标时的注意点，我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了。

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

颜色可以用来区分信息图形上的数据类别和维度，是数据可视化中最常用的视觉变量之一。然而，世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰——他们在识别部分或者全部颜色时有困难。我们通常笼统的称这类人群为“色盲(Color Blindness)”（也称为道尔顿症、色觉缺失、色觉辨认障碍、色弱等）。面对如此庞大的特殊受众，设计师理应关注他们的需求。信息图形设计本是以向用户传递精准数据为目标，也不能忽视了这部分群体。

一. 了解色盲
“色盲能看到颜色吗？”“他们只能看到黑、白吗？”——人们常误以为色盲视觉所见的景象只有灰阶分布，其实不是的。色盲并不意味着色觉的完全丧失，而是指部分色觉受损，因此无法正确感知和分辨某些区域的颜色。色盲可以分为：红色盲（P）、绿色盲（D）、蓝色盲（T）和全色盲。其中红色盲和绿色盲最为普遍，合称为红绿色盲。全球大约2亿人都患有色盲，它的普遍程度甚至高于AB血型的人群。下面我们感性的看看色盲人眼中的世界：
 

从上面模拟色盲色觉的图片来看，我们可以感受到色盲人士能够辨识的色相较为有限。红色盲和绿色盲的色觉较为近似。由于红绿色盲人数占到了色盲总数的99%，我们需要更多地理解他们能看到的颜色。以下列举了红绿色盲容易混淆的颜色，以及色觉上的一些规律：

 　　1 ) 红绿色盲难以分辨两种差别只在红色或绿色元素的颜色。如红色和绿色；蓝色和紫色（蓝+红）；绿色和棕色；红色和棕色等。

2 ) 红绿色盲人士对蓝色更为敏感。举例来说，他们会把红色和绿色、或黄色和黄绿色混淆，但却能清楚的分辨绿色和蓝绿色（翠绿色）。

3 ) 红绿色盲眼中的红色并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色强调字。

4 ) 虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。

5 ) 相比高饱和度的颜色，低饱和度的颜色更难辨认。如天蓝色和粉红色。

也许以上的分析还是太抽象，为了更直观的看到色盲人士眼中的颜色，下面介绍几种模拟色盲色觉的工具，方便设计师们设计和检验：

Adobe自带的校样设置

Photoshop CS4和Illustrator CS4及以上版本提供了模拟红色盲和绿色盲的校样设置，对于每天都在Photoshop/Illustrator中拼搏的视觉设计师来说，这是最简便的一种方法了。选择“视图—校样设置—红色盲型/绿色盲型”

 Color Oracle：http://colororacle.org/

 网站Color Blind Web Page Filter：http://colorfilter.wickline.org/

二.设计解决方案

设计面向色盲人士友好的信息图形，并不意味着要设计师要放弃使用色彩这种“利器”。即便是对色觉障碍的人士来说，颜色依然是区分不同类数据的一种简单快速的表现形式。要提高信息图形的识别性和易读性，我们可以遵循这样几个思路寻找解决方案：（1）不完全依赖颜色来区分信息，同时使用多种视觉变量来编码信息；（2）选择安全的配色方案；（3）使用文字注解。

1.冗余编码

避免仅使用颜色来编码信息，应尽量同时使用多种视觉变量（如形状+颜色、尺寸+颜色、注释+颜色）来对信息编码。其中，形状包括了这样一些可使用的元素：圆形、三角形、矩形等；实线、虚线、点线等；字母、数字符号等。这里需遵循的一个原则是：使用尽可能少的颜色——结合使用不同形状符号和少量鲜艳的颜色，效果远好于只使用一种形状和多种颜色。

 
2.选择适当的配色
针对色盲人士的颜色识别能力，需要精心选择配色，才能避免选择容易混淆的色区。然而，要使配色能覆盖到各种色觉辨认能力的人（包括色盲、色弱和色觉正常的人群）并不是一件容易的事，尤其同一界面需要出现多种颜色时，让设计师非常头疼。日本有研究得出一组无障碍配色建议，在此分享，供大家参考。这组颜色针对色盲和非色盲人士都是易辨识的（例如它选择了朱红色代替红色，蓝绿色代替绿色，紫红色代替紫色，以减少色盲人士的困扰），它对屏显和印刷都适用，并且所有颜色的名称也容易定义。

需要注意的是，从以上配色组中选取颜色时：A. 请交替使用暖色和冷色；B. 当使用多个暖色和多个冷色时，在明度和饱和度上做出区别； C. 避免同时使用低饱和度和低明度的组合。
另外分享两个配色工具，它们都提供了针对色盲人士配色的选项，可以辅助大家进行配色：
网站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/（打开“show color deficiency simulation”面板）
地图配色工具COLOR BREWER 2.0 http://colorbrewer2.org/（勾选“colorblind safe”选项）

三、举例

下面以几种常用信息图形为例，来说明如何为色盲用户优化信息图：

1)点状图

优化采用了这样一些手段：A.调整配色，将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。B.调整明度，使图中几个颜色在明度上差异更明显。C.为不同元素赋予不同形状。所有使用点元素的信息图，都可以参考这种解决方式。

2)折线图

优化采用了这样一些手段：A.采用更粗的线条，使颜色更明显。（色块越小，颜色越难分辨。对有色觉障碍的人来说，带颜色的细线、小图标、细体文字尤其难区分。）B.换用不同形状的线条（实线、虚线、点线）。C.文字直接注释在线的周围。D.颜色微调。这样对每一类数据使用多重可视化变量进行编码后，即便颜色信息完全丢失，也能够完整的传递信息。所有使用线元素的信息图，都可以参考这种解决方式。

3)柱状图

通过增加底纹，直接标注文字注释的方式优化了柱状图。所有使用面的图形（如饼图），都可以参考这种解决方式。

四.写在最后

在实际设计过程中，我们不一定会同时使用到以上所有手段，需要在美观和友好之间进行权衡。我们也可以采用一些交互手段，避免同一界面中元素太多太过杂乱的问题。如highcharts这个趋势图非常优秀，它采用了易辨识的颜色，每个节点处都使用了不同形状的符号，然而仅当鼠标hover到具体节点时，会出现该条线对应的信息（“New York”）。

另外除了鼠标hover的交互方式以外，我们甚至也可以为色盲人士提供单独的色盲模式切换，这样也可以兼顾视觉上的美观，避免了太多信息的干扰。这种形式在游戏和软件中也有先例。例如iChat，一般情况下仅有不同颜色来区别用户的在线状态，但同时，它也提供了“User shapes to indicate status”选项，可以将“空闲”状态换成橙黄色三角形符号，将“忙”状态换成红色方形符号表示。

文章来源：腾讯CDC  作者：pearlfu

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

编辑导语：新基建的支持，持续利好的政策，再加上互联网红利正在逐渐向供给侧转移……诸多因素都在推动着产业互联网的发展。B端市场俨然已经成为产业互联网的代名词，尽管如此，B端市场仍然需要深度改造，我们要认清其独特性，把握B端时代的发展规律，赢得发展红利。

毋庸置疑的是，产业互联网绝对是当前的热点。无论是头部的互联网巨头，还是新入局的玩家，几乎都想要通过加持产业互联网的概念来投身到全新的风口里。

的确，在C端流量的争夺已然成为红海的大背景下，将目光转移到B端市场，我们将会发现一片充满了机会的蓝海。于是，习惯了跟随风口的人们，开始将目光投向B端市场，并且开始用自身的实践来寻找着挖掘风口的全新方式和方法。

在很多时候，B端市场，俨然成为产业互联网的代名词。

尽管B端市场的确有着非常庞大的市场潜能，并且B端市场确实需要被深度改造，但是，同仅仅只是以搭建平台和中心为代表经典互联网模式不同，B端市场或许需要投入更大的精力，或许需要建构新的商业模式，才能真正见到效果。

纵然是那些处于头部的互联网巨头，依然需要投入很多，才能在赋能和改造B端的命题上有所建树。简单来讲，B端时代是一个比C端时代的险滩暗流更多的时代。这是B端时代虽然成为一种趋势，但却一直都无法获得突破性发展的根本原因。

说到底，B端市场是一个与C端完全不一样的市场。

简单地套用C端市场的打法并不能够奏效，甚至还会失去绝佳的窗口期。找到真正适合B端时代的商业模式，并且真正能够用这套商业模式解决互联网时代无法解决的痛点和难题，或许才是B端时代的玩家们真正应该思考的关键问题。

我们都知道，在C端时代，互联网平台通常是用烧钱和补贴的方式来改变C端用户的习惯，而后再对C端用户进行收割。在这个过程当中，玩家们仅仅只是需要将平台尽可能做大即可，等到C端用户的行为和习惯改变之后，他们就可以发挥业已形成的规模效应，实现盈利。

同C端时代的商业模式不同，B端时代是一次全新的旅程，我们只有认清了它的独特性，才能真正把握B端时代的发展规律，最终赢得发展红利。

一、B端时代不一定要做大，但一定要做深

相对于C端时代动辄千万级别，甚至亿级的用户量不同，在B端时代，用户的量级会大大减少。纵然是头部的平台，它们所服务的用户都无法达到C端时代的量级。

因此，仅仅只是将目光聚焦在用户的量级上，试图通过规模效益来实现自身的发展，很显然是不对的。这是B端时代来临之后，人们简单地套用C端时代的发展模式，却一直都无法奏效的根本原因。

同C端时代一定要做大不同，在B端时代，更加考验玩家的是，是否能够做深，是否能够对一个B端玩家从头到尾进行方方面面的赋能，彻彻底底的改造。

如果一个玩家可以对一个B端用户从始至终都进行深入而又全面地改造，并且真正可以给B端用户带来本质性的变化。那么，这个玩家或许才算是真正掌握了B端时代发展的精髓。

这就需要B端时代的玩家拥有较为庞大的综合实力。他们不仅要能上九天揽月，还要能够下五洋捉鳖。由此可见，在B端时代，仅仅只是依靠概念和营销是难以实现持续发展的，只有真正成为一个多面手，真正能够给B端用户带来真正的改变，才能让B端用户买单。

如何扎根到某一个行业当中，把某个行业的内在流程和环节摸清弄透，做B端用户的“万金油”，才是确保一个B端时代的玩家可以长久发展的关键所在。所以，在B端时代，不一定要做到像C端时代那样的量级，但是，一定要比C端时代做得更深，更透才行。

二、B端时代不一定要做平台，但一定要做中台

互联网思维的深度影响让玩家们简单地认为，在B端时代，只需要搭建一个平台，再把B端用户聚拢在这个平台上，就可以自然而然地进入到B端时代。事实证明，在B端时代，我们真正缺少的不是撮合和中介，而是赋能和改造。

在这个大背景下，互联网时代的平台和中心的概念已经不那么重要了，如何对B端用户进行深度而又全面地赋能，如何深入到B端行业的方方面面，才是保证B端玩家真正把握风口的关键所在。

从这个角度来看，在B端时代，人们真正需要的或许并不是一个平台，而是一个中台。

同平台仅仅只是一手联通着上游的生产端，一手联通着下游的消费端不同。中台更像是一个深入到生产端和消费端的细枝末节的强大的根系，它不仅要承担联通的角色，而且还要承担输送营养和能量，改造B端角色。

可见，我们再去用平台的概念来实践B端时代的发展，依然无法真正把握B端时代的精髓，仅仅只能变成落后的B端玩家倾销传统、原始库存产品的场所，而无法成为升级、转型B端行业的助推器和营养基。

在B端时代来临早期阶段，我们看到的诸多以销售为主导的赋能方式和方法，无论是社交电商，还是社交新零售基本上都是基于平台思维出现的，而后来的发展同样告诉我们，这种平台思维无法真正奏效，以中台代替平台，才能真正把握B端时代的发展红利。

三、B端时代不一定要封闭，但一定要开放

在C端时代，我们更多地看到的是你强我弱的零和游戏，即一方的强大，一定是以另外一方的弱势为基础的。这是互联网平台之所以会不断建构属于自身的生态系统，不断进行流量的争夺，并且逐渐走向封闭和垄断的根本原因。虽然这套模式在C端时代非常奏效。

但是，等到B端时代来临，我们再去用这样一种封闭的、独立的生态系统式的模式发展的时候，便会开始遭遇越来越多的困境和难题。

因此，在B端时代，我们并不一定要建构一个封闭的、独立的生态系统，而是要打破自身的局限，不断破圈才能获得更大的发展空间。当下，我们看到越来越多地互联网平台开始破圈，打破原有的生态圈的概念，正是这种现象的直接体现。

B站在破圈，快手在破圈，阿里在破圈，微信也在破圈。这说明，在B端时代，不同的生态体和平台之间同样需要不断联通，才能真正给B端产业带来改变，一味地封闭，不仅无法获得发展，甚至还将会走入到死胡同里。

在B端时代，一定要开放，一定要协同。当我们不断打破原有的圈层限制，当我们不断开启新的发展的时候，不同中心之间的协同给B端行业带来的改变才能更大。从单平台到多平台，将会成为B端时代的主旋律。

以此为开端，在我们的头脑当中所形成的根深蒂固的平台和中心的概念将会由此打破，取而代之的将会是共生体的概念。

四、B端时代不一定要消费升级，但一定要产业升级

我们都知道，伴随着B端时代的来临，人们提及最多的是“消费升级”的概念。因为在消费升级的概念出现之后，人们才会反推到产业端，用产业升级来实践B端时代，并且由此衍生出来了产业互联网的概念。

事实上，所谓的消费升级的概念，其实依然是基于C端时代诞生出来的概念，如果用这个概念来指导B端时代的发展，是无法让B端时代的发展跳出C端时代的发展怪圈的。

真正意义上的B端时代并不真正需要所谓的消费升级，但是，一定需要产业升级。因为以C端为主导的消费互联网时代遭遇困境的根本原因不是因为C端用户出问题了，而是因为B端的生产和供应方式出问题了，落后的供应端已经难以与消费端完美对接。

在这个时候，我们只有升级B端产业，通过新的生产方式和供应方式去满足C端用户的新需求，才能化解消费互联网时代的问题，再度让供求两端实现对接。

随着人们对于B端时代认识的深入，消费升级的概念开始逐渐被弱化，取而代之的是产业升级和消费平权的概念。通过产业升级，我们看到的是B端行业的生产模式和供应模式需要一场深度且全面地改变；通过消费平权，我们看到的是B端行业的用户群体需要从一二线城市转向下沉市场。

从本质上来看，无论是产业升级，还是消费平权，都是一场以B端变革为肇始点的新发展。不同的是，产业升级的概念之下，玩家们真正应该关注的是外部产业的升级；而在消费平权的概念之下，玩家们真正应该关注的是自身的升级。

五、B端时代不一定要去互联网化，一定要数字化

伴随着B端时代出现的是产业互联网的概念，提及产业互联网的字眼，人们自然而然地将其与互联网联系在一起。

后来，随着大数据、云计算、区块链和人工智能为代表的新技术的崛起，我们看到的是一场以去互联网化为代表的新发展浪潮的来临。于是，人们开始将B端时代与互联网撇清联系，甚至开始诋毁互联网的功能和作用，去互联网化俨然已经成为一种潮流。

笔者认为，在B端时代，我们并不一定要去互联网化，而是一定要摆正互联网的位置，认清互联网的作用。在很多时候，B端时代的互联网更多地承担的是一个数字流量的获取和整合的角色，它存在的价值和意义在于为将来的数字化积蓄能量。从这个角度来看，B端时代的来临并不一定需要去互联网化，而是应该更多地需要数字化。

如何以数字化为切入点来改变消费互联网时代以互联网为主导的发展模式，通过对传统产业进行数字化的改造和整理，为传统行业的发展汲取新的发展动能，或许才是我们真正应该关注的地方。

从这个逻辑来看，B端时代并不一定要去互联网化，但是，一定要数字化。只有数字化真正实现和完成之后，B端时代才能真正完成和实现。

当产业互联网时代来临，B端市场成为一个备受关注的热门领域。很显然，B端市场与C端市场是存在着巨大区别的。认清这种区别，并且以此来落地和实践产业互联网，才能避免产业互联网走回头路，真正让产业互联网带入到属于自己的发展轨道里。

文章来源：人人都是产品经理  作者：孟永辉

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

逐帧分析方法是一种针对动态的、短暂的过程对象进行对比分析的方法。该方法可帮助设计师以微观视角完成差异分析并得出相应结论。与传统的静态截图、动态录屏方法相比，其优势是可以看到过程的全貌，对动态细节一览无余，具有较高的分析可控性。

背景

逐帧分析方法的产生源于一次针对加载场景的体验调研项目。百度百科对于加载的定义是：所有软件要运行必须加载到内存，加载就是把需要的文件及信息读取到内存里。简单说来，所有从服务器读取信息并显示在手机屏幕上的过程都属于加载。以百度APP举例，加载的典型场景有：启动、打开FEED落地页、打开搜索落地页等。这些场景都有一个共同的特点是：动态的过程，且过程较为短暂。

基于以上特点，运用对比分析里最常见的静态截图或动态录屏方法，是无法完成分析的。原因是，静态截图对于一个动态过程来说，无法看到过程的全貌，可对比点较少，分析要素不可控（一张静态截图中，无法做到涵盖所有分析元素）。而采用动态录屏的方法进行分析时，问题也同样明显：过程太快，无法看清细节；不同视频节奏不同，对比起来比较困难。因此针对加载这种特殊的场景，就需要采用一种全新的方法既能看到过程全貌，又可以对细节一览无余。

方法的产生

小时候我们都玩过跑马灯的游戏，即一系列静态图片通过快速轮转，由于视觉滞留效应，便可看到一段动态影像。如果把产生动画的过程翻转过来，也就是说如果可以把一段动态影像拆成一系列序列帧，那么是否可以更好的完成影像观察？

以百度APP打开小视频落地页的加载场景为例，当我尝试将这段300ms的过程录屏拆分为18张序列帧后发现，除了可以清楚的看到过程全貌外，对于过程中的所有细节也可以一览无余。同时，序列帧可以进行任意拆分，以便完成多角度观察。

到此为止，逐帧分析方法的雏形已经产生。在之后的章节，我将为大家具体介绍如何完成序列帧分析以及如何导出序列帧。

如何进行逐帧分析

面对一系列序列帧，我们可以通过“序列帧三要素”来导出关键数据及结论。

要素1：序列帧全流程

首先，我们进行序列帧观察的时候，需要明确定义目标对象的起点与终点。由于逐帧对比方法适用的观察对象均为短暂的动态过程，明确定义全流程的起点与终点是为了让观察过程和结论更加精准。

以百度APP打开搜索落地页为例，起点与终点分别是：点击搜索结果手指松开的第一帧与搜索落地页首屏内容全部加载完成的最后一帧（可以通过观察前后帧是否有变化得出结论）。这一要素中，可以采集到的关键数据为时长，时长可以帮助我们观察加载性能的好坏，甚至在进行竞品对比的时候，快速找出与竞品在时长方面的差异从而得出优化建议。结论输出时，需要将帧数转换成为时间单位（如何将帧数转化成时间会在后续文章中为大家讲解）。

要素2：序列帧子流程

在前文中提到，逐帧分析法的一个优势是，逐帧序列可以进行任意拆分，以便完成多角度分析。在分析的第2要素中，我们可以最大限度拆分子流程，同时需要明确每一个子流程的起点与终点。这一要素的分析中，可以采集到的关键数据为子流程时长，缺失或多出的子流程，以及子流程内部的差异。

例如在百度APP Android端热启动过程中，全流程被拆分为：启动至全屏、持续白屏态、内容加载3个子流程。通过换算，可以看到每个子流程的时长。并且在和竞品的对比中发现，百度APP缺失了持续白屏态这个子流程。而在启动至全屏的子流程中，百度APP因为没有添加过渡动画，与多数竞品是有差异的。

要素3：用户体验节点

用户体验节点的对比是逐帧分析法的第三要素，这一要素进一步深入到过程的微观视角，使得分析结论更为全面。而用户体验节点是逐帧分析法所提出的一个全新概念，其定义是：产品界面上任何一次用户可感知的变化，都叫做用户体验节点。以百度APP Android打开搜索结果页为例，整个过程的用户体验结点有5个。通过用户体验节点可以采集到的关键数据有：用户体验节点的数量以及用户体验节点的顺序。

我们以Android打开搜索落地页为例为大家进一步讲解如何完成用户体验节点数量的分析。通过对比发现，百度APP在整个加载过程中的用户体验节点数量多于竞品，多出的节点为：白屏节点、文字加载节点。虽然百度APP加载时长与竞品相差无几，但是由于节点数量较多，导致用户在等待过程中经历了过多的页面状态变化，形成了较强的视觉闪跳感，从而引发用户感知层面的错觉，认为百度的加载时长较长。因此我们可以通过减少非必要的用户体验节点，从而提升加载场景的流畅感。但是，用户体验节点的数量并非越少越好，这还要根据实际业务与优化方向来输出具体结论。

用户体验节点顺序的分析，可以参考百度APP iOS FEED打开图文落地页的示例。在这一示例中，百度APP图文落地页内容加载节点位于框架转场节点之后。但是对比竞品发现，多数竞品在这个过程中，内容加载是先于框架转场的，而这种节点顺序的优势是，转场完成后，用户即可开始浏览内容，整体感知较为流畅。这种导致阅读流畅感体验差异的原因很难通过肉眼或常规竞品对比法观察得出，由此可见逐帧分析方法针对特殊场景的分析优势非常明显。

序列帧三要素总结

在此，我们回顾一下逐帧分析方法的“序列帧三要素”。

要素1：序列帧全流程，可采集的关键数据有：全流程时长。

要素2：序列帧子流程，可采集的关键数据有：子流程时长、子流程是否缺失、子流程内部的差异。

要素3：用户体验节点，可采集的关键数据有：用户体验节点的数量与顺序。

如何导出逐帧序列

工欲善其事，必先利其器。进行逐帧分析前，我们首先要将录制好的视频转化成序列帧。以下章节将为大家讲解如何导出逐帧序列。

整个过程可分为：录制、创建合成、输出3个环节。

1.录制

由于系统特性，iOS和Android手机双端建议采用不同的录制手段。iOS手机可直接通过数据线连接到电脑，并使用电脑的QuickTime进行录制。这样的好处是保证了录屏的帧数基本稳定在60FPS（每秒传输帧数）；Android手机建议采用机内功能或其他录屏应用完成录制，但是安卓中低端手机很容易出现掉帧的现象，因此就需要我们在合成和输出阶段制定一个合理的输出帧数，让分析的结果更加接近真实。另外，建议录制的起始点适当延长，这样便于素材在合成阶段精准切割。

这里要为大家讲解一下如何将帧数换算成时长。以iOS的输出帧数为例，换算公式为：iOS时长= N（帧数） x 16.6ms。例如：在iOS打开图文落地页的加载过程中，百度APP总时长为：73（帧数）x16.6ms= 1217ms（约等于）。

2.创建合成

创建合成阶段所使用的工具是AE。AE的好处是：

1.方便查看原视频帧速率，对不稳定的帧速率进行统一处理；

2.可以将视频转换为图片序列，便于后续的逐帧分析；

3.AE也可以将多个视频进行同步播放来进行对比验证。

第一步：打开AE>合成>新建合成。

这一步的目的是通过合成设置，统一帧速率。通过一系列实验，我在新建合成时，将iOS录屏的帧速率设置为60帧/秒，Android录屏的帧速率设置为30帧/秒，这样可以保证最大化的减少空白帧，使分析结果更加准确。

第二步：导入录屏

第三步：截取起止点关键帧。

在进行素材处理的时候，需要精确到每一帧，由于逐帧分析所针对场景的时长极为短暂，很可能由于一帧的差距，导致分析结果相差甚远。

以百度APP iOS端热启动过程为例，我们将录屏中手指抬起的前一帧（即icon显示出点击态）做为起点，将APP启动后填满手机屏幕的第一帧（可通过观察法，在AE中查看前后帧是否有变化）做为终点完成素材处理。

3.输出

输出的路径为：菜单栏 文件>导出>添加到渲染队列，在渲染队列中找到待渲染视频，再在 输出模块>格式选择JPEG或PNG以序列导出。这一步的目的是，将一段视频文件拆分成可提取对比的逐帧画面。

最终导出的序列帧如下：

在完成分析对象序列帧导出工作后，便可开始进行逐帧分析了。

结语

逐帧分析法是在实际项目中总结并提炼出的一种全新的分析方法。该方法对于短暂的、动态的过程非常适用，可以帮助我们从微观视角发现问题、验证问题、得出优化结论，极大的提升了分析效率和精准度。逐帧分析法也在后续的多个项目中也得到了推广和验证，希望可以帮助到大家。

文章来源：站酷   作者：MEUX

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

Meet more beautiful colors.

“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。且人对色彩的视觉感知与想象能力，能够指导人做出预测、理解和决策。”

-- lyft kevyn arnott

——————————

随着世界的数字化转型进程大爆发，科技把每一张有形的办公桌移到了云端，用户沉浸在数字构建的世界中。腾讯文档作为先进的生产力工具，产品生态越来越多元丰富，多品类多终端的复杂环境展现在我们面前，开始真正的朝复杂庞大的大规模设计迈进。我们希望能以更加专业、高效的设计姿态迎接腾讯文档的未来挑战。

色彩是体现品牌与基因的关键因素，构建科学高效的色彩系统，建立产品的品牌形象，对产品设计极具指导意义。

腾讯文档在色彩上也进行了一些深入的挖掘和沉淀，一方面希望带给用户全新的品牌印象和认知，另一方面构建科学有效的色彩系统，为产品的发展提供优质高效的设计系统基础。本文将聚焦于色彩系统的构建。

Chapter 1

——————————

品牌标准色进化

腾讯文档代表着效率协作的先进生产力，从云端创作到云端协作，打破了办公空间的实体界限。我们希望，新的品牌色，能够为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和认知。

我们将标准色由平静的天蓝色，升级为更加生动、进取、科技、可靠的明亮清澈的钴蓝色。这种蓝色具有更多的电子意味，蕴含了更多的活力和想象力，承载了腾讯文档对未来数字世界新挑战的态度和形象的进化。

同时我们认为灰色在腾讯文档的色彩系统中起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。我们将灰色赋予了统一的品牌认知感受，将蓝色加入到中性灰色里，生成了腾讯文档特有的蓝灰色。

至此，腾讯文档标准色进化升级，它体现了腾讯文档对可靠稳定的技术、产品体验的追求，以及对未来智能的数字世界的不断创新和进取，蕴藏着无限的可能性。

Chapter 2

——————————

丰富多元的辅助色

在一个科学有效的色彩系统里，往往包含至少两种色彩：主色+辅助色，两者互相搭配组合成产品体系的整体色彩感受，减少用户在产品体验中对反复出现的主色的视觉疲劳。

腾讯文档的产品生态愈来愈丰富多元。我们拥有多品类的产品，为用户提供了丰富的产品功能，其中云端协作、文档资产的沉淀管理是腾讯文档的非常重要的能力，在线文档、在线表格、在线幻灯片、在线收集表、在线思维导图、在线流程图以及文件夹等的品类图标，又是用户在对文档进行协作分享及沉淀时，识别不同类型文件的关键因素。基于此，腾讯文档相较于其他产品需要更多的辅助色。

于是，如何有效的选择既符合品牌调性又有区别度的辅助色是构建腾讯文档色彩系统的关键。在辅助色选择上，我们以邻近色、互补色、对比色为主要方法构建了辅助色彩体系。

1、 创建色相色板，保持相同明度、相同饱和度

我们以腾讯文档标准色#1E6FFF（H 218 S 88 B 100) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）以218°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。

2、 以邻近色、互补色、对比色为原则选择丰富的辅助色彩

● 邻近色 在色相环中，相差15°的颜色为邻近色，凡在60°范围内的颜色都属于邻近色的范围。邻近色之间往往是我中有你，你中有我，色彩之间比较和谐。

● 对比色 在色相环中，角度相差120°-180°之间的色彩，文档使用了120°为角度来选择对比色。

● 互补色 在色相环中成180°角的两种颜色，互为补色，当这两种颜色彼此相邻放置时，它们会为这两种特定颜色创造最强烈的对比度。

为了保持腾讯文档的基础品牌调性，并保证其具有极清晰的识别度，我们以品牌蓝色为起点，选择了相对较多的邻近色，以保证在色温上保持腾讯文档整体色调的清爽感。并利用对比色及互补色，选择更加丰富多元的色相，以保证能够满足各种使用场景下对色彩的需求。

总的原则是利用邻近色构建有质感、品牌感的色彩家族，利用对比色及互补色扩展色相，以制造更强烈的色彩对比，满足一些冲突性场景。

3、 校正辅助色

虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于色彩本身自带感官明度属性，导致在视觉感受上的感官体验并不同频。

黄色、绿色的明度即发光度较高，蓝色就稍微偏暗一些，导致色板看起来不一致。为了让不同色相看起来更加协调，需要调整色板的明度和饱和度，以保证视觉感官体验同频且更加和谐舒适。

校正原则：

● 色相必须保持是 同类色（色相环中15°夹角内的颜色）

● 保持感官明度同频

● 保证视障群体的识别度

校正后我们得到了清澈明亮、清晰易分辨的腾讯文档的主色+辅助色。并且针对视障群体进行了色彩测试。

Chapter 3

——————————

易用的中性灰色

灰色是产品体验设计中至关重要的一节，工具型产品大部分是由各种各样的容器、面板、列表组成。灰色为产品界面创造结构、表达边界、建立信息层次，保持舒适的对比度是提高可读性和吸引用户注意力的关键。

前面我们已经定义了腾讯文档的蓝灰色，在界面的设计中，我们将其与中性的灰色结合，共同构建灰色的色彩体系 。

● 扩展蓝灰色相，应用于图标、容器，构建有层次、舒适清爽的产品界面 。

● 用带透明度的黑色，应用于字体等。

为构建一个高效易用的灰色调色板，我们将蓝灰色彩作为Y轴，有透明度的中性灰色作为X轴，两者透明度保持一致，建立起腾讯文档有梯度的、丰富的灰色调色板。

对比度是否合理是阅读体验是否舒适的重要评价维度，过高或者过低的对比度都会影响阅读体验及识别度。下图是对比度的钟型曲线图，随着对比度的增加，舒适度和识别度都在上升，但一旦超过一个界点，对比度越增加，识别度和友好度亦会逐步下降。

为保证视障用户的使用，保证足够的对比度，遵守 WCAG 2.0 的标准，我们对调色板灰色的对比度进行了可用性测试，以指导腾讯文档体验设计中灰色调色板的使用。

是：对比度在AA标准以上，符合W3C标准，可以使用。

中：仅可用于disable状态。

否：对比度在AA标准以下，不符合W3C标准，不可使用。

Chapter 4

——————————

高效易用的调色板

定义好文档的主色、辅助色以及中性色后，我们需建立完整的调色板来满足不同场景下颜色的使用。以传达品牌精神，建立色彩层级，或传达信息，或强化界面层级。

在色彩系统中，很多产品使用 Tints and shades 系统，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。但这种方法得到的调色板往往比较刻板僵硬，故腾讯文档采用了另一种方式，将已生成的灰色色板与色相叠加，在符合无障标准的区域，选择不同明度饱和度的色彩，形成有梯度、有层级的彩色调色板。

Tencentdocs_blue：

生成主色-蓝色色阶：

用同样的方法将辅助色生成色阶：

现在，我们有一个梯度丰富，能够支持腾讯文档设计系统的调色板了～

实际案例

实践才是硬道理，我们尝试以这个调色板为指导来调整优化腾讯文档链接色的优化调整。

为保证用户阅读体验的舒适度，链接之类的彩色文本，要求颜色在背景下可以达到4.5:1对比度以上，以使它能够清晰的从灰色文本、背景中脱颖而出。于是，我们放弃了品牌蓝_1E6FFF，选择了品牌蓝70_175CEB 作为链接色。

以后，选择颜色，so easy～

结束语

这个长长的制作调色板的故事就要结束了，我在这项工作中，重新审视过去设计中的设计决策方法，在其中学到了很多东西，希望本文对您也有所帮助。

我们经常快速的动手，依靠主观情感去选择颜色，在刚开始可能没遇到什么特别的问题，但随着产品的壮大和发展，往往会越来越凌乱。抽丝剥茧的搭建色彩系统，真正让色彩为设计服务，简化团队的工作，相信您会有更愉快的工作体验～

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

一弄JS，就总有人在提闭包、闭包的，此前不了解，上网上搜，很多讲的也过于难懂，感觉没有必要那么复杂，今天就把我对于闭包的理解总结一下，力求简单、通俗、易懂



目录



1.什么是闭包



2.闭包有什么用？



3.闭包带来了什么问题呢？



4.总结



 1.什么是闭包

通俗的理解就是:子函数使用着父函数作用域内的变量，导致父函数作用域内的变量无法回收释放的这种情况。



<script>

function a(){

   let num=0;

   return ()=>{

     console.log(num++);

   }

};

let t=a();

//执行三次结果是多少？

t();

t();

t();

</script>

 看上面的代码，分别执行三次t(),那么结果是多少呢？







结果是0，1，2，这是怎么回事呢？原因就是闭包导致的。



我们首先分析：a函数内有一个num变量和一个子函数，在子函数中使用着父函数a的变量num，使其自加1。随后将a函数执行后复制给t，由于子函数一直在使用num变量（其实不论子函数是否使用，父函数的变量都不会释放，随时等待子函数调用除非子函数引用被释放），所以num变量并不会回收释放。也就是说三次t()改变的num其实是一个。这就是闭包的原因，如果没有闭包，在子函数处理完num后，num回收，则应该是三个0。



2.闭包有什么用？

从另一个角度理解，如果一个函数没有被回收释放，那么他的父级、父级的父级。。。。。祖宗级（全局）的变量也不会被释放，而且可以被函数访问到。这就是为什么全局变量在哪里都可以访问的原因了，其实就是闭包的应用。那什么时候全局变量不可用了呢，就是他内部的子函数引用都被清空的时候，也就是程序关闭了，网页关闭了之后。



1.绝大多数时候我们不会有意识的用到闭包，但是没有闭包你得程序是跑不了的，比如全局变量。。。。。



2.极少数情况下我们用函数去给一个变量“续命”。这种情况下，闭包就会被用到了。



3.还有就是，如果问你：



JS中没有严格意义的私有变量，请问你能弄出来绝对私有么？答案:能。请看代码：



<script>

  //这个num就是真的严格意义的私有

  let a=(function (){

    let num =0;

    return {

      get(){

        return num;

      },

      set(val){

        num=val;

      }

    }

  })();

  a.set(55);

  console.log(a.get());

</script>

这时a将返回一个json，里面有两个函数，分别是get和set。当你在外部给num赋值或者是调用num时，必须通过get和set“属性访问器”去访问，否则无法访问到num变量（真正的私有）。因为当你不用get和set时候也就是说get和set函数是不存在的，那么根据“闭包的原理”num会被释放掉，也就是说num不存在了，所以你直接num赋值是undefined的。



3.闭包带来了什么问题呢？

这里最为典型的就是for循环中用var定义循环变量(var i=0;i<10;i++)，循环的结果是相同的，就是最后一次运算的结果。这里就涉及到了作用域和闭包的问题。详细的请看我的这篇文章，本文就不赘述了。



深入理解js_for循环条件中使用var为什么会出问题？（js块级作用域理解）

转自：csdn 论坛 作者：韦_恩

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

前言

这部分来学习关于JavaScript数据类型的相关知识。

一、字面量

用于表达一个固定值的表示法，又叫做常量。

1.数字字面量

<script> // 整数字面量 // 十进制 console.log(12); // 八进制 console.log(010); // 十六进制 console.log(0x100); </script  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

效果展示

2.浮点数字面量

浮点数不区分进制，所有的浮点数都是十进制下的（注意：浮点数若是0~1之间的，前面的0可以省略不写，例如0.6可以写成.6）浮点数的精度远远不如小数。

// 浮点数字面量 console.log(1.2); console.log(-1.2); console.log(0.1343); console.log(.1343); console.log(1.2e4); console.log(1.2e-4);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

效果展示

3.特殊值

Infinity：无穷

// Infinity console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(5e789); console.log(-5e789); console.log(Infinity);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

效果展示

NaN：不是一个正常的数
isNaN()判断一个数据是不是NaN.

// NaN console.log(0 / 0); console.log(isNaN(0 / 0)); console.log(isNaN(22));  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

效果展示

4.字符串字面量

字符串字面量：
用单引号或者双引号包裹起来，引号中间可以有任意多个字符，也可以没有字符则为空字符串。（注意：如果字符串中包含了双引号，则外面用单引号包裹，反之相同）

// 字符串字面量 console.log("这是一个'字符串'"); console.log("123"); console.log("000%$*^"); console.log("     "); console.log("");  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

效果展示

**转义符**：

// 转义符 console.log("你\n好"); console.log("你\t好"); console.log("你好\"呀\"");  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

效果展示

二、变量

1.变量的定义

变量：计算机内存储数据的标识符，根据变量名称可以获取到内存中的数据。
变量声明：使用变量之前先进行定义，创建变量。如果使用之前没有定义变量，就会出现引用错误。
定义方法：var后面添加空格，空格后面添加一个变量名。

// 变量的定义 var name; var userName; var a; var b1;  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

2.变量的赋值

变量定义后有个默认的值为undefined；变量赋值时，内部可以存储任意类型的数据，甚至是一个变量。
一个var可以同时定义多个变量，中间用逗号分隔开。
代码如下（示例）：

// 变量的定义 var name; var userName; var a; var b1; // 变量的赋值 var a=1,b=2,c=3; a = a + b + c; console.log(a);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

效果展示：

三、数据类型

1.简单数据类型

复杂数据类型object。

2.检测数据类型

用typeof来检测数据类型，后面加小括号，括号里面写参数。（变量的数据类型是变化的，随着赋值不同数据类型也就不同）
代码如下（示例）：

console.log(typeof(6.8)); console.log(typeof(-1)); console.log(typeof(NaN)); console.log(typeof(false)); console.log(typeof 66); console.log(typeof 66 + 3);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

效果展示

3.数据类型转换

（1）转成字符串
toString（）和String（）转换成字符串类型的数据。
“+”的特殊性，两边只要有一个字符串就是拼接字符串功能。两边是数字那么就是运算功能。
（2）转成数字类型
Number（）可以将其他类型的数据转换为数字类型。
parseInt（）字符串转成整数的方法：对浮点数可以进行取整操作，将字符串转换为整数数字。（针对数字字符串）
parseFloat（）转成浮点数。
（3）转成布尔类型
Boolean（）可以转任何类型的数据，将其他的数据转为布尔类型的值。
转为false : NaN、0、“” 空字符串、null、undefined
转为true :非0非NaN数字、非空字符串

// 转成字符串类型 console.log(true.toString()); console.log(String(2333)); console.log(1 + ""); // 转换成数字类型 console.log(Number("11aa")); console.log(parseInt("123.11ac")); //转换成整数 console.log(parseFloat("12.123hh")); // 转成布尔类型 console.log(Boolean(NaN)); console.log(Boolean("")); console.log(Boolean(undefined)); console.log(Boolean("   ")); console.log(Boolean(123));  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

4.prompt接收数据转换

// var num = prompt("请输入一个十以内的数字"); // num = parseInt(num); // console.log(typeof(num)); // 简单化写法 var num = parseInt(prompt("请输入一个十以内的数字")); num = num + 3; console.log(num);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

总结

数据类型这部分就学习到这里了，坚持学习前端，希望看到一个不一样的自己。

转自：csdn 论坛 作者：G.di

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

在工作中常常被问到如何表达讲述自己的设计，为了让自己的设计有理可依，对接上下游汇报工作的时候，总结以下一些方法和观点，帮助不知从何讲述自己设计的人一些语言技巧。  

以下仅是个人观点，用作探讨交流，文中所有举例均为本人工作设计输出。

设计师能做出好的设计，却缺乏系统化的语言包装，“如何讲设计”不该让它成为难题，做一个有产品思维的设计师，让你的设计以理服人，我们要不止停留在视觉表层，更要从多纬度看待产品设计，本文将从以下三点简述：01.产品设计的五个层面，02.讲述设计的流程，03.关于本次总结

做好产品设计的第一步，是了解产品， 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识，在产品常识里面最重要也最常用的就是产品设计的五个层面，也简称用户体验五要素——

作为UI设计师，所处的视觉设计是表现层，是确定产品的最终形态，因此也处于产品设计的顶层（能被看到），是一个具象画的呈现；其次，往里推框架层，是确定产品外观，将界面信息和导航设计有序归类，让用户使用或者理解；结构层是为用户设计一个结构化的体验，将零散的元素转化为有序立体的空间；范围层确定产品的功能和需求；最后战略层是确定产品目标和用户需求；底层逻辑结构决定上层意识形态表现，因此在设计前我们要知道产品是属于洞察阶段，设计中是属于产品设计解决方案阶段，整体的产品设计是一个概念通过无数个层面的努力，经过时间，转化为具象表现的过程，所以我们在完成一项设计时，应该讲述一个完整的设计思路 ，不要让自己的设计思路仅停留在表面。

整个产品的设计产出是一个抽象到具象化的过程，设计的前期属于产品洞察阶段，这个时候一般由团队的老板领导结合当下市场需要，有用户的需求就有商机，想出产品大致的方向（战略层）然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型（范围层），交给交互设计师优化产品细节逻辑和信息具体框架，经过研发评估能够技术实现产出交互稿（结构、框架层），这里已经过渡到设计解决问题执行阶段，最后是给到界面设计师美化视觉产出高保真（表现层）。

也就是到我们自己设计输出之前要经历这么多，如果能在讲述自己设计的时候，提前去了解这些，那么设计内容就不愁没法儿讲，光是阐述自己的设计思路就可以讲出一个故事，这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好，也要会用语言推销自己的设计成果。

设计是对于某件事精心准备的过程。好的设计作品，应该拥有完整的设计流程，因此我们在讲述自己设计作品的时候，有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤：

第一是我们需要去了解设计的需求背景，知道大概的方向—— 

1. 来源（简单理解就是谁提出的问题）需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题··· 

2. 背景（笼统一点，就是这个需求是新需求还是原来有然后进行改版优化）需求的基层性质是什么，原本调性是什么，我们要做什么样的产品··· 

3. 目标（目标一般都是需要解决什么问题）搞清楚为什么做这个需求，能解决什么痛点，不做无用功。

谁提出的问题，是新的需求还是旧的问题，或者我们要解决什么？围绕这几个方向将你的设计概述出来，会让非专业的人也能听懂你做了什么，举个简单的例子，我们公司后台一个很小的产品bug需求，往往这种需求就是产品经理的一个截图和他标注的两句话——

然后你完成了这个需求单，在传达给非产品经理以外的人的时候，你有可能是以下转述方式——

毫无疑问，你就是将需求者的意思一字不落的转达了，但是对于其他的听者来说，你的转述平平无奇、毫无意义，甚至都没有印象你做了什么，所以你应该讲清楚这个需求的背景—— 

设计需求来源是谁，原本属于产品哪个模块（来源），他原来功能是怎么样的，界面上展示的结构哪里有问题（背景），视觉用了什么样的方式改成什么样，解决了什么痛点（目标）

讲清楚谁给的需求，需要解决什么问题，是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的，才让你的叙述更完整，听起来更有逻辑。如果是一项新的需求，没有背景，那还得从设计分析说起，设计分析就是让你更专业的去做事，设计分析分为——用户分析，设计目标，和设计手段三个要点：

首先用户分析就是，分析你做的东西给谁看，而用户又分为群体用户和独立用户，在c端常见的就是独立用户，他们通常不定性，且有很多特征；在b端，目标用户一般是群体，他们大多数是有场景特性和行业特性，针对独立用户和群体用户，我们得出的用户特征、基本信息、需求结论也是不一致的，所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析，这些方法中最简单的是用户画像，就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈，这两种方式通过对接需求的上下游就可以得知。

通过用户分析得出需求结论，满足需求就能达成设计目标——

设计目标结合卡诺模型来分析，卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系，具体想了解的可以自行百度，站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 ：1.必备属性：满足这个需求，用户满意度不会上升，但不满足这个需求，用户不满意会大幅度降低 ；2.期望属性：提供个性化需求，用户满意度会上升，不提供此需求，用户满意度会降低； 3.魅力属性：用户意想不到的效果，提供此属性，用户满意度大幅提升，不提供也不会降低 ；4.无差异：无论提不提供，用户满意度都不会改变，根本不在意；因此在做需求的时候我们应该尽力满足基本需求和期望需求，而可有可无的需求尽量不去做，降低效率。幸福需求是不容易达到的，如果能满足是非常棒的～这里就像是满足了设计心理学的三个层次——本能、行为、反思。

接下来是大家都熟知的设计手段，适当的讲一些述专业的设计技法，用不同的手段去实现的主画面，最后达到完成设计目标这样的结果，会让你显得更专业。设计的手段有很多种，这里主要讲述常用的三种，构图排版（采用什么构图方式，为什么这样构图是因为什么设计原则）、色彩运用（为什么使用这个颜色，因为这个颜色给人的心里感知是什么样的）、设计风格（采用什么风格最贴近产品调性，为什么用这个风格），但是讲设计时一定要记住产品的调性，不能偏离产品本身，不要盲目套用绚丽的技法，否则是不合适的。

很多时候面对非专业需求方收稿时，可能看到如下话语———— 

（心里是不是xxxx····“万马奔腾”，用个文明点的词）

非专业人士无法理解这二者的区别，他们认为他们的设计手段能达成设计目标，而作为专业设计师的我们就应该引导对方说出设计目标，再用我们专业的手段去满足对方的目标，去实现减少改稿次数，而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别，我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计，举个例子——

会议管理——会议预约移动端优化，因为这是我们原有产品EKP里面的模块，PC端和移动端都有，因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像，得出他们的一些需求结论，然后目前幸福需求是没有的，纯属个人建议，日后如果有此功能，想必用户的满意程度也会大大提升。

概括一下已完成的整体主要页面，分析设计目标： 

头部属于流量量较高的区域，采用卡片式设计，将会议内容置于此处，作为页面信息关键层，采用左对齐方式排版，突出会议标题和时间提醒用户。

通过不同的颜色标签，区分参会人员状态—— 

待进行未有操作反馈，选用橙色，属于可以持续进行并有明显提醒作用 

已做反馈属于成功操作，选用已有用户认知心理的绿色 

已知信息拒绝参与，是不太重要的，属于不再进行的阶段，选用灰色

接下来是设计作品的产出过程，一般情况下不可见的过程，为什么要去讲，  因为一个东西从无到有是很不容易的一件事，如果能讲述过程，就可以引燃情绪共鸣，让别人记住，让自己的设计作品也能有始有终—— 

设计过程一般分为四个阶段：初期阶段、中期阶段、最终定稿；具体的关键词和描述可以通过以下方式提炼出来，这里就不做详细说明了。

拿运营宣传来举个例子，我们公司中秋节月饼礼盒包装主视觉设计——整个过程应该是有一个系统化的说明的，省略为写字的地方是我们可以插入的具体图片和过程，步骤差不多就是上述这些，可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的，强化这种过程参与，让不被看见的事也能展现。如果实在不好记录，你可以从一开始就截图你绘制的过程——

上图是用PS截图，再用时间轴将每一帧动态循坏播放，导出GIF然后截一张不变的底图合成就可以了。

最后是数据验证阶段，这个是设计落地的直观证实，包含主观认可和客观数据，具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏，来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程，只要按照该流程认真做了，最后效果通常不会太差，如果出现很大的偏差也往往是意料之外的，因该寻求团队一起解决，不是某一个人的问题。

根据以上最后我们总结，好的设计就是满足以下4个方面：好看，好用，好记，能实现。设计师要考虑的维度不仅仅在视觉层面，什么是有产品思维的设计师，就是在执行时候要考虑上下游不同职能的工作内容，如果你的设计不能实现，再好看也是白费功夫的～从产品交互视觉多层面谈设计，会让你的设计包装显得不那么单调，系统化的方法总结到此，不足之处多多包含～谢谢你的阅读！

文章来源：优设  作者：YiVi_eleven 

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