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

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

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

一、原型頁面

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

原型的注意事項：

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

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

二、功能模塊

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

功能模塊注意事項：

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

三、交互說明

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

交互說明注意事項：3+1原則

一個基本點：所有頁面都要2種狀態(tài)：

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

三個維度：

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

易犯錯誤點：

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

四、使用場景

使用場景為了向別人介紹在什么場景下會用這個功能，比如定位頁面，用戶在獲取本地優(yōu)惠時使用定位。

五、全局說明

交代這個頁面的大的交互規(guī)則，全局說明是對整個頁面進行規(guī)則說明。

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

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

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

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

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