什么是原型呢？    

產品原型簡單的說就是產品設計成形之前的一個簡單框架，對網站來講，就是將頁面模塊、元素進行粗放式的排版和布局，深入一些，還會加入一些交互性的元素，使其更加具體、形象和生動。    
就我個人而言，目前使用頻率最多，最高效，交互效果最好的原型工具是axure。今天給大家介紹一些我在工作中使用axure的經驗。主要從交互設計中涉及的三個主要步驟進行說明：

一、主要頁面原型

在進行主要頁面原型設計之前，交互設計師需要：    

• 一份主要的任務流程圖（此處指的不是“業(yè)務邏輯流程圖”，而是根據“業(yè)務邏輯”產生的“任務流程”。任務流程可由產品或是交互出，根據各個公司或項目的具體情況而定。）
• 一份主要功能列表（一般由產品經理提供）
• 網站信息架構（信息架構在一些公司是需要交互設計師來完成的）
• 對于前期調研結果的理解

如何做“主要頁面原型”？

①.在建立項目的初期就開始定義Master。    

項目一開始啟動，如果可以稍微掌握哪些區(qū)塊未來將是共享區(qū)塊，那么就開始建立Master，比如網站的Header / Footer / 導覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節(jié)省其它頁面設計的重復工作。    

②.可以應用一些Axure RP library。    

網上有很多資源，如：。也可以自己制作適合產品的library。  

③.根據“任務流程圖”，“功能列表”將主要的頁面原型制作出來。    

這時可以包括一些必要的交互動作。一些詳細的，比如出錯提示等交互可以不用考慮。

用途：

主要的頁面原型可以用于產品初期的討論會、測試以及產品介紹會。    

應注意幾點：

①.不要加入視覺設計的元素。著眼于大局，不要糾結細枝末節(jié)    

在制作原型的初期請把所有精力都放在流程的優(yōu)化和布局設計上面吧，不要把時間浪費在視覺設計上，那樣絕對是得不償失。   ; 

因為我們的原型方案還沒有最終通過，肯定要通過多次迭代才能確定方案，太多的視覺設計就是浪費時間；    

再者，如果原型做的十分逼真，在產品討論會上，視覺的元素會很快抓住大家的眼球，到時就會有領導來質疑你的界面是不是該換成藍色，按鈕是不是再精致一些這樣的問題。沒有人會專注于你的交互設計了。    

②.最好在使用axure工具前，用紙和筆畫一些紙面原型，整理一下思路。    

③.這個過程應是快速的，迭代的。    

二、頁面流程圖

在確定主要頁面之后，我們可以開始細化頁面流程了。頁面流程圖有利于向大家展示自己的想法，也有利于思路的整理。畢竟axure上面的交互點是散的，通過頁面流程圖，我們可以整理所有的頁面上的交互行為，避免遺漏；在向他人展示的時候，也可以一目了然的看出需要的操作步驟是多少。    

我傾向于將主要任務列出來，然后畫出所有任務的頁面流程圖。    

頁面流程圖要素

由于axure中沒有斜線，在表現流程的時候有些受限。我會在流程圖中表現以下幾點：    

• 操作步驟的名稱和編號
•  開始和結束
• 頁面的名字
• 點擊的位置
• 操作說明和箭頭
• 步驟序號

用途:

可以與他人溝通流程、整理思路細化流程。 

應注意的幾點:

①.如果項目時間有限，頁面流程可以畫在紙上。但還是建議在交互設計保留這一步。

②.為了減少溝通成本，在繪制頁面流程圖時，最好有一定的規(guī)范和標準。

本文轉發(fā)自