2. 分層邏輯

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

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

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

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

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

1. 上下布局

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

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

2.左右布局

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

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