“做图”的人大致会有两种称呼，一种叫做美工，一种叫做设计师。
用着差不多的软件，在外人甚至很多设计从业者看来工作内容差别不大岗位，有人被称作设计师，有人却天天只能自嘲自己是个美工。
那么，都是做图的，美工和设计师的差别究竟在哪儿？
在电商，纸媒或是印刷领域里，上下游的工作内容相对固化和流程化，对设计而言可发挥的空间本身就不大。时间久了，美工可以用模块化的方式在固定的时间里产出固定的设计工作。在印刷企业中，很多设计工作者除了需要排版还需要负责打样甚至印刷器械的操控。所以设计在整个产品生产过程中的比重不大，自然就从“创作”变成了“工作”。“工”也就寓意成手工或是劳动工作的意思。
为什么很多人会吐槽，朋友找自己可以“随便”做个LOGO呢？因为在他们眼中，你的工作不是创作产生的，而是像其他非灵感类工作一样，“生产”出来的。既然生产出来的，最后出来的又不是“实物”就不存在什么成本，那当然应该是免费的。
自嘲美工的设计从业者，大多关注的是好看与不好看。
“这个好，因为这个好看。”
“那个不好，因为它很丑。”
“为什么领导选了那个不好看的，而没选我这个好看的…”
在其眼中，评判设计优劣很重要的一条标准就是好看与不好看。与别人提出自己设计方案的时候，也用好看与否的方式让别人做出选择。但审美本身就没有一条共识性的标准，所以很容易被领导挑战你的设计，很容易被客户“指点”你的作品。
设计师在设计过程中追求的不仅仅是好看这一层面。通过设计，对目标和结果有什么影响、合理性、易用性和可延续性都是在“好看”之外设计师该去思考和要去凝结在作品中的工作。
哪怕日常设计一个最基本按钮的位置、圆角的弧度、颜色，都会在设计确认之前反复的自我询问，这样做有什么理由？为何圆角的弧度是4而不是8？宽度和高度为何是目前这个尺寸？哪一个更符合大产品体系下的设计原则？
即便没有一个是与非的标准，“这样是否合理”都应该是设计师挂在嘴边最长自检的问题。
设计的初衷是解决问题。都是设计从业者，一类人在定义规则，一类人在执行规则。广告有调性的定义，产品有规范的定义，设计师会时刻的思考和优化什么样的定义，能够提升效率、能通统一识别性、能协同合作、能保证最小概率的出现错误。
在这样的规则下，另一类人在执行规则，即便是一些banner的设计，他们只做着规则之内的工作，至于为何这样规范，没有思考过，也不知道为何要这样。还有人会说，我做的banner没有规则都是自己说的算啊~但在建立这个banner的尺寸之初就是规则本身呀。
有些人喜欢积累素材，认为这样做可以为设计提升效率。很多人依靠素材来寻找设计方向，素材品质的好坏决定了他最后出品的好坏。没了网络，没了素材库也就没了思路和灵感，更没有什么创作可言。
设计师在接到需求之初考虑的不是在哪查找素材，而是在思考这个需求需要解决什么样的问题，这个设计如何执行才能满足这个需求。有些设计师喜欢整理，而且整理是设计师剥离表层干扰的一个基本能力，通过拨开表象，发现问题的本质，再去寻找解决之道。
很多设计从业者，尤其是新手，做设计都是凭着感觉，凭感觉做设计最大的问题是没有一个有效之道来保证每次设计的品质。运气好了，或是找到一个好素材，那么能做出80、90分的设计，运气不好，那就不知如何下手。
留心观察下身边的“大神”，看看他们在接到设计之后的思考路径是怎样。是忙着翻素材、找参考还是静下来画画草图，做做需求整理，这可能是美工和设计师遇到问题之后最大的行动差异。
同是看到一件惊艳的作品，美工考虑的是：
“卧槽，这么牛逼，这是用什么软件做出来的？”
设计师考虑的是：
“卧槽，这么牛逼的想法作者是怎样想到的”
思考的初衷不同，行动的路径也就不同。美工会觉得软件至上，努力学好软件之后就会成为大神。而设计师会尽可能多的去了解优秀作品背后的故事，去了解一切设计和设计之外的临界知识。积累好足够的“思维素材”再去运用到设计工作中去。
我经常听到一些年轻的设计师问我，你会哪些软件，这是个好奇且好学的问题。但软件真不是高阶或是低阶的区分壁垒。如果真是这样，那么大师们都应该是设计软件的熟练驾驭着。而恰恰相反，软件用的666的大多都是培训机构的培训老师，可能连设计师都算不上。摒弃软件思维吧，产生真正距离的一定是脑，不是手。
看到这里，有人会觉得这篇文章写的有些许的“激烈”，有些不是美工的问题，可能是年轻的问题，是新人必须经历的问题。跨越了年轻和初级，有些人的思维和眼界进阶了，但有些人还停留在上面说到的部分层面里，新手可能从美工进阶到设计，但美工却不一定都是新手。
有句话说的不是很好么：
“我有十年工作经验”
“不，你只是用一年的经验工作了十年而已。”
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：大宝频道 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI 设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。
本文共分为以下5个部分：
1. 图标设计详解：先对图标有个整体的认识，了解图标总共有哪些类型和应用场景。
2. 工具图标设计：最常见的工具型图标的相关规范，以及对应的设计案例演示。
3. 装饰图标设计：近年来使用越来越广泛的视觉型图标设计认识，以及对应的讲解。
4. 启动图标设计：讲解启图标的相关规范，如何高效的进行设计。
5. 图标应用详解：介绍在一个UI项目中，要应用多少种图标规格，并如何设计出正确的图标
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有 4 种元素，图片、文字、几何图形、图标。
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如下图中的 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好地设计图标？
这就涉及对图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了！就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行。有两个原因，第一就是，文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势！再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
第二点， 就是关于视觉的观赏性上。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来总感觉太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
• 工具图标
• 装饰图标
• 启动图标
下面，我们将为对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI 设计会创作的图标有更全面的认识。
1.1 工具图标
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们统一罗列出来。
风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下。
1.2 装饰图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
还有，就是国内的界面设计环境，会根据运营的设计需求进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性。
拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
2.5D 风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用 2.5D 会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
炫彩渐变
这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。
1.3 启动图标
最后，就要说说启动图标了！启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。
除了必要的规范掌握以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
文字形式
适用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
图形形式
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了！
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
Sketch/XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔、等功能（Sketch 相对 XD 更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款 “位图软件”。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
• 路径创建和调整
• 钢笔工具和锚点
• 路径图层
• 布尔运算
• 图层属性
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
PS：最近在准备一套 PS 教学，就会比较完整的讲解一遍这些功能和对应操作。
Adobe Illustrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
• 形状生成器
• 轮廓化描边
• 路径查找器
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就可以为我们后续的学习提供良好的支持！
但是现在还不要迫不及待地打开软件，在实际上手操作绘制图标之前，我想先讲讲规范。
是的，现在还不到实操的时候，规范之于画图标，就好像音标之于学英语，都是基础中的基础，也都是大家最容易忽略的东西。
如果对规范没有一个清晰的认知，那也是无法独立画好一套图标的！希望读者千万不要跳过这部分的讲解直接去看演示了。
3.1 表意的准确性
在第一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。
表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑。
在常见的图标类型里，如通知、设置、用户、分享之类的图标，对于任何手机用户来说都没有认知和选择压力。但表意准确麻烦的地方在于，一些非常规的寓意，极难用图标表现出来，这才是我们使用工具图标的首要麻烦。
比如下方这些图标，如果我不加上文字信息，大家能理解它们是什么吗？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我们再把文字信息补充进去，是不是就会觉得图形挺贴合内容的。
在这种案例中，我们要关注的就是，面对这样不常见的内容，设计师是怎么把图形的创意和样式想出来的！如果自己遇到一样的问题怎么办？
所以，除了知道每个工具图标都要表意准确这样 “正确的废话” 以后，我们该看看如何通过合适的创意将图标样式确定出来。
一般抽象的图标，难点在于寓意信息是非实体的，所以我们很难直接构建对图形样式的联想，所以首先我们得想办法将抽象的内容 “实体化”。也就是说，我们可以先把这个词写到纸上，然后把和这个抽象信息相关的所有实体物写下来。
然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。
如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。
所以，在设计图标时符合表意准确的概念，需要设计师不断收集图形，并提升对词汇联想的能力。很多图标图形优秀的创意，就是在这些基础的积累之上逐渐形成的，而不是一撮而就。
3.2 图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。
在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。
下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。
类型一致
前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。
风格一致
每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。
第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。
第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。
透视一致
透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
粗细一致
在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。
比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。
在填充图标中，我们会在一个矩形或是圆形中增加矩形的镂空，比如下图的几个图标，在这种情况下也要保证它们的粗细是一致的，而不是各不相同。
大小一致
大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。
因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一部分做出介绍。这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。
如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。
3.3 几何图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即
怎么让不同的图形看上去一样大？
可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图这样。
嗯，画起来轻轻松松，参数上完美无缺。但等等，怎么看上去这些图形大小有点不一样，为什么正方形看起来这么大，三角形看起来这么小？
恭喜你们，发现了这个问题的根源，不同几何图形带给我们的视觉大小是不同的。而要解决这样的问题，就要对它们的尺寸做出额外的调整，比如下图这样。
适当调整完圆形和三角形以后，是不是觉得大小的感觉一致了？这就要牵扯一个更基础的视觉规律，占据面积越大的图形，给视觉的感受就越大，所以给我们感受越小的元素，就要放的越大。
并且，这个问题在一个图形的内部也会产生影响，比如知乎 APP 下面的点赞、反对按钮，都有三角形图标对吧，但图形其实对于外部举行是非居中的，我们看看下面的演示。
如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。
所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。
3.4 工具图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。
我们先简单看看，常见的工具图标栅格是什么样的。
里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。
所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。
之所以要说参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准。
如果设计图形和参照图形的类似，那么尺寸就不能大于参照图形，如果设计图形的宽大于参照图，那么高就要小于参照图，反之亦然。如果图形的重心有偏移，那就要往重心偏移的反方向移动，比如搜索按钮，Wifi 图标等。
最后，说说栅格系统的画法，和大家想象的不一样，想要画一套图标，栅格系统是我们自己画出来的，不是到网上下载下来的，所以怎么画也是这个知识的重点。
如何绘制图标栅格系统
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。
然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。
之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。
这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。
当然，为了进一步方便大家的学习，我特意准备了一套现成的栅格素材，包含 16、24、28、32、36、48 等六个尺寸。大家可以进入我的主页关注公众号并回复 “图标素材” 获取。
3.5 像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。
我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机，都是通过像素画的形式呈现，人物锯齿是无法避免的。
而随着技术发展，像素密度是降低了，但如果依旧是按过去这种一个萝卜一个坑的方式显示内容，那锯齿感无论如何是无法消除的。于是，开发了次像素渲染（Subpixel Rendering）的技术。一个在显示器中让我们觉得平滑的圆，一直放大，就可以发现它的周边充满了饱和度较低的其它方块色彩。
这项技术，让像素可以用特有的方式来显示非完整的色块，即尽可能还原我们对元素定义的小数点。但为什么我们还要提这个概念呢？
因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。
所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。
AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。
像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。
像素对齐是一个专业 UI 设计师对于极致追求的表现之一，是每一个一线大厂 UI 设计师的基本职能，所以，想要冲刺更高的段位，就不要忽视这个规范的使用。
这是图标系列文章的第一篇，信息量不算少！所以我们在结尾再总结一次，方便大家记忆。
• 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。
• 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。
• 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。
• 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。
• 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。
• 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。
• 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。
• 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。
• 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。
• 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。
那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。
在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。
所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰得罗列出来。
表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。
例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。
对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。
甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。
而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。
所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。
表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。
常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。
主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。
通常，表头的设计会和下方列表设计有一定的区分，表头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来增强对比。
列表则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。
常规 B 端项目表格都会限制列表一次展示的行数，极少使用无限滚动加载的模式。因为当数据包含成千上万条时会对本地、服务器性能和交互方式带来一系列的负面影响。
如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的可操作选项放进操作栏中。
翻页器是切换列表页面的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。
除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。
B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。
不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。
表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。
- 表格的总宽响应
- 表格的最小宽度
- 单元格的响应逻辑
- 内容的响应逻辑
上方逻辑中表格可以无限延长，但它却不能无限的缩短，因为你不可能做一个只有 10px，20px 宽的表格。
过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。即浏览器视图即使比这个宽度更小，表格也不会再缩小了。
如果不了解栅格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 560-640px，当然，不管怎么定一定要提前和前端沟通，确定尺寸方案。
当表格内容少的时候，最小宽度只是相对较大宽度窄了一点而已。而当表格内容过多，最小宽度无论如何也不够放的情况，那么就会使用横向滚动的交互形式来隐藏超出内容。
单元格响应这是整个表格最复杂的一环，横向内容会超出最小宽度的情况，就是由单元格规则决定的。
首先，单元格本身也有最小宽度，原因和前面一样，1px、10px 宽的单元格没有存在的意义。所以可以根据需要，制定多个等级的最小单元格宽度，应用在不同的数据类型中。
假设表格中包含了 20 个表头，分别使用了 10 个最小 24px 和 10 个最小 80 px 的，那么单元格的总宽最小就是 240+800 = 1040px。
所以当父级整个表格视图小于 1040px 的时候，内容就会不够显示从而触发左右滚动的条件。 
当上级表格宽度大于单元格最小总和时，那么单元格也就会随之变宽。最简单的响应逻辑，就是为单元格宽设置百分比。比如 5 个单元格分别是父级宽度的 10%、10%、10%、20%、30%、20% ，那么在父级 1000px 的时候它们分别是 100px、100px、100px、200px、300px、200px。
只要确保百分比的总和是 100%，不管你单元格是比例均分（5个单元格等分各20%宽），还是独立制定（上面案例），单元格宽都是等比缩放的状态。
虽然好理解，但这种初级的做法带来的问题也很多，那就是部分单元格没有被 ”放大“ 的需求。比如常出现在第一列的多选框，或者部分标签单元格、固定操作按钮单元格。
于是，为了预留给有需要的单元格更多的空间，提升体验，就会对这些单元格实施定宽的方式，剩下的单元格继续使用等比，只是计算的方法要减去定宽元素。
比如还是一个占比 20% 的单元格，在包含 2 个 48px 定宽单元格的 1000px 表格中，实际宽为：
（1000px - 2*48） * 20% = 180px
作为单元格的子级，内容也可以独立定义响应的规则。主要包含 3 种情况：
- 无响应
- 隐藏多余
- 换行显示
无响应就是显示的内容是固定的，比如多选框、缩略图、单按钮等单元格内容，它们没有大小变动的必要。 
隐藏多余，则是主要应用在文本内容上，当单元格宽度小于当前文本所需宽度时，就会把多余的文字进行省略，这种做法适合应用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家汇南丹路天主教堂一楼“ 变成 ”上海徐家汇南丹路天…“，之后再通过鼠标悬浮弹出文字气泡框的方式显示所有文本。
而换行显示，则是文本或多标签状态下，一行不够显示就换行的做法。除非一开始单行行高预留了多行显示的高度，否则多行内容就会撑高单元格。
以上就是表格在响应式模式下相关知识点。
随着经验的积累，实战经验丰富的 B 端设计师，就会在前期的规范环节制定出完整的表格响应逻辑，应用到前端框架开发和后续的设计，而不是做到哪定到哪。
表格首先是一个展示信息的组件，而单纯依靠布局和排版技巧，并不能解决所有的信息展示问题。所以，针对网页表格的局限性，我们要添加一些交互的细节来提升使用体验。
例如，单页表格数据量较大，有好几屏高，往下滚动后看不见表头，不能很好的识别单元格内容。
或者，表头属性数量较多，需要左右滚动，但是每行数据要不然操作栏目看不见，要不然对应 ID 被滑走了等等。
所以，表格的框架就可以做悬浮固定的模式，将需要被持续露出的栏目悬浮固定。
当然，除了单独栏目的悬浮，也可以使用混合模式，比如表头吸顶的同时固定右侧的操作栏。尽量将固定元素控制在 3 个以内，以免悬浮要素太多影响内容的浏览。
还要注意，除了笔记本触摸板和少数鼠标，一般用户是没有页面左右滚动滚轮的，所以当表格出现左右滚动情况以后，就一定要默认展示进度条，方便用户操作。
我们先对这两者做一个明确的定义：
筛选 Filter：对要显示的内容设置筛选条件，不符合条件的将会被过滤隐藏
排序 Sort：对已有内容的显示顺序进行条件设置，不会有内容被过滤或隐藏
这看起来好像很容易理解，但会搞混的地方就在排序的应用上。我们常规以为的排序，就像电脑文件夹列表一样，通过点击表头来决定内容通过哪个属性来进行升序或者降序。
在这种 “朴素” 的设定中，筛选是以单个表头属性为标准的，有唯一性。比如在学生数据表格中，可以以 ID、姓名、年级、年龄或成绩单个属性进行列表排序，选中其中一个属性其它属性的排序就被取消了。
但是复杂的排序并不是 “唯一属性” 的，而是多个属性的并集，以及具备优先级和排序模式。还用学生数据表格举例：
优先根据年龄降序排列，同年龄下根据班级升序排列，同班级再根据成绩降序排列。
这里面叠加了三个属性，年龄优先级最好，然后班级次要，成绩最后，我们用图表的展示可以实现出下面这样的形式：
再进一步，这是我们条件已经确定才做出来的组件，要是要制定的属性不确定，要制定的属性数量也不确定，顺序不确定，排序模式也不确定……
这种情况就肯定要应用排序自定义条件的逻辑了，而表头自定义一加，那逻辑就立马复杂了，它的操作面板可能就长下图这样。
排序复杂了，并不代表筛选就不要了。部分项目的筛选除了在表格外的独立筛选区域，还可能应用表头筛选模式。即以单个表头纬度设置筛选条件，比如点击 “年份” 表头，设置起始和结束时间。
所以，只包含筛选的情况下，表头的图标就不是排序而是漏斗，点击后就要展开筛选设置面板进行操作。 
而当多表头筛选和多表头排序需求并存的时候，怎么解决？
这里只建议在表头中留存筛选选项，因为筛选可以实现并集关系，即前后任何表头添加筛选项都可以组成完整的筛选条件。但是，这种交互难以完成筛选优先级排序。
所以，我们要将排序独立成一个按钮到表头之外的地方，而不是强行让两者并存。尤其是不要设计出有的表头是排序，有的表头是筛选，甚至表头的按钮展开面板里又会有筛选又有排序……
表头是针对列的操作，而针对行的操作，就是对单行列表的选择、展开和进入了。
前面我们有说过，表格第一列往往放多选框，通过点击选择当前列表行。它本身的交互并没有太多需要注意的，只要针对行的交互如果不止选择应该如何平衡。
部分复杂项目喜欢在表格中添加 “套娃” 的需求。即单行数据可以向下展开二级数据，或者更进一步到三级、四级。 
所以当多种操作需求混合出现的时候，我们就要具体分析这些需求的优先级了。到底是多选操作频率最高，还是查看下级行，打开详情页。
这是为让点击整个数据行这个最便捷的交互可以关联到最高频的操作上。而其它低频操作的交互则只限定在对应的按钮或图标上即可。
因为多选需求往往需要我们在一系列数据中选择很多条数据，一个小小的复选框不仅选择起来麻烦，且通过查看右侧的内容筛选数据行，再用右手握鼠标按需点击最左侧的多选框，是非常别扭的体验。
还有一个需要注意的细节，就是当多选和展开下级列表共同出现的时候，选框和展开图标的排列。
通常一个数据行第一列的内容，应该是整行逻辑层级最高的元素。如果子数据行是被独立出来需要单选，那么展开图标就要放到选择前面。如果选择数据包含了该行和所有子行，那么选择就应该在展开图标前面。 
最后，就是解决单元格的交互了。常见的单元格交互可以总结成下面这几类：
- 点击打开页面
- 点击复制内容
- 点击修改内容
- 悬浮提示说明
点击打开页面很好理解，比如单元格内的数据是链接、图片、按钮然后实现跳转或弹窗。
而复制内容，则有一些需要注意的细节。表格中有一些数据是没有实际阅读意义的，它的存在就是用来做特定的校对或者是复制出去，比如 ID 号、哈希值、订单号等。
常规的做法是直接在右侧添加一个复制图标，但对于一些偏复杂的表格来说，所有可复制的单元格都加复制图标是非常影响浏览体验的。
所以，我的建议是都是默认隐藏复制图标，只有当鼠标移动到对应单元格的时候会显示。同时，这个图标可以覆盖到数据上层，因为既然鼠标移动过来为了复制，那么数据被遮挡在这阶段自然无关紧要，为整体页面预留空间
这样的操作按钮隐藏浮现方式，也适用于单元格修改的操作。但是，和复制不同，单元格信息编辑通常是编辑文本信息，还有后续的操作步骤。
如果点击进行文本编辑，那么建议在该表格打开一个新的输入浮窗，且浮窗内输入框文本和原来文本位置持平实现顺畅的步骤转换。
同时建议，为了防止误操作，尽量增加确定、取消按钮，防止误操作覆盖原有数据且无法撤销。
最后就是单元格的悬浮提示了。B 端控件中的气泡框就是用来做提示的控件，但它只是手段。为什么需要悬浮提示，提示什么内容是我们需要考虑的。
对于及其复杂的表格来说，往往是没办法支持所有数据都完整展示的，我们会在使用省略号对它进行截断。但截断不意味着用户完全不需要在表格查看到完整的信息。
所以，就可以通过气泡的做法，将信息呈现给用户。而呈现过程中，尽量确保鼠标可以移动到气泡上复制里面的文字内容（和全部复制不一样），而不是鼠标移走就直接关闭消失。
以上就是关于表格设计的全部说明了，作为 B 端设计最重要的模块之一，希望大家可以学以致用。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
● 京东金融 App 首页三大改版
3.x 版本到马上上线的 4.x 版本，公司的战略方向以及产品运营方向都在不断的变化（有接触过京东金融 App 的人都知道视觉变化很大）。作为公司的移动端产品，既要满足用户体验和需求，又要满足内部业务的扩展。所以我们要不断优化各种布局和细节，把用户体验和内部需求做到最好。
3.X 版本是我接首页优化的第一个版本。改版期间我们经历了很多，除了本身业务以外，更重要的是我们发现之前首页有很多问题。其实优化产品最基本的方法就是发现了一些问题，然后去解决这些问题。问题可能是产品问题、业务需求扩展、运营需求满足，最后才是体验和视觉。这些问题能得到解决产品就能得到优化。
以账户为中心是当时产品的主要方向，整体都在强调财富管理。所以之前的界面在账户为主和业务扩展上都存在很大问题，一是业务拓展存在局限性，二是账户感不强。
经过一大堆方案和设计图的轰炸，最终确定了大的方向，突出理财金额和业务和信贷业务。把一些数字突出放大，让用户打开产品既能看到自己想看到的东西。账户感的体现我们把数字和一些文字说明当成首屏最主要的东西，少一些运营，少一些 banner 。就像是在银行打出的纸质账户信息，上面很少会出现广告。
▲ 还是之前的方法，经过上线一段的时间去发现问题。随着业务和功能的增多，原来的布局已支撑不了公司方向的支持这是之一。之前的视觉也有一些缺陷，进入 App 整体看上去没有重点的，纯白色很干净但是也没有能跳出来吸引眼球的东西，也不能把重要业务区别与其他业务。
这次增加了一些产品本身频次的功能，如扫一扫、签到、每天领券等。还有怎么样能突出重点业务的展示，让用户在视觉局部上有所重点。业务的扩展性通过左右横滑来实现。
▲ 怎么样能把多量的业务，重新布局到有限的界面里，而且不能降低用户的使用体验，是我们这一版要解决的问题。就是化繁为简。
这次我们把业务场景划分成「赚钱」「花钱」「借钱」，相对应是「理财」「白条购物」「现金借贷」。使用三个Tab 签和最简单的布局方式来排版。用户理解相对也会变的容易，界面整体看起来也简单明了。
首页的改版看似简单，其实背后有很多的付出。不断的优化讨论、不断的视觉方案，我们不断在寻找新的突破，希望能让各个方面都达到最大效能。
● 理财日历
「理财日历」是整合用户关于所有金融业务的，按照时间线索智能提醒和自动完成的一款产品。
· 产品目标：帮助用户记录金融事件和跟钱相关的事件，例如理财到期、白条还款事件、生活缴费事件等等。一条 时间线可以把用户所有的事件联系起来的。让用户把时间用在更重要的事情上。
· 产品关键性词语：时间、自动记录、提醒、设置自动完成
当我们进入 App 时，需要进行很多不同的操作，进入到不同的业务线页面才能完成我想要做的事情。这时整合业务聚合内容就变的很重要。需要有一个平台把跟用户强相关的金融事项和其他事项整合，这样就不用花费很多时间来处理各种事件。
日历是一个强时间线的用户固有思想形态，我们需要把除了基础的时间、记录事件和日常提醒功能做好外，还要让用户习惯这里面有跟我理财相关的事项。针对使用产品用户的特征，在视觉布局上不能难以接受，日历主要的时间、每天事项、后续事项查询和增加事项都要合理排布。
为了增加日历的整体氛围，除了时间的排布，我们为每一个月和每一个节气增加了插画。每一条信息的分类都用 icon 表示，突出强弱，增加氛围。
日历添加事项和设置页面，以进度的感觉让用户去更好的完成事项的设置。推荐事项也是用户最常用的、最容易跟时间所对应的事项。
日历的分享模块是很重要的一个细节，我们希望它能更好的去传达这是一款有温度的产品。它也是对外发声的一个利器。
怎么样才能激发用户分享的欲望呢，用户打开界面的分享动机是什么？我们知道用户分享有几点：有用的、有趣的、相互比较、用户认同等等。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：程大专 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
现如今随着设备尺寸的多种多样，产品在设计过程中需要适配到更多尺寸，布局方案与栅格系统的搭配使用，可以很好的做到跨平台跨尺寸适配，极大的提升设计效率。之前有小伙伴分享过适配选型的文章中也提到过栅格，大家可以回顾一下【Web产品的适配设计选型】。
其实，绝大多数的设计师都知道栅格很重要，市面上很多企业级系统也都在用栅格系统去规范化信息内容的排版布局，但很多设计师直接面对结论大多是一知半解，自己做设计时有些无从下手。
作者浏览了大量文章结合工作中的经验总结分享给大家，希望能帮助理解栅格系统的本质，并能举一反三应用在产品设计中，首先从基础的栅格系统解析开始吧。
最早的栅格概念，来源于平面设计中的“网格”，早在1692年，新登基的法国国王路易十四不满于法国当时印刷水平，命人成立了管理印刷的皇家特别委员会。旨在设计出科学的，合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的排版，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。再后来，20世纪初，平面设计师们发现通过维持视觉秩序，能使版面更加清晰有效地传递信息，由此便逐渐演变出一种平面设计的方法，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师Josef Müller-Brockmann(约瑟夫·米勒-布罗克曼)所著的《平面设计中的网格系统》一书，自1961年出版以来畅销至今，对设计界有着深远的影响。史称Swiss Typography Movement (瑞士新浪潮平面设计运动)，后来成为全球风靡的International Typographic Style (国际主义设计风格) 。
简单来说：栅格是通过规则的网格阵列，形成稳定的基础框架，来规范界面中模块的布局与信息元素的分布，辅助设计师组织信息的工具。前面讲到UI设计中常用的栅格系统是从平面网格系统中发展而来，栅格与网格的本质其实是相通的。那么有同学会问，两者区别在哪呢？平面设计中【网格】应用的媒介一般为固定的纸张规格，宽度和高度都是固定的，网格的划分方式是一个个等分的方格。UI设计中【栅格】宽度受设备宽度变化而变化，高度由内容多少来决定。因此设计时只需制定纵向的分割规则，以规范纵轴方向内容的对齐、间隔等元素的排布，这也是我们看到栅格往往都是一列一列呈现的原因。
市面上各系统对于栅格的名词描述各有不同，新手往往会看的越多，越迷惑，其实大可不必纠结具体叫法上的细微差异，万变不离其宗，理解其本质表达的意思和栅格的结构原则即可，下面会对这些基础名词进行一些解释。
网格（Gird）的基本构成就是单元格，由格子组成网，形成网格。最小单元格是界面的单位基础，所有界面元素都按照这个基础单位布局分布，它对于创造性的决策具有重要的指导意义。
通常，我们利用 8 作为最小单元格建立网格。
使用 8 的倍数来定义模块的间距与元素的尺寸。
那么为什么是8，而不是别的数字？原因如下：
a.偶数思维：8作为偶数，能适应市面上绝大多数设备屏幕，更为普适。在输出各种倍图时也能保证尺寸不出现奇数以及0.5、0.75等次像素的出现（iOS导出1、2、3倍图，Android导出1、1.5、2、3、4倍图均为偶数）。
b.规律性：所有元素以8像素为步进单位，利用8或8的倍数规范元素和间距大小，（例如使用4、8、16、24、32等和8具有规律关系的数字）有规可循。
c.节奏感：相比于6、10 等数字，以8为单位，在视觉感受上既不显得过于琐碎，也不会因为间隔太大而显得内容分散，更容易保证页面效果的协调性。
d.目前市面上众多开源代码也都以8的倍数作为默认设计大小，可行性已经得到多轮过验证，设计师在与开发对接过程中对页面有较为统一的理解，有效降低合作成本，在设计还原度上也更有保障。
划重点：注意这里给的是建议尺寸，最小单位的制定还需要结合具体的使用场景来决定，我们以解决问题为最终目的。
列（Column）的作用通常是用来对齐内容，列也是栅格的数量单位，大家可以理解设置栅格数量就是设置列的数量，如 12 栅格就有 12 列、24 栅格就有 24 个列，通过控制列数，可控制界面排版的呼吸节奏，列数越多，内容排布可以越精细，也容易分割的太细碎，反之列数越少，内容排布也越容易稀疏松散。
理解了列，再来说水槽（Gutter），水槽就是列于列之间的分隔间距，这里水槽的作用是帮助区块内容做分隔，需要注意，水槽内不可放置任何板块内容。
水槽宽度在一定程度也会对界面的风格有影响，水槽越大，留白越多呼吸感越好，适合一些轻松的内容浏览类页面展示，相反水槽越小，留白小内容紧凑，适合一些严谨的工具型面板类内容展示，各有利弊，大家可根据设计目标权衡设计策略。
边距（Margin）有时候也会被叫安全边距，是指设计内容距离屏幕边缘的距离，顾名思义，安全边距内是禁止放内容的，可以类比为平面设计里的出血概念，主要用来控制屏幕核心内容的展示边界。
边距值越小，界面核心内容的有效利用空间越大，布局相对来说会比较宽松，相反，边距值越大，两边留白大呼吸感强，但有效利用区域相对小，内容排布相对更紧凑，也可能会容易拥挤。这里建议界面的边距可以根据屏幕尺寸做适配，通过断点响应变化，这样可以更好的保证在不同屏幕上界面呼吸节奏都相对舒适。
栅格总宽（Container）就是指页面栅格系统的总宽度，即所有列宽加水槽宽度加安全边距的总和。
建立好基础栅格之后，我们可以根据内容去定义一块内容占用几个列的宽度，我们把这个区域理解为容器盒子，容器用来集合下级组件，也可以是对文字、图片、按钮等多个复杂元素的集合，按照页面结构可以由小到大依次从组件 – 容器 – 模块 – 页面 – 场景进行组合拼装最终形成设计方案。
定义栅格系统之前，我们先了解熟悉下计算公式
如果你已经理解了前面的栅格要素的作用和用法，那么接下来就可以按照以下步骤在自己的画板上创建栅格系统。
注意栅格区域不一定是画布的全部区域，我们可以先将页面按照功能模块划分为全局控制层、内容层、背景层、临时层。通常我们大多是对内容层进行栅格化。
通常web端常用的三种布局如下图所示，建议按照实际使用场景灵活的选择布局形式后，再确定需要栅格化的区域。
当我们遇到一个wed端的内容浏览类网站，一般会采用上下布局，通常会基于 1920 或 1440 尺寸作为设计稿宽度，但由于需要适配主流尺寸中的最小尺寸，核心内容展示会控制在 1024（这里不是绝对值，不同产品根据实际情况数字会有上下浮动），其他空白区域即为安全边距，这是web网页中常见的一种适配方案。
12栅格和24栅格是目前比较常见的列数结构。选择使用哪种栅格结构，取决于产品对设计的要求。
12栅格：当产品涉及到多平台发布，内容较为简单，单个容器盒子内信息面积较大时，可以考虑采用12栅格来兼容。
24栅格：如果当前产品发布于pc，内容较多，且功能繁杂时，则需要更灵活的栅格系统去规范信息内容的布局，这时我们可以考虑采用24栅格，国内较为主流的企业级设计系统 Ant Design采用的就是24 栅格。
前面讲到过在产品 UI 中边距（Margin）的值对视觉的呈现的影响，这里就不做过多赘述。这里科普一个叫做“Rem”的计算单位，(Rem 是开发常用的计算方式，设计和开发基于同一套原理进行设计，在协作过程中能够极大提高协作效率，并且减少维护成本），通常制定栅格系统时，我们可以用1Rem的值来定义水槽（Gutter），它的灵活最强，可作为栅格系统的基准值。而边距（Margin）的值通常就是1.5Rem 或者 2Rem。基于常用的4倍或者8倍间距系统规范，一般最为常用的基础间距为 4，8，16，24，32，48，我们可以在这些基础值里去选择匹配产品的栅格系统基准值。
通过Rem基准值，我们还可以轻松得到一套匹配的间距系统，以1Rem=16为例，可以得到以下间距系统：
掌握以上要点，即可get一套匹配产品设计要求的栅格系统。
简单来讲，在固定栅格中，页面拉伸时，元素的尺寸和间距都是固定的，页面每到一个断点尺寸，就会减少或增加最边缘的内容元素。体现到栅格上，页面宽度变化过程中未达到预设临界值时，栅格系统本身的列与水槽宽度不变，页面所有元素布局也不会有变化，直到到达临界值，栅格列数会随着浏览器宽度，增加或减少，边缘内容进行换行显示
典型案例：Dibbble、Behance
优点：
适配规则简单，实现成本低
缺点：
适用范围小，拉伸过程边距不是固定的，大多只适用于内容居中的上下布局类型产品
一个页面尽量只有一种卡片尺寸，否则边距不统一
卡片尺寸固定，在过大或者过小的屏幕尺寸上，比列容易显得不协调
流动栅格中页面边距和内容间距固定不变的，页面内容随着页面尺寸变化而变化，可以是增删边缘元素展示个数，可以是调整元素展示比例，最终效果是始终保持内容卡片横向充满屏幕可用空间，这种弹性布局能更好的适应不同分辨率体现到栅格上，页面边距和水槽宽度是固定不变的，列数在适配过程中也是固定不变的，拉伸过程中的实际列宽是通过栅格区域的百分比缩放而来，这时列的宽度就不一定最小单位的倍数了。
典型案例：百度图片、花瓣
优点：
可以兼容不同尺寸的卡片混排
页面边距也能保持一致，拉伸过程中拉伸过程中过渡平滑，不显得突兀
缺点：
页面伸缩时，不可避免的会出现卡片尺寸忽大忽小
在实际项目中，流动栅格和固定栅格的组合使用也是比较常见的做法，一些后台系统设计、工具型的界面设计会较经常使混合栅格的形式, 混合布局既有固定的内容宽度，也有流动的宽度，灵活性更高，对与内容复杂的产品十分友好
典型案例：Ant Design Pro
优点：
容器承载内容灵活性高，不同分辨率下都能达到较为理想的视觉效果
缺点：
规则复杂，实现成本高
最后再来总结下栅格系统在使用过程中一些使用要点：
1.内容区块的定义要从列开始到列结束，可以任意分割，比如 6×2、3×4、4×3。
2.水槽内禁止放置任何内容元素
3.安全边距内禁止放置任何内容元素
4.除非特意设计，否则不要在列之外区域放置元素
5.只要框架（父级）元素对齐栅格，原子组件（子级）可以不完全对齐列
6.对于栅格的区域选择，可以根据实际业务场景灵活应用，不一定非要整个画布区域
7.可以使用嵌套栅格，我们通常会用一套栅格标准来全局控制整个界面，但不乏有些产品中会出现一些典型模块的内容密度和全局栅格的匹配度不高，这种情况我们可将特定区域单独定义栅格值，嵌入到总的栅格系统中结合使用。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：沙拉 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
元宇宙的爆火让许多企业都将目光瞄准这片领域，并试图从中分一杯羹。然而值得注意的是，元宇宙不能被当作流量的工具，这种发展趋势是应当被避免的。本篇文章里，作者就元宇宙和流量的关系发表了他的看法，一起来看一下。
人们对于流量的迷恋并不仅仅只是在短时间内就可以消除的，正如人们对于不同事物的喜好，正如人们约定俗成的习惯。
对于流量，同样如此。虽然我们一直都在说流量时代行将终结，互联网时代终会过去，但是，人们对于真正造就这一切的流量却有着无法抗拒的好感。于是乎，所有的行为，所有的动作都在围绕着流量展开，纵然是那些头部的巨头亦不例外。
从某种意义上来讲，互联网巨头们对于流量的焦虑要比那些中小型的玩家要强得多。正如庞大的流量带给了互联网巨头们绝对的优势一样，一旦流量的优势不再，一切都将从头开始。
于是，我们看到了几乎所有的互联网巨头在将维持现有的流量地位，特别是维持现有的优势的流量地位当成是主要目标。有人选择用新技术，有人选择用新模式，尽管名头不同，但是，底层逻辑却是相通的。
曾经，元宇宙的出现让点燃了人们的热情，很多人认为，元宇宙将会给我们带来一个全新的时代。
没错，元宇宙的确可以给我们带来一个全新的时代。但是，如果我们仅仅只是将流量看成是元宇宙的终局，甚至将元宇宙看成是一个维持自身流量地位的工具和手段，未免有些太过短视与浅薄了。然而，正是这样一种短视和浅薄的事情，却正在元宇宙身上上演着。
很多人仅仅只是将元宇宙看成是一种营销的新方式，而他们的底层逻辑便是借助元宇宙来尽可能多地获得、激活并转化流量；很多人仅仅只是将元宇宙看成是一种工具和手段，而他们的底层逻辑便是元宇宙尽可能地维持、坚守并塑造业已形成的流量优势；很多人仅仅只是将元宇宙看成是一种概念，而他们的底层逻辑便是借助元宇宙获得资本的关注，赢得资本的青睐……
很显然，无论是以上的哪一种模式，我们都可以非常明显地看出流量在其中所扮演着的重要作用和地位。不可否认的是，哪怕是在元宇宙业已非常火爆的时候，依然加持元宇宙的概念，还是存在着巨大的机会的。
但是，如果我们仅仅只是将所谓的加持元宇宙看成是一个概念本身，抑或是仅仅只是将加持元宇宙的终极目标看成是流量，未免有些太过俗套了。
可以确定的是，元宇宙的确可以给人们带来一种完全有别于互联网的体验，很显然，这种方式的确可以激活流量，留存流量，甚至是获取流量。但是，如果我们仅仅只是将元宇宙的功能和作用局限在这个层面上，那么，元宇宙的功能和作用非但无法得到最大限度地发挥，甚至还将会把元宇宙带向死胡同里。我认为，流量之外的元宇宙，才是真正意义上的蓝海。
流量之外的元宇宙，才是我们真正应该思考和关注的地方。同互联网一样，流量之外的元宇宙，其实是一个借助元宇宙的方式和方法，对行业进行深度影响与改造的过程。在这个方面，元宇宙其实是有着自身的天然优势的。
提及元宇宙，我们首先想到的是各式各样的新技术，有大数据，有人工智能，有物联网，有区块链，可以说，元宇宙就是一个新技术的聚合体。
试想一下，如果这个新技术的复合体，仅仅只是围绕着流量这个核心，那么，它的功能和作用是无论如何都无法得到最大限度的发挥的，而且它的作用和功能也是极大地低估的。
然而，正是这个对元宇宙并无任何益处的方向，现在正在被越来越多的玩家所推崇，所加持。
无论是Meta，还是微软，甚至是其他的一些玩家，无一不是如此。当元宇宙的终极目标仅仅只是流量的时候，它仅仅只是互联网模式变换了一下技术，改变了一下门面，本质上并未真正改变以流量为终局的发展模式。
如果真的如此，那我们还不如将元宇宙时代看成是互联网时代罢了，元宇宙时代不过是一种互联网的进化罢了。或许，这才是刘慈欣之所以会对元宇宙担忧的关键所在。
我想，这才是元宇宙玩家真正应该规避的地方。对于经历了互联网时代的洗礼的人们来讲，我们应该明白仅仅只是以流量为终极追求的元宇宙将会走向何方，所以，当我们刚开始探索元宇宙的时候，就应当规避掉目前的这种发展怪圈，跳出流量的牵绊，站在更高的维度来看待与探索元宇宙的发展新方向。
将元宇宙的目光更多地投向流量之外的深海，寻找流量之外的发展新方式，开启元宇宙的新纪元，才是我们真正应该去思考和关注的地方，才是元宇宙真正能够发挥出自身效力的地方。
当元宇宙规避掉了流量的陷阱，开始将目光投向产业的蓝海，它所带来的将不再仅仅只是一种由外而内的浅层的体验上的提升，而是带来的是一种由内而外的深层次的产业和生活方式上的提升。当元宇宙有了产业的支撑，并且真正以产业来建构全新的流量运行逻辑，而不是以营销和体验啦建构全新的流量运行逻辑的时候，元宇宙才算是真正进入到了属于它的时代。
元宇宙，一片热火朝天。然而，在这样一片热火朝天的背后，我们闻到的依然是熟悉的味道。所有的元宇宙玩家都在将目光聚焦在流量上，全然没有顾及到流量之外的领域。当元宇宙的功能和作用仅仅只有流量，那么，它的作用是被极大地低估的。以一种全新的视角来看待元宇宙，并且真正找到流量之外的发展新模式，或许才是元宇宙真正可以给我们带来新的想象力的关键所在。
为把握文化产业未来创新发展趋势，持续推动我国文化产业高质量发展，本文对2021年度我国文化产业“十二大”热点现象进行了梳理盘点。跟着作者一起来看看吧。
文中热点总结得到中国人民大学文化产业研究院、中国民营文化产业商会、腾讯文旅产业研究院等相关专家学者的意见指导，并得到新榜（上海看榜信息科技有限公司）对“年度文化产业热点关键词的传播力和影响力”的大数据分析支持（对阅读数、收藏数、点赞数、互动率、评论数及播放数等维度进行汇总整理）：
自2020年新冠疫情发现以来，疫情在全球快速传播，重挫了全球经济发展，对各个国家和地区造成了不同程度的影响。根据世界卫生组织的官网统计数据，截至2021年12月29日，全球累计确诊病例2.8亿例，死亡540万例。按联合国人口基金会发布的《2021世界人口状况》的全球人口75.97亿计算，全球新冠疫情单位人口感染率约为37，即全球平均每37人中有1人确诊新冠肺炎。
全球新冠疫情（截至2021年12月29日）
数据来源：世界卫生组织官网
新冠疫情对全球和全国的文化产业产生了前所未有的影响，不断改变着文化产业发展的产业逻辑和商业模式。
受疫情持续影响，2021年文化产业发展趋于缓慢，尤其是线下文化消费受到疫情严重冲击，大量企业面临业绩下滑、经营困难、人员流失等窘境。
但随着文化与科技的深度融合，疫情之下，云演出、云会展、云观影等“云经济”的产业地位不断提升，数字影视、线上社交、电子竞技、直播购物等细分领域增长迅速，进一步加快了文化产业的数字化转型升级，同时促使文化产业与科技、商业、零售、制造、服务等领域进一步融合。
在疫情防控常态化、科技不断发展、人民对美好生活需求日益提高的背景下，数字技术发展深刻地改变了人们的娱乐方式，大众消费数字文化产品和服务的频次越来越高，尤其是年轻人对于应用最新技术、新鲜度和体验感强、极具创意和时尚潮流的数字产品青睐有加。
随着虚拟现实、大数据、区块链、全息成像、裸眼3D、人工智能等高新技术的加速应用，数字文化产业取得了爆发式增长，行业内生动力不断增强。
根据西方发达国家经验，文化消费占消费总量比重约30%。根据2019年的数据，我国人均文化娱乐消费支出仅占消费支出的4%，可见数字文化庞大的消费市场刚刚起步，未来有非常广阔的发展空间。
2021年作为“十四五”开局之年，中央一号文件《中共中央 国务院关于全面推进乡村振兴加快农业农村现代化的意见》发布，国家乡村振兴局正式挂牌成立，国家农村工作的重心从精准扶贫全面转向乡村振兴，而乡村振兴的重中之重在于产业振兴。
我国乡村拥有丰富的历史文化名镇（村）、传统村落、民族村寨、农业文化遗产、非物质文化遗产等文化和旅游资源，文化振兴乡村成为促进乡村新产业、新业态提质升级发展的重要抓手。
“十四五”期间，文化产业将进一步融入国民经济主战场，尤其在服务乡村振兴等国家重大战略的落地方面将发挥更为重要的支撑和带动作用。
“元宇宙”来自于英文Metaverse，最早起源自美国小说家Neal Stephenson在1992年出版的科幻作品《雪崩》，总体是指一个可以映射现实世界、又独立于现实世界的虚拟空间，现实中的人可以使用数字身份在“元宇宙”中娱乐、社交、学习和工作等。
尽管行业尚未形成最终统一的形态描述，但随着全球各大龙头企业和行业KOL入局，“元宇宙”无疑是2021年最受市场关注的热点。元宇宙将打破现实和虚拟世界的边界，在游戏、社交、娱乐、教育、内容、消费等领域有着广泛的应用前景，市场普遍认为其将带来互联网、文化等系列产业商业模式的升级和市场空间的巨大成长。
彭博行业研究预计元宇宙市场规模将在2024年达到 8000亿美元，普华永道预计元宇宙相关经济市场规模有望从2020年的500万美元增至2030年的15000亿美元，2020-2030年间的CAGR高达253%。
Roblox是一个诞生于美国的UGC游戏平台，于2021年3月在纽交所上市，成为“元宇宙”概念第一股，上市后一直受到全球市场的高度关注。2021年10月29日，扎克伯格宣布Facebook 正式改名为 Meta，以展现公司对元宇宙的重视与投入程度，更掀起了全球范围对元宇宙的进一步热议。中国各大龙头企业紧随其后，纷纷入局。
元宇宙的形式及所需要素；资料来源：中信证券《元宇宙的未来猜想和投资机遇》
元宇宙的市场规模预测；数据来源：民生证券《元宇宙核心六问六答，如何看待它就是下一代互联网》
NFT（ Non-Fungible Tokens 的缩写）意为非同质化货币，是可锚定现实物品的数字凭证，由于其独一无二、稀缺、不可分割或复制等特点，可用来代表虚拟收藏品、游戏内资产、虚拟资产、数字艺术品、房地产等各种资产，与区块链同被视为元宇宙的两大核心底层支撑。
2021年，NFT进入爆发增长阶段，目前最大的应用领域是数字艺术和NFT游戏市场。
长期来看，各个行业领域都可能实现NFT形式的资产流通，尤其是在元宇宙概念中NFT将扮演重要角色，未来有望成为文化产业信用评级和资产评估难题的解决途径。
2021年3月，数字艺术家 Beeple 的艺术品《Everydays:The First 5000 Days》在英国拍卖平台佳士得以6934万美元卖出，成为当时价格最贵的NFT艺术品。2021年12月，被粉丝誉为“NFT界毕加索”的艺术家Pak的项目“Merge”（“吞并”）在NFT交易平台Nifty Gateway向公众公开发售，48小时后9180万美元的成交价格超过杰夫·昆斯拍价9110万美元的雕塑《兔子》，在“全球最贵在世艺术家”排行榜上排名第一。
《EVERYDAYS: THE FIRST 5000 DAYS》（左图为JPG集合，右图为其中一幅）
“Merge”（“吞并”）
在国家乡村振兴战略指导下，各地依托政府扶持、社会机构跟进和资源资本投入，积极推进文化振兴乡村，带动了乡村文化旅游市场供需两旺、快速发展，而短视频、电商直播等业态更是在全社会范围内加速了乡村文化的推广传播。
在疫情常态化防控的大背景下，更多客群的关注度也转向了人口密集度更低的乡村消费场景，山水田园、传统村落、非遗民俗、民宿美食、康养休闲等乡村文旅体验迎来更广阔的市场发展空间。
2021年2月25日国家乡村振兴局正式挂牌
表：2021年上半年抖音平台“乡村”内容数据
图：企业侧对乡村文旅市场前景看好情况
数据来源：中国旅游研究院&巨量引擎城市研究院《文化赋能旅游，旅游振兴乡村》
习近平总书记在考察马栏山视频文创产业园的讲话中指出：“文化和科技融合，既催生了新的文化业态、延伸了文化产业链，又集聚了大量创新人才，是朝阳产业，大有前途。”在新发展阶段，文化与科技深度融合发展的数字文化显示出更为重要的战略意义。
2021年，人工智能、云计算、大数据等数字技术加速发展，5G、数据中心等文化新基建不断落地，文化产业与新一代信息技术深度融合，不断催生智慧文旅体、文化装备制造、网络视听内容、传统文化数字化、IP策划运营、虚拟文化产业多种新业态和新场景，持续深化文化与旅游等相关产业的跨界融合，不断加速我国文化产业数字化的转型升级进程。
文化科技融合的代表性场景和相关技术融合水平分析
资料来源：《 2021文化科技融合报告》——腾讯研究院，清华大学文化创意发展研究院
习近平总书记指出：“让收藏在博物馆里的文物、陈列在广阔大地上的遗产、书写在古籍里的文字都活起来。”在对传统文化的创造性转化和创新性发展理念的指导下，AR/VR、短视频、直播电商等技术不断助力传统文化“活化”，馆藏文物、古典书籍、非遗传承等融入现代生活和消费，实现了传统文化的“场景化”、“生活化”和“市场化”，不断赋能传统文化企业的生产模式和商业模式。
传统文化视频评论热词
图片来源：字节跳动平台责任研究中心《短视频与传统文化研究报告》
2021年，“沉睡三千年，一醒惊天下”的三星堆遗址再惊天下。考古工作者在三星堆遗址新发现6座三星堆文化“祭祀坑”，并出土数百余件黄金面具等重要文物，“三星堆遗址考古新发现”连续霸占社交媒体的数条热搜，而融合了变脸、茶文化、蜀绣等川蜀文化元素、极具世俗烟火市井气息的三星堆“川蜀小堆”盲盒，以及“三星堆摇滚盲盒”也引发了全民的持续关注。
“IP蛋炒饭”公众号撰文称：“这些4000年前的出土文物，不仅极其贴合当代人的审美，甚至比当代艺术玩得更拽、更酷，洋溢着现代主义的的精神、和梦境般的想象力，将人性的感觉放大到极致。三星堆有着现代艺术特有的‘想象力’和‘百变’魅力基因，使之成为了传统文化中的潮流巨星。”
三星堆最新出土金面具
三星堆摇滚盲盒
三星堆“川蜀小堆”盲盒
图源：“IP蛋炒饭”公众号《2021-IP年度榜》
虚拟偶像通过绘画、音乐、动画、CG等形式制作，在虚拟场景或现实场景进行演艺、工作等活动。
2021年，随着中国二次元用户数量持续增加、数字技术不断进步，初音未来、洛天依、一禅小和尚、美妆柳夜熙等虚拟偶像的受众持续提升，在直播带货、虚拟演唱会、虚拟偶像选秀等场景中不断应用，并从互联网、传媒等科技含量高的行业向信息技术密度低的地产等传统行业推进，变现路径向多元化发展，商业价值持续提升，市场规模持续扩大。
2021年12月，万科集团董事会主席郁亮在微信朋友圈发消息称：“祝贺‘崔筱盼’获得了2021年万科总部优秀新人奖，她催办的预付应收/逾期单据核销率达到91.44%。”据报道，职场女性崔筱盼，是一名在万科集团财务部悄悄工作了十个月的虚拟人，能够提供7X24小时的服务，替代大多数的人力。
万科总部优秀新人奖获得者——“虚拟人”崔筱盼
疫情防控常态化背景下，直播电商进一步成为地方政府、各大机构和品牌吸引消费者不可或缺的核心手段，在更好地满足消费者需求、推动经济高质量发展等方面发挥了积极作用。
据Fastdata极数的数据，仅2021上半年，中国直播电商交易额超万亿元，同比增长超两倍。随着行业竞争的加剧、政府管理的规范及用户认知的成熟，直播电商步入下半场发展格局，将进入精细化、规范化的运营管理时代，迎来公平竞争的市场环境。
直播电商用户渗透率
直播电商竞争格局
数据来源：Fastdata极数《2021年中国直播电商行业报告》
2021年10月20日淘宝主播销售榜显示，当日“双十一”预售第一天，李佳琦直播销售额达到106.53亿元，薇娅直播销售额为82.52亿元，彰显了电商直播驱动经济发展的超强动力。
2021年12月20日，浙江省杭州市税务局稽查局查明，薇娅在2019年至2020年期间，通过隐匿个人收入、虚构业务转换收入性质虚假申报等方式偷逃税款6.43亿元，其他少缴税款0.6亿元，依法追缴税款、加收滞纳金并处罚款共计13.41亿元。
目前，我国成为全球范围内拥有核心电竞爱好者最多的区域，是全球极具电竞商业价值的市场。在新兴技术推动和国家政策支持下，世界级电竞赛事在中国举办以及EDG夺冠，电竞直播更加火爆，电竞产业彻底出圈，带动用户规模迅速增长。
未来，我国电竞市场规模还将持续稳步上升，进一步带动游戏等周边产业发展。
数据来源：《银河证券：电竞行业深度报告——产业发展正当时，电竞夺冠承势起》
2021年《英雄联盟》全球总决赛在冰岛首都雷克雅未克落幕，来自中国LPL赛区的EDG战队与卫冕冠军、韩国LCK赛区的DK战队打满五局，最终以总比赛3-2战胜对手，夺得队史首个冠军。“EDG夺冠”在国内外的社交平台上引发巨大反响，热浪席卷整个社交媒体，尤其引得以多所高校为代表的中国粉丝沸腾狂欢。
近年来，密室逃脱、剧本杀、鬼屋、以狼人杀为代表的桌游等线下沉浸式娱乐场景，因其更强的娱乐体验和社交属性、更高的客单价及更快的内容迭代等特点，在综艺节目带动下逐渐大众化，带动全产业链条快速发展。在全息投影、声光电等技术加持下，店铺数量和行业规模大幅增长，但行业整体尚处于分散阶段。虽然2021年线下娱乐场所因疫情影响受到重挫，沉浸式娱乐依然代表着未来线下的重点发展方向。
2016年3月，芒果TV推出大型实景明星推理综艺秀《明星大侦探第一季》，主打“烧脑剧情”和“悬疑推理”的综艺模式，即节目每期以某一特定故事为背景，玩家在案发现场搜证、集中推理，并向侦探玩家阐述不在场证明，最后完成指认凶手的过程。根据国盛证券统计数据，截至2021年《明星大侦探》已更新至第六季，累计播放量达 41.4 亿。
数据来源：艾媒咨询《2021年中国剧本杀行业用户研究及标杆企业案例分析报告》
根据中信证券《基于B站热度的Z世代消费指数构建》一文中的定义：“Z 世代”是指1995-2009 年出生于世纪之交的“网生一代”，人口规模约2.64亿，占我国总人口比重约19%。
Z世代的成长过程伴随着我国经济建设和城镇化的突飞猛进，以及互联网尤其是移动互联网的高速发展，因此展现出全新的世代特征。
随着首批Z时代逐渐步入职场成为消费主体，文娱、服饰、美妆、食饮、社服、家电等多个行业都迎来“亚文化”带来的全新发展机遇。盲盒潮玩、国产服饰、轻奢国货、新兴餐饮、硬核科技等不同赛道，凭借年轻消费群体的需求和偏好不断“破圈”，成为文化产业的新消费潮流。
偏好中国本土化国潮、国风元素 Z 世代占比
数据来源：中信证券《基于B站热度的Z世代消费指数构建》
区别于传统的大型、重型文娱，“碎片化内容消费”、“时间灵活自由”的快文娱，以轻、快、省时观看的各种短视频、微漫画、轻小说、轻游戏等内容为主。
根据芒果TV数据调查报告，Z世代偏好信息量密集、剧情推进紧凑、内涵丰富等有品质的内容，有拖进度、提速看等消费特征，更愿意为兴趣付费，在Z世代领军的文娱消费环境下快文娱成为消费主流。
数据来源：芒果TV《95后&00后视频用户行为研究》
私域流量是指沉淀在品牌或个人渠道、可随时反复触达、实现一对一精准运营的用户流量。
随着互联网渗透率登顶，流量红利消退，公域流量获客成本昂贵，各大平台抽佣比率居高不下，商家逐步将经营重点从公域流量转向为用户全生命周期价值服务的私域流量已经成为必然趋势，以微信、小程序、视频号、企业号、社群、直播等为代表的私域流量的运营能力成为企业及品牌的新核心竞争力。
私域流量 VS 公域流量
数据来源：光大证券《交还电商的舞台和话筒给商家——私域流量行业深度系列报告》
2021年品牌私域营销布局情况
数据来源：亿邦动力研究院《2021垂直类电商私域化洞察报告》
2021年1月，微信在公开课Pro上发布数据称：2020年度小程序电商GMV在2019年8000亿人民币的基数上，整体交易额继续增长100%，人均交易金额提升了67%。
2021年4月腾讯营销洞察（TMI）和波士顿咨询（BCG）发布的《2020社交零售白皮书》中指出：在所有消费者中，有79%过去一年曾在私域消费；其中72%消费者在私域中购买客单价超过100元；购买后，70%消费者表示愿意在私域进行复购；80%消费者愿意在私域进行分享；其中48%消费者至少每月购买1次。以上多项增长数据意味着私域流量带来的市场规模还将继续扩大。
文章来源：人人都是产品经理 作者：新榜
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如今随着互联网不断发展，各产品的数据体量都变得很大，数据分析体系就发挥了巨大的作用；搭建一个完整有效的数据分析体系，可以提高你的工作效率以及准确度。本文将整个体系概括为：一纵一横。推荐对搭建数据分析体系感兴趣的用户阅读。
新年伊始，很多公司都在制定年度计划，有同学会问：数据分析的计划该怎么定呢？
今天给大家一个最全面的数据分析体系，涵盖了公司级全部场景。大家可以对着参照，看自己的发力点在哪里。
整个体系可以概括为：一纵一横。话不多说，上干货！
问一个简单而关键的问题：数据分析，到底有啥用？
答：站在业务的角度，数据分析有6大用处
这六个场景，贯穿业务工作全过程，最能体现数据分析的价值。因此，当我们思考数据分析可以做什么的时候，可以先思考这六个场景，目前的工作满足了多少需求？还有哪些是可以做的（如下图）？
注意：数据并非不可替代！这6步即使没有数据，业务方也能做。
比如，经典的场景是：
最有可能，只有过程监控，与发现问题以后的原因分析，是甩给数据分析做的。
但这样的话，工作就太被动了。不清楚目标，不清楚业务基础走势，不清楚方法背后业务逻辑，光看一个数字是很难分析出原因的。
因此相当多数据部门退化成只能监控个数据。甚至只能提个数。
这种被动局面，是在年初定规划的时候要尽力避免的。此时不争，更待何时！
此时可以：
这样做，就得认真研究企业内各部门分工情况，这就涉及到“一横”概念。
问一个简单的问题：是否各个部门对数据重视程度一样？
答：当然不一样！
从部门职责上看，部门可以分为四大类：
典型如：总裁办、战略发展部、财务部。
这些部门直接与公司最高层沟通，很多重大的发展计划，年度KPI目标，经营任务，都是这些部门参与制定的。这些部门很重视数据！
因为所有的目标、任务、计划都得量化。他们常见的问题是：知其然，不知其所以然，以财务部尤甚。算账算得很精明，可对于业务细节不甚了解。
此时，想要和这些部门交好，可以从提供基础数据突破。
在提供数据的同时，主动帮他们梳理关键业务流程，清晰常规的业务基线，补齐他们在业务理解上的短板。这样能有更多机会合作。（如下图）。
典型如：销售、投放、增长部门。
这些部门负担主要的收入任务，是业绩、利润的主要来源。但是，这些部门一般都不重视数据。能看到任务目标、完成率就差不多了。
他们更喜欢看案例拆解，看操作指南，看具体做法。总之，手里用得上的才是好东西。
此时，想要和这些部门交好，可以从工具入手。
不要整复杂的报表，而是根据看表人关心的内容，分层级提供数据。越是基层的，给看的数据越少，最好只留关键KPI。
功能上，和CRM等工具打通，在提供数据的同时，直接提供可操作功能，这样才受一线欢迎（如下图）。
典型如采购、研发、设计。
这些部门基本都在消耗成本，很难直接见成效，万一做不好了引发用户讨厌、产品积压、库存不足，还会影响销量……而且，这些部门又受到销售、营销营销，很难独善其身。
这时候要区别对待：
对于采购、生产、供应这种容易产生硬损失的部门，重点做好数据滚动预测与数据监控。
对于来自上游供给、下游需求、大促活动等影响因素及时收集，结合供给进度与库存情况，预报可能存在的积压/缺货问题（如下图）。
对于研发、设计、产品这种容易产生软损失的部门，重点最好测试平台和测试服务。用常规监测发现问题，用好的测试来检验改善效果（如下图）。
典型如营销、运营部门。这些部门很喜欢看数据，且其工作效果，是叠加在销售基础上产生的，很难观察。因此做分析的时候特别纠结。好在，他们的工作多是项目制的，可以逐个攻破。
常见的项目，包括：
这些在之前的文章已经有很多分享，这里就不赘述了。想洞察得深刻，想分析得到位，重点是培养业务部门的好习惯，打好数据基础。
比如：
基础工作做好了，事后大量数据可以分析。
基础工作没做好，事后分析个屁……
整体安排：分阶段，做出标杆项目。
注意：上述的工作，在业务部门那里是有先后顺序的。
清晰了业务部门行动以后，数据部门的整体安排就很清晰了：
输出的目标，以每个月都能有一个项目上线/更新为目标。这样每个季度的季报容易写，来年年度总结也就不纠结了（如下图）。
以上，就是数据部门规划的整体思路。当然每个企业具体情况不同。同学们可以量体裁衣，根据自己面对具体情况做调整。
当然，可能有同学会说：“规划这种高大上的事轮不到我，我就是一个小兵，日常都在跑数，咋办？！”
碰到这种情况，等待别人施舍肯定不是好办法。普通的日常工作，也能延伸出很多有价值的项目，这是数据分析工作的独特优势。
文章来源：人人都是产品经理 作者：接地气的陈老师
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com