【交互樣式】,一個被忽視的交互設計,你需要重新認識

前言

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

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

鼠標懸停

鼠標懸停,即鼠標懸浮??吭谏戏剿尸F出的一種視覺樣式。鼠標懸停的應用隨處可見,如京東首頁的導航菜單,人人都是產品經理的文章標題,都運用了鼠標懸停的交互效果。當鼠標??吭趯Ш讲藛蔚纳戏?、停靠在文章標題的上方,文字的顏色都發生了變化。鼠標懸停的交互樣式被廣泛運用于PC端的按鈕、導航菜單、文字鏈接等設計元素中,在移動端則不會使用這一交互樣式。

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

鼠標按下、選中、禁用及或獲取焦點的樣式設置方法與鼠標懸停相同,因此,下文中,關于這四種交互樣式的設置不再重復講解。

鼠標按下

鼠標按下,顧名思義即當鼠標按下時顯示的樣式,這是操作按鈕的一個基本樣式。鼠標按下與正常、禁用構成了按鈕的基礎狀態樣式。鼠標按下與鼠標長按是不同的,運用時要注意區分。鼠標按下是一個瞬間的動作,即時響應,是Axure的交互樣式;而鼠標長按是有時間要求的,要求鼠標按下一段時間后才做出動作響應,是Axure當中的交互事件。

選中

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

禁用

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

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

獲取焦點

獲取焦點常用于文本輸入框獲取輸入焦點或突出一段文字信息時使用,主要目的用于吸引用戶的目光?!矮@取焦點”樣式想要發揮作用,同樣也離不開與事件、動作的協同配合。與獲取焦點樣式配合使用的事件一般有:鼠標單擊、鼠標移入、獲取焦點,配合的動作僅有獲取焦點。

小結

本文的主要內容,總結起來有以下幾條:

1. 交互樣式是一種動態的樣式屬性;

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

3. 鼠標懸停、鼠標按下屬于隨鼠標動作而觸發的交互樣式,不需要關聯事件和動作;

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

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


【Axure原型設計】專注分享Axure基礎教程、交互案例以及經驗技巧,并不定期贈送各種資源福利,包含:系統組件庫、頁面模板、實戰案例等。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,936評論 6 535
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,744評論 3 421
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,879評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,181評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,935評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,325評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,384評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,534評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,084評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,892評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,623評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,322評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,735評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,990評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,800評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,084評論 2 375

推薦閱讀更多精彩內容