第四章 用户体验设计.pptx

用户体验设计互联网产品设计：用户体验与UI交互（附微课视频）

目录CONTENT4.1产品功能信息架构4.2交互逻辑流程图4.3纸模原型

学习目标（2）理解产品功能信息架构的作用。（5）理解交互逻辑流程图在产品设计中的作用，重点掌握交互逻辑流程图的形态。（6）重点掌握交互逻辑流程图的多种绘图形式，在实际产品设计中应用。（3）了解产品功能信息架构设计需要考虑的因素，重点掌握产品功能信息架构的构建方式和形态。（4）重点理解产品功能信息架构的任务流程和实现技巧。（1）理解用户体验设计的核心和意义。（7）掌握原型设计的四大排版原则。（8）掌握纸模原型设计的步骤和测试方法。（9）真正理解用户体验设计在互联网产品设计中的核心地位。

4.1产品功能信息架构

产品功能信息架构的作用在进行产品规划、产品设计时，产品功能信息架构可以让设计师拥有相对清晰的思路，也让用户在体验产品时，可以更加快速地获取信息，收货更好的用户体验。

产品功能信息架构的形态-产品功能信息架构设计需要考虑的因素2134考虑功能之间的关系考虑功能的相似性考虑功能的使用频次考虑系统的扩展性

产品功能信息架构的形态-产品功能信息架构的构建方式①自上而下

产品功能信息架构的形态-产品功能信息架构的构建方式②自下而上

产品功能信息架构的形态-产品功能信息架构的构建方式③综合运用

产品功能信息架构的形态-产品功能信息架构的形态介绍①层级结构

产品功能信息架构的形态-产品功能信息架构的形态介绍②矩阵结构

产品功能信息架构的形态-产品功能信息架构的形态介绍③自然结构

产品功能信息架构的形态-产品功能信息架构的形态介绍④线性结构

产品功能信息架构的实现-产品功能信息架构的任务流程

产品功能信息架构的实现-选择高效的绘图软件

产品功能信息架构的实现-选择高效的绘图软件

产品功能信息架构的实现-产品功能信息架构的实现技巧①按照总分结构确定关键的一级节点

产品功能信息架构的实现-产品功能信息架构的实现技巧②绘制单个一级节点模块的信息架构图，之后逐个完善

产品功能信息架构的实现-产品功能信息架构的实现技巧③若某个页面在不同的一级节点内出现，应明确标识

4.2交互逻辑流程图

交互逻辑流程图的作用用户行为路径图

交互逻辑流程图的作用交互逻辑流程图

交互逻辑流程图的形态-交互逻辑流程图的绘制阶段（1）了解目标用户（2）尽量绘制在一个页面内（3）具有可读性（4）使用标准的交互逻辑流程图组件（5）明确2W1H要素

交互逻辑流程图的形态-时序图某医院线上预约挂号的交互逻辑流程图

交互逻辑流程图的形态-流程图（1）单线程流程图

交互逻辑流程图的形态-流程图（2）泳道流程图

交互逻辑流程图的实现-交互逻辑流程图的组成界面动作条件一个矩形代表一个界面，在这个流程中用户经过两个界面（登录页和首页），非界面的内容不要出现。界面之间要加上一个触发动作，该动作需要标示出来。一个动作之后可能有多种（是/否）结果。交互逻辑流程图的组成

交互逻辑流程图的实现-交互逻辑流程图的多种绘图形式顺序/判断交互逻辑流程图

交互逻辑流程图的实现-交互逻辑流程图的多种绘图形式多Tab界面交互逻辑流程图

交互逻辑流程图的实现-交互逻辑流程图的多种绘图形式非线性中心化信息交互逻辑流程图

4.3纸模原型

原型设计四大排版原则-亲密性原则

原型设计四大排版原则-对齐原则对齐原则指的是页面上的任何独立项都应当和页面上其他的某个独立项存在视觉上的联系，人的视觉习惯是喜欢看到有序的事物，这样阅读比较舒适且能快速获取信息。

原型设计四大排版原则-对比与重复原则

纸模原型设计-纸模原型绘制工具

纸模原型设计-纸模原型设计参考步骤原型草图设计整体局部原形测试按钮点击/触摸页面切换局部模块的整体展示测试软件的选择功能结构导航菜单布局信息架构的设计功能上的交互设计完善

纸模原型设计-纸模原型要做到什么程度一般来说，纸模原型阶段不需要进行视觉设计，因此过于细节的内容在纸模阶段不需要明确画出，只需要表明产品的核心功能、每个控件的大概位置、整体界面的布局等即可。

可用性测试-测试方法与流程（1）原型测试方法常见的原型测试软件有POP、交互、Mockup等。这几款都比较容易上手，可以快速对原型进行交互可用性测试，是快速App原型测试和分享的平台。

可用性测试-测试方法与流程（2）原型测试流程下载软件拍摄原型导入图片至软件一键分享保存并演示编辑事件添加交互

可用性测试-原型测试与思考（1）原型测试演示

可用性测试-原型测试与思考（2）测试完成后的思考和感悟一测试是非常重要的，但是对于不是很成熟的产品，功能需求的迭代上线才是头等大事。二原型测试要有明确且唯一的目标。三要进行多次测试，保证交互流程的顺畅。四要善于分享测试结果，遇到问题及时