通過印刷對準和比例改進UI元素的圖標

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

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

示例1-網站消息傳遞

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

確定的問題

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

建議

我們希望圖標的頂部邊緣處於藍色虛線，但我們經常在紅色虛線上找到圖標的頂部邊緣。

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

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

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

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

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

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

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

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

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

演示：之前和之後

示例2 - 無序列表

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

確定的問題

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

建議

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

從基線距離計算開始：

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

使用（基線距離 - 圖標大小） / 2的結果向下移動圖標。

 -  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

演示：之前和之後

結論

對於用戶界面圖標，我們有很多選項和技術。我們有SVG，Web字體，靜態圖像，:: Marker和List-Style-Type。人們甚至可以使用背景色和剪貼儀來獲得一些有趣的圖標結果。執行一些簡單的計算可​​以幫助以更優雅的方式對齊和擴展圖標，從而實現更具防彈性的實現。

另請參閱：先前關於將圖標與文本結盟的討論。

以上是通過印刷對準和比例改進UI元素的圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！