什么是原型呢？    

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

一、主要頁面原型

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

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

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

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

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

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

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

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

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

用途：

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

應注意幾點：

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

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

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

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

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

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

二、頁面流程圖

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

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

頁面流程圖要素

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

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

用途:

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

應注意的幾點:

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

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

本文轉發自