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

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

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

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

確定的問題

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

建議

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

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

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

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

我們將其存儲(chǔ)在CSS自定義屬性中：

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

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

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

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

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

演示：之前和之后

示例2 - 無序列表

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

確定的問題

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

建議

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

從基線距離計(jì)算開始：

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

使用（基線距離 - 圖標(biāo)大?。?/ 2的結(jié)果向下移動(dòng)圖標(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é)論

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

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

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