前言

Axure是一款快速原型制作工具，利用Axure的事件、動作可以制作出高保真交互原型，是產(chǎn)品Demo演示的利器。豐富的事件和靈活的動作，使得Axure在交互設(shè)計領(lǐng)域一騎絕塵。事件和動作并不是萬能的，有些時候還需要配合交互樣式，才能制作出色的交互原型。交互樣式常常被一些新手忽略，甚至有些交互達(dá)人也會將它遺忘。

Axure提供的交互樣式包含：鼠標(biāo)懸停、鼠標(biāo)按下、選中、禁用和獲取焦點。本文將和大家聊一聊這5種交互樣式的作用和使用場景。

鼠標(biāo)懸停

鼠標(biāo)懸停，即鼠標(biāo)懸浮?？吭谏戏剿尸F(xiàn)出的一種視覺樣式。鼠標(biāo)懸停的應(yīng)用隨處可見，如京東首頁的導(dǎo)航菜單，人人都是產(chǎn)品經(jīng)理的文章標(biāo)題，都運用了鼠標(biāo)懸停的交互效果。當(dāng)鼠標(biāo)?？吭趯?dǎo)航菜單的上方、?？吭谖恼聵?biāo)題的上方，文字的顏色都發(fā)生了變化。鼠標(biāo)懸停的交互樣式被廣泛運用于PC端的按鈕、導(dǎo)航菜單、文字鏈接等設(shè)計元素中，在移動端則不會使用這一交互樣式。

我們來看看，在Axure當(dāng)中如何設(shè)置鼠標(biāo)懸停的交互樣式。選中目標(biāo)元件（通常為文本標(biāo)簽或形狀），鼠標(biāo)右鍵菜單選擇“交互樣式”或點擊右側(cè)交互面板的“新建交互”，在事件列表中找到交互樣式“鼠標(biāo)懸?！?，打開樣式設(shè)置面板，在這里可以設(shè)置填充色、邊框線（描邊）、字體、陰影、圓角等樣式屬性。設(shè)置的樣式屬性會隨著鼠標(biāo)懸停的動作而被觸發(fā)，因此這里的樣式屬性是動態(tài)的，不同于平面設(shè)計中的靜態(tài)樣式。

鼠標(biāo)按下、選中、禁用及或獲取焦點的樣式設(shè)置方法與鼠標(biāo)懸停相同，因此，下文中，關(guān)于這四種交互樣式的設(shè)置不再重復(fù)講解。

鼠標(biāo)按下

鼠標(biāo)按下，顧名思義即當(dāng)鼠標(biāo)按下時顯示的樣式，這是操作按鈕的一個基本樣式。鼠標(biāo)按下與正常、禁用構(gòu)成了按鈕的基礎(chǔ)狀態(tài)樣式。鼠標(biāo)按下與鼠標(biāo)長按是不同的，運用時要注意區(qū)分。鼠標(biāo)按下是一個瞬間的動作，即時響應(yīng)，是Axure的交互樣式；而鼠標(biāo)長按是有時間要求的，要求鼠標(biāo)按下一段時間后才做出動作響應(yīng)，是Axure當(dāng)中的交互事件。

選中

選中作為選項被用戶選擇后所呈現(xiàn)的視覺樣式。常用于單選、復(fù)選、導(dǎo)航、標(biāo)簽的交互設(shè)計。當(dāng)我們設(shè)計單選的選中效果時，首先需要將這些選項設(shè)置成一個組。鼠標(biāo)拖拽框選這幾個選項，鼠標(biāo)右鍵操作菜單選擇“選項組”并做好命名。選中交互樣式通常需要配合某個事件，才能發(fā)揮它的作用，一般與鼠標(biāo)單擊事件配合使用。

禁用

禁用作為按鈕不可用的一種視覺樣式，與鼠標(biāo)按下一樣，都是按鈕的一種特殊狀態(tài)。按鈕的禁用與啟用，通常都是依據(jù)一些條件判斷。禁用狀態(tài)的視覺樣式要與正常狀態(tài)下進(jìn)行明顯的區(qū)別，一般通過降低按鈕填充色和文字的飽和度進(jìn)行灰度處理，或者直接將按鈕的填充色設(shè)置為灰色，在視覺上給用戶呈現(xiàn)一種不可用的狀態(tài)。與選中相似，禁用也需要與事件、動作配合使用，才能發(fā)揮他的作用。觸發(fā)禁用樣式的事件通常還需要添加邏輯條件。與禁用樣式配合使用的事件主要包含：文本改變、鼠標(biāo)單擊、載入時，配合的動作僅有禁用，當(dāng)然也可以與其它的事件配合，制作出更酷炫實用的交互，這些都有待于大家去探索。

禁用的使用場景有很多，如表單信息的填寫，當(dāng)信息填寫不完整時，保存按鈕可以設(shè)置為禁用樣式。在Axure當(dāng)中的設(shè)置方法其實很簡單，為這些輸入項的文本改變事件添加一個條件，當(dāng)輸入項為空，觸發(fā)動作禁用保存按鈕。

獲取焦點

獲取焦點常用于文本輸入框獲取輸入焦點或突出一段文字信息時使用，主要目的用于吸引用戶的目光。“獲取焦點”樣式想要發(fā)揮作用，同樣也離不開與事件、動作的協(xié)同配合。與獲取焦點樣式配合使用的事件一般有：鼠標(biāo)單擊、鼠標(biāo)移入、獲取焦點，配合的動作僅有獲取焦點。

小結(jié)

本文的主要內(nèi)容，總結(jié)起來有以下幾條：

1. 交互樣式是一種動態(tài)的樣式屬性；

2. 交互樣式支持設(shè)置顏色、字體、描邊、陰影、圓角等二十余種屬性；

3. 鼠標(biāo)懸停、鼠標(biāo)按下屬于隨鼠標(biāo)動作而觸發(fā)的交互樣式，不需要關(guān)聯(lián)事件和動作；

4. 選中、禁用、獲取焦點需配合事件、動作才能發(fā)揮作用，但觸發(fā)交互樣式的動作是固定的。

善于利用這些交互樣式，讓這些視覺的樣式屬性也能夠動起來，可以極大的提高原型的保真度。交互技法的學(xué)習(xí)其實并不困難，重要的是我們要有交互設(shè)計的意識。多去思考、探索、研究，Axure當(dāng)中這幾類交互功能的作用，如何有效的將事件、動作、樣式合理的結(jié)合在一起，制作出更豐富、更有用的交互效果，提升產(chǎn)品的交互體驗。

【Axure原型設(shè)計】專注分享Axure基礎(chǔ)教程、交互案例以及經(jīng)驗技巧，并不定期贈送各種資源福利，包含：系統(tǒng)組件庫、頁面模板、實戰(zhàn)案例等。