下面這篇是轉(zhuǎn)載淘寶UED部門的分享文章。25學(xué)堂將與大家來學(xué)習(xí)如何快速導(dǎo)出高品質(zhì)的移動APP產(chǎn)品設(shè)計原型。

總體的來說，只需要3步即可簡單完成?？赐曛?，你也應(yīng)該可以熟悉整個移動APP產(chǎn)品原型的設(shè)計流程。也可以從中如何去布置和安排團(tuán)隊(duì)每個成員的分工和協(xié)作。

有利于提高我們的工作效率。25學(xué)堂轉(zhuǎn)載該篇博文的目的在此。希望大家可以認(rèn)真閱讀。

第一步：輸出以UI界面為單位的產(chǎn)品流程圖

快速而高效輸出，首先要保證產(chǎn)品的整體思路要正確，這點(diǎn)可以從產(chǎn)品流程圖中體現(xiàn)出來。

移動APP產(chǎn)品需要做到聚焦，因?yàn)槭謾C(jī)界面的大小，用戶的碎片化使用等等，所以一個界面上必然不可能出現(xiàn)太多的內(nèi)容和行動點(diǎn)，這就保證了我們可以用最簡潔的方式來畫流程。

以界面為單位，定義 “界面標(biāo)題”和“主要內(nèi)容”，如下圖所示：

如何利用起這樣的界面單位來畫流程，如下圖：

絕對是干貨！

UX設(shè)計模板|適合iOS上的APP UI線框圖模板下載

這樣的一個產(chǎn)品流程圖，可以快速了解產(chǎn)品有多少界面，檢驗(yàn)用戶路徑是否太長，形式簡單，也方便討論修改。

第二步、學(xué)會使用可修改的基礎(chǔ)原型控件來快速設(shè)計產(chǎn)品原型

如何快速導(dǎo)出高保真原型圖？引用一套備用的基礎(chǔ)原型組控件必不可少。

當(dāng)然，也有大部分設(shè)計師一般使用axure來完成產(chǎn)品原型，或者是其他的移動原型工具。

所以從協(xié)同合作的角度，本文專門在axure里制作了整套最常用的移動產(chǎn)品組控件。設(shè)計師只要改文字，改顏色，擺位置就可以完成簡單的高保真原型。

點(diǎn)擊即可下載高保真的UI基礎(chǔ)組控件

下圖為APP設(shè)計組建控件UI。

以此控件為基礎(chǔ)，在之前提到的app登錄注冊例子，快速組件高保真原型，如下圖:

當(dāng)然，這里我們只是引用了一個注冊的案例來講解。我們25學(xué)堂也希望各位可以借鑒這個案例來舉一反三。如果有不明白的地方可以在網(wǎng)站底部加入我們的群。詳細(xì)來咨詢。

如果你還想要多了解移動APP設(shè)計上有很多細(xì)節(jié)，大家可以參看移動端UI設(shè)計必看的三本APP設(shè)計書籍，里面涉及到很多最基本的移動設(shè)計知識。

第三步、快速制作可點(diǎn)擊的移動APP動態(tài)原型

完成高保真原型，根據(jù)流程圖，可以很方便制作出在手機(jī)上可體驗(yàn)的動態(tài)效果，讓產(chǎn)品人員或則用戶真實(shí)感受app實(shí)際的效果。

這里推薦一個特別簡單的方法，登錄www.flinto.com，完成注冊，將高保真原型以圖片的方式倒入，通過鏈接和轉(zhuǎn)場方式選擇，就可以很方便在手機(jī)上查看。網(wǎng)站提供了比較具體的指導(dǎo)，大家可以直接查看。

或者大家也可以采用其他你比較熟悉的移動原型工具來完成可點(diǎn)擊的動態(tài)原型。

SKYUI設(shè)計技巧-關(guān)于Win8的“動態(tài)磁貼（Live Tiles)和“載入界面”(Splash Page)

最后，25學(xué)堂再啰嗦一下，大家務(wù)必要學(xué)會利用各個移動平臺現(xiàn)有的移動UI組件來設(shè)計我們的APP。這樣可以保證每個APP快速高效的開發(fā)。同時給用戶帶來熟悉的操作體驗(yàn)。

比你自己去創(chuàng)新想一個表現(xiàn)方式來的巧些。

原文地址：http://ued.taobao.org/blog/2014/05/%E9%AB%98%E6%95%88%E8%BE%93%E5%87%BA%E7%A7%BB%E5%8A%A8app%E4%BA%A7%E5%93%81%E5%8E%9F%E5%9E%8B/