如何設(shè)置ad18捕捉圖標(biāo)

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.

我們都希望我們的設(shè)計能在所有平臺上為所有用戶展示出清晰的圖像。 為了實現(xiàn)數(shù)字圖標(biāo)的這一目標(biāo)，最佳實踐已成為標(biāo)準(zhǔn)：建議對像素適合或像素捕捉的圖標(biāo)精確放置在像素網(wǎng)格上。 這意味著所有筆觸和形狀均以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.

大多數(shù)圖標(biāo)指南和設(shè)計系統(tǒng)在其規(guī)范中都提倡這樣做-僅舉幾例，例如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.

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

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?

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

To answer these questions, I conducted a test.

為了回答這些問題，我進(jìn)行了測試。

程序 (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的畫布上創(chuàng)建了4個測試圖標(biāo)。

• 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位于奇數(shù)子像素編號( .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導(dǎo)出為SVG和PNG ，并在HTML頁面中以4種尺寸顯示它們(原始尺寸48 x 48px ， 64 x 64px ， 32 x 32px ， 24 x 24px )。 然后，我通過檢查7種設(shè)備和3種瀏覽器上的資產(chǎn)來運(yùn)行測試：

• MacBook Pro (Chrome, Firefox, Safari)

  MacBook Pro(Chrome，Firefox，Safari)

• Lenovo Thinkpad (Chrome, Firefox)

  聯(lián)想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.

我重復(fù)了3次此過程，以對自己看到的內(nèi)容充滿信心。

結(jié)果匯總 (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. 🙃

詳細(xì)結(jié)果細(xì)微差別。 為了我們的目的，我將在這里總結(jié)一下要點。 不幸的是，我無法說明所有發(fā)現(xiàn)。 這有點像在矩陣內(nèi)部談?wù)摼仃嚒?🙃

• 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顯示器上捕捉快照，則會產(chǎn)生極其模糊的結(jié)果，而Apple設(shè)備在渲染所有變體時要寬容得多。 分辨率越低，像素捕捉越重要。 有時捕捉到像素最清晰(ThinkPad，Acer)，有時捕捉到半像素最清晰(Pixel 3a，摩托羅拉在一種情況下)，有時捕捉到1px和.5px 并列 (Apple設(shè)備：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.

  該設(shè)備(硬件+操作系統(tǒng)+監(jiān)視器)比瀏覽器對渲染的影響更大。 設(shè)備中瀏覽器之間的差異很小，而設(shè)備之間的差異則更為明顯。 例如，Pixel 3a的渲染相當(dāng)均勻，可以很好地抗鋸齒化所有測試刺激。 相比之下，Lenovo Thinkpad顯示器的整體外觀更加清晰，參差不齊。 當(dāng)談到最清晰的快照級別時，運(yùn)行Windows 10的設(shè)備共享相似的結(jié)果，運(yùn)行Android 10的設(shè)備共享相似的結(jié)果，運(yùn)行Apple OS的設(shè)備共享相似的結(jié)果。 操作系統(tǒng)似乎對屏幕渲染的處理方式有很大影響 。

• 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.

  圖標(biāo)設(shè)計和導(dǎo)出之外的更多因素會混淆渲染的清晰度。 放大瀏覽器顯示(分別為110％，125％，200％等)，可以使圖標(biāo)看起來更清晰。 將代碼中的圖標(biāo)大小調(diào)整為24px，32px，64px同樣會導(dǎo)致無法預(yù)測的結(jié)果。 從理論上講，24px圖標(biāo)(1px筆畫)比32px圖標(biāo)(1.33px筆畫)更銳利，但這并非總是如此。 除此之外，還有許多要測試的注意事項：圖形卡，抗鋸齒首選項，隱私屏幕，查看者與屏幕的距離，環(huán)境照明條件等。

• 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的導(dǎo)出效果相當(dāng)，盡管我稍微偏愛Sketch。 對于SVG，Illustrator和Sketch的資產(chǎn)彼此無法區(qū)分。 對于PNG，差異更明顯，尤其是放大-但是您可能永遠(yuǎn)不會以3200％的使用率查看圖標(biāo)。 草圖似乎可以應(yīng)用更平滑，更精細(xì)的抗鋸齒。

• 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優(yōu)于PNG。 在筆記本電腦和平板電腦中，SVG與PNG的性能相當(dāng)。 在移動設(shè)備中，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.

  “更銳利”并不總是更好，可能需要更清晰的定義。 有不同種類的鋒利的東西。 我們最初對這個詞有一個大致的了解，但是在使用它時會有些細(xì)微差別。 在我的研究中，有時會出現(xiàn)圖標(biāo)尖銳但不希望別名 鋸齒邊緣 (摩托羅拉，Thinkpad的)。 有一個定義的最佳位置。 也許用“酥脆”來形容敏銳而流暢的詞是一個更好的詞。

推薦建議 (Recommendations)

The results from this test lead me to one (not new) key recommendation—use SVGs where possible. They are the most flexible and forgiving, and perform best overall:

該測試的結(jié)果使我提出了一個(不是新的) 關(guān)鍵建議-盡可能使用SVG 。 它們是最靈活，最寬容的，并且在整體上表現(xiàn)最佳：

• An icon designer can design one size that an interface designer can scale to a variety of sizes (to the degree that the details allow; different sizes may require different levels of detail)
  圖標(biāo)設(shè)計者可以設(shè)計一種尺寸，界面設(shè)計者可以將其縮放為各種尺寸(在細(xì)節(jié)允許的范圍內(nèi)；不同的尺寸可能需要不同的細(xì)節(jié)級別)
• A programmer can dynamically resize the icon in code and apply other transformations like fill color, stroke color, and stroke width
  程序員可以在代碼中動態(tài)調(diào)整圖標(biāo)的大小，并應(yīng)用其他轉(zhuǎn)換，例如填充顏色，筆觸顏色和筆觸寬度
• An end user can scale their browser magnification up without sacrificing icon quality
  最終用戶可以在不犧牲圖標(biāo)質(zhì)量的情況下擴(kuò)大其瀏覽器的放大倍數(shù)
• SVGs generally look crisper than PNGs, even when not pixel-snapped
  SVG通常看起來比PNG更清晰，即使沒有像素捕捉也是如此
• SVG file size is smaller than PNG
  SVG文件大小小于PNG

An SVG critic may say it’s hard to attain perfect crispness when you scale an asset to another size. This is true, but it may be worthwhile to trade a bit of crispness for the benefits above, especially when there are so many factors outside a designer’s control.

SVG評論家可能會說，將資產(chǎn)縮放到另一尺寸時，??很難獲得完美的松脆度。 的確是這樣，但是值得為上面的好處付出一些松脆的代價，尤其是當(dāng)設(shè)計師無法控制的因素太多時。

A few more suggestions. Pixel-snapping to 1px or .5px is preferred for both SVGs and PNGs. Design at the smallest common size (design additional custom sizes as needed) and avoid scaling PNGs in use. To support older, lower resolution devices, snapping to 1px is safest. No matter what you decide in terms of snapping, it’s most important to develop a set of stylistic rules for your icons for consistency. Make the math easy for yourself and don’t forget to test your icons live in context.

還有一些建議。 SVG和PNG都建議將像素設(shè)置為1px或.5px。 以最小的公共尺寸進(jìn)行設(shè)計(根據(jù)需要設(shè)計其他自定義尺寸)，并避免縮放正在使用的PNG。 為了支持較舊的較低分辨率的設(shè)備，最安全的捕捉為1px。 沒有你在捕捉方面決定的事情，它開發(fā)了一套謀篇為你的圖標(biāo)的一致性是最重要的。 簡化數(shù)學(xué)運(yùn)算，不要忘記在上下文中測試圖標(biāo)。

后記：期望與現(xiàn)實 (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:

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

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:

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

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.

當(dāng)我們開始為數(shù)字設(shè)計時，我們將所有內(nèi)容編碼為精確的像素，以得到我們想要的外觀。 我們被設(shè)置為像素完美的。 但是隨著時間的流逝，我們意識到介質(zhì)本身是流動的，而我們的畫布并不精確。 我們的代碼通過使用相對單位，基于百分比的內(nèi)容塊，靈活的內(nèi)容流來適應(yīng)多種形式的因素。 我將為圖標(biāo)提出一種類似的自適應(yīng)方法-放棄一些精度以提高靈活性。 許多圖標(biāo)集(例如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)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計社區(qū)。

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

如何設(shè)置ad18捕捉圖標(biāo)

總結(jié)

以上是生活随笔為你收集整理的如何设置ad18捕捉图标_图标设计中的像素捕捉的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。