前言

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

Axure提供的交互樣式包含：鼠標(biāo)懸停紊服、鼠標(biāo)按下檀轨、選中、禁用和獲取焦點(diǎn)欺嗤。本文將和大家聊一聊這5種交互樣式的作用和使用場(chǎng)景参萄。

鼠標(biāo)懸停

鼠標(biāo)懸停，即鼠標(biāo)懸浮图灞靠在上方所呈現(xiàn)出的一種視覺(jué)樣式讹挎。鼠標(biāo)懸停的應(yīng)用隨處可見(jiàn)，如京東首頁(yè)的導(dǎo)航菜單吆玖，人人都是產(chǎn)品經(jīng)理的文章標(biāo)題筒溃，都運(yùn)用了鼠標(biāo)懸停的交互效果。當(dāng)鼠標(biāo)驼闯耍靠在導(dǎo)航菜單的上方怜奖、停靠在文章標(biāo)題的上方翅阵，文字的顏色都發(fā)生了變化歪玲。鼠標(biāo)懸停的交互樣式被廣泛運(yùn)用于PC端的按鈕、導(dǎo)航菜單怎顾、文字鏈接等設(shè)計(jì)元素中读慎，在移動(dòng)端則不會(huì)使用這一交互樣式。

我們來(lái)看看槐雾，在Axure當(dāng)中如何設(shè)置鼠標(biāo)懸停的交互樣式夭委。選中目標(biāo)元件（通常為文本標(biāo)簽或形狀），鼠標(biāo)右鍵菜單選擇“交互樣式”或點(diǎn)擊右側(cè)交互面板的“新建交互”募强，在事件列表中找到交互樣式“鼠標(biāo)懸椭昃模”，打開(kāi)樣式設(shè)置面板擎值，在這里可以設(shè)置填充色慌烧、邊框線（描邊）、字體鸠儿、陰影屹蚊、圓角等樣式屬性厕氨。設(shè)置的樣式屬性會(huì)隨著鼠標(biāo)懸停的動(dòng)作而被觸發(fā)，因此這里的樣式屬性是動(dòng)態(tài)的汹粤，不同于平面設(shè)計(jì)中的靜態(tài)樣式命斧。

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

鼠標(biāo)按下

鼠標(biāo)按下，顧名思義即當(dāng)鼠標(biāo)按下時(shí)顯示的樣式踢涌，這是操作按鈕的一個(gè)基本樣式通孽。鼠標(biāo)按下與正常、禁用構(gòu)成了按鈕的基礎(chǔ)狀態(tài)樣式睁壁。鼠標(biāo)按下與鼠標(biāo)長(zhǎng)按是不同的利虫，運(yùn)用時(shí)要注意區(qū)分。鼠標(biāo)按下是一個(gè)瞬間的動(dòng)作堡僻，即時(shí)響應(yīng)，是Axure的交互樣式疫剃；而鼠標(biāo)長(zhǎng)按是有時(shí)間要求的钉疫，要求鼠標(biāo)按下一段時(shí)間后才做出動(dòng)作響應(yīng)，是Axure當(dāng)中的交互事件巢价。

選中

選中作為選項(xiàng)被用戶選擇后所呈現(xiàn)的視覺(jué)樣式牲阁。常用于單選、復(fù)選壤躲、導(dǎo)航城菊、標(biāo)簽的交互設(shè)計(jì)。當(dāng)我們?cè)O(shè)計(jì)單選的選中效果時(shí)碉克，首先需要將這些選項(xiàng)設(shè)置成一個(gè)組凌唬。鼠標(biāo)拖拽框選這幾個(gè)選項(xiàng)，鼠標(biāo)右鍵操作菜單選擇“選項(xiàng)組”并做好命名漏麦。選中交互樣式通常需要配合某個(gè)事件客税，才能發(fā)揮它的作用，一般與鼠標(biāo)單擊事件配合使用撕贞。

禁用

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

禁用的使用場(chǎng)景有很多婆廊，如表單信息的填寫(xiě)迅细，當(dāng)信息填寫(xiě)不完整時(shí)，保存按鈕可以設(shè)置為禁用樣式淘邻。在Axure當(dāng)中的設(shè)置方法其實(shí)很簡(jiǎn)單茵典，為這些輸入項(xiàng)的文本改變事件添加一個(gè)條件，當(dāng)輸入項(xiàng)為空宾舅，觸發(fā)動(dòng)作禁用保存按鈕统阿。

獲取焦點(diǎn)

獲取焦點(diǎn)常用于文本輸入框獲取輸入焦點(diǎn)或突出一段文字信息時(shí)使用，主要目的用于吸引用戶的目光筹我》銎剑“獲取焦點(diǎn)”樣式想要發(fā)揮作用，同樣也離不開(kāi)與事件蔬蕊、動(dòng)作的協(xié)同配合结澄。與獲取焦點(diǎn)樣式配合使用的事件一般有：鼠標(biāo)單擊、鼠標(biāo)移入岸夯、獲取焦點(diǎn)概而，配合的動(dòng)作僅有獲取焦點(diǎn)。

小結(jié)

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

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

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

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

4. 選中踩娘、禁用刮刑、獲取焦點(diǎn)需配合事件、動(dòng)作才能發(fā)揮作用养渴，但觸發(fā)交互樣式的動(dòng)作是固定的雷绢。

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

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