為用戶的眼睛引導一個正確的瀏覽路徑是至關重要的。

今天為大家?guī)砉膨v堡原理，又稱作“從左到右、從上到下”的規(guī)則，是一種基于西方閱讀習慣的視覺設計和布局原則。它指出，由于人們通常習慣于從頁面或視覺作品的左上角開始閱讀信息，逐漸向右下角移動，因此設計師可以利用這一習慣來指導視覺布局的安排，確保信息按照重要性和閱讀順序被有效傳達。

本篇文章分為“古騰堡原理——閱讀習慣與視覺流動——古騰堡原理在設計中的應用——關于古騰堡的演化與推進”。

古騰堡原理它并不直接源自古騰堡本人或他的工作。約翰內斯·古騰堡是15世紀的德國發(fā)明家，以歐洲地區(qū)第一位發(fā)明活字印刷術而聞名。通過研究發(fā)現(xiàn)用戶的瀏覽習慣于從左上角開始，到右下角結束。

著名報紙設計師埃德蒙·阿諾德將這種自然掃描模式稱為古騰堡原理。那么我們就大致了解了什么是古騰堡原則。

古騰堡原則：從左到右，從上到下強調了用戶在瀏覽頁面內容時的自然視覺流動。它建議設計應該順應這種閱讀路徑，從而引導用戶的眼動自然地流動通過頁面。在這個模式下，頁面布局通常被分為四個象限，用戶的視線通常會從左上角開始，然后向右移動，接著下移至左下角，最后向右下角移動，形成一個類似“Z”的模式。

這里主要根據(jù)移動端與網(wǎng)頁端的閱讀習慣和瀏覽路徑來進行分析，關于這些差異主要由設備的物理特性、使用上下文、用戶期望和交互方式等因素驅動。那么通過表單的方式來清晰的觀察一下。

通過表單顯示移動端設計應專注于簡潔性、速度和直觀的觸控交互，而網(wǎng)頁端設計可以利用更大的屏幕和復雜的交互方式，提供更豐富的內容和深度的用戶體驗。接下來我們通過“F型閱讀模式、Z型布局、古騰堡原理”三種瀏覽模式分析閱讀習慣與瀏覽路徑。

那么“古騰堡原理”為什么會造成這種“從左上角開始，到右下角結束”的瀏覽情況呢？是因為我們看到屏幕中呈現(xiàn)的信息時，我們的眼睛并不是靜止不動的，而是不斷的瀏覽、以及被呈現(xiàn)的不同信息所吸引，經過大量的測試發(fā)現(xiàn)我們對信息的檢索路徑是首先被左上角區(qū)域所吸引，被動地穿過右上角，向下到達左下角，最后到達右下角（這里有條件的總監(jiān)們可以在進行眼動測試的時候順便觀察一下）。

對于“古騰堡原理”的閱讀習慣與瀏覽路徑這里為了更方便大家理解列舉案例：

拿“TOPYS”與“36氪”這兩個App來舉例，這里兩個App在列表信息的展現(xiàn)方式分別為“左圖右文”與“右文左圖”。

為什么會造成這樣的情況我們從“瀏覽習慣”與“產品屬性”兩個方面進行分析。

瀏覽習慣：基于“古騰堡原理”的結論看信息順序是先從左到右的

由此我們可以得知結論：基于用戶的瀏覽習慣根據(jù)產品屬性對信息的展示需要進行不同的排列。

那么與“古騰堡原理”有什么關系呢？別著急，我們點進信息內容代入“古騰堡原理”這個公式，先看“左上與右下的信息內容”分別為：

返回按鈕：讓用戶能夠直觀地了解倒返回按鈕的所在，最早是基于(最初iOS被稱為iPhoneOS)首次引入了這種設計，這樣放置的原因是因為考慮到手持設備的操作習慣和屏幕大小。

互動模塊：此模塊在瀏覽信息的終端，用戶在瀏覽至此模塊時對頁面大致信息已有所了解所以在不干擾主要內容展示的同時存在用戶便攜操作的區(qū)域使得用戶無論在什么情況下都能輕松地與應用互動。

通過這個案例我們了解“古騰堡原理”的簡單應用：利用瀏覽習慣通過元素間的排列位置引導用戶的瀏覽順序。

這里就會產生一個新問題，上述寫到“Z型布局”和“古騰堡原理”會有很多同學有疑惑,那么這兩個到底是不是“古騰堡原理”及“Z型布局”呢?這里我們可以從概念去詳細分析一下

古騰堡原理：從左到右，從上到下.強調了用戶在瀏覽頁面內容時的自然視覺流動。它建議設計應該順應這種閱讀路徑，從而引導用戶的眼動自然地流動通過頁面。

由此可見“兩者都基于對西方閱讀習慣的理解，嘗試通過設計引導用戶的視線流動”。

有些設計師可能將它們視為相似或重疊的概念，因為它們都涉及到如何根據(jù)用戶的視覺習慣來布局頁面元素。然而，其他人則強調它們在設計應用和目標上的區(qū)別。

實際上，這兩種理論可以視為互補的?？吹竭@里可能會覺得有些過度解讀，但是其實從“第一性原理”：回歸事物的本質去思考，他們都是為了“提高信息傳達的效率和用戶體驗的質量”為目的的，所以在我們選擇布局方式時根據(jù)具體的項目需求和內容類型，靈活選擇即可它們并不是公式而是一種服務方式。

“F型布局”也是一種瀏覽習慣，顧名思義“人們在瀏覽網(wǎng)頁時的眼動路徑通常呈現(xiàn)出“F”形狀的特點?！边@個研究成果是“尼爾森諾曼小組（NNG）在一項眼動追蹤研究200多名瀏覽了數(shù)千個網(wǎng)頁的用戶中發(fā)現(xiàn)的?！?/p>

“F型布局”有三個特點：

垂直閱讀：最后，用戶的視線沿著頁面的左側垂直向下掃描，偶爾會在感興趣的點向右移動進行閱讀，形成了”F”形狀的豎線部分。

其中“谷歌搜索”與百度搜索都采用了這種布局模式,當用戶執(zhí)行搜索時，他們通常會遵循“F型布局”來瀏覽搜索結果。

對于瀏覽器采用“F型閱讀”的模式，搜索頁面的設計并非專門為其而設計，但其布局和內容呈現(xiàn)方式自然而然地適應了這種瀏覽習慣，提高了用戶獲取信息的效率。

到這里我們講解完“F型閱讀模式”、“Z型布局”、“古騰堡原理”三者的瀏覽模式我們通過“定義、適用性、移動端與網(wǎng)頁端應用”來進行分析。

由此可見“F型閱讀模式”主要適用于文本密集的網(wǎng)頁端，“Z型布局”適合視覺導向的網(wǎng)頁和移動端頁面設計，而“古騰堡原理”更適用于傳統(tǒng)的、布局固定的文本密集型網(wǎng)頁。

*提示：設計時應根據(jù)內容類型、用戶目標和設備特性等來選擇最合適的布局方式，切末把布局方式定義為固定的套路,這些原則與方法的存在是為了讓用戶更加方便而非固定的公式。

關于“古騰堡原理”在設計中的應用都有哪些，我們這就來逐一盤點，再次之前聲明一點：

由于文軒并非這些案例的設計師并不能講他們就是100%按照古騰堡去做的，我們先將古騰堡原則代入進這些應用方式去體驗，再次向這些設計師及團隊表示感謝。

面對新的頁面大多數(shù)用戶首先會掃描內容，因為頁面與他們的目標行動相關并占據(jù)屏幕的主導地位。用戶的眼睛從屏幕的上半部分向下移動。當內容結束時，用戶視線會在屏幕底部尋找找尋最終信息或者按鈕。

關于概念我們說完了，這里舉出三個例子“淘寶詳情頁”、“淘寶訂單頁”、“小紅書用戶頁面”。

這里如果這些“付款、三連按鈕”都出現(xiàn)在左上方會造成用戶瀏覽完信息時突然消失沒有針對于下一步的行動操作，那么用戶的視線將會原路返回，這樣會浪費用戶的操作時間,我們的作用就是提用戶節(jié)省時間，替他選擇。

在使用按鈕時當按鈕可被立即識別和易于理解時，App往往顯得更直觀和設計巧妙,我們在將來進行按鈕設計時可以從兩個方向去思考“使按鈕易于使用”與“確保每個按鈕清晰傳達其用途”。

設計彈窗內容時，可以將最關鍵的信息（如標題或重要通知）放在左上角/中間的主要區(qū)域，以立即吸引用戶的注意。次要信息（如詳細說明或輔助信息）可以放在右上角和中心區(qū)域，而行動呼吁按鈕（如“立即購買”、“注冊”等）則放在視線的終點區(qū)域，即右下角，促使用戶采取行動。關于在“古騰堡原則”在彈窗中的應用，我們從“C端”和“B端”來講解。

C端

關于C端的彈窗我截取了四種類型“常規(guī)的左右排列”、“上下排列”、“底部排列”、“運營彈窗”。

通過觀察“四種彈窗樣式”，我們可以清晰的看到所有的排列方式都遵循了“古騰堡原則”，通過視覺引導從圖像、顏色對比等視覺元素，在彈窗內創(chuàng)造一條從左上到右下的視覺路徑，引導用戶的視線按照古騰堡原理預期的方式移動，從而增加信息傳遞的效率和效果。

那么我們在設計彈窗時需要注意的是“考慮到用戶的視線自然會從左上角移動到右下角，避免在邊緣區(qū)域（左下角）放置重要信息或行動呼吁按鈕(可以當作主按鈕去理解)，因為這些區(qū)域相對較少被注意到，可能導致信息被忽視或用戶行動的減少?！?/p>

B端

在B端中的彈窗設計,這里我首先是通過“AntDesign”中理解，就從“表單彈窗”、“通知彈窗”去解析。

表單彈窗：在“AntDesign”官方文檔通過三個區(qū)域拆解“Header：主題的標題和摘要信息內容區(qū)的導航等”、“Body：具體內容”、“Footer：主題的補充信息和工具欄等”，之所以存在右上方的按鈕是因為“完成”主題類的動作放在Header區(qū)。例如，編輯器中為了最大化編輯空間，將“完成”類動作放到了右上角。

通過“古騰堡原則”在B端中彈窗應用的優(yōu)勢有四個方面：“優(yōu)化信息層級和重點突出”、“提高用戶操作的直觀性”、“減少用戶錯誤”、“提升決策效率”。

當然，關于古騰堡在設計中的應用絕不止這些，還有“缺省頁”、“報紙”等，這些都藏在我們的生活中需要我們去發(fā)現(xiàn)。

通過有效引導用戶瀏覽頁面來使用戶擁有一個友好的體驗，使用戶輕松理解我們在頁面設計的信息這些是至關重要的，本期就到這里啦，我們下便再見。

本文由@文軒沒有大腦袋原創(chuàng)發(fā)布于人人都是產品經理，未經授權，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。