編輯導(dǎo)讀：原型設(shè)計(jì)是產(chǎn)品經(jīng)理的一門(mén)必修課，是需要穩(wěn)打穩(wěn)扎的基礎(chǔ)工作。那么，如何才能做好原型設(shè)計(jì)？本文將從三個(gè)方面展開(kāi)分析，與你分享。

原型界面：原型界面是APP不同界面展示出來(lái)的圖文效果，重點(diǎn)是功能和邏輯結(jié)構(gòu)的梳理與呈現(xiàn)。

注意事項(xiàng)：

• 尺寸：考慮到小組的組員分別繪制原型圖，以及由于疫情在家辦公，溝通交流受到限制。應(yīng)該事先考慮原型圖的尺寸，達(dá)成統(tǒng)一。包括常用組件尺寸、機(jī)模的位置。
• 字體：頁(yè)面中重點(diǎn)凸顯的內(nèi)容，如字體元素顏色加重，按鈕或某個(gè)模塊采用深色塊填充。這樣做的目的是視覺(jué)設(shè)計(jì)師可以很快明確頁(yè)面元素的重要性層級(jí)，而不必一定要仔細(xì)閱讀頁(yè)面交互說(shuō)明。
• 顏色：原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺(jué)設(shè)計(jì)師造成用色干擾。
• 字體：原型圖中使用相同的字體，保持所有頁(yè)面字體呈現(xiàn)一致性。字號(hào)要依據(jù)具體頁(yè)面中元素重要性的不同而定，一般來(lái)說(shuō)為便于清楚查看，字號(hào)最小12px。
• 迭代：迭代頁(yè)面如果少且在現(xiàn)有基礎(chǔ)上進(jìn)行優(yōu)化，可以放在原頁(yè)面的下方，并且說(shuō)明是迭代頁(yè)面；如果迭代是增加功能或者迭代頁(yè)面較多，可以新開(kāi)頁(yè)面，將所有的迭代頁(yè)面放在文件夾內(nèi)，標(biāo)注是迭代二期或者三期

交互說(shuō)明，簡(jiǎn)單來(lái)說(shuō)就是：原型圖邊上的注釋?zhuān)瑢?duì)原型圖的解釋說(shuō)明。

一、藍(lán)色區(qū)域——操作說(shuō)明

• 用戶(hù)能做什么操作?比如輸入、點(diǎn)擊、滑動(dòng)等。比如點(diǎn)擊輸入框提示文字消失、點(diǎn)擊某按鈕該按鈕出現(xiàn)顏色變化。
• 操作后有什么反饋?比如跳轉(zhuǎn)新頁(yè)面、出現(xiàn)彈框、面板切換、動(dòng)畫(huà)效果等。 比如點(diǎn)擊“登錄”出現(xiàn)彈窗：賬號(hào)錯(cuò)誤，請(qǐng)重新輸入。
• 不同狀態(tài)下的操作有什么限制?比如登陸和非登陸的狀態(tài)、會(huì)員和非會(huì)員的狀態(tài)、可用和不可用的狀態(tài)、互斥狀態(tài)、不同網(wǎng)絡(luò)條件等。 比如淘寶未登錄時(shí)僅可瀏覽商品界面，但當(dāng)用戶(hù)進(jìn)行某些個(gè)人行為操作時(shí)，如購(gòu)買(mǎi)，收藏和關(guān)注等，此時(shí)會(huì)引導(dǎo)用戶(hù)去注冊(cè)登錄賬號(hào)。
• 不同狀態(tài)下的操作反饋有區(qū)別嗎?具體有什么區(qū)別? 比如對(duì)同一個(gè)按鈕，單點(diǎn)與長(zhǎng)按的操作反饋會(huì)有區(qū)別嗎？要將區(qū)別寫(xiě)的清楚、具體。

二、藍(lán)色區(qū)域——數(shù)據(jù)說(shuō)明

• 數(shù)據(jù)怎么來(lái)的?是后臺(tái)上傳，用戶(hù)行為還是前臺(tái)寫(xiě)死的數(shù)據(jù)? 比如積分商城里物品的價(jià)格就屬于后臺(tái)上傳。
• 數(shù)據(jù)的顯示有什么限制?比如字符長(zhǎng)度、顯示尺寸、行數(shù)等限制。
• 數(shù)據(jù)是否存在為空的情況?如果是，為空怎么顯示?比如頭像，如果用戶(hù)沒(méi)有上傳頭像，該怎么顯示?

三、紅色區(qū)域——錯(cuò)誤說(shuō)明

• 異常操作：連續(xù)多次相同的操作給予的反饋，比如相同時(shí)間段內(nèi)多次點(diǎn)擊發(fā)送短信驗(yàn)證碼，應(yīng)用會(huì)提示隔幾分鐘之后再來(lái)嘗試發(fā)送。
• 數(shù)據(jù)相關(guān)：服務(wù)器無(wú)法獲取數(shù)據(jù)，數(shù)據(jù)加載時(shí)間較長(zhǎng)等。
• 頁(yè)面提示：尤其是對(duì)To c端的產(chǎn)品，經(jīng)常會(huì)有運(yùn)營(yíng)活動(dòng)，有關(guān)某活動(dòng)即將上線、活動(dòng)失效、服務(wù)下線、系統(tǒng)繁忙等提示就必不可少了。

一個(gè)基本點(diǎn)，所有的頁(yè)面都可以分為兩種狀態(tài)

• 進(jìn)入時(shí)就能看見(jiàn)的狀態(tài)（以原型的方式進(jìn)行表述，不用附帶文字說(shuō)明）
• 操作后狀態(tài)（此部分需要進(jìn)行描述）

模塊分類(lèi)

模塊是將原型界面進(jìn)行分解，說(shuō)明操作后的變化，可以用數(shù)字標(biāo)記，也可以將模塊單獨(dú)拿出來(lái)進(jìn)行說(shuō)明。

• 避免模塊小而雜：比如用戶(hù)昵稱(chēng)、用戶(hù)頭像、個(gè)人簽名等都可以叫做用戶(hù)信息模塊，當(dāng)標(biāo)記模塊時(shí)，可以作為一個(gè)整體，不用單獨(dú)分開(kāi)成很多模塊，這樣可以增強(qiáng)易讀性。
• 標(biāo)記模塊時(shí)，要注意和原模塊大小相似，不能放大或者縮小，可以直接復(fù)制粘貼。
• 進(jìn)行模塊分解要按照順序，比如從大至小，先個(gè)人信息，再頭像信息；或者從左至右，先王國(guó)，再首頁(yè)，再消息。

使用場(chǎng)景：

使用場(chǎng)景是為了更好的說(shuō)明用戶(hù)進(jìn)入這個(gè)頁(yè)面干什么，是指用戶(hù)在此頁(yè)面能夠進(jìn)行哪些操作，比如積分商城頁(yè)面，用戶(hù)可以添加商品到購(gòu)物車(chē)，查看商品信息、查看商品分類(lèi)等。

全局說(shuō)明：

全局說(shuō)明是對(duì)整個(gè)頁(yè)面的信息狀態(tài)或?qū)τ谡麄€(gè)頁(yè)面的概括

舉例：

• 數(shù)字規(guī)則，全部用阿拉伯?dāng)?shù)字顯示
• 頁(yè)面說(shuō)明：是XX頁(yè)面，比如是領(lǐng)養(yǎng)頁(yè)面
• 用戶(hù)說(shuō)明：針對(duì)XX用戶(hù)，比如領(lǐng)養(yǎng)頁(yè)面就是針對(duì)想要免費(fèi)領(lǐng)養(yǎng)寵物的用戶(hù)

建議：

• 若交互原型有了調(diào)整（包括交互說(shuō)明），一定要與團(tuán)隊(duì)成員告知??！并提示修改位置（在哪個(gè)頁(yè)面）。就算改了一處小東西，也盡量和同步一下，不然后續(xù)對(duì)接出現(xiàn)很多問(wèn)題。
• 交互說(shuō)明不是一次能寫(xiě)完的，實(shí)在對(duì)該產(chǎn)品不斷的使用和團(tuán)隊(duì)的討論中一點(diǎn)點(diǎn)增加、修改、迭代更新?？紤]的不周全、寫(xiě)的不全面是很正常的，所以我們必須多聽(tīng)聽(tīng)多方視角的聲音，并尊重、虛心接受他人的意見(jiàn)，不斷修改完善。

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

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