產(chǎn)品設(shè)計階段要全面確定整個產(chǎn)品策略、架構(gòu)、功能、外觀，從而確定整個產(chǎn)品系統(tǒng)的布局。
5.1 什么是產(chǎn)品設(shè)計
產(chǎn)品設(shè)計共有3個階段：架構(gòu)設(shè)計、原型設(shè)計、體驗設(shè)計。
架構(gòu)設(shè)計階段：建立產(chǎn)品的骨架，并確定產(chǎn)品的內(nèi)在因素；
原型設(shè)計階段：確定產(chǎn)品表現(xiàn)層的基本輪廓，并確定產(chǎn)品功能邏輯；
體驗設(shè)計階段：確定產(chǎn)品風格形象，并確認用戶體驗流程。
01.產(chǎn)品設(shè)計的工作
輸出物：產(chǎn)品需求文檔，產(chǎn)品設(shè)計是產(chǎn)品在開發(fā)之前的最后一項重要的工作內(nèi)容。
02.產(chǎn)品設(shè)計的邏輯
先從宏觀的角度解讀全貌，在不斷的細化到細節(jié)，是一種由粗到細的思維方法。
5.2 架構(gòu)設(shè)計
不懂技術(shù)的產(chǎn)品經(jīng)理不是一個好架構(gòu)師。
5.2.1 什么是架構(gòu)設(shè)計
產(chǎn)品的成敗最主要是由市場方向和產(chǎn)品架構(gòu)決定的。細節(jié)設(shè)計決定不來產(chǎn)品的成敗，只是錦上添花的行為。
總結(jié)為5個層面：系統(tǒng)層、數(shù)據(jù)層、業(yè)務層、框架層、表現(xiàn)層
架構(gòu)設(shè)計過程中，數(shù)據(jù)結(jié)構(gòu)的知識至關(guān)重要，最起碼要能看懂數(shù)據(jù)字典。
5.2.2 產(chǎn)品公式
算法＋數(shù)據(jù)結(jié)構(gòu)＝程序
01.數(shù)據(jù)結(jié)構(gòu)
數(shù)據(jù)結(jié)構(gòu)由元素和關(guān)系兩個因素組成。
采用思維導圖的方式用信息結(jié)構(gòu)圖羅列信息內(nèi)容。
02.算法
算法是解決問題的方法。
03.程序
互聯(lián)網(wǎng)產(chǎn)品的本質(zhì)就是程序。
5.2.3 產(chǎn)品形態(tài)模式
01.形態(tài)模式的工作原理
（1）C／S結(jié)構(gòu)
Client/Server，客戶端／服務器
（2）B／S結(jié)構(gòu)
Browser/Server,瀏覽器／服務器
實際應用中，也會將兩種結(jié)構(gòu)融合使用。
02.形態(tài)模式的產(chǎn)品類型
（1）功能型產(chǎn)品（玩數(shù)據(jù)）
實際的需求文檔就是對這些數(shù)據(jù)處理邏輯的表述，讓程序員明白怎么處理每次的服務請求。
（2）智能型產(chǎn)品（玩技術(shù)）
比如人臉識別］語音識別、圖像處理、視頻處理等。
5.2.4 產(chǎn)品架構(gòu)vs技術(shù)架構(gòu)
產(chǎn)品架構(gòu)的目的是梳理產(chǎn)品的功能邏輯和交互體驗，背后隱含的是一套基于運營角度的規(guī)則機制。
系統(tǒng)層：明確產(chǎn)品的模式和形態(tài)；
數(shù)據(jù)層：產(chǎn)品的數(shù)據(jù)結(jié)構(gòu)，通常產(chǎn)品經(jīng)理只要使用思維導圖軟件梳理出信息結(jié)構(gòu)即可；
業(yè)務層：產(chǎn)品的業(yè)務模型和算法公式，目的是描述功能邏輯；
框架層：產(chǎn)品的導航、頻道、頁面和模塊元素，是產(chǎn)品的骨架和肉身；
表現(xiàn)層：產(chǎn)品的交互體驗和界面風格，是產(chǎn)品的皮膚和相貌。
MVC模式技術(shù)開發(fā)框架：
5.2.5 產(chǎn)品架構(gòu)的5個層面
產(chǎn)品架構(gòu)實際上是以結(jié)構(gòu)化思路把產(chǎn)品從抽象的概念中抽離出來，用具有層級分明的思維方式將其形象化。
01.系統(tǒng)層
不是指OS操作系統(tǒng)，而是指產(chǎn)品的系統(tǒng)層次結(jié)構(gòu)，屬于一種名詞定義。
02.數(shù)據(jù)層
指的是數(shù)據(jù)結(jié)構(gòu)，需要產(chǎn)品經(jīng)理對動態(tài)的數(shù)據(jù)形態(tài)和流轉(zhuǎn)過程非常了解。非技術(shù)出身的產(chǎn)品經(jīng)理可以使用信息結(jié)構(gòu)圖的方式代替，用思維導圖的方式羅列信息元素和標注彼此關(guān)系，由技術(shù)人員來構(gòu)建數(shù)據(jù)層。
產(chǎn)品經(jīng)理可以采用信息結(jié)構(gòu)圖的方式和技術(shù)人員溝通相關(guān)的數(shù)據(jù)需求，讓技術(shù)人員整理出一份數(shù)據(jù)字典，數(shù)據(jù)字典要保持實時更新。
03.業(yè)務層
產(chǎn)品的業(yè)務模型、算法公式、功能流程的層級，主要描述產(chǎn)品的邏輯特征。
04.框架層
產(chǎn)品的導航、頻道、頁面、和模塊元素，也可以理解為產(chǎn)品結(jié)構(gòu)圖或者界面線框圖。
05.表現(xiàn)層
產(chǎn)品的交互體驗和視覺界面。用戶體驗的知識在這一步廣泛應用。
5.2.6 架構(gòu)設(shè)計的技術(shù)誤區(qū)
產(chǎn)品是沒有前臺和后臺之分的，在構(gòu)架視角中，前臺和后臺都是對數(shù)據(jù)進行操作，前臺面向的是用戶群里，后臺面向的是運營群體。
前臺和后臺的使用者都是用戶，只是操作功能不一樣而已，從數(shù)據(jù)層面考慮，彼此沒有區(qū)別。
5.2.7 架構(gòu)設(shè)計的思維方式
現(xiàn)在的科技實際上都是基于20世紀的大師們留下來的寶貴理論。
作者一貫主張萬物都有演進邏輯，沒有憑空而出的創(chuàng)新，只有不斷迭代的進步，沒有積累就沒有爆發(fā)。
多多關(guān)注技術(shù)領(lǐng)域的動態(tài)，折騰和體驗一下各類開源程序，學習一些技術(shù)知識和原理，感受一下技術(shù)的魅力。
中國互聯(lián)網(wǎng)缺少產(chǎn)品層面的創(chuàng)新，其實也跟不少人沒有早期網(wǎng)絡(luò)傳承有關(guān)。
5.2.8 架構(gòu)設(shè)計的心得總結(jié)
產(chǎn)品架構(gòu)是一種結(jié)構(gòu)化思維，將產(chǎn)品的各個層面結(jié)構(gòu)化梳理。
5.2.9 產(chǎn)品線構(gòu)架設(shè)計示例
5.3 原型設(shè)計
5.3.1 設(shè)計前的準備
把產(chǎn)品的信息內(nèi)容和功能結(jié)構(gòu)進行一次梳理，產(chǎn)生一個輪廓概念后才能更好的入手設(shè)計工作。
01.羅列信息（信息結(jié)構(gòu)圖）
輔助設(shè)計人員創(chuàng)建數(shù)據(jù)庫的圖表，輔助產(chǎn)品人員進行產(chǎn)品功能規(guī)劃的參考。
02.梳理需求（產(chǎn)品結(jié)構(gòu)圖）
避免在設(shè)計產(chǎn)品原型時缺失頁面或模塊。
5.3.2 原型設(shè)計的3種表現(xiàn)手法
需要更加深入了解每個頁面上的元素和這些元素的屬性。
原型設(shè)計的表現(xiàn)手法主要有3種：手繪原型、灰模原型、交互原型。
01.手繪原型
在初期驗證想法時非常高效，也方便討論和重構(gòu)，適合敏捷開發(fā)時快速出原型。
從工作效率的角度考慮，建議先通過手繪的形式快速在草紙上繪制出產(chǎn)品的原型，推演和討論方案的可行性。當方案的可行性被驗證后，我們再根據(jù)個人習慣或團隊要求，通過軟件工具進行更深入的設(shè)計。
02.灰模原型
也稱為平面原型，缺少交互效果，僅僅是將產(chǎn)品需求以線框結(jié)構(gòu)的方式展示出來，讓產(chǎn)品需求更加規(guī)整的直觀展現(xiàn)。
03.交互原型
常用軟件Axure RP，通常情況下，交互原型的設(shè)計要早于產(chǎn)品需求文檔，是產(chǎn)品經(jīng)理想法推演的重要一步。
原型設(shè)計是為了幫助我們細致的考慮方案，并論證方案的可行性，同時也是為了產(chǎn)品宣講時讓聽眾能夠清晰直觀的了解產(chǎn)品，避免抽象的語言描述導致聽眾理解困難和理解偏差。
原型設(shè)計也是為了保證產(chǎn)品在執(zhí)行過程中是按產(chǎn)品經(jīng)理最初設(shè)想的需求和期望完成的。
最好的方案是采用最便捷、最高效率的方法。
5.3.3 設(shè)計后的完善
在產(chǎn)品功能的邏輯細節(jié)方面，原型無法直觀展示，還需要完善產(chǎn)品的業(yè)務邏輯，同時可能還會涉及一些原型的細微調(diào)整。
完善產(chǎn)品業(yè)務邏輯的時候，相關(guān)的體驗設(shè)計工作就可以開展起來了。設(shè)計師協(xié)同產(chǎn)品經(jīng)理完成產(chǎn)品的視覺和交互設(shè)計工作。所有工作全部完成后，整合成產(chǎn)品需求文檔，就可以進入開發(fā)階段。
01.用例模型（產(chǎn)品用例圖）
用例是一種描述產(chǎn)品需求的方法。
用例模型是由用例圖和每一個用例的詳細描述文檔所組成的。
產(chǎn)品人員的用例主要是為了方便技術(shù)研發(fā)和功能測試時，讓參與者更好的理解功能的邏輯。
產(chǎn)品用例是一種通過用戶的使用場景來獲取需求的方式，每個用例提供了一個或多個場景。
用例圖
用例圖包涵一組用例，每一個用例用橢圓表示，放置在矩形框中，矩形表示真?zhèn)€系統(tǒng)。矩形框外面的小人，表示參與者，參與者不一定是人，可以是其他產(chǎn)品、軟件或硬件等。某一參與者和某一用例連起來，表示該參與者和該用例有交互。
UML是用例圖形符號最流行的標準。
用例描述文檔
還需要描述每一個用例的詳細信息。
互聯(lián)網(wǎng)產(chǎn)品中，用例的使用越來越少，通常有了產(chǎn)品原型加上功能流程圖和功能說明文檔，就能夠?qū)a(chǎn)品需求詳細的表述清楚。
02.邏輯流程（功能流程圖）
一些大公司由測試人員撰寫用例。
現(xiàn)在業(yè)界比較普遍采用“UML活動圖”或者“功能流程圖”表述產(chǎn)品的業(yè)務和功能邏輯。
活動圖是UML用于對系統(tǒng)的動態(tài)行為建模的另一種常用工具，它描述活動的順序，展現(xiàn)了從一個活動到另一個活動的控制流。本質(zhì)上是一種流程圖。
千言萬語不如一張圖。
使用圖形的方式表述產(chǎn)品的算法邏輯，可以讓閱讀者非常形象直觀、一目了然的理解產(chǎn)品需求，同時也不會產(chǎn)生“歧義性”。
當邏輯出現(xiàn)錯誤時，通過流程圖也能非常容易的發(fā)現(xiàn)，并且可能直接轉(zhuǎn)化為程序需要描述文檔。
5.4 體驗設(shè)計
5.4.1 ?什么是體驗設(shè)計
秉承以用戶為中心的設(shè)計理念
體驗設(shè)計主要分為3個階段，分別是線框原型階段、交互體驗階段、視覺界面階段。
第一階段產(chǎn)品經(jīng)理通過線框原型進行產(chǎn)品方案的推演，論證方案的可行性；
第二階段則考慮產(chǎn)品的交互形式；
第三階段則由UI設(shè)計師接收，對界面布局進行視覺上的設(shè)計，確定產(chǎn)品的色調(diào)風格、字體字號等各類視覺元素。
5.4.2 ?4個設(shè)計理念
分為4個優(yōu)先等級，形成一個金字塔設(shè)計理念。
01.有用：識別需求的有效性，抓住核心需求
在定義及開發(fā)之前需要明確的一個產(chǎn)品方向，確保產(chǎn)品有著明確的功能定義和用戶定義。
02.可用：重塑并保障需求，滿足不同使用場景
保障一個產(chǎn)品的審核標準，確保產(chǎn)品不會有功能性BUG的出現(xiàn)，確保產(chǎn)品的安全、速度、兼容、流程等方面的性能。
03.易用：梳理結(jié)構(gòu)流程，便于用戶使用
“易用”的設(shè)計理念就是用戶體驗，需要我們在產(chǎn)品設(shè)計時，充分考慮用戶行為習慣和使用場景，降低用戶的學習成本、使用成本。
04.好用：優(yōu)化設(shè)計界面，符合用戶群體喜好
注重視覺的表現(xiàn)，從視覺圖像上激發(fā)和提升用戶的潛意識操作行為，減少用戶的思考時間。
UI設(shè)計的最高境界就是提升用戶操作效率，通過色調(diào)影響用戶的操作習慣，用顏色或圖形明確產(chǎn)品功能／內(nèi)容的主次和展示，讓用戶不用想就知道如何操作，這也是一種界面語言。
產(chǎn)品發(fā)展過程中，首要的問題是先保證完成產(chǎn)品的核心功能，確保產(chǎn)品對于用戶“有用”和“可用”，然后快速迭代來完善并改進，優(yōu)化產(chǎn)品的“易用”和“好用”。
5.4.3 ? 10個設(shè)計理論
（1）系統(tǒng)標準－依照用戶具體的使用情境和需求來決定是沿用標準還是創(chuàng)新。
產(chǎn)品設(shè)計應該遵循平臺系統(tǒng)的設(shè)計規(guī)范。根據(jù)具體的需求和目標用戶的情境決定是否套用標準，或者創(chuàng)新標準。
（2）目標導向－以用戶為中心，關(guān)注用戶目標而不是關(guān)注用戶要完成的任務。
（3）直覺體驗－設(shè)計方案必須能夠引導用戶做出最符合直覺的反應行為。
（4）成本控制－從細節(jié)開始減少用戶的操作及學習成本，使用戶快速上手和識別產(chǎn)品特征。
（5）需求設(shè)計－以用戶的需求為中心，避免摻雜個人的主觀喜好。
盡量傻瓜化
（6）減少界面－盡量減少界面間的交互，避免新頁面切斷用戶使用的流暢感。
（7）概念內(nèi)化－避免概念輸出，要盡量以用戶聽得懂的語言來表達設(shè)計。
無法避免的使用概念，應當在周邊有協(xié)助解釋。如加問號，點擊顯示描述層。
（8）信息交互－基于信息層面的交互，應該簡單、自然、易懂。
交互要符合用戶期望模型及下意識行為。
（9）簡潔元素－減少視覺元素的堆疊，提高交互元素的辨別，合理隱喻交互元素。
在采用圖形隱喻功能的時候，應當考慮用戶的認知，降低用戶學習和識別的成本。
（10）明確結(jié)構(gòu)－合理劃分界面的邏輯結(jié)構(gòu)，按照不同的內(nèi)容和功能進行劃分，突出結(jié)構(gòu)主次。
堅持每天玩一款產(chǎn)品。
