UI设计 —创意表达与实践教学课件1
合集下载
UI设计-—创意表达与实践教学课件1
滴滴出行微信版界面设计
2、已有大量用户的桌面端网站，将不会轻易改版
对于一个具备大量用户的网站的改版设计，将会从成本与收益之间比例关系进行权衡。 通常情况下如果网站做视觉效果的调整，主要从品牌扩展、皮肤美化等因素进行修改； 如果网站从功能层面出发，将会从手机版、平面触摸版的设计出发，然后延伸到桌面 端来进行界面的改良设计。
以用户为中心的设计与开发流程
【外包公司产品开发流程】
外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、 运营、分析、升级。
外包流程
【网站推出发流程】
网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、 审核和批准、站点推出。
网站推出流程
手机界面中浮动面板与微交互设计应用
4、视觉设计会影响APP界面的交互/内容的设计 精美的插画、摄影图像、有趣味的游戏设计等都 会更多的影响到APP界面的交互设计与内容设计。 APP界面设计的版面编排、字体选择，图像质感、 元素搭配等都直接影响APP本身的品质感。
手机APP界面中图形图像的应用
5、“智能通知”将会成为新的APP主界面 Apple Watch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的
第二部分：网页设计中的UI设计 1、手机APP不一定会有对应的全功能的网页 手机版的应用开发一定是功能最齐全、最强大的。因为手机可以用 发通知的方式与用户贴近，让用户收到更丰富全面的信息资源。 HTML5 页面作为分享页面展示、导流的重要入口，会优先保留内 容的展示和消费、二次分享的功能，也会满足最基础的应用功能。
2、软件配置 98%的UI设计师会使用平面位图软件 Photoshop，85%的UI设计师会使用 平面矢量软件Illustrator，30%的UI设 计师会使用网页设计软件。在UI设计行 业里，基础软件只能进入岗位，从事简 单基础的设计工作，其他拓展类的软件 可以对岗位能力的提升与就业面上有更 多的选择权。
2、已有大量用户的桌面端网站，将不会轻易改版
对于一个具备大量用户的网站的改版设计，将会从成本与收益之间比例关系进行权衡。 通常情况下如果网站做视觉效果的调整，主要从品牌扩展、皮肤美化等因素进行修改； 如果网站从功能层面出发，将会从手机版、平面触摸版的设计出发，然后延伸到桌面 端来进行界面的改良设计。
以用户为中心的设计与开发流程
【外包公司产品开发流程】
外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、 运营、分析、升级。
外包流程
【网站推出发流程】
网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、 审核和批准、站点推出。
网站推出流程
手机界面中浮动面板与微交互设计应用
4、视觉设计会影响APP界面的交互/内容的设计 精美的插画、摄影图像、有趣味的游戏设计等都 会更多的影响到APP界面的交互设计与内容设计。 APP界面设计的版面编排、字体选择，图像质感、 元素搭配等都直接影响APP本身的品质感。
手机APP界面中图形图像的应用
5、“智能通知”将会成为新的APP主界面 Apple Watch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的
第二部分：网页设计中的UI设计 1、手机APP不一定会有对应的全功能的网页 手机版的应用开发一定是功能最齐全、最强大的。因为手机可以用 发通知的方式与用户贴近，让用户收到更丰富全面的信息资源。 HTML5 页面作为分享页面展示、导流的重要入口，会优先保留内 容的展示和消费、二次分享的功能，也会满足最基础的应用功能。
2、软件配置 98%的UI设计师会使用平面位图软件 Photoshop，85%的UI设计师会使用 平面矢量软件Illustrator，30%的UI设 计师会使用网页设计软件。在UI设计行 业里，基础软件只能进入岗位，从事简 单基础的设计工作，其他拓展类的软件 可以对岗位能力的提升与就业面上有更 多的选择权。
UI设计 —创意表达与实践教学课件2-1
• 把它做旧 • 把它和其他物体结合 • 把它拟人化 • 把它透明化 • 把它变成凝胶状 • 把它掰开 • 把它挖空 • 把它折叠 • 把它燃烧 • 使它发荧光 • 使它悬浮 • 使它晶格化
像素图标的绘制
像素图标其实是由多个点组成，又名点阵式图像。像素图标属于位图，而位图 的最小单位是1个像素（1pixel）。像素图标强调清晰的轮廓、明快的色彩，几乎 不用混淆方法来绘制光滑的线条，所以常常采用.gif或.png格式, 大小通常为16px、 24px、32px等。它的尺寸精致，信息容量小，经常被用在早期计算机界面，或者 单色液晶屏幕，QQ秀、早期手机游戏、小GIF表情、计算机状态栏、手机信号栏 等。图标是网页中的常见元素，主要功能是表意，也包含装饰及品牌传递的作用， 当然像素图标也可以理解为像素风格的图标，不一定是位图格式存在。与像素图标 相对的是矢量图标，通常以svg格式及字体格式存在，大小可以随意调整。
图标设计在手机界面中的应用效果
4、视觉效果 图标设计追求视觉效 果，一定要在保证差 异性、可识别性和与 环境协调性原则的基 础上，先满足基本的 功能需求，然后考虑 更高层次的需求—— 视觉需求。
Bad Minions主题手机图标设计
5、创造性 随着网络的不断发展， 图标的设计表现方式 更是层出不穷，对UI 设计师的设计内容提 出了更高的要求。创 造性在图标设计中非 常重要，在图标的设 计过程中同样需要别 出心裁的创意表达。
6种常见图标表现风格
3、从应用方面分类，分为硬件界面中的图标设计和软件界面中的图标设计。 4、从思维逻辑方面分类，分为象形图标设计和表意图标设计。象形图标设计师通过其相 似性或对物理对象的引用来传达含义的符号。通常情况下，象形图标与表意图标会组合使 用来传达正确的信息，比如【添加文档】图标会通过象形图标的【文档】和表意图标【+】 来展现。
UI设计教程ppt课件
用户界面（UI）
User Interface
曾俊勇
.
1
造型
视觉的要素
造型决定一个物体看起来 像什么
.
2
颜色
视觉的要素
颜色会带给人们 一种感觉
.
3
大小
视觉的要素
大小给人 某种差异
.
4
视觉的要素
远近，清晰度等
在摄影中，
比较强调这些。
.
5
计算机人机交互界面
.
6
人机交互界面主要因素是什么？
画龙最后点睛一笔还是较为简单的，.而画轮廓，慢慢地勾画出来很难。 26
造型小结
造型决定一个物体看起来 像什么
平时我们如果细致观察， 将一些基本的元素勾画 出来，深入人心，就是成功
的造型。
.
27
颜色的感觉分类
.
28
颜色的感觉分类
.
29
颜色的感觉分类
.
30
颜色的感觉分类
.
31
颜色的感觉分类
.
.
46
颜色的感觉分类
.
47
颜色的感觉分类
.
48
颜色的感觉分类
.
49
颜色的感觉分类
.
50
颜色的感觉分类
.
51
颜色 Demo 1
一叶知.秋
52
颜色 Demo 2
黑白的老照片—. —时间的久远
53
颜色 Demo 3
红色海报 ——革命年代的热情
.
54
颜色 Demo 4
偏重暗色 ——非主流的色调
.
17
UI造型 Demo 6
一个
website
User Interface
曾俊勇
.
1
造型
视觉的要素
造型决定一个物体看起来 像什么
.
2
颜色
视觉的要素
颜色会带给人们 一种感觉
.
3
大小
视觉的要素
大小给人 某种差异
.
4
视觉的要素
远近，清晰度等
在摄影中，
比较强调这些。
.
5
计算机人机交互界面
.
6
人机交互界面主要因素是什么？
画龙最后点睛一笔还是较为简单的，.而画轮廓，慢慢地勾画出来很难。 26
造型小结
造型决定一个物体看起来 像什么
平时我们如果细致观察， 将一些基本的元素勾画 出来，深入人心，就是成功
的造型。
.
27
颜色的感觉分类
.
28
颜色的感觉分类
.
29
颜色的感觉分类
.
30
颜色的感觉分类
.
31
颜色的感觉分类
.
.
46
颜色的感觉分类
.
47
颜色的感觉分类
.
48
颜色的感觉分类
.
49
颜色的感觉分类
.
50
颜色的感觉分类
.
51
颜色 Demo 1
一叶知.秋
52
颜色 Demo 2
黑白的老照片—. —时间的久远
53
颜色 Demo 3
红色海报 ——革命年代的热情
.
54
颜色 Demo 4
偏重暗色 ——非主流的色调
.
17
UI造型 Demo 6
一个
website
ui设计课件
总结词
交互动效设计是指在用户与界面进行交互时，通过反馈相应 的动效来增强用户的操作体验。
详细描述
交互动效设计通过模拟真实世界的物理反馈和自然交互效果，使用户感受到更加逼真的操作体验。例如，在拖拽或点击操作时 ，可以通过添加微妙的过渡效果或声音反馈来增强用户的感知，提高操作的准确性和流畅度。
总结词
ui设计课件
CONTENTS 目录
• UI设计概述 • UI设计的基本元素 • UI设计的原则和方法 • UI设计的应用场景 • UI设计的案例分析 • UI设计的趋势和发展
CHAPTER 01
UI设计概述
定义和特点
01
02
定义：UI设计是指用户 界面设计，即对用户界 面的布局、颜色、字体 、图标等元素进行规划 和设计，以提高用户的 使用体验和操作效率。
桌面应用界面设计案例
总结词
桌面应用界面设计案例分析，探讨了不同类型桌面应用的界面设计特点、交互设计和用户体验等方面 的优劣，以及设计风格和色彩搭配等方面的运用。
详细描述
通过对多个桌面应用界面设计案例的分析，了解各种类型桌面应用的界面设计特点，如办公、图像处 理、音乐播放等应用，学习它们的交互设计和用户体验等方面的优劣，掌握设计风格和色彩搭配等方 面的运用，从而提升自己的设计水平。
提高产品或服务价值
优秀的UI设计能够提升产品或服务的整体价值，增加用户黏性和忠 诚度。
降低用户流失率
良好的UI设计能够减少用户在使用过程中的困扰和疑虑，降低用户 流失率。
UI设计的流程和工具
流程
• 需求分析：了解用户需求和产品定位，明确设计目标和方向。
• 原型设计：根据需求分析结果，制作UI原型，对布局、颜色、字体、图标等进行 规划和设计。
UI界面设计ppt课件
5
6
7
平衡原则
预期原则
经济原则
顺序原则
规则化
8
平衡原则 注意屏幕上下左右平衡。不要堆挤数据，过 分拥挤的显示会产生视觉疲和接收错误。
9
预期原则 屏幕上所有对象，如窗口、按钮、菜单等处 理应一致化，使对象的动作可预期。
10
顺序原则 对象显示的顺序应依需要排列。通常应最先 出现对话，然后通过对话将系统分段实现。
19
20
软件界面设计是为了满足软件专业化标准化 的需求而产生的对软件的使用界面进行美化、 优化、规范化的设计分支。
21
22
23
24
25
具体包括：
软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化
14
格式
在屏幕显示设计中，一幅画面不要文字太 多，若必须有较多文字时，尽量分组分页， 在关键词处进行加粗、变字体等处理，但 同行文字尽量字型统一。英文词除标语外， 尽量采用小写和易认的字体。
15
16
17
信息内容
信息内容显示不仅采用简洁、清楚的表达， 还应采用用户熟悉的简单句子，尽量不用 左右滚屏。当内容较多时，应以空白分段 或以小窗口分块，以便记忆和理解。重要 字段可用粗体和闪烁吸引注意力和强化效 果，强化效果有多样，针对实际进行选择。
28
29
软件按钮设计应该具有交互性，即应该有3到6 种状态效果：点击时状态；鼠标放在上面但未 点击的状态；点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态；不能点击时 状态；独立自动变化的状态。按钮应具备简洁 的图示效果，应能够让使用者产生功能关联反 应，群组内按钮应该风格统一，功能差异大的 按钮应该有所区别。
ui课件 ppt
04
UI设计工具
Sketch
总结词
一款轻量级、易用的矢量图形设计工 具，适合UI设计师使用。
详细描述
Sketch是一款专门为UI设计而生的工 具，拥有简洁的界面和丰富的功能， 支持多种操作系统，方便设计师快速 完成设计任务。
Figma
总结词
一款功能强大的矢量图形设计工具，支持多人协作和实时编辑。
总结词
其他一些常用的UI设计工具，如Adobe Photoshop、Illustrator等。
详细描述
这些工具虽然不是专为UI设计而生，但拥有广泛的应用范围和强大的功能，同样 适用于UI设计工作。
05
UI设计案例分析
优秀UI设计案例
案例二
某电商网站首页
案例四
某新闻阅读应用内 页
案例一
某音乐播放器界面
对齐方式
选择合适的对齐方式，如左对齐、 右对齐、居中对齐等。
03
02
信息层级
合理安排信息的层级关系，突出重 点信息。
网格系统
利用网格系统进行布局排版，提高 设计的规范性和可维护性。
04
03
UI设计实战技巧
用户体验考虑
用户需求分析
深入了解目标用户的需求和习惯，以便设计出更 符合用户期望的界面。
易用性设计
简化操作流程，提供清晰的导航和信息架构，使 用户能够轻松找到所需内容。
可用性测试
通过用户测试来评估界面设计的实际效果，收集 用户反馈并进行迭代优化。
响应式设计
适应不同设备
确保界面在不同设备（如手机、平板、电脑）上都能 良好地展示和操作。
灵活布局
采用流式布局、媒体查询等技术，根据屏幕尺寸自动 调整布局和样式。
UI设计PPT完整全套教学课件(2024)
30
避免过度使用动画，保持简洁性
1 2
适度使用
避免过多动画导致用户分心或产生视觉疲劳。
明确目的
确保动画服务于内容展示和用户体验提升。
3
保持简洁
选择简洁明快的动画效果，避免过于复杂或花哨 的设计。
2024/1/29
31
05 响应式布局与适配不同设 备
2024/1/29
32
响应式布局概念及优势分析
图文结合
将图片与文字有机结合，提高页面的整体美感和 信息传递效率。
15
文字排版和字体选择技巧
字体选择
选择易读性高、风格统一的字体，避免使用 过于花哨或难以阅读的字体。
字号和行距
根据内容层次和重要性，合理设置字号和行 距，确保文字清晰易读。
对齐和间距
文字应对齐工整，保持合适的字间距和行间 距，提高页面的整体美感。
使用跨平台UI框架
使用能够适配多种设备和浏览器的UI框架，如Bootstrap、React Native等。
进行兼容性测试
在多种设备和浏览器上进行测试，确保页面在不同平台上的表现一 致。
35
测试方法确保兼容性
浏览器兼容性测试
测试在不同浏览器和不同版本的浏览器 中的页面表现，包括主流浏览器和移动
设备浏览器。
2024/1/29
19
交互设计原则及流程梳理
• 反馈及时：对用户的操作给予及时、准确的反馈，提高用 户满意度。
2024/1/29
20
交互设计原则及流程梳理
需求分析
明确设计目标，了解用户需求。
草图设计
快速构思，绘制草图，明确界面布局。
2024/1/29
21
交互设计原则及流程梳理
避免过度使用动画，保持简洁性
1 2
适度使用
避免过多动画导致用户分心或产生视觉疲劳。
明确目的
确保动画服务于内容展示和用户体验提升。
3
保持简洁
选择简洁明快的动画效果，避免过于复杂或花哨 的设计。
2024/1/29
31
05 响应式布局与适配不同设 备
2024/1/29
32
响应式布局概念及优势分析
图文结合
将图片与文字有机结合，提高页面的整体美感和 信息传递效率。
15
文字排版和字体选择技巧
字体选择
选择易读性高、风格统一的字体，避免使用 过于花哨或难以阅读的字体。
字号和行距
根据内容层次和重要性，合理设置字号和行 距，确保文字清晰易读。
对齐和间距
文字应对齐工整，保持合适的字间距和行间 距，提高页面的整体美感。
使用跨平台UI框架
使用能够适配多种设备和浏览器的UI框架，如Bootstrap、React Native等。
进行兼容性测试
在多种设备和浏览器上进行测试，确保页面在不同平台上的表现一 致。
35
测试方法确保兼容性
浏览器兼容性测试
测试在不同浏览器和不同版本的浏览器 中的页面表现，包括主流浏览器和移动
设备浏览器。
2024/1/29
19
交互设计原则及流程梳理
• 反馈及时：对用户的操作给予及时、准确的反馈，提高用 户满意度。
2024/1/29
20
交互设计原则及流程梳理
需求分析
明确设计目标，了解用户需求。
草图设计
快速构思，绘制草图，明确界面布局。
2024/1/29
21
交互设计原则及流程梳理
UI设计精品PPT课件
研究人
用户研究工程师User experience engineer
• Reusing previous work • Design principles • Understanding your users • Documentation and help • And more!
• Getting help • Prototyping • Iterating
1.1 客户和用户之间的博弈
用户—使用、操作的人
年龄？习惯？……
使用的时间：6-7小时
客户--高层 出钱的人
年龄？性别？阅历？……
看的时间：5分钟
UI设计师—
理解需求（客户+用户）
1.2 设计师与用户对需求理解的差异性
用户需求转化为UI界面差异性
实例：设计一个批量合成PPT的工具
1.3 获取用户需求的方法--1
Google 的用户体验设计原则
有用（Useful）：以用户为焦点，关注他 们的生活、工作和梦想 快速（Fast）：争取节省每一个毫秒 简单（Simple）：简洁就是力量 魅力（Engaging）：能够唤起新手的好 奇心，能够吸引资深用户 革新（Innovative）：勇于创新 通用（Universal）：全世界适用的设计 盈利（Profitable）：为现行的和将来的 商业模式做好安排 优美（Beautiful）：外观具有视觉愉悦性， 但是不会令用户分心。 可信（Trustworthy）：值得用户信赖 人性（Personable）：加入人性化因素
1.3 获取用户需求的方法--2
了解用户状况（观察、交谈、数据）
• 针对用户的统计数据、历史数据 *明确未来的需求
• 用户的UI习惯
*行业、性别、年龄不同
用户研究工程师User experience engineer
• Reusing previous work • Design principles • Understanding your users • Documentation and help • And more!
• Getting help • Prototyping • Iterating
1.1 客户和用户之间的博弈
用户—使用、操作的人
年龄？习惯？……
使用的时间：6-7小时
客户--高层 出钱的人
年龄？性别？阅历？……
看的时间：5分钟
UI设计师—
理解需求（客户+用户）
1.2 设计师与用户对需求理解的差异性
用户需求转化为UI界面差异性
实例：设计一个批量合成PPT的工具
1.3 获取用户需求的方法--1
Google 的用户体验设计原则
有用（Useful）：以用户为焦点，关注他 们的生活、工作和梦想 快速（Fast）：争取节省每一个毫秒 简单（Simple）：简洁就是力量 魅力（Engaging）：能够唤起新手的好 奇心，能够吸引资深用户 革新（Innovative）：勇于创新 通用（Universal）：全世界适用的设计 盈利（Profitable）：为现行的和将来的 商业模式做好安排 优美（Beautiful）：外观具有视觉愉悦性， 但是不会令用户分心。 可信（Trustworthy）：值得用户信赖 人性（Personable）：加入人性化因素
1.3 获取用户需求的方法--2
了解用户状况（观察、交谈、数据）
• 针对用户的统计数据、历史数据 *明确未来的需求
• 用户的UI习惯
*行业、性别、年龄不同
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第三部分：设计工具的UI设计 1、UI原型工具出现设计标准 实现UI的交互与视觉界面设计，需要借助专业的UI设计工具来实现。一款好的原型设计 工具将主导未来新平台的设计标准，它应该具备以下优秀的功能：与静态界面设计紧密 结合；移动终端的界面方便制作响应式设计；操作简单易懂；拓展性强，能实现较为复 杂的交互效果。
【企业体制与文化环境对UI设计工作的影响】
在现实工作中，设计师往往抱怨不能按照自己的设计思想去完成设计方案，会受 到企业各种条件的制约与影响。其实这样的困惑在与初入行业的年轻UI设计师们 对企业体制与文化环境的了解太少，这些都将直接影响到UI设计师的设计作品是 否能得到企业的重用。通过大量毕业生的就业的情况反馈，企业从事的行业与公 司的类型会对从事的UI设计岗位的设计师工作产生重要的影响。因此，总结主要 有以下几种类型的公司：
2、职业的发展维度 UI设计师进入职场后，职业生涯的发展可以分为横向发展和纵向发展的设计师。他们需 要掌握的技能和发展的岗位分别是视觉设计、交互设计、用户体验、代码编程、项目管理。
UI设计师的五大主要岗位
UI设计工作流程
【自主软件产品开发流程】
常见软件产品的开发流程包括产品需求分析、功能定义、交互原型、程序技术预研、 效果图绘制、开发、测试、发布上线、运营、迭代开发。
主流设计软件的使用率
【 UI设计师必备技能】
1、手绘能力 在开展设计项目时，设计前期 手绘草图能力是不可缺少的。 手绘能力从某种程度上能反映 出该设计师的美术功底，同时 对职业的提升与发展都有一定 程度上的影响。
手绘UI草图模型
2、熟练操作绘图软件 UI设计师最常用的绘图软件就是Photoshop和Illustrator，必须掌握该位图软件 与矢量软件的核心使用功能及运用技法。 • 位图概念、像素与分辨率、图像格式、色彩管理、透视原理、光影效果及其 他基本操作设置。 • Photoshop中钢笔工具路径绘图、选区、曲线调整的技巧。 • Photoshop中图形样式、常用滤镜、6类混合模式的运用。 • Photoshop中快速蒙版、剪切蒙版、图层蒙版和矢量蒙版的运用。 • Photoshop中通道与颜色处理的运用技巧。 • Photoshop中多种抠像方法。 • Photoshop与Illustrator协同路径作业。 • Illustrator中矢量图形绘制、路径的编辑、网格渐变的高级用法。
3D全息投影
可穿戴设备
Magic Cube奇幻投影键盘
3D打印技术
个人健康顾问设备
【UI 设计的发展趋势】
第一部分：移动应用中的UI设计 1、各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异，对用户无显著影响。桌面常见的交互形式也将更多 影响移动端，要支持 iPad Pro 这样的生产级设备，iOS/Android 会为了兼容桌面场景作 出优化。
2014年中旬从国内大型招 聘网站前程无忧、智联招聘和 中华英才网获取对UI设计师岗 位的基本生存状态信息数据。 据不完全统计全国已有UI设计 师30万余人，其中70%为网页 UI设计师，20%为手持设备UI 设计师 ，10%为其他UI设计师。
UI设计师分类比例【未来U设计新领域】未来UI设计的领域主要体现在全息投影交互技术、可穿戴设备、图像加强技术、远程 控制、3D打印机、运动感应技术、多功能眼镜技术、智能手表、人体穿戴医疗设备及 无人驾驶汽车等领域。
APP，“智能通知”的推动方式成为与用户在不启动APP的状态下最直接的沟通渠道。未 来“智能通知”不再以小广告或者类似Widget的形式出现，可以更接近手机屏幕大小，按 用需求出现，具备较为完整的界面功能，让用户在不打开一个APP应用下，可以享受到 APP提供的全部功能。
智能手表及手机“智能通知”界面设计
Android系统底部的导航交互
2、设计规范、平台特性越来越受重视 对于实现与找到适配用户学习新的操作规范与平台范式是有成本方面的考虑，因此 大的厂商在设计交互动态效果时都遵循现有的平台的设计范式，所谓独创或者自创 的交互效果未必能达到理想的状态。
3、微交互中更多使用动态效果 过于华丽的动画，会导致用户等待的时间延长，经常出现容易引起用户的反感与厌 恶。合乎逻辑的动画、微交互形式将作为新的平台规范。如下拉刷新、Float Label 等很难察觉的动效将会更流行。
2、VR的设计工具将开始出现 2016 年随着 Oculus Rift 的正式发布，VR 进入了商用化的元年。VR 带来的身临其境 感显然会带来新的信息展现和交互方式，这些都不是目前的平面设计软件所能满足的， 但目前进行VR也没有除了直接搞代码之外的设计方式，未来几年将有所改观。
Oculus Rift 虚拟VR设备
可穿戴设备界面设计
智能家居操作界面设计
家用咖啡机操作界面设计
第四部分：医疗及各种数码机床等自动化控制界面、微型嵌入式设备界面
医疗用具的界面设计
第五部分：卡拉OK点歌、远程会议监控、虚拟现实等界面
远程虚拟设备界面设计
初识UI设计行业
【UI 行业现状】
目前，UI设计行业正在全球软件业兴起，属于高新技术设计产业。虽然国内在人机交 互领域比国外晚十几年，但近十年，随着APP开发成本降低，个人创业及中小型IT企 业在国内遍地开花，导致了UI设计易、盛大、淘宝等）均成立专业的UI设计部门， 高级UI专业人才稀缺，人才资源争夺很激烈，薪资也很可观。
【 UI设计师的职业规划】
1、设计师的能力和性格对职业发展的影响 • 设计师的眼界 优秀的UI设计师是需要积累和沉淀，需要靠平时点滴的积累。 • 设计师的沟通能力 倾听：客户、项目组其他成员的意见，收集信息，倾听客户的内心需求及对产品的期望和愿景。 提问：挖掘客户深层次的需求，或确定客户表达不清楚的地方。 解决：用设计师专业的眼光和素养，评估各类可行性，将客户的意见和各方面信息总结出目前最 优解决方案，变成草案，再次和客户确认，用邮件确认，留下文字信息。 • 设计师的技术表现 手绘草稿能力和软件操作能力，效果图的效率与质量，产品演示DEMO等决定视觉 表现因素。 • 设计师的整合能力 能将手头的资源素材整合起来，用最好的方式给客户展示出来。
VD：Visual Design（视觉设计） CD：Content Design（文案设计） UIC：User Interface Code（界面编码开发） UR：User Research（用户研究）——竞品分析，可用性测试和评估 PM：Product Manager（产品经理）——决策产品方向、架构与需求 BI：Business Intelligence（市场分析） WIMP：Window/Icon/Menu/Pointing Device（窗口/图标/菜单/指点设备）
以用户为中心的设计与开发流程
【外包公司产品开发流程】
外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、 运营、分析、升级。
外包流程
【网站推出发流程】
网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、 审核和批准、站点推出。
网站推出流程
初识UI设计师
【UI设计师所需装备】
1、硬件配置 从事设计行业工作的UI设计师，软件与硬件都是息息相关的。设计工具的完备是从事 这个行业的基础条件。工作电脑的配置需达到以下配置：PC机的配置为CPU为4核以 上、内存8GB以上、显卡内存2GB以上、SSD固态硬盘；Windows 7以上系统， Adobe CC等软件已经不再支持XP系统，当然有苹果一体机或MAC Pro更好。
初识UI设计
【什么是UI】
UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、 界面视觉美观的整体设计。它的工作主要包括界面的视觉设计、界面的交互设计、界 面与用户体验3个部分。
【UI 设计常用名词及缩写】
UI：User Interface（用户界面） GUI：Graphical User Interface（图形用户界面） HUI：Handset User Interface（手持设备用户界面） WUI：Web User Interface（网页用户界面） IA：Information Architecture（信息架构） UX：User Experience（用户体验） IxD: Interaction Design（人机交互） UCD：User Centered Design（以用户为中心的设计） UPA：Usability Professionals Association（可用性专业协会）
手机界面中浮动面板与微交互设计应用
4、视觉设计会影响APP界面的交互/内容的设计 精美的插画、摄影图像、有趣味的游戏设计等都 会更多的影响到APP界面的交互设计与内容设计。 APP界面设计的版面编排、字体选择，图像质感、 元素搭配等都直接影响APP本身的品质感。
手机APP界面中图形图像的应用
5、“智能通知”将会成为新的APP主界面 Apple Watch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的
类型一：以客户需求为导向的企业 这类企业就是行内俗称的外包公司，主要以满足客户需求来承接业务，设计师需 要在此过程中不断的修改设计方案与沟通设计想法。虽然这类设计公司经常加班 熬夜，并且设计师的待遇相对偏低，但对于新人能接触到各类设计项目，为自己 囤积作品与累积项目经验。
类型二：以用户为中心的企业 这类企业的主要业务就是研发自己的产品，并且产品是直接面向用户，通常公司 会在用户体验方面投入较多的精力与资金，擅长挖掘用户需求与竞品分析。以不 断优化的高品质UI来吸引用户群的青睐，针对目标用户进行开发与设计。
【UI 设计的分类】
第一部分：网页界面、手持移动设备界面（系统界面、独立APP应用界面）
应用程序界面设计
手机系统界面设计