視覺誤差會對 UI 造成什么樣的影響?(二)

5 評論 3682 瀏覽 21 收藏 8 分鐘

上文主要講的是視覺尺寸和物理尺寸造成的視覺誤差,那本文主要談?wù)劜煌螤畹囊曈X對齊造成的視覺誤差。

不同形狀的視覺對齊

視覺對齊是視覺尺寸現(xiàn)象的一種邏輯延續(xù),看看下面的圖形,他們看起來是相同的長度嗎?

視覺上,上面那一條是不是看起來比下面那一條長一點?然而,做一條輔助線,這兩個形狀是一樣長的。

我們做一些修改,再看一下?

允許下面超出上面形狀長度20個像素,作為補(bǔ)償尖峰之間的間隙并使兩個形狀在視覺上是相等對齊。

還有一些更復(fù)雜的不同形狀的例子。

因此,如果您正在制作一張折疊條紋和文字的海報,使其視覺對齊、利用上面知識,有意識超出形狀的其余部分,才能對齊。

那么如何對齊帶有背景的純文本段落呢?這取決于背景的深淺,如果顏色淺,可以將突出顯示的段落與文本的其余部分對齊。

由于背景顏色淺,不會造成不好的閱讀影響。

如果是深色背景的話,讓黑色背景與文本的其余部分對齊的話,使其內(nèi)部的白色文本與縮進(jìn)部分放在一起。才能視覺對齊。

與淺色背景的情況不同,黑色背景具有相當(dāng)大的視覺重量,如果目標(biāo)是插入段落不突兀,最好按下圖??所示方式對齊。

相同的原理:將與按鈕和輸入框放一起。

左邊的淺色背景輸入框框體不會與標(biāo)簽文字對齊,框內(nèi)文本才會與標(biāo)簽對齊。“發(fā)送”按鈕:右邊緣與輸入背景的右邊緣不完全對齊,為了達(dá)成視覺對齊故意地做短了一點點。

右側(cè)的深色邊框的輸入框的框體,就要與標(biāo)簽文字對齊,而框內(nèi)容無需與標(biāo)簽文字對齊。“發(fā)送”按鈕:有一個三角形邊,形狀的緣故被故意地做長了一點,達(dá)成視覺對齊。

下面文本和圖標(biāo)按鈕的對齊方式,看看下面的按鈕,文字看起來居中嗎?

下面看起來是對齊的,但實際不是,因為右邊是三角形的。這種形狀的按鈕文字必須靠左一些,視覺才對齊。

文本按鈕不僅具有水平對齊,而且還要具有垂直居中,以首位大寫字母算起,它是基于字體大寫字母高度的對齊方式,并且要注意行距調(diào)整。

基本上,大寫字母和按鈕邊緣上方和下方的空間是相等的。這很有意義,因為通常標(biāo)題大寫,英文字母有更多的上升部字母(l,t,d,b,k,h),多余降部字母(y,j,g, p)。

icon按鈕的情況稍有不同,哪一個按鈕看起來對齊得比較好?

希望你已經(jīng)注意到左邊的按鈕有問題,它是由于不同的對齊方式而對齊錯誤的。第一個選項將該圖標(biāo)默認(rèn)為為矩形來對齊,那么就是錯誤的,右邊的對齊方式是對的。因為是三角形,所以不應(yīng)該當(dāng)作正方形來看。

如果您為開發(fā)人員準(zhǔn)備文件,則需要預(yù)留一些區(qū)域,以便他們可以將圖標(biāo)置于背景上,視覺上保持一致。

“播放”按鈕也是如此。如果你直接對齊這些形狀,一個圓角矩形和一個三角形,他們會看起來很奇怪。

保證三個角到對應(yīng)邊的距離相等,并將此圓形與按鈕背景對齊。

重要的是要記?。?/strong>

  1. 帶有角邊緣的形狀應(yīng)該拉長一些,在視覺上與矩形物體保持對齊。
  2. 文字按鈕制作調(diào)整行距對齊是最有效和廣泛使用的方法。
  3. 在按鈕上正確定位三角形圖標(biāo)的有效方法之一是——保證每個角到邊的距離相等并將圓與背景對齊。

上篇:視覺誤差會對UI造成什么樣的影響?(一)

 

原文作者:Slava Shestopalov

原文鏈接:https://medium.muz.li/optical-effects-9fca82b4cd9a

本文由 @VisualCC 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 學(xué)習(xí)了,看了兩遍

    回復(fù)
  2. 我只能說 樓主的例子解析 和我的視覺觀感是相反的

    來自廣東 回復(fù)
  3. 好幾個例子我都看錯了,你說的長,我看上去短 ??

    來自上海 回復(fù)
    1. 我也覺得。

      回復(fù)