Web端布局框架的思考與設(shè)計

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

一、布局框架在設(shè)計中的重要性

在涉及數(shù)字媒體的屏幕布局時，我們需要將一些看似互不相干的元素和諧、有序的組織在一起，這是很有挑戰(zhàn)性的。

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

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

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

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

二、布局框架的設(shè)計原則

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

統(tǒng)一性——確保產(chǎn)品布局在結(jié)構(gòu)和視覺的一致性，為用戶提供高度的舒適感

邏輯性——視覺中的各種分類構(gòu)成具有邏輯思路，結(jié)構(gòu)聯(lián)系緊密且通暢

可擴(kuò)展性——無論產(chǎn)品功能是簡單還是復(fù)雜，布局框架能夠隨著產(chǎn)品需求的變化進(jìn)行布局結(jié)構(gòu)的延展和擴(kuò)充

可預(yù)測性——選擇可預(yù)測和可識別的布局，并連接到體驗的每一個環(huán)境中且在適當(dāng)?shù)牡胤揭龑?dǎo)用戶

三、Web端的基礎(chǔ)模塊和分層邏輯

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

1.  基礎(chǔ)模塊

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

2.  分層邏輯

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

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

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

四、常用的基礎(chǔ)布局與擴(kuò)展布局

本文主要梳理基礎(chǔ)層、內(nèi)容層相關(guān)模塊所組合的布局框架。在查閱相關(guān)文章和書籍后，我們總結(jié)出了Web端三種基礎(chǔ)布局和五種擴(kuò)展布局。

1.  上下布局

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

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

2.左右布局

左右布局常出現(xiàn)在歐美國家的設(shè)計網(wǎng)站，視覺沖擊力強(qiáng)。

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

3.“T”型布局

“T”型布局是Web端運(yùn)用最廣泛的布局方式之一，因布局效果酷似英文字母“T”而得名。優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明；缺點(diǎn)是規(guī)矩呆板，如果不注意視覺元素的合理運(yùn)用及色彩細(xì)節(jié)，很容易讓人“看之無味”。

Ant Design是阿里螞蟻金服設(shè)計團(tuán)隊打造的工具型網(wǎng)站，用來落地支付寶公司旗下產(chǎn)品的設(shè)計語言、代碼工具等等。Ant Design正是采用了此布局，作為基礎(chǔ)層，頂部全局導(dǎo)航承接了所有子庫入口的功能，內(nèi)容區(qū)域再劃分成左側(cè)邊欄模塊及主內(nèi)容模塊兩部分，此框架布局既能滿足人們的“F”型瀏覽習(xí)慣又能解決信息層級過多的問題。

4.“C”型布局1&2

“C”型布局是在“T”型布局上的擴(kuò)展，增加的頁腳模塊可設(shè)置成基礎(chǔ)內(nèi)容區(qū)域或功能操作區(qū)。根據(jù)基礎(chǔ)模塊的不同可分為兩種“C”型結(jié)構(gòu)。

Audi.com是奧迪集團(tuán)多年設(shè)計成果展示的Web端入口。在整體布局框架中，左側(cè)欄導(dǎo)航模塊被定義成基礎(chǔ)層，頁面右邊被分為三塊內(nèi)容層模塊，分別為頁眉模塊（也就是頁面標(biāo)題欄）、主內(nèi)模塊板及頁腳模塊。設(shè)計風(fēng)格時尚大氣，色彩、圖形元素的和諧搭配使得頁面布局錯落有致，在交互操作體驗方面，讓用戶做到真正的“don’t make me think”。

5.“口”型布局

這是一個象形的說法。頁面頂部為基礎(chǔ)層的導(dǎo)航模塊，中間為左、中、右三塊內(nèi)容層模塊，底部再嵌套一個頁腳。這種布局的優(yōu)點(diǎn)是充分利用版面特性可承載最多的信息及功能，缺點(diǎn)是頁面擁擠，不夠靈活。

Microsoft 作為業(yè)內(nèi)老牌的互聯(lián)網(wǎng)公司，其官方網(wǎng)站承載了產(chǎn)品應(yīng)用、設(shè)計、開發(fā)等多類子項目，而內(nèi)容的復(fù)雜性使得微軟的設(shè)計師們在搭建此網(wǎng)站時考慮了“口”型布局。

6.綜合型布局1&2

綜合型布局是統(tǒng)稱，是擁有更多內(nèi)容模塊的復(fù)雜布局。如何定義綜合性布局呢？大家可以依據(jù)網(wǎng)站自身的產(chǎn)品規(guī)劃及功能差異選擇合適的模塊數(shù)量，并定義各個模塊所在的位置及層次。如圖所示，我們定義的綜合性布局1只是比綜合性布局2多一個右內(nèi)容面板。

以上是九種最常用的默認(rèn)布局，通過基礎(chǔ)模塊以及分層邏輯可以相互組合、嵌套的方法，可以總結(jié)出更多的Web端布局框架并落地到項目中。

本文名稱：Web端布局框架的思考與設(shè)計
轉(zhuǎn)載源于：http://www.muchs.cn/news38/62538.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、企業(yè)建站、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)