《图形图像处理技术》 课件 任务4.1 学习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-