通過(guò)定義框架各層中布局继谚，讓用戶快速的了解產(chǎn)品內(nèi)容及功能模塊的劃分奏路，以及產(chǎn)品在各個(gè)平臺(tái)的體驗(yàn)的一致性阔蛉。

本文主要圍繞什么是框架弃舒，如何框架布局，框架布局的應(yīng)用三個(gè)部分進(jìn)行闡述状原，在項(xiàng)目中提前定義好框架布局將有助于團(tuán)隊(duì)的設(shè)計(jì)師輸出頁(yè)面模塊高度統(tǒng)一的頁(yè)面聋呢，希望對(duì)正在了解布局知識(shí)的你有幫助！５咔削锰！

1、什么是框架

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

按照交互形式分為背景層饲宿、內(nèi)容層厦酬、全局控制層、臨時(shí)層瘫想、系統(tǒng)層仗阅； Z軸方向上離用戶越接近優(yōu)先級(jí)越高，層級(jí)的前后順序?yàn)楣梗R時(shí)層>全局控制層>內(nèi)容層>背景層减噪，順序不可更改。

·背景層

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

·內(nèi)容層

視圖結(jié)構(gòu)中最核心和復(fù)雜的一層朝卒，主要承載當(dāng)前場(chǎng)景的用戶需要獲取的核心信息以及輔助核心任務(wù)的操作±植海可置入所有組件抗斤，全局性的頁(yè)尾等在交互層級(jí)上也屬于此層囚企，內(nèi)容層的基本布局結(jié)構(gòu)有平行結(jié)構(gòu)（N欄）或者父子結(jié)構(gòu)。

·全局控制層

用于對(duì)整個(gè)網(wǎng)站的控制以及導(dǎo)航功能瑞眼，包括項(xiàng)目名稱(chēng)龙宏，工具欄，導(dǎo)航欄伤疙∫铮可以放置入按鈕，搜索徒像，菜單黍特，選擇器，標(biāo)簽組件厨姚。

·臨時(shí)層

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

1、內(nèi)容層不可操控拭抬，被蒙版遮罩禁用部默，比如需要較為聚焦的分支流程。

2造虎、內(nèi)容層可以操作傅蹂，比如輕量級(jí)的tips、反饋算凿、新手引導(dǎo)等份蝴。反饋提醒的優(yōu)先級(jí)在此層中最高。對(duì)話框氓轰、提示婚夫、分支任務(wù)（如導(dǎo)航欄，當(dāng)導(dǎo)航欄為縮起狀態(tài)時(shí)署鸡，屬于全局控制層案糙，點(diǎn)擊展開(kāi)時(shí)，屬于臨時(shí)層）靴庆。

2时捌、如何框架布局

2.1、確定畫(huà)板大小

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

2.2凡桥、確定全局控制層布局

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

通欄

兩欄

三欄

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

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

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

列表頁(yè)

表單頁(yè)

結(jié)果頁(yè)

異常頁(yè)

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

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

有蒙版遮罩

無(wú)蒙版遮罩

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

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

以上圖 "結(jié)果頁(yè)" 為例返敬，設(shè)計(jì)師根據(jù)業(yè)務(wù)場(chǎng)景對(duì) “結(jié)果反饋”遂庄、“結(jié)果解釋”、“建議操作”救赐、“補(bǔ)充信息” 進(jìn)行填充即可涧团，其中 “建議操作”、“補(bǔ)充信息” 可以不補(bǔ)充经磅。下圖為 “結(jié)果反饋” 和“補(bǔ)充信息” 場(chǎng)景的細(xì)化泌绣。

結(jié)果反饋

補(bǔ)充信息

「總結(jié)」

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

如果你正在設(shè)計(jì) 0-1 項(xiàng)目的，希望布局三部曲《框架布局》识樱、《柵格系統(tǒng)》嗤无、《響應(yīng)式》對(duì)你有所幫助！Ａ埂当犯！