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

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

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

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

很多人不喜歡柵格系統，因為有所限制，他們不希望自己的創(chuàng )意受到妨礙。

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

為設計加入對齊

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

要注意：不要因為對齊，而使設計過(guò)于死板，讓網(wǎng)站喪失了趣味性和探索性。對齊意味著(zhù)你需要開(kāi)始鉆研布局技巧和柵格了——不過(guò)這次不用6欄柵格，用的是4欄。

合理的利用對齊來(lái)提升網(wǎng)頁(yè)的設計感,PS教程,

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

主要元素的對齊

文本

和CSS對齊相同：左、右、中，調整。十分的簡(jiǎn)單

合理的利用對齊來(lái)提升網(wǎng)頁(yè)的設計感,PS教程,

www.awwwards.com

對齊和可讀性，需要好好權衡。不能光顧著(zhù)對齊，而忽略了整體設計和可讀性。

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

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

合理的利用對齊來(lái)提升網(wǎng)頁(yè)的設計感,PS教程,

wearemovingthings.com

不同尋常的對齊方式還要考慮到文化差異，有部分文化從右到左閱讀，大部分文化都是從上到下，從左到右。因為大部分文化都是從左到右閱讀，所以盡量不要采用右對齊，可讀性很糟糕。右對齊一般在頁(yè)底呈現，展示聯(lián)系地址、聯(lián)系信息，或者在頂部出現，展示導航鏈接

圖像

圖像的對齊很麻煩，因為每一張圖的尺寸都不一樣。小尺寸的圖像易于放置，而且不影響內容。大的圖像會(huì )打破閱讀節奏，因此最好不要用過(guò)大的圖像。一般有兩種方法：第一種是把圖像放在內容之外(開(kāi)頭或者結尾)，另一種方法是文本內穿插圖片。第一種方法很簡(jiǎn)單，可以采用全尺寸的大圖，看起啦效果也不錯，方便響應式設計。

合理的利用對齊來(lái)提升網(wǎng)頁(yè)的設計感,PS教程,

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

在文本區域內嵌入圖像，如果做得巧妙，文圖結合的夠好，會(huì )提高可讀性、趣味性。

背景圖像

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

元素組

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

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

模塊內部元素的對齊：

當然元素組并不一定要緊挨著(zhù)，比如說(shuō)Logo和導航鏈接這種，可能會(huì )在頂部和底部同時(shí)出現。這種元素組就一定要對齊，雖然當你瀏覽底部的時(shí)候會(huì )看不到頂部，但是如果上下Logo沒(méi)有對齊，用戶(hù)能“感覺(jué)”出來(lái)，這也很重要，一致性設計。

模塊與模塊之間的對齊：

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

總結

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