UI界面设计课件[优质ppt]
合集下载
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设计课件
强大的文字排版功能
03
Photoshop的文字排版功能非常强大，适合设计UI中的标题和
正文等文字内容。
Adobe Illustrator
矢量绘图
Adobe Illustrator是一款专业的矢量绘图软 件，适合设计UI中的图标和界面元素。
强大的图形编辑功能
Illustrator内置了丰富的图形编辑功能，可以帮助 设计师快速创建各种形状和效果。
06
UI设计发展趋势与展望
响应式设计
响应式设计
随着移动设备的普及，响应式设计已成为UI设计的重要趋势。这种设计方法使网页能够根据不同设备的屏幕大小和分 辨率进行自适应调整，提供更好的用户体验。
响应式设计的优点
提高用户体验、提升网站可用性、增加网站流量。
响应式设计的实现方式
媒体查询、流式布局、弹性图片和文字。
用户习惯
尊重用户的习惯和认知，提供符合用户期望的交 互方式和信息呈现方式。
02
UI设计元素
布局设计
布局设计
合理安排界面元素的位置，确保信息呈现清晰、有序 ，使用户能够快速获取所需信息。
网格系统
利用网格系统进行布局，可以提高界面的可读性和一 致性。
响应式设计
根据不同屏幕尺寸和设备类型，调整布局以适应不同 设备，提高用户体验。
UI设计流程
设计需求分析
需求收集
通过与项目相关人员沟通，了解项目的目标、 用户群体、功能需求等信息。
需求整理
将收集到的需求进行分类、筛选和整理，形成 详细的需求文档。
需求评审
对整理好的需求进行评审，确保需求的准确性和完整性。
设计草图与原型
草图设计
根据需求文档，使用手绘或软件工具绘制简单的 草图，初步呈现界面布局和交互设计。
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课件
35
36
37
38
39
视觉关系原则
1、图形与背景的关系 设计中要把图形和背景区分清楚，以便让焦点集中、尽量避免认知混乱。
40
41
视觉关系原则
2、一致性 对于用户体现来说，在一个系统中，相似的部分使用相似的办法是对 用户使用习惯的尊重和再利用，能够让用户更好的学习，减少用户学 习的成本。“一致性”可以让人高效的把知识转到新背景，更快的学 习新事物，并且关注到工作的相关方面。一致性分为：美观、功能、 内部和外部。
设置图标，借用了机械内部的齿轮，来表现对产品内部的管理；文件 夹，借用了现实中的文件夹；垃圾桶更加写实；扫描热点，表明能够 通过该功能发现网络接入；时间借用了钟表的外观；电量借用了电池等等。
26
27
界面设计的基本视觉图标设计也使 用了“功能可见性”原则。字体、 橡皮擦、拖拽、吸管、放大、修 补。。。大部分工具表意非常直 接，即使是初学者也能马上理解 和使用。
28
界面设计的基本视觉原则
5、功能可见性 在移动APP的启动图标设计 中，表意也非常重要。用 户需要通过启动图标第一 时间传达应用服务，当然 有些公司是用启动图标来 传达品牌。
29
界面设计的基本视觉原则
6、条件反射 条件反射经常用于训练 动物，但是也可以用来 营销与广告。在产品界 面设计上使用条件反射 原则，例如把产品或服 务与吸引人的影响或者 味道联系起来。
gui的出现让人与计算机的交互过程变得丰富而有趣起来这一模式也成为以后二十多年界面交互设计的主流交互设计的发展历程交互设计的发展历程在目前这个手机皆智能的时代人们当初从桌面pc互联网那里得到的新鲜感又来到了手掌中
1
UI设计概述
2
UI的定义
36
37
38
39
视觉关系原则
1、图形与背景的关系 设计中要把图形和背景区分清楚，以便让焦点集中、尽量避免认知混乱。
40
41
视觉关系原则
2、一致性 对于用户体现来说，在一个系统中，相似的部分使用相似的办法是对 用户使用习惯的尊重和再利用，能够让用户更好的学习，减少用户学 习的成本。“一致性”可以让人高效的把知识转到新背景，更快的学 习新事物，并且关注到工作的相关方面。一致性分为：美观、功能、 内部和外部。
设置图标，借用了机械内部的齿轮，来表现对产品内部的管理；文件 夹，借用了现实中的文件夹；垃圾桶更加写实；扫描热点，表明能够 通过该功能发现网络接入；时间借用了钟表的外观；电量借用了电池等等。
26
27
界面设计的基本视觉图标设计也使 用了“功能可见性”原则。字体、 橡皮擦、拖拽、吸管、放大、修 补。。。大部分工具表意非常直 接，即使是初学者也能马上理解 和使用。
28
界面设计的基本视觉原则
5、功能可见性 在移动APP的启动图标设计 中，表意也非常重要。用 户需要通过启动图标第一 时间传达应用服务，当然 有些公司是用启动图标来 传达品牌。
29
界面设计的基本视觉原则
6、条件反射 条件反射经常用于训练 动物，但是也可以用来 营销与广告。在产品界 面设计上使用条件反射 原则，例如把产品或服 务与吸引人的影响或者 味道联系起来。
gui的出现让人与计算机的交互过程变得丰富而有趣起来这一模式也成为以后二十多年界面交互设计的主流交互设计的发展历程交互设计的发展历程在目前这个手机皆智能的时代人们当初从桌面pc互联网那里得到的新鲜感又来到了手掌中
1
UI设计概述
2
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习惯
*行业、性别、年龄不同
移动端UI界面设计介绍课件
设计工具
Sketch：矢量图 形设计工具，适用 于iOS和Android 平台
Adobe XD：矢量 图形设计工具，适 用于iOS和 Android平台
Figma：矢量图形 设计工具，适用于 iOS和Android平 台
InVision Studio： 矢量图形设计工具， 适用于iOS和 Android平台
03
提高开发效率：合理的UI设计可以降低开发 成本和维护成本
04
适应多种设备：移动端UI设计需要适应各种 屏幕尺寸和分辨率，满足不同设备的需求
移动端UI设计的基本原则
01
简洁明了：界面设计应简 洁明了，让用户能够快速 找到所需功能。
02
易于操作：界面设计应易
于操作，让用户能够轻松
完成各种任务。
03
响应迅速：界面设计应响 应迅速，让用户能够快速 得到反馈。
04
保持一致性：界面设计应
保持一致性，让用户能够
快速熟悉并适应界面。
移动端UI设计的发展趋势
1 扁平化设计：简洁明了，易于理解 2 响应式设计：适应各种屏幕尺寸和设备 3 手势操作：更直观、自然的交互方式 4 动态效果：增强用户体验，提高用户参与度 5 人工智能与机器学习：提高个性化和智能化水平 6 隐私与安全：保护用户隐私和数据安全，提高用户信任度
- 设计要点：个性 化推荐算法、用户 界面设计、交互设
计
- 设计要点：导航设 计、搜索功能、商品
展示
案例四：美团外卖界 面设计
案例三：网易云音乐 界面设计
- 特点：个性化推荐， 注重用户体验
- 特点：快速下单， 方便快捷
- 设计要点：菜单设计、 下单流程、支付方式设计移动端UI来自面设 计优化用户体验优化
UI设计ppt课件
趋势三
语音交互和智能助手集成，提供更加自然和便捷的用户体验。
UI设计师职业素养提升建议
01
持续学习和探索新的设 计理念和工具，保持对 新技术和新趋势的敏感 度。
02
注重细节和用户体验， 从用户角度出发进行设 计。
03
培养良好的沟通和协作 能力，与团队成员和产 品经理等紧密合作。
04
建立个人作品集和在线 展示平台，积极推广自 己的作品和成果。
通过用户调研、数据分析等方式，持续了解用户需求和行为习惯的变 化，以便及时调整设计方案。
灵活的设计策略
采用灵活的设计策略，如响应式设计、模块化设计等，以适应不同设 备和用户需求的变化。
不断学习和创新
保持持续学习和创新的态度，不断提升自己的设计能力和水平，以应 对不断变化的市场需求和挑战。
THANKS
3
方案筛选与优化
根据评估结果，选择最佳方案进行细化与优化。
高保真原型制作与评审
高保真原型制作
利用专业工具，将优化后的设计方案制作成高保 真原型。
交互设计
为原型添加交互效果，提升用户体验。
评审与修改
组织团队成员对原型进行评审，收集反馈并进行 必要的修改。
用户测试与反馈收集
用户测试计划制定
确定测试目标、方法、参与人员等要素。
动效设计技巧
运用缓动、弹性、延迟等动效 设计技巧，增强界面吸引力和 易用性。
原型工具支持
利用原型设计工具提供的交互 和动效功能，实现高保真原型 演示。
前端实现方法
使用HTML、CSS和JavaScript 等前端技术实现交互设计和动
效制作。
04
UI设计流程与实践
需求分析与目标用户定位
语音交互和智能助手集成，提供更加自然和便捷的用户体验。
UI设计师职业素养提升建议
01
持续学习和探索新的设 计理念和工具，保持对 新技术和新趋势的敏感 度。
02
注重细节和用户体验， 从用户角度出发进行设 计。
03
培养良好的沟通和协作 能力，与团队成员和产 品经理等紧密合作。
04
建立个人作品集和在线 展示平台，积极推广自 己的作品和成果。
通过用户调研、数据分析等方式，持续了解用户需求和行为习惯的变 化，以便及时调整设计方案。
灵活的设计策略
采用灵活的设计策略，如响应式设计、模块化设计等，以适应不同设 备和用户需求的变化。
不断学习和创新
保持持续学习和创新的态度，不断提升自己的设计能力和水平，以应 对不断变化的市场需求和挑战。
THANKS
3
方案筛选与优化
根据评估结果，选择最佳方案进行细化与优化。
高保真原型制作与评审
高保真原型制作
利用专业工具，将优化后的设计方案制作成高保 真原型。
交互设计
为原型添加交互效果，提升用户体验。
评审与修改
组织团队成员对原型进行评审，收集反馈并进行 必要的修改。
用户测试与反馈收集
用户测试计划制定
确定测试目标、方法、参与人员等要素。
动效设计技巧
运用缓动、弹性、延迟等动效 设计技巧，增强界面吸引力和 易用性。
原型工具支持
利用原型设计工具提供的交互 和动效功能，实现高保真原型 演示。
前端实现方法
使用HTML、CSS和JavaScript 等前端技术实现交互设计和动
效制作。
04
UI设计流程与实践
需求分析与目标用户定位
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
问题二：界面设计=用户+界面？或者界面设计就是单单指界面 美化设计？
从字面上看，UI有用户与界面两个组成部分，但实际上还有还 有用户与界面之间的交互关系。界面设计需要定位使用者、使 用环境、使用方式。
不仅仅是美化界面，还有需要研究用户、让界面变得更友好、 更有趣、更易用、更舒适。
版式 = UI = 用户 + 界面
导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其 高度为：88px
” • 用户研究工程师一般是心理学人文学背景比较合适。
• 综上所述UI设计师就是：软件图形设计师、交互设计师 和用户研究工程师。
UI界面设计相关知识
3.界面设计涉及的范围及学科
界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程 学、信息学以及市场学等的综合性学科，强调人—机—环境三者作为 一个系统进行总体设计。
其他网络资料
UI界面设计相关知识-1.UI界面设源自的概念通过什么操作ATM机？
ATM机操作界面
UI界面设计相关知识-1.UI界面设计的概念
通过什么操作Photoshop程序？
软件界面
UI界面设计相关知识-1.UI界面设计的概念
通过什么操作手机？
手机界面
UI界面设计相关知识-1.UI界面设计的概念
一、什么是UI界面设计？ 界面设计即User Interface Design（用户界面设计）的简称， 是指对软件的人机交互、操作逻辑、界面美观的整体设计。
人机 操作 界面 交互 逻辑 美观
问题一：界面设计=版式设计？
所谓版式设计，就是在版面上， 将有限的视觉元素进行有机的排 列组合。
界面设计的内容包括：图形、文 字、色彩、编排，使界面起到美 化效果的作用。需要研究用户需 求，研究目标用户。
• 例如开车时候方向盘和仪表盘就是这个界面 ，看电视的 时候遥控器和屏幕就是这个界面，用电脑的时候键盘和 显示器就是这个界面。
•
于是我们可以把UI可以分成两大类：硬件界面和软
件界面。本课所关注的UI设计特指软件界面，我们也可
以称为特殊的或者狭义的UI设计。
”
UI界面设计相关知识-1.UI界面设计的概念
3.密码输入框也没有做掩密处 理，被盗号的风险系数增加
2.UI设计师
• •
“ • • • • • • • •
•
• •
ui设计是做什么的？ UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素 决定的， 其分别是研究界面，研究人与界面的关系，研究人 。 1.研究界面----图形设计师 国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但 实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。 这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背 景，例如工业外形设计，装潢设计，信息多媒体设计等。 2.研究人与界面的关系---交互设计师 在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设 计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操 作
” 规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并
且 确立交互模型，交互规范。 交互设计师一般都是软件工程师背景居多。
3.研究人----用户测试/研究工程师。
任何的产品为了保证质量都需要测试，软件的编码需要测
“ 试，自然UI设计也需要被测试。这个测试和编码没有任
何关系，主要是测试交互设计的合理性以及图形设计的 美观性。测试方法一般都是采用焦点小组，用目标用户 问卷的形式来衡量UI设计的合理性。这个职位很重要， 如果没有这个职位，UI设计的好坏只能凭借设计师的经 验或者领导的审美来评判，这样就会给企业带来严重的 风险性。
UI界面设计
平面设计专业
目录
一、UI界面设计相关知识 二、UI界面设计常用方法和原则 三、UI界面常用元素制作 四、计算机界面设计 五、播放器界面设计 六、手机界面设计 七、专题网页设计
一、UI界面设计相关知识
1.UI界面设计的概念 2.UI设计师 3.界面设计涉及的范围及学科 4.界面设计的流程 5.UI界面设计规范
考虑用户的心理需求， 研究目标用户
交互
前面讲到UI设计包括两方面— —美化和交互。让大家更了解 UI设计的重要性
从美化的角度看：
UI优化后:1更有时尚感、层次 感
2.从QQ图像就能知道是QQ的 登入界面，更直观、形象。
从交互的角度：未UI优化的界 面：
1.功能过于简单
2.登入没有体现按钮的特点， 而不会单击
UI界面设计相关知识-4.界面设计的工作流程
4.界面设计的工作流程：
① 产品制作人，写产品计划书。 ② 用户体验研究员，作调查分析。 ③ 信息建构师，设计产品架构。 ④ 交互设计师，作出互动流程。 ⑤ 视觉设计师，作出页面视觉设计。 ⑥ 前台工程师，前台开发。 ⑦ 后台工程师，后台开发。 ⑧ 用户体验研究员，做用户测试确保质量。
UI界面设计相关知识-4.界面设计的流程
线框原型、黑白原型稿
产品原型
界面设计
UI界面设计相关知识-5.UI界面设计的规范
“
手机界面设计规范
”
iOS 系统规范
iphone界面基本组成元素
状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其 高度为：40px
一、UI界面设计相关知识
“
1.UI界面设计的概念
”
一、UI界面设计相关知识-1.UI界面设计的概念
n 1.什么是界面设计？（难点） n 2.UI设计师 n 3.界面设计涉及的范围及学科 n 4.界面设计的流程 n 5.UI界面设计规范
参考书目：
《用户界面设计与制作》 《交互设计》 《UI进化论——移动设备人机交互界面设计》
1、什么是界面设计（UI）？
界面——UI即User Interface(用户界面)的简称。广义上来讲， UI界面是人与机器进行交互的操作平台，即用户与机器相互传 递信息的媒介。
用户
界面
机器
UI界面设计相关知识-1.UI界面设计的概念
“•
概括成一句话就是——人和机器之间的界面。这个界面 实际上是体现在我们生活中的每一个环节的，