頂部按鈕vs底部按鈕

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

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

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

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

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

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

項目選擇

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

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

水平按鈕

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

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

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

主按鈕在左邊vs在右

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

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

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

垂直按鈕

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

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

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

主要按鈕在上vs在下

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

混合型按鈕

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

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

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

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

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

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

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

吸底按鈕

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

界面排版應該順勢而為

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

以上就是本期分享的內容啦，希望對各位小伙伴有所幫助~

轉載聲明：本文來源于網絡，不作任何商業用途