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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

古騰堡原理：從左到右，從上到下.強(qiáng)調(diào)了用戶在瀏覽頁面內(nèi)容時的自然視覺流動。它建議設(shè)計(jì)應(yīng)該順應(yīng)這種閱讀路徑，從而引導(dǎo)用戶的眼動自然地流動通過頁面。

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

有些設(shè)計(jì)師可能將它們視為相似或重疊的概念，因?yàn)樗鼈兌忌婕暗饺绾胃鶕?jù)用戶的視覺習(xí)慣來布局頁面元素。然而，其他人則強(qiáng)調(diào)它們在設(shè)計(jì)應(yīng)用和目標(biāo)上的區(qū)別。

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

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

“F型布局”有三個特點(diǎn)：

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

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

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

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

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

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

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

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

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

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

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

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

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

C端

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

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

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

B端

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

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

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

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

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

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

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

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。