產(chǎn)品設(shè)計(jì)階段要全面確定整個(gè)產(chǎn)品策略、架構(gòu)吊宋、功能纲辽、外觀，從而確定整個(gè)產(chǎn)品系統(tǒng)的布局璃搜。
5.1 什么是產(chǎn)品設(shè)計(jì)
產(chǎn)品設(shè)計(jì)共有3個(gè)階段：架構(gòu)設(shè)計(jì)拖吼、原型設(shè)計(jì)、體驗(yàn)設(shè)計(jì)这吻。
架構(gòu)設(shè)計(jì)階段：建立產(chǎn)品的骨架吊档，并確定產(chǎn)品的內(nèi)在因素；
原型設(shè)計(jì)階段：確定產(chǎn)品表現(xiàn)層的基本輪廓橘原，并確定產(chǎn)品功能邏輯籍铁；
體驗(yàn)設(shè)計(jì)階段：確定產(chǎn)品風(fēng)格形象，并確認(rèn)用戶體驗(yàn)流程趾断。
01.產(chǎn)品設(shè)計(jì)的工作
輸出物：產(chǎn)品需求文檔拒名，產(chǎn)品設(shè)計(jì)是產(chǎn)品在開發(fā)之前的最后一項(xiàng)重要的工作內(nèi)容。
02.產(chǎn)品設(shè)計(jì)的邏輯
先從宏觀的角度解讀全貌芋酌，在不斷的細(xì)化到細(xì)節(jié)增显，是一種由粗到細(xì)的思維方法。
5.2 架構(gòu)設(shè)計(jì)
不懂技術(shù)的產(chǎn)品經(jīng)理不是一個(gè)好架構(gòu)師脐帝。
5.2.1 什么是架構(gòu)設(shè)計(jì)
產(chǎn)品的成敗最主要是由市場(chǎng)方向和產(chǎn)品架構(gòu)決定的同云。細(xì)節(jié)設(shè)計(jì)決定不來產(chǎn)品的成敗，只是錦上添花的行為堵腹。
總結(jié)為5個(gè)層面：系統(tǒng)層炸站、數(shù)據(jù)層、業(yè)務(wù)層疚顷、框架層旱易、表現(xiàn)層
架構(gòu)設(shè)計(jì)過程中禁偎，數(shù)據(jù)結(jié)構(gòu)的知識(shí)至關(guān)重要，最起碼要能看懂?dāng)?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)系兩個(gè)因素組成如暖。
采用思維導(dǎo)圖的方式用信息結(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，客戶端／服務(wù)器
（2）B／S結(jié)構(gòu)
Browser/Server,瀏覽器／服務(wù)器
實(shí)際應(yīng)用中士修，也會(huì)將兩種結(jié)構(gòu)融合使用枷遂。
02.形態(tài)模式的產(chǎn)品類型
（1）功能型產(chǎn)品（玩數(shù)據(jù)）
實(shí)際的需求文檔就是對(duì)這些數(shù)據(jù)處理邏輯的表述，讓程序員明白怎么處理每次的服務(wù)請(qǐng)求李命。
（2）智能型產(chǎn)品（玩技術(shù)）
比如人臉識(shí)別］語(yǔ)音識(shí)別登淘、圖像處理、視頻處理等封字。
5.2.4 產(chǎn)品架構(gòu)vs技術(shù)架構(gòu)
產(chǎn)品架構(gòu)的目的是梳理產(chǎn)品的功能邏輯和交互體驗(yàn)黔州，背后隱含的是一套基于運(yùn)營(yíng)角度的規(guī)則機(jī)制。
系統(tǒng)層：明確產(chǎn)品的模式和形態(tài)阔籽；
數(shù)據(jù)層：產(chǎn)品的數(shù)據(jù)結(jié)構(gòu)流妻，通常產(chǎn)品經(jīng)理只要使用思維導(dǎo)圖軟件梳理出信息結(jié)構(gòu)即可；
業(yè)務(wù)層：產(chǎn)品的業(yè)務(wù)模型和算法公式笆制，目的是描述功能邏輯绅这；
框架層：產(chǎn)品的導(dǎo)航、頻道在辆、頁(yè)面和模塊元素证薇，是產(chǎn)品的骨架和肉身；
表現(xiàn)層：產(chǎn)品的交互體驗(yàn)和界面風(fēng)格匆篓，是產(chǎn)品的皮膚和相貌浑度。
MVC模式技術(shù)開發(fā)框架：
5.2.5 產(chǎn)品架構(gòu)的5個(gè)層面
產(chǎn)品架構(gòu)實(shí)際上是以結(jié)構(gòu)化思路把產(chǎn)品從抽象的概念中抽離出來，用具有層級(jí)分明的思維方式將其形象化鸦概。
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)理對(duì)動(dòng)態(tài)的數(shù)據(jù)形態(tài)和流轉(zhuǎn)過程非常了解。非技術(shù)出身的產(chǎn)品經(jīng)理可以使用信息結(jié)構(gòu)圖的方式代替咨察，用思維導(dǎo)圖的方式羅列信息元素和標(biāo)注彼此關(guān)系论熙，由技術(shù)人員來構(gòu)建數(shù)據(jù)層。
產(chǎn)品經(jīng)理可以采用信息結(jié)構(gòu)圖的方式和技術(shù)人員溝通相關(guān)的數(shù)據(jù)需求摄狱，讓技術(shù)人員整理出一份數(shù)據(jù)字典赴肚，數(shù)據(jù)字典要保持實(shí)時(shí)更新素跺。
03.業(yè)務(wù)層
產(chǎn)品的業(yè)務(wù)模型、算法公式誉券、功能流程的層級(jí)，主要描述產(chǎn)品的邏輯特征刊愚。
04.框架層
產(chǎn)品的導(dǎo)航踊跟、頻道、頁(yè)面鸥诽、和模塊元素商玫，也可以理解為產(chǎn)品結(jié)構(gòu)圖或者界面線框圖。
05.表現(xiàn)層
產(chǎn)品的交互體驗(yàn)和視覺界面牡借。用戶體驗(yàn)的知識(shí)在這一步廣泛應(yīng)用拳昌。
5.2.6 架構(gòu)設(shè)計(jì)的技術(shù)誤區(qū)
產(chǎn)品是沒有前臺(tái)和后臺(tái)之分的，在構(gòu)架視角中钠龙，前臺(tái)和后臺(tái)都是對(duì)數(shù)據(jù)進(jìn)行操作炬藤，前臺(tái)面向的是用戶群里，后臺(tái)面向的是運(yùn)營(yíng)群體碴里。
前臺(tái)和后臺(tái)的使用者都是用戶沈矿，只是操作功能不一樣而已，從數(shù)據(jù)層面考慮咬腋，彼此沒有區(qū)別羹膳。
5.2.7 架構(gòu)設(shè)計(jì)的思維方式
現(xiàn)在的科技實(shí)際上都是基于20世紀(jì)的大師們留下來的寶貴理論。
作者一貫主張萬物都有演進(jìn)邏輯根竿，沒有憑空而出的創(chuàng)新陵像，只有不斷迭代的進(jìn)步，沒有積累就沒有爆發(fā)寇壳。
多多關(guān)注技術(shù)領(lǐng)域的動(dòng)態(tài)醒颖，折騰和體驗(yàn)一下各類開源程序，學(xué)習(xí)一些技術(shù)知識(shí)和原理九巡，感受一下技術(shù)的魅力图贸。
中國(guó)互聯(lián)網(wǎng)缺少產(chǎn)品層面的創(chuàng)新，其實(shí)也跟不少人沒有早期網(wǎng)絡(luò)傳承有關(guān)冕广。
5.2.8 架構(gòu)設(shè)計(jì)的心得總結(jié)
產(chǎn)品架構(gòu)是一種結(jié)構(gòu)化思維疏日，將產(chǎn)品的各個(gè)層面結(jié)構(gòu)化梳理。
5.2.9 產(chǎn)品線構(gòu)架設(shè)計(jì)示例
5.3 原型設(shè)計(jì)
5.3.1 設(shè)計(jì)前的準(zhǔn)備
把產(chǎn)品的信息內(nèi)容和功能結(jié)構(gòu)進(jìn)行一次梳理撒汉，產(chǎn)生一個(gè)輪廓概念后才能更好的入手設(shè)計(jì)工作沟优。
01.羅列信息（信息結(jié)構(gòu)圖）
輔助設(shè)計(jì)人員創(chuàng)建數(shù)據(jù)庫(kù)的圖表，輔助產(chǎn)品人員進(jìn)行產(chǎn)品功能規(guī)劃的參考睬辐。
02.梳理需求（產(chǎn)品結(jié)構(gòu)圖）
避免在設(shè)計(jì)產(chǎn)品原型時(shí)缺失頁(yè)面或模塊挠阁。
5.3.2 原型設(shè)計(jì)的3種表現(xiàn)手法
需要更加深入了解每個(gè)頁(yè)面上的元素和這些元素的屬性宾肺。
原型設(shè)計(jì)的表現(xiàn)手法主要有3種：手繪原型、灰模原型侵俗、交互原型锨用。
01.手繪原型
在初期驗(yàn)證想法時(shí)非常高效，也方便討論和重構(gòu)隘谣，適合敏捷開發(fā)時(shí)快速出原型增拥。
從工作效率的角度考慮，建議先通過手繪的形式快速在草紙上繪制出產(chǎn)品的原型寻歧，推演和討論方案的可行性掌栅。當(dāng)方案的可行性被驗(yàn)證后，我們?cè)俑鶕?jù)個(gè)人習(xí)慣或團(tuán)隊(duì)要求码泛，通過軟件工具進(jìn)行更深入的設(shè)計(jì)猾封。
02.灰模原型
也稱為平面原型，缺少交互效果噪珊，僅僅是將產(chǎn)品需求以線框結(jié)構(gòu)的方式展示出來晌缘，讓產(chǎn)品需求更加規(guī)整的直觀展現(xiàn)。
03.交互原型
常用軟件Axure RP卿城，通常情況下枚钓，交互原型的設(shè)計(jì)要早于產(chǎn)品需求文檔，是產(chǎn)品經(jīng)理想法推演的重要一步瑟押。
原型設(shè)計(jì)是為了幫助我們細(xì)致的考慮方案搀捷，并論證方案的可行性，同時(shí)也是為了產(chǎn)品宣講時(shí)讓聽眾能夠清晰直觀的了解產(chǎn)品多望，避免抽象的語(yǔ)言描述導(dǎo)致聽眾理解困難和理解偏差嫩舟。
原型設(shè)計(jì)也是為了保證產(chǎn)品在執(zhí)行過程中是按產(chǎn)品經(jīng)理最初設(shè)想的需求和期望完成的。
最好的方案是采用最便捷怀偷、最高效率的方法家厌。
5.3.3 設(shè)計(jì)后的完善
在產(chǎn)品功能的邏輯細(xì)節(jié)方面，原型無法直觀展示椎工，還需要完善產(chǎn)品的業(yè)務(wù)邏輯饭于，同時(shí)可能還會(huì)涉及一些原型的細(xì)微調(diào)整。
完善產(chǎn)品業(yè)務(wù)邏輯的時(shí)候维蒙，相關(guān)的體驗(yàn)設(shè)計(jì)工作就可以開展起來了掰吕。設(shè)計(jì)師協(xié)同產(chǎn)品經(jīng)理完成產(chǎn)品的視覺和交互設(shè)計(jì)工作。所有工作全部完成后颅痊，整合成產(chǎn)品需求文檔殖熟，就可以進(jìn)入開發(fā)階段。
01.用例模型（產(chǎn)品用例圖）
用例是一種描述產(chǎn)品需求的方法斑响。
用例模型是由用例圖和每一個(gè)用例的詳細(xì)描述文檔所組成的菱属。
產(chǎn)品人員的用例主要是為了方便技術(shù)研發(fā)和功能測(cè)試時(shí)钳榨，讓參與者更好的理解功能的邏輯。
產(chǎn)品用例是一種通過用戶的使用場(chǎng)景來獲取需求的方式纽门，每個(gè)用例提供了一個(gè)或多個(gè)場(chǎng)景薛耻。
用例圖
用例圖包涵一組用例，每一個(gè)用例用橢圓表示膜毁，放置在矩形框中昭卓，矩形表示真?zhèn)€系統(tǒng)。矩形框外面的小人瘟滨，表示參與者，參與者不一定是人能颁，可以是其他產(chǎn)品杂瘸、軟件或硬件等。某一參與者和某一用例連起來伙菊，表示該參與者和該用例有交互败玉。
UML是用例圖形符號(hào)最流行的標(biāo)準(zhǔn)。
用例描述文檔
還需要描述每一個(gè)用例的詳細(xì)信息镜硕。
互聯(lián)網(wǎng)產(chǎn)品中运翼，用例的使用越來越少，通常有了產(chǎn)品原型加上功能流程圖和功能說明文檔兴枯，就能夠?qū)a(chǎn)品需求詳細(xì)的表述清楚血淌。
02.邏輯流程（功能流程圖）
一些大公司由測(cè)試人員撰寫用例。
現(xiàn)在業(yè)界比較普遍采用“UML活動(dòng)圖”或者“功能流程圖”表述產(chǎn)品的業(yè)務(wù)和功能邏輯财剖。
活動(dòng)圖是UML用于對(duì)系統(tǒng)的動(dòng)態(tài)行為建模的另一種常用工具悠夯，它描述活動(dòng)的順序，展現(xiàn)了從一個(gè)活動(dòng)到另一個(gè)活動(dòng)的控制流躺坟。本質(zhì)上是一種流程圖沦补。
千言萬語(yǔ)不如一張圖。
使用圖形的方式表述產(chǎn)品的算法邏輯咪橙，可以讓閱讀者非常形象直觀夕膀、一目了然的理解產(chǎn)品需求，同時(shí)也不會(huì)產(chǎn)生“歧義性”美侦。
當(dāng)邏輯出現(xiàn)錯(cuò)誤時(shí)产舞，通過流程圖也能非常容易的發(fā)現(xiàn)，并且可能直接轉(zhuǎn)化為程序需要描述文檔音榜。
5.4 體驗(yàn)設(shè)計(jì)
5.4.1 ?什么是體驗(yàn)設(shè)計(jì)
秉承以用戶為中心的設(shè)計(jì)理念
體驗(yàn)設(shè)計(jì)主要分為3個(gè)階段庞瘸，分別是線框原型階段、交互體驗(yàn)階段赠叼、視覺界面階段擦囊。
第一階段產(chǎn)品經(jīng)理通過線框原型進(jìn)行產(chǎn)品方案的推演违霞，論證方案的可行性；
第二階段則考慮產(chǎn)品的交互形式瞬场；
第三階段則由UI設(shè)計(jì)師接收买鸽，對(duì)界面布局進(jìn)行視覺上的設(shè)計(jì)，確定產(chǎn)品的色調(diào)風(fēng)格贯被、字體字號(hào)等各類視覺元素眼五。
5.4.2 ?4個(gè)設(shè)計(jì)理念
分為4個(gè)優(yōu)先等級(jí)，形成一個(gè)金字塔設(shè)計(jì)理念彤灶。
01.有用：識(shí)別需求的有效性看幼，抓住核心需求
在定義及開發(fā)之前需要明確的一個(gè)產(chǎn)品方向，確保產(chǎn)品有著明確的功能定義和用戶定義幌陕。
02.可用：重塑并保障需求诵姜，滿足不同使用場(chǎng)景
保障一個(gè)產(chǎn)品的審核標(biāo)準(zhǔn)，確保產(chǎn)品不會(huì)有功能性BUG的出現(xiàn)搏熄，確保產(chǎn)品的安全棚唆、速度、兼容心例、流程等方面的性能宵凌。
03.易用：梳理結(jié)構(gòu)流程，便于用戶使用
“易用”的設(shè)計(jì)理念就是用戶體驗(yàn)止后，需要我們?cè)诋a(chǎn)品設(shè)計(jì)時(shí)瞎惫，充分考慮用戶行為習(xí)慣和使用場(chǎng)景，降低用戶的學(xué)習(xí)成本坯门、使用成本微饥。
04.好用：優(yōu)化設(shè)計(jì)界面，符合用戶群體喜好
注重視覺的表現(xiàn)古戴，從視覺圖像上激發(fā)和提升用戶的潛意識(shí)操作行為欠橘，減少用戶的思考時(shí)間。
UI設(shè)計(jì)的最高境界就是提升用戶操作效率现恼，通過色調(diào)影響用戶的操作習(xí)慣肃续，用顏色或圖形明確產(chǎn)品功能／內(nèi)容的主次和展示，讓用戶不用想就知道如何操作叉袍，這也是一種界面語(yǔ)言始锚。
產(chǎn)品發(fā)展過程中，首要的問題是先保證完成產(chǎn)品的核心功能喳逛，確保產(chǎn)品對(duì)于用戶“有用”和“可用”瞧捌，然后快速迭代來完善并改進(jìn)，優(yōu)化產(chǎn)品的“易用”和“好用”。
5.4.3 ? 10個(gè)設(shè)計(jì)理論
（1）系統(tǒng)標(biāo)準(zhǔn)－依照用戶具體的使用情境和需求來決定是沿用標(biāo)準(zhǔn)還是創(chuàng)新姐呐。
產(chǎn)品設(shè)計(jì)應(yīng)該遵循平臺(tái)系統(tǒng)的設(shè)計(jì)規(guī)范殿怜。根據(jù)具體的需求和目標(biāo)用戶的情境決定是否套用標(biāo)準(zhǔn)，或者創(chuàng)新標(biāo)準(zhǔn)曙砂。
（2）目標(biāo)導(dǎo)向－以用戶為中心头谜，關(guān)注用戶目標(biāo)而不是關(guān)注用戶要完成的任務(wù)。
（3）直覺體驗(yàn)－設(shè)計(jì)方案必須能夠引導(dǎo)用戶做出最符合直覺的反應(yīng)行為鸠澈。
（4）成本控制－從細(xì)節(jié)開始減少用戶的操作及學(xué)習(xí)成本柱告，使用戶快速上手和識(shí)別產(chǎn)品特征。
（5）需求設(shè)計(jì)－以用戶的需求為中心笑陈，避免摻雜個(gè)人的主觀喜好际度。
盡量傻瓜化
（6）減少界面－盡量減少界面間的交互，避免新頁(yè)面切斷用戶使用的流暢感涵妥。
（7）概念內(nèi)化－避免概念輸出甲脏，要盡量以用戶聽得懂的語(yǔ)言來表達(dá)設(shè)計(jì)。
無法避免的使用概念妹笆，應(yīng)當(dāng)在周邊有協(xié)助解釋。如加問號(hào)娜氏，點(diǎn)擊顯示描述層拳缠。
（8）信息交互－基于信息層面的交互，應(yīng)該簡(jiǎn)單贸弥、自然窟坐、易懂。
交互要符合用戶期望模型及下意識(shí)行為绵疲。
（9）簡(jiǎn)潔元素－減少視覺元素的堆疊哲鸳，提高交互元素的辨別，合理隱喻交互元素盔憨。
在采用圖形隱喻功能的時(shí)候徙菠，應(yīng)當(dāng)考慮用戶的認(rèn)知，降低用戶學(xué)習(xí)和識(shí)別的成本郁岩。
（10）明確結(jié)構(gòu)－合理劃分界面的邏輯結(jié)構(gòu)婿奔，按照不同的內(nèi)容和功能進(jìn)行劃分，突出結(jié)構(gòu)主次问慎。
堅(jiān)持每天玩一款產(chǎn)品萍摊。
