懸浮按鈕要怎么設計才能帶來好體驗?

?什么時候適合使用懸浮按鈕

A、執行關鍵的操作

懸浮按鈕通常用來承載相關度最高、最常用、最重要的操作。通常,在應用中,它應該承載特征性的操作,核心功能,就像下面的例子一樣:

懸浮按鈕用來觸發應用中的主操作。屏幕上的暫停/播放交互使用懸浮按鈕來觸發,說明這個應用是一個音樂播放器。

B、作為引導工具

懸浮按鈕還可以為用戶提供下一步的提示和引導。Google 的研究表明,當面對不熟悉的界面之時,許多用戶都傾向于點擊懸浮按鈕來探索,獲取引導。因此,懸浮按鈕在功能上有類似路標的屬性。

Twitter 就將發推功能做成了懸浮按鈕。

C、并不是每屏都需要懸浮按鈕

懸浮按鈕色彩顯眼,高亮,非常抓人眼球。當你打開界面的時候,想要不去注意到它都不行,因為它太明顯了。但是,并不是每個界面都需要懸浮按鈕,因為不是每屏都有標志性的、重要的操作。

不要濫用懸浮按鈕,它只為了關鍵操作而存在!

Android 系統中 Google Photos 應用就是一個典型的案例。當你打開它的圖庫的時候,首先映入眼簾的是用于搜索的懸浮按鈕,這個時候,懸浮按鈕存在2個關鍵的問題:

·對于絕大多數的用戶而言,搜索是非主要交互。首要的操作是瀏覽圖片,所以此處并不需要懸浮按鈕。

·懸浮按鈕會分散用戶的注意力。

小貼士:判斷一個界面的主要操作其實并沒有看起來那么簡單。為了簡化任務,并且考量你是否需要懸浮按鈕,可以參考這個“五分鐘規則”:如果你花費了5分鐘還沒找到這一屏的主要操作,那么這說明這一屏不需要懸浮按鈕。

懸浮按鈕最佳實踐

A、避免出現“迷之導航”

實際上我們這里說的迷之導航指的是“Mystery meat navigation”,通常簡稱為MMN,這句諷刺式的術語源于Web Pages That Suck 的站長 Vincent Flanders,指的是那些難于被發現、目的不明、只有當光標移動到其上才能發現、直到打開才知道其內容的“隱藏式”鏈接。

實際上,懸浮按鈕所存在的問題和MMN有點相似,它是一個典型的圖標式按鈕,并不包含文字標簽來說明其功能,而通用的、普遍被認識的圖標始終是少數。舉個例子,下面的按鈕是什么功能?

有人能猜出它與分享相關,那么它的分享功能具體是指向什么地方,有什么效果,你能確知么?你想要知道,就必須點擊它。的確,點擊這些按鈕來發現其功能,耗費的時間非常短,風險也不高,但是這終究是一種認知負擔,不是嗎?最麻煩的地方在于,用戶必須記住它的功能才行。

將所有的的這些圖標和相應的APP都記住,這個工作量可不小。

當然,使用圖標式的按鈕本身并不存在問題,前提是,APP的上下文環境要明晰,用戶才能夠清晰判斷按鈕的含義和功能。舉個例子,你使用的是筆記類應用,很明顯,主要的功能是記錄、查看筆記。那么這個時候,懸浮按鈕上的筆的圖標,所表達的含義就很清晰了。

B、一屏只使用一個懸浮按鈕

懸浮按鈕在界面中是突出的,也是最具有侵略性的,所以要么只使用一個懸浮按鈕,要么干脆別用。

C、懸浮按鈕只承載正向操作

由于懸浮按鈕通常承載的是主要的、有代表性的操作,通常它應該是個積極正向的交互,比如創建、分享、探索等。唯一的懸浮按鈕不應該執行破壞性的操作,比如刪除、歸檔。它不應該是非特定的操作,或者是不完整的交互,比如剪切和粘貼是一組組合交互,它們應該存在于菜單欄當中,而非懸浮按鈕中。

Material Design 的設計規范中對于懸浮按鈕所承載交互和圖標有指引說明。

懸浮按鈕和動效

懸浮按鈕本身非常靈活,它可以擴展、變形,也可以給予反饋。

A、擴展為一系列操作

在某些情況下,點擊懸浮按鈕可以擴展出其他的常用操作(就像 Evernote這樣)。通過擴展,用一組相關、常用的懸浮按鈕來替代原來的單一交互,這樣是可行的,它們是一體的,可展開也能收納,不常駐,這和前面所提到的原則并不沖突。

不過,這樣的設計要注意幾點:

·這些操作必須與開始的總懸浮按鈕是關聯起來的,它們是一體的,不要把展開后的按鈕視為單獨的存在。

·作為一般規則,這組拓展出來的按鈕不應少于3個,不能多余6個,否則違反了作為懸浮按鈕的快速、高效的原則。

B、懸浮按鈕變形為新的界面

懸浮按鈕可以不一直都為按鈕形態,借助動效它能夠延伸到整個屏幕,變為獨立的界面。

懸浮按鈕能夠作為界面轉化的中間樞紐。

當懸浮按鈕變形為界面的時候,它闡明了前后界面之間的邏輯關系,就像下面的案例:

C、滾動的時候隱藏懸浮按鈕

為了便于用戶在滾動的過程中閱讀內容,懸浮按鈕可以在滾動界面的時候,隱藏起來。

Medium 的 Android 版客戶端當中,就是這么使用懸浮按鈕的,當滾動到文章底部的時候,懸浮按鈕會再次出現。實際上,他們的網頁端也采用了類似的設計模式。

--by.U愛設計菇涼--

如果你喜歡設計,請關注我。

學習加QQ:1289916063

微信號:zheng-z-xixi

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

推薦閱讀更多精彩內容