Web端布局框架你了(le)解多(duō)少？

作者：龍 時(shí)間：2018-07-30 浏覽：

1. 布局框架在設計中的(de)重要性

在涉及數字媒體的(de)屏幕布局時(shí)，我們需要将一些看似互不相幹的(de)元素和(hé)諧、有序的(de)組織在一起，這(zhè)是很有挑戰性的(de)。

對(duì)設計師而言，熟練掌握知覺要素的(de)格式塔理(lǐ)論、視覺要素的(de)組織和(hé)結構及感覺要素的(de)層級和(hé)秩序，并将這(zhè)些方法論運用(yòng)到布局設計的(de)每一處，才能創建出該産品真正的(de)布局基礎。

布局框架能幫助我們正确考慮産品的(de)焦點，理(lǐ)性的(de)傳達有效信息而不是感性的(de)創意視覺表達。

布局框架能保證優質産品及良好的(de)用(yòng)戶體驗，方便用(yòng)戶對(duì)界面的(de)識别和(hé)使用(yòng)習(xí)慣。

布局框架是産品的(de)骨架和(hé)基礎。在框架确定之後，設計師才可(kě)進行下(xià)一步的(de)構建——統一的(de)視覺元素，清晰的(de)功能操作，具體流程的(de)交互等等。

2. 布局框架的(de)設計原則

了(le)解布局框架設計的(de)重要性後，我們再來(lái)認識一下(xià)布局框架的(de)設計原則，分(fēn)别爲統一性、邏輯性、可(kě)擴展性、可(kě)預測性。

• 統一性——确保産品布局在結構和(hé)視覺的(de)一緻性，爲用(yòng)戶提供高(gāo)度的(de)舒适感。
• 邏輯性——視覺中的(de)各種分(fēn)類構成具有邏輯思路，結構聯系緊密且通(tōng)暢。
• 可(kě)擴展性——無論産品功能是簡單還(hái)是複雜(zá)，布局框架能夠随著(zhe)産品需求的(de)變化(huà)進行布局結構的(de)延展和(hé)擴充。
• 可(kě)預測性——選擇可(kě)預測和(hé)可(kě)識别的(de)布局，并連接到體驗的(de)每一個(gè)環境中且在适當的(de)地方引導用(yòng)戶。

3. Web端的(de)基礎模塊和(hé)分(fēn)層邏輯

我們在進行布局框架設計前，先來(lái)熟悉一下(xià)Web端界面相關的(de)基礎模塊和(hé)分(fēn)層邏輯。

基礎模塊

根據模塊自身屬性及功能定義。常見的(de)模塊有九類，分(fēn)别爲頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主内容模塊、左内容模塊、右内容模塊、抽屜模塊、彈窗(chuāng)模塊。

分(fēn)層邏輯

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

内容層可(kě)分(fēn)爲常置展示層，具體有主内容模塊、左右内容模塊等。

疊層爲動态出現的(de)功能頂層，始終疊加在基礎層及内容層上方，是鏈接上下(xià)體驗流程的(de)模塊，具體有抽屜模塊、彈窗(chuāng)浮層模塊。

4. 常用(yòng)的(de)基礎布局與擴展布局

本文主要梳理(lǐ)基礎層、内容層相關模塊所組合的(de)布局框架。在查閱相關文章(zhāng)和(hé)書(shū)籍後，我們總結出了(le)Web端三種基礎布局和(hé)五種擴展布局。

上下(xià)布局

這(zhè)種布局常用(yòng)在Web端首頁，上半部分(fēn)爲導航或頁眉模塊，下(xià)半部分(fēn)爲主内容模塊。簡潔明(míng)快(kuài)，幹擾信息少。随著(zhe)屏幕、設備的(de)不同，内容模塊可(kě)設計成固定寬度或橫跨整個(gè)頁面兩種視覺布局。

IBM Design首頁即采用(yòng)上下(xià)布局，黑(hēi)白視覺系的(de)頂部導航及大(dà)面積的(de)主要内容模塊展示圖使得(de)頁面設計幹淨清爽，有足夠強的(de)視覺表現力。IBM設計師同時(shí)采用(yòng)了(le)響應式設計，控制好屏幕分(fēn)辨率斷點，使該官網在任意設備下(xià)浏覽都能達到最佳的(de)用(yòng)戶體驗。

左右布局

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

Atlassian Design統一采用(yòng)了(le)左右布局，頁面左邊爲全局側邊導航模塊，其他(tā)部分(fēn)爲主内容模塊。從交互體驗以及用(yòng)色搭配等視覺層面分(fēn)析，Atlassian整體布局結構清晰有條理(lǐ)，用(yòng)戶按照(zhào)從左至右的(de)視覺順序浏覽并可(kě)快(kuài)速理(lǐ)解内容，精美(měi)繪制的(de)插圖更是讓網站充滿了(le)吸引力。

「T」型布局

「T」型布局是Web端運用(yòng)最廣泛的(de)布局方式之一，因布局效果酷似英文字母「T」而得(de)名。優點是頁面結構清晰，主次分(fēn)明(míng)。缺點是規矩呆闆，如果不注意視覺元素的(de)合理(lǐ)運用(yòng)及色彩細節，很容易讓人(rén)「看之無味」。

Ant Design是阿裏螞蟻金服設計團隊打造的(de)工具型網站，用(yòng)來(lái)落地支付寶公司旗下(xià)産品的(de)設計語言、代碼工具等等。Ant Design正是采用(yòng)了(le)此布局，作爲基礎層，頂部全局導航承接了(le)所有子庫入口的(de)功能，内容區(qū)域再劃分(fēn)成左側邊欄模塊及主内容模塊兩部分(fēn)，此框架布局既能滿足人(rén)們的(de)「F」型浏覽習(xí)慣又能解決信息層級過多(duō)的(de)問題。

「C」型布局1&2

「C」型布局是在「T」型布局上的(de)擴展，增加的(de)頁腳模塊可(kě)設置成基礎内容區(qū)域或功能操作區(qū)。根據基礎模塊的(de)不同，可(kě)分(fēn)爲兩種「C」型結構。

Audi.com是奧迪集團多(duō)年設計成果展示的(de)Web端入口。在整體布局框架中，左側欄導航模塊被定義成基礎層，頁面右邊被分(fēn)爲三塊内容層模塊，分(fēn)别爲頁眉模塊（也(yě)就是頁面标題欄）、主内容模塊及頁腳模塊。設計風格時(shí)尚大(dà)氣，色彩、圖形元素的(de)和(hé)諧搭配使得(de)頁面布局錯落有緻。在交互操作體驗方面，讓用(yòng)戶做(zuò)到真正的(de)「don’t make me think」。

「口」型布局

這(zhè)是一個(gè)象形的(de)說法。頁面頂部爲基礎層的(de)導航模塊，中間爲左、中、右三塊内容層模塊，底部再嵌套一個(gè)頁腳。這(zhè)種布局的(de)優點是充分(fēn)利用(yòng)版面特性可(kě)承載最多(duō)的(de)信息及功能，缺點是頁面擁擠，不夠靈活。

Microsoft 作爲業内老牌的(de)互聯網公司，其官方網站承載了(le)産品應用(yòng)、設計、開發等多(duō)類子項目，而内容的(de)複雜(zá)性使得(de)微軟的(de)設計師們在搭建此網站時(shí)考慮了(le)「口」型布局。

綜合型布局1&2

綜合型布局是統稱，原理(lǐ)就是遵循分(fēn)層邏輯并在九種基礎模塊中自由組合、嵌套，是在簡單的(de)布局基礎上有更多(duō)模塊疊加的(de)複雜(zá)布局。其差異就是布局模塊之間的(de)數量及模塊擺放的(de)具體位置不同。我們定義的(de)綜合性布局1比綜合性布局2多(duō)一個(gè)右内容面闆。在此布局中，最重要的(de)基礎層通(tōng)常爲左側欄導航模塊。綜合型布局1&2根據網站自身的(de)産品規劃及功能定義可(kě)删減右内容模塊、頁腳等内容層模塊。

以上是九種最常用(yòng)的(de)默認布局，通(tōng)過基礎模塊以及分(fēn)層邏輯可(kě)以相互組合、嵌套的(de)方法，可(kě)以總結出更多(duō)的(de)Web端布局框架并落地到項目中。