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

什么是組件（Widgets）？

組件面板是用來(lái)進(jìn)行線(xiàn)框圖和流程圖的設(shè)計(jì)。默契情況下，官方只提供了線(xiàn)框圖組件和流程圖組件，它們都是最為基礎(chǔ)的單元模塊。

基本型的Wireframe 組件

什么是增強(qiáng)型組件？

所謂增強(qiáng)型組件，顧名思義是在原有基礎(chǔ)單元組件基礎(chǔ)上，把各單元模塊進(jìn)行組合，并根據(jù)需求加入相應(yīng)的組件行為。這里的關(guān)鍵特征有兩個(gè)。第一個(gè)特征是各單位模塊的組合并非隨機(jī)和隨意的，而是帶有一定的目的性，例如：在交互原型當(dāng)中，自動(dòng)搜索（Auto-Complete）經(jīng)常用到的，那么設(shè)計(jì)簡(jiǎn)化型的能說(shuō)明設(shè)計(jì)理念自動(dòng)搜索的組件就有一定意義。第二個(gè)特征就是，組件行為要盡可能抽象，具有較強(qiáng)的獨(dú)立性，便于快速重復(fù)利用，如果組件行為和當(dāng)前的上下文聯(lián)系的過(guò)于緊密，就不利于在其他上下文中使用。

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

增強(qiáng)型的Wireframe 組件

案例實(shí)戰(zhàn)

為了方便大家的理解，這里舉一個(gè)簡(jiǎn)單的例子。不涉及具體的上下文環(huán)境，我們就通過(guò)基礎(chǔ)性的單元組件，來(lái)設(shè)計(jì)一個(gè)增強(qiáng)型組件懸浮提示（Hover Tip）。該案例使用 Axure Pro 6 制作。

1、在軟件左側(cè)組件（Widgets）的下拉菜單中，點(diǎn)擊“Create library”，在彈出的窗口中，命名并保存該文件為“Enhanced_Widgets”。把該文件保存到操作系統(tǒng)中“我的文檔”中的“My Axure RP Libraries”。這樣的話(huà)，下次啟動(dòng) Axure 時(shí)，該增強(qiáng)型組件庫(kù)就會(huì)自動(dòng)導(dǎo)入的。就像官方提供的“Widgets”。

2、使用到基礎(chǔ)性單元組件。

a） 矩形（Rectangle）

b） 文字面板（Text Panel）

c） 動(dòng)態(tài)面板（Dynamic Panel）

3、各單元組件的組合

a） 在基礎(chǔ)型組件庫(kù)中，選擇矩形組件，并拖拽到工作區(qū)中，調(diào)整矩形寬高為20px * 20px。選中矩形，點(diǎn)擊鼠標(biāo)右鍵，在彈出的上下文快捷菜單中，點(diǎn)擊菜單組“編輯按鈕形狀”，從下一級(jí)菜單組中選擇“橢圓”，使矩形變成圓形。雙擊該圓形，變成可輸入的狀態(tài)。在該圓中輸入“？”。命名該組件為“問(wèn)號(hào)”組件

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

4、組件中加入行為

a） 選中“提示浮層”，點(diǎn)擊鼠標(biāo)右鍵，在上下文菜單中，選擇“轉(zhuǎn)化（convert）”中的“轉(zhuǎn)化成動(dòng)態(tài)面板（convert to dynamic panel）”，這個(gè)功能只有在 Axure Pro 6 版本中才有的。之前的 Axure 版本只能單獨(dú)從基礎(chǔ)型組件庫(kù)中選擇一個(gè)動(dòng)態(tài)面板，雙擊面板打開(kāi)，把提示面板放入其中。相對(duì)要麻煩很多。這里建議使用 Axure Pro 6 吧！把該動(dòng)態(tài)面板命名為“提示面板”如下圖是個(gè)淺藍(lán)色的面板。

b） 選中“提示面板”，點(diǎn)擊鼠標(biāo)右鍵，在上下文菜單中，選擇“編輯動(dòng)態(tài)面板（Edit Dynamic Panel）”中的“隱藏面板（Hidden Panel）”。如下圖是個(gè)淺黃色的面板。

c） 選中“問(wèn)號(hào)”組件，在軟件右側(cè)區(qū)域中的“組件屬性（Widgets Properties）”中選擇“交互（Interactions）”面板，雙擊“OnMouseEnter”，打開(kāi)“編輯用例（Editor Case）”窗口，在“Add actions”中，選擇“Show Panel”，并在窗口的最右邊勾選“提示面板”，這樣就完成了，鼠標(biāo)懸浮在“問(wèn)號(hào)”組件時(shí)，其右側(cè)的提示面板顯示出來(lái)。如下圖：

d） 同樣的，選中“問(wèn)號(hào)”組件，在軟件右側(cè)區(qū)域中的“組件屬性（Widgets Properties）”中選擇“交互（Interactions）”面板，雙擊“OnMouseOut”，打開(kāi)“編輯用例（Editor Case）”窗口，在“Add actions”中，選擇“Hide Panel”，并在窗口的最右邊勾選“提示面板”，這樣就完成了，鼠標(biāo)離開(kāi)“問(wèn)號(hào)”組件時(shí)，其右側(cè)的提示面板隱藏。如下圖：

e） 至此，該增強(qiáng)型組件就已完成�？梢园� F5 輸出成 HTML 進(jìn)行效果查看。這里就不多敘述了。

增強(qiáng)型組件庫(kù)分享

本人根據(jù)Clean Design 提供的Masters（模塊）并結(jié)合自身工作經(jīng)驗(yàn)轉(zhuǎn)化了一套增強(qiáng)型組件庫(kù)，如有需要，可在評(píng)論留言中留下聯(lián)系方式，最好是郵箱，以便本人及時(shí)發(fā)送。都是一些日常設(shè)計(jì)工作中經(jīng)常用到的，主要特點(diǎn)是包括了組件行為。當(dāng)然在使用過(guò)程中，有時(shí)候難免要對(duì)組件的行為做些調(diào)整，以適應(yīng)當(dāng)前的上下文環(huán)境。不過(guò)這里有個(gè)技巧，就是從增強(qiáng)型組件庫(kù)中，拖拽某一個(gè)組件到工作區(qū)中時(shí)，可以把這個(gè)組件再次轉(zhuǎn)化成一個(gè)獨(dú)立的動(dòng)態(tài)面板，以隔絕當(dāng)前上下文環(huán)境的影響。在使用的過(guò)程中，如有疑問(wèn)，歡迎隨時(shí)溝通，本人新浪微博http://weibo.com/lucasli。

寫(xiě)在最后

本文的目的在于介紹在 Axure中制做增強(qiáng)型組件的必要性，能夠讓我們提高工作效率和使原型更真實(shí)、更有說(shuō)服力。為簡(jiǎn)化描述，文中案例僅是整個(gè)設(shè)計(jì)過(guò)程的大概步驟，細(xì)節(jié)過(guò)程都已隱去。希望本文的例子，能夠給讀者帶來(lái)啟發(fā)。

文章來(lái)源：盛大UED

標(biāo)簽： 交互設(shè)計(jì) Axure組件 交互原型設(shè)計(jì)工具 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀(guān)點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。