如何高效輸出移動app產品原型？ 清晰的產品思路，順暢的協同合作，齊備的素材元素，真實的體驗感受…保證過程的高效，更要保證有效的成果。下面我們將分三步走，來完成高效輸出移動app產品原型。

高效好文：
《經驗分享：如何快速保存APP動效？》
《神器一籮筐：創建高保真的移動DEMO（工具篇）》

正文：

一、輸出以界面為單位的產品流程圖

高效輸出，首先要保證產品的整體思路要正確，這點可以從產品流程圖中體現出來。移動產品需要做到聚焦，因為手機界面的大小，用戶的碎片化使用等等，所以一個界面上必然不可能出現太多的內容和行動點，這就保證了我們可以用最簡潔的方式來畫流程。以界面為單位，定義 “界面標題”和“主要內容”，如下圖所示：

如何利用起這樣的界面單位來畫流程，下面以一個app的登錄注冊為例：

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

二、使用可修改的基礎原型控件

如何快速產出高保真原型？一套備用的基礎原型組控件必不可少。大部分設計師一般使用axure來完成產品原型，所以從協同合作的角度，本文專門在axure里制作了整套最常用的移動產品組控件。設計師只要改文字，改顏色，擺位置就可以完成簡單的高保真原型。 基礎組控件截圖如下：（組控件下載地址）

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

關于設計上很多細節，大家可以參看書籍【方寸指間——移動設計實戰手冊】，里面涉及到很多最基本的移動設計知識。

三、制作可點擊的動態原型

完成高保真原型，根據流程圖，可以很方便制作出在手機上可體驗的動態效果，讓產品人員或則用戶真實感受app實際的效果。這里推薦一個特別簡單的方法，登錄www.flinto.com，完成注冊，將高保真原型以圖片的方式倒入，通過鏈接和轉場方式選擇，就可以很方便在手機上查看。網站提供了比較具體的指導，大家可以直接查看。

原文地址：ued.taobao
作者：奕天

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量69萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：