還在苦惱如何搭建Web端佈局框架？來這裏找方法吧，CDX魔方項目組成員用血和淚的經驗告訴你答案。
前言
對於承載多個子產品的網站而言，單一的佈局形式不能完全適用，因此我們需要全方面瞭解相關的佈局框架理論。這有利於我們在定義複雜結構的Web界面時得心應手，做到統一化、規範化、可拓展及可快速迭代。
整篇文章分爲兩部分：
- 瞭解佈局框架要素。
- 項目沉澱：滴滴魔方網站佈局框架的構建與實現。
佈局框架要素
1. 佈局框架在設計中的重要性
在涉及數字媒體的屏幕布局時，我們需要將一些看似互不相干的元素和諧、有序的組織在一起，這是很有挑戰性的。
對設計師而言，熟練掌握知覺要素的格式塔理論、視覺要素的組織和結構及感覺要素的層級和秩序，並將這些方法論運用到佈局設計的每一處，才能創建出該產品真正的佈局基礎。
佈局框架能幫助我們正確考慮產品的焦點，理性的傳達有效信息而不是感性的創意視覺表達。
佈局框架能保證優質產品及良好的用戶體驗，方便用戶對界面的識別和使用習慣。
佈局框架是產品的骨架和基礎。在框架確定之後，設計師纔可進行下一步的構建——統一的視覺元素，清晰的功能操作，具體流程的交互等等。
2. 佈局框架的設計原則
瞭解佈局框架設計的重要性後，我們再來認識一下佈局框架的設計原則，分別爲統一性、邏輯性、可擴展性、可預測性。
- 統一性——確保產品佈局在結構和視覺的一致性，爲用戶提供高度的舒適感。
- 邏輯性——視覺中的各種分類構成具有邏輯思路，結構聯繫緊密且通暢。
- 可擴展性——無論產品功能是簡單還是複雜，佈局框架能夠隨着產品需求的變化進行佈局結構的延展和擴充。
- 可預測性——選擇可預測和可識別的佈局，並連接到體驗的每一個環境中且在適當的地方引導用戶。
3. Web端的基礎模塊和分層邏輯
我們在進行佈局框架設計前，先來熟悉一下Web端界面相關的基礎模塊和分層邏輯。
基礎模塊
根據模塊自身屬性及功能定義。常見的模塊有九類，分別爲頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。
分層邏輯
基礎層爲常置的功能底層，是提供穩定性和可預測性必不可少的層級，具體有頂部導航模塊、左側導航模塊等。
內容層可分爲常置展示層，具體有主內容模塊、左右內容模塊等。
疊層爲動態出現的功能頂層，始終疊加在基礎層及內容層上方，是鏈接上下體驗流程的模塊，具體有抽屜模塊、彈窗浮層模塊。
4. 常用的基礎佈局與擴展布局
本文主要梳理基礎層、內容層相關模塊所組合的佈局框架。在查閱相關文章和書籍後，我們總結出了Web端三種基礎佈局和五種擴展布局。
上下佈局
這種佈局常用在Web端首頁，上半部分爲導航或頁眉模塊，下半部分爲主內容模塊。簡潔明快，干擾信息少。隨着屏幕、設備的不同，內容模塊可設計成固定寬度或橫跨整個頁面兩種視覺佈局。
IBM Design首頁即採用上下佈局，黑白視覺系的頂部導航及大面積的主要內容模塊展示圖使得頁面設計乾淨清爽，有足夠強的視覺表現力。IBM設計師同時採用了響應式設計，控制好屏幕分辨率斷點，使該官網在任意設備下瀏覽都能達到最佳的用戶體驗。
左右佈局
左右佈局常出現在歐美國家的設計網站，視覺衝擊力強。
Atlassian Design統一採用了左右佈局，頁面左邊爲全局側邊導航模塊，其他部分爲主內容模塊。從交互體驗以及用色搭配等視覺層面分析，Atlassian整體佈局結構清晰有條理，用戶按照從左至右的視覺順序瀏覽並可快速理解內容，精美繪製的插圖更是讓網站充滿了吸引力。
「T」型佈局
「T」型佈局是Web端運用最廣泛的佈局方式之一，因佈局效果酷似英文字母「T」而得名。優點是頁面結構清晰，主次分明。缺點是規矩呆板，如果不注意視覺元素的合理運用及色彩細節，很容易讓人「看之無味」。
Ant Design是阿里螞蟻金服設計團隊打造的工具型網站，用來落地支付寶公司旗下產品的設計語言、代碼工具等等。Ant Design正是採用了此佈局，作爲基礎層，頂部全局導航承接了所有子庫入口的功能，內容區域再劃分成左側邊欄模塊及主內容模塊兩部分，此框架佈局既能滿足人們的「F」型瀏覽習慣又能解決信息層級過多的問題。
「C」型佈局1&2
「C」型佈局是在「T」型佈局上的擴展，增加的頁腳模塊可設置成基礎內容區域或功能操作區。根據基礎模塊的不同，可分爲兩種「C」型結構。
Audi.com是奧迪集團多年設計成果展示的Web端入口。在整體佈局框架中，左側欄導航模塊被定義成基礎層，頁面右邊被分爲三塊內容層模塊，分別爲頁眉模塊（也就是頁面標題欄）、主內容模塊及頁腳模塊。設計風格時尚大氣，色彩、圖形元素的和諧搭配使得頁面佈局錯落有致。在交互操作體驗方面，讓用戶做到真正的「don’t make me think」。
「口」型佈局
這是一個象形的說法。頁面頂部爲基礎層的導航模塊，中間爲左、中、右三塊內容層模塊，底部再嵌套一個頁腳。這種佈局的優點是充分利用版面特性可承載最多的信息及功能，缺點是頁面擁擠，不夠靈活。
Microsoft 作爲業內老牌的互聯網公司，其官方網站承載了產品應用、設計、開發等多類子項目，而內容的複雜性使得微軟的設計師們在搭建此網站時考慮了「口」型佈局。
綜合型佈局1&2
綜合型佈局是統稱，原理就是遵循分層邏輯並在九種基礎模塊中自由組合、嵌套，是在簡單的佈局基礎上有更多模塊疊加的複雜佈局。其差異就是佈局模塊之間的數量及模塊擺放的具體位置不同。我們定義的綜合性佈局1比綜合性佈局2多一個右內容面板。在此佈局中，最重要的基礎層通常爲左側欄導航模塊。綜合型佈局1&2根據網站自身的產品規劃及功能定義可刪減右內容模塊、頁腳等內容層模塊。
以上是九種最常用的默認佈局，通過基礎模塊以及分層邏輯可以相互組合、嵌套的方法，可以總結出更多的Web端佈局框架並落地到項目中。
魔方網站佈局的構建與實現
1. 項目背景
魔方是CDX創意設計中心發起的設計工具化平臺。項目初期規劃的子產品涉及了設計側及開發側，包含了設計資源庫、設計工具、設計板、組件代碼等多維度不同類別的產品。作爲最重要的多功能、多信息的載體，項目起步後，我們首先需要考慮的就是合理的佈局框架，爲將來高效、精準的表達和流暢的體驗做好基礎。
2. 項目分析與佈局定義
魔方項目前期做了以下幾個方向的分析與研究。
同類產品分析
在魔方還只是紙面信息框架的時候，我們分析了各大同類網站，梳理出相應佈局框架的特性和優缺點，也就有了本文上半部分的理論成果。
魔方產品分析
剛孵化的產品都會經歷從暗到明、從0到1的過程，魔方也不例外。最初產品形態並不清晰時，我們進行了多方面的自我分析。
- 第一步思考整個魔方的定位、產品模式、設計目標以及目標用戶會如何理解魔方、使用魔方。
- 第二步定義每一個子產品的項目目標，並分析其中展示信息內容及對應的功能需求。
- 第三步再以組件化設計的思維方式對基礎功能進行梳理、拆解分類、歸納重組。
魔方佈局的確定與總結
最終我們通過基礎模塊及分層邏輯相互組合嵌套的設計方法，使魔方佈局數量和佈局複雜程度被滿足。我們將可複用的功能模塊統一成基礎層，如全局一級導航模塊是爲承載了所有子產品頁面的入口。而需要單獨定義的功能模塊被劃分成子產品的特殊功能，並一一整合到對應的佈局模塊中，如規範庫中的電梯劃分成單獨的右內容模塊。
魔方網站採用了上下佈局、「T」型佈局及「口」型佈局。
魔方佈局的構成原則
在獲得這些成果後，我們再次迴歸到根本的佈局框架設計中，總結出以下構成原則：
- 組織原則——根據產品特性將功能點分解後重新劃分成組。
- 隱藏原則——突出佈局中的主要焦點信息並隱藏次要輔助信息。
- 接近原則——將臨近的元素歸類爲一個模式或整體。
- 熟悉原則——按照熟悉的認知，把複雜對象簡單化，變成規則圖形。
3. 視覺風格探索與總結
視覺風格探索
魔方的視覺風格與佈局框架是同步進行探索的。在這個過程中，我們一邊考慮整體佈局能否滿足魔方各個子產品，一邊思考視覺元素如何設計和呈現。從最基礎的品牌色定義、組件元素樣式，再到設計細節中字體的大小、按鈕在空間佈局上的佔比是否合理都要不斷打磨與調整，最後細化成最和諧統一的視覺方案。
魔方視覺的設計原則
在歷經了多輪方案稿產出、視覺評審後，魔方最終的視覺風格在佈局框架基礎上確定了。其中我們總結出幾點魔方網站視覺的設計原則：
- 視覺平衡——頁面信息要素的位置及分佈需要和諧穩定的平衡感。
- 空間舒適——整體頁面留白空間要均勻、視覺感知需要舒適、有親和力。
- 尺寸統一——不同頁面採用的版心要統一、不同組件大小要一致。
- 比例和諧——信息要素排布比例要合適，突出焦點信息，弱化輔助信息。
- 顏色感知——品牌顏色三原色要與滴滴出行有最強品牌鏈接及視覺感知，用色比例要均勻。
- 錯落有致——事物的佈局雖然參差不齊，但卻極有情趣，使人看了有好感。
4. 佈局框架的運用及落地
從2017年4月底至今，魔方已完成了平臺化的一期搭建，上線了滴滴資源庫中的圖庫和規範庫、設計工具SCO主頁、組建代碼等產品。
魔方上下佈局的運用
縱觀全局，魔方採用上下佈局方案。一級導航爲頁面中信息層級最重的組成部分，用色冷靜而有力的品牌黑加強了頁面的視覺重心，舒適的導航高度產生自然的視覺方向感，如此的全局一級導航能夠幫助用戶更便捷快速地抵達相應的子產品頁面。
在魔方圖庫列表頁中，二、三級導航相連一級全局導航爲完整的頂部導航模塊。在視覺表現方面，我們通過顏色的對比、陰影的距離與高度讓模塊之間具有「深度」的層次關係。白色的導航模塊在頂部，而內容模塊是在更低的層級，合理的頂部模塊陰影作爲必不可少的細節元素提升了頁面高度，這樣能讓導航模塊與內容模塊分離出來但又不會造成生硬的距離感。
魔方「口」型佈局的運用
魔方規範庫中採用的是「口」型佈局。爲了方便用戶在線閱讀滴滴出行相關的設計語言與規範，我們從交互角度建立了幾大塊功能模塊，如左側導航模塊，幫助用戶篩選相應的規範子頁面。右側內容模塊承載了快捷電梯導航。還有底部的頁腳模塊被規劃成上下頁跳轉功能按鈕區域。這樣清晰的視覺層級及功能結構能讓用戶更好更快獲取信息。
視覺層面，在滿足產品功能性和可用性的前提下，信息元素排布比例大小錯落有致，子頁面的大部分留白與輕鬆活波的品牌桔產生對比，塑造了簡潔有親和力的視覺美感。
總結
萬丈高樓平地起，回顧項目就像是蓋一座摩天大樓一樣，首先要搭建好地基框架後，再往上一層一層增磚添瓦，最後大樓才能又高又穩又好看。
在經歷了以上林林總總的認知與實踐後，我們充分了解佈局框架要素指南特性，將理論運用到實踐項目中，提供最佳的魔方設計方案，還能舉一反三將佈局框架理論應用到其他屏幕產品中。
本文中還有很多值得推敲和學習的地方，自己能想到悟到的也只是九牛一毛，希望能與大家多多交流和學習。
歡迎關注滴滴創意設計中心：
「這些web端設計總結，讓你的設計更加出彩」