一次做設(shè)計對時候，一個同事很好奇的問了下確定按鈕是在左側(cè)還是右側(cè)！我這段時間正好有空閑，也很好奇想去了解，所以就有了這篇文章，與大家分享。

一、調(diào)研主流規(guī)范和主流應(yīng)用

1. OS系統(tǒng)規(guī)范

我先去IOS設(shè)計規(guī)范的官方網(wǎng)站查閱，發(fā)現(xiàn)蘋果規(guī)范沒有提到取消和執(zhí)行按鈕的位置要求！只說到彈出框可以包含最多3個按鈕，其中一個必須要是不執(zhí)行按鈕，用于取消執(zhí)行操作。

但我們可以看到展示的demo上，取消按鈕是在左側(cè)的，執(zhí)行按鈕是在右側(cè)。

同時我也查詢了按鈕的相關(guān)規(guī)范，也沒做出相關(guān)的說明。但展示的demo，也是取消在左側(cè)，右側(cè)為執(zhí)行按鈕。

以上截圖取自：macOS Design Themes/Human Interface Guidelines/windows and Views 章節(jié) Alerts 內(nèi)容

2.?安卓Material Design規(guī)范Dialogs章節(jié)

后來我去查閱了安卓端的規(guī)范，也沒有給出詳細的文字說明，但展示的demo顯示取消在左側(cè)，執(zhí)行在右側(cè)和IOS的規(guī)范是一樣的。截圖來自Material Design Dialogs 章節(jié)

3.?螞蟻金服移動端設(shè)計規(guī)范

截圖來自螞蟻金服Ant Design移動端設(shè)計規(guī)范https://mobile.ant.design/index-cn

4. 主流應(yīng)用

我們隨機選擇了一些app下載量比較大的應(yīng)用，分別查看了安卓和蘋果的應(yīng)用，發(fā)現(xiàn)也是取消在左側(cè)，執(zhí)行在右側(cè)。

二、分析原因

我們知道了絕大部分主流app都是這樣設(shè)計，這個是表現(xiàn)，深層的原因是什么呢？

我先在網(wǎng)上查詢相關(guān)文章，有的同學(xué)做了如下解釋：

1. 閱讀視線的順序造成視線無意識回跳

我們可以看到當(dāng)消息提示我們進行下一步操作的時候，我們會下意識的尋找動作（action）按鈕，上圖左側(cè)是WP的彈窗，確定／取消。

我們需要點確定的時候會先進行掃視，確定按鈕放置在左邊的時候，往往會從左往右看一遍再無意識回跳到左邊。而不是說我先看到左邊有確定就停止往下瀏覽了。

2. 古騰堡法則

古騰堡法則指人們在瀏覽頁面的時候，視覺都趨向于從上到下，從左到右的眼動規(guī)律。左上角是視覺的第一落點區(qū)，而右下角是視覺最終落點區(qū)。

用戶的視覺中心往往在頁面的左上方，而結(jié)束瀏覽時視線往往落在右下角，所以合理利用這個法則可以幫助用戶更好地獲取內(nèi)容并采取行動。

文章來自https://www.jianshu.com/p/1c5d26e07604

2. 古騰堡法則的弱項

特意去查詢了《設(shè)計的原則》一書，里面講到了古登堡圖的介紹，里面有一條關(guān)于這個理論似乎只適合于大量同質(zhì)信息平衡分布的情況。設(shè)計的元素的也會影響視線的變動。

圖來自：《設(shè)計的原則》第102頁

三、定量分析

也有人做了定量研究，這30人被分成A和B兩組，A組先使用放在左邊的確定按鈕，再使用放在右邊的確定按鈕；B組先使用放在右邊的確定按鈕，再使用放在左邊的確定按鈕。

有感興趣的同學(xué)可以去看看此篇文章，文章來自??https://www.jianshu.com/p/f176bd63c027

這個實驗的觀點：確定/執(zhí)行按鈕在右側(cè)，出錯率會更低。

我個人覺得有幾個方面的疑問：

1. 測試者來自哪個國家，因為國外版本的產(chǎn)品體驗和國內(nèi)的產(chǎn)品體驗有很多的不同，使用產(chǎn)品的方式也有不一樣的地方。
2. 第二次操作操作者可能會帶有“第一次操作的記憶”，因為測試的人更想早點結(jié)束獲得一定的傭金，所以不一定會認真去看按鈕文字，所以第一次的測試錯誤率更有價值，真實反應(yīng)了用戶的習(xí)慣操作。

結(jié)論

從理論、實驗來看也只是推敲這個情況的深層原因，但無不例外的說明一點，就是確定/執(zhí)行按鈕在右側(cè)，更符合人們的使用習(xí)慣。

這個習(xí)慣是從大量的產(chǎn)品使用當(dāng)中，逐漸養(yǎng)成的習(xí)慣。我們做產(chǎn)品設(shè)計的時候，更多要依靠這種習(xí)慣，才可以讓產(chǎn)品使用更加順手。

如果產(chǎn)品想讓用戶更多執(zhí)行確定操作，更應(yīng)該把按鈕放置在右側(cè)。但如果你想讓用戶不執(zhí)行相關(guān)操作，反其道而行之或許是一個辦法，但這樣也會引起用戶的反感。

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

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