為何用戶會(huì)訪問網(wǎng)站？在大多數(shù)情況下，訪問的主要原因是內(nèi)容。內(nèi)容是最重要的，每個(gè)設(shè)計(jì)師都希望以最實(shí)用、最直觀的方式呈現(xiàn)它。因此，設(shè)計(jì)師在開始新項(xiàng)目時(shí)首先要做的事情之一就是為內(nèi)容選擇合適的布局。
許多設(shè)計(jì)師認(rèn)為他們所設(shè)計(jì)的每個(gè)網(wǎng)站的布局應(yīng)該是完全獨(dú)一無二的，以滿足項(xiàng)目的目標(biāo)，但這與事實(shí)相去甚遠(yuǎn)。如果你訪問流行的網(wǎng)站，你會(huì)發(fā)現(xiàn)很多網(wǎng)站都使用類似的布局。這不是一個(gè)巧合，也不是出于懶惰，而是因?yàn)檫@些布局有三個(gè)顯著的優(yōu)勢(shì)：
可用：常見的布局之所以非常普遍，是因?yàn)樗鼈冏C明了用戶可以很好地使用。
熟悉：通過建立熟悉感，可以創(chuàng)建良好的用戶體驗(yàn)。當(dāng)用戶看到他們熟悉的功能時(shí)，他們會(huì)感到一種愉快的似曾相識(shí)的感覺。因此，人們會(huì)花時(shí)間來消化內(nèi)容，而不是專注于頁面的獨(dú)特設(shè)計(jì)。
省錢：復(fù)用現(xiàn)有的布局可以節(jié)省時(shí)間。設(shè)計(jì)師們將花更少的時(shí)間來試驗(yàn)布局，并將更多地關(guān)注視覺層次和設(shè)計(jì)的其他方面，這些設(shè)計(jì)對(duì)用戶體驗(yàn)有直接的影響。
雖然每個(gè)項(xiàng)目都是獨(dú)特的，需要單獨(dú)的方法，但是熟悉公共布局是很有幫助的。在這篇文章中，我們將討論11個(gè)非常常見的布局，你可以在無數(shù)的網(wǎng)站上找到。
1.單列布局
單列布局將主要內(nèi)容呈現(xiàn)在一個(gè)垂直的列中。這種類型的布局可能是列表中最簡單的，也是用戶最容易導(dǎo)航的，訪問者只需向下滾動(dòng)查看更多內(nèi)容。
盡管簡單，單列布局在很多網(wǎng)站中都很流行。移動(dòng)端的迅猛發(fā)展也促進(jìn)了這種布局的流行——單列布局完全適配于手機(jī)屏幕。
適用場(chǎng)景：這個(gè)布局常見于許多基于極簡設(shè)計(jì)原則的個(gè)人博客中。這是Tumblr等微博的常見布局。
設(shè)計(jì)技巧
長頁面考慮吸頂/底導(dǎo)航。由于單列布局經(jīng)常用于長頁面，所以需要保持導(dǎo)航始終可見，以避免需要滾動(dòng)到頁面頂部才能查看導(dǎo)航。
2.分屏布局
分屏布局對(duì)于有兩個(gè)重要內(nèi)容的頁面來說是很貼合的。它可以同時(shí)展示這兩項(xiàng)，并同時(shí)他們同等的權(quán)重。
圖片來源：62 models
適用場(chǎng)景：當(dāng)網(wǎng)站提供了兩種截然不同的用戶旅程時(shí)，比如兩種不同類型的指令，如下面Dropbox的例子中一樣。
分屏布局可以有效地進(jìn)行對(duì)比，因此經(jīng)常使用這種布局來將兩個(gè)項(xiàng)目相互對(duì)立。
圖片來源：Google Star Wars Customisations
設(shè)計(jì)技巧
避免使用過多的內(nèi)容。隨著內(nèi)容的增長，分屏設(shè)計(jì)不能很好地?cái)U(kuò)展，因此當(dāng)需要呈現(xiàn)大量的文本或可視信息時(shí)，最好避免選擇這種類型的布局。
考慮添加動(dòng)畫。你可以通過結(jié)合動(dòng)畫細(xì)節(jié)來創(chuàng)造一個(gè)更有活力的體驗(yàn)。
3.不對(duì)稱布局
不對(duì)稱是兩邊不平等分布的布局。在藝術(shù)界中，不對(duì)稱一直備受青睞，最近在網(wǎng)絡(luò)設(shè)計(jì)中同樣流行了起來。
很多人把不對(duì)稱和不平衡混淆在一起，但事實(shí)上，不對(duì)稱的目標(biāo)是在兩部分內(nèi)容無法使用相同的權(quán)重情況下，運(yùn)用不對(duì)稱手法來創(chuàng)造平衡。使用不對(duì)稱可以產(chǎn)生張力和動(dòng)力，而且可以通過將用戶的注意力集中在單個(gè)物體(焦點(diǎn))上，從而促進(jìn)更好的瀏覽行為。通過改變內(nèi)容的寬度、比例和顏色，可以促進(jìn)用戶的沉浸式體驗(yàn)。
適用場(chǎng)景：當(dāng)設(shè)計(jì)師想要?jiǎng)?chuàng)建有趣的、創(chuàng)意的布局時(shí)可以使用這種布局方式，同時(shí)它還可以提供方向上的引導(dǎo)。適當(dāng)?shù)膽?yīng)用不對(duì)稱可以創(chuàng)造出活躍的氛圍，引導(dǎo)視線從一個(gè)元素移動(dòng)到另一個(gè)元素上。思考一下Dropbox是如何在下面的例子中清楚地顯示出重點(diǎn)的。
設(shè)計(jì)技巧
確保內(nèi)容適合呈現(xiàn)在不對(duì)稱的布局中。不對(duì)稱布局對(duì)并不適用于任何網(wǎng)站，對(duì)于極簡主義的布局來說，這可能是較好的選擇。
通過顏色添加焦點(diǎn)。不對(duì)稱的根源在于，一個(gè)具有更大視覺重量的部分會(huì)首先引起人們的注意。你可以通過使用強(qiáng)烈的顏色對(duì)比的元素，在設(shè)計(jì)的特定部分增加視覺重量。
圖片來源：Culture PL
4.柵格化卡片式布局
卡片是可容納可點(diǎn)擊信息的大容器——它能以一種易于理解的方式呈現(xiàn)大量信息。小的預(yù)覽(通常是一個(gè)圖片和一個(gè)簡短的描述)幫助用戶找到他們喜歡的內(nèi)容并通過點(diǎn)擊卡片進(jìn)入詳情頁。
柵格化布局很重要的特點(diǎn)是它的無限可操作性。它可以根據(jù)大小、間距和列的數(shù)量而變化，并且卡片的樣式還可以根據(jù)屏幕大小而變化(卡片可以重新排列以適合任何屏幕)。因此它能在響應(yīng)式設(shè)計(jì)中發(fā)揮出色的作用。
適用場(chǎng)景：柵格化布局適用于重內(nèi)容的網(wǎng)站，它可以展示許多具有相同層級(jí)的項(xiàng)目。
圖片來源：Youtube
圖片來源：Pinterest
設(shè)計(jì)技巧
讓整個(gè)卡片可點(diǎn)擊，而不僅僅是特定的部分。當(dāng)用戶不需要精確地點(diǎn)擊卡片的標(biāo)題或圖像來訪問內(nèi)容細(xì)節(jié)時(shí)，交互就會(huì)更加舒適。
如果你的卡片中包含圖像，考慮小屏上的適配。若在小屏上不能很好地進(jìn)行縮放，會(huì)導(dǎo)致用戶體驗(yàn)不佳。
注意卡片之間的空白，因?yàn)樗鼤?huì)影響用戶瀏覽的方式?？ㄆg的間隔空間會(huì)讓瀏覽速度變慢，但會(huì)使用戶更加注意每張卡片。小的間隔可以加速瀏覽，同時(shí)也增加了用戶可能忽略某些內(nèi)容的風(fēng)險(xiǎn)。
與動(dòng)畫反饋結(jié)合。使卡片作為一個(gè)可點(diǎn)擊的元素呈現(xiàn)。
5.雜志式布局
這可能是本文中提到的最復(fù)雜的布局。顧名思義，這種布局最初是由報(bào)紙和雜志來普及的，它有難以一種易于遵循的方式向讀者呈現(xiàn)大量的信息。為實(shí)現(xiàn)這個(gè)目的，平面設(shè)計(jì)師使用了網(wǎng)格系統(tǒng)。布局是使用模塊化的網(wǎng)格構(gòu)建的，它也可以靈活運(yùn)用——在多列布局使用不同的視覺權(quán)重來區(qū)分信息的優(yōu)先級(jí)。
圖片來源：New York Times
與紙質(zhì)雜志類似，電子雜志使用了多欄網(wǎng)格，從而創(chuàng)建一個(gè)復(fù)雜的層次結(jié)構(gòu)以整合文字和插圖。其主要目標(biāo)是相同的——是用戶能夠快速瀏覽、閱讀和理解頁面。設(shè)計(jì)師努力創(chuàng)造一種視覺節(jié)奏，試圖讓視線更容易地瀏覽頁面上的各個(gè)部分，讓視線自然地從一個(gè)部分轉(zhuǎn)移到另一個(gè)部分，同時(shí)避免在不同的內(nèi)容之間干擾注意力。
適用場(chǎng)景：對(duì)于具有復(fù)雜層次結(jié)構(gòu)、頁面上有大量內(nèi)容的出版物，雜志布局是一個(gè)不錯(cuò)的選擇。如果沒有網(wǎng)格的有效使用，頁面上的內(nèi)容可能會(huì)顯得更雜亂，缺乏組織。
設(shè)計(jì)技巧
這個(gè)布局強(qiáng)調(diào)標(biāo)題和圖片。標(biāo)題/圖像的大小直接影響用戶的注意力。更突出的元素會(huì)更快地吸引用戶的注意力。以 ** 為例，頁面上最重要的內(nèi)容有更大的縮略圖、更大的標(biāo)題和更詳細(xì)的文本。
圖片來源：New York Times
鋪設(shè)柵格需要注意水平和垂直的節(jié)奏，如果你想要?jiǎng)?chuàng)造一個(gè)好的布局，它們同樣重要?？紤]以下示例的不同之處：在第一個(gè)例子中，網(wǎng)格與列寬和水平間距一致，但是不同的垂直間距產(chǎn)生了視覺干擾。在第二個(gè)例子中，水平列間距和垂直元素間距是一致的，這使得整體結(jié)構(gòu)看起來更干凈，更適合于用戶閱讀內(nèi)容。
6.箱式（Boxes）布局
這種布局有一個(gè)很大的頭圖寬度的大盒子，還有幾個(gè)小盒子，每個(gè)盒子都占據(jù)了大盒子寬度的一部分，數(shù)量可以從2個(gè)到5個(gè)不等。每個(gè)盒子都可以是一個(gè)鏈接，從而形成一個(gè)更大、更復(fù)雜的頁面。
適用場(chǎng)景：這個(gè)布局用途非常多，既可以用于個(gè)人作品網(wǎng)站，/電子商務(wù)網(wǎng)站。
圖片來源：mrporter
設(shè)計(jì)技巧
聯(lián)系盒子來講述一個(gè)故事。大盒子可以用來展示產(chǎn)品，而小盒子可以提品的更多信息。
圖片來源：Microsoft Su ** ce
7.固定的側(cè)邊欄
導(dǎo)航對(duì)于任何網(wǎng)站都是一個(gè)關(guān)鍵的部分——大多數(shù)用戶想要導(dǎo)航時(shí)，第一件事就是要找主菜單。除了頂部的水平導(dǎo)航，還可以將菜單選項(xiàng)放置在固定的邊欄中。側(cè)邊欄是頁面左邊或右邊的垂直列。在這個(gè)布局中，當(dāng)用戶滾動(dòng)頁面時(shí)，雖然頁面的其他部分會(huì)發(fā)生變化，但側(cè)邊欄保持不變，從而使導(dǎo)航始終可見可操作。
圖片來源：measponte
設(shè)計(jì)技巧
側(cè)欄還可以包含除菜單之外的內(nèi)容，如社交媒體鏈接、聯(lián)系信息，或任何你想讓訪問者輕松找到的內(nèi)容。
圖片來源：Trefecta
8.特色的圖像
這種布局是基于這樣一種理念：在設(shè)計(jì)中使用圖像是銷售產(chǎn)品的最快方式。圖像有機(jī)會(huì)與用戶建立情感聯(lián)系——一張巨大的、大膽的照片或插畫能對(duì)產(chǎn)品做出強(qiáng)有力的陳述，并創(chuàng)造出令人深刻的第一印象。
使用場(chǎng)景：當(dāng)你需要只展示一個(gè)產(chǎn)品/服務(wù)，并將用戶的全部注意力集中在上面時(shí)。
圖片來源：Apple
利用這種布局，我們可以建立一種真正的沉浸式的情感體驗(yàn)。Species in Pieces是一個(gè)很好的例子，它向我們提供豐富的經(jīng)驗(yàn)并提高對(duì)瀕危物種的認(rèn)識(shí)。
圖片來源：Species in Pieces
設(shè)計(jì)技巧
確保圖像足夠好，成為突出的特色。圖像、照片或插畫應(yīng)該與要傳達(dá)的信息相關(guān)且高質(zhì)量。
斟酌排版。排版需伴隨著圖像，通過字體、大小和顏色等字體的屬性來加強(qiáng)設(shè)計(jì)。
9.F型布局
這種布局是基于用戶在web上閱讀內(nèi)容的方式創(chuàng)建的。F型瀏覽模式最初由NNGroup定義，指出用戶通常瀏覽大塊的內(nèi)容模式看起來像字母F或E。我們的視線起始于頁面的右上角，水平掃描后下降到下一行，并以同樣的方式重復(fù)，直到發(fā)現(xiàn)吸引我們注意力的內(nèi)容(有趣的內(nèi)容)。這種瀏覽模式不僅適用于Web端，也適用于移動(dòng)端。
適用場(chǎng)景：這個(gè)布局適用于需要呈現(xiàn)許多不同選項(xiàng)并允許用戶快速瀏覽的頁面。這種布局仿照了自然的瀏覽行為模式，因此用戶會(huì)對(duì)F模式的布局做出更好的反應(yīng)。例如對(duì)于包含搜索結(jié)果的頁面或新聞?lì)惖闹黜摱己苓m合這種布局。
圖片來源：New Yorker
設(shè)計(jì)技巧
根據(jù)瀏覽行為調(diào)整內(nèi)容。可以在頁面的左右兩側(cè)放置最重要的內(nèi)容，因?yàn)橛脩舻囊暰€起始并結(jié)束于此。當(dāng)用戶的視線到達(dá)一行的末尾時(shí)，視線會(huì)在移動(dòng)到下一行之前停留片刻，而這個(gè)停留提供了呈現(xiàn)內(nèi)容的機(jī)會(huì)。
使用視覺提示來引導(dǎo)用戶?？梢酝ㄟ^為元素增加視覺重量的方式將用戶的注意力集中在一個(gè)特定的元素上。例如，您可以在文本中突出關(guān)鍵字以吸引用戶的注意力。
10.Z型布局
Z模式的布局也仿照了自然的閱讀習(xí)慣。用戶(來自西方文化)從左上角開始向右上方掃描，形成一條水平線。之后稍許不同——不同于F型模式那樣直接下移，他們的視線會(huì)向下移動(dòng)到頁面的左邊，形成一條對(duì)角線。最后，再看向右看，形成第二條水平線。
適用場(chǎng)景：雖然F模式可以更好地瀏覽大量內(nèi)容，但Z模式更適合具有單一目標(biāo)和內(nèi)容較少的頁面。這種模式可以有效地利用位置信息、文本和CTA來引導(dǎo)用戶關(guān)注特定的點(diǎn)。
圖片來源：Basecamp
設(shè)計(jì)技巧
以Z字形(或連續(xù)的Z模式)引導(dǎo)視線。可以通過交替的文本和圖像來引導(dǎo)用戶的視線，從而創(chuàng)建一個(gè)Z字形的瀏覽路徑。
圖片來源：Evernote
11.全屏背景圖
該布局的核心元素是一張用作頁面的背景大照片，向用戶介紹網(wǎng)站的內(nèi)容。這種布局會(huì)給用戶帶來強(qiáng)烈的第一印象，并促進(jìn)用戶進(jìn)行互動(dòng)。
適用場(chǎng)景：想少說多展示的時(shí)候，適合用這種布局。
圖片來源： Searching For Syria
設(shè)計(jì)技巧
謹(jǐn)慎選擇背景圖片。由于布局是基于一個(gè)單一的圖像，所以選擇合適的圖像是非常必要的。不相關(guān)的圖像很容易給用戶帶來疑惑。
使用視頻代替圖像。用視頻代替照片很值得一試，特別是當(dāng)你需要演示一些動(dòng)態(tài)效果的時(shí)候
不要讓設(shè)計(jì)削弱易讀性。作為覆蓋在圖像之上文本，應(yīng)該與背景有足夠的對(duì)比使其可讀。如果沒有足夠的對(duì)比度，可以考慮在圖像中添加蒙層。
圖片來源：Google Wallet
在設(shè)計(jì)網(wǎng)站時(shí)，首要的就是要牢記內(nèi)容始終是王。網(wǎng)站的主要目的仍然是呈現(xiàn)易于閱讀的內(nèi)容。在布局方式中，選擇能讓你的內(nèi)容閃光的布局是非常必要的。
來源UI.cn
作者M(jìn)ohanna Mohanna
因未有作者聯(lián)系方式
如涉侵權(quán)請(qǐng)聯(lián)刪
