什么是原型呢？    

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

一、主要頁(yè)面原型

在進(jìn)行主要頁(yè)面原型設(shè)計(jì)之前，交互設(shè)計(jì)師需要：    

• 一份主要的任務(wù)流程圖（此處指的不是“業(yè)務(wù)邏輯流程圖”，而是根據(jù)“業(yè)務(wù)邏輯”產(chǎn)生的“任務(wù)流程”。任務(wù)流程可由產(chǎn)品或是交互出，根據(jù)各個(gè)公司或項(xiàng)目的具體情況而定。）
• 一份主要功能列表（一般由產(chǎn)品經(jīng)理提供）
• 網(wǎng)站信息架構(gòu)（信息架構(gòu)在一些公司是需要交互設(shè)計(jì)師來(lái)完成的）
• 對(duì)于前期調(diào)研結(jié)果的理解

如何做“主要頁(yè)面原型”？

①.在建立項(xiàng)目的初期就開(kāi)始定義Master。    

項(xiàng)目一開(kāi)始啟動(dòng)，如果可以稍微掌握哪些區(qū)塊未來(lái)將是共享區(qū)塊，那么就開(kāi)始建立Master，比如網(wǎng)站的Header / Footer / 導(dǎo)覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節(jié)省其它頁(yè)面設(shè)計(jì)的重復(fù)工作。 ;   

②.可以應(yīng)用一些Axure RP library。    

網(wǎng)上有很多資源，如：。也可以自己制作適合產(chǎn)品的library。  

③.根據(jù)“任務(wù)流程圖”，“功能列表”將主要的頁(yè)面原型制作出來(lái)。    

這時(shí)可以包括一些必要的交互動(dòng)作。一些詳細(xì)的，比如出錯(cuò)提示等交互可以不用考慮。

用途：

主要的頁(yè)面原型可以用于產(chǎn)品初期的討論會(huì)、測(cè)試以及產(chǎn)品介紹會(huì)。  ;  

應(yīng)注意幾點(diǎn)：

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

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

因?yàn)槲?們的原型方案還沒(méi)有最終通過(guò)，肯定要通過(guò)多次迭代才能確定方案，太多的視覺(jué)設(shè)計(jì)就是浪費(fèi)時(shí)間；    

再者，如果原型做的十分逼真，在產(chǎn)品討論會(huì)上，視覺(jué)的元素會(huì)很快抓住大家的眼球，到時(shí)就會(huì)有領(lǐng)導(dǎo)來(lái)質(zhì)疑你的界面是不是該換成藍(lán)色，按鈕是不是再精致一些這樣的問(wèn)題。沒(méi)有人會(huì)專(zhuān)注于你的交互設(shè)計(jì)了。    

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

③.這個(gè)過(guò)程應(yīng)是快速的，迭代的。    

二、頁(yè)面流程圖

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

我傾向于將主要任務(wù)列出來(lái)，然后畫(huà)出所有任務(wù)的頁(yè)面流程圖。    

頁(yè)面流程圖要素

由于axure中沒(méi)有斜線(xiàn)，在表現(xiàn)流程的時(shí)候有些受限。我會(huì)在流程圖中表現(xiàn)以下幾點(diǎn)：    

• 操作步驟的名稱(chēng)和編號(hào)
•  開(kāi)始和結(jié)束
• 頁(yè)面的名字
• 點(diǎn)擊的位置
• 操作說(shuō)明和箭頭
• 步驟序號(hào)

用途:

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

應(yīng)注意的幾點(diǎn):

①.如果項(xiàng)目時(shí)間有限，頁(yè)面流程可以畫(huà)在紙上。但還是建議在交互設(shè)計(jì)保留這一步。

②.為了減少溝通成本，在繪制頁(yè)面流程圖時(shí)，最好有一定的規(guī)范和標(biāo)準(zhǔn)。

本文轉(zhuǎn)發(fā)自