目錄
第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.件28
2.3.1Defa件庫28
2.3.2F件庫30
2.3.3Ic件庫312.4Axure的基本用法31
2.4.1Axure的基本操作31
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

序言
江蘇傳智播客教育科技股份有限公司（簡稱傳智播客）是一家致力於培養高素質軟件開發人纔的科技公司，“黑馬程序員”是傳智播客旗下高端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章介紹產品迭代，包括產品迭代流程、網站結構等。
本書以綜合項目貫穿全書，語言通俗易懂，內容豐富，知識涵蓋面廣，非常適合互聯網產品設計的初學者、互聯網產品經理以及互聯網產品設計愛好者閱讀，也可作為大學選修課教材。

意見反饋
本書的編寫工作由傳智播客教育科技股份有限公司黑馬程序員團隊完成，主要參與人員有呂春林、王哲、孟方思等，本團隊全體人員在接近一年的編寫過程中付出了辛勤的勞動。
盡管我們盡了的努力，本書中仍然難免有不妥之處，歡迎各界專家和讀者朋友提出寶貴意見，我們將不勝感激。您可以通過電子郵件與我們取得聯繫。我們的電子郵件是itcast_book@vip.sina.com。 

黑馬程序員
2019年6月於北京 前言互聯網產品設計思維與實踐

第5章低保真原型圖設計和PRD學習目標
 了解低保真原型圖的繪制規範。
 掌握繪制低保真原型圖的方法。
 了解產品需求文檔。
 掌握撰寫產品需求文檔的方法。產品研發出來之前，通常通過低保真原型圖將產品經理的想法傳達給設計、研發和測試人員，進而產出產品需求文檔。低保真原型圖就是用線條或圖形繪制出來的產品框架。本章以洗刷刷App項目為例，講解低保真原型圖的繪制規範、實現方法和產品需求文檔。
5.1低保真原型圖繪制規範
低保真原型圖是互聯網產品設計階段重要的產物之一，也是產品經理的技能之一。低保真原型圖彙集了產品的主要功能，可以使研發團隊在產品實現之前更加直觀地認識和理解產品。在繪制低保真原型圖時，要遵循低保真原型圖的繪制規範。本節對低保真原型圖的繪制規範進行詳細講解。
1. 尺寸規範
在繪制低保真原型圖時，沒有固定的尺寸要求，通常是根據適配機型來制作低保真原型圖。例如，根據iPhone 6適配的低保真原型圖的尺寸為375像素×667像素，如表51和圖51所示。本章的低保真原型圖均根據iPhone 6適配尺寸進行制作。表51iPhone 6低保真原型圖尺寸規範單位: 像素
寬×高狀態欄導航欄標簽欄375×667375×20375×44375×49圖51iPhone低保真原型圖尺寸規範
2. 字體規範
低保真原型圖沒有具體的字體規範。一般情況下，導航欄內的標題字號要大於內容標題字號，內容標題字號要大於內容正文字號，一般選擇微軟雅黑、黑體等常用字體，如圖52所示。圖52低保真原型圖的字體示例
第5章低保真原型圖設計和PRD互聯網產品設計思維與實踐3. 顏色規範
原型圖中包含了多種顏色。低保真原型圖沒有具體的顏色規範素自帶的且不能更改的顏色外，一般采用黑、白、灰3色，以免影響UI設計師設計頁面。圖53為某App低保真原型圖的色值。
圖53某App低保真原型圖的色值件規範
為了使低保真原型圖更清晰、整齊，一般件之間需要對齊，為此要善於使用輔助線（創建輔助線的方法詳見2.4.1節，此處不做過多介紹）。
5. 頁面及頁面命名規範
盡量將所有頁面分開展示，如圖54所示。
圖54低保真原型圖的頁面展示
圖55頁面命名
頁面的層級要明確。為了快速找到頁面，頁面的名稱一般可以采用頁面的標題，如圖55所示。
從圖54和圖55中可以清楚地看出頁面之間的層級關繫，便於快速理解功能的結構。頁面層級數量不宜過多，如果出現4級以上的頁面，就需要考慮簡化頁面層級。
注意: 
(1) 在繪制低保真原型圖時，產品經理隻需要注意使其功能完整、布局合理，而頁面美觀因素應由UI設計師負責。
(2) 頁面的層級越多，產品的易用性越差。

5.2洗刷刷App低保真原型圖制作與分析
隨著互聯網的迅猛發展，高智能、高配置的移動設備成為各大互聯網公司的發展方向，和PC端產品相比，移動端產品越來越占據著網民的碎片時間。手機作為移動設備，原來隻有打電話、發短信等功能，但是現在人們能通過手機打車、購物，很多事情都可以通過手機來做。那麼，手機是如何實現這一切的呢？就是因為手機裡面有了小小的App。本節以制作洗刷刷App中首頁、積分商城和登錄/注冊模塊的低保真原型為例，深入了解一款App的誕生。 
5.2.1首頁功能分析
根據洗刷刷App的結構圖（如圖56所示）可知，首頁分為3個區域，分別是導航欄區域、Banner推廣圖信息和產品各個模塊的快速入口，具體分析如下。
圖56首頁結構圖
在導航欄區域中包含定位地點、搜索框和消息3個模塊，具體分析如下。
 定位地點: 用戶可以看到當前定位的城市。若自動定位失敗，會彈出“GPS定位失敗”的提示框。若想進行手動定位，點擊此處，即可彈出手動定位模態視圖，如圖57所示。
 搜索框: 首頁提供了快速搜索功能，可以搜索積分商品、門店以及洗車服務等。
 消息: 單擊“信息”按鈕可以快速、便捷地查看通知信息。
Banner推廣圖信息是用於宣傳產品的主要區域，內容可以是優惠信息、品牌宣傳、活動海報等，用戶可以查看近期的活動信息。
首頁中提供了6個快速功能入口和一個洗車海報，具體解釋如下。
 快速入口: 分別是“優惠充值”“進入積分商城”“洗車卡海報”“購買洗車卡”“加入我們”和“我要洗車”，點擊按鈕即可進入與之對應的頁面。
 洗車海報: 添加一個海報，可以將用戶的視線快速移至洗車功能。
根據洗刷刷App的結構圖可知，App的標簽欄中，包括“首頁”“訂單”“我的”3部分，用戶可以通過點擊快速進入自己想前往的頁面。在不同頁面，導航欄內的按鈕及文字有明顯區分，從而使用戶知道當前處於哪個頁面。
圖57手動定位模態視圖
階段案例: 洗刷刷App首頁低保真原型圖制作
1. 案例分析
分析了首頁的功能後，下面用Axure繪制洗刷刷App首頁的低保真原型圖。由於標簽欄、狀態欄信息及頁面背景是洗刷刷App的公用部分，因此在繪制的時候，先將這些公用部分轉化成母版。為了不影響視覺效果，可將母版遮罩取消，這樣做會很多時間。本案例采用iPhone 6尺寸規範制作低保真原型圖。
2. 實現步驟 
Step1打開Axure軟件庫中拖件至Home頁面的頁面編輯區內，設置其“寬度”為375像素，“高度”為667像素，“描邊”為無，將填充顏色改為淺灰色（#F2F2F2），如圖58所示，效果如圖59所示。
圖58修改填充顏色
圖5件效果
Step2再拖曳一件到頁面編輯區中，將其大小設置為375像素×64像素，“描邊”為無，填充顏色為深灰色（#3D4250），位置如圖510所示。
Step3按住Ctrl鍵，拖曳鼠標，在如圖511所示的位置創建全局參考線。
Step4導入名為“狀態欄.png”的圖像，將其放置在如圖512所示的位置。
Step5按Ctrl A鍵,選中頁面件，右擊，在彈出的快捷菜單中選擇“轉換為母版”命令，如圖513所示，此時會彈出“轉換為母版”對話框，具體設置如圖514所示，單擊“繼續”按鈕，即可將已繪制頁面轉換為母版。
Step6在主菜單欄中執行“視圖”→“遮罩”→“母版”命令，取消母版遮罩，取消母版遮罩前後的效果如圖515和圖516所示。
Step7繪制標簽欄，如圖517所示，再按照Step5的方法將其轉換為母版。圖510繪制導航欄
圖511創建全局參考線
圖512導入圖像
圖513轉換為母版
圖514“轉換為母版”對話框
圖515有遮罩母版
圖516無遮罩母版
圖517標簽欄