在網(wǎng)頁設(shè)計(jì)排版中會(huì)運(yùn)用哪些元素，去修飾增加畫面層次節(jié)奏，增加逼格，達(dá)到最高視覺效果

線框在頁面中有什么作用呢，邊框的視覺沖擊強(qiáng)。當(dāng)你在視覺頁面中看到被邊
框框住的內(nèi)容，會(huì)習(xí)慣性地吸引關(guān)注其中的圖素或是信息，如果邊框顏色和背
景形成強(qiáng)烈對(duì)比的情況下，更容易引起用戶的注意，其帶來的視覺效果更為強(qiáng)烈。

框在主體后面

下面這張視覺1,線框是壓在主體人物的后面，slogan和線框是一個(gè)水平的層級(jí)。因?yàn)榫€框和背景顏色
很接近，線框本身不突出，很好的聚集了視覺焦點(diǎn)在框內(nèi)，很好的襯托了主體人物和slogan。如果不
加線框的話，因?yàn)楸尘吧罴?xì)節(jié)很多，主體和slogan容易被沖散。視覺2,橘黃色框突出標(biāo)題，并不強(qiáng)調(diào)
圖片。

框在主題前面

下面這張視覺，線框是壓在主體人物的前面，主體和線框與背景的顏色非常接近，這樣的對(duì)比slo-
gan, 線框壓在主體上面，與 slogan 形成 3 個(gè)層次。形式感上有很強(qiáng)的沖擊力 。左下的視覺 2, 也是框在
主體上方，但是這張視覺的框構(gòu)成的并不是線，而是由字母和形狀的點(diǎn)構(gòu)成框。右下的視覺3,如果之
前的框放在主體上，是會(huì)弱化主體，但是這張反倒是突出了主體的眼睛部分，焦點(diǎn)會(huì)凝聚在眼睛上，然
后再是文字。

框與主題穿插

下面這2張視覺，線框是與主體穿插，部分在線框上方，部分在線框下方，文字也做一樣的處理。這種
方式更能使得線框不在生硬，線框和主體有很好的互動(dòng)，更使得整體畫面有立體感和空間感。

框與面的結(jié)合

下面這3張視覺，線框與面的結(jié)合，讓線框整體的層級(jí)比主體還要突出，更能強(qiáng)調(diào)slogan。這樣的排版
使得視覺中心一下就落在上面，視覺沖擊力強(qiáng)。

任何形都由線包圍而成，線就是一個(gè)二維生物里的產(chǎn)物，你可以把線看成一
個(gè)點(diǎn)的運(yùn)行軌跡，線是一條運(yùn)行軌跡，它是從點(diǎn)的基礎(chǔ)上發(fā)展而來的。線在
畫面的作用就是，修飾文字，引導(dǎo)文字，整理文字，平衡畫面等。

線的分割

下面這張參考1 banner,主標(biāo)題與副標(biāo)題直接的過渡，用了細(xì)長的橫線。在主標(biāo)題和副標(biāo)題之間，不僅
起到了很好的分割效果，而且整體排版當(dāng)中很有節(jié)奏感和對(duì)比。參考2則是加了兩條橫線，很好的區(qū)分
了上下的英文，雖然英文占較大比重，但是字較多已經(jīng)形成整體，兩條線一分格使中文的slogan并不
會(huì)弱。

線的引導(dǎo)

下面這張參考1,長橫線很好的引導(dǎo)了右邊的內(nèi)容，讓用戶在看完標(biāo)題之后，順氣之然的將焦點(diǎn)引導(dǎo)看
到內(nèi)容文字。又使得排版的形式不一樣，彌補(bǔ)畫面平衡。參考2這條的橫線，完成了標(biāo)題與內(nèi)容的區(qū)
分，而且很好的引導(dǎo)了讓用戶對(duì)應(yīng)的應(yīng)該看那張圖，如果只是單純的區(qū)分標(biāo)題內(nèi)容的話，那么圖片其實(shí)
是有鍺了，這樣用戶有可能會(huì)不知道圖片對(duì)應(yīng)的文字段落。

線的強(qiáng)調(diào)

下面這張參考1,文字下的綠色很好的解決了白色的素，增加了點(diǎn)綴，還強(qiáng)調(diào)了文字。使得具有鏈接功
能。向這種強(qiáng)調(diào)的線，還有很多時(shí)候我們是用在了頁面的hover上，比如參考2.

線的其它形式

線的其它表現(xiàn)形式可以是，波浪線、曲線、圓形線、斜線或是組合等等0線條的風(fēng)格表現(xiàn)在線的寬窄樣
式和線的平直彎曲，這些形態(tài)上的變化，可以表現(xiàn)出謹(jǐn)慎嚴(yán)肅，也能釋放某種率性天真0它可以完全裝
飾，也可以是有功能的。實(shí)際應(yīng)用中還是要根據(jù)自身板式的需求來搭配線的運(yùn)用。

排版設(shè)計(jì)不僅僅只是將文字、圖像、圖標(biāo)等元素簡單的糅合在一起就可以，
而是需要將其形成一個(gè)閱讀性很強(qiáng)并且視覺形式美的視覺效果。
對(duì)齊這個(gè)基本的設(shè)計(jì)原則可以幫助我們?cè)谠O(shè)計(jì)中構(gòu)建順序和層次結(jié)構(gòu)，從而
實(shí)現(xiàn)層次清晰，簡單易讀，視覺形式美的布局。

所有元素排列的一致性

當(dāng)我們?cè)谠O(shè)計(jì)中移動(dòng)元素時(shí)，元素與元素之間將會(huì)出現(xiàn)視覺虛線。我們可以將元素進(jìn)行右對(duì)齊，左對(duì)齊
或中心對(duì)齊，只要保持元素之間形成相互呼應(yīng)的關(guān)系。
可以將所有元素調(diào)整成具有秩序感的視覺效果，在這個(gè)示例中，同時(shí)運(yùn)用了水平和垂直對(duì)齊。

調(diào)整行間距

當(dāng)在設(shè)計(jì)中需要對(duì)齊多個(gè)設(shè)計(jì)元素時(shí)，我們要確保它們之間的行間距是均勻的有空隙的。這樣會(huì)使整個(gè)
畫面更加透氣，內(nèi)容識(shí)別度更高。

在這個(gè)示例中，根據(jù)畫面運(yùn)用了右對(duì)齊，并且中間的橫線將文本劃分出兩段區(qū)域，將標(biāo)題和其它內(nèi)容區(qū)
分開。

水平和垂直對(duì)齊

在每一個(gè)設(shè)計(jì)畫面里都有一個(gè)水平軸和垂直軸，確保設(shè)計(jì)元素對(duì)稱的排列在這兩條軸的兩邊，這將有助
于設(shè)計(jì)元素均衡的放在畫面中。另外對(duì)齊也適用于單一的圖片。

利用水平文本來適應(yīng)圖像

對(duì)齊的文本需要跟據(jù)我們的圖像位置而定。例如,如果我們選擇一個(gè)背頁圖像，圖像集中在右側(cè)，左側(cè)
有大雖的空白空間。這個(gè)時(shí)候文本對(duì)齊方式最好選擇左側(cè)對(duì)齊或者居中對(duì)齊。

創(chuàng)造網(wǎng)頁視覺的焦點(diǎn)

如果我們把文本放置在一個(gè)沒有重心的背頁圖像中，圖片的中心可作為文本的放置位置，可以選擇文本
中心對(duì)齊。

框與線，在我們現(xiàn)在的網(wǎng)頁設(shè)計(jì)趨勢中，很多設(shè)計(jì)師都會(huì)去運(yùn)用它們。但是很多
時(shí)候會(huì)為了加框與線而加，框和線元素的本是輔助我們的整體畫面，讓畫面
更加的粗密、深淺，錯(cuò)落有致，從而產(chǎn)生視覺重心。如果只在乎表面，只會(huì)
暄賓奪主，畫面冗余。在我們的設(shè)計(jì)畫面中，周圍留下空白有助于創(chuàng)造視覺
焦點(diǎn)，當(dāng)對(duì)齊元素使用左，右或中心對(duì)齊時(shí)，要記住一點(diǎn)，我們要確保它們
不會(huì)觸碰到畫面的邊緣。這有助于構(gòu)圖，并給予畫面呼吸的空間。