UI界面设计（第3版）高职全套教学课件

第一章UI界面设计相关知识全套可编辑PPT课件

1234UI界面设计的概念UI设计的流程UI界面设计的规范界面设计的常用工具

目录了解UI设计的概念了解UI设计的流程了解UI界面设计的规范了解UI界面设计与用户体验的关系掌握PhotoshopCC中图像常用基本操作掌握PhotoshopCC选区的基本操作掌握PhotoshopCC画笔工具的使用。

知识目标能绘制、修改选区。能熟练使用画笔工具。能力目标UI的本意是用户界面

是英文用户User和

界面Interface的缩写。人机交互操作逻辑界面美观

什么是界面设计（UI）？界面——UI即UserInterface(用户界面)的简称。广义上来讲，UI界面是人与机器进行交互的操作平台，即用户与机器相互传递信息的媒介。1.UI界面设计的概念界面设计的内容包括：图形、文字、色彩、编排，使界面起到美化效果的作用。需要研究用户需求，研究目标用户。1.UI界面设计的概念2.UI设计的流程3.UI界面设计的规范界面设计规范：

用于界面设计,读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。CompanyLogoUI界面设计视觉规范的构成

界面设计总体规范1

文本规范2

间距边距规范3

按钮规范4

图片规范5

其它规范63.UI界面设计的规范本章主要对界面设计的基本概念、流程、规范等进行了讲解，对常用的图像处理软件PhotoshopCC部分功能进行了简单介绍。让大家对界面设计和Photoshop有一些初步认识。本章小结ThankYou!第二章UI界面设计的常用方法12345UI界面设计中的设计方法UI界面设计中实用的构成方法UI界面设计中实用的色彩搭配技巧

知识拓展

能力拓展

目录了解UI设计的概念了解UI设计的流程了解UI界面设计的规范了解UI界面设计与用户体验的关系掌握PhotoshopCC中图像常用基本操作掌握PhotoshopCC选区的基本操作掌握PhotoshopCC画笔工具的使用

知识目标能绘制、修改选区。能熟练使用画笔工具。能力目标现代设计方法心智图法情境化设计法心智图法又称为思维导图法1.

UI界面设计中的设计方法现代设计方法心智图法情境化设计法情境化设计法1.

UI界面设计中的设计方法以用户为中心可用性测试

（1）突变方法论（2）信息方法论（3）系统方法论（4）离散方法论（5）智能方法论（6）控制方法论（7）对应方法论（8）优化方法论（9）寿命方法论（10）模糊论方法（11）艺术方法论现代设计方法心智图法情境化设计法现代设计方法1.

UI界面设计中的设计方法2.

UI界面设计中实用的构成方法Diagram

1.变化与统一

2.对称与均衡

3.节奏与韵律4.联想与意境

6.适应与照应形式美法则

7.反复与连续8.统觉与错觉

5.调和与对比统一总是和变化同时存在的。变化是各组成部分的区别，统一是这些有变化的各部分经过有机的组织，使其从整体到得到多样统一的效果.

对比：将不同的形态、色彩、或质感、大小等要素组合起来，突出个性，使用多种要素之间造成极大差异。调和：在不同的造型要素中强调其共性，达到协调即为调和。有韵律的构成具有积极的生气，有加强魅力的能量。

2.

UI界面设计中实用的构成方法形式美法则秩序构成非秩序构成重复构成密集构成近似构成对比构成渐变构成特异构成发射构成自由构成

常用的构成基本形式2.

UI界面设计中实用的构成方法3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论1色彩搭配法则2原色无法用其它颜色调配出的颜色红黄蓝间色两种原色混合所得出的颜色橙绿紫复色三种原色和两种以上的间色按比例调配出的颜色固有色物体所固有的颜色光源色光照本身的颜色环境色物体所处环境的色彩对物体所产生的影响补色色相环上直径两端正对的颜色被称为互补色无彩色：黑，白，纯灰有彩色：红橙

黄

绿青

蓝

紫极色金属色3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论1无彩色有彩色3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论1色彩的三属性色相明度纯度

色相：指色彩的相貌

3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论1明度:色彩的明暗程度3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论1纯度(彩度):色彩的鲜艳程度用数值表示色的鲜艳或鲜明的程度3.

UI界面设计中实用的色彩搭配技巧色彩的基本理论13.

UI界面设计中实用的色彩搭配技巧色彩搭配法则2C卡通化A扁平化

B拟物化4.知识拓展三种风格：扁平化、拟物化、卡通化5.能力拓展1PhotoshopCC中图层的应用

2Photoshop中的蒙版3渐变工具

本章主要对UI界面设计常用风格进行了介绍；对界面设计的设计、构成、色彩搭配等方法进行了归纳；在Photoshop中对图层的知识、蒙版知识、渐变工具等进行介绍。通过本章的学习，将有助于在以后的设计过程当中系统把握设计方法，以提高设计制作的速度与效率。本章小结ThankYou!3.UI设计的美术基础问题1：学UI需不需要手绘能力。或者学UI需要什么绘画基础。我们先来看一下跟绘画有关系的行业：

漫画：

主要的不是绘画能力，更重分镜头，叙事能力，脚本编写能力，很多画的不好，但是依然存活很多年的漫画还真就不少，甚至可以证明，绘画能力的底线可以很低。游戏原画：

虽然工作内容是在画画，但是游戏世界观多数都是架空世界观，历史以及文明的视觉搭建。所以对历史符号，架空世界观，产品类型，研发流程实现等行业知识更重要。影视：

跟游戏差不多，但是你设计出来的东西的能实现。场景，道具，服装，你的对施工，材料，拍摄效果，后期等相关知识得有足够了解。

简单说了，几个行业，我想说的是，那些看起来都是画画的工作，其实绘画只是表达手段。是最最基础的一个职业技能。但是并不是主要的职业需求。

UI也一样，绘制能力是表达手段，基础需求，只是工作里的一小部分。在所有这些跟绘画有关系的行业里，绘画是为行业目的服务的，所以，所需要的美术基础也绝不相同。

所以千万不要把跟绘画有关的行业一概而论，理解为艺术行业。跟绘画有关的行业多数都是商业行为，商业行为下，艺术这个词就褒贬不一了。

在聊美术需求以前，我们先来聊一个跟绘画有密切关系的东西：素描多数想要学习绘画的人貌似第一个能了解到的绘画方式就是素描。。。。。。具象化超写实素描：像照相机一样的去画画，比照相机更主观，大量细节往往令人印象深刻。表现性素描：你大致分清楚绘画内容，但是表现素描里多参杂更多情感宣泄。抽象素描：你基本已经很难分清楚绘画内容了，抽象素描更倾向于情绪表达。其他很多素描形式就不一一列举了。

我们做UI需要这种绘画能力么？肯定不是！我们回头来看一下，为什么会有素描这种绘画形式？能找到的所有的历史名画，都有一个共同的特性：就是都有颜色。例如这张《奥菲利亚》其实不是的！不是所有人，都直接有能力在大脑中完成创作，直接绘画的。在普通人的印象里，画家都是很牛的无敌存在。画一张这样的画，你别管他花多久，都是一次搞定！任何你看到的一张完整作品背后，都有可能有十几张，几十张，上百张的小稿。素描是一种最节省资源的研习方式：因为你可以排除掉颜色的干扰，甚至排除掉，构图，等一系列的多余因素，去有目的的研习作品元素。比如纯结构：比如纯材质：比如人物景物记录：素描的存在，其实是绘画的一个过程。因为你可以不用张张精品的去绘制完成。只需要明确你的目的，去快速熟悉，比对，选择。确立一个观念：作为UI设计师，请把绘画能力当做一种辅助研习的手段，不要以其他行业绘画标准，去要求自己学习绘画，那会本末倒置，浪费大量的时间和精力。也确实没必要性。除非你打算转行，或者个人兴趣使然。回到正式话题：UI需要哪些绘画基础知识？结构：物体占据空间的方式。一般设计行业的素描都是结构素描。结构的重要性不言而喻。为什么素描要从几何图形画起？原因就是够简单。当你去处理一个复杂图形的时候，把它拆解成简单的几何图形最容易理解，和控制。我们是在二维世界里，去表现三维世界的空间。所以理解了结构，就能理解很多其他东西。比如光原理：光是一个永远的存在，影响光的因素，其实就是结构，其次是材质对光的反射比例。也需要学习和了解透视原理常规透视：基础透视原理

平行透视：其实是平面设计行业用的最多的透视方式，不用考虑灭点形变之类的因素。

视觉透视：人的视觉是有生理误差了，所以感官上来讲，很多透视都做了相应的修改，以适应人眼的观看方式。

变形透视：特殊目的下，会使用变形透视，比如，你的手机其实并不是水平于你的眼睛的。很多时候都会有倾斜。ui设计的时候，根据目的也会做相应的调整。色彩原理：色彩是一个可以单独拿出来说事的知识：

色彩是视觉引导，情绪引导，观感控制的一个重要手段。

很多人都觉得色彩是很难掌握的一个能力，其实也不用太担心，因为有大量的现成的色彩构成，与色表等可以参考。在不能主观去使用的时候，至少学会收集色表，和根据需求使用它们。构图：因为无论是绘画还是做UI，我们看到的内容都是有边界的既然有边界，就要安排主要内容的位置。

对于影视产品来说，就是镜头感。对于UI来说，就是观看舒适度，和操作舒适度。所以如果一个UI有绘画能力，有几个好处。第一：就是你可以短时间，高效率的方式，快速尝试设计和比对。大大提高工作效率第二：就是你绘画越熟练，你的工作效率越高。因为你对透视，结构，光原理，光色，的熟练，可以让你快速拆解你眼睛所见的一切事物，然后去根据需求改变和重新组合它们。第三：很多时候手绘是一种不可替代的存在。

重新审视一下绘画知识和UI的关系：结构：没有任何东西是没有厚度的，哪怕是扁平化设计，很多也都有厚度

透视：结构的变形一定会在透视的框架下！

光原理：能够理解结构，就能够自由控制光源。

构图：其实是UI工作使用最频繁的原理，布局永远是整体控制的关键。

色彩原理：无处不在，无法忽略。无论你做任何绘画练习，请一定要明确你绘画的目的。画画这个事情其实就是一个量的积累，哪怕你没有因为绘画而提高设计能力，但是长期保持绘画习惯，绝对大大提高你的设计效率是真的。就国内各行各业来看，没有哪个职位是工作内容范定的特别精准的。特别是一些小公司。除了UI本职工作以外，动画，特效，场景元件，角色切片，也都有可能遇到。

手绘能力可以让UI职位锦上添花，拥有更强的适应力，更高的工作效率。也有更多横向扩展职业能力的机会。

所以推荐多少都应该具备一些手绘能力。以及相关的绘画知识。以绘画的方法去【理解】视觉上的世界是一个很好的方式，也可以去尝试绘画，但是请明确你做这个事情的目的。

不要为了画画而画画。总结：绘画理论在设计中的实际用途。绘画没在UI设计中占多大比重，这个就像麻雀虽小五脏俱全一样，占的比重小，但是挺重要，少了就是残疾，多了，也不可能因为你一个器官过大，就对你身体有绝对的好处。相反可能影响你的健康。凡事都有度。

除了网店中商品展示之类的，UI里的基本没有什么是直接使用照片的，都需要重新设计和绘制。

这是一只鸟，显而易见，它身上什么才是主要信息？嘴？眼睛？翅膀？我画什么才能让人知道它是一只鸟呢？其实都不用，剪影是最低的信息辨识方式。你会发现大量的UI原件，信息内容都是剪影转化而来的，根据不同风格，剪影外轮廓也会有不同的变形。风格不在今天讨论内容里，所以先忽略变形这个问题。我们今天只聊最基础的绘画原理。那么我们怎么才能以最少的视觉元素，让用户快速识别信息内容呢？这，基本上就难以辨认了吧？不是所有的物品剪影就能区分的，还是需要细节的。其实这是个钱包。。。。。那么是什么让我们确认了这是个钱包吗？先来假定一个命题，我们今天来制作一个钱包的icon。通过完成过程来熟悉绘画知识的，应用和理解。我首先翻转了这个钱包，理由：一般来讲，不是特殊需求，一个物品的方向都是右侧为主！为什么呢？因为一般光源方向都是左侧打出的。这其实不光是人的视觉习惯，也是因为市场上的通用设计，导致了这个经验式的设计习惯。这不是一个一定要遵守的规则，仅仅是常规参考而已。根据实际情况来判断物品方向和光源问题。我们来看下四个草稿：

一：只有外轮廓，无法判定是什么

二：有了一个扣具的轮廓，依然无法准确判断

三：扣具上有了扣子，这回容易判断一点了

四：多了缝线的细节所以信息简化这个事情，是有极限的。能用最少的视觉内容，让用户分辨出信息，这是一个很理想的状态。

但是仅仅是识别，还不能满足UI的需求。比如做成这种草图，能认出来，多数情况下是不能直接使用的。UI不是一个绘画工作，了解绘画原理是为了，拆解我们的工作过程，合理化，规划设计流程。

UI里很少涉及到你需要大量手绘的部分。都是基本形状的应用。所以，绘画原理也可以浅尝即止。不需要每个UI都拥有原画师级别的绘画能力。课后练习

根据实物图片，绘制6个工业风格图标草图

挑选其中2个上色，绘制色彩效果ThankYou!

第4讲UI设计的软件基础DiagramIllustratorCorelDrawPhotoshopFireworks4.界面设计的常用工具其他软件：XaraXtreme、AxialisIconWorkshop、Flash、3dsMax……

1.选区工具2.选择菜单>色彩范围3.路径描绘4.通道5.滤镜>抽出建立选区的方法汇总1界面设计的常用工具——Photoshop4.界面设计的常用工具1.画笔调板的设置2.颜色的选择3.定义画笔4.载入画笔熟悉画笔工具1界面设计的常用工具——Photoshop4.界面设计的常用工具直径：设置笔刷大小喷枪：按下此按钮后画笔的使用具有喷枪的属性，只要打开喷枪（按下鼠标左键）涂料一直喷出，颜色会越来越浓。画笔工具界面设计的常用工具——Photoshop4.界面设计的常用工具画笔调板：【窗口】/【画笔】（F5）界面设计的常用工具——Photoshop4.界面设计的常用工具画笔初始形状

直径：设置画笔的大小尺寸

角度：设置画笔的旋转角度

圆度：设置画笔的高度缩放比例

硬度：设置画笔的边缘属性，数据越大边缘越硬，数据越小边缘越羽化、

间距：设置点之间的距离。界面设计的常用工具——Photoshop4.界面设计的常用工具形状动态属性控制尺寸波动幅度控制最小尺寸幅度控制角度波动幅度控制圆度波动幅度控制最小圆度波动幅度界面设计的常用工具——Photoshop4.界面设计的常用工具散步属性：控制画笔偏离鼠标移动路径的程度控制笔刷偏离鼠标移动路径的程度控制构成线条的画笔的多少界面设计的常用工具——Photoshop4.界面设计的常用工具双重画笔：用于将另外一种画笔叠加在当前画笔上。色彩动态属性：用于控制色彩在前景色背景色之间变化属性其他动态属性不透明度、流速波动：控制色彩浓度波动。控制方式：选项同前。渐隐方式指在一定距离内色彩浓度波动至透明。杂点：勾选后为笔刷增添杂点。湿边：勾选此项画笔具有中间浓度淡，边沿浓度深效果，铅笔不具备此项。喷枪：同属性栏上喷枪。平滑：勾选此项可以使画笔边缘较平滑。保护纹理：选择此项可以确保使用复位画笔命令时当前画笔纹理保持不变界面设计的常用工具——Photoshop4.界面设计的常用工具首先，介绍一些教程给大家：/live/1_0_16_0_0-begin_1-p0?sysref=xui3从工作流程上来看，初级设计师就像亢奋的小精灵；高级设计师则在疯狂中有规则。在设计追求上，初级设计师追求设计美感；高级设计师则创造新的价值。在解决问题上：初级设计师往往脱离实际；高级设计师则更贴近产品实际。多才多艺的设计师就像一线城市的房价，尽管开价很高但还是供不应求。学艺不精的设计师就像十八线城市的房价，在一路下跌的颓势再也硬不起来。核心技能点是人才流通市场上永远的硬通货。项目开发流程：UI设计师在项目开发过程中的工作内容UI设计步骤规范基础|软件基础|图标设计|界面设计|切图交互|用户产品软件基础PS、AI、Skech、mockingbot、mockplus、chainco、cutman、Axure……制作原型，界面，图标制作，素材制作，切图等等相关步骤的软件都需学会当了解的越多会发现，有更多新型提高效率好用的软件，例如pixate、xmind、AE......以及更多mac上面的国外app制作软件课后自学：1、水滴：点此处——进入链接2、快播：点此处——进入链接写实收音机图标/tutorials/icon-tutorials/painted-fm-radio.html终结者/detail/61812.htmlThankYou!第三章各种UI界面常用元素制作12345常用图形制作常见控件制作创意图标设计与制作知识拓展

能力拓展

目录

熟悉使用Photoshop制作各种简单的UI界面常用元素。可以灵活选择各种工具，如路径工具、擦除工具等。能绘制简单图形、控件、图标等。

学习目标圆形、圆角多边形直线常用图形制作1.常用背板2.常见控件制作按钮的制作下拉选择框滑动条TAB切换气泡对话框常见控件制作2.常见控件制作3.创意图标设计与制作拟物化设计风格图标扁平化设计风格图标3.创意图标设计与制作单色风格图标线性风格图标创意图标设计与制作Diagram知识拓展路径工具形状工具……擦除类工具…………4.知识拓展响应式图标

本章集中介绍了使用Photoshop制作各种简单的UI界面常用元素。对于图形、控件、图标等的制作可以灵活选择各种工具，如路径工具、擦除工具等。因此，读者需要不断熟悉各种工具的使用，同时能根据设计思想灵活的运用工具以达到图像处理的目的。本章小结ThankYou!图标12345图标背板UI界面设计中实用的构成方法UI界面设计中实用的色彩搭配技巧

知识拓展

能力拓展

目录了解UI设计的概念了解UI设计的流程了解UI界面设计的规范了解UI界面设计与用户体验的关系掌握PhotoshopCC中图像常用基本操作掌握PhotoshopCC选区的基本操作掌握PhotoshopCC画笔工具的使用

知识目标能绘制、修改选区。能熟练使用画笔工具。能力目标1.图标背板图3-15相同背板的系列图标图3-16背板形状各异的图标图3-17第三方图标+背板+效果=最终效果预设大小（px×px）：16×16，24×24，32×32，48×48，64×64，96×96，128×128，256×256，512×512。

常见的图标风格有形单色有形多色

2.5D：有形多色有样式

有形多色有样式有质感

3D：照片级质感图3-65风格统一的整套图标设计C卡通化A扁平化

B拟物化4.知识拓展

风格：扁平化、拟物化、卡通化|纪念碑谷风低多边风\折纸风MBE描边

CompanyLogoA扁平化

CompanyLogoCompanyLogoCompanyLogoCompanyLogo用Illustator制作长阴影我们将向你演示用AI制作长阴影的两种方法：一种使用路径，另一种使用混合选项。方法2：混合工具第一步，绘制形状第二步，复制和移动首先我们为图标元素制作长阴影。为此，我们需要先复制图标元素后进行原位粘贴(Ctrl+f)。然后将复制的元素移到阴影结束处

第三步，混合选项调整步数，直到平滑。CompanyLogo/article/bzsj/201604/45255.html

45款低多边形风格动物logo设计

/examples/tools/low-poly/#

低多边在线生成器

低多边风\折纸风低多边形的正式名称叫做LowPoly3DCompanyLogoCompanyLogoCompanyLogo提示：吸管工具的正确使用姿势——按快捷键A-I;，左手小拇指放在直接选取工具的A键上，食指放在吸管的I键，A一下选取要换色的色块，再I一下点击其他地方需要获取的颜色，如此反复，鼠标点到哪里换哪里，SOEASY！总结软件的用法图标的分类剪影图标单形2.5D伪扁平化扁平化图标2D拟物化3D图标标准做法堆叠法切割法图标的绘制标准图形尽量不引入新的形状偶数原则同层运算选区对齐做U不做V本章小结ThankYou!第六章手机主题UI界面设计1234界面设计任务分析制作步骤详解知识拓展能力拓展目录熟悉手机UI界面设计的基本思想和原则；掌握平板电脑界面设计的工具和技术。根据苹果界面设计的原则（简洁、一致性、对比度）进行界面规划、概要设计和设计要素的选择，并利用一种界面设计工具（Photoshop）完成设计。学习目标1.界面设计任务分析需求分析界面设计思路确定主题类别设计内容规划2.制作步骤详解设计制作主体形象1设计制作手机壁纸2设计制作锁屏3天气插件制作4桌面图标制作5A手机界面设计原则B手机常用尺寸与图标格式3.知识拓展4.能力拓展1拓展练习:ico图标设计制作 2拓展练习:伪扁平手机主题UI界面设计3独立实践4.能力拓展

本章设计UI主题界面，从天气模块、系统图标、锁屏界面等视觉元素入手，通过Photoshop完成整套手机主题UI界面设计。通过本章的学习，可以掌握手机主题UI设计的流程和制作方法。

小结ThankYou!第四章操作型APP——计算器界面设计1234界面设计任务分析制作步骤详解知识拓展能力拓展目录

熟悉APP设计的基本流程和简单规范；掌握使用PhotoshopCC图形处理工具进行UI界面的制作的技能。学习目标需求分析功能定位交互设计界面设计结构分析界面设计色彩分析界面设计思路分析1.界面设计任务分析2.制作步骤详解新建文件，确定尺寸规范1制作背景2制作状态栏区域3制作显示区细节4制作功能键区和数字键区细节5定稿输出有效的设计方案6创建、编组、复制、管理……A图层组知识【编辑】>【预设】>【预设管理器】C外部素材载入使用交互逻辑设计步骤BAPP界面布局设计3.知识拓展4.能力拓展

本章集中介绍了使用Photoshop制作各种简单的UI界面常用元素。对于图形、控件、图标等的制作可以灵活选择各种工具，如路径工具、擦除工具等。因此，读者需要不断熟悉各种工具的使用，同时能根据设计思想灵活的运用工具以达到图像处理的目的。本章小结ThankYou!第七章WEB界面设计实例

——儿童节专题网页设计1234界面设计任务分析制作步骤详解知识拓展能力拓展目录学习目标

熟悉网站界面设计的基本思想和原则；掌握网站图形界面设计的工具和技术。根据网站界面设计的原则（简洁、一致性、对比度）进行界面规划、概要设计和设计要素的选择，并利用一种界面设计工具（PhotoshopCC）完成网页界面设计2.制作步骤详解设计制作头部主图1设计制作装饰图形2设计制作栏目“书籍系列”3设计制作栏目“服饰系列”4设计制作栏目“玩具系列”5设计制作底部区域6A网站界面设计基本原则B网站界面的功能美与形式美3.知识拓展3Photoshop打造电子商务网页界面简单网页设计制作实例颜色的使用

自定图形工具的使用渐变填充的使用……4.能力拓展1照射在透明玻璃窗上效果2Photoshop打造倾盆大雨效果3Photoshop打造电子商务网页界面拓展练习：1照射在透明玻璃窗上效果4.能力拓展拓展练习：2Photoshop打造倾盆大雨效果4.能力拓展拓展练习：

本章设计了一个卡通风格的专题网页界面，从风格渲染、图片素材处理到装饰图形绘制。后续的能力拓展中选取了一些滤镜特效和简单网页布局，全程融入了Photoshop处理技巧反复演练，巩