如何設計行動按鈕？用超多案例幫你完整掌握！

前言

“行動按鈕”作為連接用戶與產品的交互觸點，在產品設計中扮演了至關重要的角色，一個優秀的按鈕控件可以有效的提升交互體驗，引導用戶，提升產品轉化率。本文是我在設計環節遇到問題并尋求解決方案過程中總結沉淀下來的幾點小結，希望能為設計師伙伴們提供一些啟發或幫助。

背景

需求源于一款產品意在提升桌面圖標的生成率，所以業務側希望在用戶退出該產品時以彈窗的形式引導用戶創建圖標。針對該需求，在彈窗行動按鈕的優先級表達、行退操作布局設計中產生了疑惑，主要體現在以下4個方案中，頁面示意如下：

發現問題

• 按鈕的優先級該如何表達？
• 行進、后退該如何放置？
• 業務側與用戶側該如何權衡？

問題聚焦

• 行動按鈕的優先級表達規范
• 行動按鈕的召喚行為分析
• 行動按鈕的本源分析

Part 1. 行動按鈕的優先級表達規范

通過對 Material Design、簡書、IXDC、MicroUX及設計相關文獻的查閱歸納，對中行動按鈕的規范、經驗總結提煉如下：

按鈕的優先級表達可劃分為三個層級

具備高度強調作用的“填充（包含）按鈕”、中度強調的“輪廓（概述）按鈕”、低度強調的“文本按鈕”。

正確表達

單個突出按鈕：布局中應包含一個突出的按鈕，以使其他按鈕在層次結構中的重要性降低。此高強調按鈕吸引了最多的關注。

多個按鈕：一個應用一次可以在（模態彈窗/底部欄）布局中顯示多個按鈕，因此高強調按鈕可以與執行次要功能的中強調按鈕和低強調按鈕配合使用。

可以在填充的按鈕（高強調度）旁邊放置一個輪廓按鈕（中等強調）。

可以在輪廓按鈕（中等強調）旁邊放置一個文本按鈕（低強調）。

使用多個按鈕時，指示更重要的操作時，請將其放置在填充的按鈕中。

文本按鈕通常嵌入在包含的組件（如卡片和對話框）中，以使其自身與出現它們的組件相關聯。

文本按鈕間又可以通過顏色，粗細進行優先級區分。

盡量避免

避免同時并列使用兩個填充按鈕（高優先級按鈕）。

Part 2. 彈窗中行動按鈕的召喚行為分析

用戶慣性認知：左后退，右行進

論據說明：

頭部平臺情況

• iOS的移動、電腦設備絕大所述情況下行進按鈕都在右側，后撤在左側；
• 早些時候，win與Android都為左前進，右后撤。而Android在4.0版本發布后也將按鈕調換為了“左后退，右行進”，順應了設計的大趨勢。

A/B test數據結論。

早在 2004 年，就有 Walker 和 Stanley 的兩人針對這個問題做了對比研究實驗，實驗選取定量測試者對程序進行操作，進行兩輪測試并分別在按鈕位置與問題上做了調換；

實驗結果：在第一次實驗中，A、B兩實驗組行進與后退的正確率相差無幾，未達到（統計學中）“有感”；第二次實驗（A、B組調換位置，并問相反的問題），A組變化不大，B組錯誤率高出三倍。（資料來源：《體驗進階》）

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

行業情況

PC端。源于眼動視覺軌跡：自左向右的瀏覽習慣，因此行動按鈕一般為：左行進，右后退。

△ PC端（win系統）：左行進，右后退

移動端

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

△?移動端：左后退，右行進

按鈕的召喚行為

通常，我們在產品中會為了達成某種指標，需要在界面上引導用戶去完成我們希望其完成的操作。且這類操作是可以達成某種目的的，我們把這類操作稱為「召喚行為」，該按鈕成為召喚按鈕，又稱CTA（Call To Action），即從元素的角度引導用戶完成任務，提升產品轉化率。

△?召喚行為：取消

△?召喚行為：取消

△?召喚行為：繼續選座

△?召喚行為：繼續選座（調換位置雖然能暫時解決用戶的退出行為，但容易產生誤操作，與用戶的期望不同，導致在產品體驗上會被用戶排斥）

在模態彈窗下，還需要配合不同彈窗類型的標題文案/說明文案意向以及使用場景，來進行召喚按鈕的設計，舉例示意如下。

小結：在移動端產品行動按鈕設計中，一般回退操作在左，行進操作在右，召喚屬性根據場景、彈窗標題等對按鈕做突出處理。

Part 3. 模態彈窗下按鈕的召喚行為優先級程度評估

以上是站在用戶體驗角度對按鈕設計的分析，那么，在實際的方案設計到落地過程中，我們不僅要滿足用戶體驗，同時也要站在業務方的角度看待問題，綜合評估業務價值與用戶體驗，最終權衡兩者得到的最優方案。那么如何評估召喚行為的強弱以及權衡業務價值與用戶體驗關系呢，小編有以下幾點建議。

依據產品業務性質

依據產品生命周期

歸納&總結

• 「召喚按鈕優先級表達」：包含的按鈕>概括按鈕>文本按鈕（文本顏色、加粗）。
• 「行動按鈕位置循序」：左回退，右行進，核心是建立并遵循用戶慣性認知，不隨意打破。
• 「召喚行為內核」召喚行為不是用戶想做的事，而是我們應該要讓用戶做的事，但不是強迫。
• 「召喚行為優先級程度評估」：需要結合需求的觸發場景，區分所處的產品業務性質，確定所處的產品生命周期。

歡迎關注作者微信公眾號：「VMIC UED」