起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識視覺誤差會對 UI 造成什么樣的影響？(二)
上文主要講的是視覺尺寸和物理尺寸造成的視覺誤差，那本文主要談?wù)劜煌螤畹囊曈X對齊造成的視覺誤差。
不同形狀的視覺對齊
視覺對齊是視覺尺寸現(xiàn)象的一種邏輯延續(xù)，看看下面的圖形，他們看起來是相同的長度嗎？
視覺上，上面那一條是不是看起來比下面那一條長一點？然而，做一條輔助線，這兩個形狀是一樣長的。
我們做一些修改，再看一下？
允許下面超出上面形狀長度20個像素，作為補償尖峰之間的間隙并使兩個形狀在視覺上是相等對齊。
還有一些更復(fù)雜的不同形狀的例子。
因此，如果您正在制作一張折疊條紋和文字的海報，使其視覺對齊、利用上面知識，有意識超出形狀的其余部分，才能對齊。
那么如何對齊帶有背景的純文本段落呢？這取決于背景的深淺，如果顏色淺，可以將突出顯示的段落與文本的其余部分對齊。
由于背景顏色淺，不會造成不好的閱讀影響。
如果是深色背景的話，讓黑色背景與文本的其余部分對齊的話，使其內(nèi)部的白色文本與縮進部分放在一起。才能視覺對齊。
與淺色背景的情況不同，黑色背景具有相當大的視覺重量，如果目標是插入段落不突兀，最好按下圖??所示方式對齊。
相同的原理：將與按鈕和輸入框放一起。
左邊的淺色背景輸入框框體不會與標簽文字對齊，框內(nèi)文本才會與標簽對齊?！鞍l(fā)送”按鈕：右邊緣與輸入背景的右邊緣不完全對齊，為了達成視覺對齊故意地做短了一點點。
右側(cè)的深色邊框的輸入框的框體，就要與標簽文字對齊，而框內(nèi)容無需與標簽文字對齊?！鞍l(fā)送”按鈕：有一個三角形邊，形狀的緣故被故意地做長了一點，達成視覺對齊。
下面文本和圖標按鈕的對齊方式，看看下面的按鈕，文字看起來居中嗎？
下面看起來是對齊的，但實際不是，因為右邊是三角形的。這種形狀的按鈕文字必須靠左一些，視覺才對齊。
文本按鈕不僅具有水平對齊，而且還要具有垂直居中，以首位大寫字母算起，它是基于字體大寫字母高度的對齊方式，并且要注意行距調(diào)整。
基本上，大寫字母和按鈕邊緣上方和下方的空間是相等的。這很有意義，因為通常標題大寫，英文字母有更多的上升部字母（l，t，d，b，k，h），多余降部字母（y，j，g， p）。
icon按鈕的情況稍有不同，哪一個按鈕看起來對齊得比較好？
希望你已經(jīng)注意到左邊的按鈕有問題，它是由于不同的對齊方式而對齊錯誤的。第一個選項將該圖標默認為為矩形來對齊，那么就是錯誤的，右邊的對齊方式是對的。因為是三角形，所以不應(yīng)該當作正方形來看。
如果您為開發(fā)人員準備文件，則需要預(yù)留一些區(qū)域，以便他們可以將圖標置于背景上，視覺上保持一致。
“播放”按鈕也是如此。如果你直接對齊這些形狀，一個圓角矩形和一個三角形，他們會看起來很奇怪。
保證三個角到對應(yīng)邊的距離相等，并將此圓形與按鈕背景對齊。
重要的是要記住：
- 帶有角邊緣的形狀應(yīng)該拉長一些，在視覺上與矩形物體保持對齊。
- 文字按鈕制作調(diào)整行距對齊是最有效和廣泛使用的方法。
- 在按鈕上正確定位三角形圖標的有效方法之一是——保證每個角到邊的距離相等并將圓與背景對齊。
原文作者：Slava Shestopalov
原文鏈接：https://medium.muz.li/optical-effects-9fca82b4cd9a
本文由 @VisualCC 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pexels ，基于 CC0 協(xié)議
學習了，看了兩遍
我只能說 樓主的例子解析 和我的視覺觀感是相反的
好幾個例子我都看錯了，你說的長，我看上去短 ??
我也覺得。