提升網頁設計感的實用方法：合理利用對齊

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

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

推薦閱讀：
《深入探究photoshop輔助線（附工具推薦）》
《柵格化你的網頁》
《基于柵格的網站設計：附精彩案例和解析》

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

很多人不喜歡柵格系統，因為有所限制，他們不希望自己的創意受到妨礙。
通俗上講，柵格就是一大堆能夠幫助我們創造區塊的欄；而CSS中，排版的核心是盒模型，想要打破柵格很難。

為設計加入對齊

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

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

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

主要元素的對齊

文本
和CSS對齊相同：左、右、中，調整。十分的簡單

www.awwwards.com

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

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

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

wearemovingthings.com

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

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

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

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

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

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

有兩點需要考慮：模塊內部元素的對齊？模塊與模塊之間的對齊？

模塊內部元素的對齊：
當然元素組并不一定要緊挨著，比如說Logo和導航鏈接這種，可能會在頂部和底部同時出現。這種元素組就一定要對齊，雖然當你瀏覽底部的時候會看不到頂部，但是如果上下Logo沒有對齊，用戶能“感覺”出來，這也很重要，一致性設計。

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

總結

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

原文地址：tutsplus
優設網翻譯：@MartinRGB
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：