我把设计规范看作一种工作方法，不被约束而是灵活运用
有问题可以留言区指出，谢谢～
若问我懂设计吗？懂得多少？
我只能说学习是无穷无尽的，比我厉害的人还有很多，只要一直向正确的方向走，相信总不会亏了自己。
写文章之前，我想和大家聊聊设计中常说到的问题：设计规范
作为设计师，是不是经常会遇到不懂设计的上司要你听他的：这里不需要规范，规范 (颜色图标等) 改改还是可以的；也有同行同伴：你不能听什么设计都不懂的人，我们要按照设计规范，我们要统一，不然做视觉规范有什么意义，也有佛系者：改改改，随便改......两难的境地......即使你遇到某种不规范也自认为效果不行的设计，这时候的你是该坚持还是放弃所谓的视觉规范呢？
可能你会认为有了设计规范就一定要遵循；可能你会认为，设计规范不是固定的，是可以灵活应用～等等
我想说：
设计规范是一个关键性的步骤
可以让研发工程师能清晰的知道如何去还原设计；让设计团队有新小伙伴时，能尽快熟悉相关产品的属性环节，快速上手。
规范输出后并不代表完成，还需要推动落地、迭代优化、维护更新
一个项目的规范，主要看是否适合自己现有业务的规范，我们所认为的规范是保持用户体验的统一性、以及减少设计/开发的重复工作量。“规范化”意味着度团队合作的统一指标，对细节的细致追求。
设计规范的组成：第一步学会整理归类
首先需要明确整理的内容有哪些，这些内容的分类怎样呈现好。日常工作中，UI设计规范常见：命名、主色辅色的运用、字号、遮罩透明度、图标大小、间距、圆角值、大小、阴影、组件等。
就我自身遇到过，来回答，这里没有标准答案：
设计应该是变换多彩的，在工作中，是为了驱动业务整体目标来完成的一个环节。如果说你的上司不懂设计也是很正常的，毕竟不是人人都懂设计。遇到这种不规范也自认为效果不行的设计，其实是可以划分紧急/重要/一般三个层次。必要的时候，你可以用一些事实或是demo来讲清楚，如果不按照设计规范会出现的问题是什么，这个时候可以去做的一个向上沟通，这样，有可能他会觉得你说的有道理，可能会遵循你，但有的时候，他不听你的情况，出一个设计稿效果去满足他，也是可以的，因为我们设计这件事是对业务负责，并不是为了设计而做设计。
有时遇到特殊情况，为牺牲设计上的美观和规范，去满足一些业务上的目标，那就需要我们结合当时的业务场景，交互视觉方面综合去处理设计的样式，最后得出合理化的解决方案，也许于规范有些许差异，但结果是好的，就
不必太过于较真了，学会灵活运用
总结一句：设计也可以有一个先后，缓急轻重(即紧急/重要/一般) ，我们可以不被规范所约束，可以去创造新的东西，却不应该被规范所束缚。hahaha
***声明：这里写的是只是一种工作方法，并不是具体规范，可以是灵活运用。
一、设计尺寸规范+文字规范
二、移动端的类型分类
三、图标说明、绘制模板及尺寸
1、通常来说图标分为两种，功能性图标和展示性图标。层级一致的图标尺寸要一致。
功能性图标是为了引导用户理解和操作，需要表现精确和简介，方便用户识别其含义。功能
性图标常规状态下为无彩色。
展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击
欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。
2、图标应在安全区内绘制，同一组的图标保证方向角度一致。（视 视觉效果而定，需灵活使用）
3、采用统一的图标绘制模板，保证图标视觉上大小的一致。
4、图标尺寸一般选择偶数，这样有利于在成倍缩放的时候，不会造成半像素的情况。
四、设计网站推荐（仅供参考）
推荐：大作，真的很全面
高清图库：：Unsplash、Pixabay
设计教程：太多了，就不推荐
icon资源：阿里图标库（设计稿阶段最好自己画）
字体设计：字由(强烈推荐）、求字体网、字体天下
运营配图制作：千图、包图、图怪兽、花瓣、稿定设计 (都有资源参考或是一键生成）
做自己的素材库：eagle（缺点：只能一台电脑使用）
软件下载网站：uxmap
部门之间的协作：蓝湖（还不错哦～）
五、UI组件
如果你是使用Sketch的话，用1倍图（375X667pt）来做设计；如果你是使用ps的话，以750X1334px来做设计。
页面组件通常包括：导航栏、工具栏、弹框、列表、卡片、空状态等等，按照设计理念来说，还可以把
组件拆分为更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器...等等
以下间距/文字/大小都是个人平常使用，仅供参考：
先说说移动设计中的元素和间距吧，个人做设计喜欢8和4的倍数。为什么建议是8的倍数呢，因为8针对移动端设计更有优势，可以缩成1倍图，而没有虚边，这是我经过热门的App对比总结出来的。(如QQ、QQ音乐、网易云、淘宝、钉钉、抖音、bilibili...都有用到)，你也可以截图对比。当然有时为了页面布局或是更有逻辑性，不一定要倍数，其他偶数也是可以的 (小贴士：尽量使用偶数做图，减小差距）
1、导航样式
2、弹窗
模态弹窗：它是指在用户任务中，终止了用户的上一步行为，必须要用户操作才可以进行下一步动作。
非模态弹窗：指不强制用户操作，它的作用相当于内容信息提示，他的出现不打扰用户的当前操作，并且有时间限制，在一定时间里能自动消失。是不需要用户点击操作，让用户看到就可以了。
可以不用弹窗的反馈例子：完成页，比如已支付成功...
在上个动作结束了，下一步不需要进行引导，这种反馈大多数都不采用弹窗形式展现了。
3、卡片容器：可以包含：1.容器、2.媒体文件、3.文本、4.组件
媒体文件：包括图片、视频、音乐封面等等，视频类的是一张大图+播放图标和播放状态。
文图：
当文字比图片重要，会把文字放在左边，这种常常出现在阅读类App界面中，
因为视觉上是从左至右阅读的，应把最吸引人的信息让用户先看到。反之亦然。
组件：分不可操作和可以操作。可操作：如按钮、图标... 不可操作：如分割线...
复合型组件：除了内部元素可操作，卡片本身也可以操作。
透明遮罩：局部渐变遮罩、局部遮罩、全局遮罩。还有特殊的毛玻璃遮罩
拼图：卡片大小不一致且数量有限，拼在一起成为一个整块。
六、加载的定义和场景
1、加载的定义：
加载如同反馈，在人机交互中，用户与界面的每一次互动都是一次加载过程。
因操作导致的页面跳转、刷新或弹窗等从而使页面元素或信息发生变化行为，页面都需要向服务器发送请求信息，服务器接收到后再发送反馈信息，而由于网络及页面自身处理信息的原因导致这个信息对换的过程可能发生延长，从而需要一个“反馈”即加载来缓和用户的等待。加载有快有慢，快得可以让你根本没意识到这种“反馈”，同时慢得也会让你感到崩溃。
因此需要一种设计来缓解用户等待时间内的焦虑感，同时即时反馈页面状态——那就是加载。
2、页面刷新加载中的情感化设计
情感化设计可以用色彩图案文字等，让加载有趣，不仅能够适当降低用户的焦虑感，同时能够
突显品牌或其他信息。
本能层次的设计——外形
行为层次的设计——使用的乐趣和效率
反思层次的设计——自我形象、个人满意、记忆
3、常见的加载场景
状态栏加载：通常在网络不好时，手机顶部会出现的加载样式。
导航栏加载：标题临时变成加载信息的文字提醒，多用于社交类产品，信息的收取。
下拉刷新加载：主动下拉对当前内容进行更新
上拉加载：设计样式越简单越好
进度条加载：用在PC端和移动端浏览器较多。H5多数会采用进度条进行加载。
Toast加载：防止用户进行多余的操作导致数据加载失败，常用来提示。
白屏加载：通过点击页面跳转时，用白屏加载。可以配合tosat弹窗提示。
预设图片加载：为了不让加载的页面布局显得太空，会用LOGO或者预设图片来填充，
同时也可以加深用户对品牌的认知。
色块加载：在内容框架是固定的前提下使用。如花瓣
模糊加载：通常用在多图的界面中，把预加载出来的图片进行高斯模糊处理，勾起用户
的好奇心，减缓用户的等待焦虑。
七、加载的方式
1、分布加载分两种：
先文字后图片优先加载占网络资源较小的元素。如先文字和默认图标后图片，图片加载完成前使用占位符显示。
先框架后加载，当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。
2、懒加载/延迟加载：
比如淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都即「按需加载」，用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。
3、预加载：
通常用在信息流中。当用户浏览A页面时，加载并未停止，而是悄悄在为用户加载B页面的内容，当用户加载看B页面时，立刻去准备 C 页面，给用户提供无缝链接的感觉。
优点：用户不存在等待的焦虑；
缺点：用户去了其它页面或是退出了，就增加了服务器、客户端的压力，又浪费了用户的流量。
4、智能加载
考虑网络流量问题，智能加载不仅需要考虑加载的速度，还需要考虑用户流量成本。因此通常
应用于WIFI和4G网络切换条件下，另外还需产品判定网络是否通畅。
WIFI条件下：优先加载高质量图片、优质音乐和视频；
八、不是为了设计而做设计
设计在哪里？
市场、用户、需求、功能、内容、数据、运营、推广、传播、变现...
小贴士：会慢慢更新优化～
