《交互界面设计》课件-2.1.2 图标的设计原则

双击安装字体，安装后重启PPT请安装字体山东科技职业学院UI设计UIdesignUI设计UIdesign山东科技职业学院2.2图标的设计原则讲课人：张天娇导入随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达。现在各种各样的图标充斥在不同的App中，那么怎样的图标才设计师应该追求的方向呢？评价一个图标设计的好坏的标准是什么呢？学习目的1.图标的设计原则2.图标的设计要点图标的设计原则表意性原则、美观性原则、视觉统一性原则、与场景协调原则、原创性原则2.2.1图标的设计原则一、表意性原则表意性原则也叫可识别原则。图标在很多时候可以代替文字，所以识别性非常重要。图标要准确快速地表达含义，否则就不能快速准确地引导用户操作。所以表意性原则是图标设计的灵魂，也是图标设计的第一原则。当我们看到一个图标时，如图所示的键盘、一些图标、房子、钥匙、电话、垃圾箱等，可识别性强、简单直观，即使不认识字，也能立即理解图标的含义。2.2.1图标的设计原则一、表意性原则象形的图标设计体现了表意性原则：图标与生活中的实物相同或相似，人们自然联想到生活中的实物，就能明白它代表的含义，这样图标就可以准确表达相应的内容。象形的图标设计2.2.1图标的设计原则二、美观性原则在UI界面中，图标是点睛之笔，一个图标的美观度决定了用户对这个图标的观感，进而影响到对整个应用的态度。帅气、美观的图标会大大增加用户点击的概率。不同类别的美观图标效果2.2.1图标的设计原则三、视觉统一性原则一套好的图标，视觉上要协调统一，有自己的风格。视觉的统一提升了设计品质，也会提升用户的满意度。怎样实现视觉统一呢？有一个思路可以供大家参考：是线条的，还是实体填充的?是平面的，还是立体的?是简约的，还是精细的?是单色的，还是多彩的?是古典的，还是现代的?是写实的，还是抽象的？......2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。1.形体造型上，需要根据图标设计规范对图标各部分进行统一。具体的规范会在后面进行深入剖析。形体造型统一的图标形体造型未统一的图标2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。2.风格表现上，得益于移动互联网的发展，图标的风格非常多样化。可以根据应用场景和目标而选择合适的风格。APP界面中风格统一的图标2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。3.节奏平衡上，由于图标造型的丰富，可以使用网格规范达到节奏协调、视觉统一的效果。在规范下设计出视觉平衡的图标2.2.1图标的设计原则四、与场景协调原则图标与场景协调的原则：在UI界面制作中，图标通常是系列存在的（如手机主题界面），设计图标时要考虑到图标是否适合当前的场景。中国风风格图标设计2.2.1图标的设计原则四、与场景协调原则如中国风风格的UI界面，应当加入与中国传统文化相关的元素来制作图标，如京剧、油纸伞、月琴等等。如果放置一些不相关的元素，图标就会显得不协调。课程思政：坚定文化自信，弘扬中华优秀传统文化，建设文化强国，夯实中华民族伟大复兴之路。中国风风格图标设计2.2.1图标的设计原则四、与场景协调原则建设社会主义文化强国要弘扬中华优秀传统文化，筑牢中华民族的“根”和“魂”。我国有着悠久的历史和灿烂的文明，要深入挖掘中华优秀传统文化的内涵，把握时代需求、适应时代变化，继承中华优秀传统文化之精髓，为中华优秀传统文化在新时代绽放光彩提供不竭动力。中国风风格图标设计此处加入动画动画脚本：1.本页及上页课程思政文字

2.展示中国优秀传统文化（剪纸、泥塑、风筝、年画等）3.依次展示右边12个图标2.2.1图标的设计原则五、原创性原则原创性是APP长远发展的前提。一般的设计者总是热衷于素材网站中的素材标，使用它们省时省力，下载即用，但这会涉及到版权问题，还会使产品自身失去个性。图标设计要点桌面型图标设计要点和功能型图标设计要点2.2.2图标设计要点一、桌面型图标设计要点桌面型图标可以说是APP的门面，它给用户的第一印象非常重要，用户可以此初步评判APP的品质、作用和可靠性等。设计桌面型图标时应注意以下几点。2.2.2图标设计要点一、桌面型图标设计要点1.避免使用照片将照片作为主体直接出现在图标中，会给用户一种敷衍了事的感觉，也会被拒绝上架。在图标设计中，设计师可以提取照片中的纹理、细节等应用于拟物图标中。2.2.2图标设计要点一、桌面型图标设计要点2.避免运用大量文字当产品隐喻比较抽象时，可直接使用文字作为图标的主体，如右图所示。注意：图标主体文字不宜超过4个，否则会降低图标识别度。2.2.2图标设计要点一、桌面型图标设计要点3.图形应具有独特性除了要体现APP的功能外，还要保证图标是独一无二的。Pinterest和Path这两款APP有很多共同点，如主色都为红色，英文首字母相同，图标都用字母“P”作为主体，导致它们图标极为相似，新用户有时难以分辨。2.2.2图标设计要点一、桌面型图标设计要点4.表意明确图标应表意明确，让用户第一眼看到就明白它是干什么的。例如图标中出现耳机、音符，就会联想这个APP是关于音乐。2.2.2图标设计要点一、桌面型图标设计要点5.慎重用色每个颜色都有其自身的象征意义，设计师需要根据产品气质和用户群体选择合适的颜色，不可为了博人眼球在图标中加入无关杂色。2.2.2图标设计要点二、功能型图标设计要点设计功能型图标时应注意以下三点：简洁：简单易懂。功能图标的基本功能是辅助信息分类。减少不必要的设计，确保人与机器的交互过程更快速、更方便。统一：风格统一。可为图标添加相同的细节，如统一为图标作断线或圆角处理。规则：图形规则有序。2.2.2图标设计要点二、功能型图标设计要点设计功能型图标时应注意以下三点：32像素和36像素单位是App中常见的功能图标尺寸，目前的触屏手机