設計增強型Axure組件的必要性

　　在交互設計師的工具箱當中，相信 Axure是必不可少和得心應手的交互原型設計工具。今天主要想探討在工作中不斷提煉和積累增強型組件(Enhanced-Widgets) 的必要性，以便提高工作效率。同時，提供了本人制作的一套增強型組件。

　　什麼是組件(Widgets)?

　　組件面板是用來進行線框圖和流程圖的設計。默契情況下，官方只提供了線框圖組件和流程圖組件，它們都是最為基礎的單元模塊。

　　基本型的Wireframe 組件

　　什麼是增強型組件?

　　所謂增強型組件，顧名思義是在原有基礎單元組件基礎上，把各單元模塊進行組合，並根據需求加入相應的組件行為。這裡的關鍵特征有兩個。第一個特征是各單位模塊的組合並非隨機和隨意的，而是帶有一定的目的性，例如：在交互原型當中，自動搜索(Auto-Complete)經常用到的，那麼設計簡化型的能說明設計理念自動搜索的組件就有一定意義。第二個特征就是，組件行為要盡可能抽象，具有較強的獨立性，便於快速重復利用，如果組件行為和當前的上下文聯系的過於緊密，就不利於在其他上下文中使用。

　　目前，網上可以搜索到很多增強型組件庫，不過它們大多只符合增強型組件兩個主要特征中的第一特征，即只是對單元模塊按照一定的需求進行組合。首先，相對單元模塊來講，其工作效率一定會有提升的。不過，在實際工作當中，帶有交互行為的交互原型更具有說明性和說服力，有時候，還能為項目的快速推進做出巨大貢獻的。這個本人是有切身體會的。當然，這要根據個人工作環境來確定的，如果你的工作環境中，有能力很強的產品經理或是研發團隊對交互原型的文字描述理解足夠到位，那麼你的交互原型也許靜態的頁面即可，只需要保證頁面間的信息架構合理正確就好了。畢竟帶有組件行為的原型是需要花更多時間和精力來制作的。

　　增強型的Wireframe 組件

　　案例實戰

　　為了方便大家的理解，這裡舉一個簡單的例子。不涉及具體的上下文環境，我們就通過基礎性的單元組件，來設計一個增強型組件懸浮提示(Hover Tip)。該案例使用 Axure Pro 6 制作。

　　1、在軟件左側組件(Widgets)的下拉菜單中，點擊“Create library”，在彈出的窗口中，命名並保存該文件為“Enhanced_Widgets”。把該文件保存到操作系統中“我的文檔”中的“My Axure RP Libraries”。這樣的話，下次啟動 Axure 時，該增強型組件庫就會自動導入的。就像官方提供的“Widgets”。

　　2、使用到基礎性單元組件。

　　a) 矩形(Rectangle)

　　b) 文字面板(Text Panel)

　　c) 動態面板(Dynamic Panel)

　　3、各單元組件的組合

　　a) 在基礎型組件庫中，選擇矩形組件，並拖拽到工作區中，調整矩形寬高為20px * 20px。選中矩形，點擊鼠標右鍵，在彈出的上下文快捷菜單中，點擊菜單組“編輯按鈕形狀”，從下一級菜單組中選擇“橢圓”，使矩形變成圓形。雙擊該圓形，變成可輸入的狀態。在該圓中輸入“?”。命名該組件為“問號”組件

　　b) 同樣的，在基礎性組件庫中，選擇矩形組件，拖拽到工作區中，調整寬高為 200px * 100px。選擇文字面板組件，輸入描述性文本“功能使用提示面板”，把該提示文本放在矩形組件中。選擇矩形組件和文字面板組件，組成一個組，便於整體拖放。為了便於下面的描述，把這個組命名為“提示浮層”，把“提示浮層”放在上一步制作好的組件右邊。如下圖：

　　4、組件中加入行為

　　a) 選中“提示浮層”，點擊鼠標右鍵，在上下文菜單中，選擇“轉化(convert)”中的“轉化成動態面板(convert to dynamic panel)”，這個功能只有在 Axure Pro 6 版本中才有的。之前的 Axure 版本只能單獨從基礎型組件庫中選擇一個動態面板，雙擊面板打開，把提示面板放入其中。相對要麻煩很多。這裡建議使用 Axure Pro 6 吧!把該動態面板命名為“提示面板”如下圖是個淺藍色的面板。

　　b) 選中“提示面板”，點擊鼠標右鍵，在上下文菜單中，選擇“編輯動態面板(Edit Dynamic Panel)”中的“隱藏面板(Hidden Panel)”。如下圖是個淺黃色的面板。

　　c) 選中“問號”組件，在軟件右側區域中的“組件屬性(Widgets Properties)”中選擇“交互(Interactions)”面板，雙擊“OnMouseEnter”，打開“編輯用例(Editor Case)”窗口，在“Add actions”中，選擇“Show Panel”，並在窗口的最右邊勾選“提示面板”，這樣就完成了，鼠標懸浮在“問號”組件時，其右側的提示面板顯示出來。如下圖：

　　d) 同樣的，選中“問號”組件，在軟件右側區域中的“組件屬性(Widgets Properties)”中選擇“交互(Interactions)”面板，雙擊“OnMouseOut”，打開“編輯用例(Editor Case)”窗口，在“Add actions”中，選擇“Hide Panel”，並在窗口的最右邊勾選“提示面板”，這樣就完成了，鼠標離開“問號”組件時，其右側的提示面板隱藏。如下圖：

　　e) 至此，該增強型組件就已完成。可以按 F5 輸出成 HTML 進行效果查看。這裡就不多敘述了。

　　增強型組件庫分享

　　本人根據Clean Design 提供的Masters(模塊)並結合自身工作經驗轉化了一套增強型組件庫，如有需要，可在評論留言中留下聯系方式，最好是郵箱，以便本人及時發送。都是一些日常設計工作中經常用到的，主要特點是包括了組件行為。當然在使用過程中，有時候難免要對組件的行為做些調整，以適應當前的上下文環境。不過這裡有個技巧，就是從增強型組件庫中，拖拽某一個組件到工作區中時，可以把這個組件再次轉化成一個獨立的動態面板，以隔絕當前上下文環境的影響。在使用的過程中，如有疑問，歡迎隨時溝通，本人新浪微博http://weibo.com/lucasli。

　　寫在最後

　　本文的目的在於介紹在 Axure中制做增強型組件的必要性，能夠讓我們提高工作效率和使原型更真實、更有說服力。為簡化描述，文中案例僅是整個設計過程的大概步驟，細節過程都已隱去。希望本文的例子，能夠給讀者帶來啟發。

　　文章來源：盛大UED