起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識行動按鈕的召喚行為及優(yōu)先級表達
編輯導語：行動按鈕是將用戶與產(chǎn)品連接起來的關鍵點，一個設計合理的行動按鈕可以提升用戶的體驗感，加深用戶對產(chǎn)品的好感，進而提高用戶黏性。接下來，本文作者通過回顧自身在設計中積累的經(jīng)驗，為大家總結了一些設計出優(yōu)秀的按鈕控件的技巧。
1. 前言
“行動按鈕”作為連接用戶與產(chǎn)品的交互觸點，在產(chǎn)品設計中扮演了至關重要的角色，一個優(yōu)秀的按鈕控件可以有效的提升交互體驗，引導用戶，提升產(chǎn)品轉化率。
本文是我在設計環(huán)節(jié)遇到問題并尋求解決方案過程中總結沉淀下來的幾點小結，希望能為設計師伙伴們提供一些啟發(fā)或幫助。
2. 背景
需求源于一款產(chǎn)品意在提升桌面圖標的生成率，所以業(yè)務側希望在用戶退出該產(chǎn)品時以彈窗的形式引導用戶創(chuàng)建圖標。針對該需求，在彈窗行動按鈕的優(yōu)先級表達、行退操作布局設計中產(chǎn)生了疑惑，主要體現(xiàn)在以下4個方案中，頁面示意如下：
發(fā)現(xiàn)問題：
- 按鈕的優(yōu)先級該如何表達？
- 行進、后退該如何放置？
- 業(yè)務側與用戶側該如何權衡？
問題聚焦：
- 行動按鈕的優(yōu)先級表達規(guī)范
- 行動按鈕的召喚行為分析
- 行動按鈕的本源分析
3. Part 1：行動按鈕的優(yōu)先級表達規(guī)范
通過對 Material Design、簡書、IXDC、MicroUX及設計相關文獻的查閱歸納，對中行動按鈕的規(guī)范、經(jīng)驗總結提煉如下：
3.1 按鈕的優(yōu)先級表達可劃分為三個層級
具備高度強調(diào)作用的“填充（包含）按鈕”、中度強調(diào)的“輪廓（概述）按鈕”、低度強調(diào)的“文本按鈕”。
3.2 正確表達
3.2.1 單個突出按鈕
布局中應包含一個突出的按鈕，以使其他按鈕在層次結構中的重要性降低，此高強調(diào)按鈕吸引了最多的關注。
3.2.2 多個按鈕
一個應用一次可以在（模態(tài)彈窗/底部欄）布局中顯示多個按鈕，因此高強調(diào)按鈕可以與執(zhí)行次要功能的中強調(diào)按鈕和低強調(diào)按鈕配合使用。
3.2.2.1 可以在填充的按鈕（高強調(diào)度）旁邊放置一個輪廓按鈕（中等強調(diào)）。
3.2.2.2 可以在輪廓按鈕（中等強調(diào)）旁邊放置一個文本按鈕（低強調(diào)）。
3.2.2.3 使用多個按鈕時，指示更重要的操作時，請將其放置在填充的按鈕中。
3.2.2.4 文本按鈕通常嵌入在包含的組件（如卡片和對話框）中，以使其自身與出現(xiàn)它們的組件相關聯(lián)。
3.2.2.5 文本按鈕間又可以通過顏色，粗細進行優(yōu)先級區(qū)分。
3.3 盡量避免
避免同時并列使用兩個填充按鈕（高優(yōu)先級按鈕）。
4. Part2：彈窗中行動按鈕的召喚行為分析
4.1 用戶慣性認知：左后退，右行進
論據(jù)說明：
4.1.1 頭部平臺情況
- iOS的移動、電腦設備絕大所述情況下行進按鈕都在右側，后撤在左側；
- 早些時候，win與Android都為左前進，右后撤。而Android在4.0版本發(fā)布后也將按鈕調(diào)換為了“左后退，右行進”，順應了設計的大趨勢。
4.1.2 A/B test數(shù)據(jù)結論
早在 2004 年，就有 Walker 和 Stanley 的兩人針對這個問題做了對比研究實驗，實驗選取定量測試者對程序進行操作，進行兩輪測試并分別在按鈕位置與問題上做了調(diào)換。
實驗結果：在第一次實驗中，A、B兩實驗組行進與后退的正確率相差無幾，未達到（統(tǒng)計學中）“有感”；第二次實驗（A、B組調(diào)換位置，并問相反的問題），A組變化不大，B組錯誤率高出三倍（資料來源：《體驗進階》）。
結論：該實驗告訴我們一個道理，即不要輕易違背用戶習慣。為了提高效率，人們通常只會在第一次接觸新事物時，啟用大腦，之后大部分情況都處于“無意識狀態(tài)”。
4.1.3 行業(yè)情況
4.1.3.1 PC端
源于眼動視覺軌跡：自左向右的瀏覽習慣，因此行動按鈕一般為——左行進，右后退。
PC端（win系統(tǒng)）：左行進，右后退。
4.1.3.2 移動端
- 便于大多數(shù)右利手用戶單手持機操作；
- 符合古騰堡法則：左上角是視覺的第一落點區(qū)，而右下角是視覺最終落點區(qū)，右側行進可避免閱讀視線順序造成無意識的回跳。
移動端：左后退，右行進
4.2 按鈕的召喚行為
通常，我們在產(chǎn)品中會為了達成某種指標，需要在界面上引導用戶去完成我們希望其完成的操作。
且這類操作是可以達成某種目的的，我們把這類操作稱為「召喚行為」，該按鈕成為召喚按鈕，又稱CTA（Call To Action），即從元素的角度引導用戶完成任務，提升產(chǎn)品轉化率。
召喚行為：取消
召喚行為：取消
召喚行為：繼續(xù)選座
召喚行為：繼續(xù)選座
調(diào)換位置雖然能暫時解決用戶的退出行為，但容易產(chǎn)生誤操作，與用戶的期望不同，導致在產(chǎn)品體驗上會被用戶排斥。
在模態(tài)彈窗下，還需要配合不同彈窗類型的標題文案/說明文案意向以及使用場景，來進行召喚按鈕的設計，舉例示意如下。
小結：在移動端產(chǎn)品行動按鈕設計中，一般回退操作在左，行進操作在右，召喚屬性根據(jù)場景、彈窗標題等對按鈕做突出處理。
5. Part3：模態(tài)彈窗下按鈕的召喚行為優(yōu)先級程度評估
以上是站在用戶體驗角度對按鈕設計的分析，那么，在實際的方案設計到落地過程中，我們不僅要滿足用戶體驗，同時也要站在業(yè)務方的角度看待問題，綜合評估業(yè)務價值與用戶體驗，最終權衡兩者得到的最優(yōu)方案。
那么如何評估召喚行為的強弱以及權衡業(yè)務價值與用戶體驗關系呢，有以下幾點建議：
5.1 依據(jù)產(chǎn)品業(yè)務性質(zhì)
5.2 依據(jù)產(chǎn)品生命周期
歸納&總結
- 【召喚按鈕優(yōu)先級表達】：包含的按鈕>概括按鈕>文本按鈕（文本顏色、加粗）；
- 【行動按鈕位置循序】：左回退，右行進，核心是建立并遵循用戶慣性認知，不隨意打破；
- 【召喚行為內(nèi)核】召喚行為不是用戶想做的事，而是我們應該要讓用戶做的事，但不是強迫；
- 【召喚行為優(yōu)先級程度評估】：需要結合需求的觸發(fā)場景，區(qū)分所處的產(chǎn)品業(yè)務性質(zhì)，確定所處的產(chǎn)品生命周期。
作者：這個Leo不太冷，微信公眾號：VMIC UED
本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自Pexles，基于 CC0 協(xié)議
4.1.3.1 部分 錯誤