編輯導語：屏幕上的按鈕設計對於用户的體驗感是很重要的，合理的位置能給用户更好的體驗，也能提升效率，不同的按鈕數量和大小對於位置的擺放也有不同；本文作者就詳細分析了手機端的主按鈕應該放在哪些位置，我們一起來看一下。
你知道嗎？按鈕位置的設計會影響用户完成任務的速度；更快地完成任務會帶來更滿意的用户體驗。
如果你也想帶給用户更滿意的用户體驗，那你應當把按鈕放在用户所希望看到的地方。
下面是對一些你可能用到的按鈕位置的全面分析，瞭解哪種按鈕的位置最適合你的應用，這樣用户就不會浪費時間。
一、古騰堡法則 Gtenberg Principle在用户採取行動之前，他們會掃視屏幕，屏幕內容會告知他們下一步該採取什麼操作；一旦他們完成掃視，進一步的操作就會自動浮現。
那當他們完成掃視後，他們的視線落點會在哪裏呢？
原來用户從左上角開始掃視，到右下角結束，他們的視覺軌跡呈Z字形；著名的報紙設計師埃德蒙 · 阿諾德稱這種自然的掃描模式為古騰堡法則，又稱對角線平衡法則。
該法則説明了視線是如何沿着方向軸從左向右移動，直至到達右下角；它形成了一個突出的掃描路徑，我們稱之為閲讀重心；即沿着對角線的設計元素得到了較多的關注，而位於對角線之的元素則較少被關注到。
按鈕最佳位置的選擇應遵循古騰堡法則，即把需要用户採取下一步操作的按鈕放在用户掃描的視覺落點；在少數情況下，用户會在掃描屏幕前就準備採取行動，但這只是在他們已經熟悉屏幕內容的情況下。
二、頂部按鈕vs底部按鈕第一個要決定的位置是將操作按鈕置於屏幕的頂部還是底部，依照古登堡法則，哪個按鈕的位置是正確的呢？
大多數用户首先掃描內容，因為內容佔據了屏幕的主導地位，且與他們的任務有關；他們的眼睛從屏幕的上半部分向下移動，當內容瀏覽完畢，他們就會尋求下一步的操作。
因為用户會尋找下一步操作的按鈕，所以在找到下一步操作按鈕之前，他們的視線會保持停留在底部一段時間；直到他們不曾找到按鈕，此時，他們的視線就會移動到屏幕上方，然後在右上角才慢慢發現按鈕。
把操作按鈕放在頂部會讓用户感到困惑，因為他們希望在掃描完內容後看到它；頂部的按鈕位置不符合他們的自然掃描流程，這導致他們偏離進一步的操作路徑。
不僅如此， 由於要和屏幕標題共享空間，所以頂部的按鈕比底部的按鈕還要小；小巧的尺寸加上並不聰明的位置設計，使得頂部按鈕更難找到，也因此更無法快速點擊。
當把操作按鈕放置在底部時，用户可以更快地找到它；他們會在掃描內容後立即看到按鈕，無需有多餘的視線移動；底部的按鈕不僅符合古騰堡法則，而且按鈕更大，更容易點擊。
三、項目選擇只有當用户在屏幕上僅選擇一個項目時，頂部的按鈕才有意義。
例如，當用户只選擇列表中一行內容時，應用欄會發生變化，併為所選項目項提供相關操作；此時頁面標題消失，顯示所選項目的數量。
頂部按鈕也適用於選擇圖像內容。在這種情況下使用頂部按鈕可以讓用户在注意到應用欄中的狀態變化後更快地採取行動，按鈕與狀態欄標題相近則意味着用户的視線不必偏離太遠。
有幾種方法可以在底部排列你的按鈕。一種方法是水平對齊。當你想要強調兩個不同操作內容之間的關係時，水平對齊是最理想的排列方式；因為用户會將它們視為一組，並給予兩者同等考量。
在這個例子中，App 程序使用水平對齊按鈕來確保用户知道他們在購買鞋子之前可以編輯鞋子的設計，並列排布的方式加強了兩個動作之間的聯繫。
因為相對於顧客滿意度來講，購買鞋子和編輯設計同等重要，所以他們就像兄妹般配對；當用户急於購買，這樣設計才不會忽視“編輯設計”按鈕。
五、主按鈕在左邊vs在右對於水平按鈕，你可以選擇將主要操作按鈕放置在左側或右側。但是到底哪個位置能讓用户更快地採取行動呢？
當主要操作在左邊時，它不符合閲讀重心；用户的眼睛想向右下方移動，但是按鈕的視覺重心使他們一直盯着左下方。
在固定之後，他們移動到右下角，然後回到左邊，點擊主按鈕；因此，用户的眼睛會前後掃視，增加了用户的任務時間。
當主要動作在右邊時，由於按鈕處於閲讀重心的終點，因此任務完成得更快。用户不必回視掃描，或者不止一次地關注主要操作。
六、垂直按鈕另一種排布的方法是垂直堆疊——如果你希望用户分別關注每個動作按鈕，那這種排布方案是理想的；你可以讓他們在每個按鈕上花更長的時間，以便更仔細地考慮。
垂直按鈕比水平按鈕更加突出，因為它們跨越屏幕，有更多的空間。更大的尺寸不僅使按鈕更容易點擊，而且使主要操作按鈕具有最大的可見性。
在本例中，主要操作是“添加到購物車”按鈕，它比“添加禮物消息”按鈕更重要；把它安排成一個垂直的按鈕可以強調它，這樣就不會與次要操作按鈕互相沖突。
七、主要按鈕在上vs在下當兩個按鈕上下排列時，主按鈕應該放在上面還是下面？
古騰堡法則指出閲讀重心是向下移動的，用户只需向下掃描就可以很快觸達底部按鈕；當它在頂部時，用户必須先向下掃描，然後再向上回視去點擊它。
最後一個按鈕是水平和垂直按鈕的混合，如果你至少有三個按鈕，就可以用這種方法。
因為有更多的信息需要處理，所以用户需要花費更長的時間來決定三個按鈕的操作；但是這種排列方式以其視覺層次結構縮短了他們的決策時間，用户不必每次都依賴標籤，而是可以通過查看按鈕的大小和方向提示來回憶每一個操作。
在這個例子中，主要操作是綠色的大按鈕；它很容易被發現，因為沒有其他同樣大小或顏色的按鈕；然後，用户可以將一個操作與最左邊的按鈕相關聯，將另一個操作與最右邊的按鈕相關聯。
隨用户點擊按鈕次數的增多，他們就會通過按鈕的大小和方向來判斷與之相關聯的操作，很快他們就會養成這種幫助他們不假思索採取行動的習慣。
閲讀重心決定了主要操作放在最下面，次要操作放在上面，優先級較高的按鈕最需要關注，所以應該放在用户的掃描流程末端。
次要操作不應該有明顯的顏色，否則會與主要操作相沖突；相反，它們都應該為有輪廓或淺色陰影的中性色按鈕樣式。
毋需將它們與垂直按鈕對齊。與垂直邊緣對齊則意味着強調它們的左右方向。
九、吸底按鈕讓用户隨時可以操作按鈕的一種方法是使用吸底按鈕，這些按鈕固定在屏幕底部，用户可以隨時隨地採取操作。
在本地應用程序中可以使用這些吸底按鈕，但是在基於瀏覽器的網頁App中應避免使用它們；網絡應用程序上的吸底按鈕會導致點擊問題，因為當用户點擊該按鈕時，瀏覽器欄會彈出。
對於這個問題有一些解決辦法，但很複雜。最自然的解決方案是在按鈕和瀏覽器欄之間增加一些內邊距。
十、界面排版應該順勢而為操作按鈕是用户通向成功的最後一步，他們的放置位置影響用户操作任務完成的快慢，通過將其放在與古騰堡法則相一致的位置，使用户能毫不費力地觸達目標；按照這樣的思路設計，你的操作按鈕就會有一個理所應當的最佳位置。
原文作者：Anthony
原文地址：https://uxdesign.cc/10-ui-ux-design-lessons-from-designing-my-own-product-2f8518d5f0a1
譯者：Winterbure，編輯與配圖：Z Yuhan，公眾號：體驗進階。
本文由 @Z Yuhan 翻譯發佈於人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基於CC0協議。