2022-11-21 鶴鶴
寫在最前
B端界面的元素眾多，視窗范圍大，布局設計多種多樣，為了簡化布局思維，我們通常給界面添加三個方向上的軸-X、Y、Z。X軸指水平方向上的軸線，Y軸指豎直方向上的軸線，以及Z軸指在三維空間中垂直于視窗平面的軸線。當設計B端界面時，讓元素沿著這三個軸進行布局，既能理清我們的設計思路，頁面的元素也能展示得更有邏輯。
本文圍繞這三個軸，來看看在B端界面的三維空間里，都有哪些設計規律。
一、X軸的布局與適應
B端界面在PC視窗下展示，范圍更大，如常見的分辨率尺寸有1280x1024、1440x900、1920x1080等，且瀏覽器還支持動態拖拽改變視窗寬度。所以B端界面在X軸上應該更注重內容的延展和適配，合理利用橫向增長的空間。根據這一特點，在這一部分中，我們分業務場景來探討都有哪些典型布局，并針對每一種布局給出合適的適配方式。
B端典型的業務場景，可大致分為表格、圖表、表單、卡片、文字詳情五大類頁面。這幾類界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側導航，則在頁面最左側增加側導航即可，內容區的布局不受影響。
1.單欄型
表格、圖表，這類需要較大展示空間的場景，一般一個頁面只有一欄，不再在橫向空間進行切割。當視窗橫向拉伸時，也為了預覽更多的內容，表格和圖表進行橫向拉伸，保持撐滿視窗的狀態。
2.雙欄型
表單、文字詳情類的頁面，采用雙欄結構的概率較大。因為表單頁除了表單本身的內容外，往往還有右側的輔助說明面板，或者是預覽面板。文字詳情頁的右側也經常出現其它閱讀內容的推薦列表。當這兩類頁面視窗在橫向拉伸時，適應的方式通常有兩種。
1）主模塊寬度拉伸，始終撐滿視窗，副模塊寬度固定。如果主模塊每行內容都比較多，推薦使用這種方式，能更大化地瀏覽主模塊的內容，減少不必要的換行。但缺點是，由于內容本身如表單項、詳情文字等在X軸上占用的空間不多，他們所在的模塊橫向拉伸后，會出現很多留白。
2）各模塊保持寬度固定并居中展示，不跟隨視窗伸縮而變化。如果主模塊每行內容不多，又需要頻繁的左右對照，推薦使用這種方式。
3.多欄型
多欄型頁面一般用于數據看板、媒體卡片(視頻/圖片)的展示。因為這類業務場景，卡片數量多，無法簡單地將頁面進行區塊的分割，所以以卡片為單元來填充頁面。當視窗橫向拉伸時，這里也會出現2種適應的方式。
1）數據看板類頁面，每個卡片等比拉伸（也可僅橫向拉伸），列數不增加，讓圖表能展示地更清晰。
2）媒體卡類頁面，卡片需要設定一個最佳展示的寬度如w，當視窗拉寬時，卡片等比放大。當頁面拉寬到能增加一列寬度為w的卡片時，所有卡片寬度都恢復到w，增加一列。
上述說了這么多適配的規則，當然我們也可以給視窗設定一個統一的適配上限，避免當視窗非常寬時，頁面的元素過于左右分離，反而不方便瀏覽。比如我們可以設置當視窗寬度＞1920px后，頁面元素就不再跟隨撐滿，達到內容區寬度上限值，居中展示在界面中。
二、Y軸的空間利用
B端界面，面對復雜的信息，我們往往會面對兩類問題，如何承載大量的信息，如何區分強弱主次。這就涉及到頁面Y軸的空間利用了。這里我們提供4個小辦法來解決上面的問題。當出現大量信息時，應該注重Y軸空間的擴展，合理搭配翻頁、加載等邏輯。當希望對頁面元素區分強弱時，可以搭配滾動吸頂、局部折疊等交互，有序展示更多信息。
1.如何承載大量信息
1）替換型對于表格類頁面，為了方便快速查找所需信息，采用分頁器的方式展示更多的數據內容，即把當前頁內容做替換。即頁面Y軸的高度是固定的，僅做內容的變更。
2）向下延展型
對于瀑布流類頁面，由于數據量大，且沒有快速定位的訴求，使用無限加載的方式，向下加載更多的數據，這種類型的頁面Y軸可無限延展。
2.如何區分強弱主次
1）強-滾動吸頂當頁面滾動到某個位置，需要去強調一些導航性質的內容時，我們可以使用滾動吸頂的交互，即當把這個元素（如標題）滾動至當前視窗的頂部時，發生吸頂事件，始終停留在頁面中，該元素所引領的模塊在其下方滾動瀏覽。當把這個模塊滾動完，吸頂交互失效。這樣即能臨時性地強調某些內容，還不會影響其它模塊在Y軸上的展示。
2）弱-局部展開對于表單類頁面，若在某個選項下還存在二級內容，則在初始展示時，優先突出主選項本身，當選中后再展開二級內容。這樣即能節省首屏空間，也能順應使用者的學習、使用心智，在合適的時機展示細節內容。
三、Z軸的疊加順序
說完X軸、Y軸的布局設計，我們最后來看看Z軸。這里，我們需要把視角從二維平面轉為三維空間，比如吸頂的導航，菜單浮層，模態彈窗這些都屬于出現在Z軸上的元素，他們之間可以進行層層疊加和嵌套，于是會出現疊加沖突的場景，導致發生錯誤的遮擋現象。所以Z軸設計的關鍵點在于不同元素的疊加排序設計。那么怎樣才能有一個貫穿全局的合理排序，讓元素們能乖乖排在自己的隊列中呢？此處，我們將頁面的所有可能出現的元素按照Z軸的特點歸類到三大區間里。每個區間內給出相應元素的排序順序指導，并配合動態計算的邏輯，Z軸上的元素就能整齊地疊加起來啦。
1.基礎區間
a.展示類-頁面中默認就存在的、不會對其它元素造成遮擋的元素（表單、表格、文字、按鈕、圖表、圖片等）。
b.固定類-固定在頁面某處的元素，滑動頁面時會對a的元素產生遮擋（如吸頂導航、固定表頭/列、錨點、返回頂部按鈕等）。
c.浮層類-由a中的元素觸發出的、指向該元素的臨時浮層元素。會對a以及固定元素產生遮擋。臨時浮層之間的z軸層級遵守觸發的時間先后順序，若臨時浮層可以同時存在在界面中，則后觸發的層級更高（下拉浮層、氣泡）。
2.模態區間
d.模態層-由基礎區間的元素觸發的，覆蓋整個視窗的模態元素，當該元素出現后，至于基礎區間所有元素層級之上，基礎區間的所有功能無法交互(抽屜、對話框和全屏預覽等).
e.臨時浮層-在模態元素上出現的臨時浮層，計算高度時，可把d層想象成基礎區間的c層（下拉浮層、氣泡等）.
f.第二層模態層-在d出現之后出現的覆蓋整個視窗的模態元素。不特指第二層，也可以是第三、或更多。
模態區間內，多個模態層可進行疊加（即上文的f），疊加時一樣需要遵守觸發時間的先后順序，后觸發的層級更高出現在更上層。但是我們也應注意，模態層不能疊加太多，會導致當前頁面覆蓋過多內容，一般最多用到兩層模態層就能滿足大部分場景了。
3.頂層區間
g.全局層-全局的、不被模態元素遮擋的元素?？梢猿ｑv在頁面中，也可臨時出現。
h.臨時層-由g觸發出的臨時浮層
max.最高層-始終動態高于當前頁面所有層的元素（比較典型的是Toast組件）。
四、寫在最后
到這里，我們就淺談完關于B端界面的X、Y、Z軸上的設計特點了，雖然是一些高度抽象的內容，真正按照業務需求執行設計的時候，遇到的界面一定比我們這里談論的更復雜，但是只要我們清楚底層的空間布局、適應方式、擴展手段和疊加邏輯，再復雜的界面無非就是規則的嵌套，希望這篇文章能帶給大家一些小小的啟發。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。