唐僧每次介紹自己：貧僧唐三藏内斯，從東土大唐而來(lái)蕴潦，去往西天拜佛取經(jīng)像啼。這幾句話包涵了每個(gè)人都要問(wèn)自己的三個(gè)問(wèn)題：我是誰(shuí)？我從哪里來(lái)品擎？我要到哪里去？

清楚自己是誰(shuí)备徐，從哪里來(lái)萄传，到哪里去，清晰規(guī)劃自己的人生道路蜜猾，不管路上有多少艱難和誘惑秀菱，都動(dòng)搖不了決心，于是他成功實(shí)現(xiàn)了目標(biāo)蹭睡！一個(gè)產(chǎn)品是一樣的衍菱，大的產(chǎn)品整體規(guī)劃設(shè)計(jì)，小到一個(gè)功能點(diǎn)的設(shè)計(jì)肩豁，都要清晰的知道脊串，產(chǎn)品或功能的入口在哪里，進(jìn)來(lái)做什么清钥，怎么出去琼锋。所以產(chǎn)品原型設(shè)計(jì)的本質(zhì)其實(shí)是要弄清楚，我是誰(shuí)祟昭，從哪里來(lái)缕坎，到哪里去，完成一個(gè)閉環(huán)的操作篡悟。

原型設(shè)計(jì)的步驟

了解需求谜叹，確認(rèn)表達(dá)方式。了解你做的產(chǎn)品是給誰(shuí)做的搬葬，誰(shuí)來(lái)開(kāi)發(fā)荷腊，然后選擇合適的表達(dá)方式與工具。如果僅僅是一段文字或一個(gè)按鈕或圖片位置的調(diào)整急凰，可以用文本闡述即可停局，如果是為了驗(yàn)證想法，可用手繪原型香府，如果是給用戶或?qū)ν馓峁┓?wù)的產(chǎn)品董栽，至少需要灰度模型、高保真交互模型企孩，至于工具AXURE锭碳、Mockplus，墨刀勿璃，根據(jù)需要選擇即可擒抛。

梳理頁(yè)面推汽、頁(yè)面元素及頁(yè)面流程。通過(guò)思維導(dǎo)圖梳理該產(chǎn)品或者功能歧沪，頁(yè)面及頁(yè)面內(nèi)的元素歹撒，大致歸納出有幾個(gè)頁(yè)面，頁(yè)面內(nèi)有幾個(gè)區(qū)域诊胞，區(qū)域內(nèi)有什么元素暖夭，采用什么布局方式等；

繪制原型初稿撵孤，按照頁(yè)面結(jié)構(gòu)迈着、信息結(jié)構(gòu)、業(yè)務(wù)流程開(kāi)始繪制原型邪码，確定每個(gè)頁(yè)面的布局和元素的位置裕菠，快速的繪制原型初稿。這個(gè)階段主要是把產(chǎn)品的流程走通闭专。

深度校驗(yàn)原型實(shí)現(xiàn)并添加標(biāo)注奴潘，在原型初稿的基礎(chǔ)上，開(kāi)始深度的思考功能的必要性和優(yōu)先級(jí)影钉，盡可能把冗余的元素刪除或精簡(jiǎn)萤彩，盡可能突出每個(gè)頁(yè)面的重要元素，使用不同的大小的字體斧拍，區(qū)域的灰度來(lái)標(biāo)識(shí)雀扶。一邊修改，一邊添加交互細(xì)節(jié)肆汹，可以把細(xì)節(jié)用文字的形式標(biāo)注在原型周圍愚墓。使用統(tǒng)一的原型標(biāo)注表格，重點(diǎn)標(biāo)識(shí)出異常邊界和文案提示昂勉，區(qū)分全局說(shuō)明和局部說(shuō)明浪册，盡可能將標(biāo)注寫的精簡(jiǎn)、明確岗照、全面村象。

原型設(shè)計(jì)作用

原型設(shè)計(jì)能讓我們更加深入理解和思考產(chǎn)品實(shí)現(xiàn)，并減少問(wèn)題的出現(xiàn)攒至。如每個(gè)頁(yè)面上元素和這些元素的屬性厚者。舉個(gè)例子如手機(jī)驗(yàn)證，當(dāng)用戶輸入手機(jī)號(hào)是要不要驗(yàn)證手機(jī)號(hào)是否正確迫吐，是否全部為純數(shù)字库菲，是否為11位等，如果全部驗(yàn)證OK志膀，應(yīng)該如何調(diào)用驗(yàn)證碼服務(wù)熙宇，如何給用戶下發(fā)驗(yàn)證鳖擒，是語(yǔ)音還是短信等，下發(fā)完成后烫止，如何驗(yàn)證蒋荚，驗(yàn)證成功如何通知前端，驗(yàn)證失敗應(yīng)該給用戶什么提示馆蠕，驗(yàn)證信息如何存儲(chǔ)等期升；

將抽象的結(jié)構(gòu)、流程荆几、邏輯吓妆，具象化赊时，原型設(shè)計(jì)是將抽象的產(chǎn)品結(jié)構(gòu)吨铸，產(chǎn)品流程和邏輯等內(nèi)容轉(zhuǎn)化為具體形象、交互頁(yè)面祖秒、輸出說(shuō)明的過(guò)程诞吱，如果可以在產(chǎn)品原型上增加具體的頁(yè)面、邏輯竭缝、元素等的說(shuō)明房维，可以省去PRD的撰寫；

輔助產(chǎn)品經(jīng)理與領(lǐng)導(dǎo)抬纸、交互咙俩、UI、運(yùn)營(yíng)和技術(shù)的溝通產(chǎn)品需求與功能設(shè)計(jì)湿故；

便于修正與維護(hù)阿趁，便于后續(xù)查看；

原型設(shè)計(jì)是對(duì)產(chǎn)品結(jié)構(gòu)圖和產(chǎn)品流程圖的一個(gè)更形象表達(dá)坛猪，同時(shí)又能為后面PRD的撰寫與溝通提供基礎(chǔ)支持脖阵，所以在整個(gè)產(chǎn)品流程中處于最重要的位置，有著承上啟下的作用墅茉；

原型設(shè)計(jì)時(shí)要盡量圍繞以下3條原則進(jìn)行：

原型結(jié)構(gòu)簡(jiǎn)單清晰命黔，自然易懂，如微信的設(shè)計(jì)就斤，雖然微信功能很強(qiáng)大悍募，但功能設(shè)計(jì)上很簡(jiǎn)單，今日頭條的自然而然的閱讀新聞的方式洋机；

用戶常用的功能或喜歡的內(nèi)容優(yōu)先展示搜立，如微信的對(duì)話頁(yè)，陌陌附近的人/動(dòng)態(tài)槐秧；

重要信息突出展示啄踊，如文章標(biāo)題忧设、商品價(jià)格等都要重點(diǎn)突出展示；

原型圖基本可以分為三類：手繪原型颠通、灰模原型址晕、交互原型

?手繪繪制原型：最簡(jiǎn)單直接的方法，最快速的表現(xiàn)產(chǎn)品輪廓的方法顿锰。通過(guò)紙和筆谨垃，快速手繪原型，在初期驗(yàn)證想法時(shí)非常高效硼控，也方便討論和重構(gòu)刘陶，同時(shí)也適合敏捷開(kāi)發(fā)時(shí)快速出原型，但還是建議用工具出圖留底牢撼。同樣在自己的辦公桌上準(zhǔn)備紙筆匙隔，隨時(shí)溝通與畫圖，如產(chǎn)品流程熏版、產(chǎn)品原型纷责、邏輯溝通等，推薦一個(gè)手機(jī)的白板工具撼短，特別實(shí)用再膳；

灰模原型也叫平面模型或線框圖，或者中保真原型圖曲横，是對(duì)產(chǎn)品的一個(gè)一個(gè)頁(yè)面的具體表達(dá)喂柒，不帶顏色，不帶交互禾嫉，只有灰色的線條灾杰、形狀與文字，相對(duì)手繪原型夭织，灰模更加清晰和整潔吭露；相比交互原型，灰模原型只是缺少交互效果尊惰，僅僅是將產(chǎn)品需求以線框結(jié)構(gòu)的方式展示出來(lái)讲竿，讓產(chǎn)品的需求更加直觀。

交互原型是通過(guò)原型設(shè)計(jì)軟件完成的原型弄屡，帶有頁(yè)面的跳轉(zhuǎn)题禀、彈層等交互效果，在功能需求和交互需求的表現(xiàn)上膀捷，幾乎和正式產(chǎn)品是一致的迈嘹，所以有時(shí)交互原型也被稱為產(chǎn)品Demo版。產(chǎn)品經(jīng)理通過(guò)交互原型來(lái)推演真實(shí)的用戶使用場(chǎng)景，從而更好的把握產(chǎn)品與用戶秀仲；

PC端原型交互多融痛，后臺(tái)產(chǎn)品原型更多一些、APP端原型交互少神僵，更多的是頁(yè)面之前的跳轉(zhuǎn)雁刷，直接用用箭頭連接各個(gè)頁(yè)面進(jìn)行說(shuō)明即可；

PC端原型示例

后臺(tái)產(chǎn)品原型示例

APP端原型示例

繪制原型設(shè)計(jì)主要工具是用Axure保礼，同時(shí)目前也有比較好用移動(dòng)端原型設(shè)計(jì)軟件如：Mockplus沛励、墨刀等，當(dāng)然手繪草圖就用紙筆就夠了炮障，快捷方便目派；

原型設(shè)計(jì)是為了幫助我們更細(xì)致的考慮方案的實(shí)現(xiàn)，并論證方案的可行性胁赢，同時(shí)也是為了產(chǎn)品宣講時(shí)讓聽(tīng)眾能夠清晰直觀的了解產(chǎn)品企蹭，避免抽象的語(yǔ)言描述導(dǎo)致聽(tīng)眾理解困難和理解偏差。同時(shí)也是為了確保產(chǎn)品在執(zhí)行過(guò)程中徘键，是按產(chǎn)品經(jīng)理最初設(shè)想的需求和期望完成的套像，因此產(chǎn)品經(jīng)理在制作原型時(shí)酱固，可根據(jù)具體場(chǎng)景，具體使用哪一種原型設(shè)計(jì)亿虽，只要對(duì)方能夠聽(tīng)懂看懂接受就可以了虚青，效率最高即可它呀。

原型標(biāo)注說(shuō)明

原型標(biāo)注是為了更好的理解產(chǎn)品原型，從而指導(dǎo)UI設(shè)計(jì)棒厘、開(kāi)發(fā)與測(cè)試纵穿。將傳統(tǒng)Word形式的功能需求說(shuō)明標(biāo)注在原型圖上，將需求邏輯標(biāo)注說(shuō)明奢人，是非常高效的產(chǎn)品需求說(shuō)明方式谓媒，這樣更便于去理解需求與表達(dá)需求。

原型的呈現(xiàn)形式主要為兩種：

原型+PRD：更適合大團(tuán)隊(duì)或者一個(gè)從0到1的項(xiàng)目何乎，能將整個(gè)產(chǎn)品記錄并呈現(xiàn)出來(lái)句惯；

原型+標(biāo)注：更適合中小型團(tuán)隊(duì)或者項(xiàng)目；

標(biāo)注的目的主要是為了說(shuō)明功能點(diǎn)的前置條件與后置條件支救，清晰的描述功能是從哪里來(lái)抢野，怎么用，做什么各墨，到哪里去指孤；

標(biāo)注示例：

技術(shù)是參考原型去開(kāi)發(fā)的，標(biāo)注是為了讓技術(shù)更好的理解產(chǎn)品，所以標(biāo)注清晰能大大減少團(tuán)隊(duì)間的溝通成本恃轩，提高工作的效率

互聯(lián)網(wǎng)產(chǎn)品常見(jiàn)頁(yè)面與功能分析

互聯(lián)網(wǎng)產(chǎn)品常見(jiàn)頁(yè)面與功能分析包含了首頁(yè)结洼、菜單、列表頁(yè)叉跛、詳情頁(yè)补君、個(gè)人資料頁(yè)、功能頁(yè)昧互、輔助與提示挽铁。

首頁(yè)

用戶進(jìn)入首頁(yè)時(shí)需要告訴用戶我是誰(shuí)；

首頁(yè)展示你產(chǎn)品重要的功能與內(nèi)容敞掘；

首頁(yè)操作應(yīng)盡量減少叽掘，用戶越喜歡使用；

合理布局玖雁，引導(dǎo)用戶向下（右）瀏覽更扁；

C端用戶多為推薦信息，B端用戶多為數(shù)據(jù)可視化赫冬；

導(dǎo)航浓镜，即入口，幫助用戶快速進(jìn)入某個(gè)頁(yè)面的功能劲厌，包含導(dǎo)航膛薛、目錄、列表等能引導(dǎo)用戶進(jìn)入詳情頁(yè)的功能补鼻；（詳細(xì)說(shuō)明見(jiàn)第11章導(dǎo)航類產(chǎn)品設(shè)計(jì)）

列表頁(yè)

圖文列表還是文字列表哄啄，注意列表間的分割，利用“緊密风范、對(duì)比咨跌、重復(fù)、對(duì)齊”的原則設(shè)計(jì)硼婿，讓列表看起來(lái)簡(jiǎn)單清晰锌半，自然易懂。

加載方式寇漫，分頁(yè)加載還是瀑布流加載刊殉；

排序方式，排序的規(guī)則一般會(huì)按照時(shí)間排序猪腕，還有熱度冗澈、推薦、字母等陋葡；

詳情頁(yè)：主要是幫助用戶瀏覽詳細(xì)信息亚亲，查詢關(guān)注的信息。內(nèi)容主要為圖文、視頻捌归、聲音肛响、商品等；

個(gè)人資料頁(yè)：個(gè)性化的信息展示頁(yè)面惜索，展現(xiàn)每個(gè)用戶的獨(dú)特性與重要性特笋；

功能頁(yè)

為了讓用戶快速完成任務(wù)的頁(yè)面或操作功能，大多數(shù)屬于過(guò)渡頁(yè)面巾兆，如注冊(cè)/登錄猎物、發(fā)布功能、搜索角塑、支付等

搜索蔫磨，用于搜索內(nèi)容，幫助用戶精準(zhǔn)的找到自己所需的信息或功能圃伶。一般位于頂部堤如；

提示功能

為幫助用戶減少認(rèn)知負(fù)荷而設(shè)計(jì)的頁(yè)面或提示語(yǔ)，如引導(dǎo)頁(yè)/啟動(dòng)頁(yè)窒朋、過(guò)渡頁(yè)搀罢、加載提示、浮層提示侥猩、彈窗提示榔至，toast提示等

其他：

狀態(tài)欄：用來(lái)呈現(xiàn)信號(hào)、時(shí)間拭宁、電量等信息洛退，Android系統(tǒng)還會(huì)顯示未讀信息的提示瓣俯。位于整個(gè)APP界面的頂部杰标。

控件是用戶可與之交互以輸入或操作數(shù)據(jù)的對(duì)象，例如：時(shí)間控件 ?分頁(yè)控件彩匕；

界面元素（interface element）是指可滿足交互需求的軟件或系統(tǒng)界面所包含的滿足用戶交互要求的一系列元素腔剂。

在數(shù)據(jù)庫(kù)中，大多數(shù)時(shí)驼仪，表的“列”稱為“字段”

頁(yè)面視圖用于顯示文檔所有內(nèi)容在整個(gè)頁(yè)面的分布狀況和整個(gè)文檔在每一頁(yè)上的位置掸犬，并可對(duì)其進(jìn)行編輯操作，具有真正的“所見(jiàn)即所得”的顯示效果绪爸。

產(chǎn)品的世界變化萬(wàn)千湾碎，還有很多未知需要我們深度探索。只有不斷去體驗(yàn)不同的產(chǎn)品奠货，才能培養(yǎng)和積累自己的設(shè)計(jì)感知介褥，從而設(shè)計(jì)出優(yōu)秀的產(chǎn)品；