移动端UI设计项目实战教程 项目二 APP应用图标设计-任务二 线性图标设计.pptxVIP

项目二APP应用图标设计任务二线性图标设计

任务说明：该任务主要针对APP应用图标中的线性图标设计的内容进行讲解，对图标的视觉统一，形状工具组绘制，布尔运算等内容进行知识性的导入，并通过具体的任务实现过程进行实操性演练。

知识导入：1、图标的视觉统一：在移动UI设计中，图标的视觉统一是非常重要的。相对于文字而言，图标所表达的信息更清晰、更生动、更有利于用户理解内容和完成交互。作为移动UI设计师，设计出好的图标是一项必不可缺少的技能。图标的视觉统一包含了以下几个基础要素：

1、图标的视觉统一：（1）类型统一在同一套的图标设计中，要保证设计的图标是同一类型的，比如：同一套的图标都是线性图标，那么就尽量不要出现面型图标或线面混合图标。

1、图标的视觉统一：（2）风格统一同一类型的图标，也有不同的风格，我们也需要将其风格统一。例如：在线性图标中，可以有断点描边、粗描边、细描边，渐变描边等风格。

1、图标的视觉统一：（3）粗细统一图标设计中需保证图标描边的粗细一致，切勿粗细不统一，会不和谐，没有整体感。粗细统一

1、图标的视觉统一：（4）透视统一在设计成套立体图标时，设计师需要考虑透视和投影，要确保每个图标的透视和投影都是统一的，这样才能使得图标整体看起来十分和谐。

1、图标的视觉统一：（5）圆角统一同一个项目中，设计师在绘制图标的时候，需要注意细节。如果有的图标有圆角，那么每个图标的圆角都必须一致。

1、图标的视觉统一：（6）大小统一我们所说的大小统一，不是物理上的绝对的大小统一，而是视觉上的统一。在设计过程中我们会发现，有的时候即使图标的高度、宽度都是一样的，但是我们视觉上却觉得它们不一样大。比如：相同尺寸的正方形，圆形，三角形，当它们三者摆放在一起的时候，我们视觉上会觉得正方形最大。如图7所示。所以，在这种情况下，我们在设计的时候可以适当增大圆形和三角形的大小，以便让三个图形视觉上看上去大小一样。

1、图标的视觉统一：（6）大小统一物理上的大小统一视觉上的大小统一

2、形状工具组绘制：在PS软件中形状工具组包含了“矩形工具”、“圆角矩形工具”、“椭圆工具”、“多边形工具”、“直线工具”、“自定形状工具”。形状工具组位于PS软件的左侧工具栏中，它的快捷键是【U】。

2、形状工具组绘制：（1）矩形工具：矩形工具的作用是绘制出一个矩形和正方形（按住Shift键，可以绘制出正方形）。按住【Alt】键可以绘制出一个以鼠标为中心的矩形。按住【Alt+Shift】键，可以绘制出一个一鼠标为中心的正方形。在PS软件中绘制完成一个矩形后，会弹出“属性”面板，可以在属性面板中设置相关参数。例如：尺寸大小、圆角弧度、描边、填充等参数。

2、形状工具组绘制：（2）圆角矩形工具圆角矩形工具的作用是绘制出一个带有圆角效果的矩形。绘制圆角矩形前，一般会先在工具选项中设置“半径”参数，当半径参数设置越大，则圆角效果越大，反之，则越小。

2、形状工具组绘制：（3）椭圆工具椭圆工具的作用是绘制出一个椭圆和正圆（按住Shift键，可以绘制出正圆）。按住【Alt】键可以绘制出一个以鼠标为中心的椭圆。按住【Alt+Shift】键，可以绘制出一个一鼠标为中心的正圆形。

2、形状工具组绘制：（4）多边形工具多边形工具的作用是绘制出正多边形和星形。绘制多边形前，一般会先设置两个参数。一个是在工具选项的“路径选项”设置中，设置半径为“平滑拐角”或“星形”，另一个是设置“边”数。

2、形状工具组绘制：（5）直线工具直线工具的作用是绘制出直线和带有箭头的路径。如果要设置直线的粗细，需要在工具选项的“粗细”参数中设置，如果是要设置带有箭头的路径，需要在工具选项的“路径选项”参数中设置箭头“起点”和“终点”。

2、形状工具组绘制：（6）自定形状工具自定义形状工具主要是用来绘制多种自定义形状。

3、布尔运算：布尔运算是数字符号化的逻辑推演法，包括并集、交集、差集。在PS软件中使用这种的操作，可以快速地将简单的基础图形组合成新的复杂的图形。使用布尔运算，可以在选区工具中使用，也可以在形状工具中使用。

3、布尔运算：（1）在选框工具中使用布尔运算首先，需要先选中一个选框工具，例如：矩形选框工具，接着，任意拉出一个新选框，在工具选项中选择需要的布尔运算，然后，拉出另一个选框，此时，就会出现一个新的选框。那么这个选框就是运用布尔运算制作出来的。

3、布尔运算：（2）在形状工具中使用布尔运算首先，需要先选中一个形状工具，例如：矩形工具，接着，任意绘制一个形状，然后，按住【Alt+鼠标左键】，绘制出第二个形状，画好后松手，就会得到一个不规则的形状。此时，这个形状会有两个形状的外轮廓，在选中形状工具的情况下，点击“合并形状组件”按钮