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

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

整篇文章分為兩部分：

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

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

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

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

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

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

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

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

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

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

基礎模塊

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

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

分層邏輯

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

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

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