UI設計師必學教程：互動設計心理學的古騰堡原則

在平時的設計過程當中，你可能會有這樣的疑惑，為什麼在大部分APP中，當單個按鈕和多個按鈕同時存在時，最重要的按鈕一般都會放置在頁面的右側呢？如果最重要的按鈕放在左側又有什麼問題呢？按鈕放在右側的原因是什麼呢？它又有什麼理論依據呢？接下來帶著這些疑問，開始我們今天所要介紹的內容： 互動心理學之古騰堡原則

文末有整理相關影片教程資料。

古騰堡原則的起源

古騰堡原則是由14世紀西方活字印刷術的發明人約翰·古騰堡提出，早在20世紀50年代，他在設計報紙的過程中，提出了一項原則，認為人的閱讀方式應該是遵循某種習慣進行的，就像讀書一樣，由左到右，從上到下。這其中蘊含著什麼資訊呢？經過研究最終得出被後人所熟知的結論：古騰堡原則，並附上了一張圖，名為「古騰堡圖」。古騰堡圖將畫面所呈現的內容分成四個象限：

1、第一視覺區(POA)：左上方，使用者首先注意到的地方

2、強休息區(SFA)：右上方，較少被注意到

3、弱休息區(WFA)：左下方，最少被注意到

4、終端視覺區(TA)：右下方，視覺流終點

古騰堡圖

從圖中可以看出，使用者視線很自然的會從第一視覺區開始，逐漸移動到終端休息區。整個閱讀過程視線都會沿著一條方向軸開始從左到右瀏覽。使用者會更容易關注到頁面的開始與結束區域，而中間的段落則很少被關注到。古騰堡揭示了一個實用的視覺軌跡規律：閱讀引力是從上到下，從左到右。

遵循古騰堡原則把關鍵資訊放在左上角、中間和右下角，能夠更好的體現元素的重要性。例如：我們平時所看到的頁面彈窗、各種證明檔案和合同檔案等等。

古騰堡圖透過對設計元素的重量與元素佈局和組成方式進行調和，指導眼睛的運動軌跡。讓使用者迅速獲取有價值的資訊，同時使用者對資訊的熟悉程度也是影響眼睛運動軌跡的因素之一。

而隨著網際網路的興起，古騰堡原則也逐漸被應用到APP設計和網頁設計當中。接下來讓我們來看看他在介面中的實際應用。

在設計中的應用

根據古騰堡原則，當使用者瀏覽一個陌生的介面時，瀏覽是使用者的第一行為。他們的視覺焦點會從左上角一直到右下角。並停留在結尾的行動點上，也就是前面所提到的終端休息區。接下來，就是如何擺放按鈕了，這也是至關重要的一步。如果是需要使用者閱讀完後進行操作的話，按鈕擺放的最佳位置應該是頁面底部。這樣可以保證使用者對內容進行了閱讀。

1、底部按鈕分析

1.1 底部單個按鈕

這種形式在引導使用者操作的頁面中最為常見，為了能夠保證使用者對內容進行閱讀，所以將按鈕擺放在頁面底部，內容放在頂部，這樣的擺放即符合使用者由上到下的閱讀習慣又達到了產品預期的目標。

1.2 底部垂直雙按鈕

上面我們提到了單個按鈕的擺放思路，接下來看一下垂直雙按鈕的擺放思路是怎麼樣的。如果一個介面上同時存在兩個優先順序不同的按鈕，並且產品希望使用者對每一個按鈕都有足夠的關注度，那麼垂直襬放是最佳選擇，雖然垂直雙按鈕在樣式上做了區分，但使用者同樣會停留一段時間將按鈕的內容進行對比思考。

那麼，按照古騰堡原則，重要的按鈕應該放在頁面最底部，原則上它應該是這樣的：

仔細觀察上圖，有沒有發現淺色按鈕很容易被忽略掉，這樣就違背了產品要保證每一個按鈕都要有足夠關注度的初衷，所以我們要違背古騰堡原則來滿足業務需求，正如我們所看到的微信授權頁面一樣，

為了保證「同意」與「拒絕」這兩個獨立的按鈕能夠被使用者足夠的重視，並且其中的任意一個按鈕不會被輕易的忽略掉，這裡將「同意」按鈕顏色加重，並且放在「拒絕」按鈕之上，讓眼睛原本垂直向下的運動軌跡產生迴流的變化。

小結

原則是設計的基礎，並非一成不變，要合理權衡設計原則與產品目標之間的關係。

2、頂部按鈕分析

由於頂部導航欄空間有限，導致按鈕相對較小，並且不便於點選操作，所以這類頂部按鈕適用於修改內容的編輯頁面，即可以避免誤觸，又可以讓使用者關注內容本身。關鍵按鈕至於頂部，還可以縮短使用者眼睛的運動路徑，讓使用者更容易注意到其狀態的變化狀態。

小結

頂部按鈕更關注可編輯的內容區域，並非按鈕。而底部按鈕則更關注按鈕本身。並非內容。

3、水平按鈕分析

除了上面提到的頂部按鈕和底部按鈕，還有水平擺放的按鈕，比如淘寶詳情頁、京東詳情頁、網易嚴選詳情頁的「加入購物車」和「立即購買」按鈕，介面中的「立即購買」按鈕都放在了右下角，結合古騰堡原則的視覺終點說明，右下角為視覺終端區域，即視覺最終停留的位置，所以他們都將與轉化率密切相關的「立即購買」按鈕放在了介面的右下角，讓使用者更容易關注到。

再比如比較常見的「取消」和「確認」彈窗樣式，通常是在需要讓使用者確認某種操作行為時出現，有可能是提交表單、協議授權、獲取使用者資訊等等，為了防止使用者誤操作，這也是提升產品體驗的小細節。

平常我們所看到的彈窗，推薦按鈕都是在右側，那麼將推薦按鈕放在左側會怎麼樣？如下圖所示：

不難看出推薦按鈕放在右側後，視覺在水平方向軸上產生了迴流。

彈窗的目的是想讓使用者點選「確認」按鈕，如果將「確認」放在左側，根據古騰堡原則，使用者的視線會不由自主的向右側移動，也就是「取消」按鈕的位置，想要回到左側「確認」按鈕位置就需要移動視線，並且眼睛的運動軌跡會在水平方向軸上來回的往復運動，無形中增加了使用者選擇時長。如果將「確認」放在右側，「取消」放在左側則可以為使用者提高操作效率。

在實際產品中的應用案例：

小結

當產品想要讓使用者進行某種操作時，主要按鈕放在右邊

總結

1、古騰堡圖第一視覺區，強休息區，弱休息區，終端視覺區

2、原則是設計的基礎，並非一成不變，要合理權衡設計原則與產品目標之間的關係

3、頂部按鈕更關注可編輯的內容區域，並非按鈕。而底部按鈕則更關注按鈕本身。並非內容

4、當產品想要讓使用者進行某種操作時，主要按鈕放在右邊