當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何设置ad18捕捉图标_图标设计中的像素捕捉

發布時間：2023/12/9 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了如何设置ad18捕捉图标_图标设计中的像素捕捉小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如何設置ad18捕捉圖標

More in the iconography series:? Foundations of Iconography? 7 Principles of Icon Design? 5 Ways to Create a Settings Icon? Icon Grids & Keylines Demystified? 3 Classic Icon Families

We all want our designs to display sharp on all platforms, for all our users. To achieve this goal for digital icons, a best practice has held the standard: it is recommended to pixel-fit or pixel-snap icons to sit precisely on a pixel grid. This means that all strokes and shapes snap to 1px increments and are positioned on the pixel.

我們都希望我們的設計能在所有平臺上為所有用戶展示出清晰的圖像。為了實現數字圖標的這一目標，最佳實踐已成為標準：建議對像素適合或像素捕捉的圖標精確放置在像素網格上。這意味著所有筆觸和形狀均以1px增量對齊并位于像素上。

Most icon guides and design systems advocate this in their specs — Google Material, Adobe Spectrum, IBM Carbon, and Firefox Photon to name a few.

大多數圖標指南和設計系統在其規范中都提倡這樣做-僅舉幾例，例如Google Material ， Adobe Spectrum ， IBM Carbon和Firefox Photon 。

The rationale is that because digital images are rendered to a matrix of pixels on screen, aligning elements to whole pixels produces sharper results; placing elements on subpixels or half pixels leads to fuzzier results.

基本原理是，由于數字圖像被渲染到屏幕上的像素矩陣，因此將元素與整個像素對齊可以產生更清晰的結果；將元素放在亞像素或半像素上會導致模糊的結果。

Though curved and angled lines can’t perfectly conform to a square pixel, the idea is to get as close as possible.

盡管彎曲和成角度的線不能完全符合正方形像素，但其想法是盡可能地靠近。

Makes sense, but I wanted to dig a little deeper. With today’s high resolution screens and potential non-integer scaling (e.g., from density-independent pixels), does this guidance still hold true? How important is pixel-snapping in practice? What effects do device, browser, file type, design software, and display magnification have on an icon’s render?

很有道理，但我想更深入一點。在當今的高分辨率屏幕和潛在的非整數縮放(例如，來自與密度無關的像素 )上的情況下，此指南仍然適用嗎？像素捕捉在實踐中有多重要？設備，瀏覽器，文件類型，設計軟件和顯示放大率對圖標的渲染有什么影響？

To answer these questions, I conducted a test.

為了回答這些問題，我進行了測試。

程序 (Procedure)

I created 4 test icons on a 48 x 48px canvas, using a 2px stroke and a range of straight lines and curves.

我使用2px筆劃以及一系列直線和曲線在48 x 48px的畫布上創建了4個測試圖標。

Variant 1 was snapped to 1 pixel
變體1捕捉到1個像素
Variant 2 was snapped to .5 pixels
版本2捕捉到0.5像素
Variant 3 was snapped to .25 pixels
變體3 被捕捉到.25像素
Variant 4 sat on an odd subpixel number (.315 pixels)
變體4位于奇數子像素編號( .315像素 )

Test stimuli: 4 variants測試刺激：4個變體

I exported these from both Illustrator and Sketch, as both SVG and PNG, and displayed them in an HTML page at 4 sizes (the 48 x 48px original, 64 x 64px, 32 x 32px, 24 x 24px). I then ran the test by examining the assets across 7 devices and 3 browsers:

我將它們從Illustrator和Sketch導出為SVG和PNG ，并在HTML頁面中以4種尺寸顯示它們(原始尺寸48 x 48px ， 64 x 64px ， 32 x 32px ， 24 x 24px )。然后，我通過檢查7種設備和3種瀏覽器上的資產來運行測試：

MacBook Pro (Chrome, Firefox, Safari)
MacBook Pro(Chrome，Firefox，Safari)
Lenovo Thinkpad (Chrome, Firefox)
聯想Thinkpad(Chrome，Firefox)
Windows 10 gaming PC with an Acer P244W monitor (Chrome, Firefox)
帶有Acer P244W顯示器的Windows 10游戲PC(Chrome，Firefox)
iPad Pro (Chrome, Firefox, Safari)
iPad Pro(Chrome，Firefox，Safari)
Pixel 3a (Chrome, Firefox)
Pixel 3a(Chrome，Firefox)
Motorola Moto E4 (Chrome, Firefox)
摩托羅拉Moto E4(Chrome，Firefox)
iPhone 11 Pro (Chrome, Firefox, Safari)
iPhone 11 Pro(Chrome，Firefox，Safari)

I repeated the process 3 times to be confident in what I was seeing.

我重復了3次此過程，以對自己看到的內容充滿信心。

結果匯總 (Results Summary)

The detailed results are nuanced. For our purposes, I’ll summarize the takeaways here. Unfortunately, I won’t be able to illustrate all the findings; that would be a bit like talking about the matrix while inside the matrix. 🙃

詳細結果細微差別。為了我們的目的，我將在這里總結一下要點。不幸的是，我無法說明所有發現。這有點像在矩陣內部談論矩陣。 🙃

Pixel-snapping to 1px and .5px produced the best results overall, but was not always make-or-break. In some cases, the effects of pixel-snapping was more magnified, in others less so. Not snapping on the Acer monitor created extremely fuzzy results while Apple devices were much more forgiving in their rendering of all variants. It seemed that the lower the resolution, the more important pixel-snapping was. Sometimes snapping to the pixel was sharpest (ThinkPad, Acer), sometimes snapping to the half pixel was sharpest (Pixel 3a, Motorola in one case), and sometimes snapping to 1px and .5px were tied (Apple devices: MacBook Pro, iPhone 11 Pro, iPad Pro). Snapping to .5px was the fuzziest variant on the Acer. It’s important to caveat that I evaluated sharpness at a very close distance (~4–5 inches) from the screen. There may be a bit more tolerance at a normal viewing distance.
將像素捕捉到1px和.5px總體上可獲得最佳效果，但并非總是成敗。 在某些情況下，像素捕捉的影響會更大，而在其他情況下，則不會。如果沒有在Acer顯示器上捕捉快照，則會產生極其模糊的結果，而Apple設備在渲染所有變體時要寬容得多。 分辨率越低，像素捕捉越重要。 有時捕捉到像素最清晰(ThinkPad，Acer)，有時捕捉到半像素最清晰(Pixel 3a，摩托羅拉在一種情況下)，有時捕捉到1px和.5px 并列 (Apple設備：MacBook Pro，iPhone 11) Pro，iPad Pro)。捕捉到.5px是Acer上最模糊的版本。需要警告的一點是，我評估了距屏幕非常近的距離(約4-5英寸)的清晰度。在正常觀看距離下可能會有更多的公差。
The device (hardware + operating system + monitor) had a bigger effect on rendering than the browser. Differences across browsers within a device were slight, while the differences were much more pronounced between devices. For example, the Pixel 3a was pretty even-handed in it’s rendering, anti-aliasing all test stimuli fairly well. In contrast, the Lenovo Thinkpad display had an overall sharper, more jagged look. When it comes to which level of snap was sharpest, devices running Windows 10 shared similar results, devices running Android shared similar results, and devices running an Apple OS shared similar results. The operating system seems to have a big influence on how screen rendering is handled.
該設備(硬件+操作系統+監視器)比瀏覽器對渲染的影響更大。 設備中瀏覽器之間的差異很小，而設備之間的差異則更為明顯。例如，Pixel 3a的渲染相當均勻，可以很好地抗鋸齒化所有測試刺激。相比之下，Lenovo Thinkpad顯示器的整體外觀更加清晰，參差不齊。當談到最清晰的快照級別時，運行Windows 10的設備共享相似的結果，運行Android 10的設備共享相似的結果，運行Apple OS的設備共享相似的結果。 操作系統似乎對屏幕渲染的處理方式有很大影響 。
More factors outside of icon design and export confound sharpness of rendering. Magnifying the browser display (to 110%, 125%, 200%, etc.) changed which icons looked sharper. Resizing icons in code (to 24px, 32px, 64px) similarly led to unpredictable results. In theory, the 24px icon (1px stroke) would be sharper than 32px icon (1.33px stroke) but this was not always the case. Beyond these, there are many more considerations to test for: graphics cards, anti-aliasing preferences, privacy screens, viewer’s distance from the screen, ambient lighting conditions, etc.
圖標設計和導出之外的更多因素會混淆渲染的清晰度。 放大瀏覽器顯示(分別為110％，125％，200％等)，可以使圖標看起來更清晰。將代碼中的圖標大小調整為24px，32px，64px同樣會導致無法預測的結果。從理論上講，24px圖標(1px筆畫)比32px圖標(1.33px筆畫)更銳利，但這并非總是如此。除此之外，還有許多要測試的注意事項：圖形卡，抗鋸齒首選項，隱私屏幕，查看者與屏幕的距離，環境照明條件等。
Illustrator vs. Sketch exports were comparable, though I preferred Sketch slightly. For SVGs, assets from Illustrator and Sketch were indistinguishable from each other. For PNGs, the difference was more noticeable, especially zoomed in—but you’ll probably never be viewing icons at 3200% in use. Sketch seems to apply smoother, finer antialiasing.
Illustrator與Sketch的導出效果相當，盡管我稍微偏愛Sketch。 對于SVG，Illustrator和Sketch的資產彼此無法區分。對于PNG，差異更明顯，尤其是放大-但是您可能永遠不會以3200％的使用率查看圖標。草圖似乎可以應用更平滑，更精細的抗鋸齒。

SVGs outperformed PNGs. In the laptops and tablets, SVG vs. PNG performance was comparable. In the mobile devices, SVGs were clearly sharper. Overall, SVGs were much more forgiving of not pixel-snapping and more flexible to scale up and down since they are vector-based.
SVG優于PNG。 在筆記本電腦和平板電腦中，SVG與PNG的性能相當。在移動設備中，SVG明顯更清晰。總體而言，由于SVG是基于矢量的，因此它們對像素捕捉的寬容度更高，并且在縮放時更靈活。
‘Sharper’ was not always better and probably needs clearer definition. There are different kinds of sharp. We opened with a general understanding of the word but there’s some nuance when we apply it. In my study, sometimes icons appeared sharp but undesirably aliased with jagged edges (Motorola, Thinkpad). There is a sweet spot to define. Perhaps ‘crisp’ would be a better word to describe sharp, but smooth.
“更銳利”并不總是更好，可能需要更清晰的定義。 有不同種類的鋒利的東西。我們最初對這個詞有一個大致的了解，但是在使用它時會有些細微差別。在我的研究中，有時會出現圖標尖銳但不希望別名鋸齒邊緣 (摩托羅拉，Thinkpad的)。有一個定義的最佳位置。也許用“酥脆”來形容敏銳而流暢的詞是一個更好的詞。

后記：期望與現實 (Afterword: Expectation vs. Reality)

Pixel-snapping is preferred, but don’t obsess. If it gets in the way of a clear message or a desired aesthetic, let it go.

首選像素捕捉，但不要癡迷。如果它妨礙了明確的信息或理想的美觀，請放手。

Despite the strict specifications put forth by the industry, there’s a severe lack of follow-through if you examine the digital products, websites, icon libraries, and source files around us. A quick audit of the icons on Facebook, Instagram, Google, and Twitter landing pages reveals that some are pixel-snapped, but many are not. A deeper review of IBM Carbon’s icons reveals that they occasionally bend the rules:

盡管業界提出了嚴格的規范，但是如果您檢查一下我們周圍的數字產品，網站，圖標庫和源文件，則仍然嚴重缺乏后續操作。對Facebook，Instagram，Google和Twitter登陸頁面上的圖標進行的快速審核顯示，其中一些圖標被像素捕捉了，但是很多卻沒有。更深入地回顧IBM Carbon的圖標表明它們偶爾會違反規則：

The reason for the disparity between the guidance and the execution might simply be that pixel-snapping is hard to adhere to at scale, that sometimes there is a good reason to use subpixels to get the point across (pixel-snapping is an art and a science), or perhaps pixel-snapping doesn’t matter as much as we say it does. Do your own investigation and make sure to check the more critical boxes first:

指導與執行之間存在差異的原因可能僅僅是像素抓取難以大規模地堅持，有時有充分的理由使用子像素來表達觀點(像素抓取是一門藝術，科學)，或者像素捕捉并不像我們所說的那么重要。做您自己的調查，并確保首先選中更重要的框：

Make sure you aren’t sacrificing the integrity of the message or the integrity of the shapes to snap perfectly.

確保您沒有犧牲消息的完整性或形狀的完整性以完美捕捉。

When we started designing for digital, we coded everything to exact pixels to get the look we wanted. We were set on pixel-perfect. But over time, we realized the medium itself is fluid, and our canvas not exact. Our code adapted to serve a myriad of form factors by using relative units, percentage-based content blocks, flexible flowing of content. I’d propose a similar adaptive approach to icons — give up a little precision for much more flexibility. Many icon sets like Feather and Remix are doing just that.

當我們開始為數字設計時，我們將所有內容編碼為精確的像素，以得到我們想要的外觀。我們被設置為像素完美的。但是隨著時間的流逝，我們意識到介質本身是流動的，而我們的畫布并不精確。我們的代碼通過使用相對單位，基于百分比的內容塊，靈活的內容流來適應多種形式的因素。我將為圖標提出一種類似的自適應方法-放棄一些精度以提高靈活性。許多圖標集(例如Feather和Remix)就是這樣做的。

🙏 Thanks to: Toby Fried, Lonny Huff, and Monica Chang

to 感謝：Toby Fried，Lonny Huff和Monica Chang

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。對系統性種族主義保持沉默是不可行的。建立您相信的設計社區。

翻譯自: https://uxdesign.cc/pixel-snapping-in-icon-design-a-rendering-test-6ecd5b516522