书籍详情

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

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

作者:刘源 著

出版社:电子工业出版社

出版时间:2020-09-01

ISBN:9787121394478

定价:¥89.80

购买这本书可以去
内容简介

  ?\t该系列图书通过采用软件知识点+行业基础+实战的方式讲解。?\t案例与基础知识相融合,快速带领用户掌握网站UI产品原型设计制作方法和技巧?\t分别使用流行的Axure和Adobe XD完成网站产品的制作,与实际工作接轨?\t在每章的最后为读者提供一个操作案例,供读者练习使用。?\t全书所有案例配教学视频,有助读者学习。?\t全书的案例极具针对性,便于读者查找学习。
作者简介
  刘源,男,从事App项目开发多年,有丰富的策划与制作能力。能熟练完成草图、流程图和高保真原型的制作。对APP设计中的原型策划有独特的见解。曾参与多款APP项目的研发与制作。能够熟练掌握Axure RP、Photoshop、Adobe XD等设计软件的使用。
目录
第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
猜您喜欢

读书导航