《UI图标设计》课件-第一课：UI图标设计相关概念

UI图标设计课程介绍：学时安排：48学时，4学时/周,共12周。考试成绩：课堂表现20%，平时作业30%，综合作业50%。

UI图标设计课程是一门专业必修课，它的前期课程是设计构成、图形图像处理技术和矢量图软件基础。后续课程为网页设计与制作等。通过该课程的学习，应掌握图标设计的相关知识，如何在图标设计中通过对视觉元素的设计体现美的效果，设计制作出整洁漂亮的作品。第一课：UI图标设计相关概念

一、UI设计概述

二、UI图标设计定义

三、UI图标设计要素

四、UI图标设计流程

五、UI图标设计原则

六、UI图标的尺寸和格式

七、UI图标分类UI即UserInterface(用户界面)的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。从传统意义上来说，UI设计是指用户界面的美化设计，但事实上UI设计不仅是指“用户与界面”的从属关系，还包括“用户与界面”的交互关系。因此UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。1.1.1什么是UI设计1.1UI设计概述通常我们接触到的UI界面设计种类很多，例如：播放界面、登录界面、产品展示界面等。1.1.1什么是UI设计1.1UI设计概述手机端医疗UI界面及相关图标设计延时符延迟符医院就诊自助终端设备UI界面设计及相关图标设计好的UI设计要让用户界面操作变得舒适、简单、自由，充分体现软件的定位和特点。例如：医院的智能终端操作界面，图标要大，要清晰明了。延时符延迟符图书馆自助借书还书终端UI界面设计UI设计则：符合人们的逻辑思路，方便人们操作界面、符合大众审美。延时符延迟符大型活动会场、景区等自助设备终端UI界面设计政府、税务等自助系统UI界面设计图标具有指示性，不看文字，只看图标，就能理解大致操作内容。延时符延迟符图标好的UI设计可以让用户界面变得有个性、有品味。例如各种风格的游戏界面设计，精致且清晰的图标方便用户体验。各种风格的游戏界面设计延时符延迟符中式风格游戏界面设计图标延时符延迟符图标图标课程的重心在UI图标的设计与制作延时符延迟符UI图标起到了画龙点睛的作用，方便用户操作，美观且具有质感。图标是建立在UI设计之上的，我们同学要了解UI设计、掌握APP设计流程和移动设备尺寸标准等基础知识，为后面的课程学习奠定一定的基础。在互联网的迅猛发展的时代，高智能、高配置的移动设置为APP客户端的发展提供了巨大的助力，各大互联网公司和电商平台也将通过APP进行营利确定为未来的发展方向。在APP开发过程中，UI设计是整个APP程序设计中的重要环节，一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造收益。UI这个名词在近几年异常火爆，其实UI设计在设计行业一直存在，从最初人们用到的电子产品、软件再到网站的建设，这些都是UI范畴。1.1.2

UI设计发展史1.1UI设计概述下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述1、1985年微软发布了Windows1.0操作系统。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述2、Windows2.0发布于1987年，为人类带来了第一版MicrosoftWord和Excel软件。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述3、1991年的Windows3.1让Windows成为IBM-PC的标配系统。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述4、微软的Windows95让1995年成为PC历史上的一个里程碑。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述5、1998年，WIN98横空出世，但是界面上并没有太多改观。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述6、2000年发布的WindowsME基本上也是Windows98的加强版。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述7、2001年，微软发布了WindowsXP，大幅改进了界面设计。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述8、2006年，微软发布了WindowsVista。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述9、2007年，微软发布了Windows7，是继WINXP之后使用最多的操作系统，从系统平台到界面设计都非常到位。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述10、2012年，微软发布了Windows8把我们带到了扁平时代。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述11、2014年，微软发布了Windows10。下面以微软windows界面系统的发展为主线，追溯UI的发展历程。1.1.2

UI设计发展史1.1UI设计概述12、2021年10月，微软发布了Windows11。1、PC端UI设计1.1.3

UI设计分类1.1UI设计概述PC即PersonalComputer(个人电脑)的简称。所谓PC端UI设计主要指用户电脑界面设计，其中包括系统界面设计、软件界面设计、网站界面设计。2、移动端UI设计1.1.3

UI设计分类1.1UI设计概述移动端一般指移动互联网终端，也就是通过无线技术上网接入互联网的终端设备，它的主要功能就是移动上网。在移动互联网时代，终端多样化成为移动互联网发展的一个重要趋势，除了手机之外还包含Pad、智能手表、PDA、MP4等。3、其他终端UI设计1.1.3

UI设计分类1.1UI设计概述除了前面所描述的终端设备需要用到UI界面设计外，当今市场中还包含许多其他终端设备，同样需要用到UI界面设计。例如车载系统、ATM机、打印机等。

一个优秀的UI设计师，从技能上讲，不仅可以绘制图标，还可以设计界面，掌握多种多样的交互知识。好的UI设计不仅让软件变得有个性有品味，还能够让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。1.1.4

UI设计师标准1.1UI设计概述1、视觉设计1.1UI设计概述视觉设计是针对眼睛功能的主观形式的表现手段和结果。在UI设计中，视觉设计不仅仅是做图标、做界面或者界面元素。还应掌握平面构成、色彩构成、版式设计、心理学、美术绘画、设计创意等。1.1.4

UI设计师标准2、交互设计1.1UI设计概述交互设计是一种目标导向设计，所有的工作内容都是围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标。做好交互设计首先要具备良好的逻辑能力，掌握交互设计原则、不同平台的规范，还应具备产品视觉感和沟通能力。1.1.4

UI设计师标准3、体验设计1.1UI设计概述体验设计是将消费者的参与融入设计中，力图使消费者感受到美好的体验过程，是基于人机交互、图形化设计、界面设计和其他相关理论进行的设计。完美的体验设计需要设计师掌握可用性原则，具备信息挖掘、数据分析和沟通能力。1.1.4

UI设计师标准二、UI图标设计三、UI图标设计要素1、形态设计2、色彩设计3、材质设计三、UI图标设计要素圆形“面”的图标设计方形“面”的图标设计三角形“面”的图标设计三、UI图标设计要素三、UI图标设计要素木质材质的图标设计坚硬而光亮材质的图标设计四、UI图标设计流程访问者为低龄人群的图标设计四、UI图标设计流程“照相机”图标的草图设计四、UI图标设计流程“照相机”图标的最终渲染效果复古风格电视机图标的效果视觉效果终稿1、可识别性原则看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。五、UI图标设计原则2、差异性原则

差异性原则，什么意思呢？意思是如果一个界面上有六个图标，一眼看上去，要能第一时间感觉到他们之间的差异性，否则怎么辨认呢？五、UI图标设计原则差异性原则

AdobePhotoshop的图标，精致，专业，图标设计的典范。它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。五、UI图标设计原则3、合适的精细度，元素个数

首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图。五、UI图标设计原则

合适的精细度，元素个数ICONFACTORY的图标设计，见下图，合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。五、UI图标设计原则4、风格统一性原则

如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。是简约的，还是精致的？是平面的，还是立体的？

是古典的，还是现代的？

是写实的，还是卡通的？

是单色的，还是多彩的？

是绚丽的，还是柔和的？

是抽象的，还是具体的？

是有框的，还是无框的？五、UI图标设计原则

风格统一性原则统一色彩，准备好调色板五、UI图标设计原则风格统一性原则下图同样出自ICONFACTORY，简单的可爱的卡通的风格。五、UI图标设计原则风格统一性原则

一款小游戏做的任务角色图标设计，可爱的、3D的、卡通的风格，色彩也和谐一致。五、UI图标设计原则5、与环境的协调性

图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。五、UI图标设计原则

与环境的协调性

如果界面是平面的，简约的，可以考虑用一些简单的平面的符号或者图形来设计图标，这样整个界面会很协调，可识别性非常强的，在简洁的界面里，会透露出一种简约之美。五、UI图标设计原则与环境的协调性体育运动类图标的设计五、UI图标设计原则

追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。

图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养。

多看，多模仿，多创作。勤奋+天赋=成功五、UI图标设计原则6、原创性图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。当然，这里也要看你的产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。五、UI图标设计原则

原创性

右面的图标设计，简直就是完美的艺术品，具有很强的艺术效果和原创性。从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的。永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。五、UI图标设计原则

尺寸图标的尺寸常有以下几种：16×1624×2432×3248×4864×64128×128256×256图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。

六、UI图标设计尺寸与格式六、UI图标设计尺寸图标的常用格式有以下几种：PNG，GIF，ICO，BMP，

PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小。GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿，要解决此问题，必须在存成此格式时候，添加相同背景色的杂边，比较麻烦。JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色。ICNS：Macintosh系统里独特支持的格式，仅限于此系统。因此，图标设计的核心思想，就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确六、UI图标设计尺寸和格式七、UI图标分类（功能）解释性图标：它们是用来解释和阐明特定功能或者内容类别的视觉标记。在某些情况下，它们并不是直接可交互的UI元素，在很多时候也会有辅助解释其含义的文案。同时，它们还常常会作为行为召唤的文本的视觉辅助元素而存在，以提高信息的可识别性。很多时候用户会借助这些解释性图标来获取信息，而不是相搭配的文本。交互图标：这种图标在UI中不止是展示的作用，它们还会参与到用户交互当中来，是导航系统不可或缺的组成部分。它们可以被点击，并且随之响应，帮助用户执行特定的操作，触发相应的功能。七、UI图标分类（功能）装饰和娱乐用图标：这种图标通常是用来提升整个界面的美感和视觉体验，并不具备明显的功能性。但是，它们同样是重要的。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，并且提升了整个设计的可靠性和可信度。更准确地说，这些装饰性的图标不仅可以吸引并留住用户，并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。七、UI图标分类（功能）七、UI图标分类（功能）应用图标：是不同数字产品在各个操作系统平台上的入口和品牌展示用的标识，它是这个数字产品的身份象征。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。视觉性图标：字符图标“Glyph”一词是源自于排版领域，现在已经随着数字设计而逐步在数字设计领域扎根了，它源自于希腊语，含义为“雕刻”。最初，它值得是读者和作家约定俗成的符号、字符合集中所包含的各种图形。在排版领域当中，符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的时候甚至是两者的组合七、UI图标分类（功能）扁平和微扁平图标：扁平化的图标设计比起字符图标就要复杂得多，其中增加了色彩和其他元素的填充，比起近乎由轮廓和笔画构成的字符图标，明显要高一个维度。然而和前者一样，扁平的图标同样专注于清晰而直观的视觉信息传达，为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此，在二位的平面上，不借助复杂的纹理和阴影来明了地、视觉化地传达信息，和拟物化图标正好相对。七、UI图标分类（风格）拟物化图标：就如同上文所说，拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中七、UI图标分类（风格）1、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识Android系统是一个开放的系统，可以由开发者自行定义，所以屏幕尺寸规格比较多元化。为了简化设计并且兼容更多手机屏幕，Android系统平台按照像素密度将手机屏幕划分为：低密度屏幕（LDPI）、中密度屏幕（MDPI）、高密度屏幕（HDPI）、X高密度屏幕（XHDPI）、XX高密度屏幕（XXHDPI）、XXX高密度屏幕（XXXHDPI）6类1、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识像素密度比例关系分辨率(像素)屏幕尺寸（inch）LDPI0.75240×3202.7MDPI1320×4803.2HDPI1.5480×8003.4XHDPI2720×12804.65XXHDPI31080×19205.2XXXHDPI41440×25605.961、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识主菜单图标是指用图形在设备主屏幕和主菜单窗口展示功能的一种应用方式。主菜单图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素）36×3648×4872×7296×96144×144192×192主菜单图标尺寸1、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识状态栏图标是在状态栏上用来表达各种应用提醒的图标，通常具有较高的对比度。状态栏图标状态栏图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素）24×2432×3248×4864×6496×96128×1281、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识通知图标是指应用程序产生通知时，显示在左侧或右侧，标示显示状态的图标。通知图标通知图标类型LDPIMDPIHDPIXHDPIXXHDPIXXXHDPI图标尺寸（像素）18×1824×2436×3648×4872×7296×961、Android系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识Android系统并不提供统一的圆角切换功能，因此设计产出图片必须是带圆角的。2、iOS系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识iOS系统对于图标尺寸有着严格的规范要求，在不同分辨率的屏幕中，图标的显示尺寸也各不相同。2、iOS系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识类型分辨率（像素）PPIiPhone3GS320×480163iPhone4/4s640×960326iPhone5/5s640×1136326iPhone6750×1134326iPhone6Plus1242×2208401iPhone7750×1134326iPhone屏幕参数表2、iOS系统图标设计规范2.1.5图标设计规范2.1图标设计基础知识iPhone图标尺寸参数表图标/机型iPhone3GSiPhone4/4siPhone5/5S/6/7iPhone6Plus