因此我們需要全方面了解相關的布局框架理論。這有利于我們在定義復雜結構的Web界面時得心應手，做到統一化、規范化、可拓展及可快速迭代對于承載多個子產品的網站而言，單一的布局形式不能完全適用。

一、布局框架在設計中的重要性

在涉及數字媒體的屏幕布局時，我們需要將一些看似互不相干的元素和諧、有序的組織在一起，這是很有挑戰性的。

對設計師而言，熟練掌握知覺要素的格式塔理論、視覺要素的組織和結構及感覺要素的層級和秩序，并將這些方法論運用到布局設計的每一處，才能創建出該產品真正的布局基礎。

布局框架能幫助我們正確考慮產品的焦點，理性的傳達有效信息而不是感性的創意視覺表達。

布局框架能保證優質產品及良好的用戶體驗，方便用戶對界面的識別和使用習慣。

布局框架是產品的骨架和基礎。在框架確定之后，設計師才可進行下一步的構建——統一的視覺元素，清晰的功能操作，具體流程的交互等等。

二、布局框架的設計原則

了解布局框架設計的重要性后，我們再來認識一下布局框架的設計原則，分別為統一性、邏輯性、可擴展性、可預測性：

統一性——確保產品布局在結構和視覺的一致性，為用戶提供高度的舒適感

邏輯性——視覺中的各種分類構成具有邏輯思路，結構聯系緊密且通暢

可擴展性——無論產品功能是簡單還是復雜，布局框架能夠隨著產品需求的變化進行布局結構的延展和擴充

可預測性——選擇可預測和可識別的布局，并連接到體驗的每一個環境中且在適當的地方引導用戶

三、Web端的基礎模塊和分層邏輯

我們在進行布局框架設計前，先來熟悉一下Web端界面相關的基礎模塊和分層邏輯。

1.  基礎模塊

根據模塊自身屬性及功能定義，常見的模塊有九類，分別為頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。

2.  分層邏輯

基礎層為常置的的功能底層，是提供穩定性和可預測性、必不可少的層級，具體有頂部導航模塊、左側導航模塊等。

內容層可分為常置展示層，具體有主內容模塊、左右內容模塊等。

疊層為動態出現的功能頂層，始終疊加在基礎層及內容層上方，是鏈接上下體驗流程的模塊，具體有抽屜模塊、彈窗浮層模塊。

四、常用的基礎布局與擴展布局

本文主要梳理基礎層、內容層相關模塊所組合的布局框架。在查閱相關文章和書籍后，我們總結出了Web端三種基礎布局和五種擴展布局。

1.  上下布局

這種布局常用在Web端首頁，上半部分為導航或頁眉模塊，下半部分為主內容模塊。簡潔明快，干擾信息少。隨著屏幕、設備的不同，內容模塊可設計成固定寬度或橫跨整個頁面兩種視覺布局。

IBM Design首頁即采用上下布局，黑白視覺系的頂部導航及大面積的主要內容模塊展示圖使得頁面設計干凈清爽，有足夠強的視覺表現力。IBM設計師同時采了用響應式設計，控制好屏幕分辨率斷點，使該官網在任意設備下瀏覽都能達到好的用戶體驗。

2.左右布局

左右布局常出現在歐美國家的設計網站，視覺沖擊力強。

Atlassian Design統一采用了左右布局，頁面左邊為全局側邊導航模塊，其他 部分為主內容模塊。從交互體驗以及用色搭配等視覺層面分析，Atlassian整體 布局結構清晰有條理，用戶按照從左至右的視覺順序瀏覽并可快速理解內容，精美繪制的插圖更是讓網站充滿了吸引力。

3.“T”型布局

“T”型布局是Web端運用最廣泛的布局方式之一，因布局效果酷似英文字母“T”而得名。優點是頁面結構清晰，主次分明；缺點是規矩呆板，如果不注意視覺元素的合理運用及色彩細節，很容易讓人“看之無味”。

Ant Design是阿里螞蟻金服設計團隊打造的工具型網站，用來落地支付寶公司旗下產品的設計語言、代碼工具等等。Ant Design正是采用了此布局，作為基礎層，頂部全局導航承接了所有子庫入口的功能，內容區域再劃分成左側邊欄模塊及主內容模塊兩部分，此框架布局既能滿足人們的“F”型瀏覽習慣又能解決信息層級過多的問題。

4.“C”型布局1&2

“C”型布局是在“T”型布局上的擴展，增加的頁腳模塊可設置成基礎內容區域或功能操作區。根據基礎模塊的不同可分為兩種“C”型結構。

Audi.com是奧迪集團多年設計成果展示的Web端入口。在整體布局框架中，左側欄導航模塊被定義成基礎層，頁面右邊被分為三塊內容層模塊，分別為頁眉模塊（也就是頁面標題欄）、主內模塊板及頁腳模塊。設計風格時尚大氣，色彩、圖形元素的和諧搭配使得頁面布局錯落有致，在交互操作體驗方面，讓用戶做到真正的“don’t make me think”。

5.“口”型布局

這是一個象形的說法。頁面頂部為基礎層的導航模塊，中間為左、中、右三塊內容層模塊，底部再嵌套一個頁腳。這種布局的優點是充分利用版面特性可承載最多的信息及功能，缺點是頁面擁擠，不夠靈活。

Microsoft 作為業內老牌的互聯網公司，其官方網站承載了產品應用、設計、開發等多類子項目，而內容的復雜性使得微軟的設計師們在搭建此網站時考慮了“口”型布局。

6.綜合型布局1&2

綜合型布局是統稱，是擁有更多內容模塊的復雜布局。如何定義綜合性布局呢？大家可以依據網站自身的產品規劃及功能差異選擇合適的模塊數量，并定義各個模塊所在的位置及層次。如圖所示，我們定義的綜合性布局1只是比綜合性布局2多一個右內容面板。

以上是九種最常用的默認布局，通過基礎模塊以及分層邏輯可以相互組合、嵌套的方法，可以總結出更多的Web端布局框架并落地到項目中。

本文名稱：Web端布局框架的思考與設計
轉載源于：http://m.newbst.com/news38/62538.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、企業建站、響應式網站、外貿網站建設、網站制作、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯