河南中医药大学：《Web前端开发》课程教学资源（项目实训）第三讲 原型与交互设计

Web前端开发项目实训 第3讲:原型与交互设计 18337149582/ hunlei@51xueweb cn 201712

Web前端开发项目实训 第3讲：原型与交互设计 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12 1

2 本讲主要内容 口什么是原型设计? 口为什么要做原型设计? 口在原型设计阶段需要注意什么? 口如何去做原型设计?

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 本讲主要内容  什么是原型设计？  为什么要做原型设计？  在原型设计阶段需要注意什么？  如何去做原型设计？ 2

3 1什么是原型设计? ¤原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的 方式。就本质而言,原型是一种沟通工具 原型设计是有基础的,建立在需求调硏,项目设计的基础上 原型设计的最终应该是真实系统的模型

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.什么是原型设计？ 3  原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的 方式。就本质而言，原型是一种沟通工具 ◼ 原型设计是有基础的，建立在需求调研，项目设计的基础上 ◼ 原型设计的最终应该是真实系统的模型

4 1什么是原型设计? ¤原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的 方式。就本质而言,原型是一种沟通工具 原型设计是有基础的,建立在需求调硏,项目设计的基础上 原型设计的最终应该是真实系统的模型 高保真 低保真 Fidelity mocks 故事板Lo6 delity mock 需求 搜集 Storyboards Needfinding

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.什么是原型设计？ 4  原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的 方式。就本质而言，原型是一种沟通工具 ◼ 原型设计是有基础的，建立在需求调研，项目设计的基础上 ◼ 原型设计的最终应该是真实系统的模型

5 2、为什么要做原型设计? 口做原型设计的一个核心原因就是要和用户进行项目沟通 ¤整体上考虑软件功能如何实现,并逐渐的填充软件的细节

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2、为什么要做原型设计？ 5  做原型设计的一个核心原因就是要和用户进行项目沟通  整体上考虑软件功能如何实现，并逐渐的填充软件的细节

6 3、在原型设计阶段需要注意什么? 口要把功能表达清楚 口一定要快速迭代,快速修改

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 3、在原型设计阶段需要注意什么？ 6  要把功能表达清楚  一定要快速迭代，快速修改

7 4、如何去做原型设计? axure R 框架与逻辑处理 细节与艺术处理

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 4、如何去做原型设计？ 7 框架与逻辑处理 细节与艺术处理

8 4、如何去做原型设计? 口 Axure rp下载与汉化 口官网https://www.axure.com 口汉化:htp/WWWlaxure.com/menupage/download.html

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 4、如何去做原型设计？ 8  Axure RP下载与汉化  官网：https://www.axure.com  汉化： http://www.iaxure.com/menupage/download.html

9 4、如何去做原型设计? 口一个做好的原型设计 nhttp://www.jianshu.com/p/db094ce7cba5

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 4、如何去做原型设计？ 9  一个做好的原型设计：  http://www.jianshu.com/p/db094ce7cba5

02 Manage System,…属性 常规 自定义 4、如何去做原型设计?m a Photoshop 类型:类型均为文件夹 位置 全部位于E:W01. SONAta 大小 89GB5,256,978,129字节 占用空间:489GB⑤5,258,121,216字节 回只读a 高级⑩). □隐藏 确定一取消应用

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 4、如何去做原型设计？ 10  Photoshop