日更22/100（给美术看的UI出图规范）

从程序角度，目前的项目经验看。发现一些问题，以及程序和美术对接的痛点

1. 由于没有统一的设计和规划，导致UI样式过多，打开资源目录，可以看到大量类似的资源，仅有细微的不同。(内容底、按钮底、标题底图、分割线、进度条、图片数字等等)。
2. 美术给过来示意图，程序每次都要花时间去找那些通用的UI元素对应的图片位置。
3. 需求变更，比如在个人空间新加了一个家族图标；给过来的示意图有时候会发现所以其他元素的位置都变了（细微的位置偏移，导致蒙上去对不齐）。

所以出了这个规范，希望能提升美术和程序的对接效率。（这只是一个单纯的出图规范，不涉及UI统一设计和规划方面的内容，这是主美在一个项目设计之初应考虑好的。）

命名

命名很重要，务必重视。

• 原则是一定要有意义的命名，最好是英文。并且保持统一规范。

为什么要使用好的命名：

1. 好的命名能让人一眼就了解图片的用途，减轻理解的压力
2. 能保持美术与程序图片名字一致，后期替换图片，或者资源复用，程序可以很方便的找到。（如果美术随意命名，程序在使用时可能会改名，导致两边不一致）
3. 提高美术与程序的沟通效率

想要命一个好名字有时候确实伤脑筋，会花费些时间；但是能提高整体效率，对美术同学而言也是一种提高。

关于命名的几点建议

• 一般的UI元素命名规则：模块_用途。例：首充界面背景 FirstRecharge_Bg;结算界面横幅 Summary_Baner;
• 如果同类图片有多个，则根据颜色、尺寸、品质等特征来区分。例：Common_Button_Red,Common_Button_Blue;
  Skill_Magnet,Skill_Magnet_Small;
  AppIcon_64、AppIcon_72、AppIcon_128;（这里64、72、128表示图片尺寸）
  Skin_NameBg_1、Skin_NameBg_2(1、2表示品质)；
• 如果是图标类，例如金币图标 Icon_Gold；钻石图标 Icon_Diamond;
• 如果设计时考虑到以后会复用，最好在命名里体现出来。例如下拉框背景：Common_Dropdown_Bg;下拉框选中底图：Common_Dropdown_Select。
• 尽量用英文，但找不到合适的英文单词或者用英语感觉更难理解时，可酌情使用中文或者拼音。总之一个原则就是规范，易懂。

切图

1. 背景图不带透明通道，且尺寸在2880X1440（适配18：9的屏幕）
2. 图标类的图尺寸尽量为2的次幂
3. 图片应该以主体内容居中,而不是以整个内容居中。
   比如按钮下边有阴影,那么切图时上面也要留出和阴影相同的空白像素，使按钮在图片内居中。否则每次制作按钮，按钮上的文字都得向上偏移几个像素，完全没必要。
   这类图常见的有按钮、头像框、气泡框等
4. 尽量复用（UI框、按钮、进度条、分割线、图片数字等）
   从用户体验的角度讲，习惯界面统一的风格和少数的规矩，要比看起来好看更加重要，因为UI设计的最终目的在于用户体验和操作习惯的养成，而非看起来好看。
   从程序的角度讲，要尽量控制包体的大小和内存的占用。
5. UI的元素（背景框、其他内容框），尽量设计成九宫格。
6. 文字规格（颜色、字号）要有统一的规范。
7. 示意图中如果有通用UI元素，要标识名称以便程序查找
8. 如果是旧界面的变更修改，新的示意图最好是在旧示意图的基础上改，只动需要动的地方。

过几天会再出一个给程序看的UI对接规范。