UXD筆記 · 百度MEUX合作自媒體

寫在最前

B端界面的元素眾多，視窗范圍大，布局設(shè)計(jì)多種多樣，為了簡(jiǎn)化布局思維，我們通常給界面添加三個(gè)方向上的軸-X、Y、Z：

X軸：指水平方向上的軸線；

Y軸：指豎直方向上的軸線；

Z軸：指在三維空間中垂直于視窗平面的軸線。

當(dāng)設(shè)計(jì)B端界面時(shí)，讓元素沿著這三個(gè)軸進(jìn)行布局，既能理清我們的設(shè)計(jì)思路，頁(yè)面的元素也能展示得更有邏輯。

本文圍繞這三個(gè)軸，來(lái)看看在B端界面的三維空間里，都有哪些設(shè)計(jì)規(guī)律。

一、X軸的布局與適應(yīng)

B端界面在PC視窗下展示，范圍更大，如常見(jiàn)的分辨率尺寸有1280x1024、1440x900、1920x1080等，且瀏覽器還支持動(dòng)態(tài)拖拽改變視窗寬度。

所以B端界面在X軸上應(yīng)該更注重內(nèi)容的延展和適配，合理利用橫向增長(zhǎng)的空間。根據(jù)這一特點(diǎn)，在這一部分中，我們分業(yè)務(wù)場(chǎng)景來(lái)探討都有哪些典型布局，并針對(duì)每一種布局給出合適的適配方式。

B端典型的業(yè)務(wù)場(chǎng)景，可大致分為表格、圖表、表單、卡片、文字詳情五大類頁(yè)面。這幾類界面在X軸上排列的方式為單欄型、雙欄型、多欄型。如果有側(cè)導(dǎo)航，則在頁(yè)面最左側(cè)增加側(cè)導(dǎo)航即可，內(nèi)容區(qū)的布局不受影響。

1.單欄型

表格、圖表，這類需要較大展示空間的場(chǎng)景，一般一個(gè)頁(yè)面只有一欄，不再在橫向空間進(jìn)行切割。當(dāng)視窗橫向拉伸時(shí)，也為了預(yù)覽更多的內(nèi)容，表格和圖表進(jìn)行橫向拉伸，保持撐滿視窗的狀態(tài)。

2.雙欄型

表單、文字詳情類的頁(yè)面，采用雙欄結(jié)構(gòu)的概率較大。因?yàn)楸韱雾?yè)除了表單本身的內(nèi)容外，往往還有右側(cè)的輔助說(shuō)明面板，或者是預(yù)覽面板。文字詳情頁(yè)的右側(cè)也經(jīng)常出現(xiàn)其它閱讀內(nèi)容的推薦列表。

當(dāng)這兩類頁(yè)面視窗在橫向拉伸時(shí)，適應(yīng)的方式通常有以下兩種。

1）主模塊寬度拉伸，始終撐滿視窗，副模塊寬度固定

如果主模塊每行內(nèi)容都比較多，推薦使用這種方式，能更大化地瀏覽主模塊的內(nèi)容，減少不必要的換行。但缺點(diǎn)是，由于內(nèi)容本身如表單項(xiàng)、詳情文字等在X軸上占用的空間不多，他們所在的模塊橫向拉伸后，會(huì)出現(xiàn)很多留白。

【1】先設(shè)為??星標(biāo)，然后回復(fù)“金山”，領(lǐng)金山云設(shè)計(jì)規(guī)范源文件組件庫(kù)（Sketch+Axure）+B端后臺(tái)設(shè)計(jì)模板+移動(dòng)端組件庫(kù)+UX度量工具模板。

【2】先設(shè)為??星標(biāo)，然后回復(fù)“資源”，獲取海量精選UXD學(xué)習(xí)資料和設(shè)計(jì)模板領(lǐng)取方式，搶UX高端資源群終身入群名額！

2）各模塊保持寬度固定并居中展示，不跟隨視窗伸縮而變化

如果主模塊每行內(nèi)容不多，又需要頻繁的左右對(duì)照，推薦使用這種方式。 

3.多欄型

多欄型頁(yè)面一般用于數(shù)據(jù)看板、媒體卡片(視頻/圖片)的展示。因?yàn)檫@類業(yè)務(wù)場(chǎng)景，卡片數(shù)量多，無(wú)法簡(jiǎn)單地將頁(yè)面進(jìn)行區(qū)塊的分割，所以以卡片為單元來(lái)填充頁(yè)面。

當(dāng)視窗橫向拉伸時(shí)，這里也會(huì)出現(xiàn)2種適應(yīng)的方式：

1）數(shù)據(jù)看板類頁(yè)面

每個(gè)卡片等比拉伸（也可僅橫向拉伸），列數(shù)不增加，讓圖表能展示地更清晰。

2）媒體卡類頁(yè)面

卡片需要設(shè)定一個(gè)最佳展示的寬度如w，當(dāng)視窗拉寬時(shí)，卡片等比放大。當(dāng)頁(yè)面拉寬到能增加一列寬度為w的卡片時(shí)，所有卡片寬度都恢復(fù)到w，增加一列。

上述說(shuō)了這么多適配的規(guī)則，當(dāng)然我們也可以給視窗設(shè)定一個(gè)統(tǒng)一的適配上限，避免當(dāng)視窗非常寬時(shí)，頁(yè)面的元素過(guò)于左右分離，反而不方便瀏覽。

比如我們可以設(shè)置當(dāng)視窗寬度＞1920px后，頁(yè)面元素就不再跟隨撐滿，達(dá)到內(nèi)容區(qū)寬度上限值，居中展示在界面中。

二、Y軸的空間利用

B端界面，面對(duì)復(fù)雜的信息，我們往往會(huì)面對(duì)兩類問(wèn)題，如何承載大量的信息，如何區(qū)分強(qiáng)弱主次。這就涉及到頁(yè)面Y軸的空間利用了。這里我們提供4個(gè)小辦法來(lái)解決上面的問(wèn)題。

當(dāng)出現(xiàn)大量信息時(shí)，應(yīng)該注重Y軸空間的擴(kuò)展，合理搭配翻頁(yè)、加載等邏輯。當(dāng)希望對(duì)頁(yè)面元素區(qū)分強(qiáng)弱時(shí)，可以搭配滾動(dòng)吸頂、局部折疊等交互，有序展示更多信息。

1.如何承載大量信息

1）替換型

對(duì)于表格類頁(yè)面，為了方便快速查找所需信息，采用分頁(yè)器的方式展示更多的數(shù)據(jù)內(nèi)容，即把當(dāng)前頁(yè)內(nèi)容做替換。即頁(yè)面Y軸的高度是固定的，僅做內(nèi)容的變更。

2）向下延展型

對(duì)于瀑布流類頁(yè)面，由于數(shù)據(jù)量大，且沒(méi)有快速定位的訴求，使用無(wú)限加載的方式，向下加載更多的數(shù)據(jù)，這種類型的頁(yè)面Y軸可無(wú)限延展。

2.如何區(qū)分強(qiáng)弱主次

1）強(qiáng)-滾動(dòng)吸頂

當(dāng)頁(yè)面滾動(dòng)到某個(gè)位置，需要去強(qiáng)調(diào)一些導(dǎo)航性質(zhì)的內(nèi)容時(shí)，我們可以使用滾動(dòng)吸頂?shù)慕换?/span>，即當(dāng)把這個(gè)元素（如標(biāo)題）滾動(dòng)至當(dāng)前視窗的頂部時(shí)，發(fā)生吸頂事件，始終停留在頁(yè)面中，該元素所引領(lǐng)的模塊在其下方滾動(dòng)瀏覽。

當(dāng)把這個(gè)模塊滾動(dòng)完，吸頂交互失效。這樣即能臨時(shí)性地強(qiáng)調(diào)某些內(nèi)容，還不會(huì)影響其它模塊在Y軸上的展示。

2）弱-局部展開(kāi)

對(duì)于表單類頁(yè)面，若在某個(gè)選項(xiàng)下還存在二級(jí)內(nèi)容，則在初始展示時(shí)，優(yōu)先突出主選項(xiàng)本身，當(dāng)選中后再展開(kāi)二級(jí)內(nèi)容。這樣即能節(jié)省首屏空間，也能順應(yīng)使用者的學(xué)習(xí)、使用心智，在合適的時(shí)機(jī)展示細(xì)節(jié)內(nèi)容。

三、Z軸的疊加順序

說(shuō)完X軸、Y軸的布局設(shè)計(jì)，我們最后來(lái)看看Z軸。這里，我們需要把視角從二維平面轉(zhuǎn)為三維空間，比如吸頂?shù)膶?dǎo)航，菜單浮層，模態(tài)彈窗這些都屬于出現(xiàn)在Z軸上的元素，他們之間可以進(jìn)行層層疊加和嵌套，于是會(huì)出現(xiàn)疊加沖突的場(chǎng)景，導(dǎo)致發(fā)生錯(cuò)誤的遮擋現(xiàn)象。

所以Z軸設(shè)計(jì)的關(guān)鍵點(diǎn)在于不同元素的疊加排序設(shè)計(jì)。那么怎樣才能有一個(gè)貫穿全局的合理排序，讓元素們能乖乖排在自己的隊(duì)列中呢？

此處，我們將頁(yè)面的所有可能出現(xiàn)的元素按照Z(yǔ)軸的特點(diǎn)歸類到三大區(qū)間里。每個(gè)區(qū)間內(nèi)給出相應(yīng)元素的排序順序指導(dǎo)，并配合動(dòng)態(tài)計(jì)算的邏輯，Z軸上的元素就能整齊地疊加起來(lái)啦。

1.基礎(chǔ)區(qū)間

a.展示類

頁(yè)面中默認(rèn)就存在的、不會(huì)對(duì)其它元素造成遮擋的元素（表單、表格、文字、按鈕、圖表、圖片等）。

b.固定類

固定在頁(yè)面某處的元素，滑動(dòng)頁(yè)面時(shí)會(huì)對(duì)a的元素產(chǎn)生遮擋（如吸頂導(dǎo)航、固定表頭/列、錨點(diǎn)、返回頂部按鈕等）。

c.浮層類

由a中的元素觸發(fā)出的、指向該元素的臨時(shí)浮層元素。會(huì)對(duì)a以及固定元素產(chǎn)生遮擋。臨時(shí)浮層之間的z軸層級(jí)遵守觸發(fā)的時(shí)間先后順序，若臨時(shí)浮層可以同時(shí)存在在界面中，則后觸發(fā)的層級(jí)更高（下拉浮層、氣泡）。

2.模態(tài)區(qū)間

d.模態(tài)層

由基礎(chǔ)區(qū)間的元素觸發(fā)的，覆蓋整個(gè)視窗的模態(tài)元素，當(dāng)該元素出現(xiàn)后，至于基礎(chǔ)區(qū)間所有元素層級(jí)之上，基礎(chǔ)區(qū)間的所有功能無(wú)法交互。(抽屜、對(duì)話框和全屏預(yù)覽等)

e.臨時(shí)浮層

在模態(tài)元素上出現(xiàn)的臨時(shí)浮層，計(jì)算高度時(shí)，可把d層想象成基礎(chǔ)區(qū)間的c層。（下拉浮層、氣泡等）

f.第二層模態(tài)層

在d出現(xiàn)之后出現(xiàn)的覆蓋整個(gè)視窗的模態(tài)元素。不特指第二層，也可以是第三、或更多。

模態(tài)區(qū)間內(nèi)，多個(gè)模態(tài)層可進(jìn)行疊加（即上文的f），疊加時(shí)一樣需要遵守觸發(fā)時(shí)間的先后順序，后觸發(fā)的層級(jí)更高出現(xiàn)在更上層。但是我們也應(yīng)注意，模態(tài)層不能疊加太多，會(huì)導(dǎo)致當(dāng)前頁(yè)面覆蓋過(guò)多內(nèi)容，一般最多用到兩層模態(tài)層就能滿足大部分場(chǎng)景了。

3.頂層區(qū)間

g.全局層

全局的、不被模態(tài)元素遮擋的元素。可以常駐在頁(yè)面中，也可臨時(shí)出現(xiàn)。

h.臨時(shí)層

由g觸發(fā)出的臨時(shí)浮層

max.最高層

始終動(dòng)態(tài)高于當(dāng)前頁(yè)面所有層的元素（比較典型的是Toast組件）。

四、寫在最后

到這里，我們就淺談完關(guān)于B端界面的X、Y、Z軸上的設(shè)計(jì)特點(diǎn)了，雖然是一些高度抽象的內(nèi)容，真正按照業(yè)務(wù)需求執(zhí)行設(shè)計(jì)的時(shí)候，遇到的界面一定比我們這里談?wù)摰母鼜?fù)雜。

但是只要我們清楚底層的空間布局、適應(yīng)方式、擴(kuò)展手段和疊加邏輯，再?gòu)?fù)雜的界面無(wú)非就是規(guī)則的嵌套，希望這篇文章能帶給大家一些小小的啟發(fā)。

????如何領(lǐng)取本期讀者資源？先將“UXD筆記”公眾號(hào)設(shè)為??星標(biāo)，然后在后臺(tái)回復(fù)以下關(guān)鍵詞，即可實(shí)現(xiàn)無(wú)套路領(lǐng)取。

與74670位讀者一起成長(zhǎng)

因公眾號(hào)消息推送機(jī)制改版，

多點(diǎn)“在看、分享”會(huì)優(yōu)先推送給你