tokenpocket最新版本|icon是什么单位

作者： tokenpocket最新版本

2024-03-10 21:29:11

核辐射数值解读，官方标准 - 知乎

核辐射数值解读，官方标准 - 知乎切换模式写文章登录/注册核辐射数值解读，官方标准识时升值“证”明自己。

让知识更有价值，让时间更有意义。I核辐射剂量单位最常用的辐射剂量有3个：吸收剂量、当量剂量和有效剂量。I-1吸收剂量反映的是被照射物质吸收电离辐射能量的大小。国际制单位：戈瑞（Gy）,1Gy=1J/kg（1焦耳每千克）。旧的专用单位：拉德（rad），1戈瑞=100拉德。I-2当量剂量反映的是各种射线或粒子被吸收后引起的"生物效应"的强弱。在相同吸收剂量的情况下，α粒子和中子对身体的健康危害远大于β和x、y射线。当量剂量的国际制单位：希[沃特]（Sv），1Sv=1J/kg（1焦耳每千克）。在常规个人监测中更多使用的是毫希[沃特]（mSv）。旧的专用单位为雷姆（rem），1希沃特=100雷姆。I-3有效剂量反映的是人体各组织、器官接受不同当量剂量和对辐射产生不同敏感性时，发生随机性效应的几率。随机性效应是指辐射效应发生几率与剂量成正比而严重程度与剂量无关。有效剂量的国际单位制单位也是希沃特（Sv）II核辐射危害临界值GB18871-2002《电离辐射防护与辐射源安全基本标准》公众中有关关键人群组的成员所受到的平均剂量估计值不应超过下述限值：a）年有效剂量，1mSv/年，即10的6次方纳戈瑞每年；b）特殊情况下，如果5个连续年的年平均剂量不超过1mSv，则某一单一年份的有效剂量可提高到5mSv/年；c）眼晶体的年当量剂量，15mSv/年；d）皮肤的年当量剂量，50mSv/年。III核辐射事故和目前我国的辐射值这是我国官网对于日本福岛核事故当时的剂量参考。按年有效剂量，1mSv/年=10的6次方纳戈瑞每年，福岛剂量率为1万ngy/h，计算得出在福岛部分站点不能超过100h，当然这只是估算。目前，核污水排放仅仅21天，还未到240天，未影响到我国海域。我国排放的是无污染的核冷却废水，所以核电站附近的参考值都是0.1μgy/h=100ngy/h左右，也就是说可以在核电站附近呆至少（10的6次方/100）=1万小时。b）特殊情况下，如果5个连续年的年平均剂量不超过1mSv，则某一单一年份的有效剂量可提高到5mSv/年，也就是5万小时。每年是8760小时，按这个规定，即使是一年都呆在500ng/h的环境下，都是非常安全的。关注我环保、健康生活；充沛精力、实现价值。发布于 2023-09-13 16:21・IP 属地湖南・来源官方网站核辐射辐射（物理名词）核污染赞同 66 条评论分享喜欢收藏申请

UI设计-Icon基础知识（一） - 知乎

UI设计-Icon基础知识（一） - 知乎首发于设计切换模式写文章登录/注册UI设计-Icon基础知识（一）渔夫招聘亚马逊运营，欢迎滴滴我只是一个搬运工。。。。。。ICON 的定义提到 ICON 明确的定义，搜索结果告诉我们，ICON 指有明确含义的图形视觉语言。这告诉我们它的首要目标就是代替文字，用图形化的语言来传达信息。但是这个定义会让我们容易与 LOGO 相混淆，那如何区分 LOGO 和 ICON 呢？他们虽然都是图形化的语言，但是 ICON 重在展示功能，它是功能识别图标，而 LOGO 主要传达的是身份信息属于身份识别图标。应用场景在日常生活中 ICON 的应用应该是非常广泛的，我们随时可以在各个地方看到 ICON 的存在，例如我们熟知的界面设计中，还有日常生活的指示牌上等等，我们可以把这些场景归为三类，图形界面，产品表面和日常交通指示。图形界面，就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等...产品表面，常见的电器开关按钮、易碎品标识、USB接口图标等。日常交通指示图标包括：地铁交通指示标、卫生间图标、安全出口…想必这些大家应该都很熟悉，在日常生活中我们接触到的 ICON 比比皆是。界面图标界面图标的发展风格可以归纳为从拟物图标过渡到2.5D图标再到扁平图标，到现在的微扁平，微拟物的发展过程。拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，当时应用界面必然要采用拟物风格，以便于人们的理解和操作。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代，2.5D 图标就是在拟物图标和扁平图标中的一个过渡风格。扁平图标2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展到后期也随之带来了一些问题，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。界面中的图标分类界面中的图标可以分为功能性图标和产品图标两类。产品图标可以体现整个产品的特性和风格，有时通过产品图标我们可以直观的感受到这个产品的主要功能。功能性图标则向我们传达了一定的含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。功能图标风格在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。线性图标面性图标线性图标线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。功能性图标位置功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。1. 标签栏标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。2. 导航栏导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。3. 金刚区金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。ICON 中的品牌感传递当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。1. 吸取品牌色每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色——黄色和黑色。Keep 应用的图标也提取了品牌色——蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。2. 提取品牌元素除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。3. 运用吉祥物现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。4. 品牌图形品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。ICON 的评判标准我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。1. 识别性图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。2. 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。a. 视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。b. 饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。c. 同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。d. 细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。3. 整体风格整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。4. 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。总结在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。作者：许了了原文地址：https://www.zcool.com.cn/article/ZODMxNTM2.html编辑于 2019-02-12 15:11设计赞同 43添加评论分享喜欢收藏申请转载文章被以下专栏收

ICON设计规范之图标尺寸 | 人人都是产品经理

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

AI重塑职场竞争力实战行动营

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

电商产品经理从入门到进阶

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

分类浏览

业界动态

27984篇文章

产品设计

18065篇文章

产品运营

14474篇文章

产品经理

9484篇文章

职场攻略

4958篇文章

营销推广

4487篇文章

交互体验

3730篇文章

分析评测

3251篇文章

创业学院

2119篇文章

用户研究

1754篇文章

数据分析

1718篇文章

原型设计

1420篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

登录人人都是产品经理即可获得以下权益

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

ICON设计规范之图标尺寸

印迹

2021-04-25

1 评论

40124 浏览

154 收藏

12 分钟

释放双眼，带上耳机，听听看~！

00:00

编辑导语：图标设计是UI设计中不可缺少的元素，它看似简单，但其实内含门道。本篇文章里，作者就对icon设计的相关知识和icon绘制方法做出经验介绍。如果你对icon设计也想要有所了解的话，那就点进来看一下吧。

图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。

了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。

经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。

在界面图标设计中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，这里的建议是以48px作为常规图标的设计尺寸，因为iOS界面中的网格大小是4的倍数，苹果规范要求最小点击面积为44pt；安卓的网格是8的倍数，最小操作热区为48dp。

另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。

那PC端呢？

到了桌面端后，因为屏幕分辨率的不同，没有规定最小操作热区。但受到文字落地方式（Chrome浏览器中限制最小的字体为12px）的限制，12px渐渐成为大家公认图标操作热区的最小值。16px、24px、32px都是PC端常见的图标尺寸。

通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

接着来看各平台自家的尺寸规范。

一、iOS 应用程序图标

设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。

打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。

1. Spotlight（搜索页）

2. 设置页图标

3. 消息通知

二、iOS系统图标

1. 导航栏和工具栏图标

这两处的图标大小一样都是24x24pt，最大不超过28x28pt。

注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。

2. 标签栏图标

iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。

苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。

1）目标宽度和高度（圆形图标）

2）目标宽度和高度（方形图标）

3）目标宽度（宽图标）

4）目标高度（高图标）

iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

三、Android应用程序图标

放在mipmap-*dpi下，文件名为ic_launcher.png。

L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；

M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；

H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；

XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；

XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；

XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；

keyline(关键线)形状，以192x192dp为例：

四、Android系统图标

相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标尺寸为24x24dp，四周有2dp的活动区域。Keyline（关键线）形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。

关于Keyline线画法会在下一篇详解，敬请关注。

五、Google Play应用图标

设计尺寸：512 x 512 px；

格式：32 位 PNG；

颜色空间：sRGB；

文件大小上限：1024KB；

形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。

阴影：无 – Google Play 会动态处理阴影。

切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。

图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。

为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的Material Design都是你的设计指南。

另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。

OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。

下篇预告：图标栅格及Keyline线画法。

参考资料

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn

https://material.io/design/iconography/system-icons.html#design-principles

作者：Fyin印迹；公众号：印迹拾光

本文由 @Fyin印迹原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

收藏已收藏{{ postmeta.bookmark }}

点赞已赞{{ postmeta.postlike }}

更多精彩内容，请关注人人都是产品经理微信公众号或下载App

1年icon设计初级

印迹

公众号「印迹拾光」-站酷/UI中国推荐设计师

14篇作品

225053总阅读量

为你推荐

60秒烧1亿，拼多多在北美“杀疯了”

02-202202 浏览

美团直播到底做得怎么样

09-203713 浏览

为什么说Vision Pro所展示的未来并不会很快到来？

06-275833 浏览

当上全职UP主7个月，我们花光了70万

02-152878 浏览

预制菜！开始做私域吧！

11-073094 浏览

评论请登录

Oaillll

很不错

UI设计-Icon基础知识（一） - 知乎

百度安全验证

网络不给力，请稍后重试

返回首页

问题反馈

ICON设计规范之图标尺寸 | 人人都是产品经理

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

AI重塑职场竞争力实战行动营

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

电商产品经理从入门到进阶

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

分类浏览

业界动态

27984篇文章

产品设计

18065篇文章

产品运营

14474篇文章

产品经理

9484篇文章

职场攻略

4958篇文章

营销推广

4487篇文章

交互体验

3730篇文章

分析评测

3251篇文章

创业学院

2119篇文章

用户研究

1754篇文章

数据分析

1718篇文章

原型设计

1420篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

登录人人都是产品经理即可获得以下权益

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

ICON设计规范之图标尺寸

印迹

2021-04-25

1 评论

40124 浏览

154 收藏

12 分钟

释放双眼，带上耳机，听听看~！

00:00

图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。

了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。

经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。

另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。

那PC端呢？

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

接着来看各平台自家的尺寸规范。

一、iOS 应用程序图标

设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。

打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。

1. Spotlight（搜索页）

2. 设置页图标

3. 消息通知

二、iOS系统图标

1. 导航栏和工具栏图标

这两处的图标大小一样都是24x24pt，最大不超过28x28pt。

注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。

2. 标签栏图标

iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。

苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。

1）目标宽度和高度（圆形图标）

2）目标宽度和高度（方形图标）

3）目标宽度（宽图标）

4）目标高度（高图标）

三、Android应用程序图标

放在mipmap-*dpi下，文件名为ic_launcher.png。

L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；

M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；

H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；

XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；

XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；

XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；

keyline(关键线)形状，以192x192dp为例：

四、Android系统图标

关于Keyline线画法会在下一篇详解，敬请关注。

五、Google Play应用图标

设计尺寸：512 x 512 px；

格式：32 位 PNG；

颜色空间：sRGB；

文件大小上限：1024KB；

形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。

阴影：无 – Google Play 会动态处理阴影。

切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。

图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。

另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。

OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。

下篇预告：图标栅格及Keyline线画法。

参考资料

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn

https://material.io/design/iconography/system-icons.html#design-principles

作者：Fyin印迹；公众号：印迹拾光

本文由 @Fyin印迹原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

收藏已收藏{{ postmeta.bookmark }}

点赞已赞{{ postmeta.postlike }}

更多精彩内容，请关注人人都是产品经理微信公众号或下载App

1年icon设计初级

印迹

公众号「印迹拾光」-站酷/UI中国推荐设计师

14篇作品

225053总阅读量

为你推荐

客户服务全流程数字化，解决销售管理难题

08-282939 浏览

如何让可用性测试像剧本杀一样容易

03-152465 浏览

入局酒旅行业：美团的酒，抖音要干了

12-151018 浏览

如何为初创公司设计商业模式？

09-016177 浏览

爆款打造：制造风口还是追逐风口

01-313748 浏览

评论请登录

Oaillll

很不错

超有“料”的icon图标设计规范，学会了记得收藏！

限时开放企业版试用，支持企业资源库、权限管理等多种企业协作及管理能力申请试用

AI 绘画

产品

Pixso 设计

Pixso 白板

Pixso 原型

产品

Pixso 设计

Pixso 原型

Pixso 白板

资源社区

设计素材

优质设计作品免费获取

组件资源

大厂组件资源即调即用

插件广场

用插件扩展设计的无限可能

热门精选

Pixso抠图

设计技巧

专题活动

进行中

9999+

热门精选

资源社区

设计素材

组件资源

活动专栏

插件广场

会员

下载

帮助中心

企业服务

金融政企

互联网

查看客户案例

汽车制造

智能制造

智慧交通

物联网

客户案例

覆盖各个行业和领域

提高产设研团队生产效能

查看案例

企业咨询

企业版

私有化部署

向团队介绍

教育免费

加入用户交流群

支持

企业咨询

企业版

私有化部署

向团队介绍

教育免费

用户群交流

免费使用

进入工作台

万兴科技（300624.SZ）生态成员

超有“料”的icon图标设计规范，学会了记得收藏！

在线使用Pixso

超有“料”的icon图标设计规范，学会了记得收藏！

图标主要是传达视觉提示，帮助用户有效的浏览产品界面，所以设计图标时，要从用户角度出发提升用户的体验感

免费使用在线图标设计工具Pixso

icon图标是界面设计中最常见的元素之一，有指示信息的作用，视觉传达效率高。在界面设计中，高品质的icon图标设计能够使其视觉效果更加惊艳，描述信息的同时能够直观的丰富视觉感受。而icon图标设计规范对于创建更具视觉吸引力的图标具有指导作用，遵循icon图标设计规范有助于设计师创建出更优质和更有意义的icon图标。

那么，icon图标设计规范有哪些呢？这篇文章总结了设计师一定要知道的 6 条icon图标设计规范，能够有效帮助设计师拿捏icon图标设计精髓，快来看看吧！

高品质图标素材-免费使用

1. 清晰度

清晰度是icon图标设计规范中的第一条黄金法则，因为icon图标的根本价值是传递信息，先保持icon图标的清晰度才能够确保这一点。传递清晰的视觉效果是设计icon图标的最基本要求，否则会给用户造成认知和选择压力，降低用户的体验感。

示例：

基础图标素材-免费领取

例如这套基础icon图标素材，每个icon图标都首先确保了它的清晰度。确保icon图标的清晰度需要做到让用户在查看icon图标时，能够毫不费劲。这套基础icon图标素材内含丰富图标资源，几乎集齐了界面设计中的基础icon图标。直接拖拽即可使用，能够有效帮助设计师创建清晰的图标，减少重复工作时间，提升工作效率。点击注册Pixso账号，即可免费下载图标素材，快来试一试吧！

2. 可读性

可读性是图标的第二个icon图标设计规范，它是icon图标设计的一个重要方面，指的是icon图标能够让用户轻易的理解。icon图标的重要作用之一就是代替文字传递信息，保证icon图标的可读性也就是保证图标表意的准确性，这能够确保查看的用户轻而易举的领会到图标所传达的信息。可读性的icon图标设计规范，通常是设计简单、清晰，省略了不必要的细节和元素。

示例：

通用图标素材-免费下载

例如这套通用icon图标素材，每个icon图标的指代功能和传达信息都非常清晰、直白。在icon图标设计中，它使用了基本的形状和清晰的线条，使得icon图标更具可读性。另外，这套通用icon图标素材中还包含了线性、面性、浅色和深色不同的模式，可以任意选择。使用这套icon图标素材，还可以进行再次编辑修改，快来在线编辑通用图标设计素材吧。

3. 对齐

对齐是icon图标规范之一，严格的遵循对齐原则有助于加强终端的显示效果。遵循对齐原则意味着icon图标应该放置在一致的位置，并与文本、按钮等其他元素对齐。对齐作为icon图标设计中的一个重要方面，着重于每个icon图标放置对于可靠输出的重要性，有助于创建统一规范的界面布局，降低用户浏览页面难度。

示例：

线性图标素材-免费使用

这套线性图标设计严格遵循对齐的icon图标设计规范，使用基于网格的布局来确保创建正确对齐的图标。同时，这也意味着使用网格对齐可以帮助统一图标设计的空间量，并且能够营造出更统一的秩序感和平衡感。

4. 简洁

遵循简洁的icon图标设计规范，需要删除图标多余的细节部分，为用户呈现最简洁准确的图形。icon图标具有高度精简、传达信息和记忆方便的特征，这也意味着icon图标设计只需要保留最具有代表性的特征。icon图标应该简明扼要，化繁为简，用最简单、元素最少的icon图标有效传达信息是icon图标设计的宗旨之一。

示例：

界面图标素材-免费领取

在上面的icon图标设计中，可以发现这套icon图标设计非常简洁，使用了极少的设计元素，却能快速的传达出提示信息。简单直接的设计使用户的记忆力更加清晰，并且更容易理解icon图标传达的特定信息和概念。为加强用户的使用感，在icon图标设计中应当避免使用繁杂沉重的设计，而更应该趋向于简洁明了。

5. 一致性

同一套图标应当保持统一的设计原则，在设计风格、线条粗细、角度大小和颜色模式等方面都应该确保一致。icon图标设计应当保持简单、现代、一致的外观，确保图标视觉整齐一致，不会给用户造成杂乱无章的视觉体验。遵循icon图标设计的一致性原则有助于提升图标整体的显示效果，从而更有效的吸引用户。

示例：

新拟态图标素材-免费使用

上面的新拟态icon图标有效的展示了，在设计一套具有不同颜色的图标时，如何做到视觉统一，以确保整套图标可以同步。该示例中的icon图标阴影图案和尺寸大小相同，并且保持统一的设计风格。因此，尽管每个icon图标颜色各异，类型独特，但是仍然能够保持视觉统一，并不会造成视觉困扰。

6. 个性

icon图标设计规范还有一个特点就是能够稳定的塑造独特的品牌特征，具有个性或独特品牌特征的图标能让数字产品的整个设计脱颖而出。不仅能够凸显专业性，而且能为用户提供安全感，让用户记忆深刻。这一点通过将独特元素融入图标设计中即可实现，个性是普通图标与高级icon图标的最大区别之一。

示例：

玻璃风图标素材-免费下载

例如这套社交媒体玻璃风icon图标集，可以看出它是非常具有使用个性和品牌特征的。整体风格使用了别具一格的玻璃风，社交媒体的品牌icon图标也在用户印象中形成了深刻的印象。

这 6 条icon图标设计规范能够帮助设计师稳稳的掌握正确的icon图标设计方法，完善icon图标设计体系。但icon图标设计规范仅限于理论知识的把握，最终的设计输出始终取决于设计师的理解程度以及执行程度。实践是检验真理的唯一标准，推荐使用新一代协作设计工具Pixso，点击注册账号，即可免费使用，快来创建出规范有序、独具特色的图标吧！

设计技巧

B端设计基础：帮你快速掌握工作台设计

本文从B端工作台设计原则、常见UI组件、设计案例三个方面，为你完整解析

了解更多

设计技巧

B端产品导航栏设计怎么做？超硬核入门指南！

优秀的B端产品导航栏需要考虑用户需求、导航栏结构、导航栏标签、导航栏样式以及导航栏测试等方面

了解更多

设计技巧

如何做好排版设计？死磕7个技巧，高级感马上来！

在设计一个网站或应用程序时，UI设计师需要考虑众多因素，包括UI界面排版

了解更多

设计技巧

游戏UI界面设计怎么做？来看高手的总结+实战案例！

一个好的游戏UI界面设计可以让玩家更容易地理解游戏规则，提高游戏的可玩性，增加游戏的吸引力

了解更多

文章目录

1.清晰度

2.可读性

3.对齐

4.简洁

5.一致性

6.个性

解决方案

UI设计

UX设计

原型设计

私有化部署

客户案例

探索

设计工具

设计技巧

[译] icon设计的7条规范 - 知乎

[译] icon设计的7条规范 - 知乎首发于嗷嗷在流浪切换模式写文章登录/注册[译] icon设计的7条规范嗷英俊每天都要努力英俊作者：Helena Zhang来源：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2含义明确、易读性、对齐、简洁、一致性、个性、易于使用创建一套高质量的系列icon需要有严谨的方法、训练有素的眼光、修改迭代以及大量的练习。为了让大家掌握优秀icon的设计要素，下文中我将通过7条规范以及真实的例子来说明怎样才是优质的icon。含义明确icon最首要的功能是迅速传达概念。某车型仪表盘上的图标在这堆图标中，哪个对你来说含义最明确呢？日常使用时，驾驶员会慢慢熟悉这些图标，但其中很多都不够直观，所以你可能需要查看使用手册。我对这些图标理解程度的大致顺序：当一个icon代表不常见的含义时，往往会让人感觉迷惘。安全带指示灯的标志（上图左起第三个）和实际画面很接近，所以看到灯亮我们会马上系好安全带。电力转向系统警告灯（上图最右侧）的标志则相当令人困惑。VSCO这个摄影app的图标是我见过最难懂的。你能猜出来这排图标分别是什么意思吗？VSCO的图标这些图标从左到右分别代表：动态，发现，作品，我的，以及会员专区。对于VSCO用户来说，搞不清icon含义的成本不算太高，毕竟多几次点击就可以弄明白，但是对驾驶员来说代价就高得多。使用多了之后，抽象的图标会越来越容易识别，这就是为什么汽车的信号装置通常都是标准化的，其目的是为驾驶员建立共同的理解。1984年，Susan Kare接到需求给苹果的键盘的功能键设计一个图标，最后她给出了这样一个抽象图标，这同时也是北欧国家使用的景点路标（循环正方形）。如今这个图标成为了经典，出现在苹果键盘的命令按键上。点这里看Susan Kare关于这个设计的分享视频。Susan Kare之所以能设计这样一个icon是因为当时并没有一个标准。在设计icon的时候，先想一想有没有含义接近的——类似设置按钮使用的齿轮——然后再考虑是否要重新发明一个轮子。下图这些是现在越来越为人熟知的图标：喜欢/收藏，警告，音乐，向上/向前。箭头在指路时简单有力：纽约地铁标志好的图标不应该只有一部分人容易理解，而应该是跨文化、跨年龄、跨背景的。研究并理解你的用户，然后尽可能用那些会让他们有共鸣的含义和颜色来设计图标。易读性当你有了一个容易理解的图标后，接下来要确保它的易读性。Amtrak app的icon这是美国铁路公司的app，Amtrak。车站icon（第一行）很难辨认，因为细节太多了。 Transit app有同样的问题。他们的剪切板图标挤成了一团，因为板和夹子之间几乎没有间隙。只要稍微调整一下就能好很多：处理多个图形的时候，需要留有足够间隙。笔画越细越多，会让图标看上去更挤更难以识别。Google地图的图标做的就很好——既小巧易读性又强：对齐确保每个icon的平衡感，以及视觉上的元素对齐。不平衡的播放icon上面的播放icon中，三角形和圆环虽然是绝对居中的关系，但我们的眼睛会觉得不协调，三角形左侧较宽的部分比较“重“，视觉上会认为整个三角形更靠左。就像字体设计师会做一些细微的调整，让字体看上去视觉平衡（注意下图”i”和”j”的圆点偏移了中心，而”O”的上下边缘超出了范围）。图形设计师可以用同样的方式调整icon平衡。上面的案例中，把三角形元素略微移动一下就可以完成修改。这样就好多了。结论就是，不要仅仅参考数值来做对齐，要相信你的眼睛。简洁有这样一种简洁而优雅的观点，来看看是怎么说的：教会别人你所知道的事情，能增强你对这些内容的理解。更简练的一种说法(来自Rober Heinlein)：一人教，两人受益。这真是棒极了。Google的Material设计在他们的系统图标规范中很好地解释了什么叫简洁，例如：过于复杂的船形icon像这样的图标就显得更简洁：图标设计应当简洁，因为通常是在较小的画布上绘制，细节需要适度，不应过多。在用户界面中，简笔画的风格更一目了然并且便于理解内容。Telegram的icon就做的小巧又好看：有时UI图标会更具象化。这些带色调的Yelp icon是用来展示热门食物搜索结果的，看上去就令人愉快，尤其泰国菜图标里的虾，画的相当精致：对于手机、平板、笔记本电脑的app所使用的icon，有时适当的细节意味着更多的纵深和颜色。用户在浏览手机的home屏、Mac端的程序坞和app store时能够更好理解上下文，因此icon能够更清晰地展现品牌和商品。一致性想要设计一套协调的系列icon，需要始终保持一贯的样式规则。iOS13之前，苹果的icon几乎同时涵盖了各种线型图标、面型图标和各种尺寸：乍一眼看，有些icon是不是比其他更重？设计icon时需要有确定的视觉权重，权重是由填充、描边粗细、尺寸大小和形状等参数共同决定的。在一套icon中保持这些参数相同可以确保icon之间的一致性。苹果公司最近推出了SF图标来修正这一问题，这是一种使用了San Francisco字体的符号系统。SF图标包含了9种重度和3种等级（可能有点复杂了，但也更透彻了），现在的图标与图标之间、轮廓和填充之间的变化整体变得更协调了。苹果的SF系列图标当一套系列图标的数量多了之后，尤其当团队中有多个设计师参与，这时保持一致性就不是那么容易了。此时遵循（或通融）设计原则和规范就尤为重要。Phosphor图标集——由你来设计并且我来负责完成另外一半的图标打包合集——包括700枚以上具备一致性、遵循同一套设计规范，并且经过严格测试的图标。虽然有各种图标，但体量感相同，可以很好地放在一起使用：Phosphor图标系列的子集一致性每套icon都有其风格。是什么使它们各自不同？它们讲述了什么样的品牌故事？会带来怎样的情绪？Waze交通导航app的iconWaze广受欢迎的界面在很大程度上依赖于它们的图标。这些色彩斑斓又圆圆胖胖的图标仿佛在说：“看我们长得多特别！”Twitter的icon柔软，明亮而清晰：Sketch的图标精致而透气：Freemoji的图标可爱又讨人喜欢：安卓的图标包可以迎合各种屏幕壁纸的主题——例如下图中抽象的、像素的、气泡和霓虹灯风格：易于使用一套图标不是画完就结束了，它需要进一步测试及准备，确保作者可以轻松创作其他新图标、方便设计师在设计稿（例如屏幕显示，或印刷稿等）中使用，以及程序员能将其编码到产品中。一套高质量的icon是有系统、有规范、并能在上下文语境中测试通顺的，如果还能被第三方icon管理工具支持那是最好的。1）系统——保持主文件的界面干净，命名好设计素材，用规律的方式排列以便查找。想想看怎样排列最好，按照字母顺序？按尺寸？还是按类型？Nucleo的sketch格式图标文件2）规范——阐明图标系列的关键原则，以Phosphor图标系列的规范为例（上文中曾提到）：· 清晰。首先就是要清晰，图标应当易识别并且容易理解，永远不要牺牲图标所表达的含义。· 简洁。尽量少使用细节。Phosphor系列图标是简笔画风格的，图标的每一笔都应简洁明了地传达所要表达的信息。· 个性。图标做得特殊一些，略微增加一些独特的细节，让原本可能朴素的图标画风更带有温度。这里有一些技术上的方法，同样以Phosphor图标系列的规范为例：· 使用48x48px的画布· 使用1.5px且描边居中的描边· 使用圆角顶端的描边· 使用连续的描边，除非断开线条有助于理解· 尽量使用直线段和完整的弧形，角度以15°为增量· 必要时调整曲线以符合设计规范· 尽可能以整数、偶数倍数为增量来调整，如果需要的话可以使用1px或0.5px· 使用下列关键形状：28x28px的圆形，25x25px的正方形，28x22px的横向矩形，以及22x28px的竖向矩形· 保持6px的边距保持迭代这些内容，如果你愿意的话，还可以公开你制定的规范：3）测试——检查一致性，确保icon在不同场景下有不同尺寸，确保它们在更大的视觉系统下看起来同样协调。把图标放在一起对比有助于验证上述规范——清晰，易读，对齐，简洁，一致性和个性：4）第三方工具——最后，如果可能的话，用工具协助让图标可以更方便地使用。Google的Material通过它们的定制图标库让它们的图标更容易使用。搜索关键字，可以按照你需要的文件格式下载不同风格/主题、不同颜色、不同尺寸的icon。Material好用的图标库尽管Font Awesome不完全符合上述规范，它们的图标却非常好用。它们提供了各种使用图标的方法：通过它们的前端框架库、CDN、图标字体或原始的svg文件。它们公开展示的需求清单非常棒，上面分享了需求量最大的icon、正在开发的内容和最近发布的内容。被人使用的图标是有生命力的，应该给予它照料，帮助它成长和成功。Icon相关资源：· Feather，有200多个非常棒的小型icon，可以自由缩放尺寸· Google Material，1000多个5种风格的UI图标· Nucleo，约3万个icon，有3种样式：线型、面型、扁平化彩色图标· Streamline，约3万个有3种权重的精美图标· The Noun Project，尽管质量参差不齐，却是一个找寻灵感的好网站· Nucleo app，可以用这个app导入导出icon，查看icon，并且拖放到你的设计软件里· 在设计规范文档方面，Google的Material无疑是最好的，Material系统图标，Material产品图标· IBM提供的非常优秀的视觉网格工具，UI icons，App icons，以及icon设计手册· Shopify提供的最好的规范：Shopify Polaris Icons编辑于 2020-06-11 10:54设计规范图标设计用户界面设计赞同 401 条评论分享喜欢收藏申请转载文章被以下专栏收录嗷嗷在流浪每天都要努

图标（icon）绘制尺寸规范的具体算法—摆脱死记硬背不再来_某某2018-站酷ZCOOL

con）绘制尺寸规范的具体算法—摆脱死记硬背不再来_某某2018-站酷ZCOOLHomeDiscoverOpportunity共创EventHellorfCoursesLog inSign up1.0.45

图标（icon）绘制尺寸规范的具体算法—摆脱死记硬背不再来某某2018西安/UI设计师/5年前/52577浏览版权MessageFollow图标（icon）绘制尺寸规范的具体算法—摆脱死记硬背不再来某某2018Follow如有错误，欢迎拍砖。一直在各种文章中能看到图标的尺寸规范，但是每个人都有自己的规范尺寸，或者说基础尺寸，你可能知道了44PX的网格规范，但不知道30PX又应该怎么画，而且这些具体这个尺寸到底是怎么来的也不知道，所以花了几天的时间，看了站酷、人人都是产品经理、简书的一些文章，然后总结出来了这些尺寸的算法以及他们的来源，如有错误，欢迎拍砖。

一、为什么要制定图标网格？

图标设计有效的三个属性（样式、美学统一以及可识别性），其中美学统一就是说：线宽是不是一致（2px？4px？）、是圆角还是方角？圆角的大小是不是一致？有没有断点？断点的规律是什么？配色是不是统一？有没有点缀？有没有背影？风格构成什么（面，线，填充线，或者字形）。元素的统一会让你的图标看上去整体风格是统一的。而我们要探讨的就是元素的视觉统一……

如下图所示，我们画图标的时候，物体会有长有扁，有圆有方，在统一体量感的时候，就需要用到里面的一些参考线。保证正方形、圆形、纵向矩形、水平矩形视觉保持一致大小。

二、定义网格系统

产品图标网格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。使用这些核心形状作为准则，你可以在相关产品图标的设计中保持一致的视觉比例。

如下图所示，我们用A、B、C、D四个尺寸来表示

然后看一些我在文章中看到的几种设计网格尺寸：（为方便计算，我把MD网格除以4）

看到这些尺寸的时候，我脑海中有几个问题：

问题1：为什么这些尺寸没有统一？

问题2：A是44×44的时候是这个设计规范，那么A是34×34的时候，B和C又应该怎么设置？

问题3：这几种尺寸中的B和C到底是怎么来的？

三、网格规范算法

带着那3个问题，开始查阅资料、文章，然后就发现这个B和C其实是有章可循的。算法是基于面积。

相信大家都知道，44×44的矩形比44×44的圆从视觉上来说要大一些，这是为什么呢？这里就牵扯出来一个面积算法。可看下图

从视觉上看，矩形要比圆开大，但我们拉根参考线，发现二者其中一样高

把这2个图形放在一起，发现明显矩形的面积要比圆的面积大，算法相当简单了

矩形面积S=边长×边长=44×44=1936

圆的面积S=π×R2=π×（D÷2）2=3.14×（44÷2）2=3.14×22×22=1519.76

很明显1936>1519.76

我们用这套面积算法试一下iOS中的B和C

A是圆形，面积SA=π×R2=π×（A/2）2 R为半径，A是直径，所以R=A/2

B是正方形，面积SB=边长×边长=B×B

C是长方形，面积SC=边长×边长=C×D

要想视觉大小统一，则 SA=SB=SC

对于iOS：已知A=44

所以iOS中的A=D=44，B=38，C=34 对应表2，是不是刚刚好呢

在已经A的情况下，我们用这种方法算一下其它四种网络的B和C

对比表2和表3中的B和C，我们不难发现，只有MD和尺寸2中的C有很小的区别。你可以根据自己的感觉来微调，稍微大点小点无所谓

由此得知，无论你的A的尺寸是多少，都可以根据公式计算出B和C。参考线是死的，人眼是活的，画完以后，要靠感觉微调，直至视觉上体量感达到一致。摆脱死记硬背，妈妈再也不用担心我的学习了。

四、小tips

01、icon尺寸

icon的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48x48的icon，缩小2倍的时候是24x24；而34x34的icon，缩小2倍的时候是17x17。在图标中应尽量避免出现单数。

02、安全边界

为避免给开发切图时贴边节，导致图标出现不自然的边界，我们需要上面的规范外添加一个外框，图标不要画超过这个界线。如红色外框为48×48，黄色内框也就是安全边界为：44×44

03、参数设置与参考线的绘制

我平时是用AI画图标，所以这里仅演示的是用AI画图标的方法。第一步：在首选项-参考线和网格，网格线间隔10px，次分隔线10，勾选显示像素网格；

第二步：画布框内点击鼠标右键，显示网格；

第三步：在视图中打开“对齐网格”“对齐像素”“对齐点”。

04、关于图标不模糊的方法

我们在@2x，icon内部的横向方向和竖向方向的所有元素的像素值必须是偶数，同时他们的间隔也是偶数倍，也就是2px的整数倍。也就是构成图标的所有元素之间关系必须偶数倍（包括正形空间和负型空间）才能避免在导出多倍图的情况下出现虚边。

05、角度

在大多数情况下，保持45度角或其倍数。在45度角上的锯齿步进是均匀分布的（源于像素端对端对齐），因此消除锯齿后结果会很清晰，并且该角度在对角线上，让图案容易识别，这也让人眼看起来非常舒服。这种可识别的模式在一套图标中建立了一致性，并在单个图标中建立了统一性。如果设计要求您必须违反这个规则，您可以请尝试以一半（22.5度，11.25等）或15度的倍数。每种情况都不同，因此都试一试。使用45度的一半的好处是，锯齿的步进仍然分布相当均匀。

06、插件

inkscribe和VectorScribe，具体用法和下载可自行百度。

576Report997Share原创ArticleUIStatement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.评论Log inin to commentAdd emoji发布评论喜欢TA的作品吗？喜欢就快来夸夸TA吧！Log in99+Log in and synchronize recommended records99+Log in and add to My Favorites评论Log in and comment your thoughts分享Share语言资质举报中心关于我们侵权申诉企业服务帮助中心京网文[2023]1747-060号京公网安备11010502000501号京ICP备11017824号-4京ICP证130164号Copyright © 2006-2024 ZCOO

百度安全验证

网络不给力，请稍后重试

返回首页

问题反馈

百度百科-验证

请问icon的设计基本原则有哪些 - 知乎

请问icon的设计基本原则有哪些 - 知乎首页知乎知学堂发现等你来答切换模式登录/注册图标设计图标请问icon的设计基本原则有哪些关注者21被浏览6,306关注问题写回答邀请回答好问题 1添加评论分享4 个回答默认排序邵飞关注说到设计icon时需要注意的基本原则，就要先了解下icon是怎么诞生的。icon是用来代替“某”些文字的为什么要代替文字呢？因为有些文字变成图形后方便识别，甚至可以形成图腾，扫一眼就知道这个icon是什么意思了，但并非所有文字都需要用icon去代替，例如：人类最原始的造字方法就是象形文字，随着文字的发展，象形文字的局限性越发增长，因为有些抽象的事物是用图形代替不了的，需要通过绘画不断解释它，才能达到意会。随之，中国以象形文字为基础，经过数千年，演变成了汉子，汉子的造字方法有会意、指事、形声、转注、假借。会意，通过组合多种象形来说明其意思，例如上面是小，下面是大，组合起来就是三角形，便是“尖”；指事，在象形的基础上添加指事符号，例如（上、下、刃）；形声，通过在一个母体上标声，例如（胫、径、颈、经、陉），就是从母体声符“巠”上来进行标声。转注，两字同一部首、二字声音相近、可以互相解释，如“考”“老”同属“老”部而又可以互训（“考，老也。”“老，考也。”）；假借，依照它的声音“假借”一个“同音字”来寄托这个“词”的意义，例如：“长”是长发，借为长久之长。图形界面就如象形文字一样，它会非常出效果，但也会有一些局限性。（图标简史详情可阅读UI简史二《图形时代》|UI|教程|邵飞Design - 原创文章 - 站酷 (ZCOOL)）风格统一？大错特错现在很多视觉设计师一味的追求icon的绘制风格，这本没有错，独特的风格可以让icon在界面中脱颖而出，形成记忆点，但如果界面中所有icon都风格统一那将是识别／阅读的大灾难。设计注意事项设定目标弄清楚icon的属性，是产品icon还是功能icon，如果是产品icon，便需要弄清楚是哪个平台，ios还是安卓，再去阅读官方出的开发者文档，根据标准去设计你的icon。安卓icon设计尺寸ios icon设计尺寸（别问我要什么素材与网址，你很容易就能从网上找到）是阅读性的还是提示性的，不同属性的icon在视觉上都会有不一样的设计。以推特为例：这里的icon既有识别的作用，又是功能按钮，这样就必须考虑它的几种状态（当前、按下、激活）这里的icon只是辅助阅读的作用，所以它从颜色、形态上会比文字轻弄清楚icon存在的意义，不同类型icon应该如何应用，不盲目追求视觉上的刺激感而忽略了icon的本质。发布于 2017-12-12 18:44赞同 3添加评论分享收藏喜欢收起小狮视觉关注icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素:small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。那很多UI设计师在接触到线上项目时第一个需要考虑的就是他的图标，那么接下来小编就带着大家分析一下我们icon的设计规范及原则1、icon可辨识性一个图标最终是否起作用取决于观看者能不能容易的识别icon所描绘的对象、想法、或者行为。图标的设计语义传达正确：图标更加直观，易于用户理解，可识别性我们看一下下面的图标你可以发现第三个表述不明确有人把他当成调音有人当成设置，所以第三个是失败的。2、icon审美统一审美统一是指在一个或者多个icon中共享同样的设计要素比如说都是圆形或者方形的角，角的具体尺寸（2像素、4像素、等等），一致的线的粗细（2像素、4像素、等等）、风格（面、线、填充的线、字形）、颜色等等。审美统一让你的设计看起来是一个整体。2.1.线条一致性线的粗细比较常用的是使用1种线条粗细2种是理想的，3种有时候也是必要的。目标是在不引入太多破坏图标一致的多样性前提下，提供视觉层次。线的粗细最低2像素，最好使用双数单位去做设计下图左半部分和右半部分分别统一下图小锁头是不统一的2.2.风格一致性统一的元素能够使你的图标看起来是一个整体。下图的图标有的有笑脸有的没有有的断口有的没有不具备风格的统一下图都有拐点而且都是黑色块状具备统一性2.3.色彩一致性统一的色彩能够使你的图标看起来是一个整体。线性以单色或者双色为主，扁平化图标制作时可以定义出几种颜色进行搭配。图标使用光影、渐变要注意角度问题。所有图标都只用两种颜色图标的色彩饱和度是一致的2.4.光影一致性下图的光不统一要保证投影的位置是一致的2.5面积的统一性这里说的不是再方块里绘制面积就一致了，要在视觉上保持一致，新手可以使用图标网格绘制3、绘制细节图标绘制要注意，旋转角度、字体、曲线、边角等细节3.1旋转角度坚持使用45°角，或者它的倍数。由于像素的原因，45°角的情况下是抗锯齿的，这个角度下会有一个完美的清晰的边缘线，人眼看起来会很舒服。3.2曲线曲线决定了一个图标的美观，不要用钢笔工具绘制曲线，手绘的不规则的曲线，严重损害了设计的质量。3.3圆角大小使用圆角可以让你图标变得圆润，注意圆角的大小使用规则。3.4无衬线字体图标中使用字体元素，必须使用无衬线字体进行修改那么以上呢就是咱们做icon的原则和规范了。希望能帮到楼主~ 记得关注回复【图标视频资料】即可获取整套图标视频哈~发布于 2020-03-12 17:42赞同添加评论分享收藏喜欢收起

干货 | 图标（ICON）的 9 种设计原则 - jongde - 博客园

会员

周边

新闻

博问

AI培训

云市场

所有博客

当前博客

我的博客

我的园子

账号设置

简洁模式 ...

退出登录

jongde

干货 | 图标（ICON）的 9 种设计原则

图标（ICON）是任何设计系统中都不可或缺的一部分。使用图标的主要原因就在于它可以帮助用户快速解释想法、快速导肮、解决语言障碍等问题，以此让用户旅程变得可用且愉快。

ICON作为一种设计工具，在UI/UX设计师之间最受欢迎。它对每个人来说都是简单易懂的，同时图标所具有的这些特性也赋予了它们通用数字语言的地位。

今天，我们就给大家来分享几个ICON设计的最佳原则，来帮助大家在UI/UX中设计出完美的图标。

Size

最小的图标大小通常为12×12px。根据行业标准，在以此为基础产生的大小值中，大部分的数值都是通过将先前的数字加倍而创建的。通常我们可以看到小、中、大这三个尺寸的图标大小。

小图标：12×12, 16×16, 24 x 24, 32 x 32, 48 x 48px

中等图标：64 x 64, 96 x 96, 128 x 128, 256 x 256px

大图标：512 x 512, 1024 x 1024px

值得我们注意的是，在我们创建ICON时，应该以100%的比例设计，这样才会使得图标像素看起来比较完美。同时通过进一步放大也可以确保准确性。

Pixel-Perfect

具有完美像素的图标会呈现出清晰明快的线条和形状。如今，高分辨率显示器和Retina显示器越来越流行，因此在不久的将来可能会减少对像素完美图标的要求。但就目前而言，我们所设计的图标也应该是可扩展、响应迅速并能适用于许多设备的。我们在创建具有完美像素的图标时，可以参考以下三种建议：

对齐像素网格：这种设计方法可以使直线变得非常清晰，并增加曲线和拐角的清晰度

使图标保持完美角度：有角度的线条更有模糊感。在创建图标时，完美的角度是45°

边缘：直线必须占据其边缘最暗的4个像素，这样线条边缘看起来才会更清晰

Line Width

为了使图标看起来整洁一致，非常重要的一点就是要记住线宽和间隙的大小。这是一条我们必须遵循的规则，即：所有线条的宽度相同。

在理想情况下，线宽和间隙的大小应该相等。然而，在某些时候，我们又不得不打破这个规则，当我们需要说明日常生活中的不对称物体时，就会发生这种情况。以条形码为例，如果我们故意使图标内部的线宽和间隙大小不均匀，这样就会在一定程度上表明该对象的身份。

Corner Radius

在UI设计中，包括图标在内的对象圆角半径会定义项目的外观和感觉。当我们对一组中的多个对象进行阐述时，就需要遵循这一简单的规则，即：在方角和圆角之间选择其一，并对整组图标应用相同的属性。

那么这一原则为什么如此重要呢？我们需要知道，一致性是UI/UX设计的关键原则。可用且对用户友好的设计需要始终提供一致的体验。在下图示例中，我们可以看到打破这一原则是如何影响视觉体验的。

Optical Balance

计算机与我们人眼所感知到的体验是不同的。对计算机来说，那些似乎对其完全平衡的东西，对我们的眼睛来说可能并不相同。

例如，当我们把一个大小相等的正方形和一个圆形放在一起时，就会产生一种奇怪的感觉：圆形似乎比正方形小。为了使我们的形状在视觉上看上去大小相同，我们就应该把圆圈变大，或减小正方形的大小。

这个原则也适用于图标的设计和适用。有些图标可能更侧重于一侧。那我们就可以尝试将它们调整至整体对齐。如下图所示，我们可以看到，尽管它与其他部分都具有相同的大小，但突出显示的图标似乎更大。为了平衡这组图标，大家就需要通过减小其大小来调整突出显示的图标。

Optical Alignment

我们经常在设计程序中使用中心对齐。虽然这种方法并没有错，但在细节方面，比如图标设计中，我们就需要相信自己的眼睛，打破数学规律，以增强元素的平衡。以播放按钮为例，它的形状越不对称，需要改进的地方就会越明显。

Keep Simple & Starightforward

在这里，想和大家分享的是这条KISS原则。这个原则背后的想法是，如果大多数系统保持简单操作，那么它们就会运作得很好。用户也就会越容易理解并与之交互，而它就越有可能被放到项目设计中。那么，KISS原则是如何运用于图标设计的呢？

不使用文本：文字和图标的结合会减少图标的使用方式。此外，小尺寸的文本具有不可读性。如果我们仍然需要将文本作为支持元素，就需要使用ICON旁边的提示工具和标签

不要过度设计：不必要的复杂性会妨碍设计目的。重复的设计也会严重影响用户体验

尽可能避免不必要的元素：但我们不能忘记确保每个图标在整体上下文中都是可以理解且清晰的

值得大家关注的是，在ICON设计中需要明智使用KISS原则，但也要注意不能让设计变得过于简单而损害了本应该呈现出的效果。如果想要提供积极的用户体验，那我们所设计的图标应该是清晰易懂的。

Frame & Keyshapes

关键形状（keyshape）通常是指组合在一起的圆形、正方形、纵向及横向矩形，它们通过了一个模式来创建ICON。但是，这一规则需要我们的灵活运用，并让位于上面所提到的“Optical Balance (光感平衡)”这一原则。

因此，如果我们在设计过程中觉得图标并不完全适合形状，那么这时候我们并不能马上怀疑自己的设计是否有误，通过换位思考也许它并没有错。

对于框架（frame）而言，它是我们设计的“容器”。框架可以帮助我们通过选择画布的一个区域来创建设计。大家在创建设计时经常会将ICON放置在框架中，这么做的原因在于以下几点：

Size (大小)：由于图标的几何形状，它们都具有不同的高度和宽度。为了在设计中正确使用ICON，我们就应该将它们放置在大小始终相同的框架之中

Export (导出)：框架内的图标需要与视觉中心对齐，这对于导出带有框架的图标至关重要

Time (时间)：如果我们使用Figma，那就需要通过创建组件来节省时间。大家可以使用“实例功能”来快速替换图标

Format: SVG & PNG icons

SVG or PNG？当我们处于导出图标阶段时，这就会成为关键问题。那我们就先来比较一下两种格式：

SVG具有非常小的文件大小，这就意味着在导出时，可以快速加载最终设计成果；而PNG的文件大小有时会过大

SVG格式是无限可扩展的；而PNG的分辨率仅限于我们创建文件的大小

SVG文件可以进行编辑和创建动画；而PNG则是静态文件

对于PNG格式来说，我们必须提供所有尺寸和颜色的资源；而使用SVG时则不需要

PNG与大多数浏览器都兼容；而某些旧浏览器可能不支持SVG格式

在这里建议大家可以选择SVG格式的图标，因为它可以节省大量时间。但最重要的是，在导出过程中需要注意缩小复杂的形状，并牢记某些旧版本的浏览器可能不支持SVG格式。

以上，就是我们想跟大家分享的9种ICON设计原则，希望可以帮助大家在今后的图标创建设计中更加方便、灵活。

原文链接: https://medium.com/design-bootcamp/create-icons-like-a-pro-c66a50064f8b

posted on

2022-04-19 15:15

jongde

阅读(832)

编辑

会员力量，点亮园子希望

刷新页面返回顶部

导航

博客园

首页

新随笔

联系

管理

公告

博客园

Follow

tokenpocket最新版本|icon是什么单位

tokenpocket最新版本|icon是什么单位

核辐射数值解读，官方标准 - 知乎

UI设计-Icon基础知识（一） - 知乎

ICON设计规范之图标尺寸 | 人人都是产品经理

UI设计-Icon基础知识（一） - 知乎

百度安全验证

ICON设计规范之图标尺寸 | 人人都是产品经理

超有“料”的icon图标设计规范，学会了记得收藏！

[译] icon设计的7条规范 - 知乎

图标（icon）绘制尺寸规范的具体算法—摆脱死记硬背不再来_某某2018-站酷ZCOOL

百度安全验证

百度百科-验证

请问icon的设计基本原则有哪些 - 知乎

干货 | 图标（ICON） 的 9 种设计原则 - jongde - 博客园

最近的新闻

您可能喜欢的文章

以太im钱包下载|近一年卢布对人民币汇率走势

bitpie安卓版下载地址|比人民币值钱的货币

比特派助记词忘了怎么办

安卓手机怎么下载比特派app

比特派下载后怎么使用手机

比特派无法登录怎么办啊

比特派怎么看是否被授权

干货 | 图标（ICON）的 9 种设计原则 - jongde - 博客园