UI设计培训PPT课件

产品定位
用户分析
产品概述 功能需求规格整理
产出物 第一次Check
是/否通过？
10
UI设计基本流程
第三阶段：交互设计
概念模型分析
（功能结构 和交互流程设计）
功能结构图 使用场景分析
交互流程分析 产出物
第二次Check 是/否通过？
11
UI设计基本流程
第四阶段：原型设计 （信息架构
信息架构和界面原型
18
三 UI界面用户体验设计原则与规范
19
UI界面用户体验设计原则与规范
总体原则
1.以用户为中心； 2.清楚一致的设； 3.拥有良好的直觉特征； 4.较快的响应速度； 5.简单且美观。
20
UI界面用户体验设计原则与规范
界面风格
1.使用一致性； 2.使用安排和流程； 3.使用对齐和分组； 4.使用强调和可视的提示； 5.使用空格； 6.警惕空洞和注意大小； 7.考虑使用资源或预定义的布局网格。
26
UI界面用户体验设计原则与规范
交互设计—Don't make me think
27
UI界面用户体验设计原则与规范
交互
6.不要使用鼠标中键; 7.保持分配的快捷键的一致性; 8.将快捷键作为补充方式; 9.避免水平滚动条。
28
UI界面用户体验设计原则与规范
程序
1.简化默认配置； 2.默认情况下，应用程序应该保持为最大化； 3.实用程序应该在小屏幕范围内运行； 4.使用“退出”命令终止程序。
领域调研 产出物
UI设计基本流程
PRODUCT ANALYSE 产品定位
INTERACTION DESIGN
USER
概念模型分析
PROTOTYPE DESIGN 信息架构和界面原型
用户分析
功能结构图
要点说明
产品概述 功能需求规格整理
产出物 第一次Check
使用场景分析 交互流程分析
产出物 第一次Check
Windows的可视提示
5.不能编辑具有灰色背景的项目； 6.灰色项目是被禁用的； 6.可以拖动凸起的项目；
25
UI界面用户体验设计原则与规范
交互
1.尽量提供对所有功能的键盘访问； 2.尽量提供对所有功能的鼠标访问； 3.确保具有明显后果的操作要求用户进行明
确的选择； 4.对于使有耗时的操作都给出反馈； 5.确保单击和双击的一致性;
29
UI界面用户体验设计原则与规范
窗体
1.设计期间请注意窗体大小，尽量不要超过 800*600；
2.对话框窗体大小尽量不要超过640*460， 留20给任务栏。并且高和宽（或W宽和高） 的比应该大致保持为3:4（或4：3）。
30
UI界面用户体验设计原则与规范
布局和间距
窗体控件布局和间距尽量保持与Windows 标准一致。控件与窗体的上、下、左、右边 距为7象素。右下角主命令按钮之间的间距为 6象素，如果主命令按钮在右上角，之间的间 距则为4象素。主命令按钮一般情况为75×21 象素，如果按钮的文本很长，应该适当加宽 按钮的宽度。
UI设计培训
实习生 吴超 201205
1
UI设计培训
UI设计基本概念 UI设计基本流程 UI界面用户体验设计原则与规范 总结
2
一 UI设计的基本概念
3
UI设计基本概念
UI即User Interface(用户界面)的简称。
UI设计则是指对软件的人机交互、操作逻辑、 界面美观的整体设计。
UI设计主要包括三个部分：交互设计，用户 研究，界面设计。
和界面原型设计）
要点说明
产出物
第三次Check 是/否通过？
12
UI设计基本流程
第五阶段：详细设计 （详细设计和伪代码 编写）
详细设计 设计和逻辑说明
产出物
第四次Check 是/否通过?
13
UI设计基本流程
第六阶段：设计维护（研发跟踪和设计 维护）
完成设计维护
进入设计维护
End
14
UI设计基本流程
6
UI设计基本流程
基于UI设计三部分的UI设计流程是从一个产品立项 开始，主要分为六个阶段：
基础调研， 产品分析， 交互设计（功能结构和交互流程设计）， 原型设计（信息架构和界面原型设计）， 详细设计（详细设计和伪代码编写）， 设计维护（研发跟踪和设计维护）。
7
BASIC RESEARCH
新产品开发任务 竞争产品分析
21
UI界面用户体验设计原则与规范
使界面符合用户的使 用习惯
22
23
UI界面用户体验设计原则与规范
Windows的可视提示
1.可以单击凸起的项目； 2.可以单击当鼠标从其上移过时突出显示的
项目； 3.不能单击下凹的项目； 4.可以编辑具有白色背景和闪烁垂直条（光
标）的项目；
24
UI界面用户体验设计原则与规范
产出物 第一次Check 是/否通过？
是/否通过？
是/否通过？
DETAILED DESIGN
详细设计 设计和逻辑说明
产出物 第四次Check 是/否通过？ 完成设计维护 进入设计维护
End
8
UI设计基本流程
第一阶段：基础调研
新产品开发任务 竞争产品分析
领域调研
产出物
9
UI设计基本流程
第二阶段：产品分析
33
交互设计 视觉设计
CSS/HTML
编码
生成产品原型（线框图） 生成产品模型（效果图） 生成产品DEMO（效果图） 实现产品（最后阶段）
15
UI设计基本流程
一、生成产品原型Prototype （线框图)
16
UI设计基本流程
二、生成产品模型Mock-up （效果图）
17
UI设计基本流程
三、生成HTML/CSS页面 Demo就是按照原型和模型用 HTML(XHTML)/CSS/JavaScript等等前端技 术实现出来，以便后端的开发工程师可以接 手编码。
4
UI设计基本概念
交互设计
设计软件的操作流程，树状结构，软件的结构与操作规范等。
用户研究
测试交互设计的合理性以及图形设计的美观性。
界面设计
即图形设计，国内目前大部分UI工作者都是从事这个行业。 也有人称之为美工，但实际上不是单纯意义上的美术工人， 而是软件产品的产品外形设计师。
5
二 UI设计基本流程
31
UI界面用户体验设计原则与规范
（1）
（2）
（3）
（4）
（5）
32
UI界面用户体验设计原则与规范
系统响应时间 1.响应时间长度 界面设计:
0-10 秒 鼠 标 显 示 成 为 沙 漏 ； 10-18 秒 由微帮助来显示处理进度 ； 18 秒以上 显示处理窗口，或显示进度条 一个长时间的处理完成时 应给予完成警告 信息 ；