通過定義框架各層中布局，讓用戶快速的了解產(chǎn)品內(nèi)容及功能模塊的劃分，以及產(chǎn)品在各個平臺的體驗的一致性。本文主要圍繞什么是框架，如何框架布局，框架布局的應用三個部分進行闡述，在項目中提前定義好框架布局將有助于團隊的設計師輸出頁面模塊高度統(tǒng)一的頁面，希望對正在了解布局知識的你有幫助?。。?/p>

01 什么是框架

從建筑學的角度看，框架（framework）是一個框子——指其約束性，也是一個架子——指其支撐性。是一個基本概念上的結(jié)構(gòu)，用于去解決或者處理復雜的問題。在交互設計中，框架是指將頁面依據(jù)交互行為區(qū)分層級，每層都具備特有特性和意義，讓所有層上的功能和內(nèi)容搭建出來的視圖結(jié)構(gòu)能符合用戶認知。

按照交互形式分為背景層、內(nèi)容層、全局控制層、臨時層、系統(tǒng)層。

1 .背景層

背景層固定樣式，永遠置于頁面底部，層的顏色為中立背景色，方便凸顯和聚焦內(nèi)容層。

2. 內(nèi)容層

視圖結(jié)構(gòu)中最核心和復雜的一層，主要承載當前場景的用戶需要獲取的核心信息以及輔助核心任務的操作?？芍萌胨薪M件，全局性的Footer等在交互層級上也屬于此層，內(nèi)容層的基本布局結(jié)構(gòu)有平行結(jié)構(gòu)（N欄）或者父子結(jié)構(gòu)。

3. 全局控制層

用于對整個網(wǎng)站的控制以及導航功能，展示環(huán)境和上下文位置。包括標題，工具欄，導航欄?？梢苑胖萌氚粹o，搜索，菜單，選擇器，標簽組件。

4. 臨時層

當前任務或者內(nèi)容相關(guān)的臨時出現(xiàn)層，優(yōu)先級高于內(nèi)容層，一般承載當前需要臨時處理的任務或者需要接受的反饋等。以窗體滑出或者彈出的形式在當前頁面場景化呈現(xiàn)，包括兩種類型模態(tài)：

• 內(nèi)容層不可操控，被蒙版遮罩禁用，比如需要較為聚焦的分支流程。
• 內(nèi)容層可以操作，比如輕量級的tips、反饋、新手引導等。反饋提醒的優(yōu)先級在此層中最高。對話框、提示、分支任務（如導航欄，當導航欄為縮起狀態(tài)時，屬于全局控制層，點擊展開時，屬于臨時層）。

2、如何框架布局

2.1、確定畫板大小

從統(tǒng)計數(shù)據(jù)來看，目前國內(nèi) PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實際上是處于中間位置，如果以它為基準設計，最終向上向下響應適配后，相對誤差最小，從而達成用戶體驗的最大公約數(shù)。

2.2、確定全局控制層布局

全局控制層布局根據(jù)頁面寬度有兩種設計方式：1) 全屏展示；2) 固定寬度 (在屏幕垂直中間選擇合適的區(qū)域)。任何一種設計方式都有通欄、兩欄、三欄等布局形式。

通欄

兩欄

三欄

2.3、確定內(nèi)容層布局

內(nèi)容層根據(jù)場景分為： 1）數(shù)據(jù)概覽，2）列表頁，3）表單頁，4）結(jié)果頁，5）異常頁。每種場景都有一種或多種布局方式。

數(shù)據(jù)概覽

列表頁

表單頁

結(jié)果頁

異常頁

2.4、確定臨時層布局

臨時層根據(jù)場景分為： 1）有蒙版遮罩，2）無蒙版遮罩。每種場景都有一種或多種布局方式。

有蒙版遮罩

無蒙版遮罩

3、框架布局的應用

框架布局的應用主要是根據(jù)確定的“全局控制層布局”+“內(nèi)容層布局”形成一個完整的頁面，設計師在進行設計時，對現(xiàn)有的內(nèi)容層布局中對各模塊內(nèi)容根據(jù)業(yè)務場景進行填充。

以上圖 “結(jié)果頁” 為例，設計師根據(jù)業(yè)務場景對 “結(jié)果反饋”、“結(jié)果解釋”、“建議操作”、“補充信息” 進行填充即可，其中 “建議操作”、“補充信息” 可以不補充。下圖為 “結(jié)果反饋” 和“補充信息” 場景的細化。

結(jié)果反饋

補充信息

「總結(jié)」

在一個項目中，涉及到多個設計師協(xié)同完成項目，由于每個設計師的使用的畫板不一定相同，建議 “統(tǒng)一畫板” 尺寸1440，根據(jù)框架中”全局控制層”、”內(nèi)容層”、”臨時層”各層布局進一步確定項目全局的布局，讓參與的設計師有了統(tǒng)一的頁面布局基礎(chǔ)，在根據(jù)不同的業(yè)務場景完成設計，最終不同設計師產(chǎn)出的設計在布局上將會高度統(tǒng)一。

如果你正在設計 0-1 項目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應式》對你有所幫助?。?！

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

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