前言

“行動(dòng)按鈕”作為連接用戶與產(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é)遇到問(wèn)題并尋求解決方案過(guò)程中總結(jié)沉淀下來(lái)的幾點(diǎn)小結(jié)，希望能為設(shè)計(jì)師伙伴們提供一些啟發(fā)或幫助。

背景

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

發(fā)現(xiàn)問(wèn)題

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

問(wèn)題聚焦

• 行動(dòng)按鈕的優(yōu)先級(jí)表達(dá)規(guī)范
• 行動(dòng)按鈕的召喚行為分析
• 行動(dòng)按鈕的本源分析

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

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

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

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

正確表達(dá)

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

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

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

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

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

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

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

盡量避免

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

Part 2. 彈窗中行動(dòng)按鈕的召喚行為分析

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

論據(jù)說(shuō)明：

頭部平臺(tái)情況

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

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

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

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

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

行業(yè)情況

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

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

移動(dòng)端

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

△?移動(dòng)端：左后退，右行進(jìn)

按鈕的召喚行為

通常，我們?cè)诋a(chǎn)品中會(huì)為了達(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)上會(huì)被用戶排斥）

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

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

Part 3. 模態(tài)彈窗下按鈕的召喚行為優(yōu)先級(jí)程度評(píng)估

以上是站在用戶體驗(yàn)角度對(duì)按鈕設(shè)計(jì)的分析，那么，在實(shí)際的方案設(shè)計(jì)到落地過(guò)程中，我們不僅要滿足用戶體驗(yàn)，同時(shí)也要站在業(yè)務(wù)方的角度看待問(wèn)題，綜合評(píng)估業(yè)務(wù)價(jià)值與用戶體驗(yàn)，最終權(quán)衡兩者得到的最優(yōu)方案。那么如何評(píng)估召喚行為的強(qiáng)弱以及權(quán)衡業(yè)務(wù)價(jià)值與用戶體驗(yàn)關(guān)系呢，小編有以下幾點(diǎn)建議。

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

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

歸納&總結(jié)

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

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」