前言
Axure是一款快速原型制作工具,利用Axure的事件、動作可以制作出高保真交互原型,是產品Demo演示的利器。豐富的事件和靈活的動作,使得Axure在交互設計領域一騎絕塵。事件和動作并不是萬能的,有些時候還需要配合交互樣式,才能制作出色的交互原型。交互樣式常常被一些新手忽略,甚至有些交互達人也會將它遺忘。
Axure提供的交互樣式包含:鼠標懸停、鼠標按下、選中、禁用和獲取焦點。本文將和大家聊一聊這5種交互樣式的作用和使用場景。
鼠標懸停
鼠標懸停,即鼠標懸浮??吭谏戏剿尸F出的一種視覺樣式。鼠標懸停的應用隨處可見,如京東首頁的導航菜單,人人都是產品經理的文章標題,都運用了鼠標懸停的交互效果。當鼠標??吭趯Ш讲藛蔚纳戏?、停靠在文章標題的上方,文字的顏色都發生了變化。鼠標懸停的交互樣式被廣泛運用于PC端的按鈕、導航菜單、文字鏈接等設計元素中,在移動端則不會使用這一交互樣式。
我們來看看,在Axure當中如何設置鼠標懸停的交互樣式。選中目標元件(通常為文本標簽或形狀),鼠標右鍵菜單選擇“交互樣式”或點擊右側交互面板的“新建交互”,在事件列表中找到交互樣式“鼠標懸?!?,打開樣式設置面板,在這里可以設置填充色、邊框線(描邊)、字體、陰影、圓角等樣式屬性。設置的樣式屬性會隨著鼠標懸停的動作而被觸發,因此這里的樣式屬性是動態的,不同于平面設計中的靜態樣式。
鼠標按下、選中、禁用及或獲取焦點的樣式設置方法與鼠標懸停相同,因此,下文中,關于這四種交互樣式的設置不再重復講解。
鼠標按下
鼠標按下,顧名思義即當鼠標按下時顯示的樣式,這是操作按鈕的一個基本樣式。鼠標按下與正常、禁用構成了按鈕的基礎狀態樣式。鼠標按下與鼠標長按是不同的,運用時要注意區分。鼠標按下是一個瞬間的動作,即時響應,是Axure的交互樣式;而鼠標長按是有時間要求的,要求鼠標按下一段時間后才做出動作響應,是Axure當中的交互事件。
選中
選中作為選項被用戶選擇后所呈現的視覺樣式。常用于單選、復選、導航、標簽的交互設計。當我們設計單選的選中效果時,首先需要將這些選項設置成一個組。鼠標拖拽框選這幾個選項,鼠標右鍵操作菜單選擇“選項組”并做好命名。選中交互樣式通常需要配合某個事件,才能發揮它的作用,一般與鼠標單擊事件配合使用。
禁用
禁用作為按鈕不可用的一種視覺樣式,與鼠標按下一樣,都是按鈕的一種特殊狀態。按鈕的禁用與啟用,通常都是依據一些條件判斷。禁用狀態的視覺樣式要與正常狀態下進行明顯的區別,一般通過降低按鈕填充色和文字的飽和度進行灰度處理,或者直接將按鈕的填充色設置為灰色,在視覺上給用戶呈現一種不可用的狀態。與選中相似,禁用也需要與事件、動作配合使用,才能發揮他的作用。觸發禁用樣式的事件通常還需要添加邏輯條件。與禁用樣式配合使用的事件主要包含:文本改變、鼠標單擊、載入時,配合的動作僅有禁用,當然也可以與其它的事件配合,制作出更酷炫實用的交互,這些都有待于大家去探索。
禁用的使用場景有很多,如表單信息的填寫,當信息填寫不完整時,保存按鈕可以設置為禁用樣式。在Axure當中的設置方法其實很簡單,為這些輸入項的文本改變事件添加一個條件,當輸入項為空,觸發動作禁用保存按鈕。
獲取焦點
獲取焦點常用于文本輸入框獲取輸入焦點或突出一段文字信息時使用,主要目的用于吸引用戶的目光?!矮@取焦點”樣式想要發揮作用,同樣也離不開與事件、動作的協同配合。與獲取焦點樣式配合使用的事件一般有:鼠標單擊、鼠標移入、獲取焦點,配合的動作僅有獲取焦點。
小結
本文的主要內容,總結起來有以下幾條:
1. 交互樣式是一種動態的樣式屬性;
2. 交互樣式支持設置顏色、字體、描邊、陰影、圓角等二十余種屬性;
3. 鼠標懸停、鼠標按下屬于隨鼠標動作而觸發的交互樣式,不需要關聯事件和動作;
4. 選中、禁用、獲取焦點需配合事件、動作才能發揮作用,但觸發交互樣式的動作是固定的。
善于利用這些交互樣式,讓這些視覺的樣式屬性也能夠動起來,可以極大的提高原型的保真度。交互技法的學習其實并不困難,重要的是我們要有交互設計的意識。多去思考、探索、研究,Axure當中這幾類交互功能的作用,如何有效的將事件、動作、樣式合理的結合在一起,制作出更豐富、更有用的交互效果,提升產品的交互體驗。
【Axure原型設計】專注分享Axure基礎教程、交互案例以及經驗技巧,并不定期贈送各種資源福利,包含:系統組件庫、頁面模板、實戰案例等。