1、图标设计基础广义的图标是一种符号，它象征一些纵所周知的属性、功能、实体或概念，具有快捷传达信息、便于识别和记忆的特性。狭义的图标主要应用于计算机软件方面，包括程序图标、数据图标、命令选择、模式信号或切换开关、状态指示等。图标具有明确指代含义和特定功能的图形标识，是区别程序语言命令的视觉命令形式，具有交互性，是实现电脑功能的重要载体。【图标的概念】计算机图标图标：具有明确指代含义的计算机图形。标志：俗称LOGO，是表明事物特征的记号、商标。标识：一种非语言传达的视觉图形及文字传达信息的象征符号，为公众提供区别、辨认事物，起到示意、指示、识别、警告、甚至命令的作用。【图标、标志与标识的区别】在UI
2、设计中，图标设计占有很大的比例。它以图形符号的形式来规划并处理信息和知识，通过隐喻建立起计算机世界与真实世界的联系。图标设计中一般是提供单击功能，了解其功能后，它的设计首先要易于被快速识别、便于记忆、直观浏览、产生国际通用性；其次应具有形、意、色等多种刺激，传递的信息量大；最后还得具备抗干扰能力强、图标大小可调、表示视觉和空间概念，便于布局美观。好的图标设计需浏览者看一眼外形就知道其功能，并且在整个界面中所有图标的风格一致。【图标设计的作用和意义】UI设计未来的方向就是简洁、易用和高效，精美的图标设计往往起到画龙点睛的作用，从而提升设计的视觉效果。图标设计的核心思想就是要尽可能地发挥图标的优势
3、：比文字更直观漂亮，在该基础上尽可能使简洁、清晰、美观的图形表达出图标的意义。1、可识别性可识别性是图标设计的首要原则。它指设计的图标要能够准确地表达相应的操作，让浏览者一眼就明白该图标要表达的意思。例如，道路上的标识图标，可识别性强、直观、简单，无国界，即使不认识字的人，也可以立即了解图标的含义。【图标设计的原则】天气图标设计2、差异性差异性也是图标设计的重要原则之一，同时是容易被UI设计师忽略的一个原则。只有图标之间有差距，才能被浏览者所关注和记忆，从而对设计内容留有印象。差异性天气图标设计方案对比3、与环境协调性任何图标或设计都不可能脱离环境而独立存在，图标最终要放在界面中才会起作用。因
4、此，图标的设计要考虑图标所处的环境，这样的图标才能更好地为设计服务。图标设计在手机界面中的应用效果4、视觉效果图标设计追求视觉效果，一定要在保证差异性、可识别性和与环境协调性原则的基础上，先满足基本的功能需求，然后考虑更高层次的需求视觉需求。Bad Minions主题手机图标设计5、创造性随着网络的不断发展，图标的设计表现方式更是层出不穷，对UI设计师的设计内容提出了更高的要求。创造性在图标设计中非常重要，在图标的设计过程中同样需要别出心裁的创意表达。波普风格的图标设计创意扁平化风格的图标设计创意1、从造型方面分类，分为像素图标、2D剪影图标、3D立体图标、写实拟物图标、扁平化图标等。【图标设
5、计的分类】图标设计的造型分类2、从风格表现方面分类，主要分类线性表现图标、填充表现图标、单色表现图标、扁平化表现图标、手绘风格表现图标和拟物化表现图标6种。6种常见图标表现风格3、从应用方面分类，分为硬件界面中的图标设计和软件界面中的图标设计。4、从思维逻辑方面分类，分为象形图标设计和表意图标设计。象形图标设计师通过其相似性或对物理对象的引用来传达含义的符号。通常情况下，象形图标与表意图标会组合使用来传达正确的信息，比如【添加文档】图标会通过象形图标的【文档】和表意图标【+】来展现。【添加文档】图标的组合示意图图标设计的灵感来源在图标设计时可以天马行空、自由想象，多种方法随意组合，从心设计创造
6、出惊人的佳作。一个小小的图标既要表达图形功能又可以充分发挥想象，制造出不一样的视觉效果。以下介绍了36种图标概念设计的灵感来源的方法，这些常用的方法可以帮助读者在创意思维枯竭时找到设计灵感的来源。最正常的比例把它拉长缩短把它变胖变Q把它弯曲扭曲把它融化液化使它破碎、切开把它拍扁把它塞进盒子里把它分解成零件把它的一部分夸大把它变得不对称让它透视强烈把它变得尖锐使它重复使它有速度感把它机械化只使用一部分使它有科技感使它倾斜使用最正常的颜色和材质改变它的颜色使用其他材质把它变得更明亮把它做旧把它和其他物体结合把它拟人化把它透明化把它变成凝胶状把它掰开把它挖空把它折叠把它燃烧使它发荧光使它悬浮使它晶格
7、化像素图标的绘制 像素图标其实是由多个点组成，又名点阵式图像。像素图标属于位图，而位图的最小单位是1个像素（1pixel）。像素图标强调清晰的轮廓、明快的色彩，几乎不用混淆方法来绘制光滑的线条，所以常常采用.gif或.png格式,大小通常为16px、24px、32px等。它的尺寸精致，信息容量小，经常被用在早期计算机界面，或者单色液晶屏幕，QQ秀、早期手机游戏、小GIF表情、计算机状态栏、手机信号栏等。图标是网页中的常见元素，主要功能是表意，也包含装饰及品牌传递的作用，当然像素图标也可以理解为像素风格的图标，不一定是位图格式存在。与像素图标相对的是矢量图标，通常以svg格式及字体格式存在，大小
8、可以随意调整。1、Photoshop中主要使用的工具【铅笔工具】：长按【画笔工具】后切换；【油漆桶】：取消勾选【消除锯齿】；【吸管工具】：在使用【画笔工具】时，按Alt按可快速切换到【吸管工具】；【橡皮擦】：选块模式；其他选取工具【选框工具、魔棒工具】：取消勾选【消除锯齿】。【像素图标常用的PS工具与菜单设置】2、Photoshop菜单内的设置【参考线、网格、切片】命令设置【间隔】与【子网】参数【网格】显示像素图标的透视可以用正视、一点透视或两点透视来绘制。其中红色小点为透视消失点，很多像素游戏和像素立体图标都很喜欢用斜上方45角俯视的上帝视角。【像素图标的透视】图标透视示意图一般包含全透明、
9、alpha透明、图片格式及兼容性几点。全透明是指图片的格式只支持完全透明和不透明两种状态，alpha透明是指图片格式可以支持不同的透明程度。【像素图标的格式与透明】图片格式对透明度支持度及浏览器兼容性全透明与alpha透明对图标的影响性示意图像素图标使用的颜色比较少，一般使用一个渐变色，然后从等距中取出3、5或者8等数份颜色，做出色板，放在一边待取用。少量的颜色有利于今后减少存储容量，这在GIF和PNG图像里特别明显。【像素图标的取色】色板取色示意图像素线条要求简洁清晰、粗细一致，不能有多余的点，画完以后要清理线条。一般来说，规整的布点出来的线段更加美观。【像素图标线条的规范】像素线条规范示意
10、图颜色相同的点，布点的疏密，可以造成图像在灰度上的差别，形成渐变。如果把点换成彩色的，还可以做出两种颜色以上的渐变。【像素图标线条的渐变布点】像素的深浅渐变线条处理示范1、当图标很小的时候，勿加过多的没有标示性的冗余元素，而应该使整体外观造型清晰。2、图标的边缘像素要处理得实一些，锐利一些，这样的图标看起来比较精致。如果是整体风格小像素图标，色板的配色区间要统一，有整体感。【像素图标绘制注意事项】像素图标的绘制细节【绘制立方体像素图标实例】1、像素画线（1）使用直线工具设置为像素,取消勾选消除锯齿，设为1px粗细。画的时候，按软件工具会提示角度，差不多是26.6。笔者认为直线工具不是那么可靠，
11、如果角度不是完全正确的话，画出来的线可能会变得很乱。（2）画一个4020px的巨型选区，使用铅笔工具（设为1px大小）在左下角画一个像素，然后按住Shift在右上角再画一个像素。Photoshop会自动在两点之间画一条直线。熟练操作后掌握了画线经验，就算不用选区也能画出正确的线了。（3）用铅笔工具画两个相邻的像素，选中它们，按住Alt并使用键盘或者鼠标移动它们（后面成为Alt+移动），使之在对角对齐。然后选中这两组像素，重复上述步骤使之延长。等角线的绘制等角线条错误示范注意：等角线条的绘制只要符合规则结构的线条都可以，但是每一步伸展得越长，就看起来越毛糙。等角线条规则结构2、绘制像素体矩形复制
12、副本下移像素立方体2、绘制像素体像素立方体顶部填充颜色像素立方体完成【绘制卡通像素图标实例】绘制像素卡通图标的眼睛绘制像素卡通图标的嘴巴与头顶【绘制卡通像素图标实例】绘制像素卡通图标的右边绘制像素卡通图标的耳朵【绘制卡通像素图标实例】绘制像素卡通图标的肩膀绘制像素卡通图标的上半身与手臂【绘制卡通像素图标实例】绘制像素卡通图标的下半身像素卡通图标添加颜色2D剪影图标的绘制剪影图标，因为其简洁容易识别的造型，经常被大批量成套的运用在系统功能菜单里，所以一般外观的统一性和识别性非常重要。现在网络资源非常丰富，有大量的剪影矢量图标素材下载，而新手UI设计师最容易犯的错误就是东挖西找，导致整套图标风格不
13、统一。风格不统一的2D剪影图标1、倒角和圆角一致【2D剪影图标绘制标准】2、线的宽度一致3、体积感一致4、外轮廓造型一致5、倾斜角度一致6、透视角度一致7、功能识别性，阴阳两套在不同背景色上的呈现1、关键节点绘制法剪影图标以简练为绘制手段，不是没有细节，而是更加谨慎认真的注重每一笔。这里举例剪影图标绘制方法要点，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少；难的是调整的过程与产品环境的融合性，易用性，还有设计者的创意想法。最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。【2D剪影图标设计技巧】2、绘制精致的基础要素（1）轮廓饱满，不出现边缘模糊现象。图标边缘轮廓处理（2）图标图形结构比例协调。同一图标图形内部结构优化处理（3）保持图形的视觉平衡。圆形与方形图标的视觉平衡处理【绘制篮球2D剪影图标实例】新建画布，并设置背景色绘制5050px的外圆绘制4646px的内圆并相减得到外框绘制篮球中心线绘制篮球左圆弧线绘制篮球其他圆弧线篮球剪影2D图标完成图Thanks
