實例講解UI設計中的對齊

  • A+
所屬分類:經驗思維

本文來源: 酸梅干超人(公眾號: 超人的電話亭), 共 1675 字

UI設計中,對齊是一個很神奇的細節,你說它難吧,如今的軟件一個個全有自動輔助對齊的功能,對齊一下有啥難的?但你說它不難吧,正因為很多新人覺得它太簡單了,從而極易忽視對齊上出現的問題,所以我覺得有必要來講講對齊的自審。

 

實例講解UI設計中的對齊

我想大家一定都清楚什么是對齊,這個問題顯然不成問題,那我們換一個問題:為什么要對齊?從格式塔原理中脫胎而來的四要素,要追根溯源,探究問題的本質,還需要回到格式塔。

其一,它來源于格式塔連續性原理 (Law of Continuity) :在知覺過程中人們往往傾向于使對象的直繼續成為直線,曲線繼續成為曲線。換而言之,對齊是一種視覺引導,用戶可以通過已存在元素的對齊來達成預期:下方未出現的元素,依然符合之前的對齊規律;反之,視覺流被突然打斷,非常膈應人。

實例講解UI設計中的對齊

其二,它還來源于格式塔連通性原理 (Law of Uniform Connectedness):視覺上相連的元素傾向于被感知為具有更強的相關性 (相較于不相連的元素)。而隱性的對齊線,恰好可以成為這么一種連通線,成為連接相關元素的一條通道。

實例講解UI設計中的對齊

所以,為什么要對齊?不僅僅是對用戶視覺瀏覽習慣的考量,還是對頁面中信息組織的考量,一方面利用對齊,符合用戶的視覺慣性,降低用戶閱讀負擔;另一方面利用不同的對齊形式,能有效組織信息,讓頁面規整、有秩序、有質感。

 

實例講解UI設計中的對齊

跟親密性不一樣,對齊是大多數設計師在設計伊始就已經注意到并且時時刻刻在做的工作,所以如果回過來檢查,下意識就會認為自己已經做完了,讓對齊變成了最容易忽視的問題。鑒于此,我建議大家首先養成做圖時對齊的意識與習慣,在進行每一個元素的排布時,首先考慮它該怎么與周圍元素對齊,每一個元素需要至少一個對齊來「依靠」,不然它就虛不受力,是不踏實的,這一點非常重要。除開前期的對齊,后期在復審稿子時,對齊雖然容易忽視,但一旦正視,也極為容易發現。對齊缺失或對齊軸線過多易使頁面形成信息排布混亂、元素之間聯系成迷,或如上一段所說元素虛不受力、位置突兀,讓用戶產生「它為什么會在這里?」的疑問。

 

實例講解UI設計中的對齊?

1.遍查元素邊距和間距

這一步非常簡單不用過多贅述,但還是比較枯燥的,如果對自己的做圖習慣沒有百分之百自信的話,我建議還是用笨辦法一點一點檢查,做到不遺漏任何一個pt。

實例講解UI設計中的對齊

當然解決問題最好的辦法是避免問題的出現,所以養成隨時對齊、隨時檢查的做圖習慣能夠有效減少對齊自審時的工作量。

2.劃出頁面中所有元素的對齊線

從這一步開始,就不僅僅是按一下方向鍵就能解決的問題了,對齊線雜亂的源頭是頁面模塊全局性規劃的不到位,做圖時沒有整體性思考過頁面中的元素排布,特別是當頁面元素多且復雜時,這一點尤其突出。當然這里我們不講怎么做圖,我們講當問題出現時,該怎么修改。以之前學員畫的 slowly 首頁為例。

實例講解UI設計中的對齊

頁面內文字段越多 (尤其是零散的文字段),越容易出現因對齊軸線過多導致頁面視覺效果混亂的情況,這時候我們需要劃出所有元素的對齊軸線,通過觀察這些零碎到讓人抓狂的對齊軸線,我們能夠更直觀得認識頁面混亂問題的根源,并方便后續修改。

實例講解UI設計中的對齊

3.盡量縮減對齊方式

怎么縮減呢?我們先看看成熟的線上案例。

實例講解UI設計中的對齊

比如淘寶,淘寶的首頁因為瓷片區的存在比 slowly 更為復雜。當我們畫出淘寶的對齊軸線,可以發現盡管它元素更多,幾乎不存在單個元素或字段自成一種對齊的情況。

1.每一根對齊軸線的添加都需要十足的理由。例如為什么要給瓷片區的圖片添加居中對齊的軸線?因為這些圖片無法精確控制其外形和尺寸,有且只有居中對齊才能穩定其重心,讓它看起來整齊。

2.盡可能多的縱向元素使用同一對齊軸線。這樣可以有效縮減對齊軸線的數量,盡可能貼合格式塔連續性原理,使上下元素建立一種流暢的閱讀體驗。故而正確的對齊方式應該是:慎重思考添加每一條對齊軸線的理由,每一條對齊軸線讓盡可能多的元素通用,甚至跨組件對齊。

知道了這一點,slowly 的案例修改起來就比較輕松了,修改之后如下:

實例講解UI設計中的對齊

結尾

上述案例中的對齊問題雖然略有夸張,卻是新手實實在在會犯的的錯誤,我曾不止一次兩次的對自己的學生反復強調這一點,希望這篇文章能夠幫助大家正視對齊,重視對齊。

?
  • 版權聲明:本文源自 酸梅干超人(公眾號: 超人的電話亭), 共 1675 字。
  • 轉載請注明,本文鏈接:實例講解UI設計中的對齊

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: