欧美三级在线播放,亚洲旡码a∨一区二区三区,最新精品国自产拍福利

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

B端組件設(shè)計手冊——按鈕篇

婷婷與li

2021-04-15

5 評論 11392 瀏覽 95 收藏

29 分鐘

編輯導(dǎo)語：按鈕設(shè)計在產(chǎn)品中是非常重要的組件之一，并且也是跟用戶觸發(fā)按鈕的關(guān)鍵操作，所以設(shè)計師在對于按鈕的設(shè)計時需要注意多種細(xì)節(jié)和規(guī)范，確保用戶體驗；本文作者分享了關(guān)于B端組件設(shè)計中的按鈕，我們一起來了解一下。

我們在工作中經(jīng)常會遇到各種各樣的問題，遇到問題并不可怕，畢竟解決問題也是設(shè)計師不可或缺的能力之一，包豪斯“以解決問題為中心”的設(shè)計理念也深深影響著現(xiàn)代設(shè)計，所以定期的復(fù)盤和整理以及尋找解決辦法是我們設(shè)計道路非常重要的環(huán)節(jié)，此篇即為設(shè)計師遇事不求人自己找答案系列的按鈕篇；

回到本文，我們在日常的設(shè)計工作中，按鈕是比較常見的組件，也是各個終端必不可少的組件之一。本文主要整理B端Web端的按鈕的使用，Web常用的組件主要有反饋類組件、表單類組件、基礎(chǔ)組件即按鈕、數(shù)據(jù)展示類組件、導(dǎo)航類組件以及業(yè)務(wù)類組件。

一、按鈕的概述

1. 概述

按鈕是界面設(shè)計中比較重要的組件之一，是用戶引流和行動觸發(fā)的關(guān)鍵，用于提示用戶按下按鈕后將進(jìn)行的操作，主要由文字和圖標(biāo)組成，可理解為一個操作的觸發(fā)器。

來看看幾個網(wǎng)站的解釋：

Ant Design：按鈕用于開始一個即時操作。
Material io：Buttons allow users to take actions, and make choices, with a single tap；通過按鈕，用戶只需單擊一下即可執(zhí)行操作并做出選擇。
Vant：按鈕用于觸發(fā)一個操作，如提交表單。
View UI：基礎(chǔ)組件，觸發(fā)業(yè)務(wù)邏輯時使用。

2. 按鈕的起源

按鈕的前身是物理按鈕，是連接人類與工業(yè)產(chǎn)品的橋梁，極大程度降低了人與機(jī)器互動的門檻，為人們提供了很大的便利。

1988年柯達(dá)公司發(fā)明了第一臺可拍攝100張照片的柯達(dá)相機(jī)布朗尼，同時它的創(chuàng)始人伊士曼設(shè)計了流芳百世的廣告詞：“您只需按一下按鈕，剩余的我們來做”，廣告詞言簡意賅，并迅速傳播開來，可謂開創(chuàng)了攝影文化及物理按鈕的先河。

150年后，當(dāng)今的布朗尼誕生了，也就是蘋果iPhone，自07年iPhone初代發(fā)布以來，觸摸屏逐漸取代了物理按鈕成為人機(jī)交互的主流形態(tài)。

17年iPhoneX發(fā)布，手勢交互成為大勢所趨，虛擬按鈕已經(jīng)逐漸取代了物理按鈕；布朗尼也許不是第一款便攜相機(jī)，iPhone也不是第一款觸摸屏手機(jī)，但是它們的成就都超越了技術(shù)，為各自時代的變革做出了貢獻(xiàn)。

即使到現(xiàn)代，按鈕仍是吸引用戶點擊的組件。觸摸或點擊按鈕即可觸發(fā)操作。很多家用電器和其他設(shè)備的物理按鈕變?yōu)橛|摸屏控件，它們形成的行為習(xí)慣會繼續(xù)延續(xù)按鈕設(shè)計的初衷：直觀性和易用性。

二、按鈕的組成和分類

1. 按鈕的適用范圍

首先我們在設(shè)計產(chǎn)品中的按鈕時，肯定會遵循或制定設(shè)計規(guī)范，設(shè)計規(guī)范就是產(chǎn)品的標(biāo)準(zhǔn)使用說明；統(tǒng)一的設(shè)計規(guī)范可以幫助設(shè)計師提高效率，也可以幫助產(chǎn)品開發(fā)測試甚至用戶有更好的體驗，并降低學(xué)習(xí)成本。

而企業(yè)的規(guī)范也會有不同的適用范圍，我們做設(shè)計時也要根據(jù)不同的范圍去定義設(shè)計。

首先企業(yè)級的設(shè)計規(guī)范，是針對企業(yè)整體的品牌調(diào)性，是所有產(chǎn)品設(shè)計規(guī)范的基石；其次某個產(chǎn)品線的設(shè)計規(guī)范，是在遵循企業(yè)級設(shè)計規(guī)范的基礎(chǔ)上，對該產(chǎn)品線上所有產(chǎn)品定制的專屬設(shè)計語言規(guī)范，如品牌形象、設(shè)計語言、用戶體驗等；具體產(chǎn)品規(guī)范則指針對具體某個產(chǎn)品，根據(jù)該產(chǎn)品的產(chǎn)品特性定制化設(shè)計語言；

2. 按鈕的分類

1）按使用平臺分類

日常設(shè)計工作中，移動端常見的按鈕主要有懸浮響應(yīng)按鈕、浮動按鈕及扁平按鈕；web端常見的是面性按鈕、線性按鈕、圖標(biāo)按鈕、文字按鈕；本文主要以Web端為主，所以移動端不占過多篇幅講解。

2）按結(jié)構(gòu)分類

Web端按鈕主要用來作為執(zhí)行下一個操作的入口，一般在執(zhí)行對象為一個流程對象或者作為操作按鈕時使用；Web端按鈕樣式主要有面性、線性、圖標(biāo)及文字四種；面性按鈕一般用在比較重要的場景；線性按鈕則用在次重要的操作場景；在使用純圖標(biāo)按鈕時候，一般會在鼠標(biāo)停留時出現(xiàn)提示；文字按鈕一般使用顏色來表示該文字可通過點擊鏈接到下一個操作，且多使用主題色，視覺效果弱于面性按鈕和線性按鈕。

① 圖標(biāo)文字按鈕

圖標(biāo)文字按鈕也是較常使用的按鈕形式，為確保按鈕的語義更加明確，通常會加上文本來注釋圖標(biāo)語義；

如何來處理圖標(biāo)和文字的關(guān)系呢？

圖標(biāo)和文字字體的頂線上下對齊；
圖標(biāo)和文字的杭高上下對齊，另外還要注意圖標(biāo)和文字的視覺重量，適當(dāng)調(diào)整以確保視覺平衡；

② 圖標(biāo)文字按鈕

顧名思義，面性按鈕即為填充底色的按鈕，一般用作主按鈕。

線性文字按鈕和幽靈按鈕：幽靈按鈕（Ghost Buttons）最大的特點就是透和薄，沒有填充底色和紋理，只有邊框，既保留了作為按鈕的功能性，又具備一定的簡約視覺美感。一般用于網(wǎng)站首頁，而線性按鈕用途則十分廣泛。

文字按鈕：文本按鈕一般用在列表中，常見的樣式是加顏色或下劃線的鏈接文本；

圖標(biāo)按鈕：圖標(biāo)按鈕相比于一般按鈕，節(jié)省了很大的空間，可以與其他圖標(biāo)按鈕一起排列，但是語義不明確的時候，容易造成用戶理解偏差。

一般會用下面兩種處理方式：

圖標(biāo)按鈕一般會在鼠標(biāo)移動到圖標(biāo)上時通過鼠標(biāo)hover效果展示提示信息；
在為認(rèn)知度較低的人群設(shè)計產(chǎn)品時，建議使用圖標(biāo)文字按鈕。

懸浮按鈕：一般用于移動端，Google Material Design更為常見，看起來像圖標(biāo)按鈕，其實是頁面中的主要操作按鈕；網(wǎng)站也有使用，如飛書。

3）按優(yōu)先級分類

根據(jù)優(yōu)先級和對應(yīng)樣式分為，主要按鈕，次要按鈕，輔助按鈕，一個頁面中應(yīng)包含有一個主要按鈕；當(dāng)頁面總有多個按鈕的時候，通常主要按鈕和次要按鈕搭配使用，B端頁面中，由于業(yè)務(wù)功能比較復(fù)雜，有時還會出現(xiàn)多個同等重要的主要按鈕。

4）按作用分類

行動按鈕 CTA（Call To Action）行為召喚按鈕。

在日常生活中，常見的CTA有商場里的產(chǎn)品銷售模式，比如宜家的“請?zhí)上略囋嚒?、“打開抽屜看看”，迪卡儂使用了“請試穿 Try Me”等來召喚邀請用戶，而用戶只有在試用體驗后才有可能轉(zhuǎn)化為真正的用戶。

在互聯(lián)網(wǎng)行業(yè)，CTA同樣有很多的應(yīng)用，如在按鈕、文案、圖標(biāo)等很多組件元素中，正確合理的使用行為召喚，可以為產(chǎn)品帶來更高的轉(zhuǎn)化率和收益。

行動按鈕是連接用戶和產(chǎn)品的交互點，在產(chǎn)品設(shè)計中扮演重要的角色，可以有效引導(dǎo)用戶進(jìn)行下一步操作，提高交互效率，提升交互體驗及產(chǎn)品轉(zhuǎn)化率。

功能按鈕：例如加減折疊等，主要用于交互場景。

基礎(chǔ)功能按鈕：主要指在各個系統(tǒng)中都通用的基礎(chǔ)操作，如打開、關(guān)閉、讀取數(shù)據(jù)、計算、復(fù)制、保存、刪除等基礎(chǔ)性操作。

管控按鈕：主要指除去基礎(chǔ)功能之外的功能，如對業(yè)務(wù)標(biāo)準(zhǔn)、管理規(guī)則等等進(jìn)行檢查，將業(yè)務(wù)處理的結(jié)果與設(shè)定的規(guī)則進(jìn)行比對，如與規(guī)則不符，則給出相應(yīng)的處理，如：詢問、提示、警告、終止、通知等操作。

常見功能性按鈕：

新增——界面上新增一條數(shù)據(jù)的功能；
查詢——查詢歷史數(shù)據(jù)的功能；
修改——修改已有數(shù)據(jù)的功能；
保存——將輸入的數(shù)據(jù)保存到數(shù)據(jù)庫的功能；
提交——完成業(yè)務(wù)處理后發(fā)出通知（包括走審批、轉(zhuǎn)向下個流程節(jié)點）。

兩者關(guān)系：不同的按鈕，功能也不盡相同，對應(yīng)的要處理的業(yè)務(wù)也都不一樣，將規(guī)則與按鈕綁定后，可以在不同的業(yè)務(wù)處理階段的結(jié)果進(jìn)行相應(yīng)的管理操作，點擊按鈕亦是激活管理規(guī)則。

3. 按鈕的組成

1）按鈕的組成

按鈕用于提示用戶按下按鈕后進(jìn)行操作，主要有三個部分組成：按鈕容器，圖標(biāo)和文字，其中容器又包含了容器的大小，填充/描邊顏色，以及圓角，如圖所示。

2）影響按鈕的視覺元素

設(shè)計按鈕要有主次區(qū)分，根據(jù)信息傳遞的優(yōu)先級，利用視覺元素（大小、顏色、填充、描邊、飽和度等）來表現(xiàn)按鈕的等級。

① 容器圓角

通常選用全圓角或者小圓角，小圓角一般為高度的1/4以內(nèi)。圓角傳達(dá)了一種簡單、樂觀、開放的感覺；它始于移動端，后面逐漸應(yīng)用于Web端；很多設(shè)計系統(tǒng)都在使用圓角，并在圖標(biāo)、按鈕、插畫中廣泛使用應(yīng)用。

全圓角按鈕在界面中會更突顯，更容易引導(dǎo)用戶注意進(jìn)而點擊按鈕操作。例如音樂界面中的全部播放和暫停按鈕；

② 容器填充或描邊

通常大部分的按鈕會使用品牌色，并使用一些輔助色來形成差異化，但是紅色和橙色具有刺激行為的作用，不適合在非品牌色時濫用。淺灰色和低飽和度的顏色會給人一種按鈕不可用或者禁用失效的感覺，需酌情使用。

顏色可用性：

我們在設(shè)計產(chǎn)品時，要考慮顏色的可用性，以確保又視覺障礙的人群可以使用我們的產(chǎn)品，可使用accessible-colors查看對比度，確保按鈕可讀性；
另外設(shè)計按鈕時，要考慮狀態(tài)色和主題色的區(qū)分，比如紅色橙色黃色等用于警示的顏色；

③ 容器陰影

投影顏色一般選擇與按鈕同色系，這樣看起來會更通透，不顯臟。

投影雖然會使按鈕看起來更有層次感，但是一些淺色按鈕使用投影后，反而會降低投影的辨識度，看起來不夠干凈清爽。

④ 容器形狀

按鈕的存在是為了引導(dǎo)用戶操作，如果只是為了凸顯設(shè)計使用異形按鈕，打破用戶習(xí)慣；反而會讓用戶對下一步的行為產(chǎn)生困惑，這個形狀到底它到底是個啥，是不是按鈕，能不能點擊，如果點擊了會有什么后果。

⑤ 容器尺寸

按鈕大小要便于用戶進(jìn)行點擊操作，對于大多數(shù)平臺，無論屏幕大小，觸摸區(qū)域至少達(dá)到48X48dp，物理尺寸約為9mm，不同熱區(qū)之間的間距應(yīng)為8dp，一般如果按鈕文字大小不小于極限值，按鈕的交互熱區(qū)都會滿足點擊需求。

如果是只有圖標(biāo)的按鈕，不僅要確保按鈕大小合適，也要確保交互熱區(qū)滿足點擊要求。

麻省理工觸摸實驗表明，在使用觸摸屏?xí)r人的手指部分尺寸時8-10mm，如果希望避免用戶觸摸錯誤，最小按鈕尺寸應(yīng)大于或等于10mm，而鼠標(biāo)光標(biāo)比手指接觸觸摸屏?xí)r的接觸面積小很多，因此web端按鈕可以偏小一些。

點擊按鈕是一個簡單的任務(wù)，如果用戶不能成功點擊按鈕或誤觸相鄰按鈕，會給用戶帶來負(fù)面體驗并浪費更多的時間。

對于圖標(biāo)按鈕，需確保觸摸區(qū)域大于元素的本身大小，不僅在移動端或平板上如此，在web端也應(yīng)如此。

設(shè)計按鈕的時候不應(yīng)對按鈕的尺寸做限制，按鈕是產(chǎn)品系統(tǒng)中的一部分，按鈕的大小對界面的可訪問性會有一定的影響，因此我們在設(shè)計按鈕的時候，寬度和高度都應(yīng)有一定的標(biāo)準(zhǔn)。

高度上應(yīng)根據(jù)字體的行高，再添加標(biāo)準(zhǔn)單位的倍數(shù)間距，一般最小單位為4px，原因有兩個：

有視覺障礙的人可能會放大瀏覽器的頁面，這時頁面字體會變大，如果按鈕尺寸定死，按鈕文字就會超出按鈕容器；
前端在創(chuàng)建按鈕的時候，會在div容器中添加內(nèi)間距，而不是固定高度；

水平內(nèi)間距，有兩種方法：

使按鈕的寬度和網(wǎng)格對齊，這樣所有的按鈕長度都可以保持一致，但是它對按鈕文字有一定限制；
兩側(cè)固定內(nèi)間距，并設(shè)定按鈕的最小寬度，這樣可以在一定程度上避免過窄的按鈕出現(xiàn)，但是不同字段按鈕的長度也不同，當(dāng)很多按鈕在一起的時候，看起來會有些不均勻；

還有一種方法是使用大寫字母W（字號同按鈕文字）來確定邊距，垂直水平內(nèi)間距都至少為1W，為了提高可讀性，水平內(nèi)間距一般為2W；

⑥ 圖標(biāo)

按鈕中圖標(biāo)需要統(tǒng)一設(shè)計并保持一致，圖標(biāo)的線條粗細(xì)盡量和文字的筆畫粗細(xì)保持一致，更顯細(xì)節(jié)。

雖然純圖標(biāo)按鈕顯得干凈簡潔，但是還需要考慮圖形能否準(zhǔn)確表達(dá)含義、傳遞信息，是否會引起用戶誤解或者認(rèn)知錯誤。

⑦ 文本

按鈕文字：

一定的留白會使按鈕看起來更有呼吸感。可以分析一些按鈕的負(fù)空間，看看按鈕文字與按鈕容器中負(fù)空間之間是否存在一些比例關(guān)系，并將這些關(guān)系運用到按鈕設(shè)計中，這樣我們的設(shè)計也許會更加的理性和有理有據(jù)。

一致性：

我們在產(chǎn)品設(shè)計前期，需要制定按鈕標(biāo)簽的規(guī)范，以免后期花費更多的時間去修改所有的按鈕；大多數(shù)按鈕都包含指示文字告知用戶下一步將執(zhí)行什么操作，一般建議使用“動詞+名詞”結(jié)構(gòu)，如：保存文章，而不是保存，這樣按鈕文本會更具有規(guī)范性以及語義明確。

按鈕文本言簡意賅：

盡量不要換行，一行之內(nèi)顯示；
好的文案會引導(dǎo)用戶進(jìn)行操作；
按鈕上的文案與樣式一樣重要，錯誤的文案會使用戶感到困惑，甚至?xí)?dǎo)致錯誤操作；
好的文案會引導(dǎo)用戶操作，并且最好包含動詞，以及準(zhǔn)確的表達(dá)操作目的，避免使用是、否或通用詞語。

⑧ 一致性

為了降低用戶在操作過程中的理解成本，設(shè)計按鈕的時候也要注意一致性，比如同一板塊的按鈕盡量大小和風(fēng)格一致（比如圓角的大小，按鈕形狀的大小）。

非按鈕文字，比如標(biāo)題不要設(shè)計成按鈕的樣式，以免對用戶錯誤的引導(dǎo)，產(chǎn)生誤操作。

⑨ 主次分明

通過視覺效果凸顯主要按鈕，弱化次要按鈕和輔助按鈕，以引導(dǎo)用戶操作。

三、按鈕的狀態(tài)

1. 按鈕的不同狀態(tài)

按鈕不同的狀態(tài)可以給予用戶不同的反饋，可以讓用戶了解產(chǎn)品按鈕是否可以點擊，已經(jīng)點擊或者已經(jīng)成功點擊。

正常-表示該組件是可交互的，也就是正常頁面總的顯示效果；
焦點-當(dāng)用戶使用選項卡時，需要有一個“焦點”狀態(tài)告知用戶按鈕是可點擊或者未點擊狀態(tài)，使用鍵盤或其他輸入法傳達(dá)用戶已突出顯示元素的信息
懸停-當(dāng)用戶將鼠標(biāo)置于按鈕上方時顯示的狀態(tài)，移動設(shè)備和平板電腦不會出現(xiàn)懸停狀態(tài)；
活動-按下狀態(tài)pressed，表示用戶已使用鼠標(biāo)或手指輕按按鈕時的狀態(tài)，當(dāng)用戶釋放鼠標(biāo)或者手指時，按鈕會出現(xiàn)已點擊狀態(tài)。處理方式：增加10%的暗度；
進(jìn)度/加載-在不立即執(zhí)行操作并通知組件正在完成操作的過程中使用。
已禁用-表示該組件當(dāng)前處于非交互狀態(tài)，但將來可以啟用；一般用于信息未填寫完整，或者未達(dá)到使用條件時會出禁用狀態(tài)；顏色使用建議：一般使用灰色或者降低不透明度，把正常狀態(tài)做弱，提醒用戶避免做無效點擊；

相信每個人都遇到過這種情況，對當(dāng)前進(jìn)度產(chǎn)生困惑，花費了一些時間去思考，為什么操作進(jìn)度被禁用按鈕阻止了，我們需要做什么才能恢復(fù)原來的可交互狀態(tài)。

建議盡可能避免使用禁用按鈕，如果用戶未提供必填信息，只需突出顯示未填信息或者顯示消息提示通知。

使用場景：

界面內(nèi)容已通過審核，不可再編輯；
操作用戶沒有編輯權(quán)限；

四、如何選擇正確的按鈕

1. 關(guān)于按鈕的使用規(guī)則

1）并不是所有時候都有默認(rèn)按鈕

我們通常會將最常用按鈕設(shè)置為默認(rèn)按鈕（主按鈕樣式），并置于焦點狀態(tài)；以便引導(dǎo)用戶更快的完成任務(wù)。

但是，當(dāng)所有按鈕的重要程度都相同時，或者是危險操作時，這種情況下需要用戶慎重選擇，而不是做區(qū)分導(dǎo)致用戶誤操作。

如果可交互元素和不可交互元素使用來相同的樣式，用戶就會疑惑，不知道哪里可以點擊，哪里不可以點擊。

2）不要讓我思考

界面對用戶來說應(yīng)該是清晰明了的，而不是讓人困惑的，經(jīng)過多年的各種設(shè)備和產(chǎn)品的訓(xùn)練，用戶對按鈕的認(rèn)知已經(jīng)有了一定的認(rèn)知，如果偏差較大，會讓用戶產(chǎn)生困惑從而花更多的時間來思考。

3）一致性有助于提高效率和準(zhǔn)確性

“一致性是最強(qiáng)大的可用性原則之一：當(dāng)事物始終表現(xiàn)相同時，用戶不必?fù)?dān)心會發(fā)生什么?！薄鸥鞑肌つ釥柹↗akob Nielsen）

使用一致性，有助于用戶高效并且準(zhǔn)確的在產(chǎn)品中實現(xiàn)其目標(biāo)；我們在做設(shè)計按鈕的主要、次要和第三種樣式的時候，盡量使用一些常見的樣式，不僅要在設(shè)計系統(tǒng)內(nèi)保持一致，也要考慮到整個平臺的一致性。

4）無障礙設(shè)計

影響可訪問性的因素有很多，比如熱區(qū)大小，字體大小、顏色和對比度等，有很多工具可以用來檢查組件設(shè)計的性能。

2. 適配不同的場景

1）不同設(shè)備

不同的機(jī)型，要考慮按鈕的上下銜接，以便給用戶帶來更好的體驗。

2）不同主題模式

確保按鈕的可讀性，需要考慮在不同環(huán)境下的適應(yīng)度，現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或淺色背景下的運用，還需考慮深色模式，確保按鈕與背景的對比度和可讀性。

3）主按鈕的左右位置

不管是什么選擇，都有相應(yīng)的理論依據(jù)支撐，并且不管選擇哪一種，都不會出現(xiàn)嚴(yán)重的可用性問題，所以，不管最終作何選擇，相信我們都會有自己的理由。

Windows系統(tǒng)系統(tǒng)將確認(rèn)按鈕放在左邊，Mac OS系統(tǒng)習(xí)慣將確認(rèn)按鈕放在右邊，用戶使用不同的系統(tǒng)，行為習(xí)慣也會有所不同。移動端傾向于將引導(dǎo)用戶操作的按鈕放在右邊，吸引用戶點擊。

用戶對彈窗中行動按鈕的認(rèn)知一般為左退右進(jìn)；平臺上iOS和mac OS一般均為左退右進(jìn)，而Windows和Android為左進(jìn)右退，Android4.0發(fā)布以后也改為退右進(jìn)模式，更貼合用戶心智模型。

為了防止用戶誤操作，通常會將確認(rèn)按鈕放在左邊，通過助力設(shè)計讓用戶再次確認(rèn)；我們在做設(shè)計的時候既要考慮操作不同系統(tǒng)的使用習(xí)慣，也要結(jié)合用戶的習(xí)慣，將按鈕放在合適的位置以便用戶操作。

針對按鈕位置左的A/B測試結(jié)論：

Walker 和 Stanley 的兩人針對這個問題做了對比研究實驗，實驗結(jié)果告訴我們，不要違背用戶使用習(xí)慣；因為曾經(jīng)有人做過實驗，在操作性條件學(xué)習(xí)的初期，行為是具有目標(biāo)導(dǎo)向的，會根據(jù)行為結(jié)果靈活調(diào)整；而在過度學(xué)習(xí)后，行為轉(zhuǎn)變成習(xí)慣行為，模式固定，不易改變。

習(xí)慣行為是一種經(jīng)過長期重復(fù)形成固定動作，不需經(jīng)大腦思考，自動執(zhí)行。

首先用戶的習(xí)慣是點擊右側(cè)按鈕，當(dāng)主要按鈕在右側(cè)的時候，會更加引導(dǎo)用戶習(xí)慣性的點擊，當(dāng)處于A選項時，主按鈕位置與用戶心理預(yù)期位置不符，用戶會稍微停留一下，思考主按鈕和次要按鈕的文案內(nèi)容，再去點擊。