網(wǎng)站建設(shè)web框架如何搭建才能更統(tǒng)一化、規(guī)范化？發(fā)布者：本站     時間：2021-02-24 09:02:04

對于承載多個子產(chǎn)品的網(wǎng)站而言，單一的布局形式不能完全適用，因此我們需要全方面了解相關(guān)的布局框架理論。這有利于我們在定義復(fù)雜結(jié)構(gòu)的Web界面時得心應(yīng)手，做到統(tǒng)一化、規(guī)范化、可拓展及可快速迭代。

整篇文章分為兩部分：

了解布局框架要素。
項目沉淀：滴滴魔方網(wǎng)站布局框架的構(gòu)建與實現(xiàn)。
布局框架要素
1. 布局框架在設(shè)計中的重要性
在涉及數(shù)字媒體的屏幕布局時，我們需要將一些看似互不相干的元素和諧、有序的組織在一起，這是很有挑戰(zhàn)性的。

對設(shè)計師而言，熟練掌握知覺要素的格式塔理論、視覺要素的組織和結(jié)構(gòu)及感覺要素的層級和秩序，并將這些方法論運用到布局設(shè)計的每一處，才能創(chuàng)建出該產(chǎn)品真正的布局基礎(chǔ)。

如何搭建Web端布局框架？來看滴滴設(shè)計團隊的超全經(jīng)驗總結(jié)！

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

布局框架能保證優(yōu)質(zhì)產(chǎn)品及良好的用戶體驗，方便用戶對界面的識別和使用習(xí)慣。

布局框架是產(chǎn)品的骨架和基礎(chǔ)。在框架確定之后，設(shè)計師才可進行下一步的構(gòu)建——統(tǒng)一的視覺元素，清晰的功能操作，具體流程的交互等等。

如何搭建Web端布局框架？來看滴滴設(shè)計團隊的超全經(jīng)驗總結(jié)！

2. 布局框架的設(shè)計原則
了解布局框架設(shè)計的重要性后，我們再來認識一下布局框架的設(shè)計原則，分別為統(tǒng)一性、邏輯性、可擴展性、可預(yù)測性。

統(tǒng)一性——確保產(chǎn)品布局在結(jié)構(gòu)和視覺的一致性，為用戶提供高度的舒適感。
邏輯性——視覺中的各種分類構(gòu)成具有邏輯思路，結(jié)構(gòu)聯(lián)系緊密且通暢。
可擴展性——無論產(chǎn)品功能是簡單還是復(fù)雜，布局框架能夠隨著產(chǎn)品需求的變化進行布局結(jié)構(gòu)的延展和擴充。
可預(yù)測性——選擇可預(yù)測和可識別的布局，并連接到體驗的每一個環(huán)境中且在適當(dāng)?shù)牡胤揭龑?dǎo)用戶。
如何搭建Web端布局框架？來看滴滴設(shè)計團隊的超全經(jīng)驗總結(jié)！

3. Web端的基礎(chǔ)模塊和分層邏輯
我們在進行布局框架設(shè)計前，先來熟悉一下Web端界面相關(guān)的基礎(chǔ)模塊和分層邏輯。

基礎(chǔ)模塊

根據(jù)模塊自身屬性及功能定義。常見的模塊有九類，分別為頂部導(dǎo)航模塊、左側(cè)導(dǎo)航模塊、頁眉模塊、頁腳模塊、主內(nèi)容模塊、左內(nèi)容模塊、右內(nèi)容模塊、抽屜模塊、彈窗模塊。

如何搭建Web端布局框架？來看滴滴設(shè)計團隊的超全經(jīng)驗總結(jié)！

分層邏輯

基礎(chǔ)層為常置的功能底層，是提供穩(wěn)定性和可預(yù)測性必不可少的層級，具體有頂部導(dǎo)航模塊、左側(cè)導(dǎo)航模塊等。

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

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