你知道嗎？按鈕位置的設計會影響用戶完成任務的速度。更快地完成任務會帶來更滿意的用戶體驗。如果你也想帶給用戶更滿意的用戶體驗，那你應當把按鈕放在用戶所希望看到的地方。

下面是對一些你可能用到的按鈕位置的全面分析。了解哪種按鈕的位置最適合你的應用，這樣用戶就不會浪費時間。

古騰堡法則 Gtenberg Principle

在用戶采取行動之前，他們會掃視屏幕。屏幕內(nèi)容會告知他們下一步該采取什么操作。一旦他們完成掃視，進一步的操作就會自動浮現(xiàn)。那當他們完成掃視后，他們的視線落點會在哪里呢？

原來用戶從左上角開始掃視，到右下角結(jié)束，他們的視覺軌跡呈Z字形。著名的報紙設計師埃德蒙 · 阿諾德稱這種自然的掃描模式為古騰堡法則，又稱對角線平衡法則。

該法則說明了視線是如何沿著方向軸從左向右移動，直至到達右下角。它形成了一個突出的掃描路徑，我們稱之為閱讀重心。即沿著對角線的設計元素得到了較多的關(guān)注，而位于對角線之外的元素則較少被關(guān)注到。

按鈕最佳位置的選擇應遵循古騰堡法則，即把需要用戶采取下一步操作的按鈕放在用戶掃描的視覺落點。在少數(shù)情況下，用戶會在掃描屏幕前就準備采取行動，但這只是在他們已經(jīng)熟悉屏幕內(nèi)容的情況下。

1. 頂部按鈕vs底部按鈕

第一個要決定的位置是將操作按鈕置于屏幕的頂部還是底部，依照古登堡法則，哪個按鈕的位置是正確的呢？

大多數(shù)用戶首先掃描內(nèi)容，因為內(nèi)容占據(jù)了屏幕的主導地位，且與他們的任務有關(guān)。他們的眼睛從屏幕的上半部分向下移動。當內(nèi)容瀏覽完畢，他們就會尋求下一步的操作。

因為用戶會尋找下一步操作的按鈕，所以在找到下一步操作按鈕之前，他們的視線會保持停留在底部一段時間。直到他們不曾找到按鈕，此時，他們的視線就會移動到屏幕上方，然后在右上角才慢慢發(fā)現(xiàn)按鈕。

把操作按鈕放在頂部會讓用戶感到困惑，因為他們希望在掃描完內(nèi)容后看到它。頂部的按鈕位置不符合他們的自然掃描流程，這導致他們偏離進一步的操作路徑。

不僅如此， 由于要和屏幕標題共享空間，所以頂部的按鈕比底部的按鈕還要小。小巧的尺寸加上并不聰明的位置設計，使得頂部按鈕更難找到，也因此更無法快速點擊。

當把操作按鈕放置在底部時，用戶可以更快地找到它。他們會在掃描內(nèi)容后立即看到按鈕，無需有多余的視線移動。底部的按鈕不僅符合古騰堡法則，而且按鈕更大，更容易點擊。

2. 項目選擇

只有當用戶在屏幕上僅選擇一個項目時，頂部的按鈕才有意義。例如，當用戶只選擇列表中一行內(nèi)容時，應用欄會發(fā)生變化，并為所選項目項提供相關(guān)操作。此時頁面標題消失，顯示所選項目的數(shù)量。

頂部按鈕也適用于選擇圖像內(nèi)容。在這種情況下使用頂部按鈕可以讓用戶在注意到應用欄中的狀態(tài)變化后更快地采取行動。按鈕與狀態(tài)欄標題相近則意味著用戶的視線不必偏離太遠。

3. 水平按鈕

有幾種方法可以在底部排列你的按鈕。一種方法是水平對齊。當你想要強調(diào)兩個不同操作內(nèi)容之間的關(guān)系時，水平對齊是最理想的排列方式。因為用戶會將它們視為一組，并給予兩者同等考量。

在這個例子中，App 程序使用水平對齊按鈕來確保用戶知道他們在購買鞋子之前可以編輯鞋子的設計。并列排布的方式加強了兩個動作之間的聯(lián)系。

因為相對于顧客滿意度來講，購買鞋子和編輯設計同等重要，所以他們就像兄妹般配對。當用戶急于購買，這樣設計才不會忽視“編輯設計”按鈕。

4. 主按鈕在左邊vs在右

對于水平按鈕，你可以選擇將主要操作按鈕放置在左側(cè)或右側(cè)。但是到底哪個位置能讓用戶更快地采取行動呢？

當主要操作在左邊時，它不符合閱讀重心。用戶的眼睛想向右下方移動，但是按鈕的視覺重心使他們一直盯著左下方。在固定之后，他們移動到右下角，然后回到左邊，點擊主按鈕。因此，用戶的眼睛會前后掃視，增加了用戶的任務時間。

當主要動作在右邊時，由于按鈕處于閱讀重心的終點，因此任務完成得更快。用戶不必回視掃描，或者不止一次地關(guān)注主要操作。

5. 垂直按鈕

另一種排布的方法是垂直堆疊。如果你希望用戶分別關(guān)注每個動作按鈕，那這種排布方案是理想的。你可以讓他們在每個按鈕上花更長的時間，以便更仔細地考慮。

垂直按鈕比水平按鈕更加突出，因為它們跨越屏幕，有更多的空間。更大的尺寸不僅使按鈕更容易點擊，而且使主要操作按鈕具有最大的可見性。

在本例中，主要操作是“添加到購物車”按鈕，它比“添加禮物消息”按鈕更重要。把它安排成一個垂直的按鈕可以強調(diào)它，這樣就不會與次要操作按鈕互相沖突。

6. 主要按鈕在上vs在下

當兩個按鈕上下排列時，主按鈕應該放在上面還是下面？古騰堡法則指出閱讀重心是向下移動的。用戶只需向下掃描就可以很快觸達底部按鈕。當它在頂部時，用戶必須先向下掃描，然后再向上回視去點擊它。

7. 混合型按鈕

最后一個按鈕是水平和垂直按鈕的混合。如果你至少有三個按鈕，就可以用這種方法。

因為有更多的信息需要處理，所以用戶需要花費更長的時間來決定三個按鈕的操作。但是這種排列方式以其視覺層次結(jié)構(gòu)縮短了他們的決策時間，用戶不必每次都依賴標簽，而是可以通過查看按鈕的大小和方向提示來回憶每一個操作。

在這個例子中，主要操作是綠色的大按鈕。它很容易被發(fā)現(xiàn)，因為沒有其他同樣大小或顏色的按鈕。然后，用戶可以將一個操作與最左邊的按鈕相關(guān)聯(lián)，將另一個操作與最右邊的按鈕相關(guān)聯(lián)。

隨用戶點擊按鈕次數(shù)的增多，他們就會通過按鈕的大小和方向來判斷與之相關(guān)聯(lián)的操作。很快他們就會養(yǎng)成這種幫助他們不假思索采取行動的習慣。

閱讀重心決定了主要操作放在最下面，次要操作放在上面。優(yōu)先級較高的按鈕最需要關(guān)注，所以應該放在用戶的掃描流程末端。

次要操作不應該有明顯的顏色，否則會與主要操作相沖突。相反，它們都應該為有輪廓或淺色陰影的中性色按鈕樣式。

毋需將它們與垂直按鈕對齊。與垂直邊緣對齊則意味著強調(diào)它們的左右方向。

8. 吸底按鈕

讓用戶隨時可以操作按鈕的一種方法是使用吸底按鈕。這些按鈕固定在屏幕底部，用戶可以隨時隨地采取操作。

在本地應用程序中可以使用這些吸底按鈕，但是在基于瀏覽器的網(wǎng)頁App中應避免使用它們。網(wǎng)絡應用程序上的吸底按鈕會導致點擊問題，因為當用戶點擊該按鈕時，瀏覽器欄會彈出。

對于這個問題有一些解決辦法，但很復雜。最自然的解決方案是在按鈕和瀏覽器欄之間增加一些內(nèi)邊距。

9. 界面排版應該順勢而為

操作按鈕是用戶通向成功的最后一步。他們的放置位置影響用戶操作任務完成的快慢。通過將其放在與古騰堡法則相一致的位置，使用戶能毫不費力地觸達目標。按照這樣的思路設計，你的操作按鈕就會有一個理所應當?shù)淖罴盐恢谩?/p>

歡迎關(guān)注譯者的微信公眾號：「體驗進階」