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

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

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

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

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

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

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

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

准备工作2

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

我的命名方法是:

Ø  特效序列图类: ef+序号数字, 序号数字从1开始, 以此类推比如ef1.png,ef2.png


Ø  按钮(文件夹名:bt即button), bt+序号数字+横线"-"+状态数字, 状态数字分别用1,2,3代表按钮的普通态, 点击态和禁用态, 没有"选中态"是因为与美术沟通后, 确定项目中的按钮选中态复用点击态的资源. 如bt1-1.png,bt1-2.png,bt1-3.png


Ø  图标和背景(文件夹名:bg即background),bg+序号数字, 这里将图标也归在此类. 需要注意的是, 对于可点击的图标, 需要归为按钮类, 一是我的分类原则以功能划分, 二是这样方便管理是否有可点击的图素却没有对应的多态资源.


Ø  进度条和滚动条(文件夹名:bar),bar+序号数字+状态数字, 状态数字分别用1,2代表进度条的前景和背景图片, 如bar1-1.png,bar1-2.png


Ø  图片文字(文件夹名:word),word+序号数字


Ø  字库(文件夹名:ziku), ziku+序号数字



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


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


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

Ø  顶部, 放置美术假图, 注意:如果没有特殊需求, 图片均应放入页面后使用Axure的图片优化进行优化, 只要保证可以清晰分辨出图片内容即可, 因为美术的假图原始图片文件体积可能非常大, 随着假图维护的增加, 会导致Axure源文件体积巨大, 导致运行效率下降。

Ø  在页面的其他部分(我的习惯是由上至下), 罗列出所有的图素资源图示及文件名, 此处需要注意, 所有的图素资源, 均制作为母版, 每一个图素资源对应一个母版, 这是该方法中最核心的一环处理, 如图所示:



Ø  母版内的内容以"bt1-1.png"为例, 母版名称为不带文件后缀的文件名称, 母版内需要包含, 图片本身, 以及图片名称文本(不带文件后缀). 图片尺寸如无特殊需求(比如过于庞大), 则尽量保持资源原尺寸即可. 如下图:



母版化之后, 我们需要做的就是, 针对每一个假图中的图素 :如果是新增的, 就继续添加母版, 然后拖拽进假图说明页面; 如果是已有的, 则直接拖拽进假图说明页面.

在假图页面, 还可以补充部分说明, 描述其使用需求, 如特效序列图"ef1.png":


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


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

维护方法补充

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

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

方式一 : 导出html网页, 客户端直接查看html.
方式二 : 直接使用Axure打开RP查看, 不建议, 避免误修改RP. 而且随着内容的增加, RP打开的速度也在下降.
方式三 : 使用Axure的导出文档功能, 导出页面说明文档, 该文档内就包含全部页面的图片预览.
其他方式 : 能够满足传递需求的任何你或你的项目达成共识的方法.

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

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


需求三 : 由于需求变动, 部分页面假图更新, 导致了某些图素不再在对应的假图中使用, 此时如何维护.

1) 更新美术资源目录
2) 更新对应Axure页面的假图
3) 根据美术假图的更新, 在该假图所对应的页面中删除已经不再该界面使用的图素母版, 并且检查, 该资源是否还在其他页面使用(右键-使用情况), 如果该资源已经不在任何界面使用了, 则可以在资源目录删除该图素资源, 并且在Axure的母版列表中, 删除该母版, 此处涉及到一个命名连续的问题, 即你是否要将这个已经作废的母版的名称作为后续新增图素的母版名称, 也可以选择并不复用已删除母版的名称, 完全根据个人喜好决定. (如果要保留名称给新增的母版, 则需要能有效管理哪些名称的母版已经被删除了可以复用名称)

需求四 : 我的项目已经有了几百个图素资源, 如何快速找到指定图素资源的母版并进行编辑?

如下图在母版上方的工具栏, 点击放大镜图标, 可以通过母版名称进行快速搜索, 支持模糊搜索.


其他需求 : 你还有什么要说的么?

这里所说的只是这个方法的核心内容, 具体细节, 还需要各位看官根据自身和项目的情况, 在实践中去斟酌和选择适合自己的方式去完善. 古诗有云: 古人学问无遗力, 少壮工夫老始成. 纸上得来终觉浅, 绝知此事要躬行, 绝知此事要躬行, 绝知此事要躬行.

附录 : Q&A
Q:什么样的项目适合该方法?

A:理论上来说, 所有的项目都适合. 但是有一个趋势, 就是, 项目的界面假图数量越多, 项目的图素资源越多, 则作为维护核心的RP体积会越大, 同样配置的电脑则运行越慢.笔者使用该方法的项目是一款卡牌项目, 界面数量100+, UI图素资源总数量1000以内. 有一个技巧, RP项目过大时, 修改Axure的备份设时间间隔为一个较长的世界, 6小时, 或是也可以取消自动备份功能.


Q:哪些美术资源适合使用该方法进行管理?

A:纯图片.

Q:是否我使用了该方法就一定能制作出成功的项目?

A:一个项目的成功从立项到实施到上线到最后成功因素众多, 本文只描述了这漫长庞杂过程中的沧海一粟, 影响有限, 更不能妄称可以导致项目成功. 但是提高工作效率, 降低维护难度的作用是一定的.

Q:项目中谁来进行这一部分的工作?

A:这里有两层含义: 1谁来规范化的维护美术资源2 谁来使用本文的方法. 对于前者, 不同项目要求不同; 对于后者, 那么就是对目前维护方式不满意, 致力于改善资源维护过程的维护者.

Q:我并不擅长使用Axure怎么办?

A:那么不建议使用该方法, 体会其思路即可.

Q:你自己用过这种方法么? 是完整的项目么?

A:用过, 是的.

Q:如何在Axure中优化图片减少体积?

A:右键图片, 菜单中选择"优化图片"

最后祝看完本文的你能够有所收获

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多
【爆款新游】【潜力佳作】分析系列
推广