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

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

注意事項(xiàng)：

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

交互說明，簡單來說就是：原型圖邊上的注釋，對原型圖的解釋說明。

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

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

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

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

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

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

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

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

模塊分類

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

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

使用場景：

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

全局說明：

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

舉例：

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

建議：

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

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

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