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

01 什么是框架

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

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

1 .背景層

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

2. 內(nèi)容層

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

3. 全局控制層

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

4. 臨時(shí)層

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

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

2、如何框架布局

2.1、確定畫板大小

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

2.2、確定全局控制層布局

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

通欄

兩欄

三欄

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

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

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

列表頁

表單頁

結(jié)果頁

異常頁

2.4、確定臨時(shí)層布局

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

有蒙版遮罩

無蒙版遮罩

3、框架布局的應(yīng)用

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

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

結(jié)果反饋

補(bǔ)充信息

「總結(jié)」

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

如果你正在設(shè)計(jì) 0-1 項(xiàng)目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應(yīng)式》對你有所幫助?。。?/p>

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

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