UI 設(shè)計(jì)提示:盡量避免使用多重對齊方式
2023-03-26 13:50 作者:清大文森學(xué)堂 | 我要投稿

堅(jiān)持單一對齊(或盡可能少)有助于簡化界面,使其看起來更整潔。
UI 設(shè)計(jì)中最棘手和最重要的部分之一是對齊界面元素。正確對齊可以極大地提高美觀性和可讀性。
使用的對齊類型越多(左對齊、右對齊或居中對齊),界面看起來就越復(fù)雜和混亂。我們的眼睛在四處移動(dòng)時(shí)被迫更加努力地工作以嘗試跟隨每一個(gè)對齊。當(dāng)在一個(gè)小組件或界面部分中使用多個(gè)不同的對齊方式時(shí),這一點(diǎn)會(huì)突出顯示。
堅(jiān)持單一對齊(或盡可能少)有助于簡化界面,使其看起來更整潔。
示例 1
以下示例從居中對齊文本開始,然后更改為其他元素的左對齊。對齊的混合增加了不必要的復(fù)雜性,導(dǎo)致認(rèn)知負(fù)荷略有增加和界面不那么整潔。

左對齊所有界面元素更簡單、更整潔。筆直的左邊緣也提高了可讀性。

由于只有少量文本,還可以將所有元素居中對齊。使按鈕全寬,以幫助左手和右手用戶用一只手輕松觸及它。

示例 2
這是另一個(gè)示例,演示了使用較少的對齊方式如何幫助簡化界面。人名和角色居中對齊,照片右對齊,引用文本左對齊,星星居中對齊。當(dāng)查看信息時(shí),會(huì)感到眼睛呈鋸齒狀,看起來很凌亂。
將大部分元素向左對齊更簡單、更整潔。

還可以通過將所有文本對齊到左邊緣來提高可讀性。右對齊的照片是可以的,因?yàn)榇蠖鄶?shù)元素有 1 個(gè)對齊方式。

UI 設(shè)計(jì)不必如此困難。遵循邏輯規(guī)則系統(tǒng)(如上面的規(guī)則)可以幫助有效地做出明智的設(shè)計(jì)決策。
希望這個(gè)快速 UI 設(shè)計(jì)技巧對您有所幫助。