怎么用Axure軟件管理項(xiàng)目中的美術(shù)資源 從而提高效率
發(fā)布時(shí)間:2022-03-19 10:32 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 1776

在項(xiàng)目開(kāi)發(fā)中, 美術(shù)資源的管理如果沒(méi)有進(jìn)行過(guò)規(guī)劃, 則會(huì)隨著項(xiàng)目規(guī)模的擴(kuò)大和需求修改的增加而變得越來(lái)越花費(fèi)時(shí)間和精力, 本文總結(jié)了一套使用Axure RP(版本7.0.0.3183)軟件來(lái)進(jìn)行美術(shù)資源管理的解決方案, 將詳細(xì)解釋如何利用該方法與客戶端開(kāi)發(fā)高效進(jìn)行需求溝通, 并避免需求修改后的資源冗余, 以及提前檢查資源更新后會(huì)影響到的界面避免誤修改等問(wèn)題, 并且會(huì)將具體執(zhí)行中的一些細(xì)節(jié)進(jìn)行闡述.

總結(jié)該方法的契機(jī)是完成了一個(gè)項(xiàng)目后, 客戶端資源管理存在很多問(wèn)題, 占用了從客戶端到策劃再到美術(shù)的不同人員的可觀的時(shí)間和精力, 于是在一個(gè)新進(jìn)行的項(xiàng)目便根據(jù)自己的總結(jié)逐漸摸索著使用了該方法, 效果非常好, 當(dāng)然我的工作比之前多了一些, 不過(guò)對(duì)于整個(gè)項(xiàng)目, 開(kāi)發(fā)效率還是提升了的. 實(shí)際上, 如果不進(jìn)行有效的美術(shù)資源管理, 在后續(xù)的開(kāi)發(fā)過(guò)程中因?yàn)樵撌虑槎冻龅臅r(shí)間和精力很可能遠(yuǎn)遠(yuǎn)大于使用該方法進(jìn)行的維護(hù)工作.

注意事項(xiàng): 例如道具圖標(biāo)這種配置在數(shù)據(jù)表中, 根據(jù)數(shù)據(jù)id動(dòng)態(tài)讀取路徑的圖片資源并不需要使用該方法進(jìn)行管理, 雖然需要根據(jù)情況顯示在界面中, 但是其并不屬于界面”UI資源”的范疇.

首先, 某個(gè)系統(tǒng)的界面需求確定后, 將把需求交付給美術(shù)部門, 溝通達(dá)成一致后, 美術(shù)將產(chǎn)出美術(shù)假圖, 并且產(chǎn)出美術(shù)假圖中的各個(gè)具體得圖素資源(如圖標(biāo), 按鈕等)

此時(shí)接下來(lái)的工作就是, 提交美術(shù)假圖和圖素資源, 并且告知客戶端進(jìn)行界面的開(kāi)發(fā)實(shí)現(xiàn). 在這之前我們進(jìn)行以下準(zhǔn)備工作:

準(zhǔn)備工作1

在客戶端程序讀取美術(shù)資源的目錄, 建立圖素資源文件夾, 不同類型的圖素存儲(chǔ)在不同的文件夾, 分類的主要目的還是便于管理, 我使用的分類是:

  • 特效序列圖 (文件夾名:ef即effect), 特點(diǎn)是特效動(dòng)畫的序列幀合并圖.
  • 按鈕(文件夾名:bt即button), 包括一般按鈕和tab標(biāo)簽按鈕, 以及復(fù)選框和單選框.
  • 背景和邊框(文件夾名:bg即background)
  • 進(jìn)度條和滾動(dòng)條(文件夾名:bar).
  • 圖片文字(文件夾名:word).
  • 字庫(kù)(文件夾名:ziku), 圖片文字與字庫(kù)的區(qū)別是, 圖片文字是一張圖就是一個(gè)詞或是一個(gè)短語(yǔ), 字庫(kù)則是藝術(shù)字的字體序列圖.
  • P7631@`BFBXZJ(0[I~LI[7E

準(zhǔn)備工作2

整理美術(shù)的圖素資源, 并進(jìn)行重命名, 然后根據(jù)圖素資源的類別提交到上述步驟的對(duì)應(yīng)文件夾內(nèi). 重命名工作源于兩個(gè)可能的因素, 一是美術(shù)部門產(chǎn)出的圖素資源, 可能是中文名稱, 這種情況下必須修改資源名稱為英文; 二是美術(shù)部門產(chǎn)出的圖素資源與已制作的其他圖素重名, 但是又不是同一作用的圖素, 此時(shí)最好也進(jìn)行改名, 否則易成日后資源管理混亂的隱患. 如果你的項(xiàng)目已經(jīng)對(duì)美術(shù)的產(chǎn)出進(jìn)行了嚴(yán)格的命名要求, 并且能夠有效的執(zhí)行, 則不需要對(duì)資源進(jìn)行重命名, 具體情況還需要具體分析.

我的命名方法是:

  • 特效序列圖類: ef+序號(hào)數(shù)字, 序號(hào)數(shù)字從1開(kāi)始, 以此類推比如png, ef2.png
  • DJ0BFR`R[H61RYD1OLAT~51
  • 按鈕(文件夾名:bt即button), bt+序號(hào)數(shù)字+橫線”-“+狀態(tài)數(shù)字, 狀態(tài)數(shù)字分別用1,2,3代表按鈕的普通態(tài), 點(diǎn)擊態(tài)和禁用態(tài), 沒(méi)有”選中態(tài)”是因?yàn)榕c美術(shù)溝通后, 確定項(xiàng)目中的按鈕選中態(tài)復(fù)用點(diǎn)擊態(tài)的資源. 如bt1-1.png,bt1-2.png,bt1-3.png
  • 74711AB426DD485FA15D4D0BEDD784AC
  • 圖標(biāo)和背景(文件夾名:bg即background), bg+序號(hào)數(shù)字, 這里將圖標(biāo)也歸在此類. 需要注意的是, 對(duì)于可點(diǎn)擊的圖標(biāo), 需要?dú)w為按鈕類, 一是我的分類原則以功能劃分, 二是這樣方便管理是否有可點(diǎn)擊的圖素卻沒(méi)有對(duì)應(yīng)的多態(tài)資源.
  • 883FDC24C438407482BC8FDBF42E738F
  • 進(jìn)度條和滾動(dòng)條(文件夾名:bar), bar+序號(hào)數(shù)字+狀態(tài)數(shù)字, 狀態(tài)數(shù)字分別用1,2代表進(jìn)度條的前景和背景圖片, 如bar1-1.png,bar1-2.png
  • 45ECD4A90A2647DB8DBBCB0468B13419
  • 圖片文字(文件夾名:word), word+序號(hào)數(shù)字
  • 4D191EAE8E7F4C5BB6E386F8CEA286F6
  • 字庫(kù)(文件夾名:ziku), ziku+序號(hào)數(shù)字
  • 9C053AD977984509A431AECFB4F4E307

Axure文件制作

上述準(zhǔn)備工作完成后, 就可以新建Axure項(xiàng)目, 對(duì)美術(shù)資源進(jìn)行管理, 如圖:

FC66F7EF223944FAB1019AF44E00713A

圖中內(nèi)容與美術(shù)提交的假圖對(duì)應(yīng), 即, 有一個(gè)存放假圖的文件夾叫”登錄系統(tǒng)”并且內(nèi)含三張假圖, 如下圖所示:

764709A1782D49B3845FAD871ABB3914

 

接著, 以”游戲開(kāi)始界面”頁(yè)面為例, 說(shuō)明Axure頁(yè)面內(nèi)應(yīng)該包含的信息:

  • 頂部, 放置美術(shù)假圖, 注意:如果沒(méi)有特殊需求, 圖片均應(yīng)放入頁(yè)面后使用Axure的圖片優(yōu)化進(jìn)行優(yōu)化, 只要保證可以清晰分辨出圖片內(nèi)容即可, 因?yàn)槊佬g(shù)的假圖原始圖片文件體積可能非常大, 隨著假圖維護(hù)的增加, 會(huì)導(dǎo)致Axure源文件體積巨大, 導(dǎo)致運(yùn)行效率下降.
  • 在頁(yè)面的其他部分(我的習(xí)慣是由上至下), 羅列出所有的圖素資源圖示及文件名, 此處需要注意, 所有的圖素資源, 均制作為母版, 每一個(gè)圖素資源對(duì)應(yīng)一個(gè)母版, 這是該方法中最核心的一環(huán)處理, 如圖所示:
  • 21CF7080D8D64118A7D2EFC63F9A31CF
  • 母版內(nèi)的內(nèi)容以”bt1-1.png”為例, 母版名稱為不帶文件后綴的文件名稱, 母版內(nèi)需要包含, 圖片本身, 以及圖片名稱文本(不帶文件后綴). 圖片尺寸如無(wú)特殊需求(比如過(guò)于龐大), 則盡量保持資源原尺寸即可. 如下圖:
  • 90929F73CD8A4073BB7207064C127C3B

 

母版化之后,我們需要做的就是,針對(duì)每一個(gè)假圖中的圖素 : 如果是新增的,就繼續(xù)添加母版,然后拖拽進(jìn)假圖說(shuō)明頁(yè)面; 如果是已有的,則直接拖拽進(jìn)假圖說(shuō)明頁(yè)面. 
在假圖頁(yè)面,還可以補(bǔ)充部分說(shuō)明,描述其使用需求,如特效序列圖”ef1.png”:完成以上步驟后,我們就制作完成了”游戲開(kāi)始界面”的Axure假圖說(shuō)明頁(yè),如下圖:
A5439C1D832341C49A051E2E0EB5619F

完成以上步驟后, 我們就制作完成了”游戲開(kāi)始界面”的Axure假圖說(shuō)明頁(yè), 圖中蒙紅部分即為拖拽進(jìn)的圖素母版. 如下圖:

8F30A7AA23D44608A47A35E20D289F62

至此, 美術(shù)有新增的假圖后, 繼續(xù)按照上述步驟和規(guī)范迭代維護(hù)即可.

 

維護(hù)方法補(bǔ)充

下面來(lái)描述一下使用該方法進(jìn)行資源管理過(guò)程中針對(duì)不同需求的解決方法:

需求一 : 將制作好的假圖說(shuō)明內(nèi)容交付客戶端開(kāi)發(fā)人員.

方式一 : 導(dǎo)出html網(wǎng)頁(yè), 客戶端直接查看html.

方式二 : 直接使用Axure打開(kāi)RP查看, 不建議, 避免誤修改RP. 而且隨著內(nèi)容的增加, RP打開(kāi)的速度也在下降.

方式三 : 使用Axure的導(dǎo)出文檔功能, 導(dǎo)出頁(yè)面說(shuō)明文檔, 該文檔內(nèi)就包含全部頁(yè)面的圖片預(yù)覽.

其他方式 : 能夠滿足傳遞需求的任何你或你的項(xiàng)目達(dá)成共識(shí)的方法.

 

需求二 : 美術(shù)資源部分更新, 針對(duì)A頁(yè)面的按鈕1, 此時(shí)需要清楚該按鈕在其他頁(yè)面的使用情況, 以便于決定是新增資源還是替換舊資源.

右鍵對(duì)應(yīng)的按鈕文件圖素母版, 如”bt1-1″, 在彈出菜單中選擇”使用情況”, 如下圖, 即可快速知道該按鈕都在哪些界面中使用過(guò).

30884AC6474F482692BAC0073658F617

 

需求三 : 由于需求變動(dòng), 部分頁(yè)面假圖更新, 導(dǎo)致了某些圖素不再在對(duì)應(yīng)的假圖中使用, 此時(shí)如何維護(hù).

1) 更新美術(shù)資源目錄

2) 更新對(duì)應(yīng)Axure頁(yè)面的假圖

2) 根據(jù)美術(shù)假圖的更新, 在該假圖所對(duì)應(yīng)的頁(yè)面中刪除已經(jīng)不再該界面使用的圖素母版, 并且檢查, 該資源是否還在其他頁(yè)面使用(右鍵-使用情況), 如果該資源已經(jīng)不在任何界面使用了, 則可以在資源目錄刪除該圖素資源, 并且在Axure的母版列表中, 刪除該母版, 此處涉及到一個(gè)命名連續(xù)的問(wèn)題, 即你是否要將這個(gè)已經(jīng)作廢的母版的名稱作為后續(xù)新增圖素的母版名稱, 也可以選擇并不復(fù)用已刪除母版的名稱, 完全根據(jù)個(gè)人喜好決定. (如果要保留名稱給新增的母版, 則需要能有效管理哪些名稱的母版已經(jīng)被刪除了可以復(fù)用名稱)

 

需求四 : 我的項(xiàng)目已經(jīng)有了幾百個(gè)圖素資源, 如何快速找到指定圖素資源的母版并進(jìn)行編輯?

如下圖在母版上方的工具欄, 點(diǎn)擊放大鏡圖標(biāo), 可以通過(guò)母版名稱進(jìn)行快速搜索, 支持模糊搜索.

C739267C687C488D8B7C2FC44FD9EECD

其他需求 : 你還有什么要說(shuō)的么?

這里所說(shuō)的只是這個(gè)方法的核心內(nèi)容, 具體細(xì)節(jié), 還需要各位看官根據(jù)自身和項(xiàng)目的情況, 在實(shí)踐中去斟酌和選擇適合自己的方式去完善. 古詩(shī)有云: 古人學(xué)問(wèn)無(wú)遺力, 少壯工夫老始成. 紙上得來(lái)終覺(jué)淺, 絕知此事要躬行, 絕知此事要躬行, 絕知此事要躬行.

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC