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

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

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

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

確定的問題

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

建議

我們希望圖標(biāo)的頂部邊緣處於藍(lán)色虛線，但我們經(jīng)常在紅色虛線上找到圖標(biāo)的頂部邊緣。

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

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

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

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

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

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

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

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

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

演示：之前和之後

示例2 - 無序列表

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

確定的問題

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

建議

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

從基線距離計算開始：

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

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

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

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

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

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

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

演示：之前和之後

結(jié)論

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

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

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