1.3 隆重介紹Axure 7

Axure RP是一款制作網(wǎng)頁原型圖，或者叫作網(wǎng)頁線框圖的軟件（英文叫作Prototyping Software）。大家可以使用Axure RP制作出來逼真的、基于HTML代碼的網(wǎng)站原型，用于評估、需求說明、提案、融資、策劃等各種不同的目的。更精彩的是，該原型可以響應(yīng)用戶的點(diǎn)擊、鼠標(biāo)懸停、拖曳、提交表單、超鏈接等各種事件。除了真實(shí)的數(shù)據(jù)庫支持外，它幾乎就是一個真正的網(wǎng)站。它不僅僅是圖片，而是集合了HTML、CSS、JavaScript效果的，活生生的網(wǎng)站。使用Axure RP，能夠讓你在做出你想象中的網(wǎng)站之前，就先體驗(yàn)和使用你地網(wǎng)站！

Axure 7終于發(fā)布了。一個簡單的、彩色的新的Axure Logo也恰到好處地總結(jié)了新版本的最大特點(diǎn)：簡單、直觀，如右圖所示。

如同Apple的iOS 7操作系統(tǒng)一樣。新的Axure 7也有了革命性的變化。不僅界面變得更加友好，執(zhí)行的效率也有了很大的提高。在制作復(fù)雜的、多頁面的網(wǎng)站時，運(yùn)行效率和生成原型的速度都有了很明顯的提高。最可喜的是，Axure 7順應(yīng)了移動開發(fā)的趨勢，在原型的制作方面加入了對移動設(shè)備（智能手機(jī)和平板電腦）的支持。但是一旦你掌握了PC端的原型制作方法，制作移動端的原型就是水到渠成的事情。Axure 7讓你幾乎不需要花費(fèi)額外的心思，就可以在移動端原型的制作上達(dá)到同樣的熟練程度。簡單來說，只要你曾經(jīng)使用過之前版本的Axure軟件，那么使用Axure 7就毫不困難。一把更加鋒利又更好用的刀，誰不喜歡？

在第一章中，筆者先忍不住介紹了一下Axure 7的一些精彩的新功能。如果你覺得理解起來比較困難，不用著急，在接下來的章節(jié)中我們會使用實(shí)例進(jìn)行詳細(xì)的介紹。

1.3.1 更多的事件支持

如下圖所示。對于部件，Axure 7之前的版本僅支持如下3種事件。

? OnClick（單擊觸發(fā)）

? OnMouseEnter（鼠標(biāo)進(jìn)入觸發(fā)）

? OnMouseOut（鼠標(biāo)移出觸發(fā)）

而Axure 7極大地豐富了事件庫，同時也對一些經(jīng)常在移動端使用的事件做了很好的支持，如下圖所示。對于單一部件，Axure 7新增了對如下事件的支持。

? OnDoubleClick（雙擊時觸發(fā)）

? OnContextMenu（右鍵單擊觸發(fā)）

? OnMouseDown（鼠標(biāo)按鈕按下還未抬起時觸發(fā)）

? OnMouseUp（鼠標(biāo)按鈕按下抬起時觸發(fā)）

? OnMouseMove（鼠標(biāo)在部件上移動時觸發(fā)）

? OnMouseHover（鼠標(biāo)在部件上懸停2秒鐘以上時觸發(fā)）

? OnLongClick（單擊并且持續(xù)按住2秒鐘以上觸發(fā)——想象一下長按iPhone的Home鍵的效果）

? OnKeyDown(鍵盤按鍵按下還未抬起時觸發(fā)）

? OnKeyUp（鍵盤按鍵按下抬起時觸發(fā)）

? OnMove（部件移動時觸發(fā)）

? OnShow（部件展現(xiàn)時觸發(fā)）

? OnHide（部件隱藏時觸發(fā)）

? OnFocus(部件獲得焦點(diǎn)時觸發(fā)）

? OnLostFocus（部件失去焦點(diǎn)時觸發(fā)）

對于頁面，除了OnPageLoad（頁面加載時觸發(fā)），Axure 7新增了對如下的事件的支持，如下圖所示。

? OnWindowResize（頁面尺寸發(fā)生變化時觸發(fā)）

? OnWindowScroll（頁面發(fā)生滾動時觸發(fā)——現(xiàn)在可以捕捉到滾動條觸發(fā)的動作了）

? OnPageClick（頁面被單擊時觸發(fā)）

? OnPageDoubleClick（頁面被雙擊時觸發(fā)）

? OnPageContextMenu（頁面被右鍵單擊時觸發(fā)）

? OnPageMouseMove（鼠標(biāo)在頁面上移動時觸發(fā)）

? OnPageKeyDown（鍵盤按鍵按下還未抬起時觸發(fā)）

? OnPageKeyUp（鍵盤按鍵按下抬起時觸發(fā)）

? OnAdaptiveViewChange（當(dāng)自適應(yīng)視圖發(fā)生變化時觸發(fā)——自適應(yīng)視圖變化是指在移動端，例如手機(jī)從豎屏瀏覽變?yōu)闄M屏瀏覽）該事件能夠讓我們根據(jù)顯示設(shè)備的尺寸，自適應(yīng)地加載不同的部件布局以提供最優(yōu)的用戶體驗(yàn)。比如說，如果我們發(fā)現(xiàn)用戶是在PC上訪問網(wǎng)站，那么我們就展示桌面版本的網(wǎng)站；如果我們發(fā)現(xiàn)用戶是在平板電腦上瀏覽網(wǎng)站，我們就展示平板電腦版本的網(wǎng)站；而如果我們發(fā)現(xiàn)用戶是在使用手機(jī)訪問網(wǎng)站，我們就展現(xiàn)移動版本的網(wǎng)站。之后我們會用實(shí)例來具體說明這個事件。

對于Dynamic Panel（動態(tài)面板），除了普通部件新增的事件外，Axure 7還額外添加了如下的事件。

? OnClick（單擊觸發(fā)——以前居然沒有這個事件）

? OnLoad（動態(tài)面板加載時觸發(fā)）

? OnSwipeUp（向上滑動時觸發(fā)——想象在iPhone的界面上向上滑動手指）

? OnSwipeDown（向下滑動時觸發(fā)）

? OnScroll（滾動時觸發(fā)——該滾動是指內(nèi)嵌在動態(tài)面板中的內(nèi)容發(fā)生滾動，而不是頁面發(fā)生滾動）

? OnResize（動態(tài)面板尺寸發(fā)生變化時觸發(fā)）

這些新增的事件，能夠讓我們完成幾乎所有桌面和移動端的原型效果制作。大家很快就會看到通過組合這些看似簡單的事件和部件，我們能夠?qū)崿F(xiàn)強(qiáng)大的、逼真的效果。

1.3.2 快速Preview

Axure 7可以快速地讓用戶在瀏覽器中預(yù)覽當(dāng)前制作的頁面，然后再根據(jù)需要動態(tài)地生成HTML的頁面。而不是像之前的版本，每次都會生成所有頁面。這大大減少了加載等待的時間。比如制作一個有上百個頁面的原型，Axure 7可以讓你飛快地預(yù)覽當(dāng)前的工作頁面。而之前的版本，在生成原型的時候，要等待所有其他頁面加載完成。

1.3.3 文本輸入部件的輸入提示

我們經(jīng)常可以在網(wǎng)站的文本輸入部件中看到灰色的提示文字。當(dāng)輸入框獲得焦點(diǎn)時，該灰色提示文字消失，失去焦點(diǎn)時，如果用戶什么都沒有輸入，則提示文字還會重新出現(xiàn)。之前實(shí)現(xiàn)這個功能需要一定的交互設(shè)計(jì)和高級的Axure功能。但是現(xiàn)在，Axure 7把這個功能做成了一個部件屬性。Text Fields（文本輸入）和Text Area（多行文本輸入）部件都有這個功能。我們只需要選中空間后，在右側(cè)的部件屬性區(qū)域進(jìn)行設(shè)置就可以了，如下圖所示。還可以設(shè)置提示文字的顏色和字體。

1.3.4 豐富的輸入部件內(nèi)容

除了輸入文本、密碼等常規(guī)內(nèi)容，Axure 7對于輸入如下的內(nèi)容同樣做了支持。

? E-mail：輸入E-mail地址。

? Number：輸入數(shù)字，這個時候輸入部件會變?yōu)槿缦滤尽?/p>

? Phone Number：輸入電話號碼。

? URL：輸入超鏈接地址。

? Search：搜索，這個時候輸入部件會變?yōu)槿缦滤尽?/p>

? File：上傳文件，這個時候輸入部件會變?yōu)槿缦滤尽?/p>

用戶在選擇好文件后，“未選擇文件”部分會變成選擇好的文件名，如下所示。

? Date，Month，Time：年月日，年月和時間。選擇后輸入部件會分別變成如下的樣式。

1.3.5 新的部件形狀

如下圖所示，在Axure 7中，對于類似矩形這樣的部件，我們現(xiàn)在可以選擇的形狀和樣式比舊版多多了。例如心形、水滴、五角星、加號等常用的頁面形狀元素。

1.3.6 動態(tài)面板的新屬性

大家都知道在Axure中動態(tài)面板是一個非常重要的部件。所以，新版本對于動態(tài)面板也新增了功能。

動態(tài)面板現(xiàn)在可以動態(tài)適應(yīng)內(nèi)容。也就是說動態(tài)面板的大小會隨著其中內(nèi)容的變化而變化。針對動態(tài)面板的每個狀態(tài)，我們可以設(shè)置相應(yīng)的背景顏色和背景圖片，如下圖所示。

如下圖所示，動態(tài)面板的寬度可以被設(shè)置為100%，也就是說可以設(shè)置為整個瀏覽器的寬度。這樣當(dāng)瀏覽器的寬度發(fā)生變化的時候，動態(tài)面板也會跟著變化。

動態(tài)面板可以觸發(fā)其中部件的事件。例如，在動態(tài)面板上進(jìn)行鼠標(biāo)懸停，那么可以使所有動態(tài)面板中的部件顯示其鼠標(biāo)懸停時所觸發(fā)的事件。這只需要一個簡單的設(shè)置就可以。

1.3.7 切割圖片

除了將圖片切片外，新的Axure 7可以讓你直接切割圖片的某一個部分，如下圖所示。

用戶可以拖曳選擇框，選定后，雙擊鼠標(biāo)，選定的區(qū)域就被保留下來，圖片其他的部分就被刪除了。

1.3.8 所有部件都可以被隱藏

在Axure 7之前的版本中，只有動態(tài)面板可以被隱藏。但是現(xiàn)在，即使是一個單選部件，也可以被設(shè)置為隱藏，如下圖所示。

1.3.9 部件可以被設(shè)置為圓角、透明、陰影

在Axure 7中，部件可以被設(shè)置為圓角、透明、陰影，如下圖所示。

1.3.10 新的Widget Manager（部件管理器）

在Axure 7中，Widget Manager（部件管理器）取代了Dynamic Panel Manager（動態(tài)面板管理器）。

在同一個管理器中，可以管理包括動態(tài)面板在內(nèi)的所有當(dāng)前頁面中的部件，如下圖所示。

1.3.11 跨頁面的撤銷功能

在舊版的Axure中，你進(jìn)行了一個操作，然后切換到另外一個頁面進(jìn)行操作。那么這個時候，如果你切換回之前的頁面并且企圖使用撤銷功能（Ctrl+Z），你將會發(fā)現(xiàn)你無法撤銷上一個操作，因?yàn)樵谔D(zhuǎn)到另外一個頁面的過程中，Axure丟失了你之前操作的記錄。但是在新版中，每個頁面的撤銷操作都是單獨(dú)記錄的。你可以在頁面A撤銷頁面A中的最近的一次操作，也可以在頁面B撤銷頁面B中的最近的一次操作。完全不用擔(dān)心因?yàn)榍袚Q了頁面而丟失了操作記錄。

1.3.12 全新的部件類型——Repeater（循環(huán)列表部件）

Repeater（循環(huán)列表部件）可以用來非常方便地生成由重復(fù)Item（條目）組成的列表頁面，比如說商品列表、聯(lián)系人列表，等等。并且可以非常方便地通過預(yù)先設(shè)定的事件，對列表進(jìn)行新增條目、刪除條目、編輯條目、排序、分頁的操作。

比如說一個這樣的商品列表頁面，如下圖所示。

再比如類似百度的搜索結(jié)果那樣布局的列表頁面。只要是由重復(fù)元素組成的列表頁面，Repeater就可以大顯神威。

1.3.13 Adaptive View（自適應(yīng)視圖）的支持

對于一個網(wǎng)站，我們可以設(shè)定其在瀏覽器寬度寬于1024像素時，顯示桌面版本的視野；在寬度寬于768像素時，顯示平板電腦版本的視野，在寬度寬于640像素時，顯示手機(jī)版本的視野。自適應(yīng)視圖一旦設(shè)置成功，系統(tǒng)便會自動根據(jù)瀏覽器的寬度進(jìn)行選擇。下圖是某個公司的網(wǎng)站（希望它沒有倒閉）在不同的設(shè)備瀏覽器上的樣子。

桌面瀏覽器

平板瀏覽器

手機(jī)瀏覽器

1.3.14 Axure Share 發(fā)布平臺

在舊版的Axure中，項(xiàng)目只能被Publish（發(fā)布）到本地。如果要將網(wǎng)站原型分享給別人，只能通過發(fā)送生成的HTML文件，或者上傳到自己搭建的一個Web服務(wù)器上去。這樣對于有很多頁面的原型來說，十分麻煩，而且搭建自己的Web服務(wù)器也不是一件很容易的事情。現(xiàn)在有了Axure Share，我們就可以發(fā)布到Axure網(wǎng)站提供的服務(wù)器上去了。Axure會自動生成一個項(xiàng)目的URL地址。將這個地址發(fā)送給其他人，他們就可以訪問你的網(wǎng)站原型了。

簡單地理解，Axure Share就是一個Axure提供給所有用戶的一個免費(fèi)的Web服務(wù)器。免費(fèi)版本最多支持1000個項(xiàng)目和100M的存儲空間。

單擊“Publish to Axure Share”，如下圖所示。

然后你會看到如下的彈出窗口。

注冊一個Axure Share的賬戶，大概需要耗費(fèi)2分鐘的時間。然后使用該賬戶登錄，選擇項(xiàng)目名稱，項(xiàng)目的訪問密碼，項(xiàng)目的目錄路徑就可以將項(xiàng)目發(fā)布到Axure Share了。發(fā)布成功后，Axure會提供一個鏈接地址，如下圖所示。

發(fā)送這個地址給那些你希望他看到該原型的用戶，就可以迅速地分享了。

筆者建議大家每次都給項(xiàng)目加上一個訪問密碼，防止你的項(xiàng)目或者想法被別人發(fā)現(xiàn)。

1.3.15 高亮顯示所有有互動事件的部件

在生成原型后的瀏覽器界面中，我們可以看到如下的一個按鈕，“Highlight Interactive Elements”高亮顯示所有互動元素。

選擇這個按鈕后，原本頁面中所有添加了事件的部件都會被帶有光暈的顏色高亮顯示，如下圖所示。

這樣，我們就可以很清楚地辨別當(dāng)前頁面中哪些部件已經(jīng)添加了事件，哪些還沒有。

1.3.16 Site Map中變量跟蹤器

在生成原型后的瀏覽器界面中，我們可以看到有一個“X=”圖標(biāo)，單擊它，就可以看到當(dāng)前所有變量的當(dāng)前值，如下圖所示。

比如這個時候我們看到“OnLoadVariable”這個變量的值就是“Test”。這對于在復(fù)雜頁面中調(diào)試變量非常有幫助。

1.3.17 界面上的調(diào)整

整體來說，Axure 7與6.5相比，在界面上并沒有太大的變化，基本保持原狀。這樣，之前熟悉舊版Axure的用戶就可以很快地上手，如下圖所示。

在Axure 7中，如下的幾個地方發(fā)生了一些變化。

1．新的版本去掉了Page Notes這個部分。

2．將部件的屬性和樣式編輯器從部件互動事件部分分離了出來。

3．將動態(tài)面板編輯器變成了部件編輯器。從此我們可以在這里編輯所有的部件，而不僅僅是動態(tài)面板。

1.3.18 預(yù)置參數(shù)的添加

與之前的版本相比，Axure 7增加了許多新的預(yù)置參數(shù)。當(dāng)我們打開公式編輯器的時候，可以看到如下界面。

單擊“Intert Variable Function...”，就可以看到如下窗口。

這里，Axure預(yù)置了很多參數(shù)及公式。比如說上圖中的Window.width就可以直接獲得當(dāng)前窗口的寬度，而Window.scrollX可以獲得當(dāng)前在水平方向滾動的距離，而Cursor.x則可以獲得當(dāng)前鼠標(biāo)的橫坐標(biāo)位置。在之后的案例中我們會使用這些預(yù)置的參數(shù)完成原型的制作。