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

古騰堡原則的出現(xiàn)

Edmund C. Arnold 是一名報(bào)紙?jiān)O(shè)計(jì)師，被公認(rèn)為現(xiàn)代報(bào)紙?jiān)O(shè)計(jì)之父。他設(shè)計(jì)了超過(guò)一千種報(bào)紙，包括波士頓環(huán)球報(bào)，國(guó)家觀察報(bào)，今日?qǐng)?bào)，多倫多星報(bào)，堪薩斯城之星報(bào)等等。

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

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

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

古騰堡圖將顯示介質(zhì)分為四個(gè)象限：左上角的「第一視覺(jué)落點(diǎn)區(qū)」，也叫「主光學(xué)區(qū)域」，類似自然光的落點(diǎn)；右下角的「終端區(qū)域」；右上角的「強(qiáng)休區(qū)」和左下角的「弱休區(qū)」。

從圖中可以看出，讀者很自然地從「主光學(xué)區(qū)域」開(kāi)始，在顯示介質(zhì)上來(lái)回移動(dòng)，經(jīng)過(guò)一系列掃描到達(dá)終端區(qū)域。

整個(gè)閱讀方式由左向右方向前進(jìn)，讀者傾向于關(guān)注整個(gè)頁(yè)面的開(kāi)始與結(jié)束區(qū)域，至于段落的起始與結(jié)尾則較少被關(guān)注到，也就是休閑區(qū)。這個(gè)原則的支撐點(diǎn)為「閱讀重心」，由人們一直以來(lái)的閱讀習(xí)慣形成。

將圖表的設(shè)計(jì)與閱讀的重心相協(xié)調(diào)，能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn)，這么做能提高讀者閱讀的節(jié)奏和理解能力。例如，遵循古騰堡圖的布局把關(guān)鍵元素放在左上角（如標(biāo)題）、中間（如圖像）和右下角（如聯(lián)系信息）。

所以我們經(jīng)常會(huì)看到這樣的圖紙內(nèi)容：

古騰堡圖將設(shè)計(jì)元素的重量與它們的布局和組成進(jìn)行協(xié)調(diào)，以指導(dǎo)眼睛的運(yùn)動(dòng)規(guī)律。對(duì)信息和媒介的熟悉程度也會(huì)影響眼球運(yùn)動(dòng)。例如，經(jīng)常以一致的方式呈現(xiàn)給讀者，不僅能讓讀者更容易理解內(nèi)容，可信度也會(huì)隨之提升。一致性原則也由此得來(lái)。

而當(dāng)互聯(lián)網(wǎng)興起，該原則也被用到了網(wǎng)頁(yè)設(shè)計(jì)乃至后來(lái)的移動(dòng)設(shè)備的界面設(shè)計(jì)上。

下面我們來(lái)看看它在界面設(shè)計(jì)中，對(duì)按鈕的影響。

頂部按鈕與底部按鈕的設(shè)計(jì)思路

根據(jù)古騰堡原則，在用戶查看并不熟悉的界面時(shí)，瀏覽是用戶的第一行為。他們的眼睛會(huì)根據(jù)界面元素進(jìn)行移動(dòng)，最終停留在結(jié)尾的行動(dòng)點(diǎn)上。

這時(shí)候，按鈕的位置至關(guān)重要。如果界面是需要用戶閱讀完并進(jìn)行操作的話，按鈕的最佳位置應(yīng)該是在界面底部。

比如：

或者：

這張圖很好地詮釋了古騰堡原則的運(yùn)用。如果各位有對(duì)界面滾屏做過(guò)研究，就能輕易的發(fā)現(xiàn)，界面紅色區(qū)域的顏色深度代表了點(diǎn)擊率的高低。用戶的瀏覽視線，影響了界面信息的布局。

我們還可以看到，評(píng)論的視覺(jué)流也是按照這樣的形式進(jìn)行設(shè)計(jì)的：

各位甚至可以根據(jù)這個(gè)頁(yè)面的布局，去判斷這個(gè)產(chǎn)品功能的評(píng)論和點(diǎn)贊的排列順序?yàn)槭裁词沁@樣的。

即使是整個(gè)頁(yè)面模塊的評(píng)論展示，從小到大也都是依照類似的視覺(jué)流進(jìn)行設(shè)計(jì)的。

比如：

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

不僅如此，頂部按鈕尺寸較小，因?yàn)樗伎臻g有限，因此在操作上相對(duì)來(lái)說(shuō)不便于點(diǎn)擊。所以這類頂部按鈕更適用于「編輯頁(yè)面」，需要用戶謹(jǐn)慎操作。

比如：

在這樣的情況下，使用頂部按鈕，可以讓用戶在注意到應(yīng)用欄中的狀態(tài)更改后更快地采取操作行為。按鈕與狀態(tài)標(biāo)題的接近意味著用戶的眼睛不必偏離太遠(yuǎn)。

所以從古騰堡原則來(lái)看，我們需要注意的是，頂部按鈕的設(shè)計(jì)，關(guān)鍵還在于可編輯內(nèi)容區(qū)域，而不是按鈕本身。而底部按鈕的核心在于按鈕本身，而不是內(nèi)容。

水平按鈕的設(shè)計(jì)思路你

在設(shè)計(jì)界面的過(guò)程中，我們通常會(huì)遇到一類水平擺放的按鈕，類似于「取消」和「確認(rèn)」。如：

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

無(wú)論是哪種，它都遵循古騰堡原則的視覺(jué)終點(diǎn)說(shuō)明──讓用戶最快地看到主要操作內(nèi)容。

在界面設(shè)計(jì)中還有非常多類似的頁(yè)面，如：

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

包括類似的還有購(gòu)物產(chǎn)品：

此種按鈕的位置設(shè)計(jì)，主要看它們之間的邏輯關(guān)系、重要程度來(lái)呈現(xiàn)。如上圖的「喜歡」按鈕相對(duì)于「加入購(gòu)物車」來(lái)說(shuō)，用戶的關(guān)注點(diǎn)更多的會(huì)在是否購(gòu)買上，而不是是否喜歡。雖然也有，但程度更低，所以「喜歡」按鈕相對(duì)就更弱化。

或者支付寶的余額寶，在「轉(zhuǎn)入」和「轉(zhuǎn)出」上的設(shè)計(jì)也是如此：

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

當(dāng)主要?jiǎng)幼髟谧髠?cè)時(shí)，用戶的眼睛想要向右下方移動(dòng)，而左邊的主按鈕需要用戶的視線來(lái)回移動(dòng)，增加用戶的閱讀時(shí)間。所以當(dāng)產(chǎn)品希望用戶進(jìn)行什么操作時(shí)，就把主按鈕放在右邊。

當(dāng)然，同時(shí)也要結(jié)合「左邊取消，右邊行進(jìn)」的原則。

垂直按鈕的設(shè)計(jì)思路

如果一個(gè)界面上同時(shí)存在兩個(gè)按鈕，雖然優(yōu)先級(jí)不同，但設(shè)計(jì)師希望用戶單獨(dú)關(guān)注每個(gè)操作，那么垂直擺放就是最理想的選擇。垂直擺放的按鈕雖然在樣式上做了區(qū)分，但用戶同樣會(huì)停留一段時(shí)間進(jìn)行對(duì)比思考。

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

所以按照古騰堡原則來(lái)說(shuō)，正常的垂直按鈕設(shè)計(jì)應(yīng)該是這樣：

但我這里要舉一個(gè)特殊的例子：

上圖大家可以看到，對(duì)于第一次使用這類界面的人來(lái)說(shuō)，「充值」和「提現(xiàn)」這兩者都需要思考一下邏輯，否則一下子反應(yīng)不過(guò)來(lái)充值和提現(xiàn)的關(guān)系。所以這樣的擺放能讓用戶對(duì)這兩者都仔細(xì)思考一番。同時(shí)，通過(guò)樣式區(qū)分，來(lái)區(qū)別出此刻用戶進(jìn)入這個(gè)頁(yè)面最有可能操作的行為。

但似乎上圖的微信界面并沒(méi)有遵循古騰堡原則進(jìn)行設(shè)計(jì)，如果按照原則，「充值」按鈕應(yīng)該在下面，因?yàn)榈撞坎攀且曈X(jué)終點(diǎn)。為什么呢？微信在這里玩了個(gè)小把戲，我們可以在這里看出原則與業(yè)務(wù)的關(guān)系。

首先，我們暫時(shí)無(wú)法預(yù)測(cè)用戶進(jìn)入這個(gè)界面是否真的是想充值，甚至可以猜測(cè)用戶進(jìn)來(lái)就是想提現(xiàn)的：根據(jù)古騰堡原則，該頁(yè)面按鈕的位置擺放可以看出邏輯確實(shí)是這樣。

所以這個(gè)頁(yè)面對(duì)于希望提現(xiàn)的用戶的正常邏輯應(yīng)該是下圖右邊這樣的：

而為了突出充值，微信將其顏色進(jìn)行了反轉(zhuǎn)。意圖是連接零錢和充值的關(guān)系，而把提現(xiàn)與底部的說(shuō)明性文字融合，從而提倡用戶進(jìn)行充值操作。即使有多余的零錢也不要提現(xiàn)了，來(lái)理財(cái)。

但如果把充值移到下方，提現(xiàn)放到上方，就會(huì)遇到業(yè)務(wù)問(wèn)題，即零錢和提現(xiàn)綁定，違背了零錢與充值的業(yè)務(wù)關(guān)系。

但按照微信的做法會(huì)讓一部分用戶在這個(gè)頁(yè)面的停留時(shí)間增加，尤其是希望提現(xiàn)的用戶需要來(lái)回查看，理解了兩者意思才能進(jìn)行操作。

所以從這個(gè)頁(yè)面我們可以解讀出，微信認(rèn)為業(yè)務(wù)與原則出現(xiàn)矛盾時(shí)，業(yè)務(wù)還是占據(jù)高優(yōu)先級(jí)的。

總結(jié)

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

如果你有興趣，可以去閱讀《Type & Layout：How Typography and Design Can Get Your Message Across or Get in the Way》這本書(shū)，進(jìn)行拓展學(xué)習(xí)。

歡迎關(guān)注作者的微信公眾號(hào)：「呆呆U理」