編輯導(dǎo)語：行動按鈕是將用戶與產(chǎn)品連接起來的關(guān)鍵點(diǎn)，一個(gè)設(shè)計(jì)合理的行動按鈕可以提升用戶的體驗(yàn)感，加深用戶對產(chǎn)品的好感，進(jìn)而提高用戶黏性。接下來，本文作者通過回顧自身在設(shè)計(jì)中積累的經(jīng)驗(yàn)，為大家總結(jié)了一些設(shè)計(jì)出優(yōu)秀的按鈕控件的技巧。

1. 前言

“行動按鈕”作為連接用戶與產(chǎn)品的交互觸點(diǎn)，在產(chǎn)品設(shè)計(jì)中扮演了至關(guān)重要的角色，一個(gè)優(yōu)秀的按鈕控件可以有效的提升交互體驗(yàn)，引導(dǎo)用戶，提升產(chǎn)品轉(zhuǎn)化率。

本文是我在設(shè)計(jì)環(huán)節(jié)遇到問題并尋求解決方案過程中總結(jié)沉淀下來的幾點(diǎn)小結(jié)，希望能為設(shè)計(jì)師伙伴們提供一些啟發(fā)或幫助。

2. 背景

需求源于一款產(chǎn)品意在提升桌面圖標(biāo)的生成率，所以業(yè)務(wù)側(cè)希望在用戶退出該產(chǎn)品時(shí)以彈窗的形式引導(dǎo)用戶創(chuàng)建圖標(biāo)。針對該需求，在彈窗行動按鈕的優(yōu)先級表達(dá)、行退操作布局設(shè)計(jì)中產(chǎn)生了疑惑，主要體現(xiàn)在以下4個(gè)方案中，頁面示意如下：

發(fā)現(xiàn)問題：

1. 按鈕的優(yōu)先級該如何表達(dá)？
2. 行進(jìn)、后退該如何放置？
3. 業(yè)務(wù)側(cè)與用戶側(cè)該如何權(quán)衡？

問題聚焦：

1. 行動按鈕的優(yōu)先級表達(dá)規(guī)范
2. 行動按鈕的召喚行為分析
3. 行動按鈕的本源分析

3. Part 1：行動按鈕的優(yōu)先級表達(dá)規(guī)范

通過對 Material Design、簡書、IXDC、MicroUX及設(shè)計(jì)相關(guān)文獻(xiàn)的查閱歸納，對中行動按鈕的規(guī)范、經(jīng)驗(yàn)總結(jié)提煉如下：

3.1 按鈕的優(yōu)先級表達(dá)可劃分為三個(gè)層級

具備高度強(qiáng)調(diào)作用的“填充（包含）按鈕”、中度強(qiáng)調(diào)的“輪廓（概述）按鈕”、低度強(qiáng)調(diào)的“文本按鈕”。

3.2 正確表達(dá)

3.2.1 單個(gè)突出按鈕

布局中應(yīng)包含一個(gè)突出的按鈕，以使其他按鈕在層次結(jié)構(gòu)中的重要性降低，此高強(qiáng)調(diào)按鈕吸引了最多的關(guān)注。

3.2.2 多個(gè)按鈕

一個(gè)應(yīng)用一次可以在（模態(tài)彈窗/底部欄）布局中顯示多個(gè)按鈕，因此高強(qiáng)調(diào)按鈕可以與執(zhí)行次要功能的中強(qiáng)調(diào)按鈕和低強(qiáng)調(diào)按鈕配合使用。

3.2.2.1 可以在填充的按鈕（高強(qiáng)調(diào)度）旁邊放置一個(gè)輪廓按鈕（中等強(qiáng)調(diào)）。

3.2.2.2 可以在輪廓按鈕（中等強(qiáng)調(diào)）旁邊放置一個(gè)文本按鈕（低強(qiáng)調(diào)）。

3.2.2.3 使用多個(gè)按鈕時(shí)，指示更重要的操作時(shí)，請將其放置在填充的按鈕中。

3.2.2.4 文本按鈕通常嵌入在包含的組件（如卡片和對話框）中，以使其自身與出現(xiàn)它們的組件相關(guān)聯(lián)。

3.2.2.5 文本按鈕間又可以通過顏色，粗細(xì)進(jìn)行優(yōu)先級區(qū)分。

3.3 盡量避免

避免同時(shí)并列使用兩個(gè)填充按鈕（高優(yōu)先級按鈕）。

4. Part2：彈窗中行動按鈕的召喚行為分析

4.1 用戶慣性認(rèn)知：左后退，右行進(jìn)

論據(jù)說明：

4.1.1 頭部平臺情況

• iOS的移動、電腦設(shè)備絕大所述情況下行進(jìn)按鈕都在右側(cè)，后撤在左側(cè)；
• 早些時(shí)候，win與Android都為左前進(jìn)，右后撤。而Android在4.0版本發(fā)布后也將按鈕調(diào)換為了“左后退，右行進(jìn)”，順應(yīng)了設(shè)計(jì)的大趨勢。

4.1.2 A/B test數(shù)據(jù)結(jié)論

早在 2004 年，就有 Walker 和 Stanley 的兩人針對這個(gè)問題做了對比研究實(shí)驗(yàn)，實(shí)驗(yàn)選取定量測試者對程序進(jìn)行操作，進(jìn)行兩輪測試并分別在按鈕位置與問題上做了調(diào)換。

實(shí)驗(yàn)結(jié)果：在第一次實(shí)驗(yàn)中，A、B兩實(shí)驗(yàn)組行進(jìn)與后退的正確率相差無幾，未達(dá)到（統(tǒng)計(jì)學(xué)中）“有感”；第二次實(shí)驗(yàn)（A、B組調(diào)換位置，并問相反的問題），A組變化不大，B組錯(cuò)誤率高出三倍（資料來源：《體驗(yàn)進(jìn)階》）。

結(jié)論：該實(shí)驗(yàn)告訴我們一個(gè)道理，即不要輕易違背用戶習(xí)慣。為了提高效率，人們通常只會在第一次接觸新事物時(shí)，啟用大腦，之后大部分情況都處于“無意識狀態(tài)”。

4.1.3 行業(yè)情況

4.1.3.1 PC端

源于眼動視覺軌跡：自左向右的瀏覽習(xí)慣，因此行動按鈕一般為——左行進(jìn)，右后退。

PC端（win系統(tǒng)）：左行進(jìn)，右后退。

4.1.3.2 移動端

• 便于大多數(shù)右利手用戶單手持機(jī)操作；
• 符合古騰堡法則：左上角是視覺的第一落點(diǎn)區(qū)，而右下角是視覺最終落點(diǎn)區(qū)，右側(cè)行進(jìn)可避免閱讀視線順序造成無意識的回跳。

移動端：左后退，右行進(jìn)

4.2 按鈕的召喚行為

通常，我們在產(chǎn)品中會為了達(dá)成某種指標(biāo)，需要在界面上引導(dǎo)用戶去完成我們希望其完成的操作。

且這類操作是可以達(dá)成某種目的的，我們把這類操作稱為「召喚行為」，該按鈕成為召喚按鈕，又稱CTA（Call To Action），即從元素的角度引導(dǎo)用戶完成任務(wù)，提升產(chǎn)品轉(zhuǎn)化率。

召喚行為：取消

召喚行為：取消

召喚行為：繼續(xù)選座

召喚行為：繼續(xù)選座

調(diào)換位置雖然能暫時(shí)解決用戶的退出行為，但容易產(chǎn)生誤操作，與用戶的期望不同，導(dǎo)致在產(chǎn)品體驗(yàn)上會被用戶排斥。

在模態(tài)彈窗下，還需要配合不同彈窗類型的標(biāo)題文案/說明文案意向以及使用場景，來進(jìn)行召喚按鈕的設(shè)計(jì)，舉例示意如下。

小結(jié)：在移動端產(chǎn)品行動按鈕設(shè)計(jì)中，一般回退操作在左，行進(jìn)操作在右，召喚屬性根據(jù)場景、彈窗標(biāo)題等對按鈕做突出處理。

5. Part3：模態(tài)彈窗下按鈕的召喚行為優(yōu)先級程度評估

以上是站在用戶體驗(yàn)角度對按鈕設(shè)計(jì)的分析，那么，在實(shí)際的方案設(shè)計(jì)到落地過程中，我們不僅要滿足用戶體驗(yàn)，同時(shí)也要站在業(yè)務(wù)方的角度看待問題，綜合評估業(yè)務(wù)價(jià)值與用戶體驗(yàn)，最終權(quán)衡兩者得到的最優(yōu)方案。

那么如何評估召喚行為的強(qiáng)弱以及權(quán)衡業(yè)務(wù)價(jià)值與用戶體驗(yàn)關(guān)系呢，有以下幾點(diǎn)建議：

5.1 依據(jù)產(chǎn)品業(yè)務(wù)性質(zhì)

5.2 依據(jù)產(chǎn)品生命周期

歸納&總結(jié)

1. 【召喚按鈕優(yōu)先級表達(dá)】：包含的按鈕>概括按鈕>文本按鈕（文本顏色、加粗）；
2. 【行動按鈕位置循序】：左回退，右行進(jìn)，核心是建立并遵循用戶慣性認(rèn)知，不隨意打破；
3. 【召喚行為內(nèi)核】召喚行為不是用戶想做的事，而是我們應(yīng)該要讓用戶做的事，但不是強(qiáng)迫；
4. 【召喚行為優(yōu)先級程度評估】：需要結(jié)合需求的觸發(fā)場景，區(qū)分所處的產(chǎn)品業(yè)務(wù)性質(zhì)，確定所處的產(chǎn)品生命周期。

作者：這個(gè)Leo不太冷，微信公眾號：VMIC UED

本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Pexles，基于 CC0 協(xié)議