合理利用對齊

自譯外文 分類: 經驗/觀點 版權: 原作者: @MartinRGB 翻譯
26052 122 86 6
更新于:2017-01-25
0.0
編輯推薦

合理的對齊能讓你的設計更誘人,也能更方便用戶瀏覽,提供極佳的閱讀體驗。

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

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

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

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

為設計加入對齊

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

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

合理利用對齊

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

主要元素的對齊

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

2

www.awwwards.com

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

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

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

3

wearemovingthings.com

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

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

4

 

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

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

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

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

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

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

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

總結

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

UICN翻譯:@MartinRGB 

Kiriya

萌新搬磚工https://dribbble.com/Kiriya

4151粉絲/58關注

助人為樂
2018設計趨勢【文字教程】8bit像素神器——MagicaVoxel

Kiriya

Kiriya

萌新搬磚工https://dribbble.com/Kiriya

助人為樂

掃描二維碼
去手機端查看海報

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

广西福彩官网