创刊词:如果你接到图标定制的需要的时候,你该做什么?

无需加好友免费技术支持

创刊词：如果你接到图标定制的需要的时候，你该做什么？文中创作者从图标制作全过程、制作方式、设计原理、用户行为分析等多个方面阐述了图标设计方案。让我们一起看看。

接到图标设计要点时，必须提炼出信息中核心关键词，发散性思维获得一些关键字的近义词和同义词。给予最初设计定位。

将脑暴后核心关键词图形界面，在这过程中能够拿笔纸粗略地画出来的，来确认比较适合表述信息的图标样子。

整理图标中常用的环境与情景。比如，标签栏和导航条归属于页面上的一级适用场景，并用视觉净重比较大表面图标。用户中心、归类和详尽信息网页页面归属于二级适用场景，大多数应用线形图标。更注重信息自身。

鲁普曲线图（Bézier curve），又被称为贝兹曲线图或贝济埃曲线，是二维图形应用软件中运用数学的曲线图。一般的矢量图格式手机软件根据它清晰地绘制曲线。贝兹曲线图由直线和连接点构成。连接点是滑动的支撑点。直线就像一个可伸缩的皮筋儿，这实际是我们一般接受的PhotoShop中ps钢笔工具。

针对贝塞尔曲线而言，最主要的是数据点(途径的开端与立指导)和基准点(明确一条线路的弯折运动轨迹)。

二次计算是一种数据抽象化的思路推论方式，包含协同、交叉式减少。这类逻辑性操作步骤引入于图像处理实际操作，使简单基本上图形组合形成新的方式，并且从二维布尔运算实际操作发展成三维图形布尔运算实际操作。

在三维图形层面，布尔运算是由多个的物件或且、差集和联系来获取一个新的物件方式。系统软件带来了四种布尔运算方式：或且、联系、差集和减掉高层。

或且:把两个样子合拼成一个样子，把所有样子减掉高层:用最底层图型减掉高层图型，其他为最后图型联系:2个图型重合联系:等同于「或且」减掉「联系」在布尔运算后，我们能绘制绝大部分的图标，但是一些构造线框繁杂的图标不可以用求和、做差、相交去完成，这时需要使用贝塞尔曲线来勾勒图标。

在这里一系列标记中，你可以了解是什么意思？针对这款车驾驶员而言，伴随着使用时长积累，一些图标的内涵可能慢慢被人理解。在很大程度上，主要是因为这种图标自身并不是形象化。

从下边能够得知图标是怎样一步步无法识别:

当图标广泛使用大家不了解的含意和暗喻时，它自然就会越来越无法理解。从左往右的第三个图标是安全带提示灯图标。当它们闪烁时，这就意味着你没注意安全。这个词语相对性形象化，你能很快把握。「电动式动力转向系统警告灯」含意很模糊。

最出色的图标设计方案不仅让图标自身便于了解，并且能理解不同类型的文化的特点、年龄知识架构。

如果你想要表达出来的信息太抽象化，单用图标或许不是最清楚解决方案，应当融合图标和文本标签。

在这样一个播放视频图标中，尽管三角形被摆放在正中间的，但本身没有视觉两端对齐。当人们的眼镜看见它时，大家可能会觉得中间三角形是左边。左边三角形在视觉方面比较重，因此它应当往右边挪动，以保证均衡。

在设计的时候，适度的调整可达到均衡的实际效果。不必简单的坚信数据信息，用眼睛定期检查改正。

简约是图标设计的本质之一，只要我们经常要在小屏幕上实际操作，图标能够传递不一样文字或其它繁杂具体内容的大规模信息。在用户页面中，简易精确设计风格能够突出主题，使具体内容合理。Telegram 图标设计方案比较简单有意思：

1）一致性

为了保证图标大家族显得更和睦，自始至终确保同样审美感受设计规则。

在 iOS 13 之前苹果的产品图标设计方案有着不同的薄厚画笔，不同类型的添充设计风格，不一样尺寸。

一切图标都有明确的视觉净重。视觉净重在于图标画笔厚度、添充方式、尺寸大小样子。图标设计方案的难题取决于怎样控制这所有的一切主要参数以实现总体一致性。

近期引入了苹果公司 SF Symbols 这个功能直接把图标做成图标字体样式。在这里套字体样式中，图标有 9 种不同「字重」三种不同风格（可能有点繁杂，但是绝对充足）。从图标到标记，保证您可以在添充方式、画笔轮廊和其它不一样特性上筛出更自然的图标。

防止半清晰度

设计方案最基本的、最忌是指清晰度模糊不清，由于伴随着机器的不断创新，手机屏的表明愈来愈精美，用户会清晰地觉察到一切细微的缺点。而且还会因为这种模糊不清难题立即降低全部难题UI页面品质。

三、视觉设计风格统一

统一的视觉设计风格有许多原素，包含圆弧、线框表层、线框薄厚、设计形态等。圆弧的统一分成统一其外圆弧和统一的外圆弧，如4个外圆弧px内圆角为2px，全部涉及到圆弧的图标都应该维持统一。

尽量不要混和线型图标和表层图标，特别是同一类别的图标。线条薄厚应当与全部图标完全一致。比如，设定图标的厚度3px统一为3px。自然，在具体设计里很有可能拥有更多的设计风格必须统一。只需遵照这一统一标准，就可制作出一套有品质保证的图标。

图标的最底层使用价值取决于它能不能清晰地向用户传递信息！因而，鉴别是图标最基本规定。有意义的图标不仅仅在于视觉是不是美观大方，并且取决于信息传送的精确性。图标鉴别主要分语义识别和视觉鉴别两大类。

语义识别的理解就是，当用户看到这样的图标时，她们清楚的知道它在干什么。以下支付宝图标扫描仪、首付款、旅游、卡片包。扫描仪图标，当日常用户扫描仪编码网页页面时，将有一个二维码表明地区，地区中间是一条线。根据这种用户习惯性认知，扫描仪图标是扫描二维码的意味。

视觉鉴别更加关注危害用户鉴别图标的感观要素，如色调、多元性、图标种类搭配等。

图标色调：色度相近的色彩色调不可以一起使用，放在一起就会显得十分夺目，我们一般说白背景黑底，近义产生颜色对比，因此突显行为主体。

多元性：类似色度的色彩色调不可以一起使用，放在一起就会显得十分夺目，我们一般说白背景黑底，近义产生颜色对比，因此突显行为主体。

种类组合：背景颜色与图标种类的融合，背景颜色 鉴别面性 >“背景色 鉴别线形。

统一：从圆弧尺寸：圆弧尺寸的小细节很容易忽略，由于它的样子也和边沿方式的挑选息息相关。边沿方式包含内部结构边沿、正中间边沿外部边沿。的边缘尺寸将依据基准线开展拓展。

路径描边薄厚：图标粗线条也会影响到总体图标的一致性，如图所示，饱和度较强。

节点种类:方头中断点较为，圆口中断点可爱活泼。

视觉统一：依据keyline网格标准设计方案确保了图标平衡统一。

图标数据信息小数位：当图标中心点位置或某一部分发生小数位时，要调整到整数金额，并依据四舍五入的计数方法开展精确。能够存有叙述值X.5这样的事情。

图标易用性的检测标准也可以根据以前的设计原理推论出去：

鉴别:图标可以让用户理解意思吗？在用户认知能力习惯性下了解图标吗？一套图标是不是和别的图标实际意义发生争执？怎样拓展图标？是否要加上文字标签表明？设计方案是不是统一：表现在视觉尺寸、视觉语言表达、多元性、图标原素主要参数、总体融洽、颜色等多个方面。知名品牌信息：知名品牌信息是不是与众不同，能不能传送？关键点:图标简约美观大方吗？

分为两种测试标准：在页面上评估和单独网页页面外检测。

检测图标的统一性需要在页面上进行测试。依据界面的实际应用自然环境，检测图标是不是和睦详细；是否要文字信息协助表明；用户是不是很容易在页面上寻找图标。

可以用A/B找一些用户根据检测AB版本号检测，考量2个版本号见图标的差别，用户是不是猜疑、心寒，是否满足用户的期望值。自然，在检测前需要保证AB图标大小和部位完全一致，以保证检测没有别的自变量。

为了能检测图标的辨识度，若是有文字，就需要独立删除所有图标，并删除所有文字信息。分辨图标是不是不能理解。删掉文字还考虑到了因为文字信息专业指导而忽视图标传送的价值。

在交货图标以前，先了解一下图标的文件格式。 JPG、PNG、GIF、SVG，有四种文件格式。有什么不同？

JPG：内置环境，不兼容放大PNG：可透明模式，不兼容放大，应注意留白艺术大小GIF：一般用于适用透明背景动态化心态表SVG：唯一能适用高质量放大的矢量素材文件格式

一般主要有两种交付方式：

页面倍率兼容根据蓝湖自动切图。SVG提交文件格式图标iconfont让开发设计学生本人网站下载。留意上传至iconfont有严格设计规范，必须查验是否满足提交规范。

全部图标设计方案分成三篇文章。

《工作篇》主要讲的是图标设计概念和设计原理理论具体内容，主要讲的是图标设计流程和图标落地式专用工具、图标网址、图标设计部门或设计师第二篇文章内容。

文中由 @卡罗尔设计方案 每一个人都是产品运营。未经同意许可，禁止转载。

题图来源于 Unsplash ，根据 CC0 协议书。