合理的利用對齊來提升網(wǎng)頁的設(shè)計(jì)感發(fā)布者：本站     時間：2021-12-20 11:12:14

利用柵格系統(tǒng)進(jìn)行對齊，這是很常見的事情。本文談?wù)摰膶R可不是簡簡單單的左對齊和右對齊，我們談?wù)摰氖钦w角度上對齊的一些方法。合理的對齊能讓你的設(shè)計(jì)更誘人，也能更方便用戶瀏覽，提供極佳的閱讀體驗(yàn)。幾乎頁面上所有的元素都需要對齊，無論是文本，還是圖像，抑或一組組視頻，以及一堆堆按鈕和鏈接。柵格能夠幫助你進(jìn)行對齊，但是不同的元素對齊方法也不盡相同，各自有各自的奧妙。不要為了對齊而對齊，要為了用戶體驗(yàn)而對齊，這才是本文宣講的目的。

對齊決定了元素的擺放位置以及和其他元素之間的空間關(guān)系。好的對齊能夠讓元素與元素之間的間隔更流暢，讓元素彼此的搭配更協(xié)調(diào)。

為什么所有的元素都需要對齊?

很多人不喜歡柵格系統(tǒng)，因?yàn)橛兴拗?，他們不希望自己的?chuàng)意受到妨礙。

通俗上講，柵格就是一大堆能夠幫助我們創(chuàng)造區(qū)塊的欄;而CSS中，排版的核心是盒模型，想要打破柵格很難。

為設(shè)計(jì)加入對齊

當(dāng)然，并不是每一次都需要全部對齊。對不對齊，取決于你的設(shè)計(jì)作品或者工作方式?；蛘?，可以在設(shè)計(jì)時不管對齊，大致創(chuàng)意完成后，再給設(shè)計(jì)加入對齊。

要注意：不要因?yàn)閷R，而使設(shè)計(jì)過于死板，讓網(wǎng)站喪失了趣味性和探索性。對齊意味著你需要開始鉆研布局技巧和柵格了——不過這次不用6欄柵格，用的是4欄。

合理的利用對齊來提升網(wǎng)頁的設(shè)計(jì)感,PS教程,

全屏覆蓋的柵格——6+4。使用軟件為Gridset App.當(dāng)你的設(shè)計(jì)很適合使用柵格布局時，那么請用之。讓元素對齊柵欄，布局可選項(xiàng)非常豐富，即便是最簡單的4+6。

主要元素的對齊

文本

和CSS對齊相同：左、右、中，調(diào)整。十分的簡單

合理的利用對齊來提升網(wǎng)頁的設(shè)計(jì)感,PS教程,

www.awwwards.com

對齊和可讀性，需要好好權(quán)衡。不能光顧著對齊，而忽略了整體設(shè)計(jì)和可讀性。

例如，少量的文本可以嘗試居中對齊，而大量的文本居中對齊會影響可讀性。

標(biāo)題居中對齊效果很棒，但是標(biāo)題的效果還取決于和正文的對照。如果標(biāo)題居中對齊，而下文大量文本如果采用左對齊，效果就不佳。

合理的利用對齊來提升網(wǎng)頁的設(shè)計(jì)感,PS教程,

wearemovingthings.com

不同尋常的對齊方式還要考慮到文化差異，有部分文化從右到左閱讀，大部分文化都是從上到下，從左到右。因?yàn)榇蟛糠治幕际菑淖蟮接议喿x，所以盡量不要采用右對齊，可讀性很糟糕。右對齊一般在頁底呈現(xiàn)，展示聯(lián)系地址、聯(lián)系信息，或者在頂部出現(xiàn)，展示導(dǎo)航鏈接

圖像

圖像的對齊很麻煩，因?yàn)槊恳粡垐D的尺寸都不一樣。小尺寸的圖像易于放置，而且不影響內(nèi)容。大的圖像會打破閱讀節(jié)奏，因此最好不要用過大的圖像。一般有兩種方法：第一種是把圖像放在內(nèi)容之外(開頭或者結(jié)尾)，另一種方法是文本內(nèi)穿插圖片。第一種方法很簡單，可以采用全尺寸的大圖，看起啦效果也不錯，方便響應(yīng)式設(shè)計(jì)。

合理的利用對齊來提升網(wǎng)頁的設(shè)計(jì)感,PS教程,

第二種方法稍稍復(fù)雜，圖像的位置要把握好。圖像首先要和文本區(qū)域合理對齊(左或右)，這是一種方法。另一種方法是圖像稍稍超出文本區(qū)域。

在文本區(qū)域內(nèi)嵌入圖像，如果做得巧妙，文圖結(jié)合的夠好，會提高可讀性、趣味性。

背景圖像

背景圖像是個限制，尺寸、圖像選擇都很困難。當(dāng)背景圖像和文本對齊結(jié)合時，背景圖像需要符合CSS規(guī)則：絕對定位，上還是下?左還是右?這時候就需要根據(jù)自身設(shè)計(jì)來考慮背景圖像的設(shè)置了。如果你的背景圖像是重復(fù)的圖案，便需要考慮圖案與內(nèi)容的對齊關(guān)系，如何利用背景圖像來更好展現(xiàn)前景元素?

元素組

無論是設(shè)計(jì)還是開發(fā)，當(dāng)談到“模塊”這個詞的時候，廣義講，含義差不多，都是一組彼此聯(lián)系的元素。比如說一組鏈接便是一個鏈接模塊，圖像+覆蓋其上的標(biāo)題大文本也可以是標(biāo)題模塊。

有兩點(diǎn)需要考慮：模塊內(nèi)部元素的對齊?模塊與模塊之間的對齊?

模塊內(nèi)部元素的對齊：

當(dāng)然元素組并不一定要緊挨著，比如說Logo和導(dǎo)航鏈接這種，可能會在頂部和底部同時出現(xiàn)。這種元素組就一定要對齊，雖然當(dāng)你瀏覽底部的時候會看不到頂部，但是如果上下Logo沒有對齊，用戶能“感覺”出來，這也很重要，一致性設(shè)計(jì)。

模塊與模塊之間的對齊：

再比方說鏈接，某些導(dǎo)航鏈接可能做得稍稍復(fù)雜，文章開頭一個大標(biāo)題主鏈接，然后下文又提供了稍小的副鏈接，同時還畫出了一個圖標(biāo)，也能鏈接，這邊是一個復(fù)雜的導(dǎo)航模塊，可以嘗試著用這個模塊與其他模塊對齊。

總結(jié)

現(xiàn)在你對對齊有了一定的了解，希望從現(xiàn)在開始，設(shè)計(jì)時考慮對齊因素，讓設(shè)計(jì)更加有序，有組織的布局元素、元素族。利用柵格進(jìn)行對齊，盡量保證每一個元素都對齊合理。