UI设计基础与实战项目教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx

UI设计基础与实战项目教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx

《UI设计基础与实战项目教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx》由会员分享，可在线阅读，更多相关《UI设计基础与实战项目教程完整版课件全套ppt最全电子教案整书教案教学设计教学教程.pptx（245页珍藏版）》请在冰豆网上搜索。

,UI设计基础与实战项目教程,第一单元UI设计概述,Part1,UI设计的定义,是对软件（或应用程序）的人机交互、操作逻辑、界面美观的整体设计。

人机交互：

从用户体验的角度，对交互过程进行研究，并设计出一系列最有效的界面展现给用户。

Part1,UI设计的定义,操作逻辑：

利用界面中的按钮、菜单、图标、导航栏等控件实现其与关联界面的切换，,Part1,UI设计的定义,界面美观：

界面中的颜色、图形、文字设计，界面的空间布局等视觉设计元素都是决定界面美观与否的关键,Part1,UI设计的分类,按用户和界面来划分，UI设计可以分为移动端UI设计、网页端UI设计、其它UI设计三类。

Part1,UI设计知识储备,1.视觉设计基础：

首先要学习手绘、配色、版式设计等美术基础知识，同时还要了解设计原理、表现技法等理论知识。

Part1,UI设计知识储备,2.软件设计基础：

UI设计需要掌握一些设计软件的应用，用以完成图标、界面、交互原型图、动效等方面的设计与制作。

Part1,UI设计工作流程,一般都要经过“需要分析设计制作开发测试”这样的过程。

需要分析阶段,Part1,UI设计工作流程,一般都要经过“需要分析设计制作开发测试”这样的过程。

设计制作阶段,Part1,UI设计工作流程,一般都要经过“需要分析设计制作开发测试”这样的过程。

开发测试阶段,UI设计基础与实战项目教程,第二单元UI设计要素,任务一UI色彩设计,Part1,色彩设计原则,1.一致性原则产品界面设计的色彩风格要与产品主题保持一致。

因为不同的色彩象征意义不同，而且对人的心理感应也不同。

电子商务类网站界面,健康类APP界面,Part1,色彩设计原则,2.独特性原则互联网上的App产品、Web产品层出不穷，如果想要在众多产品中脱颖而出，产品的UI设计除了要符合一致性原则，还要有自己独特的色彩风格。

音乐APP界面,跑车网站界面,Part1,色彩设计原则,3.针对性人们的生活环境、文化修养、年龄、性别及性格不同，导致其审美千差万别。

不同的用户对色彩的喜好不同，对色彩的联想和理解也不同，所以在进行UI色彩设计时，要有针对性地尽可能采用符合用户审美的色彩。

在线课堂网站界面,儿童游戏APP界面,Part2,色彩设计方案-色彩设计基本方,法,航空公司官方网站,1确定UI主色调的方法

（1）从公司或品牌企业文化的角度选取通常一家企业的视觉识别（VisualIdentity，VI）系统代表着企业的文化精髓，所以其UI的主色调可以选择企业VI系统的标准色。

Part2,色彩设计方案-色彩设计基本方,法,1确定UI主色调的方法

（2）从行业特征的角度选取不同的行业有不同的特点，其网站主题风格也各具特色，在确定UI主色调时应充分考虑产品的行业特征。

电子商务类网站界面,Part2,色彩设计方案-色彩设计基本方,法,1确定UI主色调的方法（3）从目标用户的角度选取不同的目标用户，由于年龄、性别、文化层次等的不同，其对色彩的喜好也不一样，所以在选取UI主色调时要尽可能采用符合用户审美的色彩。

儿童游戏APP界面,Part2,色彩设计方案-色彩设计基本方,法,2确定UI辅助色的方法

（1）采用主色的同色系颜色作为辅助色采用这种配色方案，基于一种颜色，以不同的明度和饱和度区分层次，可以使UI呈现柔和、整体、统一的视觉效果。

用主色的同色系做辅助色的网站界面,Part2,色彩设计方案-色彩设计基本方,法,2确定UI辅助色的方法

（2）采用主色的对比色或补色作为辅助色采用这种配色方案可以使UI的主色更为突出。

用主色的对比色做辅助色的网站界面,Part2,色彩设计方案-色彩设计基本方,法,2确定UI辅助色的方法（3）采用主色的邻近色作为辅助色采用这种配色方案可以使UI的变化更丰富，更具活泼感。

用主色的邻近色做辅助色的网站界面,Part2,色彩设计方案-色彩设计基本方,法,2确定UI辅助色的方法（4）采用黑、白、灰色作为辅助色采用这种配色方案能够营造出融合的色彩氛围，因为黑、白、灰色可以跟任何颜色搭配。

用灰色和黑色做辅助色的网站界面,Part2,色彩设计方案-色彩设计基本方,法,3确定UI中提醒色的方法提醒色占全部色彩的5%左右，具有提醒用户的作用。

一般应用在鼠标悬停、选中状态和强调部分。

提醒色要与界面整体色调相区别，一般在明度、饱和度上要有明显差异，一般会用明度或饱和度高的颜色。

用黄色做提醒色的网站界面,Part3,色彩设计方案-色彩设计的基本技,巧,1从摄影作品中提取颜色

（1）通过把图片存储成Web格式来提取颜色在Photoshop中打开摄影图片，在“文件”菜单中选择“存储为Web所用格式”命令，在颜色表中就会出现一组颜色。

“存储为Web所用格式”对话框,从摄影作品中提取的颜色组合1,Part3,色彩设计方案-色彩设计的基本技,巧,1从摄影作品中提取颜色

（2）通过马赛克滤镜来提取颜色在Photoshop中打开摄影图片，在“文件”菜单中选择“滤镜”“像素化”“马赛克”命令，就可以用吸管工具在图像中拾取一组适合UI设计色彩搭配的颜色。

原图和图片马赛克效果对比,从摄影作品中提取的颜色组合21,Part3,色彩设计方案-色彩设计的基本技,巧,2利用选色工具提取颜色,为了提高效率，还可以使用一些选色工具，如Coolors、Kuler、Designspiration等。

这样可以节省大量时间，而且效果一点都不差。

总之，色彩搭配是需要不断练习的，尤其是想创造出让人惊艳的配色方案，就需要不断地摸索和尝试。

Part4,实践任务,1.请运用上面所学的知识，完成以下任务：

如下图所示为商场官网新年商品打折页面，整个页面采用了三种对比度很强、纯度很高的颜色，设计简约时尚。

请重新设计该网页界面的三种颜色搭配。

要求：

色彩搭配合理，符合新年的节日气氛，整体画面和谐统一。

UI设计基础与实战项目教程,第二单元UI设计要素,任务二UI图形设计,Part1,图形创意表现,1.夸张夸张是对事物的特征进行强化与夸大。

夸张常常用于表现某些情节，有形体比例的夸张，也有心理逆反的夸张。

夸张可以使形象更加醒目，产生强烈的戏剧性效果，从而引发用户的关注。

音乐APP界面,Part1,图形创意表2现幽默将深刻的意义用诙谐、有趣的方式表现出来，这就是幽默。

幽默是生活和艺术中的一种喜剧性元素。

设计图形时，可抓住人或事物的某些特征，运用喜剧性的手法，营造一种耐人寻味，引人会心一笑的幽默意境，使用户更加放松，提高亲切感。

欢迎Web界面,Part1,图形创意表3现寓意寓意是指选择与诉求目标主题相符的物象，通过比喻和象征等手法来表现主题。

这种方法适用于不易直接表达主题的情况。

社交Web界面,Part1,图形创意表4现情感情感是指在UI图形设计中，利用图形以情托物或以物寄情，创作出内涵丰富、意境深远的作品，引发用户产生情感共鸣。

商务Web界面,Part1,图形创意表5现联想联想是指在UI设计中通过使产品与有关联的物象产生联系来补充界面中没有直接表现的内容，用于突出产品的特征与特点。

七夕节促销Web界面,Part1,图形创意表6现卡通卡通是指UI设计师可以随心所欲地发挥想象力、创造现实生活中不存在的事物或看不到的场景，充满童趣，使人感觉轻松。

卡通设计不仅形象鲜明，而且有加强叙事和传情的效果。

校园招聘Web界面,Part1,图形创意表7现局部特写相对于整体而言，局部特写更能吸引用户的视线，使用户集中注意力，从而引发用户的兴趣。

电商网站详情页页面,Part1,图形创意表8现图形方形的稳定、严肃，三角形的锐利，圆形或曲线的柔软、亲切，不规则图形的活泼，都能产生强烈的装饰感。

规则图像外形Web界面,不规则图像外形Web界面,Part2,图形与空,间,1丰富背景画面

（1）在背景中添加底纹下图为电商网站中的商品促销图片。

图片中把蓝天白云作为背景底纹，既丰富了画面内容，也增强了画面的层次感和空间感。

Part2,图形与空,间,1丰富背景画面

（2）在背景中添加投影下图为电商网站中的商品促销图片。

图片中把放大的运动鞋投影添加到背景中，使原本显得单调的画面变得更有细节，增强了画面的层次感和空间感。

Part2,图形与空2间使用透视效果当为平面的视觉元素赋予透视关系后，会使人产生一种类似三维空间的视觉感受，在一定程度上也能起到增强画面层次感的作用。

电商网站中的柠檬茶促销图,Part2,图形与空3间采用虚实结合在图形中采用虚实结合的手法可增强画面的层次感、空间感，这种形式在UI设计中非常实用。

电商网站中的夏季服装展示图,Part2,图形与空4间制作创意图形在UI设计时通过制作掀起的卷页、打开的窗户等创意图形，也能营造一种层次感和空间感。

卷页效果的网站界面,Part3,实践任,务,1.请运用上面所学的知识，完成以下任务：

左图为儿童绘本读物UI页面，请运用本单元学习过的图形与空间的知识对右图页面的背景重新进行设计。

要求：

适当丰富背景画面，使界面更具层次感和空间感，但不要使界面太过杂乱。

UI设计基础与实战项目教程,第二单元UI设计要素,任务三UI文字设计,Part1,文字设计规范,1字号使用规范在移动端App中，UI设计师常用的文字字号范围为2042像素。

除了这些常用的字号，在实际设计过程中还要看具体情况。

另外，需要注意的一点是，所有的文字字号都必须设置为偶数。

字号34（默认）42px2024px,2636px,使用说明用于导航栏标题等；用于标签栏文字、说明性文字等；用于段落文字、辅助性文字等。

3234px,用于列表、表单、按钮等。

常用字号使用规范（以iPhone6/7/8为例）,Part1,文字设计规范字号使用规范如下面微信通讯录界面和微信界面的导航栏标题字号为34像素，标签栏中的文字字号为20像素，列表文字字号为32像素，微信界面中的辅助性文字字号为22像素。

Part1,文字设计规范,字号使用规范如右图的新闻界面，正文标题文字字号为46像素，已经超出了正常字号使用规范，所以，在特殊的情况下，在不影响界面统一性时字，号使用规范也可以稍做改变。

另外，为了拉开按钮的层次，同时加强按钮的引导性，按钮上的文字可选用稍大的字号如。

右图电费缴费账单界面中，按钮上的文字字号为34像素。

Part1,文字设计规,范2字体设计规范在英文方面，苹果公司补充了新的SanFrancisco字体家族。

该字体家族包括iOS和OSX设计的SF和为WatchOS设计的SFCompact。

它们各自又分为Text和Display两个子字体系列，前者有6个字重，后者有9个字重（多了3个斜体），如图所示。

Text系列字体用于显示较小的字体，Display系列字体用于显示较大的字体，而这也就是苹果公司所说的“视觉尺寸”。

Part1,文字设计规,范2字体设计规范在中文方面，在iOS9推出之前，UI设计师普遍采用华文黑体、思源黑体、兰亭黑等字体进行设计。

在iOS9中苹果公司推出了苹方字体（如图所示），之后苹方字体被广泛应用于移动端设计中。

因为苹方字体的字形更加优美，也更加清晰、易读。

它拥有6个字重，分别是极细体、纤细体、细体、常规体、中粗体、粗体，能满足日常的设计和阅读需求。

Part1,文字设计规,范,3文字颜色设计规范

（1）标题类给标题类文字配色相对来说比较简单，一般会使用深灰色或企业标准色。

但使用企业标准色要通过调整饱和度来区分不同的等级，所以一般不建议使用。

Part1,文字设计规,范,3文字颜色设计规范,

（2）正文类正文类文字是给用户提供详细说明，正文类文字颜色一般要比标题类文字颜色浅一些，字号也会小一些。

因为正文字数一般比较多，过于花哨的配色会使整个界面显得凌乱造，成主次不分。

Part1,文字设计规,范,3文字颜色设计规范,（3）提示类提示类