中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：有些同學可能將頁面框架層級和頁面信息層級混為一談，其實它們是不一樣的。那么，頁面層級到底是什么？有什么用？該怎么用呢？本文作者對此作出了分析，一起來看一下吧。

最近收到一個讀者朋友的提問：

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

相信很多朋友也都有類似的疑問。還有同學會直接把頁面框架層級和頁面信息層級混為一談。本文就和大家聊聊關于頁面框架層級相關的知識和應用。

01 什么是頁面框架層級？

每一個頁面其實并不是我們看到的扁平的狀態。我們可以將頁面依據交互行為和功能特點等方面進行層級的劃分。以保證用戶操作的順暢性和確定性。

頁面框架層級的劃分目前并沒有嚴格的規范，以阿里巴巴的 Fusion Design 的規范為例，可以將頁面分為以下 4 層：

1. 背景層
2. 內容層
3. 全局控制層
4. 臨時層

1. 背景層

背景層永遠置于頁面的最底部，層的顏色為中立背景色，方便凸顯其他內容層。

2. 內容層

內容層是最核心和復雜的一層，用戶大多數操作都集中在這一層。內容層上通常會使用一些卡片，將信息內容進行歸組和分類，承載當前場景中用戶需要獲取的核心信息及操作。

3. 全局控制層

全局控制層承擔著對整個產品的控制及導航功能。其組成通常包括頭部導航欄、側導航欄、工具欄等。

4. 臨時層

顧名思義，就是當前任務在操作時產生的臨時信息、臨時功能層，優先級高于當前操作任務本身，通常是當前需要臨時處理的任務或者需要接受的反饋等，承載的方式通常為彈窗、抽屜、信息提示條等。

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

因此，頁面框架層級實際上決定著產品的交互邏輯和操作順序。雖然看上去這些層級就是可見的功能區域，但你更需要去注意其中暗含的邏輯。這些組件和設計實體只是產品交互邏輯的一種外在表現方式。框架層級不僅是對于設計師有要求，在產品實現和開發的過程中也是一定要遵守和踐行的。

02 頁面的框架層級 VS 信息層級

很多同學分不清「頁面的框架層級」和「頁面的信息層級」，我們可以對二者做以下區分：

1. 頁面框架層級

• 更多應用于產品交互框架層面
• 將頁面中的不同功能和操作區域進行分層
• 側重考慮用戶的操作順序
• 確保用戶操作的順暢性和確定性
• 是隱性的，是不易被用戶察覺到的

下圖可以看到頁面框架層級的部分內容：

2. 頁面信息層級

• 更多應用于產品視覺內容層面
• 將頁面中能看到的所有信息和內容進行分層
• 側重考慮用戶閱讀和接收信息的順序
• 確保用戶獲取信息的高效性
• 是顯性的，是能夠被用戶直接看到的

下圖可以看到頁面信息層級的基本模式：

再舉一個不是很恰當但能幫你區分兩者的例子：

如果說把產品比作一個人，頁面的框架層級相當于是他的認知邏輯和行為順序。你跟他聊天時，他會用他的溝通方式和思維邏輯引導你先聊完一個話題，再聊另一個話題，然后再開始下一個行動。

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

03 頁面框架層級的功能

頁面框架層級作用及意義如下：

1. 交互順序更清晰

用戶的操作行為順序可以被有序地規范和引導，通過分層讓操作有先后。

2. 視覺排版有邏輯

層級與層級之間有邏輯的視覺表現，可以讓產品的重點功能區域得以進一步凸顯，輔助于頁面的信息層級，讓感性化的視覺效果有據可循。

比如你可以針對不同層級，定義用戶視覺專注度和色彩特點，這樣可以盡可能的避免產品用色混亂，在專注效率的 B 端產品中尤為適用：

3. 布局沉淀更合理

我們曾經在文章《詳解｜頁面級組件的功能及應用》中詳細講解過頁面級組件的意義。頁面框架層級決定著頁面組件的內容，可以讓一個頁面在最開始的設計和搭建過程變得更加簡單高效。

比如Ant Design的 ProComponents 組件庫就是基于頁面框架而開發的模板組件，對 0-1 搭建的頁面提供更高級別的、更規范化的框架支持。其中的 ProLayout 就可以用于頁面基礎布局的搭建，提供開箱即用的菜單和面包屑功能：

頁面框架層級可以幫助設計師從更加整體的視角看待和理解產品的交互邏輯和視覺呈現。設計師在應用和理解的過程中也要注意：

1. 按照順序來思考交互邏輯

在思考產品交互邏輯時按照從高到低的順序（臨時層 – 全局控制層 – 內容層 – 背景層）來處理和檢驗頁面，更符合用戶的認知及操作習慣。

2. 層級間保持相對的一致性

雖然我們將頁面做了層級的劃分，并不意味著每個層級可以單獨處理交互風格和樣式。在所有的層級中的交互形式（比如反饋形式、組件結構、元素樣式等）需要保持相對的一致性，對用戶來說更加可預測和易理解。

3. 層級之內具備擴展性

每個層級都應具備可擴展性，隨著產品的功能疊加和更新，可以進行布局上的延展和擴充。由于層級之間的內容和功能需求差異大，這種擴展性在每個層級中可以相對獨立。

以上，希望框架層級可以更好地幫你梳理頁面的交互設計思路。

#專欄作家#

元堯，微信公眾號：長弓小子，人人都是產品經理專欄作家。一線互聯網大廠B端體驗設計師，清華大學美術學院本碩連讀。曾負責國內最大開源組件庫Ant Design組件的設計和運營工作，目前負責國際業務線B端產品體驗設計和組件庫的搭建工作。

本文原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。