布局可以成就或破壞網(wǎng)站。它們引導(dǎo)眼睛，分配空間并決定性能。讓我們看看如何創(chuàng)建高效且實(shí)用的布局！

網(wǎng)頁(yè)設(shè)計(jì)布局通常被比作房屋的藍(lán)圖或網(wǎng)站的骨架——在某種程度上，確實(shí)如此。網(wǎng)頁(yè)設(shè)計(jì)師精心策劃了布局，不僅為了實(shí)現(xiàn)目標(biāo)，而且以最好的方式展示內(nèi)容。

那么設(shè)計(jì)師如何制定布局方案呢？他們需要考慮哪些不同的因素？布局是否與產(chǎn)品的可用性有關(guān)？當(dāng)它還在UI 設(shè)計(jì)工具中時(shí)，它是否反映在布局中？

跟隨 設(shè)計(jì) 讓我們花點(diǎn)時(shí)間回顧一下創(chuàng)建可以成為您產(chǎn)品支柱的網(wǎng)頁(yè)設(shè)計(jì)布局的一些基礎(chǔ)知識(shí)！

目錄

• 為什么網(wǎng)頁(yè)設(shè)計(jì)布局很重要？
• 網(wǎng)頁(yè)設(shè)計(jì)布局中的重要因素
• 常用的網(wǎng)頁(yè)設(shè)計(jì)布局

為什么網(wǎng)頁(yè)設(shè)計(jì)師創(chuàng)建一個(gè)好的布局很重要？

布局是任何網(wǎng)頁(yè)設(shè)計(jì)的重要墊腳石。它是分配空間的框架，確保整個(gè)產(chǎn)品的功能和可用性。如果布局不達(dá)標(biāo)，它將使整個(gè)設(shè)計(jì)走上災(zāi)難之路。相當(dāng)于把房子的地基打錯(cuò)了，勢(shì)必導(dǎo)致房子根本經(jīng)不起時(shí)間的考驗(yàn)。

網(wǎng)頁(yè)設(shè)計(jì)布局就是為了達(dá)到目標(biāo)和有效利用空間。你想為重要的東西分配更多的空間，確保展示的內(nèi)容能夠充分發(fā)揮其潛力。內(nèi)容的正確安排可能取決于許多不同的因素，例如內(nèi)容的性質(zhì)、將使用的設(shè)備、打算使用它的人或項(xiàng)目本身的主要目標(biāo)。

無(wú)論產(chǎn)品或內(nèi)容的類(lèi)型如何，一件事都是正確的。布局需要利用好空間，創(chuàng)造視覺(jué)平衡，并設(shè)置一定的元素重要性層次。這是網(wǎng)頁(yè)設(shè)計(jì)中至關(guān)重要的一步，對(duì)最終產(chǎn)品產(chǎn)生巨大影響。

網(wǎng)頁(yè)設(shè)計(jì)布局中的重要因素

1. 內(nèi)容結(jié)構(gòu)

網(wǎng)頁(yè)設(shè)計(jì)布局在許多方面只是關(guān)于如何最好地顯示我們需要的內(nèi)容的辯論。一旦我們知道產(chǎn)品需要做什么，需要展示什么，我們就可以開(kāi)始了解什么是重要的。內(nèi)容本身需要以一種不僅僅是視覺(jué)上美觀(guān)的方式呈現(xiàn)——它需要有說(shuō)服力、高效且易于理解。

一些網(wǎng)頁(yè)設(shè)計(jì)概念在這里發(fā)揮了重要作用。內(nèi)容結(jié)構(gòu)化與產(chǎn)品的信息架構(gòu)和視覺(jué)層次結(jié)構(gòu)密切相關(guān)。一方面，信息架構(gòu)將規(guī)定最重要的內(nèi)容部分并定義不同部分如何相互關(guān)聯(lián)。從那里，網(wǎng)頁(yè)設(shè)計(jì)師可以開(kāi)始創(chuàng)建一個(gè)維護(hù)內(nèi)容視覺(jué)層次結(jié)構(gòu)的布局。

布局確實(shí)與視覺(jué)層次關(guān)系非常密切。這種層次結(jié)構(gòu)很重要，因?yàn)樗鼤?huì)告訴用戶(hù)他們需要關(guān)注什么，使整個(gè)頁(yè)面易于閱讀和理解。如果所有元素的大小和顏色都完全相同，那將非常混亂且很難找到任何東西。設(shè)計(jì)師使用層次結(jié)構(gòu)來(lái)引導(dǎo)眼睛，使關(guān)鍵位成為關(guān)注的中心。

這就是為什么網(wǎng)頁(yè)設(shè)計(jì)布局的概念不僅僅涉及視覺(jué)上的愉悅。了解人眼以及人們?cè)诿鎸?duì)內(nèi)容時(shí)的反應(yīng)是一門(mén)真正的科學(xué)。你想讓他們首先看到重要的部分，然后繼續(xù)引導(dǎo)他們完成其余的內(nèi)容。對(duì)于用戶(hù)來(lái)說(shuō)應(yīng)該很容易，理想情況下他們甚至不會(huì)注意到他們所看到的有一個(gè)精心策劃的結(jié)構(gòu)。

2.視覺(jué)平衡

網(wǎng)頁(yè)設(shè)計(jì)布局必須始終保持視覺(jué)平衡——但這在實(shí)踐中意味著什么？在設(shè)計(jì)界，眾所周知，我們?cè)谄聊簧峡吹降乃袞|西都有一定的分量。這個(gè)重量可能是因?yàn)橐粋€(gè)元素很大，或者是一個(gè)明亮多彩的按鈕，或者是一些在標(biāo)題區(qū)域中占主導(dǎo)地位的復(fù)雜字體。所有這些都是網(wǎng)頁(yè)設(shè)計(jì)師可以采取的有效途徑，但這個(gè)游戲有規(guī)則。

設(shè)計(jì)師尋求的平衡來(lái)自于知道如何分配視覺(jué)重量，因此屏幕既易于閱讀，又能避免讓人不知所措的東西。一些設(shè)計(jì)師使用諸如房間里的家具或花園里的植物之類(lèi)的類(lèi)比——簡(jiǎn)單地把它們都扔在同一個(gè)角落是行不通的。你想把它傳播出去，創(chuàng)造一種人們可以欣賞的和諧。網(wǎng)頁(yè)設(shè)計(jì)布局對(duì)數(shù)字產(chǎn)品也是如此。

在嘗試定義保持視覺(jué)平衡的布局時(shí)，設(shè)計(jì)師應(yīng)始終考慮一些因素。

首先，我們有對(duì)齊。這是指元素在布局中的位置，設(shè)計(jì)師可以通過(guò)將重量級(jí)元素分布在不同的角落來(lái)創(chuàng)造平衡。網(wǎng)頁(yè)設(shè)計(jì)師可以在這里獲得真正的創(chuàng)意，并使用有意對(duì)齊（或不對(duì)齊）的元素與用戶(hù)交流。例如，許多以完美對(duì)齊方式緊密定位的小元素向用戶(hù)表明這些元素在本質(zhì)上是緊密相連的。

其次，我們有對(duì)稱(chēng)性。網(wǎng)頁(yè)設(shè)計(jì)師可以使用對(duì)稱(chēng)來(lái)創(chuàng)建平衡的設(shè)計(jì)，相同重量的對(duì)齊元素會(huì)在眼睛上產(chǎn)生放松的效果。在類(lèi)似的注釋中，設(shè)計(jì)師也可以使用這個(gè)規(guī)則來(lái)創(chuàng)造一些前衛(wèi)和強(qiáng)大的東西——通過(guò)反抗它。不對(duì)稱(chēng)設(shè)計(jì)可以給他們一種現(xiàn)代感，從而產(chǎn)生更具戲劇性和影響力的設(shè)計(jì)。當(dāng)然，訣竅仍然是提供視覺(jué)平衡的不對(duì)稱(chēng)產(chǎn)品。

3. 強(qiáng)調(diào)重要的事情

正如我們之前提到的，網(wǎng)頁(yè)設(shè)計(jì)布局處理將用戶(hù)的注意力集中在真正重要的內(nèi)容上。通過(guò)空間的分配，設(shè)計(jì)師可以非常重視重要的事情。設(shè)計(jì)師可以通過(guò)多種方式向用戶(hù)傳達(dá)頁(yè)面中最重要的元素。諸如顏色的選擇、元素周?chē)目瞻卓臻g或元素與背景之間的對(duì)比。

一個(gè)愚蠢的例子是像“發(fā)送”這樣的主要按鈕和像“取消”這樣的次要按鈕之間的比較。最亮的顏色，即吸引眼球的顏色，往往是主要按鈕。第二個(gè)按鈕將具有對(duì)比度較小的顏色，以便用戶(hù)看到它但不要專(zhuān)注于它。

然而，設(shè)計(jì)師告訴用戶(hù)頁(yè)面上真正重要的內(nèi)容的主要方式之一是比例。作為一般規(guī)則，重要的東西以更大的尺寸顯示，并在設(shè)計(jì)中占據(jù)更多空間。當(dāng)我們考慮重要元素與次要元素的比例時(shí)，尤其如此。

網(wǎng)頁(yè)設(shè)計(jì)布局要求設(shè)計(jì)師縮小每個(gè)頁(yè)面上的主要元素或最重要的信息。明確優(yōu)先事項(xiàng)至關(guān)重要，因?yàn)樗鼘Q定設(shè)計(jì)師的重點(diǎn)。一旦設(shè)計(jì)師確切地知道什么是最重要的以及頁(yè)面的最終目標(biāo)是什么，他們就可以專(zhuān)注于創(chuàng)建一個(gè)真正有說(shuō)服力的網(wǎng)頁(yè)設(shè)計(jì)布局。

4.留白和視覺(jué)浮雕

空白在網(wǎng)頁(yè)設(shè)計(jì)布局中絕對(duì)重要。沒(méi)有辦法解決它。設(shè)計(jì)師逐漸意識(shí)到空白空間在網(wǎng)頁(yè)設(shè)計(jì)布局中的強(qiáng)大功能。

空白最重要的作用之一是讓視覺(jué)層次更加明顯。看到設(shè)計(jì)的人可以直觀(guān)地判斷信息片段是否相連，或者兩個(gè)元素是否具有某些共同特征，所有這些都取決于它們之間或周?chē)卸嗌倏瞻卓臻g。

擁有適量的空白空間還可以提高可讀性，因?yàn)橛脩?hù)沒(méi)有一百萬(wàn)個(gè)小細(xì)節(jié)同時(shí)轟炸他們。他們可以自由地專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)師為他們制定的道路。

設(shè)計(jì)師在網(wǎng)頁(yè)設(shè)計(jì)布局中有很多空白的另一個(gè)重要原因是人類(lèi)只能采取這么多。第一次閱讀某些東西，理解它在說(shuō)什么以及它的含義時(shí)，會(huì)有一定的心理努力。這是一個(gè)以認(rèn)知努力為名的概念。它指的是用戶(hù)需要在設(shè)計(jì)上投入多少精力才能使用它。

空白可以是保持低認(rèn)知努力的好方法。通過(guò)優(yōu)先考慮元素和信息并在它們周?chē)舫龃罅靠瞻卓臻g，我們確保頁(yè)面不會(huì)讓用戶(hù)不知所措。如果元素太多，閃爍的顏色，移動(dòng)的圖形，沒(méi)有空白，大多數(shù)用戶(hù)會(huì)干脆走開(kāi)。體驗(yàn)會(huì)太苛刻，太混亂。

5. 重復(fù)

經(jīng)驗(yàn)豐富的設(shè)計(jì)師知道，在網(wǎng)頁(yè)設(shè)計(jì)布局中重復(fù)元素和安排并不總是一個(gè)問(wèn)題。有時(shí)，它是一種力量。對(duì)于需要包含大量?jī)?nèi)容、大量頁(yè)面設(shè)計(jì)的大型產(chǎn)品來(lái)說(shuō)尤其如此。通過(guò)以戰(zhàn)略性的方式重復(fù)某些事情，我們可以將整個(gè)設(shè)計(jì)整合在一起，并賦予它一種連貫性的感覺(jué)。

一些概念在這里發(fā)揮作用。首先，所有設(shè)計(jì)師都知道，您可以在同一設(shè)計(jì)中包含多少獨(dú)特元素和樣式是有限度的。在某個(gè)點(diǎn)之后，它會(huì)變得視覺(jué)疲勞，并增加使用該產(chǎn)品所需的認(rèn)知努力。因此，重復(fù)只是一般網(wǎng)頁(yè)設(shè)計(jì)的一部分。

其次，我們有品牌標(biāo)識(shí)和設(shè)計(jì)系統(tǒng)的想法。網(wǎng)頁(yè)設(shè)計(jì)布局當(dāng)然可以參與產(chǎn)品的品牌標(biāo)識(shí)，增加設(shè)計(jì)的個(gè)性。隨著產(chǎn)品的增長(zhǎng)，很難以連貫的方式保持相同的身份。這就是為什么許多設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)系統(tǒng)不僅包括調(diào)色板，還包括整個(gè)布局。

這意味著任何設(shè)計(jì)團(tuán)隊(duì)成員都可以采用這些基本的網(wǎng)頁(yè)設(shè)計(jì)布局并使用它們來(lái)創(chuàng)建一個(gè)保持產(chǎn)品視覺(jué)標(biāo)識(shí)的頁(yè)面。這是關(guān)于減少設(shè)計(jì)時(shí)間并建立設(shè)計(jì)師可以依賴(lài)的某種重復(fù)模式。

常用的網(wǎng)頁(yè)設(shè)計(jì)布局

1.網(wǎng)格布局

網(wǎng)站設(shè)計(jì)傾向于處理大量?jī)?nèi)容，有時(shí)甚至需要一次顯示所有內(nèi)容。這就是為什么許多設(shè)計(jì)團(tuán)隊(duì)傾向于網(wǎng)格布局，使用模塊化卡片以有組織的方式呈現(xiàn)大量?jī)?nèi)容。

使用網(wǎng)格網(wǎng)站布局的最好的事情之一就是它帶來(lái)的自由。內(nèi)容通常是有機(jī)的，并且趨于增長(zhǎng)和變化。使用卡片 UI 系統(tǒng)，設(shè)計(jì)師可以創(chuàng)建一些靈活的東西，無(wú)需太多工作即可適應(yīng)。憑借其模塊化特性，網(wǎng)格系統(tǒng)可以是對(duì)稱(chēng)的或不對(duì)稱(chēng)的，可以是最小的或充滿(mǎn)細(xì)節(jié)的。這里有很大的余地來(lái)設(shè)計(jì)一個(gè)可以長(zhǎng)期生存的網(wǎng)站布局。

這里的訣竅是要理解，即使是卡片也可能代表太多的認(rèn)知努力。您希望在卡片之間留出足夠的空白空間，并限制每張卡片包含的文字或視覺(jué)效果。這樣一來(lái)，用戶(hù)就可以花時(shí)間將網(wǎng)格系統(tǒng)納入其中，而不是被 12 個(gè)閃爍著不同顏色的方塊轟炸。

2.分屏布局

將屏幕的頂部分成兩半是一種流行的方式，可以提供戲劇性的視覺(jué)效果，同時(shí)仍然保持網(wǎng)站的最佳效率。一些網(wǎng)站使用這種布局來(lái)嘗試并鼓勵(lì)用戶(hù)在兩個(gè)同樣重要的選項(xiàng)之間做出快速選擇。這可能是一種有說(shuō)服力的方式來(lái)推動(dòng)用戶(hù)做出決定，同時(shí)也因其對(duì)稱(chēng)的布局而在視覺(jué)上令人愉悅。

其他網(wǎng)站使用分屏布局只是為了提供強(qiáng)大的銷(xiāo)售宣傳。用戶(hù)不是在兩個(gè)選項(xiàng)之間進(jìn)行選擇，而是一方面具有強(qiáng)大的視覺(jué)效果，而另一方面具有基于文本的音調(diào)。整個(gè)布局可以是現(xiàn)代的或經(jīng)典的，高度適應(yīng)任何風(fēng)格或趨勢(shì)。

3. 特色圖片

網(wǎng)站的特色圖像布局與我們之前提到的強(qiáng)調(diào)概念有很大關(guān)系。將大圖像作為頁(yè)面頂部的焦點(diǎn)，設(shè)計(jì)師確保用戶(hù)會(huì)注意圖像及其表達(dá)或含義。

使用特色圖片的最大好處之一是它可以用來(lái)設(shè)定基調(diào)。作為用戶(hù)關(guān)注的第一件事，設(shè)計(jì)師可以創(chuàng)建完美的圖像來(lái)捕捉整個(gè)網(wǎng)頁(yè)。常用于編輯風(fēng)格的網(wǎng)站，如報(bào)紙和博客。

4.之字形布局

之字形網(wǎng)站布局基本上是基于閱讀模式創(chuàng)建整個(gè)布局。這個(gè)想法是，雖然大多數(shù)用戶(hù)實(shí)際上并沒(méi)有投入從上到下閱讀網(wǎng)頁(yè)所需的時(shí)間，但他們確實(shí)會(huì)掃描內(nèi)容。這種掃描通常使用圖案完成，Z 圖案是最常見(jiàn)的圖案之一。

因?yàn)橛脩?hù)使用 Z 模式掃描內(nèi)容很常見(jiàn)，所以創(chuàng)建具有相同結(jié)構(gòu)的網(wǎng)站布局可能很有用是合乎邏輯的。您確保用戶(hù)確實(shí)會(huì)看到內(nèi)容，從而增加他們找到所需內(nèi)容的機(jī)會(huì)。

這個(gè)網(wǎng)站布局也處理了很多重復(fù)的概念。網(wǎng)站通常通過(guò)在屏幕的交替兩側(cè)重復(fù)相同的布局來(lái)創(chuàng)建鋸齒形圖案。這種網(wǎng)站布局設(shè)計(jì)方法沒(méi)有任何問(wèn)題 - 重復(fù)可能很好！

5. F型布局

與 Z 閱讀模式類(lèi)似，F(xiàn) 閱讀模式也常用于網(wǎng)頁(yè)設(shè)計(jì)。這基本上意味著用戶(hù)在掃描內(nèi)容時(shí)會(huì)關(guān)注左側(cè)，然后根據(jù)他們看到的內(nèi)容冒險(xiǎn)進(jìn)入右側(cè)。

當(dāng)涉及到網(wǎng)站布局設(shè)計(jì)時(shí)，這通常意味著重要的信息或元素需要放在左側(cè)。這使得用戶(hù)更有可能與他們進(jìn)行交互，例如在購(gòu)物項(xiàng)目過(guò)濾器的情況下。如果我們正在處理更注重文本的設(shè)計(jì)，您需要確保文字準(zhǔn)確，以便用戶(hù)可以在左側(cè)找到文本的重要部分。

總結(jié)網(wǎng)頁(yè)設(shè)計(jì)布局

為網(wǎng)站設(shè)計(jì)創(chuàng)建正確的布局既是藝術(shù)也是科學(xué)，許多因素對(duì)最佳方法有很大影響。有一定的需要考慮更實(shí)際的事情，比如產(chǎn)品的業(yè)務(wù)目標(biāo)和目標(biāo)用戶(hù)。您希望以有效的方式使用空間，使產(chǎn)品能夠發(fā)光并以最佳光線(xiàn)呈現(xiàn)內(nèi)容。與加入設(shè)計(jì)團(tuán)隊(duì)，共同創(chuàng)造，一起向未來(lái)。