畫(huà)原型是何設移動(dòng)端PM的必備技能，今天我來(lái)系統性的計a計軟件講解一下移動(dòng)端APP原型設計三部曲：定保真；畫(huà)頁(yè)面；加交互。
希??望通過(guò)這篇文章，原型p原能夠讓初級PM知道比較規范的設計設計原ヽ(′▽?zhuān)?/型設計步驟，而不是(shi)軟件盲目的根據自己的感覺(jué)來(lái)畫(huà)原型，來(lái)設計APP。型設希望可以讓大家(′?ω?`)少走(????)一些彎路。步曲
根據7年的何設產(chǎn)品運營(yíng)經(jīng)(jing)驗總結得來(lái)，不一定(ding)適合所有的(de)計a計軟件移動(dòng)端APP團隊，但是原型p原對于大部分中小團隊還是比??較有借鑒價(jià)值。
移動(dòng)端APP??原型設計三部曲，設計設計是軟件方法論，所以適用于所有的型設原型軟件，并不局限于A(yíng)xure RP。步曲
定保真正??式畫(huà)App原型之┐(′д｀)┌前??，何設需要明確“原(???)型該畫(huà)到什么程度”。因為它決定了PM的工作量多少以及產(chǎn)(′?ω?`)品上線(xiàn)?的質(zhì)量。
原型畫(huà)到什么程度，一般取決于上級的要求，或者延續團隊之前的習慣。當然也可以根據團隊實(shí)際能力以及上線(xiàn)要求來(lái)優(yōu)化原型交付標準。
不建議大家按照所謂的高保真、中保真、低保真原型來(lái)理解?？瓷先澐趾軐?zhuān)業(yè)，實(shí)際概念不清晰。所以(yi)我明確了他們的概念，方便大家理解其中的差異。
低保真=黑白線(xiàn)框圖，無(wú)交ヾ(′?｀)?互中保真=黑白線(xiàn)框圖，帶主要交互高保真=配色線(xiàn)框圖，帶全部交互一般來(lái)??說(shuō)低保真原型就能夠滿(mǎn)足設計和開(kāi)發(fā)需求。如果給甲方看可以使用中保真原型。高保真原型除了裝(zhuang)B很少用到。
畫(huà)頁(yè)(′▽?zhuān)?面畫(huà)頁(yè)面是畫(huà)原型(?⊿?)的必備工作，比如需要提前確定頁(yè)面的尺寸和位置，不過(guò)初級PM容易忽視關(guān)鍵步驟。
建議使用375×667來(lái)畫(huà)APP原型頁(yè)面，能夠上下兼容目前主流的所有屏幕分辨率?？蓞⒖寂f文章《為什么375×667是移動(dòng)端原型的最佳分辨率》。如果你的手機是( ?▽?)Android，那么使用360×640也可以。其他尺寸畫(huà)頁(yè)面會(huì )影響視覺(jué)設計師畫(huà)出有一定誤差的視覺(jué)稿。
不是特別建議PM在原型階段就把頁(yè)面中的元素進(jìn)行配色，會(huì )妨礙了視覺(jué)設計師的發(fā)揮。當然┐(′ー｀)┌如果你想提升自己對視覺(jué)的感覺(jué)，請配色之后只輸出黑白線(xiàn)框圖交付給視覺(jué)設計師(Axure是支持這樣的功能)。
加交互如果你只畫(huà)了所有頁(yè)面，就交付給設計和開(kāi)發(fā)，那么無(wú)疑是低保真原型。建議加上主要交互，以中保真原型的標準交付(′ω｀)給大家。
所謂的主要交互，首先是指頁(yè)面之間的跳轉。這個(gè)做起來(lái)很簡(jiǎn)單，但是能夠展示整個(gè)產(chǎn)品的(′?｀*)頁(yè)面關(guān)系。能夠讓設計和開(kāi)發(fā)快速的評估整個(gè)版本大概需要多少工作量?？蓞⒖寂f文章 《如何正確地畫(huà)出頁(yè)面流程(cheng)圖》。
其次，可以把APP中的下導航、上導航、常見(jiàn)toast、彈層一并畫(huà)出來(lái)，方便讓大家了解頁(yè)面內的交(jiao)互體驗??。如果提前做成APP元件庫然后快速調用，效率就特別高。
不建議100%的把所有交互畫(huà)出來(lái)，部分交互特別復???雜會(huì )浪費很多時(shí)間，還不如直接寫(xiě)文字邏輯表述。
總結定保真& 畫(huà)頁(yè)面& 加交互，這??就是我理解的APP原型設計三部曲。
就我所知ヽ(′ー｀)ノ大部分初級PM只知道第二步“畫(huà)頁(yè)面”，往往忽視定保真和加交互的重要性。希望本文的經(jīng)驗能夠讓大家改變這樣的認知。