? 该系列图书通过采用软件知识点+行业基础+实战的方式讲解。? 案例与基础知识相融合，快速带领用户掌握网站UI产品原型设计制作方法和技巧? 分别使用流行的Axure和Adobe XD完成网站产品的制作，与实际工作接轨? 在每章的最后为读者提供一个操作案例，供读者练习使用。? 全书所有案例配教学视频，有助读者学习。? 全书的案例极具针对性，便于读者查找学习。

随着网络平台上各种软件的出现，软件的质量参差不齐。为了保证设计出来的软件符合用户的审美 和操作习惯，很多设计团队在软件开发之初，通过搭建产品原型来把控该软件的设计方向。 本书主要通过理论知识与案例操作相结合的方式，向读者介绍使用Axure RP 9和Adobe XD创建产品 原型时所需的各种设计规范、功能和操作技巧。 内容安排 本书共分为7章，下面分别是各个章节的具体内容。 第1章 了解网站产品原型。本章主要介绍了原型设计相关的理论知识，包括常见的互联网产品开发流 程、互联网产品开发人员配置、互联网产品原型的应用、互联网产品原型的设计流程、了解网站产品原 型的分类，以及原型设计常用的工具等内容。这些知识可以帮助读者初步了解原型设计及相关的一些软 件，为更深入的学习建立良好的开端。 第2章 了解Axure RP 9。本章主要介绍了如何使用Axure RP 9，包括初识Axure RP 9、Axure RP 9的工 作界面、页面设置、使用Axure RP 9的元件库、Axure RP 9中的基本交互效果、Axure RP 9中的高级交互 效果、使用函数、查看原型和发布与测试等内容。通过本章的学习，读者能掌握Axure RP 9的使用方法和 技巧。 第3章 了解Adobe XD。本章主要向读者介绍了使用Adobe XD的基础知识，包括Adobe XD的简介、 Adobe XD的基础工作流程、Adobe XD的基础操作、Adobe XD的基本工具、使用Adobe XD完成原型和使 用Adobe XD导出文档。通过本章的学习，读者知道如何使用Adobe XD软件创建原型。 第4章 设计制作PC端网页产品原型。本章主要向读者介绍PC端网页产品原型设计的相关基础知识和 操作技巧，包括PC端网页产品原型概述、PC端网页设计规范、PC端网页配色设计、PC端网页布局方式、 PC端网页交互效果和PC端网页适配等内容。 第5章 设计制作Android系统产品原型。本章主要向读者介绍了Android系统产品原型的设计规范和创 建方式，以及Axure RP 9一些常用的操作技巧，包括Android系统的原型设计、设计Android系统原型的流 程、Android系统的设计规范、Android系统的文字规范、Android系统的页面布局、Android系统的版式设 计和Android系统的页面适配等内容。 第6章 设计制作iOS系统产品原型。iOS系统界面也是产品原型设计的重要组成部分，本章主要介绍 了iOS系统产品原型的设计规范和制作方法，包括设计iOS系统的原型页面、iOS系统设计规范、iOS系统 的文字规范、iOS系统的图标设计规范、iOS系统的边距设计规范、iOS系统的图片设计规范，以及iOS系 统的页面适配等内容。 第7章 了解标注与输出。本章主要介绍了如何标注与输出产品页面，包括Android系统界面的输出、 iOS系统界面的输出和项目输出等内容。通过本章的学习，读者能够掌握产品页面的标注、切图和输出， 并能够应用到实际工作中去。 本书特点 通俗易懂的语言 本书采用通俗易懂的语言，确保读者能够理解并掌握相应的功能与操作。 基础知识与实战案例结合 本书采用基础知识和实战案例相结合的讲解模式。书中所使用的案例都具有很强的商业性和专业 性，不仅能够帮助读者强化知识点，还对开拓思路和激发创造性有很大的帮助。 技巧和知识点的归纳总结 本书在基础知识和实战案例的讲解过程中列出了大量的提示和技巧，这些信息都是结合作者长期的原型设计经验与教学经验归纳出来的，可以帮助读者更准确地理解和掌握相关的知识点和操作技巧。 资源包辅助学习 为了拓展读者的学习渠道，增强读者的学习兴趣，本书配有教学资源包。教学资源包提供了本书所有实例的相关素材和源文件，以及书中所有实例的教学视频，使读者可以跟着本书做出相应的效果，并能够快速应用于实际工作中。

第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