起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品經理必修課——如何做好原型設計
編輯導讀：原型設計是產品經理的一門必修課，是需要穩打穩扎的基礎工作。那么，如何才能做好原型設計？本文將從三個方面展開分析，與你分享。
原型界面：原型界面是APP不同界面展示出來的圖文效果，重點是功能和邏輯結構的梳理與呈現。
注意事項：
- 尺寸：考慮到小組的組員分別繪制原型圖，以及由于疫情在家辦公，溝通交流受到限制。應該事先考慮原型圖的尺寸，達成統一。包括常用組件尺寸、機模的位置。
- 字體：頁面中重點凸顯的內容，如字體元素顏色加重，按鈕或某個模塊采用深色塊填充。這樣做的目的是視覺設計師可以很快明確頁面元素的重要性層級，而不必一定要仔細閱讀頁面交互說明。
- 顏色：原型圖模塊背景或元素一般采用黑白灰色值，目的是避免給視覺設計師造成用色干擾。
- 字體：原型圖中使用相同的字體，保持所有頁面字體呈現一致性。字號要依據具體頁面中元素重要性的不同而定，一般來說為便于清楚查看，字號最小12px。
- 迭代：迭代頁面如果少且在現有基礎上進行優化，可以放在原頁面的下方，并且說明是迭代頁面；如果迭代是增加功能或者迭代頁面較多，可以新開頁面，將所有的迭代頁面放在文件夾內，標注是迭代二期或者三期
交互說明，簡單來說就是：原型圖邊上的注釋，對原型圖的解釋說明。
一、藍色區域——操作說明
- 用戶能做什么操作?比如輸入、點擊、滑動等。比如點擊輸入框提示文字消失、點擊某按鈕該按鈕出現顏色變化。
- 操作后有什么反饋?比如跳轉新頁面、出現彈框、面板切換、動畫效果等。 比如點擊“登錄”出現彈窗：賬號錯誤，請重新輸入。
- 不同狀態下的操作有什么限制?比如登陸和非登陸的狀態、會員和非會員的狀態、可用和不可用的狀態、互斥狀態、不同網絡條件等。 比如淘寶未登錄時僅可瀏覽商品界面，但當用戶進行某些個人行為操作時，如購買，收藏和關注等，此時會引導用戶去注冊登錄賬號。
- 不同狀態下的操作反饋有區別嗎?具體有什么區別? 比如對同一個按鈕，單點與長按的操作反饋會有區別嗎？要將區別寫的清楚、具體。
二、藍色區域——數據說明
- 數據怎么來的?是后臺上傳，用戶行為還是前臺寫死的數據? 比如積分商城里物品的價格就屬于后臺上傳。
- 數據的顯示有什么限制?比如字符長度、顯示尺寸、行數等限制。
- 數據是否存在為空的情況?如果是，為空怎么顯示?比如頭像，如果用戶沒有上傳頭像，該怎么顯示?
三、紅色區域——錯誤說明
- 異常操作：連續多次相同的操作給予的反饋，比如相同時間段內多次點擊發送短信驗證碼，應用會提示隔幾分鐘之后再來嘗試發送。
- 數據相關：服務器無法獲取數據，數據加載時間較長等。
- 頁面提示：尤其是對To c端的產品，經常會有運營活動，有關某活動即將上線、活動失效、服務下線、系統繁忙等提示就必不可少了。
一個基本點，所有的頁面都可以分為兩種狀態
- 進入時就能看見的狀態（以原型的方式進行表述，不用附帶文字說明）
- 操作后狀態（此部分需要進行描述）
模塊分類
模塊是將原型界面進行分解，說明操作后的變化，可以用數字標記，也可以將模塊單獨拿出來進行說明。
- 避免模塊小而雜：比如用戶昵稱、用戶頭像、個人簽名等都可以叫做用戶信息模塊，當標記模塊時，可以作為一個整體，不用單獨分開成很多模塊，這樣可以增強易讀性。
- 標記模塊時，要注意和原模塊大小相似，不能放大或者縮小，可以直接復制粘貼。
- 進行模塊分解要按照順序，比如從大至小，先個人信息，再頭像信息；或者從左至右，先王國，再首頁，再消息。
使用場景：
使用場景是為了更好的說明用戶進入這個頁面干什么，是指用戶在此頁面能夠進行哪些操作，比如積分商城頁面，用戶可以添加商品到購物車，查看商品信息、查看商品分類等。
全局說明：
全局說明是對整個頁面的信息狀態或對于整個頁面的概括
舉例：
- 數字規則，全部用阿拉伯數字顯示
- 頁面說明：是XX頁面，比如是領養頁面
- 用戶說明：針對XX用戶，比如領養頁面就是針對想要免費領養寵物的用戶
建議：
- 若交互原型有了調整（包括交互說明），一定要與團隊成員告知！！并提示修改位置（在哪個頁面）。就算改了一處小東西，也盡量和同步一下，不然后續對接出現很多問題。
- 交互說明不是一次能寫完的，實在對該產品不斷的使用和團隊的討論中一點點增加、修改、迭代更新?？紤]的不周全、寫的不全面是很正常的，所以我們必須多聽聽多方視角的聲音，并尊重、虛心接受他人的意見，不斷修改完善。
本文由 @仙女騎驢 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
產品經理學習中
評論
有幾處錯別字
頂頂頂
一樓
學到了