起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識移動端APP原型設計三部曲
畫原型是移動端PM的必備技能，今天我來系統性的講解一下移動端APP原型設計三部曲：定保真；畫頁面；加交互。
希望通過這篇文章，能夠讓初級PM知道比較規范的原型設計步驟，而不是盲目的根據自己的感覺來畫原型，來設計APP。希望可以讓大家少走一些彎路。
根據7年的產品運營經驗總結得來，不一定適合所有的移動端APP團隊，但是對于大部分中小團隊還是比較有借鑒價值。
移動端APP原型設計三部曲，是方法論，所以適用于所有的原型軟件，并不局限于Axure RP。
定保真
正式畫App原型之前，需要明確“原型該畫到什么程度”。因為它決定了PM的工作量多少以及產品上線的質量。
原型畫到什么程度，一般取決于上級的要求，或者延續團隊之前的習慣。當然也可以根據團隊實際能力以及上線要求來優化原型交付標準。
不建議大家按照所謂的高保真、中保真、低保真原型來理解?？瓷先澐趾軐I，實際概念不清晰。所以我明確了他們的概念，方便大家理解其中的差異。
- 低保真=黑白線框圖，無交互
- 中保真=黑白線框圖，帶主要交互
- 高保真=配色線框圖，帶全部交互
一般來說低保真原型就能夠滿足設計和開發需求。如果給甲方看可以使用中保真原型。高保真原型除了裝B很少用到。
畫頁面
畫頁面是畫原型的必備工作，比如需要提前確定頁面的尺寸和位置，不過初級PM容易忽視關鍵步驟。
建議使用375×667來畫APP原型頁面，能夠上下兼容目前主流的所有屏幕分辨率。可參考舊文章《為什么375×667是移動端原型的最佳分辨率》。如果你的手機是Android，那么使用360×640也可以。其他尺寸畫頁面會影響視覺設計師畫出有一定誤差的視覺稿。
至于位置更少有PM關注，但是它影響著你在手機上預覽原型的展示區域。像墨刀、xiaopu、justmind默認幫你把位置設為(0,0)，而Axure，mockplus是無限畫布需要PM手動設置。不設置的后果就是手機上預覽原型的時候很難看到頁面內容。
確定頁面尺寸和位置后，接下來就是用原型軟件畫出一個個頁面?？蓞⒖寂f文章《如何使用Axure規范的畫出頁面的線框圖》。
不是特別建議PM在原型階段就把頁面中的元素進行配色，會妨礙了視覺設計師的發揮。當然如果你想提升自己對視覺的感覺，請配色之后只輸出黑白線框圖交付給視覺設計師(Axure是支持這樣的功能)。
加交互
如果你只畫了所有頁面，就交付給設計和開發，那么無疑是低保真原型。建議加上主要交互，以中保真原型的標準交付給大家。
所謂的主要交互，首先是指頁面之間的跳轉。這個做起來很簡單，但是能夠展示整個產品的頁面關系。能夠讓設計和開發快速的評估整個版本大概需要多少工作量?？蓞⒖寂f文章 《如何正確地畫出頁面流程圖》。
其次，可以把APP中的下導航、上導航、常見toast、彈層一并畫出來，方便讓大家了解頁面內的交互體驗。如果提前做成APP元件庫然后快速調用，效率就特別高。
不建議100%的把所有交互畫出來，部分交互特別復雜會浪費很多時間，還不如直接寫文字邏輯表述。
總結
定保真& 畫頁面& 加交互，這就是我理解的APP原型設計三部曲。
就我所知大部分初級PM只知道第二步“畫頁面”，往往忽視定保真和加交互的重要性。希望本文的經驗能夠讓大家改變這樣的認知。
#專欄作家#
浪子，業務型PM，浪子PRD文檔51prd.com，公眾號langzisay。
本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 unsplash，基于 CC0 協議
干貨
一般使用 ??
實用
很實用