App草图+流程图+交互原型设计教程

第1章　了解网站产品原型

1．1 互联网产品开发流程 ????????????????????????????????????????????????1

1．1．1 需求分析 ????????????????????????????????????????????????????????????????????????????????????．1

1．1．2 交互设计 ????????????????????????????????????????????????????????????????????????????????????．2

1．1．3 视觉设计 ????????????????????????????????????????????????????????????????????????????????????．5

1．1．4 技术开发 ????????????????????????????????????????????????????????????????????????????????????．6

1．1．5 发布维护 ????????????????????????????????????????????????????????????????????????????????????．6

1．2 互联网产品开发人员配置 ????????????????????????????????????7

1．2．1 产品经理 ????????????????????????????????????????????????????????????????????????????????????．7

1．2．2 产品助理 ????????????????????????????????????????????????????????????????????????????????????．8

1．2．3 设计师 ??????????????????????????????????????????????????????????????????????????????????????????．8

1．2．4 产品运营 ????????????????????????????????????????????????????????????????????????????????????．9

1．2．5 产品开发 ????????????????????????????????????????????????????????????????????????????????????．9

1．2．6 市场营销 ??????????????????????????????????????????????????????????????????????????????????．10

1．3 互联网产品原型的应用 ????????????????????????????????????．11

1．3．1 互联网产品原型设计 ????????????????????????????????????????????????????．11

1．3．2 互联网产品原型的作用 ??????????????????????????????????????????????．12

1．3．3 互联网产品原型的重要性 ????????????????????????????????????????．13

1．3．4 互联网产品原型的设计技巧 ??????????????????????????????????．13

1．4 互联网产品原型的设计流程 ??????????????????????????14

1．4．1 确定整体结构 ??????????????????????????????????????????????????????????????????????．14

1．4．2 确定排版布局 ??????????????????????????????????????????????????????????????????????．15

1．4．3 确定功能模块 ??????????????????????????????????????????????????????????????????????．16

1．4．4 设计制作原型稿 ????????????????????????????????????????????????????????????????．17

1．4．5 设计交互效果 ??????????????????????????????????????????????????????????????????????．18

1．4．6 调试交互效果 ??????????????????????????????????????????????????????????????????????．20

1．5 了解网站产品原型的分类 ????????????????????????????????20

1．5．1 低保真原型 ????????????????????????????????????????????????????????????????????????????．20

1．5．2 高保真原型 ????????????????????????????????????????????????????????????????????????????．22

1．5．3 交互动画原型 ??????????????????????????????????????????????????????????????????????．24

1．6 原型设计的常用工具 ????????????????????????????????????????????26

1．6．1 Axure RP ??????????????????????????????????????????????????????????????????????????????????．27

1．6．2 Adobe XD ????????????????????????????????????????????????????????????????????????????????．27

1．6．3 墨刀 ??????????????????????????????????????????????????????????????????????????????????????????????．28

1．7 本章小结 ??????????????????????????????????????????????????????????????????????????29

第2章　了解Axure RP 9

2．1 初识Axure RP 9 ??????????????????????????????????????????????????????30

2．1．1 关于Axure RP 9 ????????????????????????????????????????????????????????????????．30

2．1．2 软件下载与安装 ????????????????????????????????????????????????????????????????．31

2．2 Axure RP 9的工作界面 ??????????????????????????????????????32

2．2．1 了解Axure RP 9 的工作界面 ????????????????????????????????．33

2．2．2 自定义工具栏 ??????????????????????????????????????????????????????????????????????．35

2．3 页面设置 ??????????????????????????????????????????????????????????????????????????36

2．3．1 页面基本属性 ??????????????????????????????????????????????????????????????????????．36

实战练习01――使用“页面”面板 ??????????????????????????????．36

2．3．2 页面自适应 ????????????????????????????????????????????????????????????????????????????．39

2．4 使用Axure RP 9的元件库 ??????????????????????????????40

2．4．1 Default 元件 ??????????????????????????????????????????????????????????????????????????．40

2．4．2 Flow 元件 ????????????????????????????????????????????????????????????????????????????????．40

2．4．3 Icons 元件 ????????????????????????????????????????????????????????????????????????????????．40

2．4．4 使用“动态面板” ????????????????????????????????????????????????????????????．41

实战练习02――使用“动态面板”制作轮播图片 ??．41

2．4．5 使用中继器 ????????????????????????????????????????????????????????????????????????????．45

实战练习03――使用“中继器”元件展示商品 ??????．45

2．4．6 下载和导入元件库 ??????????????????????????????????????????????????????????．48

2．5 Axure RP 9中的基本交互效果????????????????????50

2．5．1 交互事件 ??????????????????????????????????????????????????????????????????????????????????．50

2．5．2 链接 ??????????????????????????????????????????????????????????????????????????????????????????????．51

2．5．3 元件 ??????????????????????????????????????????????????????????????????????????????????????????????．51

2．6 Axure RP 9中的高级交互效果????????????????????51

2．6．1 设置条件 ??????????????????????????????????????????????????????????????????????????????????．52

2．6．2 添加变量 ??????????????????????????????????????????????????????????????????????????????????．52

实战练习04――使用全局变量设置欢迎页面 ??????．53

2．6．3 使用表达式 ????????????????????????????????????????????????????????????????????????????．56

2．7 使用函数 ??????????????????????????????????????????????????????????????????????????57

2．7．1 中继器/ 数据集 ????????????????????????????????????????????????????????????????．58

2．7．2 元件函数 ??????????????????????????????????????????????????????????????????????????????????．58

2．7．3 指针函数 ??????????????????????????????????????????????????????????????????????????????????．59

2．7．4 窗口函数 ??????????????????????????????????????????????????????????????????????????????????．59

实战练习05――使用窗口函数显示隐藏元件 ??????．60

2．7．5 页面函数 ??????????????????????????????????????????????????????????????????????????????????．62

2．7．6 数字函数 ??????????????????????????????????????????????????????????????????????????????????．62

2．7．7 字符串函数 ????????????????????????????????????????????????????????????????????????????．63

实战练习06――使用字符串函数设置关键字搜索 ??．64

2．7．8 数学函数 ??????????????????????????????????????????????????????????????????????????????????．68

2．7．9 时间函数 ??????????????????????????????????????????????????????????????????????????????????．69

实战练习07――使用时间函数显示实时时间 ??????．70

2．8 查看原型 ??????????????????????????????????????????????????????????????????????????73

2．8．1 快速预览 ??????????????????????????????????????????????????????????????????????????????????．74

2．8．2 预览选项 ??????????????????????????????????????????????????????????????????????????????????．74

2．8．3 生成HTML 文件 ??????????????????????????????????????????????????????????????．75

2．8．4 生成Word 说明书 ??????????????????????????????????????????????????????．77

2．9 发布与测试 ????????????????????????????????????????????????????????????????????78

2．10 本章小结 ??????????????????????????????????????????????????????????????????????79

第3章　了解Adobe XD

3．1 Adobe XD的简介 ????????????????????????????????????????????????????80

3．1．1 初识Adobe XD ??????????????????????????????????????????????????????????????????．80

3．1．2 下载和安装Adobe XD ????????????????????????????????????????????????．80

3．1．3 了解主页屏幕 ??????????????????????????????????????????????????????????????????????．81

3．1．4 工作界面结构 ??????????????????????????????????????????????????????????????????????．82

3．1．5 使用资源 ??????????????????????????????????????????????????????????????????????????????????．83

3．1．6 使用辅助工具 ??????????????????????????????????????????????????????????????????????．84

3．2 Adobe XD的基础工作流程 ????????????????????????????86

3．3 Adobe XD的基础操作 ????????????????????????????????????????86

3．3．1 新建、打开和存储文件 ??????????????????????????????????????????????．86

3．3．2 使用画板 ??????????????????????????????????????????????????????????????????????????????????．87

实战练习01――新建和存储Adobe XD 文件 ????????．88

3．3．3 导入对象 ??????????????????????????????????????????????????????????????????????????????????．89

3．3．4 创建重复元素 ??????????????????????????????????????????????????????????????????????．90

3．3．5 对象的操作 ????????????????????????????????????????????????????????????????????????????．91

3．4 Adobe XD的基本工具 ????????????????????????????????????????95

3．4．1 绘图工具 ??????????????????????????????????????????????????????????????????????????????????．95

3．4．2 文本工具 ??????????????????????????????????????????????????????????????????????????????????．95

3．4．3 使用图层 ??????????????????????????????????????????????????????????????????????????????????．96

3．4．4 使用布尔运算 ??????????????????????????????????????????????????????????????????????．97

3．4．5 蒙版技术 ??????????????????????????????????????????????????????????????????????????????????．98

实战练习02――使用蒙版遮罩图像 ??????????????????????????????．98

3．4．6 设置描边、填充、投影和模糊 ????????????????????????．100

3．5 使用Adobe XD完成原型 ????????????????????????????．101

3．5．1 链接页面 ??????????????????????????????????????????????????????????????????????????????．101

3．5．2 设置原型首屏内容 ??????????????????????????????????????????????????????．102

3．5．3 使用语音命令创建原型 ??????????????????????????????????????????．102

3．6 使用Adobe XD导出文档 ????????????????????????????．103

3．7 本章小结 ????????????????????????????????????????????????????????????????????．104

第4章　设计制作PC端网页产品原型

4．1 PC端网页产品原型概述 ????????????????????????????．105

4．2 PC端网页设计规范 ????????????????????????????????????????．106

4．2．1 网页尺寸设计规范 ??????????????????????????????????????????????????????．106

4．2．2 网页文本设计规范 ??????????????????????????????????????????????????????．109

4．2．3 网页图像选择规范 ??????????????????????????????????????????????????????????116

实战练习01――制作网页低保真原型 ????????????????????????117

4．3 PC端网页配色设计 ????????????????????????????????????????．121

4．3．1 明确主色 ??????????????????????????????????????????????????????????????????????????????．121

4．3．2 明确背景色 ????????????????????????????????????????????????????????????????????????．122

4．3．3 确定辅色 ??????????????????????????????????????????????????????????????????????????????．124

4．3．4 协调点缀色 ????????????????????????????????????????????????????????????????????????．125

4．3．5 搭配字体色 ????????????????????????????????????????????????????????????????????????．127

4．4 PC端网页布局方式 ????????????????????????????????????????．128

4．4．1 布局方式 ??????????????????????????????????????????????????????????????????????????????．128

4．4．2 分列布局 ??????????????????????????????????????????????????????????????????????????????．131

4．4．3 网页构图 ??????????????????????????????????????????????????????????????????????????????．133

实战练习02――制作网页高保真原型 ????????????????????．133

4．5 PC端网页交互效果 ????????????????????????????????????????．136

4．5．1 页面的链接效果 ????????????????????????????????????????????????????????????．136

4．5．2 文字的描述效果 ????????????????????????????????????????????????????????????．139

实战练习03――制作网页交互效果 ??????????????????????????．144

4．6 PC端网页适配??????????????????????????????????????????????????????．149

4．6．1 适配的方式方法 ????????????????????????????????????????????????????????????．150

4．6．2 适配时需要注意的点 ????????????????????????????????????????????????．150

4．7 本章小结 ????????????????????????????????????????????????????????????????????．150

第5章　设计制作Android系统产品原型

5．1 Android系统的原型设计 ????????????????????????????．151

5．1．1 Android 系统的碎片化 ????????????????????????????????????????????．151

5．1．2 Android 系统的原型优势 ??????????????????????????????????????．152

5．2 设计Android系统原型的流程 ????????????????．156

5．2．1 确定框架 ??????????????????????????????????????????????????????????????????????????????．156

5．2．2 制定全局 ??????????????????????????????????????????????????????????????????????????????．157

5．2．3 绘制页面 ??????????????????????????????????????????????????????????????????????????????．157

5．2．4 输出原型 ??????????????????????????????????????????????????????????????????????????????．158

5．3 Android系统的设计规范 ????????????????????????????．159

5．3．1 设计单位 ??????????????????????????????????????????????????????????????????????????????．159

5．3．2 页面尺寸 ??????????????????????????????????????????????????????????????????????????????．160

5．3．3 组件尺寸 ??????????????????????????????????????????????????????????????????????????????．161

5．3．4 图标尺寸 ??????????????????????????????????????????????????????????????????????????????．161

5．3．5 间距规范 ??????????????????????????????????????????????????????????????????????????????．163

实战练习01――设计制作App 页面的低

保真原型 ??????????????????????????????????????????????????????????????????????????????????????????????．164

5．4 Android系统的文字规范 ????????????????????????????．168

5．5 Android系统的页面布局 ????????????????????????????．169

5．5．1 列表式布局 ????????????????????????????????????????????????????????????????????????．169

5．5．2 陈列式布局 ????????????????????????????????????????????????????????????????????????．170

5．5．3 宫格式布局 ????????????????????????????????????????????????????????????????????????．170

5．5．4 卡片式布局 ????????????????????????????????????????????????????????????????????????．171

实战练习02――设计制作App 的高保真原型 ????．171

5．6 Android系统的版式设计 ????????????????????????????．177

实战练习03――设计制作App 页面的交互效果 ??．178

5．7 Android系统的页面适配 ????????????????????????????．185

5．7．1 适配方式 ??????????????????????????????????????????????????????????????????????????????．185

5．7．2 整体页面适配 ??????????????????????????????????????????????????????????????????．185

5．7．3 图标适配 ??????????????????????????????????????????????????????????????????????????????．185

5．7．4 文本适配 ??????????????????????????????????????????????????????????????????????????????．186

5．7．5 图片适配 ??????????????????????????????????????????????????????????????????????????????．186

5．8 本章小结 ????????????????????????????????????????????????????????????????????．187

第6章　设计制作iOS系统产品原型

6．1 设计iOS系统的原型页面 ????????????????????????????．188

6．1．1 确定设计尺寸 ??????????????????????????????????????????????????????????????????．188

6．1．2 指定页面布局 ??????????????????????????????????????????????????????????????????．188

6．1．3 定义内容区域 ??????????????????????????????????????????????????????????????????．189

6．1．4 遵循设计规范 ??????????????????????????????????????????????????????????????????．189

6．2 iOS系统设计规范 ??????????????????????????????????????????????．190

6．2．1 设计单位 ??????????????????????????????????????????????????????????????????????????????．190

6．2．2 设计尺寸 ??????????????????????????????????????????????????????????????????????????????．190

6．2．3 组件尺寸 ??????????????????????????????????????????????????????????????????????????????．191

6．3 iOS系统的文字规范 ????????????????????????????????????????．191

6．3．1 字体 ??????????????????????????????????????????????????????????????????????????????????????????．192

6．3．2 字号 ??????????????????????????????????????????????????????????????????????????????????????????．192

6．3．3 字体颜色 ??????????????????????????????????????????????????????????????????????????????．193

6．3．4 字重 ??????????????????????????????????????????????????????????????????????????????????????????．193

实战练习01――设计iOS 系统App 的低

保真原型 ??????????????????????????????????????????????????????????????????????????????????????????????．194

6．4 iOS系统的图标设计规范 ????????????????????????????．198

6．5 iOS系统的边距设计规范 ????????????????????????????．200

6．5．1 全局边距 ????????????????????????????????????????????????????????????????????????????????．200

6．5．2 卡片边距 ????????????????????????????????????????????????????????????????????????????????．201

6．5．3 内容间距 ????????????????????????????????????????????????????????????????????????????????．201

实战练习02――设计iOS 系统App 的高

保真原型 ??????????????????????????????????????????????????????????????????????????????????????????????．202

6．6 iOS系统的图片设计规范 ????????????????????????????．206

6．6．1 图片比例 ??????????????????????????????????????????????????????????????????????????????．206

6．6．2 图片格式 ??????????????????????????????????????????????????????????????????????????????．208

实战练习03――设计iOS 系统App 的

交互效果 ??????????????????????????????????????????????????????????????????????????????????????????????．208

6．7 iOS系统的页面适配 ????????????????????????????????????????．212

6．7．1 向下适配 ??????????????????????????????????????????????????????????????????????????????．213

6．7．2 向上适配 ??????????????????????????????????????????????????????????????????????????????．214

6．8 本章小结 ????????????????????????????????????????????????????????????????????．216

第7章　了解标注与输出

7．1 Android系统界面的输出 ????????????????????????????．217

7．1．1 Android 系统界面标注 ????????????????????????????????????????．217

实战练习01――使用PxCook 标注效果图 ??????????．218

7．1．2 Android 系统界面切图 ????????????????????????????????????????．219

7．2 iOS系统界面的输出 ??????????????????????????????????????．224

7．2．1 iOS 系统界面标注 ????????????????????????????????????????????????????．224

7．2．2 iOS 系统界面切图 ????????????????????????????????????????????????????．226

实战练习02――使用Adobe XD 导出资源 ??????????．228

7．3 项目输出 ????????????????????????????????????????????????????????????????????．229

7．4 本章小结 ????????????????????????????????????????????????????????????????????．230