一個(gè)產(chǎn)品從Idea到Demo存崖，大約要走五步冻记，分別是規(guī)則設(shè)計(jì)、功能設(shè)計(jì)来惧、流程設(shè)計(jì)冗栗、架構(gòu)設(shè)計(jì)和原型設(shè)計(jì)。
第一步. 規(guī)則設(shè)計(jì)
顧名思義供搀，就是產(chǎn)品的游戲規(guī)則是怎樣的隅居，在產(chǎn)品內(nèi)要實(shí)現(xiàn)什么目標(biāo)，鼓勵(lì)哪些行為葛虐，不鼓勵(lì)哪些行為等等胎源。一個(gè)好的規(guī)則描述，可以讓小伙伴們明白這個(gè)產(chǎn)品大概是要做什么的挡闰。
第二步. 功能設(shè)計(jì)
在明確產(chǎn)品的規(guī)則后乒融，我們需要設(shè)計(jì)具體的產(chǎn)品功能掰盘。在細(xì)化產(chǎn)品功能時(shí)，需要考慮用戶需求赞季、用戶任務(wù)愧捕、使用場(chǎng)景、技術(shù)限制申钩、相關(guān)競(jìng)品等因素次绘，以及不同功能之間是如何配合的，優(yōu)先級(jí)的高低等等撒遣。
第三步. 流程設(shè)計(jì)
當(dāng)我們明確了產(chǎn)品都需要具備哪些功能之后邮偎，接著就要定義產(chǎn)品或功能是如何具體運(yùn)行的。通常义黎，我們使用流程圖和泳道圖進(jìn)行流程設(shè)計(jì)禾进。
一、流程圖：用一些規(guī)定符號(hào)及連線來(lái)表示某個(gè)具體業(yè)務(wù)的處理過(guò)程廉涕。下面三幅圖分別是流程圖元素泻云、流程圖邏輯結(jié)構(gòu)和一個(gè)智能機(jī)器人客服平臺(tái)的案例蔚叨。
二诀紊、泳道圖：表示多角色配合的一種流程靶草，能夠直觀地描述各個(gè)角色之間的邏輯關(guān)系漫雷。泳道圖在流程圖的基礎(chǔ)上加入了角色維度和階段維度蒂培，使用的元素和邏輯結(jié)構(gòu)與流程圖相同握联。
第四步. 架構(gòu)設(shè)計(jì)
在造房子時(shí)啄糙，我們需要明確每個(gè)房間的作用和位置际度，比如衛(wèi)生間和廚房距離最好遠(yuǎn)一點(diǎn)贡羔，如果客廳面積太小廉白，就無(wú)法承載過(guò)多的訪客。同樣治力，在一款產(chǎn)品里蒙秒，我們也只有搭好架構(gòu)，才能把內(nèi)容放到合適的位置里宵统。
架構(gòu)設(shè)計(jì)晕讲，是指將產(chǎn)品的功能入口（框架設(shè)計(jì)）和內(nèi)容有序的組織（內(nèi)容組織）在一起，通過(guò)入口安排马澈、內(nèi)容組織傳達(dá)瓢省、突出某些信息給用戶，讓用戶更容易的找到自己想要的東西和產(chǎn)品痊班。
內(nèi)容組織勤婚，是指將產(chǎn)品的功能和內(nèi)容有序的組織在一起，通常有自下而上和自上而下兩種方式涤伐。
框架設(shè)計(jì)馒胆，又稱導(dǎo)航設(shè)計(jì)缨称，是指以什么樣具體的形式將分類好的內(nèi)容展示給用戶。目前APP常用的框架有四種祝迂，分別是Tab式設(shè)計(jì)睦尽、抽屜式設(shè)計(jì)、跳板式設(shè)計(jì)型雳、列表式設(shè)計(jì)当凡。
1.Tab式導(dǎo)航
定義：在頂部或底部，有Tab式跳轉(zhuǎn)頁(yè)
優(yōu)點(diǎn)：主要功能突出纠俭；可以輕松在各個(gè)主要入口直接頻繁跳轉(zhuǎn)沿量，減少點(diǎn)擊且不會(huì)迷失方向
缺點(diǎn)：功能過(guò)多時(shí)，如果都放在Tab導(dǎo)航上會(huì)顯得這個(gè)框架過(guò)于笨重冤荆；沉浸式體驗(yàn)不足
2.抽屜式導(dǎo)航
定義：菜單藏在當(dāng)前頁(yè)面后朴则，點(diǎn)擊入口就像抽屜一樣拉出菜單
優(yōu)點(diǎn)：給內(nèi)容頁(yè)足夠的展示空間，可以營(yíng)造出沉浸體驗(yàn)匙赞；側(cè)邊欄可以提供更多的功能入口的展示空間佛掖，拓展性較好妖碉。
缺點(diǎn)：若使用其他功能涌庭，頁(yè)面較深
3.跳板式導(dǎo)航
定義：功能如一個(gè)個(gè)小方塊，平鋪在界面上
優(yōu)點(diǎn)：清晰展示各個(gè)入口欧宜；適合功能較多坐榆，且功能之間相互獨(dú)立的應(yīng)用
缺點(diǎn)：沒(méi)有重點(diǎn)；各個(gè)入口之間跳轉(zhuǎn)不夠靈活
4.列表式導(dǎo)航
定義：將入口或內(nèi)容按照列表的樣式依次展示在頁(yè)面之上
優(yōu)點(diǎn)：可以更多的呈現(xiàn)內(nèi)容冗茸，層次清晰
缺點(diǎn)：沒(méi)有重點(diǎn)
第五步. 原型設(shè)計(jì)
原型設(shè)計(jì)席镀，是指對(duì)最終產(chǎn)品各頁(yè)面上內(nèi)容的簡(jiǎn)單呈現(xiàn)，說(shuō)明了用戶將如何與產(chǎn)品進(jìn)行交互夏漱。
原型設(shè)計(jì)是PM在產(chǎn)品設(shè)計(jì)過(guò)程中的最后階段豪诲，一方面可以幫助PM整理想法和思路的具象化手段，另一方面可以給研發(fā)挂绰、交互和設(shè)計(jì)一個(gè)直觀的產(chǎn)品印象屎篱。
原型設(shè)計(jì)的流程如下：
1.選擇需要設(shè)計(jì)的功能模塊
2.畫(huà)出該模塊的功能流程圖
3.將每個(gè)流程中的功能點(diǎn)列出來(lái)
4.依據(jù)流程將次序相同、功能接近的功能分類組織在一起葵蒂，得到了內(nèi)容組織圖（腦圖）
5.通過(guò)內(nèi)容組織圖交播，得出該模塊需要哪幾個(gè)具體的頁(yè)面
6.為每個(gè)頁(yè)面的功能排列優(yōu)先級(jí)
7、設(shè)計(jì)每個(gè)頁(yè)面的具體原型
如何學(xué)習(xí)交互設(shè)計(jì)践付？
1.研讀各個(gè)系統(tǒng)的設(shè)計(jì)規(guī)范
iOS Human Interface Guidelines/Android Material design
2.閱讀相關(guān)書(shū)籍秦士，掌握一些設(shè)計(jì)的基本原則
設(shè)計(jì)心理學(xué)、點(diǎn)石成金永高、About Face
3.臨摹優(yōu)秀產(chǎn)品
4.將優(yōu)秀產(chǎn)品中設(shè)計(jì)好的地方記錄下來(lái)
原型設(shè)計(jì)注意事項(xiàng)：
1.不用產(chǎn)出高保真原型
2.不用去學(xué)習(xí)復(fù)雜的交互動(dòng)作
3.不要過(guò)度設(shè)計(jì)
工具：Axure（偏PC端）隧土、Sketch（偏移動(dòng)端）
素材庫(kù)：pttrns
本文內(nèi)容來(lái)源于作者在【網(wǎng)易云課堂】-【產(chǎn)品經(jīng)理微專業(yè)】的學(xué)習(xí)提针，對(duì)于產(chǎn)品新人絕對(duì)物超所值，推薦給大家曹傀。
http://study.163.com/smartSpec/intro.htm#/smartSpecIntro
