什么是原型呢?

產(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ō)明：

在進(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è)面原型”

1. 在建立項(xiàng)目的初期就開始定義Master

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

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

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

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

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

用途：

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

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

　　1.不要加入視覺(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ì)專注于你的交互設(shè)計(jì)了。

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

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

　二、頁(yè)面流程圖

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

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

頁(yè)面流程圖要素

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

操作步驟的名稱和編號(hào)

開始和結(jié)束

點(diǎn)擊的位置

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

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

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

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

三、完善原型

頁(yè)面的主要頁(yè)面和頁(yè)面流程確定之后，就可以完善原型了。這時(shí)可以叫上產(chǎn)品部的同事一起來(lái)完成原型的細(xì)節(jié)工作。

如何完善原型

1. 按照頁(yè)面流程中所考慮的交互過(guò)程，體現(xiàn)在原型上面。出錯(cuò)，提示等交互細(xì)節(jié)也應(yīng)有體現(xiàn)。這時(shí)你可能會(huì)用到變量、層等高級(jí)axure技巧。

　2. 增加說(shuō)明

選中某個(gè)控件，在右邊區(qū)域可以為此控件增加說(shuō)明。

如果對(duì)于說(shuō)明區(qū)域的屬性不滿意，可以修改屬性：

不過(guò)這種增加描述的方式可能會(huì)干擾整個(gè)頁(yè)面，很容易讓瀏覽者以為是一個(gè)頁(yè)面元素。也可以采取一種原始的方法為控件增加說(shuō)明文字：

3. 為頁(yè)面編號(hào)

當(dāng)原型不再需要修改時(shí)，我們需要為原型頁(yè)面編號(hào)，這樣有利于與視覺(jué)設(shè)計(jì)師、前端溝通。

　用途

測(cè)試、產(chǎn)品需求文檔編寫參考、視覺(jué)設(shè)計(jì)參考、前端設(shè)計(jì)參考等。

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

1. 不要過(guò)于追求技術(shù)表現(xiàn)

原型有些交互效果做出來(lái)會(huì)很花費(fèi)時(shí)間，我建議不要過(guò)于追求技術(shù)表現(xiàn)效果，可以用些文字來(lái)說(shuō)明交互效果。Axure軟件的初衷是快速的設(shè)計(jì)原型，如果在一些技術(shù)方面交互設(shè)計(jì)師花費(fèi)很多時(shí)間的話，就有些顧此失彼了。還是把真實(shí)的效果交給前端去實(shí)現(xiàn)吧。

2. 為了減少溝通成本，在完善原型時(shí)，最好有一定的規(guī)范和標(biāo)準(zhǔn)。

　　總結(jié)

Axure其實(shí)只是一種交互工具而已，交互設(shè)計(jì)最重要的還是想法，工具只是來(lái)幫你表現(xiàn)想法的。不必過(guò)于追求技術(shù)，不必過(guò)于追求視覺(jué)表現(xiàn)。我們?cè)诎盐蘸谜麄€(gè)產(chǎn)品方向的同時(shí)，應(yīng)專注于交互流程、頁(yè)面內(nèi)交互、布局結(jié)構(gòu)的創(chuàng)新和優(yōu)化。

下面給大家介紹一些我工作之中記錄下來(lái)的axure技巧。

1.快速移動(dòng)頁(yè)面

大家有沒(méi)有感覺(jué)到，當(dāng)電腦配置低，頁(yè)面元素很多的時(shí)候，移動(dòng)頁(yè)面是一件極其痛苦的事情，有一個(gè)好的方法可以解決這個(gè)問(wèn)題：

在非輸入狀態(tài)下，按住鍵盤“空格”鍵，界面上的鼠標(biāo)“箭頭”會(huì)變成“手”，這樣就可以很輕松的拖動(dòng)頁(yè)面了。

在axure中“ctrl+c”“ctrl+v”復(fù)制粘貼，會(huì)錯(cuò)位復(fù)制一個(gè)組件。怎么解決這個(gè)問(wèn)題呢：

用快捷鍵“ctrl+d”可以原地復(fù)制一個(gè)組件。

　　3.復(fù)制動(dòng)作Copy Case

如下圖可以復(fù)制動(dòng)作，就不用一個(gè)個(gè)的設(shè)置這么麻煩了。

很實(shí)用，特別是在制作過(guò)程中發(fā)現(xiàn)有些東西還是放在層中展現(xiàn)更好的時(shí)候，以前得新建一個(gè)層，再把它們Copy進(jìn)去，現(xiàn)在只需要右鍵需要轉(zhuǎn)換的素材或控件Convert>>Convert To Dynamic Panel：

您可以一次選取多個(gè)Radio Button，按下鼠標(biāo)右鍵，并選擇“Edit Radio Button>>Assign Radio Group”來(lái)設(shè)定 Radio Button 的群組關(guān)系。如此一來(lái)，當(dāng)這些Radio Button輸出到Prototype 時(shí)，就會(huì)形成真正的單選用戶接口。

類似于網(wǎng)易車庫(kù)中的定位功能，點(diǎn)擊某一字母，頁(yè)面就會(huì)定位到同一字母所在的區(qū)域：

a)首先要用“image map region”在頁(yè)面上定位一個(gè)錨點(diǎn)，并命名為“定位錨點(diǎn)位置”：

設(shè)置完成，看看效果吧。

7.下拉框(droplist)的條件(condition)

這里講關(guān)于“條件”的簡(jiǎn)單例子。通過(guò)編輯條件，可以表現(xiàn)一些更高級(jí)的交互效果。

這個(gè)例子的效果是，用戶切換左邊的下拉框選項(xiàng)，右邊的提示文字會(huì)隨之變化。當(dāng)選中的是圖書時(shí)，文本框中的文字是“請(qǐng)輸入圖書名稱或作者”;當(dāng)選中音樂(lè)時(shí)，文本框中的文字是“請(qǐng)輸入音樂(lè)名稱或歌手”：

選擇“OnChange”

8.恢復(fù)文件Recover files

Recover files功能可以幫你找到幾天前的文件版本。

點(diǎn)擊file>>Recover file，打開對(duì)話框，你可以查看最近的文檔了：

9.利用Axure封裝視覺(jué)標(biāo)準(zhǔn)

看到的折折熊的一篇博客。

交互設(shè)計(jì)師一般都是出線框圖為最終產(chǎn)物，但是往往很多產(chǎn)品只需要利用現(xiàn)成的視覺(jué)標(biāo)準(zhǔn)就可以畫出原型。為了減少流程、降低溝通成本，所以我建議交互設(shè)計(jì)師在做類似產(chǎn)品的時(shí)候能夠直接利用現(xiàn)有視覺(jué)標(biāo)準(zhǔn)進(jìn)行原型的搭建，一般很多交互設(shè)計(jì)師會(huì)用Photoshop來(lái)實(shí)現(xiàn)視覺(jué)原型，但是效率和不可交互性還是存在很多問(wèn)題，所以需要有一套完成的封裝來(lái)執(zhí)行視覺(jué)標(biāo)準(zhǔn)并且產(chǎn)生可交互的高保真原型。

來(lái)源：網(wǎng)易UED