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