UI设计PPT完整全套教学课件.pptx
《UI设计PPT完整全套教学课件.pptx》由会员分享，可在线阅读，更多相关《UI设计PPT完整全套教学课件.pptx（228页珍藏版）》请在冰点文库上搜索。
UI设计概述,3,1.1.1什么是UI设计,UI是UserInterface（用户界面）的简称，UI设计也叫界面设计，是指对产品的人机交互、操作逻辑、界面美观等多个内容进行整体设计。
简单来说，UI设计主要包括3个方面的内容。
界面设计,交互设计,用户体验设计,4,1.1.2UI设计的用户体验,用户体验是UI设计的重点，只有从用户需求的角度来考虑界面设计，才能更好地获得用户的关注。
UI设计的用户体验主要体现在3个方面的内容。
目录,感官体验,交互体验,情感体验,5,1.1.3UI设计的常用工具,在进行UI设计时，设计人员常常会使用一些设计工具，常用的设计工具如下。
Photoshop,Illustrator,AfterEffects,AxureRP,摩客,UI设计的运用,8,1.2.1移动App界面设计,App是Application的简称，指运行在手机上的应用软件。
随着移动互联网的快速发展，智能手机成为了人们日常生活中的重要部分，因此移动App界面设计就显得尤为重要，其界面设计不但要美观、实用，还要带给用户好的操作体验。
下图为“美团外卖”App界面。
9,1.2.2网页界面设计,网站界面设计不是对各种信息进行简单堆砌，而是运用各种设计手段和交互技术让网页更加丰富、美观、具有吸引力，其目的是引起用户浏览的欲望，让用户操作起来更方便、快捷，并更有效地接收网页所传达出的信息。
下图为“去哪网”官方网站界面。
10,1.2.3游戏界面设计,优秀的游戏界面设计不仅能够帮助用户快速学会操作游戏，还具有较强的表现力和感染力，可以让用户获得更好的操作体验，更深地沉浸在游戏世界中。
一般来说，游戏界面设计会更注重人体的感官体验和操作的实用性，如配乐、动效、画面和界面布局等。
下图为“开心消消乐”游戏界面。
11,1.2.4应用软件界面设计,应用软件界面设计是指为了满足软件专业化和标准化的需求而对应用软件界面进行实用性和美观性的设计，主要包括软件启动界面设计、软件界面面板设计、软件安装过程界面设计以及软件界面的滚动条、按钮和状态栏设计等。
下图为“360安全卫士”的软件界面。
UI设计的发展趋势,14,1.3.1人工智能产品界面设计,人工智能是计算机科学的一个分支，一般是指通过普通计算机程序来呈现人类智能的技术。
人工智能产品是指通过人工智能技术所制作出的产品，包括智能家居产品、智能导航产品、智能穿戴产品、智能游戏机等。
这些智能产品为我们的生活带来了极大的便利，其界面展示也非常重要，是UI设计的重点发展方向。
左图为智能导航产品的界面效果，右图为智能穿戴产品的界面效果。
15,1.3.2AR产品界面设计,AR产品是指以AR技术为基础设计的现代化产品，能带给用户一种沉浸式的体验。
如图所示为AR虚拟试妆产品界面效果。
16,1.3.3VR产品界面设计,VR（VirtualReality，虚拟现实）产品是指以VR技术为基础设计的现代化产品，我国VR行业经过近几年的发展，市场规模迅速增长，尤其是随着5G时代的来临，VR迎来了新的发展阶段。
下图所示为VR游戏产品界面效果。
UI设计的原则,19,1.4.1适用性,功能的适用性主要可分为两个方面，分别是实用功能适用性和审美功能适用性，二者相辅相成。
1.功能的适用性,实用功能适用性,审美功能适用性,20,1.4.1适用性,UI设计主要是在软件产品界面中进行展示，很容易受到软件产品屏幕的尺寸限制，因此不同的软件产品界面会有不同的尺寸，设计人员在进行UI设计时需要注意尺寸的适用性。
下图所示为不同产品界面的UI设计效果。
2.尺寸的适用性,21,1.4.2规范性,规范性原则可以减少时间消耗和沟通成本，让UI界面最终的呈现效果与预期效果一致，提高用户体验。
下图所示为摹客设计系统制作的示例规范库。
22,1.4.3易操作性,UI需要用户在界面中进行一定的交互操作，因此，UI应具有方便易用的特性，可以让用户了解和使用产品，为用户带来便利，也可增加用户对产品的操作信心，以减少产品的使用差错率。
右图为“keep”App的登录界面和产品购买订单界面。
23,1.4.4统一性,统一性原则贯穿着UI设计的全过程，如在进行整个UI设计时，界面中的版式、文字大小与间距、色彩、风格、布局等元素要做到基本统一和协调；在对界面内容进行描述时，界面中的功能及内容描述保持一致，避免同一功能描述使用多个不同的词汇。
右图为“开心消消乐”游戏App界面。
24,1.4.5层级性,一般来说，设计人员可以从字体、色彩、图标等界面元素或浏览的习惯入手来凸显层级性。
下图所示为“Lenovo”品牌的官方网站界面。
UI设计的流程,27,1.5.1分析需求,在UI设计开始之前，设计人员需要先分析设计需求，整理思路，然后才能开展有针对性的设计。
分析需求可以从以下3个方面入手。
A,市场需求,C,产品需求,B,用户需求,28,1.5.1分析需求,需求分析完成后，即可对UI设计内容进行视觉定位，一般可从以下3个方面入手。
色彩与字体的选择,设计风格,界面布局和构图,29,1.5.3绘制原型图,原型图是设计人员对产品的最初设想，主要对产品内容和结构进行粗略的布局。
当明确视觉定位后，设计人员即可进行原型图的绘制，下图所示为两种不同类型原型图效果。
30,1.5.4绘制效果图,1.搜集素材,文字类信息的搜集文字类信息主要是根据产品的特性、功能来进行收集。
图片、视频和音效的搜集网上搜集、实物拍摄和绘制,31,1.5.4绘制效果图,2.进行UI设计,设计人员可先根据原型图的要求绘制主要形状，并按照设计要求添加或绘制素材，进行界面的制作即可。
右图所示为使用Photoshop进行UI设计的效果。
32,1.5.5标注与切图,一般来说，设计人员都会使用一些专业的标注工具来提升工作效率，如MarkMan（马克鳗）、PxCook（像素大厨）等工具，而切图工具则可直接选择Photoshop。
下图所示为使用PxCook进行标注的效果。
项目实训,35,项目一天气类应用软件界面的素材搜集与制作,项目目的本项目将对天气类应用软件界面的素材进行搜集，然后对素材进行整合，绘制装饰形状并输入文字内容，完成界面的UI设计，下图所示为天气类应用软件界面的效果。
36,项目一天气类应用软件界面的素材搜集与制作,制作思路
（1）搜集与自然天气和天气图标相关的素材（配套资源:
素材文件第1章天气界面素材.psd）。
（2）启动PhotoshopCC2019，新建940像素520像素的图像文件，先将符合背景需求的素材拖动到图像中，调整大小和位置，然后在背景素材下方绘制颜色为“#053067”的矩形，并设置不透明度为“90%”。
（3）继续在打开的素材文件中拖动天气图标素材到矩形中，先调整其大小，然后绘制白色的装饰线条，最后输入文字并绘制填充颜色为“#042248”的圆角矩形。
（4）在图像编辑区中的中间位置输入文字，然后设置图层样式，使整个效果更加美观，然后再绘制圆角矩形和箭头形状，最后保存文件（配套资源:
效果文件第1章天气类应用软件界面.psd）。
37,项目二分析大型网络游戏界面的UI设计原则,项目目的本项目将对下图所示的大型网络游戏界面进行赏析，主要是分析该界面的设计原则，通过该项目能够让我们更加了解UI设计。
38,项目二分析大型网络游戏界面的UI设计原则,制作思路
（1）该界面遵循了适用性原则。
通过观察可发现导航栏在界面顶部，符合用户日常的操作习惯，体现了实用功能的适用性，另外，整个界面比较精致、华丽、炫酷，表现力非常强，在给予了用户视觉震撼和强烈立体感的同时，也满足了用户独特的审美需求，体现了审美功能的适用性。
（2）该界面遵循了统一性原则。
从色彩上看整个界面均使用了低饱和度的配色，从文字、按钮、图片等元素上来看同一级别元素的色彩、大小均保持了统一，如“查看”按钮。
（3）该界面遵循了易操作性原则。
该界面中每个板块都有相应的按钮，减少了用户的使用差错率，如“了解更多”“查看”按钮。
（4）该界面遵循了层级性原则。
该界面的层级性原则主要表现在导航栏中，如“主页”导航栏与“首页”导航栏的字体大小明显不同，视觉层次感非常明显，让用户有了浏览的重点。
点、线、面,41,2.1.1点,点是相对的，在当前画面中占据相对较小面积的称为点。
点可以是文字、图形、色块，其前提是画面中存在面积更大的元素。
大小、形态、位置、数量不同的点所产生的视觉效果、界面氛围和主题也有所不同。
下图所示为“三只松鼠”官方网站界面。
42,2.1.2线,点与点之间的连接即为线，线是点移动的轨迹，线在UI设计的视觉形态中既可以表现长度和宽度，也可以表现位置、方向性和性格，具有优美和简洁的特点，经常用于渲染、引导、串联或分割界面。
右图所示为水平线和垂直线的运用。
43,2.1.3面,点的放大即为面，通过线的分割所产生的各种比例的空间也可以称为面。
面有长度、宽度、方向、位置、摆放角度等属性。
面具有组合信息、分割画面、平衡和丰富空间层次、烘托与深化主题的作用。
下图所示为被划分成9个面的某护肤品牌网站首页界面。
44,2.1.3面,UI设计中，面的类型主要有几何形和自由形两种，下面进行详细介绍。
自由形来源于自然或灵感，比较洒脱、随意，可以营造淳朴、生动的视觉效果。
几何形是指有规律的易于被人们所识别、理解和记忆的图形。
几何形,自由形,45,2.1.4分析案例“网易云音乐”App播放页界面分析,本例将对“网易云音乐”App播放页界面的基本元素进行分析，分析界面中点、线、面元素的运用，具体分析内容如下。
“网易云音乐”App播放页界面中的点主要体现在界面中的功能按钮上。
App界面中的线主要体现在界面下方的进度条和界面中间的圆环装饰线上。
App界面中的面主要体现在界面中间的圆形图片上。
色彩,48,2.2.1色彩的属性,色彩是由光的波长的长短所决定的，而色相就是指这些不同波长的色彩情况。
红、橙、黄、绿、蓝、紫和红橙、黄橙、黄绿、蓝绿、蓝紫、红紫共计12种较鲜明的色彩组成了12色相环，如左图所示。
设计人员可通过色相环中的色彩搭配，制作出视觉效果丰富的广告。
1.色相,49,2.2.1色彩的属性,明度是指色彩的明亮程度，即有色物体由于反射光量的区别而产生颜色的明暗强弱。
通俗地讲，在红色里添加的白色越多则越明亮，添加的黑色越多则越暗，左图所示为高明度的界面，右图所示为低明度的界面。
2.明度,50,2.2.1色彩的属性,色彩的纯度是指色彩的纯净或者鲜艳程度。
纯度高低取决于该色中含色成分和消色成分（灰色）的比例。
含色成分越高，纯度越高；消色成分越高，纯度越低。
左图所示的黄色和蓝色纯度较高。
右图所示的界面中大部分区域为低纯度的绿色。
3.纯度,51,2.2.2色彩的对比,按照色彩的3要素进行划分，可将色彩的对比方式分为色相对比、明度对比、纯度对比3种，下面分别进行介绍。
色相对比,纯度对比,明度对比,52,2.2.3主色、辅助色与点缀色,界面中的色彩主要由主色、辅助色、点缀色组成，其中主色确定主要风格，辅助色衬托主色并补充说明，点缀色强调细节和重点。
53,2.2.3主色、辅助色与点缀色,一般来说，界面中的主色、辅助色和点缀色的分布都有一定的规律，其黄金比例为“70:
25:
5”，即主色占总画面的70%，辅助色占总画面的25%，而其他点缀色占总画面的5%。
下图所示为“智联招聘”官方网站登录界面。
54,2.2.4UI设计常见色彩搭配,色彩搭配并不是随心所欲的，而是需要遵循一定的方式。
常见的色彩搭配包括冷暖色搭配、邻近色搭配、对比色搭配和中间色搭配。
0102,0304,1.冷暖色搭配,2.邻近色搭配,3.对比色搭配,4.中间色搭配,55,2.2.5分析案例对“普通话学习”App界面进行色彩分析,本例将对图所示的“普通话学习”App界面进行色彩分析，分析界面中色彩的对比，包括主色、辅助色与点缀色以及色彩的搭配方式。
字体,58,2.3.1UI设计常用字体类型,字体是UI设计中不可或缺的一部分，是决定设计效果的关键。
不同的字体在界面中渲染的氛围不同，正确地选择和使用字体不但能美化界面效果，还能使信息展现更加直观，并吸引用户继续浏览。
黑体宋体,书法体,手写体,楷体,艺术体,59,2.3.2UI设计字体规范,1.系统默认字体规范,iOS系统的默认字体规范从iOS9系统开始中文的默认字体为“苹方”，英文的默认字体为“SanFrancisco”，字形纤细饱满，便于阅读。
Android系统的默认字体规范Android系统中中文的默认字体为“思源黑体”，英文的默认字体为“Roboto”，字形线条粗细适中、端正大方。
60,2.3.2UI设计字体规范,2.常见的字号规范,网页界面的常见字号,网页界面中的字号并没有强制规定，常见的字号为1230px。
App界面的常见字号,App界面中的导航栏字号和标题字号为3640px，正文字号为3234px，副文字号为2428px，最小字号不低于20px。
61,2.3.2UI设计字体规范,3.常见的字体色彩规范,UI设计中的字体规范除了大小规范外，还有色彩规范。
一般来说，界面中的色彩不宜过多，可先选择一种主色，然后在主色基础上进行色彩的透明度变换，如图所示。
62,2.3.3UI设计中的字体排版,无论是网页界面还是App界面设计，文字在界面中所占比例都较大。
因此掌握UI设计中的字体排版对设计人员来说非常关键，不同的字体排版可以给界面带来意想不到的效果。
齐头散尾型字体排版,自由型字体排版,绕图型字体排版,齐头齐尾型字体排版,63,2.3.4设计案例小游戏App界面中的文字设计,本例将制作小游戏App界面中的文字设计，其具体操作如下。
1,添加素材,2,输入文字,3,形成投影效果,风格,66,2.4.1界面风格的设计要点,在了解风格的概念后，设计人员还需要掌握界面风格的设计要点。
由于界面由不同的元素组合而成，因此要想反映出界面鲜明的风格特点，就要掌握其设计要点。
01,02,03,04,界面风格要与产品类型相契合,界面风格要与色彩相契合,界面风格要与字体相契合,界面风格要与图片和其他装饰元素相契合,67,2.4.2界面常见设计风格,1.插画风格,插画风格在UI设计中运用非常广泛，除了用作界面中的提示类图标和功能按钮外，还可以作为界面中的装饰。
右图所示即为使用了插画风格的界面效果。
68,2.4.2界面常见设计风格,2.扁平化风格,在UI设计中，扁平化风格一般运用纯色图形或插画来打造，界面一般简洁干净。
右图所示即为扁平化风格的界面效果。
69,2.4.2界面常见设计风格,3.卡通风格,卡通风格在UI设计中使用较多，设计人员可以通过卡通的形式来表现主题内容，既轻松又有趣，不但可以用于游戏场景，还能作为矢量效果。
右图所示即为卡通风格的网站界面效果，该界面通过卡通元素来进行呈现，整个界面活泼可爱，有着浓厚的卡通色彩。
70,2.4.2界面常见设计风格,4.简约风格,简约风格会给人舒适、简单的感觉，常用于品牌网站、App提示页、App引导页等界面。
71,2.4.2界面常见设计风格,5.拟物化风格,拟物化风格是指通过设计将生活中的具体实物真实地表现出来。
拟物化风格比较贴近用户的实际生活，可以让用户产生真实感和依赖感，并能够指导用户快速掌握界面的操作方法。
72,2.4.3设计案例插画风格网站登录界面设计,本例将制作插画风格的网站登录界面，其操作过程是先使用IllustratorCC2019软件绘制插画，然后再使用PhotoshopCC2019软件绘制网站登录界面，最后完成设计。
1,绘制椭圆和矩形,2,分割形状,3,删除形状,项目实训,75,项目一分析网站首页的UI设计,项目目的本实战将对下图所示的网站首页界面进行赏析，分析该界面中的基本元素、色彩、字体和风格。
76,项目一分析网站首页的UI设计,制作思路观察该界面，可发现该界面中基本元素的搭配非常和谐，如界面上方的导航栏文字、品牌名称、装饰等都可以视为界面中的点元素，主要起活跃画面气氛的作用；界面的背景被划分成了不同色彩的板块，板块与板块相交的部分可视为线元素，主要起分割画面的作用；界面背景可视为一个整体的面元素，主要起整合画面的作用，可以让整个画面效果更加和谐统一。
在色彩的选择上，整个界面的主色调为高饱和度的蓝色，白色为辅助色，黄色为点缀色。
同时，冷暖色的搭配让界面更具视觉冲击力。
在字体的选择上，该界面主要采用了无衬线字体，如“最右App”“我的快乐源泉”等，这种字体让界面的结构清晰、简洁美观。
在风格的选择上，本例使用的是插画风格，主要是通过鲜艳的色彩、清新的插画图像来体现的。
77,项目二设计读书App启动页界面,项目目的,本项目将设计读书App启动页界面，首先收集与读书相关的素材图片，并使用IllustratorCC2019绘制App的Logo形状，然后添加文本，整体设计简单、直白，凸显出了品牌特点，能够加深用户对App的印象，下图所示为读书App启动页界面的效果。
78,项目二设计读书App启动页界面,制作思路搜集与读书相关的素材（配套资源:
素材文件第2章读书素材.psd）。
启动IllustratorCC2019，新建800像素600像素的图像文件，使用“钢笔工具”绘制填充颜色为“#bb9229”的Logo形状。
启动PhotoshopCC2019，新建1920像素1080像素的图像文件，新建图层，并设置图层的填充颜色为“#eaeaea”，再将收集的读书素材拖动到图像中，调整大小和位置，然后使用“矩形选框工具”在图像下方绘制填充颜色为“#ffffff”的矩形，最后将绘制的Logo形状添加到矩形中并在Logo形状下方输入App名称。
继续在图像上方输入读书App的广告语，然后绘制填充颜色为“#444243”圆形和装饰线条，最后在其中输入文字。
保存文件（配套资源:
效果文件第2章读书App启动页界面.psd）。
了解UI设计规范,81,3.1.1UI设计规范的原则,UI设计规范的一致性原则表现在产品界面的各个方面，如在设计布局界面时，需要使标题字体、内容字体、链接字体等保持一致；在进行交互设计时，界面中的交互组件、交互流程、用户行为、交互样式、界面元素等应保持一致。
一致性,高效性与准确性,建立通用的设计细节规范必不可少，这不仅能够降低设计人员的沟通成本，提高设计的准确性，还遵循了UI设计规范的高效性和准确性原则。
82,3.1.2UI设计规范包括的内容,1.图标设计规范图标是具有高度概括性的、用于传达视觉信息的小尺寸图像，常与文本搭配使用。
图标不仅能传达出丰富的信息，还能提升整个界面美感和信息可识别性。
同时，有的图标还具有交互性和功能性，用户点击这些图标会执行特定的操作，触发相应的功能。
83,3.1.2UI设计规范包括的内容,色彩使用规范主要是确定产品UI设计中所能使用的色彩种类。
如图所示为界面中文字的色彩使用规范示例。
2.色彩使用规范,84,3.1.2UI设计规范包括的内容,UI设计中对不同字号下的行间距要求也会有不同，一般来说，行间距的大小为字号的11.5倍，当然设计人员可根据实际需要标注出产品界面中不同文字内容对应的行间距大小。
3.字体和行间距的设计规范,85,3.1.2UI设计规范包括的内容,4.按钮设计规范设计人员应将按钮的设计规范进行文字说明，包括将按钮尺寸大小、按钮圆角大小、描边大小，以及按钮中的文字大小等标识清楚。
此外，按钮的视觉体现主要包括默认、点击和禁用3种状态。
86,3.1.2UI设计规范包括的内容,图片也是UI设计中的重要组成部分之一，设计人员可按照用途对其进行分类，并遵循一定的设计规范，包括图片的比例与尺寸规范等。
5.图片设计规范,87,3.1.2UI设计规范包括的内容,6.组件设计规划UI设计中的组件包括以下内容。
下拉列表框,文本输入框,进度条,提示框,分割线,弹出面板,搜索框,单选项和复选框,不同系统的UI设计规范,90,3.2.1iOS系统的UI设计规范,1.界面尺寸规范与框架,要了解界面尺寸规范首先需要对iOS设备的分辨率和框架有所了解，其中iOS移动设备界面中常见的分辨率和框架主要有4种，如图所示。
91,3.2.1iOS系统的UI设计规范,2.控件规范,iOS系统中的界面控件以下内容。
这些控件都有一定的设计规范，下面进行详细介绍。
导航栏,选项卡,开关,搜索栏,标签栏,提示框,92,3.2.2Android系统的UI设计规范,1.界面尺寸规范与框架,Android系统界面的尺寸大小一般包括320px480px、426px800px、720px1280px、1080px1920px，其中状态栏高度为72px，Android系统界面的尺寸规范并不明确，设计人员可根据需要进行调整。
Android系统界面框架包括状态栏、导航栏、主菜单栏、内容区域4个部分。
93,3.2.2Android系统的UI设计规范,2.Android系统中的单位换算,与iOS系统不同的是，Android系统的开发通常会使用dp作为单位，而一般的UI设计图则以px为单位。
因此在Android系统中需要进行单位的换算，这可以通过程序人员在后期代码中实现。
94,3.2.2Android系统的UI设计规范,3.控件规范Android系统中的控件与iOS系统中的控件有很多相似之处，不同的是Android系统中的UI设计更加多样化，自定义控件很多。
下面主要讲解与iOS系统不同的控件的设计规范。
顶部标签栏,单行列表框,卡片,全局导航栏,A,BCD,95,3.2.3Windows系统的UI设计规范,1.Windows系统的界面尺寸规范由于Windows系统也在不断的升级改版，其界面尺寸有很多，常见的界面尺寸主要包括如图所示的8种主要尺寸。
96,3.2.3Windows系统的UI设计规范,2.控件规范与Android系统和iOS系统一样，Windows系统中的控件也需要制定相应的设计规范。
导航栏,Logo图标,状态栏,滚动条,图标与图片,UI设计的图片规范,99,3.3.1图片的格式,图片是UI设计中很常见的元素，根据图片的用途将其可分为多种格式，下面分别进行详细介绍。
PSD,GIF,JPG/JPEG,PNG,AI,100,3.3.2图片的使用规范,了解图片的格式后，设计人员还需要掌握图片的使用规范，包括图片的比例与尺寸规范，下面进行详细介绍。
图片的尺寸规范,App个人中心界面的用户头像大小多为144px144px和120px120px个人资料界面的用户头像大小多为96px96px消息列表界面的用户头像大小多为80px80px帖子详情页界面的用户头像大小多为44px44px和60px60px。
图片的比例,在UI设计中，对于图片的比例没有严格的规定，设计人员可根据需要进行调整。
项目实训,103,项目实训分析某App界面中的UI设计规范,项目目的,本实训我们将对如图所示的App界面进行赏析，分析该界面设计中遵循了哪些设计规范，从而巩固本章所学知识。
104,项目实训分析某App界面中的UI设计规范,赏析思路,
（1）该App的应用系统为Android系统，尺寸大小为1080px1920px。
界面框架包含了状态栏、导航栏、主菜单栏、内容区域4个部分，状态栏为界面最上方的运营商、电量等信息区域；第1个界面上方的“关注”“推荐”“热门”文字显示区域为导航区域；第1个和第2个界面下方的“首页”“计划”“运动”等图标和文字显示区域为主菜单区域。
（2）图标。
从界面中可以看到该App的图标风格一致、大小一致、色彩一致，如第2个界面中的“我的课程”“我的活动”“我的收藏”等图标。
（3）文字和间距。
界面中的文字和间距也非常有规范性，同一组合中的文字大小一致，如第1个界面中导航栏文字。
另外，界面中图标与字体的间距也在合理的范围类。
105,项目实训分析某App界面中的UI设计规范,赏析思路,（4）文本输入框。
界面中的文本输入框可看到默认状态。
（5）卡片。
升级会员 