《UI设计-AIGC驱动赋能界面完美设计》课件 3.1 相关知识

03项目三设计与制作“校缘通”App项目——

App图标设计31相关知识3.2任务实施3.3技能提升UI设计——AIGC驱动赋能界面完美设计033.1相关知识

3.1相关知识3.1.1

图标概念图标（ICON）是高度概括的图形化标识，分为广义与狭义两个概念：广义的图标，指现实中具备明确指向含义的图形符号；狭义的图标，则专指计算机设备界面中所使用的图形符号。在移动UI设计体系中，图标是核心组成部分，其承担着连接用户与界面的关键作用，也是图形化用户界面中最直接、最生动的视觉表现形式。一套优质的图标设计，不仅能在视觉层面传递产品调性、强化情感化设计表达，还能在交互层面帮助用户快速定位功能，进而提升产品的使用转化率。3.1.2图标风格类型图标是产品视觉风格的重要组成部分，通过差异化的设计表现形式，能帮助用户快速理解产品功能，更是打造优质产品用户体验的关键环节。图标按用途可划分为三大类，即工具图标、装饰图标、启动图标；按设计风格则分为扁平化风格、拟物化风格、微质感风格。3.1相关知识3.1.2图标风格类型1.扁平化风格在视觉表现上，扁平化风格降低了光影材质阴影对设计的影响，主次分明，易于识别，信息传达能力强。通常分为线性图标、面性图标和线面结合图标。1）线性图标线性图标，是由包括直线、曲线、点在内等元素组合而成的图标样式。基础线性图标主要以简单线条造型，搭配色彩，如图3-1所示。在此基础上还可以通过控制图标线条的粗细、圆角半径大小、透明度、复杂度、有无断点等实现丰富的效果，通常出现在标签栏、工具栏、列表等弱化视觉重点的地方。图3-1线性图标3.1相关知识3.1.2图标风格类型（2）面性图标

面性图标，是通过对图标轮廓闭合区域做纯色/渐变填充形成的图标样式，如图3-2所示。面性图标视觉表现力强，比线性图标更能表达出图标的力量感和重量感，可以通过单色、多色、渐变、透明度变化等实现丰富效果，适合用于App界面的主要功能入口区域。（3）线面结合图标

线面结合图标，是线性图标和面性图标两者结合的图标样式，由线框描绘轮廓，再填充平面背景，如图3-3所示。线面结合图标样式更丰富，装饰性强，可以通过单色、多色、渐变色、透明度、叠加等实现丰富效果，适用于App界面主要功能入口或情感化场景设计。图3-2面性图标图3-3线面结合图标3.1相关知识3.1.2图标风格类型2.拟物化风格拟物化风格图标是通过模拟现实物体的材质纹理、质感与细节打造的写实性图标样式，能让图标功能直观易懂，大幅提升视觉辨识度，具体如图3-4所示。这类图标可通过叠加色彩、3D效果、阴影及透明效果等手法，营造丰富的视觉表现；其应用场景以营销类界面及游戏类应用为主。3.微质感风格微质感风格图标是在经历了拟物化风格到扁平化风格的转变之后，结合图形化、渐变、光影、投影等延伸出的图标样式。微质感风格既有扁平化风格的易识别性，又有拟物化风格的质感，如图3-5所示。图3-5微质感风格图标图3-4拟物化图标3.1相关知识3.1.3图标设计原则UI界面图标设计需要遵循统一的设计原则，才能更充分地发挥产品的优势，主要原则有可识别性原则、差异性原则、与环境协调性原则、一致性原则。1.可识别性原则可识别性原则是指图形要能准确表达相应操作，让用户第一眼识别出图标所代表的含义，从中获得相关信息。2.差异性原则差异性原则是指在设计图标时，必须突出产品核心功能，同时要表现出差异性，避免同质化，给用户留下深刻的印象。3.统一性原则每个App都包含很多图标，图标设计要满足产品的需求，应该与整个产品或品牌的风格保持一致，保证界面与图标的整体感和一致性。4.一致性原则一致性原则要求在图标设计过程中，保持大小、圆角、视觉语言、线条粗细、元素疏密、间距、比例、正负形、角度的统一规范。遵循这一原则，能让图标准确传递信息，同时有效降低用户的视觉负担与记忆负担。3.1相关知识3.1.4图标网格化在相同的实际尺寸下，图形不同会视觉差异，呈现出不同的视觉大小，如图3-6所示。同样尺寸内的方形、圆形和三角形在视觉上大小为：正方形>圆形>三角形。为了保证在界面设计中不同形状的图标在视觉上保持一致，不同造型的图标有着不同的网格规范。图标网格已经形成了统一的