跳转至

UI规范说明

文件夹划分

UI 素材按照功能用途，分为以下几种大类

  1. 艺术字

image-20220413151300141

  1. 九宫格

三宫，九宫格，等可拉伸素材

image-20220413151423700

  1. 公用

各类功能界面会复用到的资源，基本 UI 框架的组件素材，模块标题等

image-20220413151528304

  1. 图标

也是公用素材的一种，但主要存放图标样式的素材，例如物品图标，技能图标，活动图标

image-20220413151800578

  1. 系统功能

image-20221115112126836

文件夹命名

格式：英文命名-中文备注，每个英文单词首字母要大写，可拼音可中文。如 Public-公用，BeiBao-背包。

文件夹的英文命名在整个UI目录下要是唯一的，如果出现重名情况，程序会指出让美术进行修改。

文件夹内容

image-20221115110915409

  1. Sprite

  2. 该功能的 UI 素材，各类 .png

  3. 自动生成的 tp.tps（Texture Pakcer工程文件）

    image-20221115110803637

  4. BK 大图资源目录

  5. 不透明的各类 .jpg

  6. Transparent
    1. 透明 .png

image-20221115110803637

  1. 子功能文件夹
  2. 美术自用目录，无要求，如效果图

没有相关内容的文件夹可以不创建

素材命名规则

素材要求只能使用小写字母，下划线，数字组合而成，并且尽可能说明素材所属功能、用途

格式：

  1. 大致用途_所属功能_说明_数字.png
  2. 所属功能_大致用途_说明_数字.png

例子

命名 含义
img_beibao.png 背包图片
btn_pet_gaoliang_1.png 宠物高亮按钮图片
mask_black.png 黑色蒙版

以下提供一些功能或用途的缩写以供参考

功能 缩写
一般素材 img
按钮 btn
标签 tag
图标 icon
遮罩 mask
进度条 sld
背景 bk
公用 public
基础（如基本的UI框架素材） base
注意
  1. 数字一般放最后
  2. 不要使用拼音缩写
  3. 艺术字特殊处理，不受以上限制
  4. 如果程序对素材有命名需求，可根据程序要求命名

进度条命名规则

img_sld_颜色_形状_亮暗

进度条（绿色举例）

  • img_sld_green_circle -- 圆形绿色进度条
  • img_sld_green_rect -- 矩形绿色进度条

切图名称

  • img_sld_bg_circle_light -- 圆形绿色进度条背景亮色
  • img_sld_bg_circle_dark -- 圆形绿色进度条背景暗色
  • img_sld_bg_rect_light -- 矩形绿色进度条背景亮色
  • img_sld_bg_rect_dark -- 矩形绿色进度条背景暗色

进度条预制名称（美术pxCook对象名称）

  • img_sld_green_circle_light
  • img_sld_green_circle_dark
  • img_sld_green_rect_light
  • img_sld_green_rect_dark

九宫格调整

九宫格尽可能放对应的系统功能目录

可拉伸素材需要美术在 Sprite 下的 tp.tps 中对拉伸区域进行调整。

当提交了 Sprite 目录后，工具会自动的创建 tp.tps 到 Sprite 目录，只需更新下就能在本地看到。（时间一般会在 10s 内，如果没有自动生成，联系客户端）

双击打开 tp.tps 就会打开 Texture Packer.exe，在左边双击需要调整小图，就可以调整九宫格边界。调整完毕后记得点击保存，并提交 tp.tps 文件。

image-20221115113042005

image-20221115113217796

image-20221115113320352

本地化资源处理

~~素材带名字需要带上"word"指明~~

由于以上方法会影响程序使用素材的方式，所以改成由美术/策划统一标注这些素材进行管理，使用客户端提供的工具处理。

命名调整

在项目迭代中，素材重命名不可避免。客户端提供工具定时检测资源变更情况，发生变更当天会同步给美术，让美术将新命名同步到内部资源库。

字体颜色设置

项目颜色通过色号来描述颜色，目前预留有 1 - 50 的色号。如果需要新增色号需要通知客户端处理。

需要调整颜色，美术直接修改 Client/project/Assets/TextAssets/Config/GameColorConfig.json 即可。

image-20230105172410083

出图注意事项

出图的原则是，尽可能不创建冗余素材，不跨模块使用素材

  • 尽量出九宫格拉伸资源
  • 对称资源，出一半即可
  • 极端尺寸比例的素材，考虑切分，如 488 * 4，可考虑分为两段 256 * 4 以下的素材拼接
  • 中间或大部分区域透明 只是散列一些小图的情况。将散列资源单独切出
  • 出图尺寸靠近 16，32，64，128，256，512，1024时，尽量让尺寸往小的一边靠。例如长 516 的素材，考虑调整尺寸为 512 及以下。
  • 背景大图，尽量往多模块复用方向设计，小量差异可用 小图装饰，颜色，蒙版，氛围去实现
  • 避免模块资源穿插使用情况，保证模块资源只由自身模块及公用资源组成。如果真的出现跨模块使用素材，就应该考虑资源是否应该放在公共目录下