起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識【設計法則】如何精進你的設計知識體系之—古騰堡原則！
如何提升自己的設計能力？首先要搭建好自己的知識體系，體現你的專業，讓他人信服，感知你的價值。本文就設計中的三大視覺瀏覽模型之一：古騰堡原則展開分析，并對其應用進行了總結，一起來看看吧。
如果你不知道如何提升設計能力，那就先打好基礎，搭建好知識體系，讓你的設計有理可依，有據可引。體現你的專業，才能讓人信服，讓別人看到你的價值。
今天我們來聊聊設計中的三大視覺瀏覽模型之一：古騰堡原則。
一、什么是古騰堡原則
古騰堡原則是由14世紀西方活字印刷術發明人約翰·古騰堡提出，早在20世紀50年代在設計報紙的過程中，提出了一項原則，認為人的閱讀方式應該是遵循某種習慣進行的，像讀書一樣，由左到右，從上到下。
經過研究，他最終得出了被后人熟知的「古騰堡原則」，古騰堡你可能覺得既難懂還陌生，它還有另外一個名字：對角線平衡法則。
這個原則的支撐點為「閱讀重心」，由人們一直以來的閱讀習慣形成。將頁面的設計與閱讀的重心相協調，能幫助讀者梳理閱讀的邏輯。據研究發現，這么做能提高讀者閱讀的節奏和理解能力。
古騰堡原則指人的閱讀方式遵循從左到右的眼動規律，且畫面顯示的東西都分成四個象限：
1、第一視覺區（Primary Optical Area）：處于左上方，讀者首先注意到的位置。
無論用戶在搜索內容、主動閱讀或者快速瀏覽，這都是用戶閱讀的第一落點區域。因此在這個區域我們應放置一級內容或者核心功能。
2、最終視覺區（Final Optical Area）：處于右下方，視覺流程的終點。
這個區域是用戶瀏覽行為的最終落點區域，當用戶瀏覽到這個部分時需要采取措施，我們可以在這里插入按鈕或者行動點。這也就能解釋為什么按鈕都會在右下角出現。當用戶的瀏覽行為結束后，可以進行操作反饋。
3、強休息區（Strong Follow Area）：處于右上方，較少被注意到。
在這個階段，我們不應該去設置一個重要的行動點，一方面用戶容易忽視，另一方面，當用戶瀏覽完中心區域的內容后，再返回到強休息區操作，視線會有個折回過程，用戶體驗并不太理想。
4、弱休息區（Weak Follow Area）：處于左下方，最少被注意到。
用戶對這塊的注意程度最弱，因此也用來放置最弱的信息提示。
二、古騰堡原則在設計中的應用
遵循古騰堡法則，界面中的左上和右下是用戶視覺最為重點關注的位置，設計師應該把界面的關鍵元素放在主視區，最終視覺區可以放按鈕，休息區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
比如我們常用的頁面彈窗、各種文件和合同文件等等就是采用這種原則進行設計的。
1. 古騰堡原則在web端界面布局設計
我們可以根據一般的用戶視覺習慣，來放信息權重不同的內容。
第一視覺區是用戶瀏覽網頁的起始點，最終視覺區是結束離開網頁的終點。整體是根據人們從上到下、從左至右有規律的閱讀習慣設計的。
我們可以看到人人都是產品經理網站信息結構的布局：
1、根據起點第一視覺區的特性把LOGO和導航放在左上角，推薦的文章也以圖片的形式放在這里進行曝光；
2、弱休息區則放一些最新推薦的文章，吸引用戶不斷往下翻；
3、高閑置區則放文章內容之外的驚喜推送內容；
4、最終視覺區則是提供給用戶相關推薦課程或者想要加入的社區入口，也是常見的放置廣告的地方。
2. 古騰堡原則在移動端頁面布局設計
古騰堡圖表應用最典型的例子就是商品詳情頁，在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購買按鈕。
3. 圖文類信息
結合古騰堡的視線強弱分析，我們可以得知左側的首要視覺點一定是強視覺區，但是有時候簡單的圖片+文字的排列也會有很多設計思考。
比如：第一個圖今日頭條的布局，光看它的配圖我們根本猜不出來整體條目所表達的內容，所以頭條的圖片元素傳達信息的效率遠不如文字，所以第一視覺區會留給文字信息；
而第二圖中美團列表也圖片所傳達的信息效率更直觀，會一眼告訴用戶我這家是西餐還是中餐，是早點還是正餐，所以在美團的條目中圖片會被放在第一視覺區。
這兩種布局的目的都是讓用戶可以快速瀏覽，不讓用戶在接收信息時受阻造成體驗打斷。
此處還可以延伸一下，如上圖第三個圖，頭條的視頻條目也是先文字后視頻，為什么呢？
按理說視頻的傳達信息效率要遠大于配圖，猜想一下，頭條的設計是想將視頻作為終端休息區進行視覺強化，第一，可以強化信息種類的分類讓用戶更好辨識，第二，讓視頻條目傳達信息效率更快且滿足整體使用APP時一致性的用戶心智，讓用戶能快速上手并且順暢體驗瀏覽。
三、古騰堡原則在按鈕設計中的應用
我們還可以依據古騰堡原則來解讀關于按鈕位置背后所呈現的設計思路。
1. 標題和操作按鈕
我們都知道引導用戶操作的頁面中，一般頁面按鈕都在界面底部是因為離手近，方便操作，但不僅僅如此還因為瀏覽是用戶的第一行為，他們的視線會根據頁面元素進行移動，最終停留在底部結尾的地方。
根據古騰堡原則，將標題和內容放在頂部即第一視覺區，引導用戶瀏覽所有內容后注意到底部的按鈕作為終端休息區，這樣的擺放即符合用戶由上到下的閱讀習慣又達到了產品預期的目標。
2. 底部垂直雙按鈕
按鈕的水平布局和垂直布局：
- 垂直布局下，用戶瀏覽時的眼動路徑單純向下，這種由上自下的瀏覽效率是最高的。
- 水平布局時，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時避免了垂直布局下過快的決策造成風險。
這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細閱讀、認真填寫的表單往往使用了水平布局。
如果產品希望用戶對每個按鈕都有足夠的關注度，垂直擺放是最佳選擇，且【重要按鈕應該放在頁面最底部】，雖然垂直雙按鈕在樣式上做了區分，但用戶同樣會停留一段時間將按鈕的內容進行對比思考。
那么，按照古騰堡原則，重要的按鈕應該放在頁面最底部，但是現實我們看到的垂直擺放按鈕的主次反而是相反的，主要的CTA 按鈕往往被放置在了上方？
觀察上圖，有沒有發現淺色按鈕很容易被忽略掉，這樣就違背了產品要保證每一個按鈕都要有足夠關注度的目的，所以我們要違背古騰堡原則來滿足業務需求，正如我們所看到的微信授權頁面一樣。
為了保證「允許」與「拒絕」這兩個獨立的按鈕能夠被用戶足夠的重視，并且其中的任意一個按鈕不會被輕易的忽略掉，這里將「允許」按鈕顏色加重設定為主按鈕，并且放在「拒絕」按鈕之上，讓眼睛原本垂直向下的運動軌跡產生回流的變化。
“拒絕”按鈕能讓用戶注意到，這樣便起到了防錯性，缺點是會對用戶造成流程上較強的打斷性，適用于需要用戶思慮、審核信息的場景。
所以，這也提示我在設計中要思考：設計原則雖是設計的基礎，并非一成不變，要合理權衡設計原則與產品目標之間的關系。
3. 水平按鈕主次
水平擺放的按鈕，最典型的就是電商類型的詳情頁，【加入購物車】和【立即購買】按鈕。
結合古騰堡原則的視覺重點說明，右下角視為視覺終端區域，即視覺最終停留的位置，所以他們將與轉化率相關的【立即購買】按鈕放在了界面的右下角，讓用戶更容易關注到。
再比如：比較常見的「確認」和「取消」彈窗樣式，通常是在需要讓用戶確認某種操作行為時出現，有可能是提交表單、確定信息、頁面操作引導等等，目的是讓用戶最快地看到主要操作內容，為用戶提高操作效率。
這些按鈕的差異不僅僅是位置，還包含按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。比如上圖的，頁面引導按鈕，支付寶的轉入轉出按鈕位置，都是一樣的邏輯，也是我們在設計中的一些設計支持業務轉化的一種方式。
（1）為什么要這樣設定水平按鈕主次關系？
平常我們所看到的彈窗，推薦按鈕都是在右側，那么將推薦按鈕放在左側會怎么樣？如下圖所示：
當我們在設計表單中的組合按鈕時，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
不難看出推薦按鈕放在右側后，眼睛的運動軌跡會在水平方向軸上來回的往復運動，無形中增加了用戶選擇時長。
（2）水平多按鈕同樣存在著反面應用
當業務需求需要用戶產生視覺回流，或者想要讓用戶習慣性的點擊右下角終點位置，比如常見的卸載軟件提示彈窗。
相比橫排按鈕，用戶點擊主操作按鈕時會更加順暢，有利于業務的轉化，對于用戶體驗流程的打斷也會比豎向按鈕相對弱些，適用于能幫助用戶快速完成流程的場景，具體使用哪種布局要權衡體驗、用戶與業務目標之間的統籌關系。
4. 右上角按鈕位置
根據古騰堡原則，右上角區域屬于強休息區，用戶對這塊的注意程度最低。
既然如此，為什么頁面的“發布”、“編輯”等按鈕都在右上角呢？
頂部按鈕的設計，關鍵還在于可編輯內容區域，而不是按鈕本身，頂部按鈕更適用于「編輯頁面」，頂部按鈕尺寸較小，它所占空間有限，因此在操作上相對來說不便于點擊，需要用戶謹慎操作。
而底部按鈕的核心在于按鈕本身，而不是內容。底部按鈕更適合全局最終的確定，提交等操作按鈕。
四、應用古騰堡原則需要注意點
1、雖然古騰堡圖所揭示的閱讀規律是普遍適用的，但是只在信息均勻分布的頁面證明古騰堡原則的閱讀規律。
若是為了突破常規或達到一種強烈的沖擊，古登堡圖所揭示的視覺規律經常被設計師所顛覆。常用的顛覆方法為采用特別醒目的形象，或者大小顏色更為鮮明搶眼的元素置于閑置區，從而改變玩家的閱讀順序。
上圖banner中，右側的3D內容第一吸引用戶眼球，而后才會看到左邊的文字，視覺流程如紅色箭頭，這就是突破古騰堡常規設計原則的常見設計。
2、語言本身的閱讀順序可能也會產生一定的影響，例如阿拉伯語從右至左的文字順序可能并不符合古騰堡原則的閱讀規律。
3、用戶已熟悉，并養成獨特閱讀習慣的頁面也不一定遵循此規律，比如用戶自動跳過輪播廣告的【輪播圖盲視區】現象。
五、總結
古騰堡圖貫穿于界面設計的每個角落，只要謹記閱讀引力的順序：從上到下，從左到右，綜合閱讀流來排布視覺層級，即能做出合理的設計。
但設計師也不能局限于古騰堡圖的規律中，要善用規律并結合其他設計知識做出更加完美的設計。
應用建議：
- 原則是設計的基礎，并非一成不變，需要結合設計原則與產品目標之間的關系進行合理運用；
- 不需要死遵循原則，比如焦點模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區域）。順序將取決于這些焦點的相對權重以及指示下一步要看的任何視覺提示。
- 想要讓用戶進行某種操作時，正常情況下主要按鈕放在右側，操作流程暢通，提高效率，需要用戶確認思考的場景下，主要按鈕可放在左側，達到反復確認的目的。
- 創建層次結構和流程會顛覆視覺動線的模型。
本文由 @三原設計 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
