編輯導(dǎo)語(yǔ)：有些同學(xué)可能將頁(yè)面框架層級(jí)和頁(yè)面信息層級(jí)混為一談，其實(shí)它們是不一樣的。那么，頁(yè)面層級(jí)到底是什么？有什么用？該怎么用呢？本文作者對(duì)此作出了分析，一起來(lái)看一下吧。

最近收到一個(gè)讀者朋友的提問(wèn)：

“我的老板在看完我的設(shè)計(jì)稿子之后，問(wèn)我能不能講一講頁(yè)面的框架層級(jí)是怎么劃分的。我直接懵在那兒了！頁(yè)面框架層級(jí)是什么呀？有什么用？該怎么用呢？“

相信很多朋友也都有類似的疑問(wèn)。還有同學(xué)會(huì)直接把頁(yè)面框架層級(jí)和頁(yè)面信息層級(jí)混為一談。本文就和大家聊聊關(guān)于頁(yè)面框架層級(jí)相關(guān)的知識(shí)和應(yīng)用。

01 什么是頁(yè)面框架層級(jí)？

每一個(gè)頁(yè)面其實(shí)并不是我們看到的扁平的狀態(tài)。我們可以將頁(yè)面依據(jù)交互行為和功能特點(diǎn)等方面進(jìn)行層級(jí)的劃分。以保證用戶操作的順暢性和確定性。

頁(yè)面框架層級(jí)的劃分目前并沒(méi)有嚴(yán)格的規(guī)范，以阿里巴巴的 Fusion Design 的規(guī)范為例，可以將頁(yè)面分為以下 4 層：

1. 背景層
2. 內(nèi)容層
3. 全局控制層
4. 臨時(shí)層

1. 背景層

背景層永遠(yuǎn)置于頁(yè)面的最底部，層的顏色為中立背景色，方便凸顯其他內(nèi)容層。

2. 內(nèi)容層

內(nèi)容層是最核心和復(fù)雜的一層，用戶大多數(shù)操作都集中在這一層。內(nèi)容層上通常會(huì)使用一些卡片，將信息內(nèi)容進(jìn)行歸組和分類，承載當(dāng)前場(chǎng)景中用戶需要獲取的核心信息及操作。

3. 全局控制層

全局控制層承擔(dān)著對(duì)整個(gè)產(chǎn)品的控制及導(dǎo)航功能。其組成通常包括頭部導(dǎo)航欄、側(cè)導(dǎo)航欄、工具欄等。

4. 臨時(shí)層

顧名思義，就是當(dāng)前任務(wù)在操作時(shí)產(chǎn)生的臨時(shí)信息、臨時(shí)功能層，優(yōu)先級(jí)高于當(dāng)前操作任務(wù)本身，通常是當(dāng)前需要臨時(shí)處理的任務(wù)或者需要接受的反饋等，承載的方式通常為彈窗、抽屜、信息提示條等。

這四個(gè)層級(jí)從上到下的順序依次為，臨時(shí)層 – 全局控制層 – 內(nèi)容層 – 背景層。順序通常不可更改。舉個(gè)最典型的例子：當(dāng)位于臨時(shí)層的彈窗出現(xiàn)時(shí)，用戶需要先完成彈窗中的操作，才能再去內(nèi)容層進(jìn)行其他操作：

因此，頁(yè)面框架層級(jí)實(shí)際上決定著產(chǎn)品的交互邏輯和操作順序。雖然看上去這些層級(jí)就是可見(jiàn)的功能區(qū)域，但你更需要去注意其中暗含的邏輯。這些組件和設(shè)計(jì)實(shí)體只是產(chǎn)品交互邏輯的一種外在表現(xiàn)方式。框架層級(jí)不僅是對(duì)于設(shè)計(jì)師有要求，在產(chǎn)品實(shí)現(xiàn)和開(kāi)發(fā)的過(guò)程中也是一定要遵守和踐行的。

02 頁(yè)面的框架層級(jí) VS 信息層級(jí)

很多同學(xué)分不清「頁(yè)面的框架層級(jí)」和「頁(yè)面的信息層級(jí)」，我們可以對(duì)二者做以下區(qū)分：

1. 頁(yè)面框架層級(jí)

• 更多應(yīng)用于產(chǎn)品交互框架層面
• 將頁(yè)面中的不同功能和操作區(qū)域進(jìn)行分層
• 側(cè)重考慮用戶的操作順序
• 確保用戶操作的順暢性和確定性
• 是隱性的，是不易被用戶察覺(jué)到的

下圖可以看到頁(yè)面框架層級(jí)的部分內(nèi)容：

2. 頁(yè)面信息層級(jí)

• 更多應(yīng)用于產(chǎn)品視覺(jué)內(nèi)容層面
• 將頁(yè)面中能看到的所有信息和內(nèi)容進(jìn)行分層
• 側(cè)重考慮用戶閱讀和接收信息的順序
• 確保用戶獲取信息的高效性
• 是顯性的，是能夠被用戶直接看到的

下圖可以看到頁(yè)面信息層級(jí)的基本模式：

再舉一個(gè)不是很恰當(dāng)?shù)軒湍銋^(qū)分兩者的例子：

如果說(shuō)把產(chǎn)品比作一個(gè)人，頁(yè)面的框架層級(jí)相當(dāng)于是他的認(rèn)知邏輯和行為順序。你跟他聊天時(shí)，他會(huì)用他的溝通方式和思維邏輯引導(dǎo)你先聊完一個(gè)話題，再聊另一個(gè)話題，然后再開(kāi)始下一個(gè)行動(dòng)。

而頁(yè)面的信息層級(jí)則相當(dāng)于是這個(gè)人的外表。你看到他時(shí)通常會(huì)先看他的五官，再看上半身，最后看到腳。如果他想讓你最先看到他的上半身，他就會(huì)穿上鮮艷和夸張的上衣；如果他想讓你最先看到他的腳，他可能會(huì)穿一雙超級(jí)酷的球星同款運(yùn)動(dòng)鞋，甚至還會(huì)在鞋上增加發(fā)光和發(fā)聲的裝置。

03 頁(yè)面框架層級(jí)的功能

頁(yè)面框架層級(jí)作用及意義如下：

1. 交互順序更清晰

用戶的操作行為順序可以被有序地規(guī)范和引導(dǎo)，通過(guò)分層讓操作有先后。

2. 視覺(jué)排版有邏輯

層級(jí)與層級(jí)之間有邏輯的視覺(jué)表現(xiàn)，可以讓產(chǎn)品的重點(diǎn)功能區(qū)域得以進(jìn)一步凸顯，輔助于頁(yè)面的信息層級(jí)，讓感性化的視覺(jué)效果有據(jù)可循。

比如你可以針對(duì)不同層級(jí)，定義用戶視覺(jué)專注度和色彩特點(diǎn)，這樣可以盡可能的避免產(chǎn)品用色混亂，在專注效率的 B 端產(chǎn)品中尤為適用：

3. 布局沉淀更合理

我們?cè)?jīng)在文章《詳解｜頁(yè)面級(jí)組件的功能及應(yīng)用》中詳細(xì)講解過(guò)頁(yè)面級(jí)組件的意義。頁(yè)面框架層級(jí)決定著頁(yè)面組件的內(nèi)容，可以讓一個(gè)頁(yè)面在最開(kāi)始的設(shè)計(jì)和搭建過(guò)程變得更加簡(jiǎn)單高效。

比如Ant Design的 ProComponents 組件庫(kù)就是基于頁(yè)面框架而開(kāi)發(fā)的模板組件，對(duì) 0-1 搭建的頁(yè)面提供更高級(jí)別的、更規(guī)范化的框架支持。其中的 ProLayout 就可以用于頁(yè)面基礎(chǔ)布局的搭建，提供開(kāi)箱即用的菜單和面包屑功能：

頁(yè)面框架層級(jí)可以幫助設(shè)計(jì)師從更加整體的視角看待和理解產(chǎn)品的交互邏輯和視覺(jué)呈現(xiàn)。設(shè)計(jì)師在應(yīng)用和理解的過(guò)程中也要注意：

1. 按照順序來(lái)思考交互邏輯

在思考產(chǎn)品交互邏輯時(shí)按照從高到低的順序（臨時(shí)層 – 全局控制層 – 內(nèi)容層 – 背景層）來(lái)處理和檢驗(yàn)頁(yè)面，更符合用戶的認(rèn)知及操作習(xí)慣。

2. 層級(jí)間保持相對(duì)的一致性

雖然我們將頁(yè)面做了層級(jí)的劃分，并不意味著每個(gè)層級(jí)可以單獨(dú)處理交互風(fēng)格和樣式。在所有的層級(jí)中的交互形式（比如反饋形式、組件結(jié)構(gòu)、元素樣式等）需要保持相對(duì)的一致性，對(duì)用戶來(lái)說(shuō)更加可預(yù)測(cè)和易理解。

3. 層級(jí)之內(nèi)具備擴(kuò)展性

每個(gè)層級(jí)都應(yīng)具備可擴(kuò)展性，隨著產(chǎn)品的功能疊加和更新，可以進(jìn)行布局上的延展和擴(kuò)充。由于層級(jí)之間的內(nèi)容和功能需求差異大，這種擴(kuò)展性在每個(gè)層級(jí)中可以相對(duì)獨(dú)立。

以上，希望框架層級(jí)可以更好地幫你梳理頁(yè)面的交互設(shè)計(jì)思路。

#專欄作家#

元堯，微信公眾號(hào)：長(zhǎng)弓小子，人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗(yàn)設(shè)計(jì)師，清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負(fù)責(zé)國(guó)內(nèi)最大開(kāi)源組件庫(kù)Ant Design組件的設(shè)計(jì)和運(yùn)營(yíng)工作，目前負(fù)責(zé)國(guó)際業(yè)務(wù)線B端產(chǎn)品體驗(yàn)設(shè)計(jì)和組件庫(kù)的搭建工作。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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