在用戶界面元素中使用圖標很有幫助。除元素標簽外，圖標還可以幫助用戶向用戶增強用戶元素的意圖。但是我不得不說，在瀏覽網(wǎng)絡(luò)時，我注意到一些圖標錯位。即使圖標的對齊正確，圖標也通常在元素更改的印刷樣式時響應(yīng)良好。

我注意到了幾個現(xiàn)實世界的例子，我想分享我對如何改善它們的想法。我希望這些技術(shù)能夠幫助其他人建立用戶界面元素，以更好地適應(yīng)印刷變化并維護設(shè)計的原始目標。

示例1-網(wǎng)站消息傳遞

我在流行的媒體網(wǎng)站上找到了這個消息傳遞示例。圖標的位置看起來不太糟糕。但是，當更改字體大小和線條高的某些元素樣式屬性時，它開始解開。

確定的問題

• 圖標絕對使用相對單元（REM）從左邊緣定位
• 由于圖標是從流中取出的，因此給父母賦予較大的左填充價值以幫助整體間距 - 理想情況下，我們的padding-x是均勻的，無論存在是否存在圖標，一切看起來都不錯
• rems中的圖標（SVG）也大小 - 這不允許調(diào)整其父母大小的字體大小

建議

我們希望圖標的頂部邊緣處于藍色虛線，但我們經(jīng)常在紅色虛線上找到圖標的頂部邊緣。

您是否曾經(jīng)在文本旁邊插入一個圖標，但它不會與文本的頂部保持一致？您可以將圖標移至位置，例如位置：相對；頂部：0.2EM。這效果足夠好，但是如果將來的印刷樣式變化，您的圖標看起來可能不對。

我們可以更可靠地定位圖標。讓我們使用元素的基線距離（從一線基線到下一行基線的距離）來解決此問題。

基線距離為字體大小 *線高。

我們將其存儲在CSS自定義屬性中：

 -  baselinedistance：calc（var（-fontsize） * var（ -  lineHeight））;

然后，我們可以使用（基線距離 - 字體大小） / 2的結(jié)果向下移動圖標。

 -  iConOffset：calc（（var（ -  baseLinedistance） -  var（-fontsize）） / 2）;

字體大小為1REM（16px）和1.5的線路高度，我們的圖標將移動4像素。

• 基線距離= 16px * 1.5 = 24px
• 圖標偏移=（24px - 16px） / 2 = 4px

演示：之前和之后

示例2 - 無序列表

我發(fā)現(xiàn)的第二個示例是無序的列表。它通過偽元素之前的A ::使用Web字體（Awesome）為其圖標。關(guān)于有序和無序列表的造型，有很多很棒的文章，因此我不會詳細介紹相對較新的:: Marker Pseudo-Element等。 Web字體通?？梢愿鶕?jù)所使用的圖標與圖標對齊方式合作。

確定的問題

• 沒有使用絕對定位 - 當使用偽元素時，我們通常不會使用flexbox，例如我們的第一個示例和絕對定位閃耀
• 列表項結(jié)合了填充和負面文本的組合來幫助布局 - 在考慮多行文本和圖標可伸縮性時，我永遠無法使其正常工作

建議

因為我們還將在解決方案中使用偽元素，所以我們將利用絕對定位。此示例的圖標大小比其相鄰副本（約2倍）大一點。因此，我們將改變計算圖標最高位置的方式。我們圖標的中心應(yīng)垂直與第一行的中心對齊。

從基線距離計算開始：

 -  baselinedistance：calc（var（-fontsize） * var（ -  lineHeight））;

使用（基線距離 - 圖標大?。?/ 2的結(jié)果向下移動圖標。

 -  iConOffset：calc（（（var（ -  baseLinedistance） -  var（-IconSize）） / 2）;

因此，使用1REM（16px）的字體大小，1.6的線路高度和圖標大小為2倍，副本（32px），我們的圖標將獲得-3.2像素的最高值。

• 基線距離= 16px * 1.6 = 25.6px
• 圖標偏移=（25.6px - 32px） / 2 = -3.2px

較大的字體大小為2REM（32px），線條高為1.2和64px圖標，我們的圖標將獲得-12.8像素的最高值。

• 基線距離= 32px * 1.2 = 38.4px
• 圖標偏移=（38.4px - 64px） / 2 = -12.8px

演示：之前和之后

結(jié)論

對于用戶界面圖標，我們有很多選項和技術(shù)。我們有SVG，Web字體，靜態(tài)圖像，:: Marker和List-Style-Type。人們甚至可以使用背景色和剪貼儀來獲得一些有趣的圖標結(jié)果。執(zhí)行一些簡單的計算可??以幫助以更優(yōu)雅的方式對齊和擴展圖標，從而實現(xiàn)更具防彈性的實現(xiàn)。

另請參閱：先前關(guān)于將圖標與文本結(jié)盟的討論。

以上是通過印刷對準和比例改進UI元素的圖標的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！