不同的頁面分布，給用戶帶來的感受是不一樣的。本文將以古騰堡原理，闡述瀏覽信息的正確方式以及在設(shè)計中的正確應(yīng)用，一起來看看吧。

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

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

本篇文章分為“古騰堡原理——閱讀習慣與視覺流動——古騰堡原理在設(shè)計中的應(yīng)用——關(guān)于古騰堡的演化與推進”。

一、古騰堡歷史背景及其原理

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

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

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

二、閱讀習慣與瀏覽路徑

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

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

1. 古騰堡原理

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

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

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

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

1. 瀏覽習慣：基于“古騰堡原理”的結(jié)論看信息順序是先從左到右的
2. 產(chǎn)品屬性：“TOPYS”為關(guān)于創(chuàng)意內(nèi)容的平臺以圖為主，用戶對于藝術(shù)創(chuàng)意習慣先看到產(chǎn)品；“36氪”為資訊類平臺以文為主，用戶對于報道首先會關(guān)注信息。

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

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

• 36氪：“返回”和“評論、點贊、收藏、轉(zhuǎn)發(fā)”
• TOPYS：“返回”和“評論、分享、收藏”

這里我們從“古騰堡原理”與“手勢操作習慣”來分析，將內(nèi)容頁返回按鈕放置左上角是App的常規(guī)操作（當然也會有將內(nèi)容頁返回按鈕放置左下角，這里不過多贅述），下面我們將“評論、點贊、收藏、轉(zhuǎn)發(fā)”統(tǒng)稱為互動模塊：

• 返回按鈕：讓用戶能夠直觀地了解倒返回按鈕的所在，最早是基于iPhone OS 1.0(最初iOS被稱為iPhone OS)首次引入了這種設(shè)計，這樣放置的原因是因為考慮到手持設(shè)備的操作習慣和屏幕大小。
• 互動模塊：此模塊在瀏覽信息的終端，用戶在瀏覽至此模塊時對頁面大致信息已有所了解所以在不干擾主要內(nèi)容展示的同時存在用戶便攜操作的區(qū)域使得用戶無論在什么情況下都能輕松地與應(yīng)用互動。

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

2. “Z型布局”和“古騰堡原理”

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

• 古騰堡原理：從左到右，從上到下.強調(diào)了用戶在瀏覽頁面內(nèi)容時的自然視覺流動。它建議設(shè)計應(yīng)該順應(yīng)這種閱讀路徑，從而引導用戶的眼動自然地流動通過頁面。
• Z型布局：它強調(diào)了在頁面的四個關(guān)鍵點（起點、頂部水平、對角線和結(jié)束點）上布局重要元素，以引導用戶的視線按照“Z”字形移動。

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

區(qū)別在于“古騰堡原理更多關(guān)注于文本內(nèi)容的布局，強調(diào)在頁面的不同區(qū)域分布用戶的注意力，適用于內(nèi)容密集型的設(shè)計。而Z型布局側(cè)重于視覺元素的布局，適用于目的明確、需要用戶快速做出反應(yīng)的頁面設(shè)計?！?/p>

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

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

3. F型布局

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

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

1. 水平閱讀頂部：用戶首先在網(wǎng)頁的頂部進行一次較長的水平閱讀，這是因為人們習慣從頁面的頂端開始瀏覽信息。
2. 水平閱讀次頂部：接著，用戶的視線會下移一段距離，在頁面的中部再次進行一次水平閱讀，但這一次的閱讀長度通常短于頂部的閱讀。
3. 垂直閱讀：最后，用戶的視線沿著頁面的左側(cè)垂直向下掃描，偶爾會在感興趣的點向右移動進行閱讀，形成了”F”形狀的豎線部分。

“F型閱讀”這種閱讀模式更習慣方便了用戶在快速瀏覽網(wǎng)頁時的常見行為，強調(diào)了在網(wǎng)頁設(shè)計和內(nèi)容布局時需要將關(guān)鍵信息安排在用戶視線最可能觸及的區(qū)域，即頁面的頂部和左側(cè)邊緣，以提高信息的可見性和吸引力。

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

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

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

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

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

三、古騰堡原理在設(shè)計中的應(yīng)用

關(guān)于“古騰堡原理”在設(shè)計中的應(yīng)用都有哪些，我們這就來逐一盤點，再次之前聲明一點：

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

1. 按鈕的應(yīng)用

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

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

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

但是會出現(xiàn)另一種問題，在部分UGC（用戶產(chǎn)出）平臺的“關(guān)注”、或者手機相冊中，他們的頁面關(guān)注會在頂部而非視覺最終落點區(qū)域，我們來分析一下這種情況。

在UGC平臺用戶頁面的“關(guān)注”為重要按鈕是一種誤區(qū)，這里重要的是下方的“三連（轉(zhuǎn)發(fā)、點贊、評論）”這里“評論最重要”，只有通過“三連”用戶在評論區(qū)進行討論才可以促進平臺的活躍度。

但是相冊、短信中出現(xiàn)主要按鈕操作是因為為了使用戶在這種情況下使用頂部按鈕，可以讓用戶在注意到應(yīng)用欄中的狀態(tài)變化后更快地采取行動，圖片信息、短信對于用戶的最大作用是瀏覽，按鈕靠近狀態(tài)標題意味著用戶的眼睛不必離開太遠。

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

2. 彈窗的應(yīng)用

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

C端

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

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

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

B端

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

• 通知彈窗：用戶的視覺瀏覽通過頂部左側(cè)開始，這里是成功的icon及標題用戶可以首先感知通知狀態(tài)，然后是信息內(nèi)容，其次在視覺路線終端是按鈕將按鈕區(qū)放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)。
• 表單彈窗：在“Ant Design”官方文檔通過三個區(qū)域拆解“Header：主題的標題和摘要信息內(nèi)容區(qū)的導航等”、“Body：具體內(nèi)容”、“Footer：主題的補充信息和工具欄等”，之所以存在右上方的按鈕是因為“完成”主題類的動作放在 Header 區(qū)。例如，編輯器中為了最大化編輯空間，將“完成”類動作放到了右上角。

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

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

總結(jié)

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