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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C端

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

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

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

B端

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

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

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

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

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

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

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

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