互联网产品设计思维与实践

序言

江苏传智播客教育科技股份有限公司（简称传智播客）是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。

“黑马程序员”的学员多为大学毕业后，想从事IT行业，但各方面条件还不成熟的年轻人。“黑马程序员”的学员筛选制度非常严格，包括了严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。

自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研三个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，有针对性地出版了计算机系列教材80多种，制作教学视频数十套，发表各类技术文章数百篇。

“黑马程序员”不仅斥资研发IT系列教材，还为高校师生提供以下配套学习资源与服务。

为大学生提供的配套服务

1. 请登录“高校学习平台”http://yx.ityxb.com，免费获取海量学习资源，帮助高校学生解决学习问题。

2. 针对高校学生在学习过程中存在的压力等问题，我们还面向大学生量身打造了“IT技术女神”——“播妞学姐”，可提供教材配套源码和习题答案，以及更多IT学习资源，同学们快来关注“播妞学姐”的微信公众号：boniu1024。

“播妞学姐”微信公众号

为教师提供的配套服务

针对高校教学，“黑马程序员”为IT系列教材精心设计了“教案+授课资源+考试系统+题库+教学辅助案例”的系列教学资源，高校老师请登录“高校教辅平台”http://yx.ityxb.com或关注码大牛老师微信/QQ：2011168841，获取教材配套资源，也可以扫描下方二维码，加入专为IT教师打造的师资服务平台——“教学好助手”，获取最新教师教学辅助资源的相关动态。

互联网产品设计思维与实践

随着移动互联技术的飞速发展，“互联网+”时代已经悄然到来，越来越多的企业投入互联网的浪潮中，互联网产品的种类也琳琅满目——淘宝、微信、支付宝、爱奇艺……互联网产品在给人们带来便利的同时，也在改变着人们的生活方式。在工作中，与互联网产品相关的岗位种类繁多——产品经理、交互设计、UI设计……面对如此热门的行业需求，许多其他行业的从业者也纷纷加入到互联网产品的队伍中。

为什么要学习本书

虽然市面上有很多关于互联网产品的书籍，但大多偏重理论，对于零基础或者基础偏弱的产品从业者来说，学完这些理论后仍然是一头雾水。本书通过理论和项目实践相结合的方法，帮助想从事互联网产品工作的人从入门到实践，真正摸透这个行业！

如何使用本书

本书针对互联网产品设计和交互领域的从业人员，以理论+案例的形式组织知识点。本书以互联网产品的实现流程为主线，详细讲解了产品基础、产品设计工具、需求、产品规划、产品原型、交互设计、产品迭代等知识，同时以一个互联网产品综合项目贯穿全书，力求让不同层次的读者都能全面、系统、快速地掌握产品设计的相关知识，真正具备设计互联网产品的实战能力。

本书分为8章，其中第1章介绍互联网产品基础知识，第2章介绍Axure工具的使用，第3～7章介绍产品的实现，第8章介绍产品迭代。各章的主要内容如下。

 第1章介绍互联网产品的相关知识，包括什么是互联网产品、互联网产品经理的工作内容、常用的互联网产品设计工具以及互联网产品设计流程等。

 第2章介绍Axure工具的使用方法。

 第3章介绍产品立项前的知识，包括需求获取、需求分析、需求文档等。

 第4章介绍产品规划，包括产品结构图和产品业务流程图。

 第5章介绍低保真原型图设计和产品需求文档，包括低保真原型图绘制规范、绘制方法和产品需求文档撰写方法。

 第6章介绍交互设计，包括交互设计概述、Axure交互设计基础等。

 第7章介绍设计常识和产品高保真原型图制作。

 第8章介绍产品迭代，包括产品迭代流程、网站结构等。

本书以综合项目贯穿全书，语言通俗易懂，内容丰富，知识涵盖面广，非常适合互联网产品设计的初学者、互联网产品经理以及互联网产品设计爱好者阅读，也可作为大学选修课教材。

意见反馈

本书的编写工作由传智播客教育科技股份有限公司黑马程序员团队完成，主要参与人员有吕春林、王哲、孟方思等，本团队全体人员在接近一年的编写过程中付出了辛勤的劳动。

尽管我们尽了最大的努力，本书中仍然难免有不妥之处，欢迎各界专家和读者朋友提出宝贵意见，我们将不胜感激。您可以通过电子邮件与我们取得联系。我们的电子邮件是[email protected]。

黑马程序员

2019年6月于北京 前言互联网产品设计思维与实践

目录

第1章认识互联网产品1

1.1产品概述1

1.1.1什么是产品1

1.1.2互联网产品3

1.1.3互联网产品的分类4

1.2产品经理5

1.3互联网产品经理的工作内容7

1.3.1图形产出7

1.3.2产品管理10

1.3.3沟通协调11

1.4产品设计行业术语11

1.5产品工具13

1.5.1Axure RP13

1.5.2XMind14

1.5.3Visio14

1.6互联网产品的设计流程16

1.6.1产品构想16

1.6.2产品需求分析和论证17

1.6.3产品设计18

1.6.4开发和测试19

1.6.5产品上线、运营和迭代20

阶段案例: 洗刷刷App产品设计流程21

第2章Axure工具基本操作23

2.1软件基础23

2.2Axure工作界面介绍24

2.3常用元件28

2.3.1Default元件库28

2.3.2Flow元件库30

2.3.3Icons元件库312.4Axure的基本用法31

2.4.1Axure的基本操作31

2.4.2元件的基本操作38

阶段案例: 载入自定义元件库48

2.4.3母版的使用50

目录互联网产品设计思维与实践第3章需求53

3.1需求概述53

3.1.1什么是需求53

3.1.2需求的本质54

3.2需求获取54

3.2.1用户访谈54

阶段案例: 用户访谈记录表56

3.2.2调查问卷57

阶段案例: 如何设计调查问卷58

3.2.3在竞品分析中获取需求59

阶段案例: 如何编写竞品分析报告63

3.3需求分析64

3.4需求梳理65

3.4.1需求筛选65

3.4.2产品可行性分析66

3.5商业需求文档68

3.5.1商业需求文档概述68

3.5.2商业需求文档的汇报对象68

3.5.3商业需求文档的用途69

3.5.4商业需求文档的内容69

阶段案例: 如何撰写商业需求文档70

3.6市场需求文档71

3.6.1市场需求文档概述71

3.6.2市场需求文档的作用71

3.6.3常用的两大产品分析法72

阶段案例: 如何撰写市场需求文档73

第4章产品规划79

4.1产品结构图79

4.1.1产品结构图简介79

4.1.2产品结构图制作软件——XMind81

阶段案例: 产品结构图绘制86

4.2产品流程图90

4.2.1产品流程图简介90

4.2.2业务流程图绘制92

阶段案例: 业务流程图绘制96

第5章低保真原型图设计和PRD104

5.1低保真原型图绘制规范104

5.2洗刷刷App低保真原型图制作与分析106

5.2.1首页功能分析107

阶段案例: 洗刷刷App首页低保真原型图制作108

5.2.2积分商城功能分析113

5.2.3登录/注册功能分析113

5.3产品需求文档114

阶段案例: 撰写产品需求文档115

第6章交互设计117

6.1认识交互设计117

6.1.1什么是交互117

6.1.2交互设计概述118

6.1.3交互设计五要素118

6.1.4交互设计原则119

6.1.5页面提示语120

6.2Axure交互设计基础121

6.2.1事件121

6.2.2用例122

6.2.3动作122

6.2.4交互样式124

阶段案例: 鼠标悬停、单击效果制作125

6.3动态面板130

6.3.1动态面板的创建方式130

6.3.2动态面板的使用131

阶段案例: 焦点图切换134

第7章设计常识和产品高保真原型图144

7.1设计常识144

7.1.1设计构图144

7.1.2设计色彩153

7.2洗刷刷App高保真原型图制作159

7.2.1界面设计159

7.2.2切图160

7.2.3移动设备参数和原型尺寸162

7.2.4创建原型模板164

阶段案例: 洗刷刷App高保真原型图模板165

7.2.5高保真页面交互效果167

阶段案例: 首页高保真交互效果168

阶段案例: “积分商城”页面上下滑动效果177

7.2.6在真实移动设备中预览高保真原型图179

阶段案例: 在移动设备上预览洗刷刷App高保真原型图179

第8章产品迭代182

8.1产品迭代概述182

8.1.1什么是产品迭代182

8.1.2产品迭代流程184

8.2网页结构和布局186

阶段案例: 洗刷刷App商城首页开发迭代189