如何设置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像素 )

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.

如何设置ad18捕捉图标_图标设计中的像素捕捉相关推荐

慈溪微生活图标_日常生活中的图标
慈溪微生活图标 Even though we may not always notice them, Icons are all around us. They're found on our fav ...
el-table 树形表格自定义展开图标_图标制作工具 Icon Slate for mac
Icon Slate for mac(图标制作工具)www.macdown.com Mac os平台上的一款帮助用户快速制作logo的Mac图标制作软件,Icon Slate mac是一款让您轻松创 ...
qq空间网页设计_网页设计中的负空间
qq空间网页设计重点 (Top highlight) Because screens are limited, web design is also limited. It can be said ...
视觉感知_产品设计中的视觉感知
视觉感知 The role of the UX designer has evolved immensely over time, but at its core, it remains the sa ...
游戏脚本在移动游戏设计中的作用_游戏设计中道具设计分步解说
首先小编姐姐先跪谢我们原画老师 "您辛苦了" 这次给大家带来了游戏设计中的道具设计分步解说图 ▼▼▼ 先来看看动态过程图 ▼▼▼ 再看看详细过程图一草图构思,参考一些相关 ...
neo4j图形算法综合指南_网页设计中色彩使用的综合指南
neo4j图形算法综合指南 There is a lot of material about color to be found online. But none of us has the time ...
软件可读性和效率取舍_网络通信设计中的一些限制和取舍：摘要
软件可读性和效率取舍 by Shubheksha 通过Shubheksha 网络通信设计中的一些约束和折衷:摘要 (Some Constraints and Trade-offs In The Des ...
用paddleocr识别汉字_汉字设计中的度量标准（三）
x 高度.大写字母高度. 上升部高度.下降部高度. 字干粗细.字身倾斜角度-- 这些参数是今天衡量.描述一款西文字体最基本的度量标准, 并由此将西文字体带向参数化与可变字体. 回顾汉字设计,我们是不 ...
用同一uuid作为两个字段的值_分库设计中的主键选择
在先前的文章<又拍网架构中的分库设计>中,我有提到过MySQL分库设计中的主键选择问题.在这篇文章里我想对这个问题进行展开讨论,以此作为对上一篇文章的一个补充. 前面提到又拍网采用了全局唯 ...

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

程序 (Procedure)

结果汇总 (Results Summary)

如何设置ad18捕捉图标_图标设计中的像素捕捉相关推荐

最新文章

热门文章