起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識做出規范的原型，這3步不可少（附KEEP源文件下載）
本文分享來自Axure實戰班第6期同學@?Coreleone：原型設計是交互設計師與PD、PM、開發工程師溝通的最好工具。本人將結合最近制作好的keep原型，與大家分享一些個人對畫原型的一些看法。
1. 合格原型應該是規范的
原型是用線條，圖形、字體等元素描繪的線框圖。對這些構成原型的基本元素進行規范的處理可以讓原型更加的高保真
1.1 字體
字體統一：選擇常用字體（微軟雅黑，黑體等）；字號統一：一級標題，二級標題，正文等字體描述字號大小保持一致；顏色規范：正文，標題等代表不同功能的字體做出一定的顏色區分。
1.2 間距
適當的留白可以使整個作品畫面，模塊間更為協調精美。
小提示：字體統一是為了避免同事間使用原型時因為字體原因出現頁面錯亂的問題。
2. 搭建你的產品的整體框架和各個頁面的流程圖
任何產品的設計都離不開流程的構建，它是后續產品架構，用戶交互的地基。構建好你的產品各個頁面的功能流程圖，構畫原型時更有效率。
從上面的流程圖中，你可以清楚的知道完成登錄操作需要登錄頁面、輸入手機號和密碼頁面以及各個頁面的跳轉邏輯。它可以使你避免丟失重要頁面，更有效制作demo。
左側導航清晰的層級關系，可以讓程序員們很清楚的知道你的產品的整體架構，頁面間的關系，減少他們索引的時間。
3. 了解你原型的輸出對象
產品原型貫穿于整個項目鏈，它輸出的下一個節點就是我們的程序猿們，如何更好的讓程序猿讀懂我們的原型，是我們在繪制原型中重要考慮的因素，因為他們是你的產品用戶。
頁面的內容被我拆分成不同模塊，對不同的版塊說明它包含的內容、功能、交互、操作邏輯。程序員可以清晰的知道他要做的事情。在對頁面的內容進行說明時，頁面一定要簡潔，不要把解釋寫的”遍地開花，箭頭亂飛“，這給程序員的體驗會非常差勁，可能直接”提刀“找你了。對版塊的解釋要盡可能的清晰，簡單，這樣可以減少程序員理解你原型的時間。最后在嘮叨一句，對頁面的分解和內容說明一定要規范，左邊放頁面，右邊放文字（怎么放都行，個人習慣），頁面的統一對程序員的體驗也是影響很大的。
小提示：多和你公司的程序猿溝通交流，聽取他們對你制作的原型的建議，形成一定的共識后，會很有利于你的原型設計。
4. 總結
在實際工作中，每個團隊對原型的要求程度不一樣，所以產出的原型圖側重點不同，與你家的設計師、程序員達成一定的共識，設計出有助于他們理解的原型即可。在原型的動效制作上前期不要太過于注重，能黑紙白字的注釋就不要花太多功夫制作，能簡則簡。但界面的流程，邏輯一定要理清，相信我，這樣做你后期的路會越來越來越順。
小提示：原型圖分為兩種：低保真原型圖和高保真原型圖。我們一般輸出低保真原型圖給設計和程序，因為這時候我們需要在提高自己工作效率的同時更好的幫助開發人員理解需求。高保真原型圖制作是在設計師的設計圖出稿后，結合設計圖產出可操做的有逼格的原型圖，這時候原型圖的動效幾乎和程序寫出的非常貼合。公司可用高保真原型圖進行對外的宣傳或者對某一新功能進行一定用戶的體驗來獲得用戶對這一新功能的體驗反饋。
以上是我在制作keep原型以及結合自己工作經驗做的總結，希望可以幫助同是剛進入產品這條崎嶇路的新人們。
感謝閱讀~
源文件下載：
keep源文件下載鏈接：https://pan.baidu.com/s/1qV6yAKCn9nY1BhrSDQvR9Q 密碼：83xd
（注：若提示鏈接不存在，刷新或者更換瀏覽器重進即可）
參考文章：
Axure實戰班，“騰訊課堂&起點學院”聯合辦學，是專門給產品經理設計的Axure課程。
通過6周的系統學習，5次作業實戰，將能做出規范的Axure低保真原型，認真學習也能做出帶有交互效果的高保真原型。戳這里，了解Axure實戰班，快速提升Axure水平
本文由 @Coreleone 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pixabay，基于 CC0 協議
謝大佬分享
瞬間感覺自己對這個頁面說明可能太隨意了 從最開始沒有 只有交互 到現在有備注說明 但還是不規范 此文有借鑒意義哈~希望能有很好的文章后續分享 ??
哥們目前是KEEP的產品員呀？寫的還不錯，加油，相信哥們會越來越優秀
比方說，等級說明在另一個文檔嗎？
我覺得還是應該有prd的，prd 原型，但是現在互聯網求快，溝通變強，文檔這些開始退化了。