對齊是四大視覺法則之一,對齊的法則看似簡單,我們都懂左對齊、右對齊、居中對齊,初中就學過的對齊知識,幹活時卻老忘,使用時總是用不好。下面總結了一些規律和使用方式,幫助大家掌握和理解在不同情境下使用對齊法則。
一、左對齊:
左對齊是閱讀效率最高的對齊方式,能很好的适應人眼習慣, 人的浏覽視線都是從左往右移。
但左對齊容易造成右端留白過多,整體視覺失衡,
但是這種對齊方式不破壞文字本身的起伏和韻律,能保證較好的閱讀體驗。
——使用方式:
1、根據構圖:
當版面是左右式構圖時用左對齊。畫面的重心在左邊,文字在右邊時,文字采用左對齊更合适。(這裡的重心是視覺上的焦點,并不是一個單獨的圖片或圖形,簡單來說就是畫面中最有特點、最吸引注意力的主體)。
2、根據輪廓:
契合背景的外形輪廓,凹凸的一面和凹凸的一面對齊,比如背景圖片有凹凸不平的一面和整齊的一面,由于左對齊的右邊也是凹凸不平的,畫面中有凹凸的一面,就用左對齊的凹凸面與背景中的凹凸面契合。
3、大段文字:
由于左對齊方式比較容易閱讀,版面中有大段需要閱讀的文案,最好采用左對齊的方式排版。
例如「豆瓣、簡書、知乎」等知名網站,無論手機APP文字或Web文字都采用的左對齊方式。
4、産品展示:
APP的設計中的列表信息展示采用的就是左對齊,
比如在淘寶的産品介紹裡,左邊産品,右邊文字信息用左對齊。
5、當版面的重心在中間時,兩端的文字采用左對齊。
二、右對齊:
①、右對齊的方式與人的視線流動相反,會給人不自然的感受,
②、但運用的好,這種對齊方式會顯得比較個性。
——使用方式:
使用的頻率不太高,有時候隻是因為需要排版上更平衡,才使用右對齊。
當版面的構圖為左右式時,且視覺重心在右邊時,左邊的文字采用右對齊,與右邊的視覺中心(圖片或圖形)相互平衡。
三、居中對齊:
①、居中對齊顯得很正式、嚴肅,
②、一種搶奪注意力的對齊方式,閱讀性上可以牢牢抓住用戶眼球。
——使用方法:
1、構圖形式:
版面采用上下式構圖,最适合搭配的就是居中對齊,比如圖片在上,文字信息在下,文字采用居中對齊,這樣更具有穩定性。
左右式式構圖也可以使用居中對齊,比如圖片在左,文字在右采用居中對齊。
2、上下滾動的信息流:
如QQ音樂,酷狗音樂的向上滾動的歌詞,滾動到當前居中的歌詞是比周圍文字放大很多的。
3、或者細窄的居中式詩文、或其他優美的文字。
4、一些高端、成熟的品牌比較喜歡采用,顯得比較穩重。
5、喊口号的宣傳海報最好也采用居中對齊,吸引人的注意。
使用用非常醒目的口号文字
注意:居中對齊具有對空間的獨占性。也就是說,在同一個單元模塊中,最好隻有一個居中對齊的内容,這樣可以充分發揮居中對齊的大氣。 如果還有其他對齊的元素組,就會削弱居中對齊的獨占性。
四、兩端對齊:
①、兩端對齊是指将文字的左端和右端元素均對整齊的方式,通過調整字間距的方式,将段落文字強制處理成四方形,達到整齊劃一,工整嚴謹的視覺效果。
②、左對齊、和右對齊、居中對齊都有波瀾起伏,而兩端對齊打破了文字和空白之間形成的韻律,閱讀起來未必舒适。(特别是在大量中英文混合的情境下)
——使用方法:
兩端對齊使用頻率較低,主要用于特殊文本處理:
①、通常運用在閱讀性文本中,有比較長的文本段,比如公司或産品的詳情頁中。(比如網站上一個電子産品的介紹頁)
②、以及「微信讀書、部分微信公衆号」裡的文字内容。
五、頂對齊與底對齊
——使用方法:
使用頻率較低,當以下情況使用:
1、文字縱向排版時
一般縱向排版都是頂對齊,這樣可才相對容易更好的閱讀。
2、為營造出中國風、古代的文化氛圍時
3、段落字體是楷體、或則宋體這樣的中文書法字體時。
4、數據圖表
為了說明數據圖,文字采用豎向排布,通常采用底對齊。
——總結回顧:
常用的對齊方式是左對齊,居中對齊,使用頻率較低的非常規對齊方式是:兩端對齊,頂/底對齊,右對齊的使用頻率介于二者之間。
pc版的網站文本一般采用左對齊或者居中對齊。
移動端網站文本的對齊主要采用的是左對齊或兩端對齊。
上下式構圖采用居中對齊最好,當然,也可以采用左對齊。
左右式構圖采用左對齊最好,當然,也可以采用右對齊、居中對齊。
對齊的主要作用就是産生信息解構,将信息歸類分組:
比如在蘋果的登錄頁面中,标題和輸入框利用了不同對齊方式拉開了層次。
請登錄标題和取消按鈕是左對齊的,而輸入框與提示文字則是居中對齊的。
一方面,不同的對齊方式拉開了标題和内文的層次。
另一方面,居中對齊具有吸引注意力的作用,将用戶的視線引入到了輸入框的上面,
同一種對齊方式,加強了提示文字與輸入框之間的關聯。
同時,利用字體和大小差異将内容劃分明确,明确了哪些是需要輸入的,哪些隻是描述。
有話要說...