@Daidai丶呆?：兩年前，我寫過一篇文章《高手課堂！「按鈕系列」之按鈕位置與用戶體驗的關系》，應該是我寫的第一篇關于按鈕分析的文章。里面提及了不同位置的按鈕如何影響用戶體驗。今天這篇文章的內容是對其進行拓展，且在一定程度上進行了優化，析毫剖厘，旨在幫助各位對「按鈕位置」理解得更為透徹。

古騰堡原則的出現

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

在那個年代，人們對于報紙的追求就像如今大眾對于手機的追求一樣，新聞的內容雖然是主要的，但是報紙的外觀、閱讀方式、觸摸舒適度等等，也都是非常講究的。

Edmund C. Arnold 本身也是一位非常勵志的人物。1945 年二戰結束，32 歲的他開始研究排版編輯，1960 年成為錫拉丘茲大學 S. I. Newhouse 公共傳播學院的教授，并于 1975 年被任命為弗吉尼亞聯邦大學圖形藝術系主任，期間還出過 27 本書籍。

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

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

從圖中可以看出，讀者很自然地從「主光學區域」開始，在顯示介質上來回移動，經過一系列掃描到達終端區域。

整個閱讀方式由左向右方向前進，讀者傾向于關注整個頁面的開始與結束區域，至于段落的起始與結尾則較少被關注到，也就是休閑區。這個原則的支撐點為「閱讀重心」，由人們一直以來的閱讀習慣形成。

將圖表的設計與閱讀的重心相協調，能幫助讀者梳理閱讀的邏輯。據研究發現，這么做能提高讀者閱讀的節奏和理解能力。例如，遵循古騰堡圖的布局把關鍵元素放在左上角（如標題）、中間（如圖像）和右下角（如聯系信息）。

所以我們經常會看到這樣的圖紙內容：

古騰堡圖將設計元素的重量與它們的布局和組成進行協調，以指導眼睛的運動規律。對信息和媒介的熟悉程度也會影響眼球運動。例如，經常以一致的方式呈現給讀者，不僅能讓讀者更容易理解內容，可信度也會隨之提升。一致性原則也由此得來。

而當互聯網興起，該原則也被用到了網頁設計乃至后來的移動設備的界面設計上。

下面我們來看看它在界面設計中，對按鈕的影響。

頂部按鈕與底部按鈕的設計思路

根據古騰堡原則，在用戶查看并不熟悉的界面時，瀏覽是用戶的第一行為。他們的眼睛會根據界面元素進行移動，最終停留在結尾的行動點上。

這時候，按鈕的位置至關重要。如果界面是需要用戶閱讀完并進行操作的話，按鈕的最佳位置應該是在界面底部。

比如：

或者：

這張圖很好地詮釋了古騰堡原則的運用。如果各位有對界面滾屏做過研究，就能輕易的發現，界面紅色區域的顏色深度代表了點擊率的高低。用戶的瀏覽視線，影響了界面信息的布局。

我們還可以看到，評論的視覺流也是按照這樣的形式進行設計的：

各位甚至可以根據這個頁面的布局，去判斷這個產品功能的評論和點贊的排列順序為什么是這樣的。

即使是整個頁面模塊的評論展示，從小到大也都是依照類似的視覺流進行設計的。

比如：

但如果對這方面不熟悉，只是純粹地覺得按鈕位置占用了屏幕空間，而把按鈕移到右上角，反而本末倒置。這樣無論在操作還是閱讀上，都會影響用戶的使用路徑。比如：

不僅如此，頂部按鈕尺寸較小，因為它所占空間有限，因此在操作上相對來說不便于點擊。所以這類頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。

比如：

在這樣的情況下，使用頂部按鈕，可以讓用戶在注意到應用欄中的狀態更改后更快地采取操作行為。按鈕與狀態標題的接近意味著用戶的眼睛不必偏離太遠。

所以從古騰堡原則來看，我們需要注意的是，頂部按鈕的設計，關鍵還在于可編輯內容區域，而不是按鈕本身。而底部按鈕的核心在于按鈕本身，而不是內容。

水平按鈕的設計思路你

在設計界面的過程中，我們通常會遇到一類水平擺放的按鈕，類似于「取消」和「確認」。如：

這是比較常見的彈框按鈕樣式，設計師通常用它來讓用戶確認某種操作行為。有可能是提交表單，彈框內容是對表單內容的再次展示，方便用戶用于確認，所以這里的確認文案可以是「提交」；也有可能是修改內容詳情，修改完后點擊確認。

無論是哪種，它都遵循古騰堡原則的視覺終點說明──讓用戶最快地看到主要操作內容。

在界面設計中還有非常多類似的頁面，如：

keep 的這個頁面把「繼續」和「結束」按鈕并排放置，結束放在右邊，完全符合「取消」和「退出」的排列邏輯，也符合古騰堡原則。且熟悉的朋友都知道，這個頁面的「結束」按鈕需要長按至多少秒才能結束。

包括類似的還有購物產品：

此種按鈕的位置設計，主要看它們之間的邏輯關系、重要程度來呈現。如上圖的「喜歡」按鈕相對于「加入購物車」來說，用戶的關注點更多的會在是否購買上，而不是是否喜歡。雖然也有，但程度更低，所以「喜歡」按鈕相對就更弱化。

或者支付寶的余額寶，在「轉入」和「轉出」上的設計也是如此：

類似的內容還能找到很多，比如微信朋友圈的點贊和評論；以及知乎的點贊和評論的位置擺放，也從一定程度上說明產品希望用戶做什么的思路。

當主要動作在左側時，用戶的眼睛想要向右下方移動，而左邊的主按鈕需要用戶的視線來回移動，增加用戶的閱讀時間。所以當產品希望用戶進行什么操作時，就把主按鈕放在右邊。

當然，同時也要結合「左邊取消，右邊行進」的原則。

垂直按鈕的設計思路

如果一個界面上同時存在兩個按鈕，雖然優先級不同，但設計師希望用戶單獨關注每個操作，那么垂直擺放就是最理想的選擇。垂直擺放的按鈕雖然在樣式上做了區分，但用戶同樣會停留一段時間進行對比思考。

且垂直按鈕比水平按鈕更突出，他們占據更多屏幕空間的寬度。

所以按照古騰堡原則來說，正常的垂直按鈕設計應該是這樣：

但我這里要舉一個特殊的例子：

上圖大家可以看到，對于第一次使用這類界面的人來說，「充值」和「提現」這兩者都需要思考一下邏輯，否則一下子反應不過來充值和提現的關系。所以這樣的擺放能讓用戶對這兩者都仔細思考一番。同時，通過樣式區分，來區別出此刻用戶進入這個頁面最有可能操作的行為。

但似乎上圖的微信界面并沒有遵循古騰堡原則進行設計，如果按照原則，「充值」按鈕應該在下面，因為底部才是視覺終點。為什么呢？微信在這里玩了個小把戲，我們可以在這里看出原則與業務的關系。

首先，我們暫時無法預測用戶進入這個界面是否真的是想充值，甚至可以猜測用戶進來就是想提現的：根據古騰堡原則，該頁面按鈕的位置擺放可以看出邏輯確實是這樣。

所以這個頁面對于希望提現的用戶的正常邏輯應該是下圖右邊這樣的：

而為了突出充值，微信將其顏色進行了反轉。意圖是連接零錢和充值的關系，而把提現與底部的說明性文字融合，從而提倡用戶進行充值操作。即使有多余的零錢也不要提現了，來理財。

但如果把充值移到下方，提現放到上方，就會遇到業務問題，即零錢和提現綁定，違背了零錢與充值的業務關系。

但按照微信的做法會讓一部分用戶在這個頁面的停留時間增加，尤其是希望提現的用戶需要來回查看，理解了兩者意思才能進行操作。

所以從這個頁面我們可以解讀出，微信認為業務與原則出現矛盾時，業務還是占據高優先級的。

總結

我通過有限的例子，從正反面告訴大家按鈕擺放的位置如何遵循古騰堡原則。根據該原則，我們還可以解讀更多關于按鈕位置背后所呈現的設計思路。

如果你有興趣，可以去閱讀《Type & Layout：How Typography and Design Can Get Your Message Across or Get in the Way》這本書，進行拓展學習。

歡迎關注作者的微信公眾號：「呆呆U理」