本文原始出處: 折折熊的交互論 http://www.jojobox.cn/blog/article.asp?id=133
本文已獲得作者同意轉載。以下文章，已將作者原文翻成繁體中文。
利用Axure封裝視覺標準
作者:折折熊 日期:2008-07-10
很久沒有發表文章了，最近一直在研究產品設計標準的問題，之前有發過一篇關於Axure的教程，相信很多人已經學會如何使用，這次我給大家介紹一下如何利用Axure將視覺標準封裝並使用。
互動設計師一般都是出線框圖為最終產物，但是往往很多產品只需要利用現成的視覺標準就可以畫出原型。為了減少流程、降低溝通成本，所以我建議互動設計師在做類似產品的時候能夠直接利用現有視覺標準進行原型的搭建，一般很多互動設計師會用Photoshop來實現視覺原型，但是效率和不可互動性還 是存在很多問題，所以需要有一套完成的封裝來執行視覺標準並且產生可互動的高保真原型(High-Fidelity)。
背景就不多說了，來講講Axure怎麼使用視覺標準。這裏用到最多的就是Axure裏面的Masters的功能，（如果你還不清楚Axure如何使用，請點此查看教程）。
一、創建視覺零件庫
1、把視覺標準中的元素進行提取。
一般視覺標準的形式是以PSD、JPG、WORD等，你所要做的就是把每個元素單獨保存成gif檔，最好背 景是透明的，而且把元件上的文字都去掉保持可擴展性。分類可以按照自己需要來分，我是分為：Logo、icon、button、tab、table、 flow。
2、在Axure裏面的Masters功能區中新建一個檔夾，命名為“視覺零件”，在檔夾下面新建一個Master。
3、雙擊打開這個Master，在Widgets裏面把圖片組建拖動到中間的操作區域中，雙擊找到你已經保存好的gif檔，這樣一個視覺零件就加到你的Axure裏面了。
4、如果這個視覺零件本身需要文字元素，那麼在Widgets裏面把文字元件放到視覺零件上的相應位置，然後根據視覺標準調整文字樣式。注意， 因為Axure不支持中文，所以他的字體和html中的px是不同的，html中的12px字體在Axure裏面要設置為9，14px的要設置為11，以 此類推。
5、在Axure中Master可區分為可單獨編輯(Custom Widget)和不可單獨編輯(Normal 及 Place in Background)，預設是不可單獨編輯，也就是只要改動一個Master的樣式，該 Master在Page中所應用到的地方都會改變。因為這個是視覺零件，需要單獨編輯，特別是在編輯文字的時候，所以右鍵點擊Master列表中的零件， 選擇“Behavior”下的“Custom Widget”即可。你也可以將視覺零件Group一下，使其在page可以一起拖動，並仍然可以編輯。
6、保存並重複2~4的步驟，你可以完成所有視覺零件的轉換。
二、結構庫構建
有了視覺零件還不夠，有時候我們更多傾向的是一塊塊現有結構的應用，類似於網站的頭部和底部是可以直接調用不需要再設計的。類似於這類的結構， 我們利用現有視覺零件進行搭建。方法和搭建視覺零件類似，只要新建一個檔夾然後新建Master，再把相應的視覺零件拖放到指定位置便可以完成。
這裏要主要幾點：
1、要把一些基本交互要加到構建中，保證原型的可互動性（點此查看如何增加互動動作）；
2、一般結構庫的分類為：Layout、Menu、Flow、Information、Function，你也可以自行分類；
3、結構組建是屬於統一的內容，所以可以不需要轉換成可單獨編輯的模式，也可以根據個人需要自行轉換。
三、視覺標準的更新
要記住一點：不斷更新。要定期把新的視覺組建加入到Axure中。
完成一、二兩大步驟其實你已經可以開始工作了，每次使用這套封裝的元件時你只需要導入你的元件檔，並選擇第二項“Masters”，以及Check All所有組建，點擊確定完成就可以直接使用了。
怎麼樣？是不是覺得線框圖不再是簡單醜陋、而且不再需要為溝通而煩惱了（特別是有些沒有視覺頭腦的需求方在看到簡單線框圖的時候會一臉凝重地和你溝通）
PS：有些互動設計師會對一些佈局細節擔憂，害怕自己會一直調整對齊和細節。記住，我們出的是可互動的原型，不是最終產品，不需要考慮太多的視覺細節，這些會由前端開發去進行標準的把控。
很用心的作者!
不错，这样做出来，跟成品差不了多少了，就只需要处理细节了。强。。。。
[...] 利用Axure封装视觉标准 [...]