交互規(guī)范:框架布局讓頁(yè)面模塊更統(tǒng)一
通過(guò)定義框架各層中布局,讓用戶(hù)快速的了解產(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í)的你有幫助?。?!
01 什么是框架
從建筑學(xué)的角度看,框架(framework)是一個(gè)框子——指其約束性,也是一個(gè)架子——指其支撐性。是一個(gè)基本概念上的結(jié)構(gòu),用于去解決或者處理復(fù)雜的問(wèn)題。在交互設(shè)計(jì)中,框架是指將頁(yè)面依據(jù)交互行為區(qū)分層級(jí),每層都具備特有特性和意義,讓所有層上的功能和內(nèi)容搭建出來(lái)的視圖結(jié)構(gòu)能符合用戶(hù)認(rèn)知。
按照交互形式分為背景層、內(nèi)容層、全局控制層、臨時(shí)層、系統(tǒng)層。
1 .背景層
背景層固定樣式,永遠(yuǎn)置于頁(yè)面底部,層的顏色為中立背景色,方便凸顯和聚焦內(nèi)容層。
2. 內(nèi)容層
視圖結(jié)構(gòu)中最核心和復(fù)雜的一層,主要承載當(dāng)前場(chǎng)景的用戶(hù)需要獲取的核心信息以及輔助核心任務(wù)的操作??芍萌胨薪M件,全局性的Footer等在交互層級(jí)上也屬于此層,內(nèi)容層的基本布局結(jié)構(gòu)有平行結(jié)構(gòu)(N欄)或者父子結(jié)構(gòu)。
3. 全局控制層
用于對(duì)整個(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)先級(jí)高于內(nèi)容層,一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要接受的反饋等。以窗體滑出或者彈出的形式在當(dāng)前頁(yè)面場(chǎng)景化呈現(xiàn),包括兩種類(lèi)型模態(tài):
- 內(nèi)容層不可操控,被蒙版遮罩禁用,比如需要較為聚焦的分支流程。
- 內(nèi)容層可以操作,比如輕量級(jí)的tips、反饋、新手引導(dǎo)等。反饋提醒的優(yōu)先級(jí)在此層中最高。對(duì)話(huà)框、提示、分支任務(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端用戶(hù)屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900;1440的尺寸實(shí)際上是處于中間位置,如果以它為基準(zhǔn)設(shè)計(jì),最終向上向下響應(yīng)適配后,相對(duì)誤差最小,從而達(dá)成用戶(hù)體驗(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ì)你有所幫助!??!
本文由 @前行的大熊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
mark
分析的很很不錯(cuò) ??