《图形图像处理技术》 课件 张秀杰 项目4 UI设计

项目4UI设计任务4.1学习UI设计的基础知识图形图像处理技术主要内容01UI设计简介02UI设计的分类03UI设计的原则04UI设计流程05UI设计要素06UI设计风格重点难点12341.熟知UI设计的基础知识。2.学会UI流程设计。3.培养学生赏析意识，提升专业能力。.4.培养学生的家国情怀和中华民族文化素养。知识目标素质目标教学目标技能目标能力目标任务情境

【任务场景】UI

即用户界面，UI设计行业已经在全球软件业蓬勃发展，属于高新技术设计产业。国内外众多大型

IT企业（如联想、华为、中国移动、百度、腾讯、京东、淘宝等）都成立了专业的

UI

设计团队，但此行业人才稀缺，且人才资源争夺激烈，就业市场供不应求。因此，提高UI设计师的个人能力势在必行。真正提升视觉设计、交互设计、用户体验3部分软件产品个性化程度已成为中国UI行业发展的重中之重。任务情境【任务布置】掌握UI设计的基础知识；熟练绘制UI图标、按钮及导航；掌握不同类型表单控件的设计方法，并能独立完成制作；通过任务4.3中的任务实施了解导航设计分类，并选择合理的导航类别来完成制作。4.1.1UI设计简介UI（UserInterface，用户界面）设计是指对产品的人机交互、思维逻辑、界面友好、美观的整体设计。优质的UI设计不仅让产品变得富有个性化，还会让操作变得更加方便、快捷、顺畅、自由，使产品能充分体现其定位，提升产品价值，并获得目标用户群体的喜爱。知识准备1.UI设计的概念4.1.1UI设计简介知识准备2.UI设计应用领域

在不同应用领域中，UI设计要考虑其视觉设计、交互设计、体验设计的效果。进行视觉设计不仅要考虑图标、界面、元素，还要考虑平面构成、版式设计、色彩搭配、设计创意、绘画、心理表现等。交互设计是一种目标导向设计，让用户更加快捷地完成任务、达成目标。良好的交互设计要具备优秀的逻辑思维、跨平台的兼容性、视觉感染力和交互的便捷性。4.1.1UI设计简介UI图形文件格式主要分为位图和矢量图两种。位图格式包括JPEG、BMP、GIF、PSD、TIFF、PNG等，矢量图格式包括CDR、WMF、DWG、AI和EPS等。PC端UI各元素的存储一般采用JPEG、BMP、GIF、AI、PNG格式；移动端UI各元素的存储一般采用PNG、GIF、JPEG格式。知识准备3.UI图形文件格式4.1.1UI设计简介知识准备3.UI图形文件格式名称说明PNG

它是一种采用无损压缩算法的位图格式，替代GIF和TIFF文件格式。PNG文件格式的特点是透明、体积小，适用于网页和手机UI设计GIF

它是图形交换位图格式，用于超文本标志语言，显示索引色彩图像，被广泛应用于互联网和在线服务系统上。GIF文件格式的特点是体积小、传输速度快、支持动画，适用于网页和手机UI设计JPEG

它是面向连续色调静止图像的一种压缩标准，也是最常用的图像文件格式，文件后缀名为“.jpg”“.jpeg”，以灵活的压缩方式控制文件大小。JPEG文件格式的特点是支持极高的压缩率，下载速度快，压缩后画质清晰度相对低，印刷效果差，适用于网页和手机UI设计AI

它是一种矢量图文件格式，也是一种分层文件，使用户可以对图像内的图层进行操作。AI文件格式是一个严格限制、高度简化的EPS子集，其特点是图像可以被无限放大不失真，适用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网UI图形制作表4-1常用的UI图形文件格式4.1.1UI设计简介知识准备

移动端UI设计是平面设计的一个分支，主要包括手机、平板电脑上的App设计和主题设计，是目前主流的UI设计。由于移动互联网的快速发展，因此很多公司以手机App开发为主。PC端UI设计以软件界面设计为主，如计算机上的软件和网页按钮、表单设计等。相对于移动端UI设计，PC端UI设计没有那么多局限性，两者之间的区别如表4-2所示。4.移动端UI设计和PC端UI设计的区别4.1.1UI设计简介知识准备4.移动端UI设计和PC端UI设计的区别区别移动端UI设计PC端UI设计应用设备不同手机、平板等移动设备上的UI设计计算机、其他设备终端上的UI设计屏幕尺寸不同手机、平板屏幕尺寸一般为4～12英寸PC端显示器的屏幕尺寸一般为19～24英寸显示区域不同手机、平板上的UI设计，因为屏幕显示尺寸有限，可以增加层级首页要多放一些内容，尽量减少层级的表现设计规范不同手机、平板上的UI操作一般是使用手指，手的精确度相对较低，图标尺寸可稍大些PC端的UI操作一般是使用鼠标，鼠标精确度较高，图标尺寸可小些UI交互操作不同手机、平板上只能实现点击、按住和滑动等操作，UI操作相对PC端弱化PC端可以实现单击、双击、按住、移入、移出、右击、滚轮等操作，UI操作性强表4-2移动端UI设计和PC端UI设计的区别4.1.2UI设计分类知识准备PC端UI设计主要包括系统界面设计、软件界面设计和网站界面设计，如图4-1～图4-3所示。1.PC端UI设计UI设计按用户和界面进行分类，可分为4种类型：PC端UI设计、移动端UI设计、游戏UI设计与其他终端UI设计。图4-1系统界面设计4.1.2UI设计分类知识准备图4-2软件界面设计图4-3网站界面设计4.1.2UI设计分类知识准备

移动端UI设计是指移动应用UI设计，如手机、平板、智能手表、智能手环、智能戒指等，是区别于PC端UI设计的一种叫法，主要有手机视觉界面设计、手机交互界面设计及手机用户体验设计，还有可穿戴智能蓝牙手表、可穿戴智能手环、智能戒指等界面设计，如图4-4～图4-11所示。2.移动端UI设计4.1.2UI设计分类知识准备2.移动端UI设计图4-4手机视觉界面设计图4-5手机交互界面设计图4-6手机用户体验设计4.1.2UI设计分类知识准备2.移动端UI设计图4-7可穿戴智能蓝牙手表界面设计图4-8可穿戴智能手环界面设计4.1.2UI设计分类知识准备2.移动端UI设计图4-9可穿戴智能运动手表界面设计图4-10智能戒指界面设计

图4-11未来可穿戴智能手机界面设计4.1.2UI设计分类知识准备3.游戏UI设计

游戏UI设计一般是策划把系统设计完成后，呈现的视觉交互模型的界面设计，如图4-12所示。图4-12游戏UI设计4.1.2UI设计分类知识准备4.其他终端UII设计

终端（ComputerTerminal）是与计算机系统相连的一种输入/输出设备，支持与计算机会话或具有处理功能，对此登录界面或交互界面进行的设计称为“终端UI设计”。常见的终端UI设计有医用监护仪界面、车载导航系统界面、自助机界面、自助排号机界面、ATM机界面和自助打印终端界面等，如图4-13～图4-18所示。图4-13医用监护仪界面图4-14车载导航系统界面图4-15自助机界面4.1.2UI设计分类知识准备4.其他终端UII设计图4-16自助排号机界面图4-17ATM机界面图4-18自助打印终端界面4.1.3UI设计原则知识准备1.简洁易识别UI设计的主要目的是让用户感受到软件操作界面更加舒适简单，能体现产品的定位与特点。UI设计原则主要包括简洁易识别、风格统一性、布局合理化、良好体验性、人性化设计。2．风格统一性3．布局合理化4．良好体验性5．人性化4.1.4UI设计流程知识准备4.1.5UI设计要素知识准备1．色彩用色范围（1）主色运用：主色起到烘托、渲染、突出内容的作用，如图标设计、网页主界面设计、导航栏设计、按钮设计等，唤起人们的情感并与之产生共鸣。因此，主色在UI设计中是非常重要的。（2）辅色运用：辅色在整体画面中起到平衡主色、减弱对视觉的冲击的作用，使色彩更加柔美、丰富，增加用户视觉的舒服感、画面感。4.1.5UI设计要素知识准备1．色彩用色范围

（3）点睛色运用：无论是在网页UI设计中还是在移动端UI设计中，点睛色在色彩选用上反差较大，应用面积较小，起到引人注目、画龙点睛的作用。在图4-20所示的App界面中，深灰色为主色调，浅灰色为辅助色，蓝色和橙色为点睛色。图4-20色彩划分4.1.5UI设计要素知识准备2．色彩对比原则1）明暗对比明暗对比决定了画面的柔和度，可以用大面积的暗色铺底，而在其上用明色主体构图，如图4-21所示。暗色明色图4-21明暗对比4.1.5UI设计要素知识准备2．色彩对比原则2）色相对比

色相对比是指两种以上的颜色组合，由于色相差别而形成了色彩的对比效果。色彩的强弱主要是色相在色相环上的角度，如图4-22所示。角度越小色相对比越弱，反差也就越小；角度越大色相对比也越强，反差也就越大。在90°以内的色相对比不太明显，在180°位置上的色相对比反差最明显，被称为“补色”，如图4-23所示。4.1.5UI设计要素知识准备2．色彩对比原则2）色相对比图4-22色相环图4-23色相对比图4.1.5UI设计要素知识准备2．色彩对比原则3）饱和度对比将两种以上的色彩画面摆放在同一个页面上，因色彩的饱和度不同，产生的差异化对比被称为“饱和度对比”。例如，将一个鲜艳的绿色和一个含灰度的绿色放在同一个页面上，能够比较出两者在色彩上的差异。饱和度越高的色彩越鲜亮，饱和度越低的色彩越混浊，如图4-24所示。图4-24饱和度对比4.1.5UI设计要素知识准备2．色彩对比原则4）面积对比

将两种色彩不同的颜色放在同一个页面中，大面积采用弱色，小面积采用强色，让两者之间产生强弱、明暗、彩度对比的效果，如图4-25所示。图4-25面积对比4.1.5UI设计要素知识准备3．色彩搭配方法二维码

4-3.mp4

（1）同种色系搭配：选择使用一种色调及其相应的多种亮色和暗色，整体页面非常统一。（2）类似色系搭配：选择使用色相类似的颜色，页面元素不会相互冲突，更加协调且有质感。

（3）互补色系搭配：选择使用互补色，较好的搭配是一种颜色作为主色，另一种颜色作为辅色且用于强调，彼此有着非常强烈的对比度，一般用于特别强调某个元素时。（4）分散互补色搭配：采用3种颜色，其中两种互相类似，另一种与它们形成对比，这种配色非常易学而且容易出效果。（5）立色搭配：就是色相环上对立的配色，最典型的是红、黄、蓝进行配色。4.1.6UI设计风格知识准备1．扁平化风格二维码

4-3.mp4

扁平化风格是去掉了多余的透视、纹理、渐变及3D效果，在设计元素上强调抽象、极简和符号化。在扁平化设计中力求清新、干净、简洁，给用户带来良好的体验效果，如图4-26所示。

图4-26扁平化风格界面4.1.6UI设计风格知识准备2．拟物化风格

拟物化风格是对生活的真实反映，不是抽象的，可以在设计中加入写实细节，如色彩、阴影、透视、3D、叠加、材质等效果，视觉刺激强烈；也可以适当采用变形或夸张手法，对实物进行再现，其主要特征是让用户一眼就能看出这是什么实物，提高辨识度，如图4-27所示。图4-27拟物化风格界面本节内容总结1.

UI设计的分类及原则2.UI设计流程3.UI设计要素4.UI设计风格谢谢！项目4UI设计任务4.2设计图标、按钮及导航图形图像处理技术主要内容01图标设计02按钮设计03App导航设计重点难点12341.熟知完成图标及标志设计采用的工具。2.熟练绘制UI图标、按钮及导航。3.培养学生赏析意识，提升专业能力。.4.培养学生的家国情怀和中华民族文化素养。知识目标素质目标教学目标技能目标能力目标任务情境

【任务场景】在掌握了

UI

设计的概念、分类、原则、流程、要素及风格的基础上，掌握按钮、图标和导航的设计技巧与规范，用户可以根据需要设计图标和按钮，满足客户的需求。

【任务布置】了解图标设计的流程和原则；了解按钮设计的基本知识；掌握按钮设计的技巧和导航设计的分类；以理论知识作为实操的指导，学会设计图标和按钮。4.2.1图标设计

图标是具有指代意义的标识性计算机图形符号，具有高度浓缩、快捷传达信息、便于记忆的特性。它不仅是一种图形，更是一种标识。我们通过图标看到的不仅是图标本身，更是它所代表的内在含义。

图标的应用范围很广，在计算机可视操作系统中扮演着极为重要的角色。它可以代表一个文档、一段程序、一张网页或一段命令，而我们可以通过单击图标执行一段命令或打开某种类型的文档。在App设计中，图标不仅包括程序启动图标，还包括状态栏、导航栏等位置的其他图标。常见的图标设计如图4-68～图4-70所示。知识准备1.认识图标4.2.1图标设计知识准备1.认识图标

图4-68常见应用程序启动图标图4-69“京东”App导航栏图标图4-70“懒人听书”网站导航栏图标4.2.1图标设计知识准备2.认识图标（1）定义主题（2）寻找隐喻（3）抽象图形（4）绘制草图：（5）确定风格（6）制作和调整（7）场景测试4.2.1图标设计知识准备3.图标设计原则（1）可识别性原则（2）差异性原则（3）统一性原则图4-72差异性图标图4-73造型风格统一图4-74图标色调统一4.2.1图标设计知识准备4.图标设计技巧（1）正负组合（2）折叠图形（3）线形（4）透明渐变（5）色块拼接（6）复用图形（7）背景组合4.2.1图标设计知识准备5.图标设计规范（1）Android系统图标设计规范像素密度比例关系分辨率/像素屏幕尺寸/像素图标尺寸/像素主菜单状态栏通知图标LDPI0.75240×3202.736×3624×2418×18MDPI1320×4803.248×4832×3224×24HDPI1.5480×8003.472×7248×4836×36XHDPI2720×12804.6596×9664×6448×48XXHDPI31080×19205.2144×14496×9672×72XXXHDPI41440×25605.96192×192128×12896×964.2.1图标设计知识准备5.图标设计规范（2）蒙系统图标设计规范1）信息展示完整：设计规范建议展开态不应出现页面内的内容元素数量减少，或者图形化元素模糊、分辨率下降、视觉体量减小等损失，应该确保展开态的内容元素不少于折叠态内容元素信息的3/4。2）字体/图片自动适配：设计规范建议展开态图标和字体不应发生明显变化，在保证可读性的基础上，建议保持跟折叠态一样大的字号。3）弹出框适配。设计规范建议展开太和折叠态弹出框保持相同的大小，或者大小变化不超过1.2倍。4.2.2按钮设计知识准备1.按钮状态

按钮是用户在执行某项操作时直接接触的对象，按钮的状态可以将操作结果反馈给用户。在设计按钮时有4种不同的状态。（1）默认状态：按钮的默认状态或静止时的状态。表示按钮处于活动状态，但是当前并未被使用。（2）悬浮状态：在按钮表面滑过时该按钮的状态，这个状态是提醒用户，滑过按钮可以引发某个动作。（3）按下状态：按下该按钮时的状态，表示按钮当前已被选中。（4）禁用状态：按钮未被启用且无法被使用4.2.2按钮设计知识准备2.按钮设计技巧1）匹配品牌2）匹配风格3）突出对比度4）使用描边和小图标5）按钮主次分明6）尺寸规格图4-85匹配品牌按钮图4-86匹配风格按钮图4-87突出对比度按钮图4-88使用小图标按钮图4-89按钮主次对比4.2.3App导航设计知识准备1.标签式导航

标签式导航又被称为“选项卡式导航”，分为底部标签式导航、舵式导航和Tab标签式导航，如图4-90～图4-92所示。图4-90底部标签式导航图4-91舵式导航图4-92Tab标签式导航4.2.3App导航设计知识准备2.抽屉式导航3.宫格式导航4.列表式导航图4-93抽屉式导航图4-94宫格式导航图4-95列表式导航本节内容总结1．认识图标2.学会图标设计流程3.明确图标设计原则4.掌握图标、按钮、

App导航设计技巧谢谢！项目4UI设计任务4.3设计表单控件图形图像处理技术主要内容01表单控件分类02表单控件设计原则重点难点12341.熟知表单控件分类及设计原则2.灵活按要求完成表单控件的设计。3.培养学生赏析意识，提升专业能力。.4.培养学生的家国情怀和中华民族文化素养。