《交互界面设计》课件-2.2图标的设计风格

双击安装字体，安装后重启PPT请安装字体山东科技职业学院UI设计UIdesign图标的风格图标的风格大体可以分为六种，分别是渐变风格、剪影风格、长投影风格、卡通风格、轻质感风格和拟真风格2.1.3图标的风格一、渐变风格多为单色渐变，颜色过渡清新自然，是目前的主流设计风格之一，如下图所示。除用于图标外，渐变风格可使用的场景非常多，如APP中的背景图、按钮等。2.1.3图标的风格二、长投影风格通常会以纯色作为图标主体背景，该风格色彩对比度大，视觉冲击力强，通过长投影突出主体，从而创造鲜明的层次感和空间感，常用于APP页面中的分类图标。2.1.3图标的风格三、轻质感风格层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。2.1.3图标的风格四、卡通风格特点是可爱，富有亲和力，设计简洁而精致，视觉效果突出，但风格小众，使用范围比较局限，常用于女性或二次元（二维，二次元源于日语）APP中。2.1.3图标的风格五、拟真风格

iOS7以前，拟真风格是UI设计的主流，这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，快速领会图标表达的意图。2.1.3图标的风格六、剪影风格特点是简约、概括，视觉识别度良好，设计感强，常被用于APP的功能型图标中。剪影图标可分为线性、面性和线面结合三种，线性为未选中状态，面性、线面结合为选中状态。2.1.3图标的风格七、剪影风格图标——线性图标1.定义线性图标即通过统一的线条进行绘制，表达图标的功能。2.应用线性图标经常用于APP界面底部的标签栏、导航栏的功能按钮以及界面中的分类。线性图标应用于APP界面底部标签栏线性图标应用于导航栏2.1.3图标的风格七、剪影风格图标——线性图标3.分类线性图标形象简练、设计轻盈，又可以细分为圆角图标、直角图标、高光式图标、断点图标、不透明度图标、双色图标、一笔画图标。线性图标应用于APP界面底部标签栏线性图标应用于导航栏2.1.3图标的风格七、剪影风格图标——线性图标3.分类圆角图标圆角图标柔和、亲切一般用于母婴、儿童以及女性等方面内容圆角图标（图片来源花瓣）直角图标直角图标明快、果断一般用于金融以及工具等方面内容直角图标（图片来源花瓣）2.1.3图标的风格七、剪影风格图标——线性图标3.分类高光式图标高光式图标较传统一般用于银行等方面内容断点图标断点图标有趣、丰富、一般用于表现年轻、可爱等方面内容高光式图标（由爱沙尼亚设计师MartV创作）断点图标（图片来源追波，由中国设计师WilburXu创作）2.1.3图标的风格七、剪影风格图标——线性图标3.分类不透明度图标不透明度图标有层次，适用范围较广双色图标双色图标由两种不同色彩的线搭配构成适用于表现可爱、活泼等方面的内容由印度设计师SarathJayaprakash创作由美国设计师JakobScott创作2.1.3图标的风格七、剪影风格图标——线性图标3.分类一笔画图标一笔画图标较文艺，同时难度系数比较高一般用于文化、艺术等方面内容图片来源Pinterest2.1.3图标的风格八、剪影风格图标——面性图标1.定义面性图标即填充图标。2.应用面性图标经常用于APP界面底部的标签栏、图标的选中状态、以及界面中的金刚区和界面中的重要分类。由印度设计师AbhinavAgrawal创作2.1.3图标的风格八、剪影风格图标——面性图标3.分类面性图标整体饱满、形象突出，又可以细分为单色面性图标、不透明色块面性图标、多色面性图标。面性图标应用于分类2.1.3图标的风格3.分类单色面性图标单色面性图标是最基本的面性图标一般用于APP界底部的标签栏以及图标的选中状态。八、剪影风格图标——面性图标由多伦多设计师DmitriLitvinov创作2.1.3图标的风格3.分类不透明色块面性图标不透明色块面性图标有层次一般用于APP界面中的金刚区起到运营效果。八、剪影风格图标——面性图标由多伦多设计师DmitriLitvinov创作2.1.3图标的风格3.分类多色面性图标多色面性图标酷炫、多彩一般用于生活等方面内容。八、剪影风格图标——面性图标图片来源追波，由设计师超创作2.1.3图标的风格九、剪影风格图标——线面结合图标1.定义线面结合图标是线性图标和面性图标的集合。2.应用线面结合图标经常用于趣味性APP界面中底部的标签栏、界面中的分类或是引导页与弹框中。图片来源CreativeMarket2.1.3图标的风格九、剪影风格图标——线面结合图标图片来源CreativeMarket3.分类线面结合图标充满活力、形象有趣，又可以细分为点缀填充、错位填充、全部填充。2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类点缀填充点缀填充图标，填充的面性约占图标的30%一般用于APP界面中的底部标签栏。由多伦多设计师DmitriLitvinov创作2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类错位填充错位填充图标，面与线进行错位一般用于APP界面中的底部标签栏。由中国设计师Vic创作2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类全部填充全部填充图标，充实、饱满一般用于APP界面中的分类或是引导页与弹框中。由立陶宛产品设计师MantasSuktus创作2