仍然擔(dān)心如何構(gòu)建Web端布局框架？來這里尋找方法，CDX魔方團(tuán)隊(duì)成員用血與淚經(jīng)驗(yàn)告訴你答案。

　前言

對于托管多個(gè)子產(chǎn)品的網(wǎng)站，單一的布局形式并不完全適用，因此我們需要從各個(gè)方面理解相關(guān)的布局框架理論。這有利于我們定義Web界面的復(fù)雜結(jié)構(gòu)，實(shí)現(xiàn)一致性，標(biāo)準(zhǔn)化，可擴(kuò)展性和快速迭代。

整篇文章分為兩部分：

了解布局框架元素。

項(xiàng)目降水：Didi Rubik的Cube網(wǎng)站布局框架的構(gòu)建和實(shí)施。

　布局框架要素

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

談到數(shù)字媒體的布局，我們需要以和諧有序的方式組織一些看似無關(guān)的元素，這是非常具有挑戰(zhàn)性的。

對于設(shè)計(jì)師，掌握感知元素的格式塔理論，視覺元素的組織和結(jié)構(gòu)，以及感官元素的層次和順序，并將這些方法應(yīng)用于布局設(shè)計(jì)的每個(gè)部分，以創(chuàng)建真實(shí)的布局。產(chǎn)品?；A(chǔ)。

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

布局框架確保了高質(zhì)量的產(chǎn)品和良好的用戶體驗(yàn)，方便用戶識別和使用界面。

布局框架是產(chǎn)品的骨架和基礎(chǔ)。確定框架后，設(shè)計(jì)師可以進(jìn)行下一步施工 - ——統(tǒng)一的視覺元素，清晰的功能操作，特定過程的交互等。

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

在了解了布局框架設(shè)計(jì)的重要性之后，讓我們了解布局框架的設(shè)計(jì)原則，它們是統(tǒng)一的，邏輯的，可擴(kuò)展的，可預(yù)測的。

團(tuán)結(jié)——確保產(chǎn)品結(jié)構(gòu)在結(jié)構(gòu)和視覺上保持一致，為用戶提供高水平的舒適性。

邏輯——視覺結(jié)構(gòu)中的各種類別具有邏輯結(jié)構(gòu)，并且結(jié)構(gòu)緊密相連且暢通無阻。

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

可預(yù)測性——選擇可預(yù)測且可識別的布局并連接到體驗(yàn)的每個(gè)環(huán)境并在適當(dāng)?shù)臅r(shí)候指導(dǎo)用戶。

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

在我們進(jìn)行布局框架設(shè)計(jì)之前，讓我們熟悉與Web界面相關(guān)的基本模塊和分層邏輯。

　基礎(chǔ)模塊

根據(jù)模塊自身的屬性和功能定義。共有九種常見類型的模塊，即頂部導(dǎo)航模塊，左側(cè)導(dǎo)航模塊，標(biāo)題模塊，頁腳模塊，主內(nèi)容模塊，左側(cè)內(nèi)容模塊，右側(cè)內(nèi)容模塊，抽屜模塊和彈出模塊。

　分層邏輯

基礎(chǔ)層是常見的功能底層，這是提供穩(wěn)定性和可預(yù)測性的基本級別，包括頂部導(dǎo)航模塊和左側(cè)導(dǎo)航模塊。

內(nèi)容層可以分為公共顯示層，具體為主內(nèi)容模塊，左內(nèi)容模塊和右內(nèi)容模塊等。

疊加層是動態(tài)顯示的頂層，始終疊加在基礎(chǔ)層和內(nèi)容層上。它是一個(gè)鏈接上下體驗(yàn)過程的模塊，特別是抽屜模塊和彈出窗口浮動層模塊。

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

本文主要梳理基本層和內(nèi)容層相關(guān)模塊的布局框架。在查看相關(guān)文章和書籍后，我們總結(jié)了網(wǎng)絡(luò)上的三種基本布局和五種擴(kuò)展布局。

　上下布局

此布局通常在Web首頁上使用，上部是導(dǎo)航或標(biāo)題模塊，下部是主要內(nèi)容模塊。簡潔明了，干擾少。根據(jù)屏幕和設(shè)備的不同，內(nèi)容模塊可以設(shè)計(jì)為在整個(gè)頁面上具有固定寬度或兩個(gè)可視布局。

IBM Design主頁使用向上和向下布局。黑白視覺系統(tǒng)的頂部導(dǎo)航和大型主要內(nèi)容模塊顯示使頁面設(shè)計(jì)清新，具有強(qiáng)烈的視覺表現(xiàn)力。 IBM設(shè)計(jì)人員還使用響應(yīng)式設(shè)計(jì)來控制屏幕分辨率斷點(diǎn)，以便官方網(wǎng)站可以通過在任何設(shè)備下瀏覽來獲得最佳用戶體驗(yàn)。

　左右布局

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

Atlassian Design采用左右布局。頁面左側(cè)是全局側(cè)導(dǎo)航模塊，其他部分是主要內(nèi)容模塊。從交互式體驗(yàn)和色彩匹配的視覺體驗(yàn)來看，Atlassian的整體布局結(jié)構(gòu)清晰有序。用戶可以瀏覽從左到右的視覺順序并快速了解內(nèi)容。精美的插圖使網(wǎng)站充滿吸引力。

　「T」型布局

“T”布局是Web上使用最廣泛的布局方法之一。它的布局效果類似于英文字母“T”。優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主要和次要是不同的。缺點(diǎn)是規(guī)則很嚴(yán)格。如果你不注意合理使用視覺元素和顏色細(xì)節(jié)，很容易讓人看起來“不乏味”。

Ant Design是一個(gè)基于工具的網(wǎng)站，由Ali Ant Financial Design團(tuán)隊(duì)創(chuàng)建，用于設(shè)計(jì)支付寶產(chǎn)品的語言，代碼工具等。 Ant Design使用此布局作為基礎(chǔ)層。頂級全局導(dǎo)航接管所有子庫條目的功能。內(nèi)容區(qū)域分為兩部分：左側(cè)邊欄模塊和主內(nèi)容模塊。這種框架布局可以滿足人們的“F型瀏覽習(xí)慣可以解決信息水平過高的問題?！?/p>

　「C」型布局1&2

“C”布局是“T”布局的擴(kuò)展，并且添加的頁腳模塊可以設(shè)置為基本內(nèi)容區(qū)域或功能操作區(qū)域。根據(jù)基本模塊，它可以分為兩種類型的“C”型結(jié)構(gòu)。

Audi.com是奧迪集團(tuán)多年設(shè)計(jì)工作的門戶網(wǎng)站。在整體布局框架中，左側(cè)導(dǎo)航模塊定義為基礎(chǔ)層，頁面右側(cè)分為三個(gè)內(nèi)容層模塊，即標(biāo)題模塊（即頁面標(biāo)題欄），主要內(nèi)容模塊和頁腳模塊。設(shè)計(jì)風(fēng)格時(shí)尚，色彩和圖形元素的和諧使頁面布局拼湊而成。在互動體驗(yàn)方面，讓用戶真正做到“不要讓我思考”。

　「口」型布局

這是一個(gè)象形文字。頁面頂部是基礎(chǔ)層的導(dǎo)航模塊。中間是左，中，右內(nèi)容層模塊，底部是一個(gè)頁腳嵌套。這種布局的優(yōu)點(diǎn)是它充分利用布局功能來傳遞最多的信息和功能。缺點(diǎn)是頁面擁擠且不夠靈活。

作為業(yè)內(nèi)知名的互聯(lián)網(wǎng)公司，微軟的官方網(wǎng)站承載著各種子項(xiàng)目，如產(chǎn)品應(yīng)用，設(shè)計(jì)和開發(fā)。內(nèi)容的復(fù)雜性使得微軟的設(shè)計(jì)師在構(gòu)建本網(wǎng)站時(shí)會考慮“口”布局。

　綜合型布局1&2

集成布局是一個(gè)通用術(shù)語。原則是遵循分層邏輯，并在九個(gè)基本模塊中自由組合和嵌套。這是一個(gè)復(fù)雜的布局，在簡單的布局基礎(chǔ)上疊加了更多的模塊。不同之處在于布局模塊的數(shù)量和模塊的具體位置。我們定義了一個(gè)綜合布局1，右側(cè)內(nèi)容面板比復(fù)合布局多2個(gè)。在此布局中，最重要的基礎(chǔ)層通常是左側(cè)導(dǎo)航模塊。集成布局1和2可以根據(jù)網(wǎng)站本身的產(chǎn)品規(guī)劃和功能定義刪除諸如正確的內(nèi)容模塊和頁腳的內(nèi)容層模塊。

以上是九種最常用的默認(rèn)布局。通過組合和嵌套基本模塊和分層邏輯，您可以總結(jié)更多Web端布局框架并將其置于項(xiàng)目中。

　魔方網(wǎng)站布局的構(gòu)建與實(shí)現(xiàn)

　　1. 項(xiàng)目背景

Rubik's Cube是由CDX創(chuàng)意設(shè)計(jì)中心發(fā)起的設(shè)計(jì)工具平臺。項(xiàng)目初步規(guī)劃的子產(chǎn)品涉及設(shè)計(jì)方面和開發(fā)方面，包括不同尺寸和不同類別的產(chǎn)品，如設(shè)計(jì)資源庫，設(shè)計(jì)工具，設(shè)計(jì)板和組件代碼。作為最重要的多功能和多信息載體，項(xiàng)目啟動后，首先需要考慮的是合理的布局框架，為高效準(zhǔn)確的表達(dá)和未來的順暢體驗(yàn)奠定基礎(chǔ)。

　2. 項(xiàng)目分析與布局定義

在Rubik's Cube項(xiàng)目的早期階段，進(jìn)行了以下方向的分析和研究。

同類產(chǎn)品分析

當(dāng)Rubik's Cube仍然只是一個(gè)紙質(zhì)信息框架時(shí)，我們分析了同類主要網(wǎng)站，整理了相應(yīng)布局框架的特點(diǎn)，優(yōu)缺點(diǎn)，并在本文前半部分得到了理論結(jié)果。 。

　魔方產(chǎn)品分析

新孵化的產(chǎn)品將經(jīng)歷從黑暗到明亮的過程，從0到1，而Rubik的立方體也不例外。當(dāng)初始產(chǎn)品形式不明確時(shí)，我們進(jìn)行了多方位的自我分析。

第一步是考慮魔方的位置，產(chǎn)品模型，設(shè)計(jì)目標(biāo)，以及目標(biāo)用戶如何理解魔方并使用魔方。

第二步定義每個(gè)子產(chǎn)品的項(xiàng)目目標(biāo)，并分析信息內(nèi)容和相應(yīng)的功能要求。

第三步是以組件設(shè)計(jì)的方式對基本功能進(jìn)行分類，反匯編，分類和重組。

　　魔方布局的確定與總結(jié)

最后，我們將嵌套設(shè)計(jì)方法與基本模塊和分層邏輯相結(jié)合，以滿足多維數(shù)據(jù)集的布局?jǐn)?shù)量和布局復(fù)雜性。我們將可重用的功能模塊統(tǒng)一到基礎(chǔ)層中。例如，全局第一級導(dǎo)航模塊是用于承載所有子產(chǎn)品頁面的門戶。需要單獨(dú)定義的功能模塊分為子產(chǎn)品的特殊功能，并逐個(gè)集成到相應(yīng)的布局模塊中，例如，規(guī)范庫中的電梯分為單獨(dú)的右內(nèi)容模塊。

Rubik的立方體網(wǎng)站使用上下布局，“T”布局和“嘴”布局。

魔方布局的構(gòu)成原則

在獲得這些結(jié)果后，我們回到基本布局框架設(shè)計(jì)并總結(jié)以下原則：

組織原則——根據(jù)產(chǎn)品特征分解功能點(diǎn)，然后將它們重新組合成組。

隱藏原則——突出顯示布局中的主要焦點(diǎn)信息并隱藏輔助輔助信息。

接近原則——將相鄰元素分類為模式或整體。

熟悉&害羞;害羞;原則——根據(jù)熟悉的認(rèn)知將復(fù)雜對象簡化為常規(guī)圖形。

　3. 視覺風(fēng)格探索與總結(jié)

　　視覺風(fēng)格探索

Rubik的視覺風(fēng)格和布局框架同時(shí)進(jìn)行了探索。在這個(gè)過程中，我們考慮整體布局是否能滿足Rubik的子產(chǎn)品，并考慮如何設(shè)計(jì)和呈現(xiàn)視覺元素。從最基本的品牌顏色定義，組件元素風(fēng)格，到設(shè)計(jì)細(xì)節(jié)中字體的大小，空間布局中按鈕的比例合理得到拋光和調(diào)整，最后細(xì)化成最和諧統(tǒng)一的視覺效果解。

　　魔方視覺的設(shè)計(jì)原則

經(jīng)過多輪草稿輸出和視覺審查后，Rubik's Cube的最終視覺風(fēng)格是根據(jù)布局框架確定的。其中，我們總結(jié)了魔方網(wǎng)站的設(shè)計(jì)原則：

視覺平衡——頁面信息元素的位置和分布需要和諧穩(wěn)定的平衡。

空間舒適度 - mdash; —整個(gè)頁面的白色空間應(yīng)該是統(tǒng)一的，視覺感知需要舒適和親和力。

統(tǒng)一尺寸——頁面的不同版本應(yīng)該統(tǒng)一，不同組件的大小應(yīng)該相同。

比例和諧——信息要素的比例應(yīng)適當(dāng)，突出重點(diǎn)信息，弱化輔助信息。

色彩感知——品牌顏色三原色與Drip Travel擁有最強(qiáng)的品牌聯(lián)系和視覺感知，色彩比例應(yīng)均勻。

錯(cuò)位——事物的布局是不均勻的，但它非常有趣，讓人看起來很好。

　4. 布局框架的運(yùn)用及落地

從2017年4月底到現(xiàn)在，Rubik's Cube已經(jīng)完成了平臺構(gòu)建的第一階段，并在Drip資源庫，設(shè)計(jì)工具SCO主頁和建筑代碼中啟動了庫和規(guī)范庫。

　魔方上下布局的運(yùn)用

在全世界范圍內(nèi)，Rubik's Cube采用布局方案。 1級導(dǎo)航是頁面中最重的組件。酷炫強(qiáng)大的黑色品牌增強(qiáng)了頁面的視覺焦點(diǎn)。舒適的導(dǎo)航高度產(chǎn)生自然的視覺感受。這種全球?qū)Ш剿娇梢詭椭脩艨焖佥p松地訪問相應(yīng)的產(chǎn)品頁面。

在Rubik的多維數(shù)據(jù)集庫列表頁面中，二級和三級導(dǎo)航作為完整的頂部導(dǎo)航模塊連接到第一級全局導(dǎo)航。在視覺表現(xiàn)方面，我們通過顏色對比度，距離和陰影高度在模塊之間建立了“深度”層次關(guān)系。白色導(dǎo)航模塊位于頂部，內(nèi)容模塊位于較低級別。合理的頂部模塊陰影用作增強(qiáng)頁面高度的基本細(xì)節(jié)，這允許導(dǎo)航模塊與內(nèi)容模塊分離而不會造成鈍的距離感。

　魔方「口」型布局的運(yùn)用

“嘴”布局用于Rubik的Cube規(guī)范庫。為了方便用戶閱讀與Drip Travel在線相關(guān)的設(shè)計(jì)語言和規(guī)范，我們從交互的角度建立了幾個(gè)大型功能模塊，如左側(cè)導(dǎo)航模塊，幫助用戶過濾相應(yīng)的規(guī)范子頁面。正確的內(nèi)容模塊帶有快速電梯導(dǎo)航。底部還有一個(gè)頁腳模塊，計(jì)劃是上下頁跳轉(zhuǎn)功能按鈕區(qū)域。這種清晰的視覺層次結(jié)構(gòu)和功能結(jié)構(gòu)使用戶能夠更快，更快地獲取信息。

在視覺層面上，在滿足產(chǎn)品功能性和可用性的前提下，信息元素的比例不完整，大多數(shù)子頁面與易于生存的品牌橙子形成對比，創(chuàng)造了一個(gè)簡單的和藹可親的視覺美感。

　　總結(jié)

由于高層建筑是平的，回顧性項(xiàng)目就像建造一座摩天大樓。首先，在構(gòu)建基礎(chǔ)框架之后，它將向下一層添加磚塊和瓷磚。最后，建筑可以高大，穩(wěn)定，美觀。

在經(jīng)歷了上述知識和實(shí)踐后，我們充分了解布局框架元素的特點(diǎn)，將理論應(yīng)用于實(shí)際項(xiàng)目，提供最佳的魔方設(shè)計(jì)，并將布局框架理論應(yīng)用于其他屏幕產(chǎn)品。 。

在本文中仍有許多值得仔細(xì)研究和研究的地方。我只能想到我學(xué)到的東西。我希望我能與你溝通和學(xué)習(xí)。

« 如何在網(wǎng)站底部執(zhí)行seo優(yōu)化？ | 如何開通網(wǎng)站短信功能 »