前面在介紹AxureRP的時(shí)候，有介紹到過它的模板管理面板(Masters)，對(duì)模板管理面板善加利用能對(duì)設(shè)計(jì)起到事半功倍的效果，且能提高所設(shè)計(jì)頁(yè)面生成原型后的加載速度。很多產(chǎn)品只需要利用現(xiàn)成的UI標(biāo)準(zhǔn)就可以畫出原型，為了減少流程、降低溝通成本，直接利用現(xiàn)有UI標(biāo)準(zhǔn)進(jìn)行原型的搭建，一般會(huì)用Photoshop來(lái)實(shí)現(xiàn)UI原型，但是效率和不可交互性還是存在很多問題，所以需要有一套完成封裝的UI標(biāo)準(zhǔn)并且產(chǎn)生可交互的中高保真原型，這里最好是整體的統(tǒng)一風(fēng)格，因?yàn)橹粦?yīng)用于某一個(gè)體的，就失去了封裝的意義。這里主要介紹AxureRP怎么使用模板管理面板來(lái)封裝UI標(biāo)準(zhǔn)。

一、創(chuàng)建UI零件庫(kù)

1、把UI標(biāo)準(zhǔn)中的元素進(jìn)行提取。一般UI標(biāo)準(zhǔn)的形式是以圖片的形式提供的，所要做的就是把每個(gè)元素單獨(dú)切割出來(lái)保存成圖片文件，最好背景是透明的，而且把圖片上的文字都去掉保持可擴(kuò)展性，然后按照自己需要來(lái)分類。

2、在AxureRP里面的模板管理面板中新建一個(gè)文件夾并命名，在文件夾下面新建一個(gè)模板文件。如果已經(jīng)分好類了，就在對(duì)應(yīng)類別文件夾下建。

3、雙擊打開這個(gè)模板，在組件里面把圖片組件拖動(dòng)到中間的操作區(qū)域中，雙擊找到已經(jīng)保存好的圖片文件，這樣一個(gè)UI組件就加到AxureRP里面了。

4、如果這個(gè)UI組件本身需要文字元素，那么在組件里面把文字組件放到UI零件上的相應(yīng)位置，然后根據(jù)UI標(biāo)準(zhǔn)調(diào)整文字樣式。注意，因?yàn)锳xureRP不支持中文，所以他的字體和html中的px是不同的，html中的12px字體在AxureRP里面要設(shè)置為9，14px的要設(shè)置為11，以此類推。

5、在AxureRP中模板可區(qū)分為可單獨(dú)編輯和不可單獨(dú)編輯(正常及作為背景)，默認(rèn)是不可單獨(dú)編輯，也就是只要改動(dòng)模板的樣式，這個(gè)模板在所應(yīng)用到的地方都會(huì)改變。若需要單獨(dú)編輯，特別是在編輯文字的時(shí)候，可以右鍵點(diǎn)擊模板，選擇行為下的自定義組件即可。

6、保存并重復(fù)2~4的步驟，就可以完成所有UI組件的轉(zhuǎn)換。

二、結(jié)構(gòu)庫(kù)構(gòu)建

有時(shí)候需要可以直接使用的模塊，類似于網(wǎng)站的頭部和底部是可以直接調(diào)用不需要再設(shè)計(jì)的。類似于這類的結(jié)構(gòu)，利用現(xiàn)有UI組件進(jìn)行搭配。方法和搭建UI組件類似，只要新建一個(gè)文件夾然后新建模板，再把相應(yīng)的UI零件拖放到指定位置便可以完成。

這里要注意幾點(diǎn)：

1、要把一些基本交互加上去，保證原型的可交互性。

2、模塊是屬于統(tǒng)一的內(nèi)容，一般不需要轉(zhuǎn)換成可單獨(dú)編輯的模式，也可以根據(jù)個(gè)人需要自行轉(zhuǎn)換。

三、UI標(biāo)準(zhǔn)的更新

要記住一點(diǎn)：不斷更新，要定期把新的UI組件加入到AxureRP中。

完成一、二兩大步驟其實(shí)已經(jīng)可以開始工作了，每次使用這套封裝的組件時(shí)只需要導(dǎo)入這個(gè)rp文件，并選擇第二項(xiàng)“Masters”，以及Check All所有組件，點(diǎn)擊確定完成就可以直接使用了。

其實(shí)這里也可以用創(chuàng)建RP的庫(kù)文件來(lái)實(shí)現(xiàn)，把上面所述的所有模板做成庫(kù)里面的一個(gè)個(gè)組件，然后生成庫(kù)文件，把這個(gè)庫(kù)文件放在AxureRP安裝目錄下的庫(kù)文件夾，這樣每次打開AxureRP都會(huì)自動(dòng)加載，在組件選擇面板里可以直接選擇使用，不過這樣就起不到提高加載速度的效果，后面會(huì)介紹。

總結(jié)

以上是生活随笔為你收集整理的axure rp编辑html模板,AxureRP教程—用模板封装UI标准的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。