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