如何提升自己的設(shè)計(jì)能力？首先要搭建好自己的知識體系，體現(xiàn)你的專業(yè)，讓他人信服，感知你的價(jià)值。本文就設(shè)計(jì)中的三大視覺瀏覽模型之一：古騰堡原則展開分析，并對其應(yīng)用進(jìn)行了總結(jié)，一起來看看吧。

如果你不知道如何提升設(shè)計(jì)能力，那就先打好基礎(chǔ)，搭建好知識體系，讓你的設(shè)計(jì)有理可依，有據(jù)可引。體現(xiàn)你的專業(yè)，才能讓人信服，讓別人看到你的價(jià)值。

今天我們來聊聊設(shè)計(jì)中的三大視覺瀏覽模型之一：古騰堡原則。

一、什么是古騰堡原則

古騰堡原則是由14世紀(jì)西方活字印刷術(shù)發(fā)明人約翰·古騰堡提出，早在20世紀(jì)50年代在設(shè)計(jì)報(bào)紙的過程中，提出了一項(xiàng)原則，認(rèn)為人的閱讀方式應(yīng)該是遵循某種習(xí)慣進(jìn)行的，像讀書一樣，由左到右，從上到下。

經(jīng)過研究，他最終得出了被后人熟知的「古騰堡原則」，古騰堡你可能覺得既難懂還陌生，它還有另外一個(gè)名字：對角線平衡法則。

這個(gè)原則的支撐點(diǎn)為「閱讀重心」，由人們一直以來的閱讀習(xí)慣形成。將頁面的設(shè)計(jì)與閱讀的重心相協(xié)調(diào)，能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn)，這么做能提高讀者閱讀的節(jié)奏和理解能力。

古騰堡原則指人的閱讀方式遵循從左到右的眼動(dòng)規(guī)律，且畫面顯示的東西都分成四個(gè)象限：

1、第一視覺區(qū)（Primary Optical Area）：處于左上方，讀者首先注意到的位置。

無論用戶在搜索內(nèi)容、主動(dòng)閱讀或者快速瀏覽，這都是用戶閱讀的第一落點(diǎn)區(qū)域。因此在這個(gè)區(qū)域我們應(yīng)放置一級內(nèi)容或者核心功能。

2、最終視覺區(qū)（Final Optical Area）：處于右下方，視覺流程的終點(diǎn)。

這個(gè)區(qū)域是用戶瀏覽行為的最終落點(diǎn)區(qū)域，當(dāng)用戶瀏覽到這個(gè)部分時(shí)需要采取措施，我們可以在這里插入按鈕或者行動(dòng)點(diǎn)。這也就能解釋為什么按鈕都會在右下角出現(xiàn)。當(dāng)用戶的瀏覽行為結(jié)束后，可以進(jìn)行操作反饋。

3、強(qiáng)休息區(qū)（Strong Follow Area）：處于右上方，較少被注意到。

在這個(gè)階段，我們不應(yīng)該去設(shè)置一個(gè)重要的行動(dòng)點(diǎn)，一方面用戶容易忽視，另一方面，當(dāng)用戶瀏覽完中心區(qū)域的內(nèi)容后，再返回到強(qiáng)休息區(qū)操作，視線會有個(gè)折回過程，用戶體驗(yàn)并不太理想。

4、弱休息區(qū)（Weak Follow Area）：處于左下方，最少被注意到。

用戶對這塊的注意程度最弱，因此也用來放置最弱的信息提示。

二、古騰堡原則在設(shè)計(jì)中的應(yīng)用

遵循古騰堡法則，界面中的左上和右下是用戶視覺最為重點(diǎn)關(guān)注的位置，設(shè)計(jì)師應(yīng)該把界面的關(guān)鍵元素放在主視區(qū)，最終視覺區(qū)可以放按鈕，休息區(qū)可以用來放一些相對次要的內(nèi)容，如輔助圖形、文字信息。

比如我們常用的頁面彈窗、各種文件和合同文件等等就是采用這種原則進(jìn)行設(shè)計(jì)的。

1. 古騰堡原則在web端界面布局設(shè)計(jì)

我們可以根據(jù)一般的用戶視覺習(xí)慣，來放信息權(quán)重不同的內(nèi)容。

第一視覺區(qū)是用戶瀏覽網(wǎng)頁的起始點(diǎn)，最終視覺區(qū)是結(jié)束離開網(wǎng)頁的終點(diǎn)。整體是根據(jù)人們從上到下、從左至右有規(guī)律的閱讀習(xí)慣設(shè)計(jì)的。

我們可以看到人人都是產(chǎn)品經(jīng)理網(wǎng)站信息結(jié)構(gòu)的布局：

1、根據(jù)起點(diǎn)第一視覺區(qū)的特性把LOGO和導(dǎo)航放在左上角，推薦的文章也以圖片的形式放在這里進(jìn)行曝光；

2、弱休息區(qū)則放一些最新推薦的文章，吸引用戶不斷往下翻；

3、高閑置區(qū)則放文章內(nèi)容之外的驚喜推送內(nèi)容；

4、最終視覺區(qū)則是提供給用戶相關(guān)推薦課程或者想要加入的社區(qū)入口，也是常見的放置廣告的地方。

2. 古騰堡原則在移動(dòng)端頁面布局設(shè)計(jì)

古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁，在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購買按鈕。

3. 圖文類信息

結(jié)合古騰堡的視線強(qiáng)弱分析，我們可以得知左側(cè)的首要視覺點(diǎn)一定是強(qiáng)視覺區(qū)，但是有時(shí)候簡單的圖片+文字的排列也會有很多設(shè)計(jì)思考。

比如：第一個(gè)圖今日頭條的布局，光看它的配圖我們根本猜不出來整體條目所表達(dá)的內(nèi)容，所以頭條的圖片元素傳達(dá)信息的效率遠(yuǎn)不如文字，所以第一視覺區(qū)會留給文字信息；

而第二圖中美團(tuán)列表也圖片所傳達(dá)的信息效率更直觀，會一眼告訴用戶我這家是西餐還是中餐，是早點(diǎn)還是正餐，所以在美團(tuán)的條目中圖片會被放在第一視覺區(qū)。

這兩種布局的目的都是讓用戶可以快速瀏覽，不讓用戶在接收信息時(shí)受阻造成體驗(yàn)打斷。

此處還可以延伸一下，如上圖第三個(gè)圖，頭條的視頻條目也是先文字后視頻，為什么呢？

按理說視頻的傳達(dá)信息效率要遠(yuǎn)大于配圖，猜想一下，頭條的設(shè)計(jì)是想將視頻作為終端休息區(qū)進(jìn)行視覺強(qiáng)化，第一，可以強(qiáng)化信息種類的分類讓用戶更好辨識，第二，讓視頻條目傳達(dá)信息效率更快且滿足整體使用APP時(shí)一致性的用戶心智，讓用戶能快速上手并且順暢體驗(yàn)瀏覽。

三、古騰堡原則在按鈕設(shè)計(jì)中的應(yīng)用

我們還可以依據(jù)古騰堡原則來解讀關(guān)于按鈕位置背后所呈現(xiàn)的設(shè)計(jì)思路。

1. 標(biāo)題和操作按鈕

我們都知道引導(dǎo)用戶操作的頁面中，一般頁面按鈕都在界面底部是因?yàn)殡x手近，方便操作，但不僅僅如此還因?yàn)闉g覽是用戶的第一行為，他們的視線會根據(jù)頁面元素進(jìn)行移動(dòng)，最終停留在底部結(jié)尾的地方。

根據(jù)古騰堡原則，將標(biāo)題和內(nèi)容放在頂部即第一視覺區(qū)，引導(dǎo)用戶瀏覽所有內(nèi)容后注意到底部的按鈕作為終端休息區(qū)，這樣的擺放即符合用戶由上到下的閱讀習(xí)慣又達(dá)到了產(chǎn)品預(yù)期的目標(biāo)。

2. 底部垂直雙按鈕

按鈕的水平布局和垂直布局：

• 垂直布局下，用戶瀏覽時(shí)的眼動(dòng)路徑單純向下，這種由上自下的瀏覽效率是最高的。
• 水平布局時(shí)，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時(shí)避免了垂直布局下過快的決策造成風(fēng)險(xiǎn)。

這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細(xì)閱讀、認(rèn)真填寫的表單往往使用了水平布局。

如果產(chǎn)品希望用戶對每個(gè)按鈕都有足夠的關(guān)注度，垂直擺放是最佳選擇，且【重要按鈕應(yīng)該放在頁面最底部】，雖然垂直雙按鈕在樣式上做了區(qū)分，但用戶同樣會停留一段時(shí)間將按鈕的內(nèi)容進(jìn)行對比思考。

那么，按照古騰堡原則，重要的按鈕應(yīng)該放在頁面最底部，但是現(xiàn)實(shí)我們看到的垂直擺放按鈕的主次反而是相反的，主要的CTA 按鈕往往被放置在了上方？

觀察上圖，有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉，這樣就違背了產(chǎn)品要保證每一個(gè)按鈕都要有足夠關(guān)注度的目的，所以我們要違背古騰堡原則來滿足業(yè)務(wù)需求，正如我們所看到的微信授權(quán)頁面一樣。

為了保證「允許」與「拒絕」這兩個(gè)獨(dú)立的按鈕能夠被用戶足夠的重視，并且其中的任意一個(gè)按鈕不會被輕易的忽略掉，這里將「允許」按鈕顏色加重設(shè)定為主按鈕，并且放在「拒絕」按鈕之上，讓眼睛原本垂直向下的運(yùn)動(dòng)軌跡產(chǎn)生回流的變化。

“拒絕”按鈕能讓用戶注意到，這樣便起到了防錯(cuò)性，缺點(diǎn)是會對用戶造成流程上較強(qiáng)的打斷性，適用于需要用戶思慮、審核信息的場景。

所以，這也提示我在設(shè)計(jì)中要思考：設(shè)計(jì)原則雖是設(shè)計(jì)的基礎(chǔ)，并非一成不變，要合理權(quán)衡設(shè)計(jì)原則與產(chǎn)品目標(biāo)之間的關(guān)系。

3. 水平按鈕主次

水平擺放的按鈕，最典型的就是電商類型的詳情頁，【加入購物車】和【立即購買】按鈕。

結(jié)合古騰堡原則的視覺重點(diǎn)說明，右下角視為視覺終端區(qū)域，即視覺最終停留的位置，所以他們將與轉(zhuǎn)化率相關(guān)的【立即購買】按鈕放在了界面的右下角，讓用戶更容易關(guān)注到。

再比如：比較常見的「確認(rèn)」和「取消」彈窗樣式，通常是在需要讓用戶確認(rèn)某種操作行為時(shí)出現(xiàn)，有可能是提交表單、確定信息、頁面操作引導(dǎo)等等，目的是讓用戶最快地看到主要操作內(nèi)容，為用戶提高操作效率。

這些按鈕的差異不僅僅是位置，還包含按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。比如上圖的，頁面引導(dǎo)按鈕，支付寶的轉(zhuǎn)入轉(zhuǎn)出按鈕位置，都是一樣的邏輯，也是我們在設(shè)計(jì)中的一些設(shè)計(jì)支持業(yè)務(wù)轉(zhuǎn)化的一種方式。

（1）為什么要這樣設(shè)定水平按鈕主次關(guān)系？

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

當(dāng)我們在設(shè)計(jì)表單中的組合按鈕時(shí)，比如：取消與確認(rèn)、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時(shí)從第一視覺落點(diǎn)區(qū)是主視覺區(qū)(Primary Optical Area)，最終停留在結(jié)尾的終點(diǎn)區(qū)(Terminal Area)。

不難看出推薦按鈕放在右側(cè)后，眼睛的運(yùn)動(dòng)軌跡會在水平方向軸上來回的往復(fù)運(yùn)動(dòng)，無形中增加了用戶選擇時(shí)長。

（2）水平多按鈕同樣存在著反面應(yīng)用

當(dāng)業(yè)務(wù)需求需要用戶產(chǎn)生視覺回流，或者想要讓用戶習(xí)慣性的點(diǎn)擊右下角終點(diǎn)位置，比如常見的卸載軟件提示彈窗。

相比橫排按鈕，用戶點(diǎn)擊主操作按鈕時(shí)會更加順暢，有利于業(yè)務(wù)的轉(zhuǎn)化，對于用戶體驗(yàn)流程的打斷也會比豎向按鈕相對弱些，適用于能幫助用戶快速完成流程的場景，具體使用哪種布局要權(quán)衡體驗(yàn)、用戶與業(yè)務(wù)目標(biāo)之間的統(tǒng)籌關(guān)系。

4. 右上角按鈕位置

根據(jù)古騰堡原則，右上角區(qū)域?qū)儆趶?qiáng)休息區(qū)，用戶對這塊的注意程度最低。

既然如此，為什么頁面的“發(fā)布”、“編輯”等按鈕都在右上角呢？

頂部按鈕的設(shè)計(jì)，關(guān)鍵還在于可編輯內(nèi)容區(qū)域，而不是按鈕本身，頂部按鈕更適用于「編輯頁面」，頂部按鈕尺寸較小，它所占空間有限，因此在操作上相對來說不便于點(diǎn)擊，需要用戶謹(jǐn)慎操作。

而底部按鈕的核心在于按鈕本身，而不是內(nèi)容。底部按鈕更適合全局最終的確定，提交等操作按鈕。

四、應(yīng)用古騰堡原則需要注意點(diǎn)

1、雖然古騰堡圖所揭示的閱讀規(guī)律是普遍適用的，但是只在信息均勻分布的頁面證明古騰堡原則的閱讀規(guī)律。

若是為了突破常規(guī)或達(dá)到一種強(qiáng)烈的沖擊，古登堡圖所揭示的視覺規(guī)律經(jīng)常被設(shè)計(jì)師所顛覆。常用的顛覆方法為采用特別醒目的形象，或者大小顏色更為鮮明搶眼的元素置于閑置區(qū)，從而改變玩家的閱讀順序。

上圖banner中，右側(cè)的3D內(nèi)容第一吸引用戶眼球，而后才會看到左邊的文字，視覺流程如紅色箭頭，這就是突破古騰堡常規(guī)設(shè)計(jì)原則的常見設(shè)計(jì)。

2、語言本身的閱讀順序可能也會產(chǎn)生一定的影響，例如阿拉伯語從右至左的文字順序可能并不符合古騰堡原則的閱讀規(guī)律。

3、用戶已熟悉，并養(yǎng)成獨(dú)特閱讀習(xí)慣的頁面也不一定遵循此規(guī)律，比如用戶自動(dòng)跳過輪播廣告的【輪播圖盲視區(qū)】現(xiàn)象。

五、總結(jié)

古騰堡圖貫穿于界面設(shè)計(jì)的每個(gè)角落，只要謹(jǐn)記閱讀引力的順序：從上到下，從左到右，綜合閱讀流來排布視覺層級，即能做出合理的設(shè)計(jì)。

但設(shè)計(jì)師也不能局限于古騰堡圖的規(guī)律中，要善用規(guī)律并結(jié)合其他設(shè)計(jì)知識做出更加完美的設(shè)計(jì)。

應(yīng)用建議：

• 原則是設(shè)計(jì)的基礎(chǔ)，并非一成不變，需要結(jié)合設(shè)計(jì)原則與產(chǎn)品目標(biāo)之間的關(guān)系進(jìn)行合理運(yùn)用；
• 不需要死遵循原則，比如焦點(diǎn)模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區(qū)域）。順序?qū)⑷Q于這些焦點(diǎn)的相對權(quán)重以及指示下一步要看的任何視覺提示。
• 想要讓用戶進(jìn)行某種操作時(shí)，正常情況下主要按鈕放在右側(cè)，操作流程暢通，提高效率，需要用戶確認(rèn)思考的場景下，主要按鈕可放在左側(cè)，達(dá)到反復(fù)確認(rèn)的目的。
• 創(chuàng)建層次結(jié)構(gòu)和流程會顛覆視覺動(dòng)線的模型。