打卡第十四天-UI设计规范总结
做界面要遵循：
1.操作平台设计规范
2.公司的设计规范
3.产品内设计规范
首先要确定目标用户、用户目标、设计目标后，再进行设计执行。下图借用一下腾讯云的整理规范：
1.图标规范
图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
a.像素对齐
需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，否则最终的显示效果就会出现问题。
b.用布尔运算
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处可以让图标更加规范，对图形结构理解更加深刻，而且后期更改形状会更加方便
c.独特的风格
在做系列图标的时候，前期一定要给图标设定一个风格及原则，使之看起来与众不同。在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。
d.视觉大小统一
在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。在图标的设计中，我们也必须要有品牌意识。简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题的作品，提升自己的平面设计能力。
2.标注规范
因为导航栏和标签栏通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。
a.尺寸
注意有圆角的地方，需要将圆角半径标出。
对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。
一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。要理解适配的原理，不要将一些控件给出固定的尺寸大小，如果你将这个按钮的宽度和高度都标注出来，开发就会将这个按钮的大小写死，一旦遇到屏幕（白色区域）较宽的时候，按钮还是固定大小，就会影响视觉效果。
所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应（当然高度还是要固定的）,这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。
b.文字
需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了，但是如果标题文字过多的时候该怎么处理呢？所以必须要给出一个极限情况的规范，比如最多显示多少个字符，字符超过极限值就用打点的方式处理。
c.间距
间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题
d.颜色
需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项：切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。
3.命名规范
统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率。程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发直接替换就可以了。
a.所有命名全部为小写英文字母
b.命名格式
一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。
通用切片命名格式：
组件_类别_功能_状态@2x.png
举例：[email protected]（对应中文：标签栏_图标_主页_默认@2x.png）
模块特有切图命名规则：
模块_类别_功能_状态@2x.png
举例：[email protected]（对应的中文为：邮件_图标_搜索_默认@2x.png）
我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。（要注意，命名中不能含有空格）
c.常用英文单词
如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。
下面提供一些常见的：
bg（backgrond 背景）
nav（navbar 导航栏）
tab（tabbar 标签栏）
btn（button 按钮）
img（image 图片）
del（delete 删除）
msg（message 提示信息）
pop（pop up 弹出）
icon（图标）
selected（选中）
disabled（不可点击）
default（默认）
pressed（按下）
back（返回）
edit（编辑）
content（内容）
4.交互规范
简化操作：能一步完成的交互就不要分两步。
用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。
减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。
快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。
界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。
5.图片处理规范
a.图片统一性
1）图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。
2）图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。
b.图片细节处理
1）图片精度不够（这里所说的精度不是说DPI分辨率需要300哦，那是做高精度印刷输出时才需要的。而在电脑及手机上的图片DPI分辨率为72即可，另外输出图片时需适当压缩一下图片的大小）、杂色太多可以使用PS内置的CR滤镜处理。
2）图片尺寸建议统一为偶数值，方便前端技术人员开发。
3）图片边缘避免与白色背景融合，可以在边缘位置加色。
4）为了配合标题字体，图片可以局部调亮或调暗。
6.动效规范
会做点动效会给我们加分不少，尤其是做一些加载动画，这是我们经常会遇到的需求。
1）不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。
2）任何交互动作所导致的状态都需要考虑正常状态与异常状态。
拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。
3）动效使用的工具：可以PS做一些动态表情，用AE做一些加载动画，页面之间的交互动效可以使用Flinto、Principle等。