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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.  基礎(chǔ)模塊

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

2.  分層邏輯

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

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

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

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

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

1.  上下布局

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

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

2.左右布局

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

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

3.“T”型布局

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

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

4.“C”型布局1&2

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

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

5.“口”型布局

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

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

6.綜合型布局1&2

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

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

分享題目：Web端布局框架的思考與設(shè)計(jì)
本文網(wǎng)址：http://www.bm7419.com/news/62538.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、做網(wǎng)站、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

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