从程序角度，目前的项目经验看。发现一些问题，以及程序和美术对接的痛点
- 由于没有统一的设计和规划，导致UI样式过多，打开资源目录，可以看到大量类似的资源，仅有细微的不同。(内容底、按钮底、标题底图、分割线、进度条、图片数字等等)。
- 美术给过来示意图，程序每次都要花时间去找那些通用的UI元素对应的图片位置。
- 需求变更，比如在个人空间新加了一个家族图标；给过来的示意图有时候会发现所以其他元素的位置都变了（细微的位置偏移，导致蒙上去对不齐）。
所以出了这个规范，希望能提升美术和程序的对接效率。（这只是一个单纯的出图规范，不涉及UI统一设计和规划方面的内容，这是主美在一个项目设计之初应考虑好的。）
命名
命名很重要，务必重视。
- 原则是一定要有意义的命名，最好是英文。并且保持统一规范。
为什么要使用好的命名：
- 好的命名能让人一眼就了解图片的用途，减轻理解的压力
- 能保持美术与程序图片名字一致，后期替换图片，或者资源复用，程序可以很方便的找到。（如果美术随意命名，程序在使用时可能会改名，导致两边不一致）
- 提高美术与程序的沟通效率
想要命一个好名字有时候确实伤脑筋，会花费些时间；但是能提高整体效率，对美术同学而言也是一种提高。
关于命名的几点建议
- 一般的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。
- 尽量用英文，但找不到合适的英文单词或者用英语感觉更难理解时，可酌情使用中文或者拼音。总之一个原则就是规范，易懂。
切图
- 背景图不带透明通道，且尺寸在2880X1440（适配18：9的屏幕）
- 图标类的图尺寸尽量为2的次幂
-
图片应该以主体内容居中,而不是以整个内容居中。
比如按钮下边有阴影,那么切图时上面也要留出和阴影相同的空白像素，使按钮在图片内居中。否则每次制作按钮，按钮上的文字都得向上偏移几个像素，完全没必要。
这类图常见的有按钮、头像框、气泡框等 - 尽量复用（UI框、按钮、进度条、分割线、图片数字等）
从用户体验的角度讲，习惯界面统一的风格和少数的规矩，要比看起来好看更加重要，因为UI设计的最终目的在于用户体验和操作习惯的养成，而非看起来好看。
从程序的角度讲，要尽量控制包体的大小和内存的占用。 - UI的元素（背景框、其他内容框），尽量设计成九宫格。
- 文字规格（颜色、字号）要有统一的规范。
- 示意图中如果有通用UI元素，要标识名称以便程序查找
- 如果是旧界面的变更修改，新的示意图最好是在旧示意图的基础上改，只动需要动的地方。
过几天会再出一个给程序看的UI对接规范。
网友评论