亚洲一区二区三区无码少年_日韩亚洲欧美综合一区二区三区_国产精品成人69xxx_被主人狠狠调教打屁股_国产女厕所偷窥系列在线视频_老头猛挺进王进霞的体内视频_日本女同伦理片_一级毛片特黄视频免费观看_国产成人无码免费看视频软件

Web端布局框架你了解多少？

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

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

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

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

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

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

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

2. 布局框架的設(shè)計(jì)原則

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

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

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

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

基礎(chǔ)模塊

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

分層邏輯

基礎(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)流程的模塊，具體有抽屜模塊、彈窗浮層模塊。

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

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

上下布局

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

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

左右布局

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

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

「T」型布局

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

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

「C」型布局1&2

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

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

「口」型布局

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

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

綜合型布局1&2

綜合型布局是統(tǒng)稱，原理就是遵循分層邏輯并在九種基礎(chǔ)模塊中自由組合、嵌套，是在簡單的布局基礎(chǔ)上有更多模塊疊加的復(fù)雜布局。其差異就是布局模塊之間的數(shù)量及模塊擺放的具體位置不同。我們定義的綜合性布局1比綜合性布局2多一個(gè)右內(nèi)容面板。在此布局中，最重要的基礎(chǔ)層通常為左側(cè)欄導(dǎo)航模塊。綜合型布局1&2根據(jù)網(wǎng)站自身的產(chǎn)品規(guī)劃及功能定義可刪減右內(nèi)容模塊、頁腳等內(nèi)容層模塊。

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