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

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

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

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

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

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

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

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

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

圖片源自：Ant Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WPS的頁面采用的就是對稱平衡，使得頁面寧靜穩(wěn)重，安靜平和。

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

WPS頁面元素就是左對齊，頁面整體既整潔又易于閱讀。

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

參考間距：

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

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

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

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

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

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

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

B. 注重可用性和可訪問性

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

C. 優(yōu)化視覺設(shè)計和用戶體驗

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

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