移动端UI设计项目实战教程 项目二 APP应用图标设计-任务三 异形图标设计

项目二APP应用图标设计任务三异形图标设计任务说明：

该任务主要针对APP应用图标中的异形图标设计的内容进行讲解，对常见的图标风格和分类、钢笔工具、FX图层样式、图层混合模式、图层蒙版等内容进行知识性的导入，并通过具体的任务实现过程进行实操性演练。知识导入：1、常见的图标风格和分类：

在用户界面设计中，图标是必不可少的元素。虽然绝大多数的图标都很小，甚至不被人注意到，但是它却帮助设计和用户解决了很多的问题。图标的风格和分类，将从功能、表现形式、设计风格三方面来分类。1、常见的图标风格和分类：（1）从功能上分类

按功能分类，图标又可以分为交互式图标、装饰性图标和说明性图标。1、常见的图标风格和分类：（1）从功能上分类

交互式图标：具有双向传递信息的能力，不仅可以是向用户传递某种信息，也可以引导用户执行某种特定的操作。例如：登录注册按钮、开关按钮、点赞、转发按钮等都属于交互式图标。1、常见的图标风格和分类：：（1）从功能上分类

装饰性图标：这种图标通常用来提升整个界面的美感和视觉体验，并不具备明显的功能。这类图标较多地运用在手机主题中，它具备特定风格的外观装饰。1、常见的图标风格和分类：（1）从功能上分类

说明性图标：重在阐述信息。在某种情况下，说明性图标不可以直接作为可交互的UI元素，它们常常作为视觉辅助元素出现，以提高信息的可识别性。1、常见的图标风格和分类：（2）从表现形式上分类

按表现形式分类，图标又可以分为隐喻图标、工具图标和混合图标。1、常见的图标风格和分类：（2）从表现形式上分类

隐喻图标：两者互不关联，但却又有着某种千丝万缕的联系，以此来达成记忆的目的的图标。比如：设置图标、邮件图标、购物图标、搜索图标等。1、常见的图标风格和分类：（2）从表现形式上分类

工具图标：主要以行业分类，使用范围较广，大众识别度较高，且被长期使用的。例如：医疗图标、建筑行业图标等。1、常见的图标风格和分类：（2）从表现形式上分类

混合图标：混合不同风格的图标，以便达到不同的视觉效果，多用于设计师个性的表达。例如：MEB粗描边风格。1、常见的图标风格和分类：（3）从设计风格上分类

按设计风格分类，图标又可以分为面性图标、线性图标、扁平图标和拟物图标等。1、常见的图标风格和分类：（3）从设计风格上分类

面性图标：使用范围最广的图标之一，稳定性好，图标层次感清晰。1、常见的图标风格和分类：（3）从设计风格上分类

线性图标：使用感更轻盈、简约。主要以线条表现为主。1、常见的图标风格和分类：（3）从设计风格上分类

扁平图标：其实就是线+面，或面+面的表现形式。扁平化图标具有个性化、年轻化、可拓展的特征。扁平图标专注于清晰直观的信息传达，为客户提供一目了然的视觉感受。扁平图标突出功能，不借助复杂的投影和纹理，与拟物图标相对。1、常见的图标风格和分类：（3）从设计风格上分类

拟物图标：尽可能地将现实生活中的形状、纹理、光阴都融入到图表中，尽可能地逼真是拟物图标的特点。拟物图标较多地运用在游戏设计和游戏产品类图表中。2、钢笔工具：

钢笔工具是非常重要且实用的一个工具。钢笔工具位于工具栏上，包含了“钢笔工具”、“自由钢笔工具”、“弯度钢笔工具”、“添加锚点工具”、“删除锚点工具”和“转换点工具”。钢笔工具的快捷键是【P】。2、钢笔工具：

在PS软件中，使用钢笔工具绘制路径的方法很简单。只需要使用钢笔工具在起点和终点位置单击一次即可，按住【Shift】键可以绘制一条直线路径。2、钢笔工具：

如果需要绘制一条曲线，那么需要在空白位置先点击一次，确定起始点，然后拖动鼠标，可以看到就可以绘制曲线了。在转角的位置有一个调节杆，是用来限制曲线方向的。2、钢笔工具：

如果需要绘制带转角的曲线，可以按【Alt】键。先在空白位置点击一下，确定起始位置，然后拖动鼠标，在绘制第二个点的时候，不要松开鼠标，按住【Alt】键，然后，拖动调节杆，可以看到调节杆发生了变化，我们调节这个调节杆的方向，就会影响绘制出来的曲线效果。2、钢笔工具：

添加锚点、删除锚点：在确定了绘制的路径的情况下，如果需要添加锚点，可以在路径上单击一次，就会添加一个锚点，如果单击两次，就会删除锚点。添加的锚点，带有两个调节杆，这两个调节杆都可以使用。当按【Alt】键，加选其中一侧的调节杆时，可以单独对一侧的调节杆调节。2、钢笔工具：

当按【Ctrl】键，点击空白处，可以在原有路径基础上，再绘制一条新的路径，而第一条路径不受影响。如果我们需要再次编辑原有路径，可以按【Ctrl】键，再点击一下曲线，然后按【Shift】键，点击开始点，就可以在开始点上重新编辑了。3、FX图层样式：

图层样式在PS软件中常用来处理图层，是后期制作图标以达到预定效果的重要手段之一。PS软件的图层样式效果非常丰富，图层样式包括了许多可以自动应用到图层中的效果，包括：斜面和浮雕、描边、内阴影、内发光、光泽、颜色叠加、渐变叠加、图案叠加、外发光、投影。3、FX图层样式：

当应用一个图层样式时，一个小三角和一个f图标就会出现在“图层”面板相应图层名称的右侧，表示这一图层包含了自动效果，当出现向下的小三角符号时，还能看到该图层应用了哪些图层样式。这样便于用户管理和修改。4、图层混合模式：

混合模式是为图层叠加不同的效果。混合模式主要包括：模式的混合和不透明度的。混合模式在图层面板的上方位置4、图层混合模式：

（1）模式的混合：当图层叠加时，上方的图层和下方的图层的像素会进行混合，从而得到一种全新的图像效果。（2）不透明度：用来确定图层的透明度，当不透明度为100%时，当前图层完全不透明，当不透明度为0%时，当前图层完全透明。小提