返回首页

基于Axure软件的项目UI资源管理方法

时间:2015-11-25 20:49来源:知行网www.zhixing123.cn 编辑:麦田守望者

在项目开发中, 美术资源的管理如果没有进行过规划, 则会随着项目规模的扩大和需求修改的增加而变得越来越花费时间和精力, 本文总结了一套使用Axure RP(版本7.0.0.3183)软件来进行美术资源管理的解决方案, 将详细解释如何利用该方法与客户端开发高效进行需求沟通, 并避免需求修改后的资源冗余, 以及提前检查资源更新后会影响到的界面避免误修改等问题, 并且会将具体执行中的一些细节进行阐述.

总结该方法的契机是完成了一个项目后, 客户端资源管理存在很多问题, 占用了从客户端到策划再到美术的不同人员的可观的时间和精力, 于是在一个新进行的项目便根据自己的总结逐渐摸索着使用了该方法, 效果非常好, 当然我的工作比之前多了一些, 不过对于整个项目, 开发效率还是提升了的. 实际上, 如果不进行有效的美术资源管理, 在后续的开发过程中因为该事情而付出的时间和精力很可能远远大于使用该方法进行的维护工作.

注意事项: 例如道具图标这种配置在数据表中, 根据数据id动态读取路径的图片资源并不需要使用该方法进行管理, 虽然需要根据情况显示在界面中, 但是其并不属于界面”UI资源”的范畴.

首先, 某个系统的界面需求确定后, 将把需求交付给美术部门, 沟通达成一致后, 美术将产出美术假图, 并且产出美术假图中的各个具体得图素资源(如图标, 按钮等)

此时接下来的工作就是, 提交美术假图和图素资源, 并且告知客户端进行界面的开发实现. 在这之前我们进行以下准备工作:

准备工作1

在客户端程序读取美术资源的目录, 建立图素资源文件夹, 不同类型的图素存储在不同的文件夹, 分类的主要目的还是便于管理, 我使用的分类是:

  • 特效序列图 (文件夹名:ef即effect), 特点是特效动画的序列帧合并图.
  • 按钮(文件夹名:bt即button), 包括一般按钮和tab标签按钮, 以及复选框和单选框.
  • 背景和边框(文件夹名:bg即background)
  • 进度条和滚动条(文件夹名:bar).
  • 图片文字(文件夹名:word).
  • 字库(文件夹名:ziku), 图片文字与字库的区别是, 图片文字是一张图就是一个词或是一个短语, 字库则是艺术字的字体序列图.
  • P7631@`BFBXZJ(0[I~LI[7E

准备工作2

整理美术的图素资源, 并进行重命名, 然后根据图素资源的类别提交到上述步骤的对应文件夹内. 重命名工作源于两个可能的因素, 一是美术部门产出的图素资源, 可能是中文名称, 这种情况下必须修改资源名称为英文; 二是美术部门产出的图素资源与已制作的其他图素重名, 但是又不是同一作用的图素, 此时最好也进行改名, 否则易成日后资源管理混乱的隐患. 如果你的项目已经对美术的产出进行了严格的命名要求, 并且能够有效的执行, 则不需要对资源进行重命名, 具体情况还需要具体分析.

我的命名方法是:

  • 特效序列图类: ef+序号数字, 序号数字从1开始, 以此类推比如png, ef2.png
  • DJ0BFR`R[H61RYD1OLAT~51
  • 按钮(文件夹名:bt即button), bt+序号数字+横线”-“+状态数字, 状态数字分别用1,2,3代表按钮的普通态, 点击态和禁用态, 没有”选中态”是因为与美术沟通后, 确定项目中的按钮选中态复用点击态的资源. 如bt1-1.png,bt1-2.png,bt1-3.png
  • 74711AB426DD485FA15D4D0BEDD784AC
  • 图标和背景(文件夹名:bg即background), bg+序号数字, 这里将图标也归在此类. 需要注意的是, 对于可点击的图标, 需要归为按钮类, 一是我的分类原则以功能划分, 二是这样方便管理是否有可点击的图素却没有对应的多态资源.
  • 883FDC24C438407482BC8FDBF42E738F
  • 进度条和滚动条(文件夹名:bar), bar+序号数字+状态数字, 状态数字分别用1,2代表进度条的前景和背景图片, 如bar1-1.png,bar1-2.png
  • 45ECD4A90A2647DB8DBBCB0468B13419
  • 图片文字(文件夹名:word), word+序号数字
  • 4D191EAE8E7F4C5BB6E386F8CEA286F6
  • 字库(文件夹名:ziku), ziku+序号数字
  • 9C053AD977984509A431AECFB4F4E307

Axure文件制作

上述准备工作完成后, 就可以新建Axure项目, 对美术资源进行管理, 如图:

FC66F7EF223944FAB1019AF44E00713A

图中内容与美术提交的假图对应, 即, 有一个存放假图的文件夹叫”登录系统”并且内含三张假图, 如下图所示:

764709A1782D49B3845FAD871ABB3914

 

接着, 以”游戏开始界面”页面为例, 说明Axure页面内应该包含的信息:

  • 顶部, 放置美术假图, 注意:如果没有特殊需求, 图片均应放入页面后使用Axure的图片优化进行优化, 只要保证可以清晰分辨出图片内容即可, 因为美术的假图原始图片文件体积可能非常大, 随着假图维护的增加, 会导致Axure源文件体积巨大, 导致运行效率下降.
  • 在页面的其他部分(我的习惯是由上至下), 罗列出所有的图素资源图示及文件名, 此处需要注意, 所有的图素资源, 均制作为母版, 每一个图素资源对应一个母版, 这是该方法中最核心的一环处理, 如图所示:
  • 21CF7080D8D64118A7D2EFC63F9A31CF
  • 母版内的内容以”bt1-1.png”为例, 母版名称为不带文件后缀的文件名称, 母版内需要包含, 图片本身, 以及图片名称文本(不带文件后缀). 图片尺寸如无特殊需求(比如过于庞大), 则尽量保持资源原尺寸即可. 如下图:
  • 90929F73CD8A4073BB7207064C127C3B

 

母版化之后,我们需要做的就是,针对每一个假图中的图素 : 如果是新增的,就继续添加母版,然后拖拽进假图说明页面; 如果是已有的,则直接拖拽进假图说明页面. 
 
在假图页面,还可以补充部分说明,描述其使用需求,如特效序列图”ef1.png”: 完成以上步骤后,我们就制作完成了”游戏开始界面”的Axure假图说明页,如下图:
A5439C1D832341C49A051E2E0EB5619F

完成以上步骤后, 我们就制作完成了”游戏开始界面”的Axure假图说明页, 图中蒙红部分即为拖拽进的图素母版. 如下图:

8F30A7AA23D44608A47A35E20D289F62

至此, 美术有新增的假图后, 继续按照上述步骤和规范迭代维护即可.

 

维护方法补充

下面来描述一下使用该方法进行资源管理过程中针对不同需求的解决方法:

需求一 : 将制作好的假图说明内容交付客户端开发人员.

方式一 : 导出html网页, 客户端直接查看html.

方式二 : 直接使用Axure打开RP查看, 不建议, 避免误修改RP. 而且随着内容的增加, RP打开的速度也在下降.

方式三 : 使用Axure的导出文档功能, 导出页面说明文档, 该文档内就包含全部页面的图片预览.

其他方式 : 能够满足传递需求的任何你或你的项目达成共识的方法.

 

需求二 : 美术资源部分更新, 针对A页面的按钮1, 此时需要清楚该按钮在其他页面的使用情况, 以便于决定是新增资源还是替换旧资源.

右键对应的按钮文件图素母版, 如”bt1-1″, 在弹出菜单中选择”使用情况”, 如下图, 即可快速知道该按钮都在哪些界面中使用过.

30884AC6474F482692BAC0073658F617

 

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):Axure
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片