按鈕為什麼放右側？古騰堡原則告訴你

為什麼在遊戲中甚至大部分的APP中，單個按鈕或者多個按鈕同時存在，最重要的那個按鈕一般都在右側呢？若是為了方便點選，放在左邊也未嘗不可呀。如果是約定俗成，那麼最開始定下這個規矩的時候又是因為什麼呢？其中有沒有理論依據呢？

說到這裡，就需要提到一個法則——古騰堡原則。

Edmund C. Arnold 是一名報紙設計師，被公認為現代報紙設計之父。他設計了超過一千種報紙，包括波士頓環球報，國家觀察報，今日報，多倫多星報，堪薩斯城之星報等等。

20 世紀 50 年代，他在設計報紙的過程中，提出了一項原則，認為人的閱讀方式應該是遵循某種習慣進行的，好像讀書一樣，除了從左到右，還有從上到下的方式。但這裡面蘊含著什麼資訊呢？經過多方研究，他最終得出了被後人熟知的「古騰堡原則」，並附上了一張圖，名為「古騰堡圖」。


古騰堡圖將顯示介質分為四個象限：左上角的「第一視覺落點區」，也叫「主光學區域」，類似自然光的落點；右下角的「終端區域」；右上角的「強休區」和左下角的「弱休區」。

由此可知，一個介面的左上和右下，是使用者最為重點關注的位置。遵循這個原則，那麼我們應該把介面的關鍵元素放在左上角（如標題），以及右下角（如按鈕，強提示）。右上和左下可以用來放一些相對次要的（如影象，文字資訊，弱提示）。

根據該原則，使用者檢視介面時，瀏覽時使用者的第一個行為，他們的焦點會從左上角一直到右下角。這時候，按鈕的位置至關重要，因為點選按鈕一般都是玩家在介面的最後一部操作，放在右下角可以保證使用者閱讀完了整個介面的內容。

簡而言之，按鈕作為一個介面的終結，或者是兩個介面之間的鑰匙，放在右下角使用者方便點選，也能保證使用者不會遺漏，最後還能保證使用者進行操作之前閱讀完了整個頁面的內容。

原則弄清楚了，放到實際上，我們檢驗一下。


大家看到這個介面的時，第一遍估計都沒看到左下角的返回按鈕吧，而購買按鈕位於視覺瀏覽的終點位置，又用了對比色來突出，想不看到都難。

接下來舉一個反例。


作為最突出的”充值“按鈕並沒有位於視覺的終點位置，導致使用者視覺流的順序出現了迴流，影響到了使用者體驗。


修改以後是不是舒服很多，視覺流從上到下，最後落到充值，點選按鈕，達到目的。這就是古騰堡原則的實際案例。

擴充：

• 右上角按鈕空間有限，相對不便於點選，所以這類按鈕更適合“編輯”“設定”之類，需要使用者謹慎操作的功能。
• 介面上若有兩個按鈕或以上同時存在的，請遵循古騰堡原則，把最重要的，推薦使用者點選的，使用者大概率需要的放在右側。（比如“刪除物品”“退出幫派”之類不可逆的操作，作為設計師不推薦的按鈕，請放在左邊）
• 兩個按鈕，若設計師希望使用者注意到每個操作，那麼垂直襬放是最理想的選擇。（注意：推薦操作放在最下方）
• 一切設計都服務於產品。如微信零錢，我認為大概率是設計師想推“充值”這個功能，但是提現卻是使用者大概率操作的，所以才這樣設計。
• 古騰堡原則是平面上的原則，在許多寫實風格，或者擬物設計的介面上並不適用。影響使用者視覺流的因素不僅僅只有位置，還有顏色，面積，控制元件的寫實程度等等。
  

總結：

• 人的眼球移動規律趨向於從上到下，從左到右，在視覺區域中，左上角通常為是視覺的起始點，右下角為視覺的重點，而右上和左上是視覺的休息區。
• 操作按鈕放在底部，這樣使用者既不會錯過它，也保證了使用者在這之前瀏覽到了所有的資訊。
• 兩個按鈕有主次之分的放在右下角，左取消，右確定。通過顏色，樣式來拉開層級。兩個按鈕都推薦的，垂直居中擺放，更推薦的放下方。
• 一切的前提是視覺樣式平等的情況下，若全是扁平的元素，任何地方放一個寫實的按鈕都會很顯眼。
• 一切設計都是為了產品功能，有時候不妨反過來用原則。
  

來源：小王的互動筆記
原文：https://mp.weixin.qq.com/s/4ePGOwFdfF5iaG06JCGyvQ