写在前面：规范并非死规矩，并非只能在规范内进行绘图，而是在可控范围内，尽量地在规范内绘图，让设计有迹可循。

基础概念

在设定设计稿分辨率前，首先需要了解屏幕分辨率，以及开发分辨率。以安卓机型为主。

屏幕分辨率

倍数	开发端	标准屏(比例9:16)	长屏/异形屏(比例<9:16)
1x	客户端&页端	360x640	360x760	360x800
2x	cocos开发	720x1280	720x1520	720x1600
3x	1080x1920	1080x2280	1080x2400

Note
1、cocos开发环境的分辨率一般依设计稿而定，一般为720以上；
2、cocos的分辨率可以依照屏幕大小来等比放大，即：720x1280环境下开发的游戏，如果用户机型1080x1920，则直接等比放大1.5倍；
3、因为水滴/刘海屏的缘故，客户端开发会读取用户手机的状态栏，将素材自动下移进行适配，以免顶部的内容被刘海屏盖住，UI设计时，顶部最好预留44dp(数据来源iPhone
X)的安全区。

设计稿尺寸

当前游戏团队：旧分辨率720x1280，当前用750x1334。

	倍数	适用平台	为什么选用
720x1280	2x	Android	公司目前的主要运营平台在Android
750x1334	2x	iOS	为了兼容iOS平台(iPhone8之前的设备)

Note
1、实机看app，之所以会模糊，是因为用户机型分辨率为3x，而开发环境是2x，系非矢量图形被放大后模糊导致，所以使用750的设计稿，同样用处不大；
2、即使是为了适配iOS端，750x1334的分辨率在iPhone 6 之后的plus后也不再适用，尤其是X之后的机型，都是3x；
3、素材模糊的治本的方法是使用3x稿，向下兼容；而不是用2x稿，向上兼容；
4、750的设计稿和开发尺寸，在720的安卓机上，会有偏差，需要手动将720的测试图拉伸到750进行校对。

——————————————————————

为什么选用2x的设计稿尺寸？
1、客户端：安装包体积考虑；页端：如果是3x，服务器流量费很贵，因为需要下发图片。
2、如果不考虑体积，客户端建议按照3x稿进行设计。
分辨率概念——同样大小的手机，容纳不同的像素点；

机型分辨率占比，以《柚子计步》为例。

一致性

颜色

主题色

?确定主题色，并且定义颜色的意义；

?应用场景：按钮、图标等。

备注
1、确定好主题色面板、并定义了颜色意义后，后续的设计中应直接复制颜色数值进行使用，防止不同的设计师负责同一个项目时，出现颜色偏差的问题，保持颜色的一致性；
2、游戏UI的图标比较特殊，不必过于纠结主题色问题。

字体色

?确定文字主要色，并且定义颜色的意义；

?应用场景：正文、辅助文字、高亮利益点等。

备注
1、确定好文字颜色面板、并定义了颜色意义后，后续的设计中应直接复制颜色数值进行使用，同一个项目内文字颜色规范应该遵循一致性原则(特殊情况另作处理)。

——————————————————— 一些栗子 ——————————————————————

文字颜色不统一；弹窗背景颜色不统一；高亮的标签框颜色不统一 ⬇️

文字颜色规范比较混乱，没有层级；关闭按钮没有一致性 ⬇️

字体&字号

?确定文本字体，确定文字字号的大小、是否加粗、描边值、行距，并且定义字号的使用场景。

?应用场景：标题字号、正文字号、辅助文字字号(最小字号)等。

正常情况下，可阅读最小字号不小于12dp，为了避免中老年用户阅读困难，除了不重要的辅助文字外，其他字号12dp以上为佳。

备注
1、文本字体最好以「免费商用」为基准来考虑，否则日后或许会有版权问题；
2、确定好字体以及字号后，后续作图过程中，尽量保持一致性原则；
3、字号需要根据不同项目组的目标人群需要来进行设定，例如我司的目标人群基本是中老年，则需要做好适老化的考虑。
4、拓展阅读1：百度MEUX：适老化设计标准研究(注：资讯类、内容类)
拓展阅读2：适老化设计