一、布局原則：古登堡、尼爾森

二、結(jié)合B端產(chǎn)品和頁(yè)面分析

三、大廠布局設(shè)計(jì)規(guī)范分析

四、總結(jié)

一、布局原則

布局設(shè)計(jì)在設(shè)計(jì)的每個(gè)領(lǐng)域都有涉及，這里說(shuō)的不是設(shè)計(jì)中的布局四原則：親密、對(duì)齊、重復(fù)、對(duì)比（專(zhuān)業(yè)術(shù)語(yǔ)：格式塔原則），這是平面設(shè)計(jì)中常用的布局方式，我的理解就是排版。但B端的布局設(shè)計(jì)是不同的，每個(gè)企業(yè)或者產(chǎn)品的設(shè)計(jì)規(guī)范有各自不同的依據(jù)。

B端頁(yè)面布局最常用的原則我見(jiàn)過(guò)有兩種：古登堡原則和尼爾森F型視覺(jué)模型。下面是網(wǎng)上找的圖：

（1-侵權(quán)提刪：古登堡原則）

古登堡原則：閱讀引力是從上到下，從左到右，呈現(xiàn)Z字形移動(dòng)，而起點(diǎn)和終點(diǎn)會(huì)作為重點(diǎn)視覺(jué)記憶區(qū)，中間過(guò)程會(huì)輕掃作為次要視覺(jué)記憶區(qū)。左上和右下是用戶(hù)會(huì)比較容易關(guān)注和注意到的地方。

 

（2-侵權(quán)提刪：尼爾森F模型）

尼爾森F模型：我們?cè)诘谝淮斡^看頁(yè)面時(shí)，視線會(huì)呈 F的形狀關(guān)注頁(yè)面。先從頂部開(kāi)始從左到右水平移動(dòng)，目光再下移開(kāi)始從左到右觀察但是長(zhǎng)度會(huì)相對(duì)短些，以較短的長(zhǎng)度向下掃視，形成一個(gè) F形狀。

這兩個(gè)原則都是從用戶(hù)視覺(jué)角度分析，在按需帶入產(chǎn)品頁(yè)面設(shè)計(jì)的。沒(méi)法單純的說(shuō)哪個(gè)對(duì)哪個(gè)錯(cuò)，或者說(shuō)哪個(gè)更好。因?yàn)橐Y(jié)合產(chǎn)品屬性、信息結(jié)構(gòu)、及用戶(hù)心理等因素。

二、結(jié)合產(chǎn)品和頁(yè)面屬性分析

我們公司產(chǎn)品的列表頁(yè)面是參考古登堡原則制定的布局設(shè)計(jì)規(guī)范。這是一個(gè)運(yùn)維產(chǎn)品（我們通常稱(chēng)為SaaS：軟件即服務(wù)）-列表頁(yè)面的模板，可以看到大部分內(nèi)容被表格占據(jù)，且表格中的內(nèi)容是相似的。通過(guò)與騰訊藍(lán)鯨團(tuán)隊(duì)的溝通，最終確定這種布局的頁(yè)面用戶(hù)視角瀏覽流程是“Z”型的。

主要操作按鈕在左側(cè)的第一視角區(qū)，通常以“新建”等主要按鈕為主、“導(dǎo)出”或“批量操作”等次要按鈕為輔一同擺放。因?yàn)榱斜硗ǔＪ悄硞€(gè)任務(wù)的羅列，會(huì)把新建的入口也放在一起，一是為了方便用戶(hù)快速找到新建任務(wù)入口，二是為了讓信息結(jié)構(gòu)更聚攏。強(qiáng)休息區(qū)放搜索框。在不同場(chǎng)景下，按鈕和搜索框位置要視需求確定位置。在我們公司的大部分產(chǎn)品場(chǎng)景下，按鈕是在左側(cè)。最終落腳點(diǎn)是在操作字段（表頭屬性，技術(shù)角度稱(chēng)為字段）。

 

彈窗的布局也是類(lèi)似的，很容易可以判斷出標(biāo)題和確定、取消按鈕是兩個(gè)視角落腳點(diǎn)。

 

當(dāng)然不是所有頁(yè)面都遵循古登堡原則，像下面的表單頁(yè)面就是使用F模型。因?yàn)樽钪饕畔?biāo)題都在左側(cè)，且信息流是集中往下走，并不分散也不需要橫向跨度很大。所以使用尼爾森F模型就可以支持布局走勢(shì)。

 

三、大廠布局設(shè)計(jì)規(guī)范

這里以騰訊Magic Box VUE組件庫(kù)和阿里AntDesign來(lái)分析我個(gè)人的理解：

 

這是從antdesign官網(wǎng)找到的信息復(fù)雜度和相關(guān)性模型，選用相應(yīng)的信息呈現(xiàn)方式，選用合理的布局方案來(lái)承載詳情頁(yè)的內(nèi)容。這應(yīng)該是阿里內(nèi)部自己建立的布局規(guī)范，既不符合古登堡原則，也不適應(yīng)尼爾森F模型。但從地下不同頁(yè)面內(nèi)容的分布來(lái)看，我覺(jué)得是把這兩種模型結(jié)合了。請(qǐng)看下圖：

 

古登堡原則注重左上角和右下角的內(nèi)容。尼爾森F模型是只注重左側(cè)內(nèi)容，這種布局方式通常是信息量比較大時(shí)用的比較多。我們把頁(yè)面的內(nèi)容拆開(kāi)看就可以分析出，每個(gè)模塊也是可以分成不同模型的結(jié)合。

 

騰訊Magic Box的布局規(guī)范就是前面我們公司用的是一樣的，就不多分析了。

四、總結(jié)

通常：信息流頁(yè)面使用尼爾森F模型。需要用戶(hù)操作頁(yè)面的則常常把古登堡和F模型結(jié)合使用，具體使用哪種看兩個(gè)：1、用戶(hù)在頁(yè)面的常用操作是什么，2、你想或者說(shuō)是產(chǎn)品想傳遞給用戶(hù)的信息是什么。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷  作者：lq934731638

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)