關(guān)于“開放式布局”
在室內(nèi)裝修當(dāng)中，開放式布局通常指的是讓功能不同的空間彼此重疊在一起，達(dá)到空間最大化的利用。比如將廚房和生活空間重疊在一起，彼此打通共享。
前言
對(duì)于承載多個(gè)子產(chǎn)品的網(wǎng)站而言，單一的布局形式不能完全適用，因此我們需要全方面了解相關(guān)的布局框架理論。這有利于我們?cè)诙x復(fù)雜結(jié)構(gòu)的Web界面時(shí)得心應(yīng)手，做到統(tǒng)一化、規(guī)范化、可拓展及可快速迭代。
整篇文章分為兩部分：
- 了解布局框架要素。
- 項(xiàng)目沉淀：滴滴魔方網(wǎng)站布局框架的構(gòu)建與實(shí)現(xiàn)。
布局框架要素
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ù)測性。
- 統(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ù)測和可識(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ù)測性必不可少的層級(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)目中。
魔方網(wǎng)站布局的構(gòu)建與實(shí)現(xiàn)
1. 項(xiàng)目背景
魔方是CDX創(chuàng)意設(shè)計(jì)中心發(fā)起的設(shè)計(jì)工具化平臺(tái)。項(xiàng)目初期規(guī)劃的子產(chǎn)品涉及了設(shè)計(jì)側(cè)及開發(fā)側(cè)，包含了設(shè)計(jì)資源庫、設(shè)計(jì)工具、設(shè)計(jì)板、組件代碼等多維度不同類別的產(chǎn)品。作為最重要的多功能、多信息的載體，項(xiàng)目起步后，我們首先需要考慮的就是合理的布局框架，為將來高效、精準(zhǔn)的表達(dá)和流暢的體驗(yàn)做好基礎(chǔ)。
2. 項(xiàng)目分析與布局定義
魔方項(xiàng)目前期做了以下幾個(gè)方向的分析與研究。
同類產(chǎn)品分析
在魔方還只是紙面信息框架的時(shí)候，我們分析了各大同類網(wǎng)站，梳理出相應(yīng)布局框架的特性和優(yōu)缺點(diǎn)，也就有了本文上半部分的理論成果。
魔方產(chǎn)品分析
剛孵化的產(chǎn)品都會(huì)經(jīng)歷從暗到明、從0到1的過程，魔方也不例外。最初產(chǎn)品形態(tài)并不清晰時(shí)，我們進(jìn)行了多方面的自我分析。
- 第一步思考整個(gè)魔方的定位、產(chǎn)品模式、設(shè)計(jì)目標(biāo)以及目標(biāo)用戶會(huì)如何理解魔方、使用魔方。
- 第二步定義每一個(gè)子產(chǎn)品的項(xiàng)目目標(biāo)，并分析其中展示信息內(nèi)容及對(duì)應(yīng)的功能需求。
- 第三步再以組件化設(shè)計(jì)的思維方式對(duì)基礎(chǔ)功能進(jìn)行梳理、拆解分類、歸納重組。
魔方布局的確定與總結(jié)
最終我們通過基礎(chǔ)模塊及分層邏輯相互組合嵌套的設(shè)計(jì)方法，使魔方布局?jǐn)?shù)量和布局復(fù)雜程度被滿足。我們將可復(fù)用的功能模塊統(tǒng)一成基礎(chǔ)層，如全局一級(jí)導(dǎo)航模塊是為承載了所有子產(chǎn)品頁面的入口。而需要單獨(dú)定義的功能模塊被劃分成子產(chǎn)品的特殊功能，并一一整合到對(duì)應(yīng)的布局模塊中，如規(guī)范庫中的電梯劃分成單獨(dú)的右內(nèi)容模塊。
魔方網(wǎng)站采用了上下布局、「T」型布局及「口」型布局。
魔方布局的構(gòu)成原則
在獲得這些成果后，我們?cè)俅位貧w到根本的布局框架設(shè)計(jì)中，總結(jié)出以下構(gòu)成原則：
- 組織原則——根據(jù)產(chǎn)品特性將功能點(diǎn)分解后重新劃分成組。
- 隱藏原則——突出布局中的主要焦點(diǎn)信息并隱藏次要輔助信息。
- 接近原則——將臨近的元素歸類為一個(gè)模式或整體。
- 熟悉??原則——按照熟悉的認(rèn)知，把復(fù)雜對(duì)象簡單化，變成規(guī)則圖形。
3. 視覺風(fēng)格探索與總結(jié)
視覺風(fēng)格探索
魔方的視覺風(fēng)格與布局框架是同步進(jìn)行探索的。在這個(gè)過程中，我們一邊考慮整體布局能否滿足魔方各個(gè)子產(chǎn)品，一邊思考視覺元素如何設(shè)計(jì)和呈現(xiàn)。從最基礎(chǔ)的品牌色定義、組件元素樣式，再到設(shè)計(jì)細(xì)節(jié)中字體的大小、按鈕在空間布局上的占比是否合理都要不斷打磨與調(diào)整，最后細(xì)化成最和諧統(tǒng)一的視覺方案。
魔方視覺的設(shè)計(jì)原則
在歷經(jīng)了多輪方案稿產(chǎn)出、視覺評(píng)審后，魔方最終的視覺風(fēng)格在布局框架基礎(chǔ)上確定了。其中我們總結(jié)出幾點(diǎn)魔方網(wǎng)站視覺的設(shè)計(jì)原則：
- 視覺平衡——頁面信息要素的位置及分布需要和諧穩(wěn)定的平衡感。
- 空間舒適——整體頁面留白空間要均勻、視覺感知需要舒適、有親和力。
- 尺寸統(tǒng)一——不同頁面采用的版心要統(tǒng)一、不同組件大小要一致。
- 比例和諧——信息要素排布比例要合適，突出焦點(diǎn)信息，弱化輔助信息。
- 顏色感知——品牌顏色三原色要與滴滴出行有最強(qiáng)品牌鏈接及視覺感知，用色比例要均勻。
- 錯(cuò)落有致——事物的布局雖然參差不齊，但卻極有情趣，使人看了有好感。
4. 布局框架的運(yùn)用及落地
從2017年4月底至今，魔方已完成了平臺(tái)化的一期搭建，上線了滴滴資源庫中的圖庫和規(guī)范庫、設(shè)計(jì)工具SCO主頁、組建代碼等產(chǎn)品。
魔方上下布局的運(yùn)用
縱觀全局，魔方采用上下布局方案。一級(jí)導(dǎo)航為頁面中信息層級(jí)最重的組成部分，用色冷靜而有力的品牌黑加強(qiáng)了頁面的視覺重心，舒適的導(dǎo)航高度產(chǎn)生自然的視覺方向感，如此的全局一級(jí)導(dǎo)航能夠幫助用戶更便捷快速地抵達(dá)相應(yīng)的子產(chǎn)品頁面。
在魔方圖庫列表頁中，二、三級(jí)導(dǎo)航相連一級(jí)全局導(dǎo)航為完整的頂部導(dǎo)航模塊。在視覺表現(xiàn)方面，我們通過顏色的對(duì)比、陰影的距離與高度讓模塊之間具有「深度」的層次關(guān)系。白色的導(dǎo)航模塊在頂部，而內(nèi)容模塊是在更低的層級(jí)，合理的頂部模塊陰影作為必不可少的細(xì)節(jié)元素提升了頁面高度，這樣能讓導(dǎo)航模塊與內(nèi)容模塊分離出來但又不會(huì)造成生硬的距離感。
魔方「口」型布局的運(yùn)用
魔方規(guī)范庫中采用的是「口」型布局。為了方便用戶在線閱讀滴滴出行相關(guān)的設(shè)計(jì)語言與規(guī)范，我們從交互角度建立了幾大塊功能模塊，如左側(cè)導(dǎo)航模塊，幫助用戶篩選相應(yīng)的規(guī)范子頁面。右側(cè)內(nèi)容模塊承載了快捷電梯導(dǎo)航。還有底部的頁腳模塊被規(guī)劃成上下頁跳轉(zhuǎn)功能按鈕區(qū)域。這樣清晰的視覺層級(jí)及功能結(jié)構(gòu)能讓用戶更好更快獲取信息。
視覺層面，在滿足產(chǎn)品功能性和可用性的前提下，信息元素排布比例大小錯(cuò)落有致，子頁面的大部分留白與輕松活波的品牌桔產(chǎn)生對(duì)比，塑造了簡潔有親和力的視覺美感。
總結(jié)
萬丈高樓平地起，回顧項(xiàng)目就像是蓋一座摩天大樓一樣，首先要搭建好地基框架后，再往上一層一層增磚添瓦，最后大樓才能又高又穩(wěn)又好看。
在經(jīng)歷了以上林林總總的認(rèn)知與實(shí)踐后，我們充分了解布局框架要素指南特性，將理論運(yùn)用到實(shí)踐項(xiàng)目中，提供最佳的魔方設(shè)計(jì)方案，還能舉一反三將布局框架理論應(yīng)用到其他屏幕產(chǎn)品中。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。