UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章，强烈建议阅读。
这6个步骤应该作为一个指南而非教条来准守。
这篇文章中我们会将这六个步骤应用到一只柯基犬的图标上。这个图标有潜质，但是还不足以被认为是优秀的。下图是修改前和修改后的对比，接下来我们将详细说明具体步骤。
　　左边的是原来的icon. 右边的是按照本文原则重新设计过的icon有效icon设计的三个属性
系统和深思熟虑的设计icon主要依靠三个属性：形式、审美统一、可辨识性。无论是设计一套还是设计单个的icon，都需要考虑这三点。
形式是关于一个图标如何制作而成的最底层的结构。如果你忽略一个图标的细节，画一条线去表达它，看看它是不是变成了一个正方形、三角形、圆形、水平或者垂直的矩形？主要的几何图形——圆、三角和正方形——是创造一个icon视觉设计的的基础。在我们的例子中， Kem Bardly设计的小狗的头部是由两个三角和两个椭圆组成的。正如我们画素描之前要用尽可能大的简单的形状打草稿然后再去添加更多的细节一样，我们也是从简单的形状开始设计一个图标，然后再去添加更多的细节。
　　这张图片的关键线显示了由基本形状定义的设计形式
2、审美统一
我们说的审美统一是指在一个或者多个icon中共享同样的设计要素。比如说都是圆形或者方形的角，角的具体尺寸（2像素、4像素、等等），一致的线的粗细（2像素、4像素、等等）、风格（面、线、填充的线、字形）、颜色等等。审美统一让你的设计看起来是一个整体。在下面的例子中，三只狗狗都有共同的设计要素，比如2像素的圆角，2像素眼睛和鼻子的圆。
　　这三只狗狗用共同的设计和风格元素，创造了审美上的统一
3、可识别性
可识别是一个icon作为一个产品的本质或一个icon独特的原因。一个图标最终是否起作用取决于观看者能不能容易的识别icon所描绘的对象、想法、或者行为。可识别包括大家对于一个事物普遍的看法，但它也可以包括一些独特而意外的元素比如心形的小狗的鼻子。需要记住的是可识别性并不只是对事物单纯的描述，它还包含你对此独特的理解。在这方面审美统一和可识别能够并且经常的相互重叠在一起。
每只狗狗的独特性他们可以被识别，然而一致的元素和风格又让它们看起来是一组的。
目前为止，我们了解了有效的icon设计的三个主要属性。接下来，我们将深入了解如何用留个步骤来妥善处理这三个方面的问题。六个步骤
1、从一个网格开始
我们这里使用一个32×32-pixel网格。我们的网格也包含一些基本的指导来帮助我们在每个图标的设计中创建基本样式。
在这里，我们看到了一个 32 × 32-pixel 的网格, 用一个 2-pixel边界 (或 “禁区”) 来留出喘息的空间。
网格外面的2像素是我们所说的“禁区”。除非绝对必要，避免图标出现在这个区域。“禁区”的目的主要是为了在图标周围创建一些喘息的空间。
对于icon可以用基础形状概括的，你可以画一条外边缘线来做边界框，这些边界框通常是一个正方形、圆形、三角形矩形等~
圆形的iocn以网格为中心，通常会接触到内容区的最外层的边缘，但不会进入禁区。注意，最常见打破禁区的情况是可以让一些微量的需要强调的元素向圆外延伸以保证设计的完整性，如下图所示。
　　△ 用网格和轮廓线对齐的圆形图标
方形的图标也是以网格为中心但并不会这么做，在大多数情况下，它会扩展到主要内容区的最外层的边缘。当需要和圆形或者三角形的图标保持一致的视觉重量时，大多数的长方形图标或正方形图标要对齐到中间的轮廓线（下图的橙色区域）。让图标本身的视觉重量去决定怎么去对齐这些轮廓线，这需要在练习中去感觉。看看下面方形的设计图，有三个同心方块被强调，浅蓝色、橙色、浅绿色。
　　△ 调整成一样视觉重量后的方形和圆形的图标
在32-pixel的正方形里，你会注意到20 × 28-pixel大小的水平或垂直的矩形。我们松散的遵循这些矩形图标是横向或是竖向的，并试图使这些图标匹配20 × 28-pixel的尺寸。
　　△ 调整后的垂直和水平方向的矩形与网格的关系
对角图标的大小是以圆形的边缘线来调整的。注意，最外层的点与圆形的参考线基本一致就行，不需要特别的精确，接近就可以了。
　　△ 调整后的对角图标大小与网格的关系
记住，你不用每次都严格遵循网格和参考线. 网格在这里的作用是为了帮助你让图标保持一致性, 但是如果你需要在制作一个伟大的图标和遵循这个规则之间二选一的话，那就打破它。有着“荷兰图标”美称的Hemmo de Jonge说过：
一个独特icon的精华比设置一致感要重要的多。
2、从简单的形状着手
用简略的轮廓线（圆形、三角形、方形）来开始你的设计。即使一个图标在自然状况下是有机的，也最好从AI的形状工具开始。当我们开始制作图标，特别是屏幕上小尺寸的图标，手绘导致的不规则的边缘会让一个图标看起来不那么精致。从基本的几何形状开始设计，将会使一个图标拥有更加清晰的边缘（特别是曲线的情况下），并且可以更加快速的对图标加以调整，以及确保你遵循着网格和形式设计。
　　在这个柯基的icon由基本的几何图形——两个三角和两个椭圆组成。
3、数据化：边、线、角、曲线和角度
不要试图用自己的眼睛去随意定义图标的细节，比如线的粗细和角度等，要用严格的数字去定义它们。这些细微的差别会降低一个图标的质量。
在大多数情况下，坚持使用45°角，或者它的倍数。由于像素的原因，45°角的情况下是抗锯齿的，这个角度下会有一个完美的清晰的边缘线，人眼看起来会很舒服。如果非要打破这个规则，试着使用45°的一半（22.5°、11.25°、等）或15°的倍数，这么做的好处是，这些角度在抗锯齿上的表现仍然很好。
　　近距离观看45°角度下的抗锯齿效果。
还有一个会降低图标质量的地方是，不完美的曲线。这可能意味着专业和业余的差别。人的手眼之间的协调是有极限的，不可能达到一个完美的精度。去依靠形状和数字来创建曲线而不是靠手绘。当你需要绘制曲线时，使用AI或者其它矢量软件。手绘的弯角导致的不尽人意的效果.
正如我们看到的”最初“的图像，手绘的不规则的曲线，严重损害了设计的质量。
　　这些精确的曲线是由AI里的贝塞尔工具创建的，而不是手工绘制。
一个共同的圆角半径的大小是2pix。在一个32 × 32-pixel的图标里，2像素就足够大了，可以清楚的看到圆润但不至于太软。具体数值取决于你想要什么样的设计风格。
　　精确的圆角
　　这是经过我们重新设计的柯基现在的样子。
通过一致的圆角，光滑的曲线，统一的线的粗细，新版本的设计得到了大幅的提高。
完美的像素
进行小尺寸的设计时，像素级别的校准是非常重要的。小尺寸图标边缘的锯齿可以使图标变得模糊。如果线不能对齐到像素网格之间会产生锯齿并且使图标变得模糊。所以讲图标对其到像素网格，使其边缘清晰，需要更加精确的角度和曲线。
我们之前有提到，45°角是最好的，因为它遵循了像素的堆叠方式，它会让形状有个完美的对角线。但是在高分辨率的屏幕上，比如说视网膜屏，这种完美的像素就显得不那么重要了。
当涉及到线的粗细的时候，2种是理想的，3种有时候也是必要的。目标是在不引入太多破坏图标一致的多样性前提下，提供视觉层次。当超过三种时会让图标失去统一性。2像素和4像素的线非常好用。因为线的粗细正好是成倍增加的。在大多数情况下，避免使用非常细的线，特别是文字和扁平化的图标上，除非你你想制造一个“线形”的图标，依靠光线和阴影来定义形状，而不是线。
　　这个iPhone的图标演示了线粗细上的一致性。
4、使用一致的设计元素和风格
Hemmo de Jonge在2015icon沙龙上发表了关于图标设计的精彩的谈话。在他长达两年的为荷兰政府设计图标系统的项目中。Hemmo和他的小伙伴们在每个图标上都放置了一个缺口。并不是严格每个都这样，但是大多数是如此。这个缺口成为了一种风格，把整个图标集联系到了一起。
　　使用一致的设计元素。
在我们狗狗的例子里。我们采用了一个心形的鼻子。这个元素不仅把每只狗狗联系到了一起，而且赋予了这些四条腿朋友们一些情感化的东西。
　　狗狗图标里共有的元素。
在许多情况下，即使一个图标集的风格发生了改变。他们之间统一的元素仍然能够使它们看起来是一个整体。下面这张图是我们为这三个图标重新创建的风格，他们看起来仍然是一致的。
　　保持元素统一的，另外一种风格狗狗的图标。
5、节制的使用细节和装饰
icon应该快速的传达一个物体、思想或者行为。太多小的细节将会引起混乱，从而让图标变得不容易辨认，特别是小尺寸的时候。一个或者一组图标的细节也是审美统一和可识别性的一个重要方面。最合适的添加细节的方式是，在可以识别出图标意义的前提下，尽可能的减少细节。
　　用最小的细节传达出这个物体是什么。
经过之前的一系列动作，我们已经基本上完成了我们的优化设计了。耳朵旁边的黑色轮廓线已经用毛发一样的颜色替代。脸部的轮廓也是用两像素的线勾勒出。注意现在仍然有一些元素是之前遗留下来的，比如小狗普通的鼻子。这个我们会在下一步解决。
6、让它有个性
每天都有才华的设计师制作出大量优质的图标，其中还有很多是免费的。不幸的是他们中的很多人过于依赖趋势或者那些最受欢迎的设计师的风格。作为一个创意行业的创业者，我们应该在图标以外去寻找灵感，建筑、字体、工业设计、心理学、自然或其他领域。最近图标之间看起来越来越像，所以让你的设计是独特的变得更加的重要。
　　柯基狗上心形的鼻子让它变得独特而有个性。
在最后完成的图片上，我们有一个特别的心形的鼻子，这给设计增加了一点新奇和希望。
这些简单的步骤应该被视为一个起点，而不是一个明确的指南。并没有一个单一的方式来设计图标。在这篇文章中，我们概述了一个设计的基础知识，但其他设计师当然也可能有自己的意见和技术。成为一个更好的设计师，最好的办法就是尽可能多的去看，去阅读各种材料、定期的素描（带着速写本无论你走到哪里），和实践，实践，再实践。
我们分享了如何创造一个优质图标的基础知识。这些基本的技能任何人都能通过练习和实践掌握它们。记住，创造一个更好的图标，从一般性（样式）开始朝着特殊性（可识别）努力。保持你的图标内部和外部的一致性。一旦你掌握了基本的技术，就可以把精力放在如何使一个图标脱颖而出：你独特的创造性视野。
凡注明 “艺术中国” 字样的视频、图片或文字内容均属于本网站专稿，如需转载图片请保留
“艺术中国” 水印，转载文字内容请注明来源艺术中国，否则本网站将依据《信息网络传播权保护条例》
维护网络知识产权。什么是ui图标_ui画图标用什么软件
发布日期：&&&&&&访问量：
1什么是ui图标
用户界面里的ICON(图标)可以分为四种：图象(image)，图表(diagram)，比喻(metaphor)和标志(symbol)。 &
&打印&的ICON给我们展示了一台打印机的&图象&，直接把人的思维联系到真实世界中的这个实际物体。图表显示了多个事物间的相互关系。&比喻&保留了它所代表事物的基本特征。传统的&我的&图标就是使用比喻的方式来表达一个抽象概念：你的家，你的空间，你的东西所在的地方，你每天要去的地方等等。当标志被用在用户界面设计中的时候，通常会被直接称为&图标&，但其实从符号学上来说两者是不同的概念。
标志是一种人们习惯性指代某种事物的符号。标志，例如象警告，安全，残障人士辅助功能等等。绿色的此类ICON通常表示&赞成&，而红色表示&反对&(这是从交通信号灯中人们所形成的习惯)。
2ui画图标用什么软件
什么是ui图标_ui画图标用什么软件，目前的UI设计师平均技法这块基本是有以下4个软件。会了这4个基本UI设计技法没有多大问题了。不过也有少部分公司是只会这4个不够的。PSAI主要是用来做界面，AE用来做动效，ARP用来做交互原型。
1.PSCC2015.5，PS 全称 Photoshop，UI设计用的多的软件，90%以上的UI设计师都是要会PS的，其处理图片功能非常强大，调色方面也不错，还有图层样式，布尔运算方面都是UI设计必备的。不过也有劣势，就是无法绘制矢量图形，排版也不是很好。还有图层也有点多。管理起来不是很方便。在UI设计中主要的用途是用来绘制界面和图标。
2.AICC2015.3，AI 全称 Illustrator，一款矢量绘图软件，在做UI图标上非常不错。特别是绘制扁平化图标这块。很好用。也有矢量功能画出来的图形可以放大缩小。劣势就是不能调色。做拟物化图标也不是很好做。
3.AECC2015.3，AE 全称 After Effects，主要是做来做影视后期视频特效的，但是在UI这个的话就是用来做一些UI的交互动效。动效这块是效率高的软件，不过不能用AE画图标做界面。这个AE不擅长。
4.ARP 全称 Axure RP Pro。，主是要用来做原型图的，在交互设计原型这块是比较火的一款软件。后也补一句，软件只是一个工具，千万不要觉得会了软件就会了设计，不要太依靠软件了，会了工具后还要学习理论知识才能成为一个合格的设计师。
3ui图标素材
国内：APPPSD，很多新的UI设计素材PSD下载。
国外：Dribbble，有的设计师会放出下载，并且经常有很多不错的作品可以用来激发灵感。 &
站长素材，免费的，还不用注册，海量的素材;红动中国，非免费;素材中国，免费。图标的话, 有一个不错的网站: iconmonstr - Free simple icons for your next project 这网站提供了非常多可以用来做 Action Icon 的图标。至于其他的图片素材 Android Design 网站上都有提供。
千图网：www.58pic.com/ 免费下载(有限制一小时两张) 成品、高清图片、素材;
昵图网：www.nipic.com/index.html 需要共享分以及昵币(充100块钱够用好久 而且你上传图别人下载了你就得分) 包括成品、高清图片、素材 素材数量很多;
站酷：http://www.zcool.com.cn/ 免费下载 (站酷不是专业的素材网站，但是有免费的素材)主要以素材为主，没有成品 尤其适合UI设计，有很多图标素材。
4ui图标设计
什么是ui图标_ui画图标用什么软件，一般情况下采用32X32的网格。图标的结构分为形状和方向两部分。有边框的图标，设计时一般会先在边界框位置画出图标样式相似的图形，例如，正方形，圆形，三角形，矩形等作为边框。
圆形的图标在网格中一般呈现居中状。设计圆形图标时，四个边缘可能会触及到内容区域的边缘，但不会到留白区域。遇到图标中有些小图形边角超出圆形的情况也不要担心，这是正常的现象。
方形图标和圆形图标一样，也是在网格呈现居中状，但大多数情况也会触及到内容区域的边缘。在32px的网格中，通常设计图标都会遵循从28px中垂直和水平的分出20px区域这样的规矩。但是网格规矩不是所有设计都必须要遵循的，网格是起到帮助提高图标设计的一致性的目的，设计很棒的图标和遵循规则两者还是应该选前者。
设计图标的目就是为了和用户，让他们通过图标来进行选择。如果图标的细节太多就会影响辨识复杂度，甚至成为累赘。所以在没有把握的情况下使用低限度的细节，确保明确的图标含义即可。
5ui图标设计主题
主题图标要点：
1.持图标的一致性，可以使图标的主题感觉更明显更强烈，一致性可以表现在以下几方面：风格、元素、色彩、形状、光源、质材。
风格：拟物，微拟物，扁平，手绘，写实，选取好一种表现手法后一直延用下去。
元素：增加相同元素，使图标有更明显的一致特征。
色彩：单色搭配，重复使用同样的颜色搭配，多钟颜色搭配，采用相同范围内的饱和度与明度。
形状：统一背板形状，圆形，方形，圆角矩形等。
光源：统一光源方向，使图标的高光、反光、投影的方向统。
质材：图标质感统一，使用一样的质材制作图标，例如：哑光、镜面、木质、金属、岩石、植物、纸张。
2.创意。在一味追求统一的同时，会导致图标的辨识度降低，使同系列的图标之间不能很好的区分，所以在适当的时候，改变一些特征，增加一些创意的表现，降低某个设计要素的统一度，增加图标之间的辨识率。在有丰富的创意的前提下，规范都只是参考，不要被规范束缚我们的想法与想象。
以上就是小编为您整理什么是ui图标_ui画图标用什么软件的全部内容，更多精彩请进入栏目查看。
1#z ... 2#z ... 3#z ... 4#z ... 5#z ... 6#z ... 7#z ... 8#z ...
1#z ... 2#z ... 3#z ... 4#z ... 5#z ... 6#z ... 7#z ... 8#z ...
什么是ui图标ui画图标用什么软件ui图标素材ui图标设计ui图标设计主题有一个三角形的支架
有一个三角形的支架
有一个三角形的支架
有一个三角形的支架
有一个三角形的支架知识来自于造价通云知平台上百万用户的经验与心得交流。
造价通即可以了解到相关有一个三角形的支架最新的精华知识、热门知识、相关问答、行业资讯及精品资料下载。同时，造价通还为您提供材价查询、测算、、等建设行业领域优质服务。手机版访问：
自治区工程造价管理总站根据乌鲁木齐地区各专业工程人工、材料、机械台班等市场价格变化情况，采集、整理市场信息价，编制发布《乌鲁木齐地区2018年5月份建设工程综合价格信息》。
日前，市政府常务会议审议并原则通过《大连市工程建设项目审批制度改革试点工作方案》，深化“放管服”改革和优化营商环境，清除清理不符合新发展理念要求、不符合高质量发展要求、不符合市场体系要求的各种藩篱，着力打造“宽进、快办、严管、便捷、公开”的工程建设项目审批服务模式。
记者从工业和信息化部获悉，日前，工业和信息化部与国际电信联盟共同在广西南宁召开大数据技术发展与融合应用研讨会。工业和信息化部党组成员、副部长罗文出席会议并讲话。
近日，记者从我市迎接2018年全区违法建设专项治理督查工作会议获悉，我市以“零容忍”的要求控制和打击新增违法建设，以铁腕治理的决心采取“拆、改、罚”的手段消化存量违法建设，以事实为依据依法处置各类上级督办、媒体曝光、市民投诉等重点案件。
为规范我市工程造价咨询企业市场行为，推进企业诚信体系建设，提高工程造价咨询业务质量，六月份台州市建设工程造价管理处（下称市造价处）联合台州市建设工程造价管理协会（下称市造价协会）在全市范围内集中进行工程造价从业行为暨咨询业务成果文件质量专项检查。
为加快推进我省工程造价咨询企业的信用能力建设，规范市场秩序，引导工程造价咨询企业创新发展、转型升级，根据相关文件要求，决定自日起对我省行政区域内的工程造价咨询企业（含省外分支机构）开展动态信用能力评价工作。
为全面推进我市绿色建筑发展，持续提升建筑能效，促进城乡建设绿色发展，结合我市实际，提出如下意见。
为加强各地区装配式建筑推广应用工作经验交流，为全区全面推广装配式建筑打好工作基础，6月29日，2018年广西装配式建筑观摩会在贺州市举行。
晋城市人民政府近日印发《晋城市大数据发展规划纲要（年）》，规划年主要任务为推动和实施“1183”工程：1个政务大数据中心、1个政务统一服务平台、8个示范行业应用和3个领航应用。
近期，国家863计划“高速铁路动车组全生命周期数据集成管理研究与综合”课题顺利通过技术验收。该课题从国家高速铁路发展战略需要出发，针对轨道交通行业的高铁运行监测、运维管理、故障诊断等问题，开展了关键技术攻关，自主研发了“高速动车组全生命周期数据集成管理平台”。
有一个三角形的支架相关专题
分类检索：
(C) 2006- WWW.ZJTCN.COM
增值电信业务经营许可证B2-注册 | 登录
萌不可以当饭吃，但实力可以。
零基础学产品，BAT产品总监带，2天线下集训+1年在线课程，全面掌握优秀产品经理必备技能。
这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础，包括一致性、易识别和清晰。高效图标设计的原则已经被图标设计师John Hicks在他的《The Icon Handbook》一书中详细地讨论过，同样google的“material系统图标设计指南”也有讲过。本文中被讨论的6个步骤应该被看做一种指南，而不是一列教条式的规则。学会什么时候打破规则，什么时候遵循规则，这也是成为一个优秀设计师的一部分，我们也将在这论证。
在本文中运用的图片案例，被讨论的6个步骤将会运用到改进一只狗上（确切地说，是一只柯基），这个图标是由iconfinder的用户Kem Bardly最近提交的。这个图标是有潜质的，但还不是够优美到可以称为“高质量”。我们给Kem一些简单的小技巧，只要做一些小小的改进。他的图标已经准备被作为优质图标通过了。下面展示的图片显示了Kem的图标改进前后的版本。在接下来的章节，我们将循序渐进地解释它是怎么从最初版变到最终版的。
左边的图片是原始图标。右边的图片是重新设计过的图标，运用了本文中提到的原则。
注意，文章中讨论的原则适应到网页图标时，他们通常也适用于印刷图标。典型的300 dpi的印刷材料，使得像素化呈现本质上是毫无意义的。如果你是一个平面印刷设计师，文中提到的所有原则都是适应的，但是你可以忽略像素化呈现的作品。
有效图标设计的三个特性
对于组成图标的3个属性：形式、统一审美和识别性，好的图标显示了一套系统的经过深思熟虑的方法。当新设计一套图标，把这些属性都考虑在迭代的途径中，从整体（形式）出发，进入到细节（识别性）。即使你只设计单个图标，这3个属性也仍然能被应用，能从单个图标中推测出。
毋庸置疑，设计一个有效的图标不止这3个属性，但有这3个精选属性是设计一个好的图标的开端。为了相对简洁性，我们专注于考虑这3个主要的属性。
形式是一个图标根本的结构，或者说是它的组成部分。如果你忽视图标的细节，在主要图形周围画了一条线，那他们是形成了一个方形、一个圆形、一个垂直或水平的矩形，一个三角形或者更多有组织的图形？最主要的几何形状——圆形、方形和三角形——能为图标设计打下一个稳固的视觉基础。在Kem Bardly设计的柯基图标示例中，狗的头部是由两个三角形和两个椭圆形组成的。一个人开始会画一个最大最简单的形状，然后才定义越来越多的细节。另一个人从最简单的形状开始设计图标，然后添加更多的细节——但是只有尽可能多的需要沟通概念的细节被表达出来，它就会成为一个物体，一个想法或行动。
这张图片的关键线条展示了设计构型的基本形状
审美的一致性
单个图标的构成元素能运用到整套图标中，就是我们说的视觉的一致性。这些元素比如是圆形或方形的角，角度的大小（2像素，4像素…），被限制和保持一致的线条粗细（2像素，4像素…），图标风格（扁平的，线条的，被填充的线条或符号），配色等等。审美一致性是设计元素的集合，或是设计中你为其成为一个整体所贯穿使用的手法。在下面的例子中，会发现Kem图标中的这3只狗都有一些共同元素，比如2像素的圆角，2像素宽的眼睛和心形嘴巴。
这3只狗图标有共同的设计元素，形成了视觉的一致性
识别性是产品图标的基本，它造就了图标的唯一性。一个图标是否从根本上起了作用，依赖于观众能多么容易地去理解这个图形、它的含义及它描述的动作。一致性包括展示观众普遍会和你的想法联系在一起的特性，但是它也包括哪些独特的，出乎意料的元素，像把狗狗的鼻子设计为心形。记住识别性不仅仅是指对形状、想法或它表达的动作的理解，也指识别出你的图标。从这方面来说，美学的一致性和识别性能经常重合在一起的。下面的图标，我们能识别出一只是柯基犬，一只是西伯利亚的爱斯基摩犬。因为他们独特的颜色、头部形状和耳朵，但是仍然会认为他们是同一组图标，因为他们有共同的设计元素。
每一只狗的特性使得他们能各自被识别，但是它们共同的设计元素又可以让人识别出是同一套图标
迄今，我们已经看了有效图标设计的3个主要属性。在接下来的部分，我们将深入看6个步骤是如何妥善处理这3个领域的问题。
1、从栅格化设计开始
不同网格大小的好处将在一个单独的文章中得到最好的处理。从我们的目的出发，我们做出了一个32*32的网格。我们的网格也包括一些基本的指导原则，来帮助我们为每个图标设计创造最基本的形式。
这里，我们能看到一个32*32的像素化网格，有一个2像素的边框（或者说是不可达区域）作为留白
最外面的2像素我们叫做“禁区”。避免把图标的任何部分放在这个区域，除非是绝对需要的。这个禁区存在的原因是为图标留出一些透气的空间。
图标形式的一个组成部分是大体的形状和方向。如果你在一个图标的外部边缘画了一条线——这个边界框，如果你能够——这个形状将会形成一个正方形，圆形，三角形，垂直居中的矩形，水平居中的矩形或平行四边形。
圆形图标处于网格的正中央，将经常触碰到内容区域四周的边沿，而不触及到禁区。注意，打破禁区这个规则的一个普遍原因是，有一些重点或小元素需要超过圆形区域。如上所述，为了保持设计的完整性。
圆形图标对齐网格和关键线
方形图标也是在网格的中央，但不这样做，在大多数情况下，会扩展到内容区的最外层边缘。为了保持圆形和三角形图标的视觉面积的一致性，大多数矩形和方形图标将会在中间对齐到关键线（以下图片的黄色区域）。什么时候对齐到每一条关键线由图标本身的视觉面积决定。什么时候使用哪种尺寸只需要多加练习。看下面的方形布局图片。上面说到的3个同轴的方形就是以下的浅蓝色、橙色和浅绿色区域。
方形和圆形图标的大小及对齐是相对于网格的
在32像素的正方形里，你会发现20*28像素垂直的和水平的矩形。我们认为这些矩形，要么是垂直的，要么是水平的。尝试让任何图标的大小做适应，去匹配这些20*28像素大小的矩形。
这些垂直或水平方向图标的对齐和大小是相对于网格的
在对角线方向的图标是对其到圆形区域的边缘，如下图所示。注意，这个锯子的最外面区域是大约和圆形的边缘对齐。这一块区域你并不必很准确地知道在哪，大概相近就可以了。
在对角线方向图标的对齐和大小是相对于网格的
记住你没有必要每次都遵循网格和指南。网格的存在是为了帮助你让图标保持一致性，但是如果你不得不在做一个好的图标和遵循规则中选择，那就打破这个规则——有节制的遵循。
Hemmo de Jonge因他的昵称 Dutch Icon而出名，如他所说：
“一个独立的图标的本质重要性超越了保持整体性。”
2、从简单的集合图形开始
用简单的圆形、三角形和矩形画图标的主体，从这个开始做起。本质上，即使一个图标最终大多数将成为有组织的，刚开始时在 Adobe Illustrator中设计图形。在设计图标时，特别是为屏幕设计更小的图标时，手绘的边缘那些微小的变化将会使一个图标看起来不那么精致。从基本的集合图形开始将会使边缘更加精确（特别是沿着曲线），也能让你快速地调整元素之间的相对大小了，当然确保你是遵循网格的。
这是一个基本的几何图形，2个三角形，2个椭圆，组成了这个柯基图标。
3、按照这样的顺序设计：边、线、角落、曲线和角度
尽可能不要让设计看起来过度地呆板和无趣，角落、曲线和角度都应该有数学化的精确。换句话说，按照这个顺序，当涉及到细节时，不要尝试盯着看或徒手画图标。元素的不统一会降低图标的质量。
大多数情况下，坚持用45度角，或者它的倍数。在45度角上反锯齿是均匀地走势。（活跃的像素一直是对齐的），所以结果是显而易见的，这个角完美的对角线是很容易被识别的，这也是受人眼喜欢的。这个可识别的模式建立了一套图标的一致性，让单个图标成为了整体。如果你的设计规定你必须打破规则，尝试用两等分（22.5度，11.25度等等）或者是15度的倍数。使用情景是不同的，所以结合具体情况而定。用45度角等分的好处是，反锯齿的走势仍然是可接受的。
常规反锯齿的 45 度角的特写镜头
会降低图标质量，也意味着专业和业余之间的区别最明显的一个区域就是不那么完美的图标。而人的眼睛能精确地识别微小的变化，手眼的协调不能总达到很高的精确度。依赖于图形工具和顺序尽可能的设计曲线，使用adobe illustrator（或者你的矢量软件）控制修改键（shift键），或者，更甚一筹地是，用Astute Graphics的VectorScribe和 InkScribe更精确地控制贝塞尔曲线。
手绘角落效果不理想
因为我们看到了上面提过的修改前的图片，手绘的线会画出不规则的曲线，这会降低图标本身的质量。
我们用illustrator的贝塞尔曲线工具画出了这些非常精确的曲线，而不是手绘
通常圆角（或者说半径）值为2像素，一个32*32像素的图标，2像素的半径已经足够被看出是圆形的，但不太过于让角落过于圆滑以改变设计中的个性（比如“泡泡”形象），你选择的半径值是基于你想给图标怎样的个性。是否使用圆角是一个审美上的决策，也要考虑到一套图标的整体美感。
精确的圆角
已经开始设计几何图形了，我们现在可以增加2像素的外围轮廓，来演示图形工具是怎么改善设计的，以及细节上的一致性，比如圆角。
重新设计柯基图标的过程如此漫长
这个被大大提升的版本展示了新设计的要点：统一的圆角，光滑的曲线，耳朵边基本的线条粗细。
像素化的展示
在设计小尺寸的图标时，像素级的对齐是很重要的。一个小尺寸图标边缘的去锯齿会让这个图标失真。不和像素网格对齐的线条之间的空隙将会变得反锯齿和模糊。让图标和像素化的网格对齐会使得边缘在直线上很清晰，在精确的角度和曲线上也很清晰。
如上述，45度角是最好的，因为被用来定义角的像素是成对的，阶级式的，段对端是完全对角的。对角落和曲线也是同样的：它们越精确，反锯齿就越清晰。但是注意，在更大规模和更高分辨率的屏幕上，比如视网膜屏幕，像素化呈现并不太需要，至少对于反锯齿而言。
谈到线的粗细，2像素就很理想了，在必要情况下可以使用3像素。目标是提供可视化的层级和多样性。不用介入太多样式，那样会破坏一套图标的一致性。超过3个或者一套能失去它的凝聚力。2和4像素粗的线条的好处是他们是2的倍数，因此很容易向上和向下扩展。大多数情况下，避免使用很细的线，特别是在符号和扁平化图标上。除非你刻意设计一种“线性风格”的图标，比起线条，更依赖于光阴去定义形状。
Iphone图标展示了线条粗细的一致性
4、跨图标设计使用统一的设计元素和符号
Hemmo de Jonge of Dutch在Icon Salon 2015上有一个精彩的演讲，他大篇幅地讲到了这方面的图标设计。在他为荷兰政府做的2年图标系统项目中，Hemmo和他的设计同伴注册了一个等级给每个图标。并不是每个图标都有等级，但大多数是这样的。这种符号，适当并一贯地使用在一套图标中，真的能把图标集合在一起成为整体。
常用设计元素的使用
在我们的狗狗图标例子里，我们使用了一个通用的风格元素：心形鼻子。使用心形作为鼻子这个视觉特性不仅仅把这些图标组合在一起，而且也增添了一种异想天开的元素，为我们四条腿的朋友沟通情感。
狗狗图标常用设计元素的使用
大多数情况下，即使一个图标的主要部分发生了改变——比如说，风格——构建审美统一的元素仍然可以系在一起，像上面所看到的那样。我们已经重构了相同的3只狗狗图标的符号风格，而不仅仅是平面风格，它们仍然是保持审美一致的。
狗狗图标使用了共同的设计元素，但是有着不同的造型
5、谨慎使用细节和装饰
图标应该能尽快地表达对象、想法或行动。太多的小细节将会变得复杂，这会让图标缺乏识别性，特别是小图标。一个单独的图标或一整套图标的细节处理水平对视觉的一致性和识别性都是很重要的一个方面。确定一个或一套图标的细节水平是否正确的一个好方法是，以最少的细节来表达清楚图标的意义。
在上面的这个版本中，已经离我们最终要完成改善的稿子很靠近了。眼睛周围的黑色轮廓已经变成了耳朵周围毛皮裹着的棕色区域。脸上黑色的线已经不见了，但是柯基脸上的白色标记上面仍然有2像素的空间。注意，我们仍然保留了一些原来版本的元素，比如扁平化的鼻子。我们会在下一步中调整它。
6、让它变得独特
有天赋的设计师的数量似乎每天都在增长，他们做出了高质量图标，其中很多是免费的。不幸地是，很多的设计师过度地依赖于趋势或者大多数流行设计师的风格。作为创意专业人士，我们应该看看图标以外的其他领域，比如建筑、字体设计、工业设计、心理学、自然及任何我们能找到灵感的其他领域。因为很多图标看起来很相似，，所以让你的设计变得独特尤为重要。
柯基脸上心型的鼻子使得这个图标变得独特而有个性
在最终设计的形象中，我们有一个独特的可触摸的心形鼻子，为这个设计添加了一些新奇和无拘无束的感觉。
这些简单的步骤应该被看到是一个起点，而不是最终的指南。设计图标没有简单的方法。本文中，我们已经概述了保持基本一致的设计方法。但是其他设计师当然也有他们自己的观点和技巧。成为一个更优秀的设计师最好的方法看尽可能多的视觉参考，读大量的资料，经常画草画（无论你去哪带一个草图本），不断地练习，练习，再练习。
左边的图片是原始图标。右边的图片是重新设计过的图标，运用了本文中提到的原则。
我们已经分享了如何构建高质量图标的基本原理。这些原理也是技巧：通过练习，任何人都能学习并掌握它们。记住，为了设计更好的图标，从一般（形式）开始，然后到特定的细节（可识别）。让你的图标保持内部的一致性，同样在整套图标中也要保持一致性。注意图标和图表集中这些被共享的元素（审美的统一）。一旦你已经掌握了这些基本的技巧，你就能更专注于让你的图标脱颖而出：你独特而又创意的视野。你有自己的技巧、建议或你想分享的基本原理吗？在下面评论中给我们留言吧。
译者：狐狸
来源：设计夹（公众号ID：sezign）
本文由 @狐狸 原创发布于人人都是产品经理。未经许可，禁止转载。
收藏已收藏 | 59赞已赞 | 10
萌不可以当饭吃，但实力可以。
产品经理群
运营交流群
品牌营销群
文案交流群
Axure交流群
关注微信公众号
大家都在问
2个回答2人关注
4个回答3人关注
123个回答172人关注
55个回答61人关注
15个回答43人关注
19个回答41人关注