編輯導(dǎo)語(yǔ)：原型作為整個(gè)產(chǎn)品的設(shè)計(jì)基礎(chǔ)，它承擔(dān)了產(chǎn)品三大文檔PRD的內(nèi)容來(lái)源，產(chǎn)品經(jīng)理通過(guò)原型將自己的思考進(jìn)行轉(zhuǎn)化，與他人交流。在做原型時(shí)，需要注意很多細(xì)節(jié)，需要不斷完善、循序漸進(jìn)。當(dāng)然原型也是一個(gè)不斷重復(fù)完善的過(guò)程，需求討論-結(jié)構(gòu)-流程-原型，這個(gè)流程不斷循環(huán)，來(lái)完善和查漏補(bǔ)缺原型。

原型作為我們產(chǎn)品三大文檔PRD的內(nèi)容來(lái)源，以及整個(gè)產(chǎn)品設(shè)計(jì)基礎(chǔ)。產(chǎn)品經(jīng)理通過(guò)原型將思考需求時(shí)整理的流程圖、結(jié)構(gòu)圖等文檔進(jìn)行具象化（原型），方便思維交流。

一份好的原型的核心就是讓看不懂的人可以看懂。圍繞這個(gè)可以把原型分為三個(gè)大塊。

一、原型頁(yè)面

產(chǎn)品原型可以概括地說(shuō)是整個(gè)產(chǎn)品面市之前的一個(gè)框架設(shè)計(jì)。原型頁(yè)面就是功能的展現(xiàn)方法和展現(xiàn)形式進(jìn)行繪制。例如登錄功能，是一鍵登錄、賬號(hào)密碼登錄還是手機(jī)號(hào)登錄，或者都要，這些功能放在什么位置，以及用什么展現(xiàn)給用戶(hù)。

原型的注意事項(xiàng)：

• 頁(yè)面邏輯、層級(jí)要清晰。
• 不要上顏色，會(huì)對(duì)UI的工作產(chǎn)生影響以及浪費(fèi)時(shí)間。
• 設(shè)計(jì)統(tǒng)一，文字、功能布局、功能位置等都采用統(tǒng)一模式，方便閱讀。
• 真實(shí)信息，原型上的東西盡可能真實(shí)。例如評(píng)價(jià)，即可能編寫(xiě)或者找一些評(píng)價(jià)，而不是用XXXX評(píng)價(jià)代替。真實(shí)評(píng)價(jià)更有代入感。

禁止單獨(dú)出現(xiàn)些沒(méi)有統(tǒng)一含義的圖形，要么配上文字，要么用統(tǒng)一含義的圖形。例如放一個(gè)矩形在原型上代表logo，你不說(shuō)別人肯定不懂你這是什么意思，在矩形中加上文字說(shuō)明就可以很方便讓人理解。

二、功能模塊

功能模塊是為交互說(shuō)明做鋪墊，這個(gè)展現(xiàn)方法不盡相同，可以直接在頁(yè)面上標(biāo)記123……和交互說(shuō)明的123……一一對(duì)應(yīng)，也可以是把頁(yè)面功能單獨(dú)拎出來(lái)，對(duì)這個(gè)小的模塊進(jìn)行交互說(shuō)明。每個(gè)人習(xí)慣各不相同，我的習(xí)慣是把它單獨(dú)拎出來(lái)進(jìn)行交互說(shuō)明。這樣從排版、可讀性等方面都好一些。

功能模塊注意事項(xiàng)：

• 根據(jù)從上到下從左到右原則來(lái)排序。
• 要以大模塊進(jìn)行排序，例如登錄頁(yè)面的賬號(hào)、密碼，這些可以合并為一個(gè)登錄模塊，這樣可以把頁(yè)面內(nèi)容進(jìn)行大分類(lèi)，不會(huì)很散。

三、交互說(shuō)明

交互說(shuō)明是為了對(duì)整個(gè)頁(yè)面進(jìn)行向規(guī)則說(shuō)明，也是原型里面最重要的一部分，其他人看的就是這個(gè)交互說(shuō)明。交互說(shuō)明寫(xiě)頁(yè)面操作后有什么變化，是跳轉(zhuǎn)還是出現(xiàn)彈窗。

交互說(shuō)明注意事項(xiàng)：3+1原則

一個(gè)基本點(diǎn)：所有頁(yè)面都要2種狀態(tài)：

1. 一種進(jìn)入就看得見(jiàn)的狀態(tài)
2. 一種操作以后顯示的狀態(tài)（隱藏狀態(tài)） 易錯(cuò)點(diǎn)

三個(gè)維度：

1. 按鈕圖標(biāo)等操作以后出現(xiàn)的狀態(tài)變化
2. 刷新加載數(shù)字顯示等頁(yè)面規(guī)則
3. 錯(cuò)誤提醒、彈窗等操作規(guī)則

易犯錯(cuò)誤點(diǎn)：

• 返回鍵注意跳轉(zhuǎn)鏈接
• 協(xié)議頁(yè)面也要畫(huà)
• 注冊(cè)和登陸信息的錯(cuò)誤提醒
• 沒(méi)有內(nèi)容是怎么提示
• 頁(yè)面字?jǐn)?shù)要有限制
• 設(shè)計(jì)設(shè)計(jì)的真實(shí)性

四、使用場(chǎng)景

使用場(chǎng)景為了向別人介紹在什么場(chǎng)景下會(huì)用這個(gè)功能，比如定位頁(yè)面，用戶(hù)在獲取本地優(yōu)惠時(shí)使用定位。

五、全局說(shuō)明

交代這個(gè)頁(yè)面的大的交互規(guī)則，全局說(shuō)明是對(duì)整個(gè)頁(yè)面進(jìn)行規(guī)則說(shuō)明。

例如頁(yè)面刷新需要幾秒時(shí)間、沒(méi)有網(wǎng)時(shí)顯示什么、彈窗出現(xiàn)幾秒就消失。

原型主要突出一個(gè)易讀性，一切都是圍繞著讓人看舒服、看得懂來(lái)進(jìn)行排版和設(shè)計(jì)的，畢竟原型也不是給自己看的，是與PD、PM、網(wǎng)站開(kāi)發(fā)工程師溝通的最好工具。

所以很多小細(xì)節(jié)真的要注意，可能你的一個(gè)沒(méi)注意，設(shè)計(jì)、開(kāi)發(fā)照著來(lái)產(chǎn)品就出問(wèn)題了，當(dāng)然原型也是一個(gè)不斷重復(fù)完善的過(guò)程，需求討論-結(jié)構(gòu)-流程-原型，這個(gè)流程不斷循環(huán)，來(lái)完善和查漏補(bǔ)缺原型。

本文由 @今夜睡橋底 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。