頁(yè)面布局是B端系統(tǒng)搭建的第一步，有利于提升用戶(hù)體驗(yàn)，建立企業(yè)品牌形象。那么該如何搭建B端系統(tǒng)呢？一起來(lái)看看作者的分享吧。

頁(yè)面布局是web端系統(tǒng)的設(shè)計(jì)初始也是至關(guān)重要的一步。一個(gè)優(yōu)秀的頁(yè)面布局能夠提升用戶(hù)體驗(yàn)，提高工作效率，并有助于建立企業(yè)的品牌形象。

一、著手畫(huà)原型前，先把準(zhǔn)備工作理理清楚、確定好，清晰的思路會(huì)給后續(xù)的工作帶來(lái)便利

1. 明確需求和目標(biāo)

在系統(tǒng)設(shè)計(jì)之前，先明確需求背景、目標(biāo)。再了解需求、使用人群和使用場(chǎng)景。最后需要了解系統(tǒng)需要實(shí)現(xiàn)的功能和業(yè)務(wù)邏輯。有助于為頁(yè)面布局提供明確的指導(dǎo)，確保布局能夠滿(mǎn)足需求方的需求和目標(biāo)。

二、準(zhǔn)備工作做好了，可以開(kāi)始選擇頁(yè)面布局樣式了

在設(shè)計(jì)頁(yè)面布局時(shí)，需要確定頁(yè)面的基本結(jié)構(gòu)和元素。包括頁(yè)面的整體框架、導(dǎo)航欄、主內(nèi)容區(qū)域、側(cè)邊欄、頁(yè)腳等。確保這些元素在布局中的位置和大小合理，方便用戶(hù)快速找到所需的信息和功能。

常見(jiàn)的頁(yè)面布局有基本機(jī)構(gòu)、上中下布局、頂部-側(cè)邊布局、頂部-側(cè)邊布局-通欄、側(cè)邊布局、自定義觸發(fā)器、響應(yīng)式布局、固定頭部、固定側(cè)邊欄。

A.基本機(jī)構(gòu)：典型的頁(yè)面布局。分為左右對(duì)稱(chēng)結(jié)構(gòu)布局、“同”字型結(jié)構(gòu)布局、“回”字型結(jié)構(gòu)布局、“匡”字型結(jié)構(gòu)布局、自由式結(jié)構(gòu)布局、“另類(lèi)”結(jié)構(gòu)布局。

圖片源自：Ant Design

B.上中下布局：一般主導(dǎo)航放置于頁(yè)面的頂端，從左自右依次為logo、一級(jí)導(dǎo)航項(xiàng)、輔助菜單（用戶(hù)、設(shè)置、通知等）。通常將內(nèi)容放在固定尺寸（例如：1200px）內(nèi)，整個(gè)頁(yè)面排版穩(wěn)定，不受用戶(hù)終端顯示器影響；上下級(jí)的結(jié)構(gòu)符合用戶(hù)上下瀏覽的習(xí)慣，也是較為經(jīng)典的網(wǎng)站導(dǎo)航模式。頁(yè)面上下切分的方式提高了主工作區(qū)域的信息展示效率，但在縱向空間上會(huì)有一些犧牲。

此外，由于導(dǎo)航欄水平空間的限制，不適合那些一級(jí)導(dǎo)航項(xiàng)很多的信息結(jié)構(gòu)。

C.頂部-側(cè)邊布局：擁有頂部導(dǎo)航及側(cè)邊欄的頁(yè)面，多用于展示類(lèi)網(wǎng)站。

D.頂部-側(cè)邊布局-通欄：同樣擁有頂部導(dǎo)航及側(cè)邊欄，區(qū)別是兩邊未留邊距，多用于應(yīng)用型的網(wǎng)站。

E.側(cè)邊布局：側(cè)邊兩列式布局。頁(yè)面橫向空間有限時(shí)，側(cè)邊導(dǎo)航可收起。

側(cè)邊導(dǎo)航在頁(yè)面布局上采用的是左右的結(jié)構(gòu)，一般主導(dǎo)航放置于頁(yè)面的左側(cè)固定位置，輔助菜單放置于工作區(qū)頂部。內(nèi)容根據(jù)瀏覽器終端進(jìn)行自適應(yīng)，能提高橫向空間的使用率，但是整個(gè)頁(yè)面排版不穩(wěn)定。側(cè)邊導(dǎo)航的模式層級(jí)擴(kuò)展性強(qiáng)，一、二、三級(jí)導(dǎo)航項(xiàng)目可以更為順暢且具關(guān)聯(lián)性的被展示，同時(shí)側(cè)邊導(dǎo)航可以固定，使得用戶(hù)在操作和瀏覽中可以快速的定位和切換當(dāng)前位置，有很高的操作效率。但這類(lèi)導(dǎo)航橫向頁(yè)面內(nèi)容的空間會(huì)被犧牲一部分。

F.自定義觸發(fā)器：要使用自定義觸發(fā)器。

G.響應(yīng)式布局

H.固定頭部：一般用于固定頂部導(dǎo)航，方便頁(yè)面切換。

I.固定側(cè)邊欄：當(dāng)內(nèi)容較長(zhǎng)時(shí)，使用固定側(cè)邊欄可以提供更好的體驗(yàn)。

以上頁(yè)面布局的樣式選擇需根據(jù)需求方的需求和目標(biāo)抉擇。

三、頁(yè)面布局的樣式確定后，我們還需要設(shè)定頁(yè)面規(guī)則

1. 頁(yè)面布局的規(guī)則涉及整體設(shè)計(jì)、元素對(duì)比、均衡性、對(duì)齊、間距、層次結(jié)構(gòu)

下面我們就以WPS為例分析。

A.整體性：頁(yè)面上的不同元素能夠相互影響，形成一個(gè)有機(jī)聯(lián)系的整體。

WPS頁(yè)面中的按鈕、控件、色彩、icon、模塊的設(shè)計(jì)元素在整個(gè)頁(yè)面中保持了整體與統(tǒng)一性。

B.對(duì)比性：通過(guò)對(duì)比來(lái)突出頁(yè)面中重要的元素，創(chuàng)造出視覺(jué)趣味性，同時(shí)引導(dǎo)用戶(hù)的注意力。對(duì)比可以體現(xiàn)在色彩、字體字號(hào)、區(qū)塊面積大小等多個(gè)方面。

WPS將標(biāo)題加粗加大是為了區(qū)分層級(jí)及內(nèi)容，提示用戶(hù)該區(qū)域是什么內(nèi)容。當(dāng)前選中加色塊是為了區(qū)分當(dāng)前內(nèi)容。‘新建’按鈕加顏色是為了凸顯該按鈕功能，指引用戶(hù)操作。模塊的區(qū)分是將菜單、內(nèi)容區(qū)、工具區(qū)區(qū)分開(kāi)，以便用戶(hù)便易操作。

C.均衡性：頁(yè)面中的文字、形狀、色彩等元素應(yīng)達(dá)到視覺(jué)上的平衡。這包括對(duì)稱(chēng)平衡和不對(duì)稱(chēng)平衡，對(duì)稱(chēng)平衡可以使頁(yè)面顯得寧?kù)o穩(wěn)重，而不對(duì)稱(chēng)平衡則可以增加頁(yè)面的趣味性。

WPS的頁(yè)面采用的就是對(duì)稱(chēng)平衡，使得頁(yè)面寧?kù)o穩(wěn)重，安靜平和。

D.對(duì)齊：頁(yè)面元素應(yīng)按照某種方式對(duì)齊，如左對(duì)齊、右對(duì)齊或居中對(duì)齊。對(duì)齊可以使頁(yè)面更加整潔和易于閱讀。

WPS頁(yè)面元素就是左對(duì)齊，頁(yè)面整體既整潔又易于閱讀。

E.間距：元素之間的間距應(yīng)保持相等，避免頁(yè)面顯得混亂或擁擠。適當(dāng)?shù)拈g距可以使頁(yè)面更加均衡和易于瀏覽。

參考間距：

• 頂部導(dǎo)航（大部分系統(tǒng)）：一級(jí)導(dǎo)航高度64px，二級(jí)導(dǎo)航48px。
• 頂部導(dǎo)航（展示類(lèi)頁(yè)面）：一級(jí)導(dǎo)航高度80px，二級(jí)導(dǎo)航56px。
• 行間距：以字體大小的1.5-2倍為參考。（例：當(dāng)選用14px字體時(shí)，行間距：21px-28px)
• 段間距：以字體大小的2-2.5倍為參考。(例：當(dāng)選用14px字體時(shí)，段間距：28px-35px）

對(duì)于頁(yè)面設(shè)計(jì)，使用柵格布局能夠更好的規(guī)范頁(yè)面間距問(wèn)題。以8px為單位，間距為8、16、24、32等8的倍數(shù)進(jìn)行設(shè)計(jì)?？梢赃m用于不同尺寸的屏幕和分辨率造成的問(wèn)題。

F. 層次結(jié)構(gòu)：頁(yè)面元素應(yīng)按照某種層次結(jié)構(gòu)排列，以便用戶(hù)可以輕松地找到他們需要的信息。重要的元素應(yīng)放置在頁(yè)面的顯眼位置，如頂部或視覺(jué)中心。

WPS將復(fù)雜的操作區(qū)域進(jìn)行層次劃分，將重要的元素放在了視覺(jué)中心，以便用戶(hù)能夠輕松地找到它們。

四、頁(yè)面布局選好了，頁(yè)面規(guī)則設(shè)定好了，可以開(kāi)始填充需求內(nèi)容啦

A. 保持一致性和可預(yù)測(cè)性

一致的布局和元素樣式可以幫助用戶(hù)更快地熟悉和使用系統(tǒng)，降低學(xué)習(xí)成本。同時(shí)，遵循用戶(hù)的心理預(yù)期和習(xí)慣，使布局符合用戶(hù)的直覺(jué)和操作流程。

B. 注重可用性和可訪問(wèn)性

充分考慮可用性和可訪問(wèn)性。確保頁(yè)面元素易于識(shí)別和操作，避免過(guò)多的冗余和干擾。同時(shí)，關(guān)注不同設(shè)備和瀏覽器的兼容性，確保系統(tǒng)在各種環(huán)境下都能正常運(yùn)行。

C. 優(yōu)化視覺(jué)設(shè)計(jì)和用戶(hù)體驗(yàn)

視覺(jué)設(shè)計(jì)和用戶(hù)體驗(yàn)是頁(yè)面布局的重要組成部分。通過(guò)合理的配色、字體、圖標(biāo)和圖片等元素，提升頁(yè)面的美觀度和吸引力。同時(shí)，關(guān)注頁(yè)面的交互設(shè)計(jì)和反饋機(jī)制，提高用戶(hù)的操作體驗(yàn)和滿(mǎn)意度。

總結(jié)，從頁(yè)面布局開(kāi)始設(shè)計(jì)系統(tǒng)是一個(gè)復(fù)雜而關(guān)鍵的過(guò)程。前期對(duì)需求和目標(biāo)的把控，后期畫(huà)圖時(shí)的頁(yè)面布局、頁(yè)面設(shè)計(jì)規(guī)則等都是頁(yè)面設(shè)計(jì)的關(guān)鍵步驟，缺一不可。