2021-7-7 ui設(shè)計分享達(dá)人
一、布局原則：古登堡、尼爾森
二、結(jié)合B端產(chǎn)品和頁面分析
三、大廠布局設(shè)計規(guī)范分析
四、總結(jié)
一、布局原則
布局設(shè)計在設(shè)計的每個領(lǐng)域都有涉及，這里說的不是設(shè)計中的布局四原則：親密、對齊、重復(fù)、對比（專業(yè)術(shù)語：格式塔原則），這是平面設(shè)計中常用的布局方式，我的理解就是排版。但B端的布局設(shè)計是不同的，每個企業(yè)或者產(chǎn)品的設(shè)計規(guī)范有各自不同的依據(jù)。
B端頁面布局最常用的原則我見過有兩種：古登堡原則和尼爾森F型視覺模型。下面是網(wǎng)上找的圖：
（1-侵權(quán)提刪：古登堡原則）
古登堡原則：閱讀引力是從上到下，從左到右，呈現(xiàn)Z字形移動，而起點和終點會作為重點視覺記憶區(qū)，中間過程會輕掃作為次要視覺記憶區(qū)。左上和右下是用戶會比較容易關(guān)注和注意到的地方。
（2-侵權(quán)提刪：尼爾森F模型）
尼爾森F模型：我們在第一次觀看頁面時，視線會呈 F的形狀關(guān)注頁面。先從頂部開始從左到右水平移動，目光再下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個 F形狀。
這兩個原則都是從用戶視覺角度分析，在按需帶入產(chǎn)品頁面設(shè)計的。沒法單純的說哪個對哪個錯，或者說哪個更好。因為要結(jié)合產(chǎn)品屬性、信息結(jié)構(gòu)、及用戶心理等因素。
二、結(jié)合產(chǎn)品和頁面屬性分析
我們公司產(chǎn)品的列表頁面是參考古登堡原則制定的布局設(shè)計規(guī)范。這是一個運維產(chǎn)品（我們通常稱為SaaS：軟件即服務(wù)）-列表頁面的模板，可以看到大部分內(nèi)容被表格占據(jù)，且表格中的內(nèi)容是相似的。通過與騰訊藍(lán)鯨團隊的溝通，最終確定這種布局的頁面用戶視角瀏覽流程是“Z”型的。
主要操作按鈕在左側(cè)的第一視角區(qū)，通常以“新建”等主要按鈕為主、“導(dǎo)出”或“批量操作”等次要按鈕為輔一同擺放。因為列表通常是某個任務(wù)的羅列，會把新建的入口也放在一起，一是為了方便用戶快速找到新建任務(wù)入口，二是為了讓信息結(jié)構(gòu)更聚攏。強休息區(qū)放搜索框。在不同場景下，按鈕和搜索框位置要視需求確定位置。在我們公司的大部分產(chǎn)品場景下，按鈕是在左側(cè)。最終落腳點是在操作字段（表頭屬性，技術(shù)角度稱為字段）。
彈窗的布局也是類似的，很容易可以判斷出標(biāo)題和確定、取消按鈕是兩個視角落腳點。
當(dāng)然不是所有頁面都遵循古登堡原則，像下面的表單頁面就是使用F模型。因為最主要信息標(biāo)題都在左側(cè)，且信息流是集中往下走，并不分散也不需要橫向跨度很大。所以使用尼爾森F模型就可以支持布局走勢。
三、大廠布局設(shè)計規(guī)范
這里以騰訊Magic Box VUE組件庫和阿里AntDesign來分析我個人的理解：
這是從antdesign官網(wǎng)找到的信息復(fù)雜度和相關(guān)性模型，選用相應(yīng)的信息呈現(xiàn)方式，選用合理的布局方案來承載詳情頁的內(nèi)容。這應(yīng)該是阿里內(nèi)部自己建立的布局規(guī)范，既不符合古登堡原則，也不適應(yīng)尼爾森F模型。但從地下不同頁面內(nèi)容的分布來看，我覺得是把這兩種模型結(jié)合了。請看下圖：
古登堡原則注重左上角和右下角的內(nèi)容。尼爾森F模型是只注重左側(cè)內(nèi)容，這種布局方式通常是信息量比較大時用的比較多。我們把頁面的內(nèi)容拆開看就可以分析出，每個模塊也是可以分成不同模型的結(jié)合。
騰訊Magic Box的布局規(guī)范就是前面我們公司用的是一樣的，就不多分析了。
四、總結(jié)
通常：信息流頁面使用尼爾森F模型。需要用戶操作頁面的則常常把古登堡和F模型結(jié)合使用，具體使用哪種看兩個：1、用戶在頁面的常用操作是什么，2、你想或者說是產(chǎn)品想傳遞給用戶的信息是什么。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn