如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
网页布局（layout）是 CSS 的一个重点应用。毕竟简单的样式不能总依赖前端人员。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
先说第一个属性flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
废话少说，立刻上代码，验证下。
row：
众所周知，h1和p都是块级元素，都会纵向排列，一旦采用 Flex 布局，就以x和y轴为基础排序，
column：
不但模糊了块级元素和行内元素的区别，而且左右的排序也很灵活。
row-reverse：
flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，就会换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
wrap：
虽然他换行了，但是每行的元素是不是靠的太近了
在这时候就能用到
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start：（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-between：
但是还是有点不对劲，原来没有垂直居中。
align-items属性就出来了
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
还有很多属性可以灵活的调整页面的排版，我只举例最简单的几种排版。
没有float，没有position，也没有行和块。只要知道x轴和y轴就能轻松布局。
如果想了解flex布局，可以看一下这位大佬的博客：
语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在过去的一年里 LOGO 设计行业蓬勃地发展着。对我而言，查看各大设计机构的LOGO趋势分析和报告，就像开礼物一样，因为我知道等待我的是一段独特体验。这其中有平凡到令人失望的设计作品，也有令我欢欣甚至惊喜的好作品。而这便是LOGO设计行业仍然充满活力的证据，是值得感激的恩赐。值得欣喜的是今年的设计作品依然体现着设计师的好奇心与勤勉，这激励我们向着新高度进发。你会在今年的趋势中看到往年主题的延续，但是融合和改变形成了跟为独特的设计趋势。设计师们开始采用非传统的色彩和线条，赋予新的内涵。
Logo中的图案通常以黑白配色呈现，营造一种复古感。设计师们以大量的网点元素作为构建差异的方式。粗砺的噪点、条纹以及网线铜版和木纹砖纹的调合，使logo呈现一种复古的视觉特征，这似乎与时下的高饱和渐变色彩的使用趋势背道而驰。
现代流行文化不仅改变了我们看待符号的方式，也影响了视觉设计时的优先级。随着纹理、图案、排版、摄影和插画元素在视觉品中的优先级发生变化，视觉元素愈发地被收到重视。现代品牌很多时候会被视作为是被视觉美学所推动前进，因此也会要求 LOGO 具备更强的视觉吸引力。
阴阳相生。当一种新的风格、思路，新的滤镜、插件和设计工具出现的时候，设计都会向着不同的方向演化。但是，每一个精心制作的LOGO，包括动态LOGO 你都很难把功劳归结于某一个工具或者方法，它始终是多种方法、工具和流程共同作用的结果，很难把不同的因素彻底地区分开。尝试新的事物从来都不是坏事，但是我仍然寄希望于独特的技术和方法，希望在设计里留下自己的痕迹。
我需要再一次重申的是，潮流并非是趋势所造就的。与时尚领域不同的是，设计趋势不会随着文化变迁而突然爆火，相反，它在设计维度上，一直是向着两个方向延伸，触摸过去也面向未来。更准确的来说，是我们一直从过去的天才构想中汲取经验，同时还在不断开辟走向未来的路。
毫无疑问，今年流行的主题中出现了很多时下流行的元素和主题，包括无人机、蘑菇、刺猬、鹈鹕、蛇、华夫饼、针、灯泡、三眼虎和蒸汽波。虽然这些流行元素只是暂时的，但许多作品仍然制作精美。尽管这种流行元素的风潮最终会落幕，我还是要向它们致敬。
我仍然要感谢 LogoLounge 社区的2万多名来自世界各地的设计师，他们为这份报告提供了大量素材。在本报告发布时，我们的网站拥有超过30万个的logo设计师，我们可以与会员一起继续观察他们的职业发展趋势。能够与他们并肩工作，支持我们热爱的这项事业，是一种荣幸。
老实说，要求一个老练的LOGO 设计师在 LOGO 当中加入流行的阴影效果，这仿佛是对设计师灵活的创造力进行质疑。今年我们的团队精心设计了一种新的方式来为他们的作品加入阴影——因为阴影效果本来就不止一种，而还需要兼顾到 LOGO 本身的可用性。我们避开短暂流行的渐变色，用一连串同心的点和线来呈现光影动态，以这种新的方式，比传统阴影更具视觉张力，更重要的是，它可以更自然地输出纯矢量的单色 LOGO 。
在过去的几年里，我们看到圆点和线混合在一起，展示了不同元素的融合。通常，这的设计方案会以同心圆为中心，其他元素彼此平行，但不会完全合并到一起。通过将这些元素彼此融合到一起，让它们和主体元素融合、交汇，在负空间的帮助下，设计师以这种方式让消费者在头脑中自觉将图像填充完整。比如咖啡杯中的几个点，以及用点状表示的兔子尾巴。
有人会因为盘子里的食物混在一起而崩溃，也有人对此毫不介意。所以，有的设计师将元素之间的各种元素之间的界限给先打破了，通过重叠来创造层次感，互相堆叠的元素会呈现出一种模糊的效果。而其中大多数 Logo 都呈现出了一种引人入胜的信息，巧妙地吸引了人们的关注。当然，也许大多数人会选择创建一个对比明显、信息清晰的LOGO。
这种堆叠式的LOGO设计，使用两个图层足矣，三个图层也勉强可以驾驭，但四个图层就太过了。如果背景无法辨认，发挥作用的就只有最顶层的视觉元素。上图所示的这些logo融合了类似于徽章和插画的排版，正如这些例子所示，这些源自复古的设计能够焕发出全新的力量。
阴影作为logo设计中的一个元素，在很多方面都是至关重要的。我用了一个完整章节来讨论阴影的重要性。阴影暗示着光的方向，更确切地说，它可以显示维度和空间关系。一条垂直线和一条水平线，再加上一点阴影，就可以确定谁在平面上方了。画一匹色调均匀的马，那么马的两条后腿就应该处理得暗一点。
有时候，我们作为设计师会受限于自己的技法，这是很正常的。在这些标志当中，包含着一个非常微妙的小阴影，虽然在 Trustpilot star 这个案例中，看起来确实做了比较清晰的分离处理，但我仍然想知道，如果按比例缩小，这种对比是否足够明显发挥作用。我的建议是，如果需要效果，就要尽量使得效果可以明显地呈现，而不是要佩戴老花镜才能看得清楚。但是毋庸置疑，有很多设计师是经过审慎考虑之后，才选择了这样的方案。
热情饱满的新生代设计师正在重塑潮流。在数字时代之前，想要在插画中加入条纹、圆点、中间色调、木纹或其他异国情调的半调效果，首先需要去当地的艺术用品商店逛逛。如今如果你想要实现半调效果，你只需花费很少的钱就可以将其应用到你的设计当中。复古风的设计书籍中充斥着各种各样的标志，展示着一些非常漂亮的半调式的渐变效果，这会让设计师们对这种相对古老却陌生的技术感到好奇。
这一趋势是非常典型的70年代复古，不仅在风格上，而且在色调上也有体现。这些带来半调效果的斜条纹线所创造的效果接近于40%的黑色。这样的 LOGO 设计能够让用户一秒回到以往那个美好的时代，不那么机器制造的感觉。但是它仍然存在缺陷，就是当它缩小的时候，斜条纹会模糊，最终会呈现出一片灰色的效果。
在半调和高亮式的设计技法之间，波点元素还有一席之地。这些超大的圆点其实也算得上是半调的一种形态，它们实际上算是图标中的一个组成元素，而不仅仅是背景。从这些LOGO的设计案例当中，我们可以看到，这些圆点近似于编织的篮子或桃子的红晕，图案并不仅仅是用来表达色调的，它还暗含光影和纹理。
使用更大胆图案元素，已经是一个公认有效设计策略，打破紧张的平面色调和布局，并创造视觉吸引力，让元素更醒目。作为一种从在渐变和失真之间寻求平衡感的设计，波点使得设计师可以以有限的颜色，简单而有趣的矢量圆点来吸引消费者。
人们很容易认为，在吸引人们注意的领域里没有什么新技巧。猿类拍打胸部，孔雀展开羽毛，人类则在社交媒体上发帖。还有一小部分身份设计师会选择高亮效果来修饰他们的设计——至少这是今年最引人注目的趋势之一。
我们通常认为黑白配色的 logo 是在添加高光之前展示给客户的。当下流行的高亮色调有淡紫色，日光粉，和冰蓝色。抛开所有的视觉趣味性不谈，设计师们认识到，正是色彩的火花让这些logo摆脱了潜在的平庸性。
过去两年之间，设计主题已然延续到简化设计，以及 Logo的纯粹化。这种对前人作品结构的致敬，同样体现着设计师的创造性，因为他们想出的解决方案是基于重新排列几何元素而来的。每当你听到有人表示相信一切都是以前做过的，只要提醒他们，作家和音乐家一直在重新排列了一些笔记或字母，而且新的音乐和书籍，比logo 要多的多，但是灵感之泉却从未干涸。这大概也是以四分之一圆微代表的几何元素，开始大规模地出现。
今年，四等分的圆圈元素——或者说扇形，随处可见。大多数情况下，设计师会完全基于这个扇形来作为唯一的模块，但偶尔也会让它们与圆、半圆、正方形、三角形和其他几何形状混合在一起。即使在表达复杂的信息时，形式的纯粹性可以恰当地与之进行平衡。如果logo看起来很冗杂，那么放入元素的数量应当有所限制。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
明修栈道C和暗渡陈仓B1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
5. 按钮
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
1. 设计前端一家亲
2. 书籍推荐
3. 文章和作品推荐
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
虎牙直播是以游戏直播为主的弹幕式互动直播平台，累计注册用户2亿，提供热门游戏直播、电竞赛事直播与游戏赛事直播，手游直播等。
最近虎牙在上市一周年之际，发布了全新的公司级LOGO，也就是为虎牙母公司设计的全新企业品牌形象系统。
新logo的造型结合大写英文字母“H”和小写英文“hy”，将其演化为平行空间的两个45度对称且平行的立面图像。
文字logo上由“虎牙”和拼音“huya”两部分组成，中文“虎”字也进行了笔画的调整，将虎”与“h”笔画末端进行了切斜收尾的处理，从而来呼应新logo的平行表现形式。
不同形式组合的新logo效果
在新logo的颜色方面，选用了比较青春具有活力，且明亮的“阳光黄”与“星云紫”。
图形部分的延展也极具灵活性，灵活的视觉变化使品牌更具多样性，也同时表现虎牙在数字时代的不同场景中，所呈现的多元化和创新。
图形延展效果
再来看看，虎牙新logo应用在各种衍生产品的效果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
正确认识卡片式设计，什么是卡片、总结卡片优势、卡片正确设计知识通过设两个案例进行讲解，卡片在运用时的技法，望能帮助大家。
今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化、变化、层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题，图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
二、卡片设计优势
1.趋势
无论是大平台还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、图标 、LOGO、标题、整合到一起以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计内容上的标题 、图标、按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、缩小 、左滑、右滑，可以整模块化滑动缩放。整体效果增加了不错的视觉交互体验。
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、文字、图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解一下，顺叔随便构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。（以下图为第一版）
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
图标——界面设计最重要的元素之一。
菜心经常写关于图标的教程和感悟，可见图标设计在我日常工作中占了很大比重，所以我始终坚信能够把图标做好，也是难得的特长之一！
这里拿几个月前做的第一版小说模块图标为例（目前已经改版为2.0，等正式上线后会再次与大家分享），简单介绍下我的图标设计思路，大纲如下：
1.风格设定
2.创意脑爆
3.设计执行
1.风格设定
在开始构思之前，我们首先需要确定图标的设计风格，风格可以根据整体产品的设计语言推导，需要符合目标人群的喜好以及产品的属性定位。
虽然我们是小说模块，但还是附属于动漫产品体系之下，前期的种子用户还是产品原有的动漫人群，所以我将风格锁定在原有动漫的视觉风格之上，大家可以看下当时动漫标签栏图标的样式：
由此小说模块图标与上图保持一致，设定为“描边与色块结合”风格。
2.创意脑爆
锁定风格之后，就要构思创意了，也就是如何在这样的风格之下去表达你的内容。
这一步很关键，如何让图标不普通，大部分因素都就体现在内容表达上（因为风格其实也就那么几种），我的方法是尽量去发散核心关键词，让图标的含义标新立异，举两个这次图标脑暴的例子：
第一个，“人气”图标的脑暴路径：
这里选词有个小技巧，我会遵循两个原则，“具象”与“二层”。
首先来说具象：其实很好理解，如果词汇太抽象，你是很难表达的，比如“流行”这个词，你是很难表达的，而“火”就很具象，很容易表现。
再来说“二层”：指的就是尽量不要选择核心关键词延展出来的第一层词汇，因为这些词是大家都能想到的，并且用烂的，比如人气直接延展出来的“火”、“奖杯”等等。（但是如果你的图标没有文字提示，需要表意特别明确，建议还是使用第一层延伸词，可以在风格上做些差异化表现）。
所以在上面两个原则下，我最后设定人气图标使用“爱的手势”，如下图：
因为看到有些同学把“爱”与“摇滚”的手势弄混，所以说下它们的区别：
希望大家在使用的时候不要搞错哦！
第二个，“完结”图标的脑暴路径：
也是通过“具象”与“二层”原则，最后使用了商店挂的打烊门牌这一创意来延展：
每个关键词的脑暴都会产生很多词汇，各不相同，我们需要学会筛选，尽量避开过于抽象或者过于普通的词汇，避开抽象等于具象，可以方便执行；避开普通等于特别，如果所有的设计都是大家用烂的创意，那作品一定会很平庸，以上就是我在脑暴时使用的方法。
我们需要让自己产出的每一套设计至少有一个“特别”出现，不然如何体现自己的价值呢？
3.设计执行
这一步就是根据前面得到的灵感图来进行设计，我们来看下执行对比图：
对于执行需要注意的基础细节，之前有写过《图标设计五维自检法》，有兴趣的同学可以看一下，除此之外这里再补充一点——如何让图标做到有细节！
本次设计总结了三个方法供大家参考：
3.1 设计技法的细节
比如给描边增加短线风格：
再比如线条增加面形色块的组合：
3.2 根据事物本身特征增加细节
比如一个木质门牌的细节：
3.3 俏皮的那一笔
比如书架上歪着的一本书：
再比如一根线条的破局：
当然增加细节的方法有太多种，总的目的就是防止图标过于简单、简陋，希望你也可以有自己的一套秘方来进行设计，大家互相学习。
最后再看下图标整体的效果吧：
附上过程中的一些稿子，哈哈，别吓到你：
对于执行这一块，别人再怎么说，你不做大量的练习与思考也是无济于事，这个道理毋庸赘言了。效果图如下：
接下来分享的也是这几个图标，不过是延伸版，切入的角度会略有不同。
这次改版背景很简单：首页整体架构调整的同时，主图标的设计语言改成了面性，而由于时间紧，小说图标还没来得及改，所以这次的设计目标就一个，把第一版图标改成面性的。
本来我以为，直接由线性改成填充的形式就可以了，分分钟搞定，但没想到改过来的效果是这样的：
于是经过调整又得到这样的：
为什么还是不好看？
我也不知道啊！
这种情况就去多找参考，分析分析别人的优秀作品，比如下图谷歌的图标：
为什么人家的看起来就那么好看，那么精致？
我个人觉得最大原因就是它的透气感比较好，导致透气感好的原因在于，它采用了多元素组合的方式，并且使用大量留白与彩色形成对比。
在这样的分析之下，我对图标进行了重新构思，直接在脑暴阶段就重新思考（因为原有图标是一个元素，很难再拆分成两个元素来进行组合）。
为了能做到独特，我最终选用的图标含义如下（尽量避开用烂的词汇）：
书架：两本书互相依靠
热门：手捧爱心
免费：冰淇淋甜筒（创意来自甜筒经常会有第二份半价，或者买一 送一的活动）
完结：黑子手捧完结的牌子
最后的执行效果如下：
新版图标也是利用元素的组合，并且图标内有大量留白使图标更加透气。
除了透气以外，我还在图标之中融入了一些“有生命感的内容”，比如手，品牌形象，拟人化的书等等：
使图标变更加可爱，有情感，充满一些故事感。
除此之外，对图标还增加了一点点的小细节作为小彩蛋：
一般我们在做一组东西的时候，都希望能够有一个主旨贯穿始终，这样解释起来更加有说法，有说服力。
比如上面这组小说图标，设计关键词是温暖，情感，可爱，在这样的理念下，我将温暖转化为阳光作为视觉语言。
可是阳光怎么落地呢，我当时能想到的就是高光和投影，本次使用的就是充满光感的长投影：
当然，为了使图标轻量化，投影不宜过重，起到点睛的作用即可：
除此之外，像前面所说，为了体现可爱的主旨，融入了手，品牌形象等有生命的元素（并且整体图形都是比较圆润，避免尖角的出现），这也是贯穿主旨的一条路径。
方法很多，各不相同，其本质目的还是希望大家做设计的时候要有适当的理念贯穿！
整个设计过程就差不多这些了，其实花在调整细节的时间还是比较多的，随便一个图标有了大方向和思路之后，还是需要不断的修改修改再修改。
颜色的搭配、五官的间距、元素之间的大小关系等等，都需要不断的调整，而真正考验我们的也就在这些细节当中。
这里再补充两个增加可爱度的实用小技巧：
1 五官紧凑
一般情况下，缩小五官的间距，可以一定程度上实表情更加可爱，尤其是嘴鼻和眼睛的间距：
2 腮红
一般来说，在我的印象中只有可爱的东西才会有腮红，五大三粗的大老爷们加个腮红，咦～，不敢想！
所以画可爱的形象或表情时，可以考虑加个腮红：
不过我这次由于元素太多，所以没加，大家可以根绝实际情况自行实践。
最后：
看万卷书，行万里路！不走，书白看。
看万篇文，练万个习！不练，文白看。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里B端后台产品UI设计的工作小结，总结一些常见问题、解决方法以及自己的经验。
写在前面
作为一个新时代全能打杂，日常工作包括移动端、PC端的UI设计以及各类平面视觉设计，其中自然少不了令人“秃”然的B端后台产品设计。
毕业两年来一直都做着B端产品的UI设计工作，参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作和学习的过程中走过不少弯路，也在不同的项目中不断反思和总结。把自己的一些想法和经验分享出来，总结自己工作中遇到的问题和解决的方法，记录自己思考和理解的过程，也希望对即将或正在从事B端后台产品设计的你有一点点启发或帮助。
希望在日后的工作和学习中，通过实践来不断完善自己对B端后台产品的理解。
目录
一、明修栈道C和暗度陈仓B
二、后台产品设计思路
三、后台产品设计规范
四、经验观点及设计资源
正文
一、明修栈道C和暗度陈仓B
1.1初识B端产品和C端产品
按照C端产品和B端产品的专业术语来解释的话，C端Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是C端产品，单一的C端产品通常是为了实现单一的需求，比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向B端的产品，我个人称之为“暗度陈仓”，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即C端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是C端产品，但是B端产品对我们的影响也是时时刻刻都存在着的。C端产品在明，逐渐改变着现代人的生活方式，B端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
——“ToB还是ToC？这是个问题......”
——“不管ToB还是ToC，最后都还是ToP（people）。”
1.2B端和C端产品的区别
在我看来，C端产品以消费互联网为主，B端产品以产业互联网为主，C端更感性，而B端更理性。
从使用者的角度来说——
C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；
B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。
从开发的角度来说——
C端周期短，B端周期长；
C端用户多，B端用户少；
C端逻辑简单，B端逻辑复杂；
C端竞品较多，B端竞品较少；
C端主战场是移动端，B端则是PC端；
C端是用户体验驱动，B端是解决问题驱动；
C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；
C端产品除了产品的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心，B端产品的实用性大于美观性，能切实解决问题、配置资源的B端产品才是一个好的B端产品，产品经理要具有更强的逻辑思维能力。
1.3后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在B端产品的范围之内的，常见的类型包括：
C端产品的后台产品线——如淘宝商家版，饿了么商家版，对订单和用户进行管理，支持C端产品的业务进展；
平台级工具产品——如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如微博开放平台等；
企业级服务产品——虚拟主机系统（VMware），云主机管理系统（深信服、xensystem、腾讯云）以及各种云SaaS；
企业的业务处理平台——对内有考勤、报销等OA办公系统，对外有CRM客户管理系统，ERP资源及供应链管理系统。
二、后台产品设计思路
2.1初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多。
后台产品不同于普通用户所使用的APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的app，再给他几个其他的音乐APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，首先，所见之少，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业、甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有“保密协议”的使命感，所谓“隔行如隔山”，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
这大概就是后台产品相关资源较少、设计难度较大的一些原因。
2.2后台UI设计工作流程
后台UI设计的工作，大体分为三个部分：需求分析——设计执行——数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。 做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照PM给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做UI视觉方面的设计，而这时后端同步构思需求的实现方案。UI设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
2.3制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
对产品——在项目完成第一版较为稳定的版本时，着手制定设计标准，统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出；
对自己——组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展；在同一个项目中也能更好的把控该项目的视觉规范，提率；
对团队——设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作；
对客户——制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更的输出。同时在进行产品迭代时，设计规范的组件化调整也大大提高了工作效率。
三、后台产品设计规范
*以下内容仅供参考和交流，图片内容不代表真实尺寸，请结合特定产品灵活使用。
3.1页面布局
统一尺寸——据统计，目前PC端用户屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440来设计的话，向上适配或者向下适配误差会比较小。 适配方案——面向多个客户，后台产品设计功能型页面的尺寸统一为1440*900，按照栅格系统原则向上或向下适配；展示型页面以1440*900为主，同时设计出极端情况（宽度为1280以及宽度为1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架——页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局——栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用24列栅格体系实现，以满足2，3，4，5，6分比布局等多种情况。固定宽度Column，将间隔Gutter进行动态缩放。需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。谷歌规定模块和结构之间要以8px为基准，布局间相对间距可采用8px以及8的倍数，但一些小组件(按钮、间隔、输入框 )可以以4为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定——一般在整体区域左上角放置产品LOGO及产品名称，大部分系统顶部栏高度48+8n，侧边栏宽度200+8n。我常用的是顶部栏高度56px，侧边栏宽度200px，侧边栏收缩状态宽度56px，右侧的侧浮窗宽度400px。
相对间隔——定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
3.2标准色
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
3.3标准字
后台系统常用的字体：windows系统，中文Microsoft YaHei，英文Arial；Mac字体，中文PingFang SC，英文Helvetica；除此之外可以选择的字体还有segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
3.4图标
图标是UI设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在iconfont提供的图标模板上用AI绘制，画板1024*1024，提供圆形、正方形、矩形形状(文末提供下载)。图标尺寸按照8的倍数进行延展，绘制完成后生成svg格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
分享一个我个人常用的AI使用小习惯，因为ctrl+q、ctrl+w作为退出和关闭我用的不多，而且有时候手抖会在保存时候不小心点成了关闭，所以我无情地把ctrl+q、ctrl+w变成了拓展和拓展外观的快捷键......感受还不错。
3.5按钮
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照8的倍数设定。如高度分别设定为24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为10px。
3.6导航
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
3.7表单
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为20px，有错误提示时候竖向增加10px或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体14px，文字和左右两边边框的边距10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为30px或按照8的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮4px，内部文字14px。
单选多选框尺寸16*16px，多个选项横向排列间距16px，纵向排列间距8px。
开关按钮外框40*20px，内部圆形16*16px。
3.8表格
表格在后台产品UI设计中站的比重非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高——表格行高可设置为表格内字体高度的2~3倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用36、40、48、60等。
行数——表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是20或50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多余每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽——列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以“...”展示，鼠标悬停出现完整内容（比如详情、描述）。
列数——表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式——表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似IP地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加“复制”图标，方便用户调用。
详情入口——表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
3.9反馈
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框——弹框出现时，主题内容增加一层遮罩#000，透明度50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框——又称抽屉，出现在右侧，固定宽度400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏——为某些特定数据提供数据加载等待时的占位图形组合。
全局提示——建议停留时间3s，可根据文字字数调整停留时间，文字内容限制在30以内。
警告提示——用不同颜色和样式展示需要关注的信息。
通知提醒——消息通知和告警信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留3s后自动关闭。
3.10缺省状态
绘制不同类型的情感画插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用14px，与情感化插画间距20px，与按钮间距30px；
3.11数据可视化
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做的更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
四、经验观点及设计资源
4.1设计前端一家亲
Ant Design的设计组件，实现框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的设计组件，实现框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的设计组件，实现框架Vue——https://www.iviewui.com/docs/guide/theme
飞冰的设计组件，实现框架React——https://alibaba.github.io/ice/
Layui的设计组件——https://www.layui.com/demo/grid.html
G2可视化图形组件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可视化图形组件——https://echarts.baidu.com/
d3.js可视化图形组件——https://github.com/d3/d3/wiki/Gallery
在线栅格化计算工具——http://grid.guide/#/1000/24/34/8/0
4.2不丑也要多读书
《B端产品经理必修课》
《交互设计精髓》
《U一点料·Ⅱ》
《简约至上:交互式设计四策略》
写在最后
不管是做C端产品还是B端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的UI设计师工作时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入antdesign和element等开源的设计组件，会使得设计师以及设计师的好朋友前端小哥哥事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
NodeJs基础
nodejs的本质：不是一门新的编程语言，nodejs是javascript运行在服务端的运行环境，编程语言还是javascript
global模块-全局变量
Node.js 中的全局对象是 global, 类似于浏览器中的window
常用的global属性
console: 用于打印日志
setTimeout/clearTimeout: 设置清除延时器
setInterval/clearInterval: 设置清除定时器
__dirname: 当前文件的路径，不包括文件名
__filename： 获取当前文件的路径，包括文件名
//与模块化相关的，模块化的时候会用到
require
exports
module
除了global模块中的内容可以直接使用，其他模块都是需要加载的。
其他模块不是全局的，不能直接使用。因此需要导入才能使用。
fs模块
fileSystem-- 文件系统，提供了一系列操作文件的API接口，可以方便我读写文件
读取文件
语法：fs.readFile(path[, options], callback)
方式一：不传编码参数
//参数1： 文件的名字
//参数2： 读取文件的回调函数
//参数1：错误对象，如果读取失败，err会包含错误信息，如果读取成功，err是null
//参数2：读取成功后的数据（是一个Buffer对象）
fs.readFile("data.txt", function(err, data){
console.log(err);
console.log(data);
// 可以通过data.toString() 把二进制数据转成文本，当然前提是读取的文件本来就是文本，如果是图片获取的二进制就无法转换成文本
});
方式二：传编码参数
//参数1： 文件的路径
//参数2： 编码，如果设置了，返回一个字符串，如果没有设置，会返回一个buffer对象
//参数3： 回调函数
fs.readFile("data.txt", "utf8",function(err, data){
console.log(err);
console.log(data);
});
关于Buffer对象
1. Buffer对象是Nodejs用于处理二进制数据的。
2. 其实任意的数据在计算机底层都是二进制数据，因为计算机只认识二进制。
3. 所以读取任意的文件，返回的结果都是二进制数据，即Buffer对象
4. Buffer对象可以调用toString()方法转换成字符串。
写文件
语法：fs.writeFile(file, data[, options], callback)
//参数1：写入的文件名(如果文件不存在，会自动创建)
//参数2：写入的文件内容（注意：写入的内容会覆盖以前的内容）
//参数3：写文件后的回调函数
fs.writeFile("2.txt", "hello world, 我是一个中国人", function(err){
if(err) {
return console.log("写入文件失败", err);
}
console.log("写入文件成功");
});
1
2
3
4
5
6
7
8
9
注意：
写文件的时候，会把原来的内容给覆盖掉
追加文件
语法：fs.appendFile(path, data[, options], callback)
//参数1：追加的文件名(如果文件不存在，会自动创建)
//参数2：追加的文件内容（注意：写入的内容会覆盖以前的内容）
//参数3：追加文件后的回调函数
fs.appendFile("2.txt", "我是追加的内容", function(err){
if(err) {
return console.log("追加文件内容失败");
}
console.log("追加文件内容成功");
})
思考：如果没有appendFile，通过readFile与writeFile应该怎么实现？
文件同步与异步的说明
fs中所有的文件操作，都提供了异步和同步两种方式
异步方式：不会阻塞代码的执行
同步方式：会阻塞代码的执行
//同步方式
console.log(111);
var result = fs.readFileSync("2.txt", "utf-8");
console.log(result);
console.log(222);
总结：同步操作使用虽然简单，但是会影响性能，因此尽量使用异步方法，尤其是在工作过程中。
stream
stream是Node.js提供的又一个仅在服务区端可用的模块，目的是支持“流”这种数据结构。
什么是流？流是一种抽象的数据结构。想象水流，当在水管中流动时，就可以从某个地方（例如自来水厂）源源不断地到达另一个地方（比如你家的洗手池）。我们也可以把数据看成是数据流，比如你敲键盘的时候，就可以把每个字符依次连起来，看成字符流。这个流是从键盘输入到应用程序，实际上它还对应着一个名字：标准输入流（stdin）。
如果应用程序把字符一个一个输出到显示器上，这也可以看成是一个流，这个流也有名字：标准输出流（stdout）。流的特点是数据是有序的，而且必须依次读取，或者依次写入，不能像Array那样随机定位。
有些流用来读取数据，比如从文件读取数据时，可以打开一个文件流，然后从文件流中不断地读取数据。有些流用来写入数据，比如向文件写入数据时，只需要把数据不断地往文件流中写进去就可以了。
在Node.js中，流也是一个对象，我们只需要响应流的事件就可以了：data事件表示流的数据已经可以读取了，end事件表示这个流已经到末尾了，没有数据可以读取了，error事件表示出错了。
下面是一个从文件流读取文本内容的示例：
'use strict';
var fs = require('fs');
// 打开一个流:
var rs = fs.createReadStream('sample.txt', 'utf-8');
rs.on('data', function (chunk) {
console.log('DATA:')
console.log(chunk);
});
rs.on('end', function () {
console.log('END');
});
rs.on('error', function (err) {
console.log('ERROR: ' + err);
});
要注意，data事件可能会有多次，每次传递的chunk是流的一部分数据。
要以流的形式写入文件，只需要不断调用write()方法，最后以end()结束：
'use strict';
var fs = require('fs');
var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream写入文本数据...\n');
ws1.write('END.');
ws1.end();
var ws2 = fs.createWriteStream('output2.txt');
ws2.write(new Buffer('使用Stream写入二进制数据...\n', 'utf-8'));
ws2.write(new Buffer('END.', 'utf-8'));
ws2.end();
所有可以读取数据的流都继承自stream.Readable，所有可以写入的流都继承自stream.Writable。
pipe
就像可以把两个水管串成一个更长的水管一样，两个流也可以串起来。一个Readable流和一个Writable流串起来后，所有的数据自动从Readable流进入Writable流，这种操作叫pipe。
在Node.js中，Readable流有一个pipe()方法，就是用来干这件事的。
让我们用pipe()把一个文件流和另一个文件流串起来，这样源文件的所有数据就自动写入到目标文件里了，所以，这实际上是一个复制文件的程序：
'use strict';
var fs = require('fs');
var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');
rs.pipe(ws);
默认情况下，当Readable流的数据读取完毕，end事件触发后，将自动关闭Writable流。如果我们不希望自动关闭Writable流，需要传入参数：
readable.pipe(writable, { end: false });
1
path模块
路径操作的问题
具体的说明可以参考 NodeJs学习.md
在读写文件的时候，文件路径可以写相对路径或者绝对路径
//data.txt是相对路径，读取当前目录下的data.txt, 相对路径相对的是指向node命令的路径
//如果node命令不是在当前目录下执行就会报错， 在当前执行node命令的目录下查找data.txt，找不到
fs.readFile("data.txt", "utf8", function(err, data) {
if(err) {
console.log("读取文件失败", err);
}
console.log(data);
});
相对路径：相对于执行node命令的路径
绝对路径：__dirname: 当前文件的目录，__filename: 当前文件的目录，包含文件名
path模块的常用方法
关于路径，在linux系统中，路径分隔符使用的是/，但是在windows系统中，路径使用的\
在我们拼写路径的时候会带来很多的麻烦，经常会出现windows下写的代码，在linux操作系统下执行不了，path模块就是为了解决这个问题而存在的。
常用方法：
path.join();//拼接路径
//windows系统下
> path.join("abc","def","gg", "index.html")
"abc\def\gg\a.html"
//linux系统下
> path.join("abc","def","gg", "index.html")
'abc/def/gg/index.html'
http模块
创建服务器步骤
// 移入http模块
const http = require('http')
// 调用创建http 服务器的方法
const server = http.createServe()
// 给服务器注册request事件监听，每次浏览器像服务器发送请求的时候都会被监听到
server.on('request', function(request, response){
// request 浏览器请求的数据，包括请求方式method 请求的地址 url等
// response 浏览器的响应，可以设置响应头、响应体、响应状态码
const method = request.method
const url = request.url
// 设置响应的状态码
response.StatusCode = 404
// 设置响应的头
response.setHeader('Content-Type', 'text/html');
// 设置响应体内容,write可以调用多次
response.write('hello world!')
// 响应结束
response.end()
// 如果在end(content)，这样的写法相当于是让write和end的合写
response.end('hello world!')
})
// 给服务器设置监听,相当于启动服务器
server.listen(8888,function(){
console.log('服务器启动成功')
})
// 简写方式
http.createServer((req,res) => {
....
}).listen(8888,() => {
....
})
详细说明
给服务器注册request事件，只要服务器接收到了客户端的请求，就会触发request事件
request事件有两个参数，request表示请求对象，可以获取所有与请求相关的信息，response是响应对象，可以获取所有与响应相关的信息。
服务器监听的端口范围为：1-65535之间，推荐使用3000以上的端口，因为3000以下的端口一般留给系统使用
response对象详解
常见的属性和方法：
res.write(data): 给浏览器发送请求体，可以调用多次，从而提供连续的请求体
res.end(); 通知服务器，所有响应头和响应主体都已被发送，即服务器将其视为已完成。
res.end(data); 结束请求，并且响应一段内容，相当于res.write(data) + res.end()
res.statusCode: 响应的的状态码 200 404 500
res.statusMessage: 响应的状态信息， OK Not Found ,会根据statusCode自动设置。
res.setHeader(name, value); 设置响应头信息， 比如content-type
res.writeHead(statusCode, statusMessage, options); 设置响应头，同时可以设置状态码和状态信息。
1
2
3
4
5
6
7
注意：必须先设置响应头，才能设置响应。
实现静态WEB服务器
服务器响应首页
注意：浏览器中输入的URL地址，仅仅是一个标识，不与服务器中的目录一致。也就是说：返回什么内容是由服务端的逻辑决定
server.on('request', function(req, res) {
var url = req.url
if(url === '/') {
fs.readFile('./index.html', function(err, data) {
if(err) {
return res.end('您访问的资源不存在~')
}
res.end(data)
})
}
})
根据根据不同url，响应不同文件
content-type设置-MIME类型
MIME(Multipurpose Internet Mail Extensions)多用途Internet邮件扩展类型 是一种表示文档性质和格式的标准化方式
浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器将正确的MIME类型附加到响应对象的头部是非常重要的
MIME类型的通用处理-mime模块
作用：获取文件的MIME类型
安装：npm i mime
var mime = require('mime')
// 获取路径对应的MIME类型
mime.getType('txt') // ⇨ 'text/plain'
// 根据MIME获取到文件后缀名
mime.getExtension('text/plain') // ⇨ 'txt'
1
2
3
4
5
6
有了这个模块我们就可以把设置响应头的代码改写成下面
// mime 不仅可以只写一个后缀名，还可以通过url来解析出后缀名来，因此这里可以直接写url
response.setHeader('content-type',mime.getType(request.url))
1
2
npm - Node包管理工具
初始化包
npm init; //这个命令用于初始化一个包，创建一个package.json文件，我们的项目都应该先执行npm init
npm init -y; //快速的初始化一个包， 不能是一个中文名
1
2
安装包
npm install 包名; //安装指定的包名的版本到项目中
npm install 包名@版本号; //安装指定包的指定版本
npm i 包名； //简写
卸载包
npm uninstall 包名; //卸载已经安装的包
1
清除缓存
npm cache clean -f // 如果npm安装失败了，可以用这个命令来清除缓存
1
package.json文件
package.json文件，包（项目）描述文件，用来管理组织一个包（项目），它是一个纯JSON格式的。
作用：描述当前项目（包）的信息，描述当前包（项目）的依赖项
如何生成：npm init或者npm init -y
作用
作为一个标准的包，必须要有package.json文件进行描述
一个项目的node_modules目录通常都会很大，不用拷贝node_modules目录，可以通过package.json文件配合npm install直接安装项目所有的依赖项
描述内容
{
"name": "03-npm", //描述了包的名字，不能有中文
"version": "1.0.0", //描述了包的的版本信息， x.y.z 如果只是修复bug，需要更新Z位。如果是新增了功能，但是向下兼容，需要更新Y位。如果有大变动，向下不兼容，需要更新X位。
"description": "", //包的描述信息
"main": "index.js", //入口文件（模块化加载规则的时候详细的讲）
"scripts": { //配置一些脚本，在vue的时候会用到，现在体会不到
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //关键字（方便搜索）
"author": "", //作者的信息
"license": "ISC", //许可证，开源协议
"dependencies": { //重要，项目的依赖， 方便代码的共享 通过 npm install可以直接安装所有的依赖项
"bootstrap": "^3.3.7",
"jquery": "^3.3.1"
}
}
注意：一个合法的package.json，必须要有name和version两个属性
本地安装和全局安装
有两种方式用来安装 npm 包：本地安装和全局安装。选用哪种方式来安装，取决于你如何使用这个包。
全局安装：如果你想将其作为一个命令行工具，那么你应该将其安装到全局。这种安装方式后可以让你在任何目录下使用这个命令。比如less命令，webpack命令，hcc-md命令 。
本地安装：如果你自己的模块依赖于某个包，并通过 Node.js 的 require 加载，那么你应该选择本地安装，这种方式也是 npm install 命令的默认行为。
// 全局安装,会把npm包安装到C:\Users\HUCC\AppData\Roaming\npm目录下，作为命令行工具使用
npm install -g 包名;
//本地安装，会把npm包安装到当前项目的node_modules文件中，作为项目的依赖
npm install 包名;
常见的命令行工具
nrm
nrm：npm registry manager（npm仓库地址管理工具）
安装：npm i -g nrm
# 带*表示当前正在使用的地址
# 查看仓库地址列表
nrm ls
# 切换仓库地址
nrm use taobao
nodemon 自动重启
作用：监视到js文件修改后，自动重启node程序
安装：npm i -g nodemon
使用：nodemon app.js 运行node程序
模块化(module)
基本概念
在nodejs中，应用由模块组成，nodejs中采用commonJS模块规范。
一个js文件就是一个模块
每个模块都是一个独立的作用域，在这个而文件中定义的变量、函数、对象都是私有的，对其他文件不可见。
node中模块分类
1 核心模块
由 node 本身提供，不需要单独安装（npm），可直接引入使用
2 第三方模块
由社区或个人提供，需要通过npm安装后使用
3 自定义模块
由我们自己创建，比如：tool.js 、 user.js
核心模块
fs：文件操作模块
http：网络操作模块
path：路径操作模块
url: 解析地址的模块
querystring: 解析参数字符串的模块
基本使用：1 先引入 2 再使用
// 引入模块
var fs = require('fs');
1
2
第三方模块
第三方模块是由 社区或个人 提供的
比如：mime模块/art-template/jquery…
基本使用：1 先通过npm下载 2 再引入 3 最后使用
用户自定义模块
由开发人员创建的模块（JS文件）
基本使用：1 创建模块 2 引入模块
注意：自定义模块的路径必须以./获取../开头
// 加载模块
require('./a') // 推荐使用，省略.js后缀！
require('./a.js')
1
2
3
4
模块导入
/*
nodejs中模块分为3大类
1. nodejs本身提供的核心模块 fs http path url querystring
核心模块不需要安装，直接导入即可。
核心模块的加载语法： const fs = require('fs')
2. 第三方模块 mime art-template
第三方模块： 必须先安装（npm install XXX） 才能导入
第三方模块的加载语法： npm install XXX const mime = require('mime')
3. 自定义的模块 一个js文件
不需要安装 只需要自己创建一个js文件
自定义模块的加载语法： require('模块的路径') 模块不能是名字，必须是路径 ./ ../ .js后缀是可以省略
require加载规则（以mime模块为例）
1. 判断是否是路径， 如果是 就是自定义模块
2. 如果是名字 判断是否是核心模块
3. 如果是第三方模块 在当前目录找node_modules
4. 在node_modules中查找mime文件夹
5. 查找是否有package.json， 查看是否main属性
6. 判断是否有main, 如果没有，默认查找index.js index.json index.node
7. 如果没有
8. 如果找不到，就去上一层目录，一直找到根目录
9， 如果还没有，就说明模块不存在
*/
模块导出
/*
1. 模块中定义的变量和函数都是私有的
2. 任意的一个模块中， 都有自带一个属性 module (全局属性) module代表的就是当前的这个模块。
3. module中有一个属性 exports ,这个exports属性是一个对象，代表的就是当前模块的导出 module.exports当前模块唯一能够被外界访问到的
*/
//通过module.exports对外导出一些值
module.exports = 值 只能导出一个值
module.exports = {} 可以把所有要导出的内容都放到一个新的对象中
module.export.xxx = 值
/*
在任意的模块中 module.exports表示该模块的导出
为了我们方便导出， 每个模块中还提供了 exports
exports 初始状态下，和module.exports指向了同一个对象。
注意点： 如果通过exports的方式来导出内容，只能给对象增加属性 不能替换这个对象
*/
// 我们真正到处的对象是module.exports指向的对象
exports = {} // 这样只是改了exports的指向，而module.exports的指向没有改变，所以这样是不对的
// 以下这种是允许的
exports.xxx = '值'
express与mysql
首先需要安装mysql模块
npm i mysql
1
基本使用
// 导入第三方包
const mysql = require('mysql')
// 创建连接
var connection = mysql.createConnection({
// 本地
host: 'localhost',
user: 'root',
password: 'root',
// 数据库名称
database: 'mydb',
port: 3306
})
// 连接数据库
connection.connect()
// 执行sql语句
connection.query('select * from user where id = 8', (err, result) => {
if (err) return console.log('查询失败', err)
// result返回的是数组， 数组中是一个对象
console.log(result)
})
// 关闭连接
connection.end()
查询语句
var name = 'zs'
// 使用?表示占位，可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
if (err) return console.log('错误了', err)
console.log(result)
})
1
2
3
4
5
6
插入语句
connect.query(
'insert into user (name, age, gender, content) values (?, ?, ?, ?)',
['zs', 18, '男', '哈哈哈哈'],
err => {
if (err) return console.log('错误', err)
console.log('添加成功了')
}
)
// 方式2
connect.query(
'insert into user set ?',
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
(err, result) => {
if (err) return console.log('错误', err)
console.log('添加成功了', result)
}
)
修改语句
connect.query(
'update user set ? where id = ?',
[
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
10
],
(err, result) => {
if (err) return console.log('错误', err)
console.log('添加成功了', result)
}
)
删除语句
connect.query('delete from user where id = ?', 10, (err, result) => {
if (err) return console.log('失败', err)
console.log(result)
})
1
2
3
4
登录状态保持
http是无状态的，但是随着技术的发展，我们需要记住某些东西，但是因为http是无状态的，无法让服务器记住东西，因此就引入了cookie和session这两个东西，cookie用于浏览器端，session用于服务器端。
以用户登录为例：
当用户登录时，浏览器会给服务器发送请求，这时候服务器就会开辟一个空间用于存放session数据，并且会把生成的sessionId返回给浏览器，存放在浏览器的cookie中，之后浏览器在请求服务器的时候，就会去比对是否存在这个session。这样你的登录状态就已经保持下来了
cookie的特点
cookie大小只有4k
cookie每次请求的时候，都会自动携带
cookie可以设置过期时间
为了方便使用，我们可以使用express-session这个包，可以很方便使用session
express-session步骤：
1. 下载 npm i express-session
2. 导入 const session = require("express-session")
3. 使用session中间件
app.use(session({
secret: 'itcast',
// 设置浏览器端cookie的名字， 默认connect.sid
name: 'itcast',
resave: false,
// 在浏览器和服务器连接的第一时间，分配session 给浏览器指定一个cookie
saveUninitialized: true
}))
可以通过req.session访问到session
4. 登录成功，把登录成功的用户信息存储到 req.session.xxx中
5. 提供一个中间件，这个中间件在路由的前面，判断 req.session.xxx是否有值，有值，放走，没值，去登录，细节： 如果是/login 直接放走
6. 退出功能： 把req.session.xxx 清空即可
浏览器登录和退出
1. 登录做什么 把用户名和密码给服务器
2. 退出做什么， 1. 告诉服务器，要退出 2.（清缓存也行）
yarn和npm的说明
官网：https://yarn.bootcss.com/
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，Yarn 是为了弥补 npm 的一些缺陷而出现的。
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。
同时利用并行下载以最大化资源利用率，因此安装速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一个新项目
yarn init
1
添加依赖包
yarn add 包名
1
升级依赖包
yarn upgrade 包名
1
移除依赖包
yarn remove 包名
1
安装项目的全部依赖
yarn
1
全局安装
yarn global add 包名
1
使用gulp自动化构建
官网：https://gulpjs.com/
中文文档：https://www.gulpjs.com.cn/
用自动化构建工具增强你的工作流程！
在开发过程中，有很多重复性的工作需要执行。
less转成css
对css代码压缩混淆
对js代码压缩混淆
写完代码后需要刷新浏览器
无法共用模版
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp -----> grunt ------>webpack
环境安装
初始化项目
npm init -y
1
全局安装gulp
npm install gulp -g
yarn global add gulp
1
2
作为项目的依赖进行安装
yarn add gulp --save-dev 或者
yarn add gulp --save-dev
--save-dev 等同于 -D
如果这个依赖包只是在开发阶段需要用到，需要加-D
1
2
3
4
新建gulpfile.js文件
// 参数1： 任务名
// 参数2： 任务需要执行的内容
gulp.task('aa', function() {
console.log('哈哈')
})
1
2
3
4
5
执行任务
gulp 任务名;
gulp; 如果不接任务名，那么会执行默认的 default任务
1
2
3
glup任务-文件拷贝-lib
文件拷贝使用到了gulp提供的几个核心方法
gulp.task: 定义任务
gulp.src() 读取文件
gulp.pipe() 把文件交给管道处理
gulp.dest() 输出文件到某个目录
gulp.task定义任务
gulp.src('./src/lib/**/*.*')把文件读取成一个文件流
gulp.pipe() 把文件流交给下一个流
gulp.dest('./dist/lib')输出文件
// 简单拷贝, 处理 lib文件夹， lib文件不需要做任何的处理，只需要拷贝到dist目录
// 任务需要加一个return， 表示任务完成
gulp.task('lib', function() {
// 读取文件
// gulp.src() 读取文件
// gulp.pipe() 管道
// gulp.dest() 放到哪儿
return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib'))
})
1
2
3
4
5
6
7
8
9
gulp任务-js代码压缩与混淆
gulp-uglify-es: 给js代码进行压缩，处理ES6的代码
gulp-rename: 重命名
安装依赖
yarn add gulp-uglify-es --save-dev
1
配置任务
const uglify = require('gulp-uglify-es').default
gulp.task('js', function() {
return gulp
.src('./js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
})
1
2
3
4
5
6
7
8
安装重命名依赖
yarn add gulp-rename -D
1
重命名配置
task('js', function() {
return src('./js/*.js')
.pipe(dest('./dist/js'))
.pipe(uglify())
.pipe(
rename({
// 配置重命名的后缀名
suffix: '.min'
})
)
.pipe(dest('./dist/js'))
})
1
2
3
4
5
6
7
8
9
10
11
12
gulp任务-less处理
gulp-less: 把less变成css
gulp-rename: 重命名
gulp-minify-css: 压缩css代码
安装依赖包
yarn add gulp-less -D
1
less任务
// less任务
task('less', function() {
return src('./less/*.less')
.pipe(less())
.pipe(
rename({
extname: '.css'
})
)
.pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
安装css压缩处理包
yarn add gulp-minify-css -D
1
压缩css
// less任务
task('less', function() {
return src('./less/*.less')
.pipe(less())
.pipe(
rename({
extname: '.css'
})
)
.pipe(dest('./dist/css'))
.pipe(minifycss())
.pipe(
rename({
suffix: '.min'
})
)
.pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp任务-图片压缩
gulp-imagemin: 可以对图片进行压缩
gulp-cache: 图片压缩比较耗时的一个任务， 如果每次都对所有的图片进行重新压缩，比较浪费时间， 会缓存下来所有已经压缩过的图片
安装依赖
yarn add gulp-imagemin -D
1
压缩图片的任务
task('image', function() {
return src('./img/*')
.pipe(imagemin())
.pipe(dest('./dist/img'))
})
1
2
3
4
5
安装gulp-cachae
yarn add gulp-cache -D
1
压缩图片是比较耗时的，我们可以使用gulp-cache来缓存已经压缩过的图片
task('image', function() {
return src('./img/*')
.pipe(cache(imagemin()))
.pipe(dest('./dist/img'))
})
1
2
3
4
5
参考资料：https://www.cnblogs.com/yuzhongwusan/p/5417090.html
gulp任务-处理html
gulp-minify-html: 压缩html文件
gulp-html-extend: 语句当前html去导入另一个html
压缩html
yarn add gulp-minify-html -D
1
使用
// 处理html
task('html', function() {
return src('./src/*.html')
.pipe(minifyHtml())
.pipe(dest('./dist'))
})
1
2
3
4
5
6
导入html
yarn add gulp-html-extend -D
1
// 处理html
task('html', function() {
return src('./src/*.html')
.pipe(extender())
.pipe(minifyHtml())
.pipe(dest('./dist'))
})
1
2
3
4
5
6
7
在页面中，如何导入html
<!-- @@include ./template/header.html -->
1
gulp任务-清空任务
安装
yarn add del -D
1
配置任务
task('clean', function() {
return del('./dist')
})
1
2
3
gulp-任务整合series
task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))
1
gulp任务-监听文件的变化
// 实现一个，修改代码，会自动执行任务
// 监听的任务，，，，，，做一件事件，当我们修改了对应的文件，需要执行对应的任务
// gulp.watch() 监视文件
task('watch', function() {
// 参数1：监视的文件
// 参数2： 对应的任务, 多个任务
watch('./src/**/*.html', series('html'))
watch('./src/less/*.less', series('less'))
watch('./src/js/*.js', series('js'))
watch('./src/lib/**/*.*', series('lib'))
watch('./src/img/*.*', series('img'))
})
gulp任务-自动刷新
安装
yarn add gulp-connect -D
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
排版的难处在于，我们不是根据已经设计好的版面来填充内容（套模板），而是要根据具体的内容来布局版面。比如版面中的图片有时候是一两张，有时候是十张八张，由于构成元素的不同，导致采用同样的构图、版式、形式往往是行不通的，所以葱爷今天的这篇文章就是要来分享，在不同情况下有哪些图片排版技巧。1. 平铺
即把图片铺满整个版面，这种处理方式多用于封面设计。
或者在内页中把某一半版平铺一张大图，另一半则排列文字或者小图。
平铺的图片比较有张力，有视觉重心的图片适合这么处理。下图平铺的效果就一般般。
还有一种情况是把图片当做背景，也可以采用平铺，如下图：
2. 四周留白
即图片要比版面小，并让其四周都留出空白。这里也分两种情况，一是图片位于版面正中央，图片周围的留白是对称的，这种效果类似于相框，常用于封面设计。
还有一种情况是图片周围的留白并不对称，如下图，留白较多的区域会用来排文字，常用于海报设计和画册内页设计。
3. 一条边出血
即把图片的一条边对齐边界，这么处理有点冲破束缚的意思，可以增加图片的想象力和版面的设计感。
4. 三条边出血
这么做会把版面分成两部分，一部分为色块，一部分为图片，在排版时我们还可以通过文字、色块或颜色把这两个部分联系起来。
5. 拆分
即把一张图片拆分成几份，然后隔开一些排列，这么做比单独放一张图片会更有设计感和趣味性，风景类图片适合这么处理。
6. 跨版
即在画册设计中，让图片同时占据两个版面。当在一个跨版中只有一张图片时，如果只把图片排在某一半版中，那么另一半版就容易单调，所以在这种情况下通常会使用跨版，而且图片放大后会更有张力，还能把左右两个版面关联起来。
在画册的设计中，有时候我们应该把一 P 当成一个版面，而有时候则需要把一个跨版当成一个版面，这取决于具体的内容以及排版形式，所以图片的排版也要分成这两种情况来考虑。
1. 统一大小对齐排版
在一些作品集或产品画册中常用到此排法，视觉流程简单、清晰。
2. 统一大小错位排版
比对齐排版更有动感，且由于图片不多，所以也不会显得混乱。
3. 一大一小排版
这种排版对比鲜明、更有张弛，可以在一个跨版中使用，也可以是在某一 P 中使用。
还可以把其中的一张图片去底，这么组合起来更灵活，对比更强烈。
如果把整个跨版当成一个版面，那么可以把大的那张图进行跨版，小的那张图则不跨版。
或者把大图铺满一个 P，而小的图片和文字则排在另一个 P。
这两种排法都很大气且不失细腻。
有时候一个版面内的图片会有很多，这种版面排起来会更有难度，常用的排版方式有以下 8 种。
1. 大小统一对齐排版
这种排法比较整洁，但缺少变化，适合用于目录页或者产品和人物介绍。
2. 大小不统一对齐排版
这种排法会比前一种更灵活一点。适合利用网格工具来辅助排版。
这种排版虽然没有统一图片的大小，但由于保持了严格的对齐关系，所以依然显得很整洁。
3. 图片与色块组合排版
图片与色块组合在一起排版既不会像只有图片那么单调，还可以利用色块排文字。不过注意色块的颜色不要太多，且颜色最好来自图片。
4. 错位排版
即把相连两张图片刻意错开，或者把图片与文字的位置互换，这么做可以有效打破图片完全对齐的单调，且由于有一定的规律，所以也不会对视觉流程造成太大影响。
5. 把图片拼成特定的形状
这种排法适合图片比较多的情况，这么做可以避免图片太多而显得混乱，而且因为拼成的形状要与设计需求相关，所以会显得更有创意。
6. 按照某一路径排版
这种排法跟前一种一样，适合数量较多的同类图片使用，可以避免图片排得太过分散，如果不统一图片的大小和方向，效果会比较活泼但不规范，适用于照片墙和儿童画册的排版。
如果统一图片的大小和方向，或者使它们呈渐变式的变化，这些图片还可以形成一定的节奏感，不仅不会乱，还很美观。
7. 一大多小排版
如果在版面中分开排列大小差不多的多张图片，那么该版面就会缺乏重点且没有张力，而如果把其中一张图片放大，与其他图片形成鲜明的大小对比，就可以有效解决这一问题。
8. 自由排版
即大小不需要统一、图片与图片之间也不一定要严格对齐，效果比较灵活，设计感较强，常用于杂志排版中。
这种排法有两点需要注意，一是图片不要排的太分散；二是最好要有大小对比。
去底图也很适合这么做，当然，在排版的时候也要有大小的区分，同时要注意图片与图片、图片与文字之间的轮廓要形成互补。
版面中的图片数量有从一张到数十张不等，图片的排版方式也非常多，所以我没法一一列出，以上总结的 17 个技巧仅仅代表一些比较主流的方向，具体的变化还需要大家根据具体的内容和设计需求去做尝试和突破，希望这篇文章能给你一点帮助。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
vue路由加载页面时，数据返回慢的时候页面会有闪动的效果，数据加载前和加载后的区别。（特别是el-table表格数据）
路由前加载数据，等数据加载完再路由渲染页面
使用vue-router的 路由守卫 beforeRouteEnter，组件内直接定义以下路由导航守卫，和钩子函数的写法一样，下面列出三种路由守卫：
beforeRouteEnter(to,from,next)0{
// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
} 复制代码 beforeRouteUpdate(to,from,next){
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
} 复制代码 beforeRouteLeave(to,from,next){
// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`
} 复制代码蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com