交互原型設計軟件 Axure RP Pro 5 中文教程

先提供Axure RP pro 4.6版本的下載
http://www.jojobox.cn/blog/attachments/month_0803/AxureRP-Pro-Setup.zip
(軟件僅供學習使用,反對商業用途 -_-!!!)
Part I : 介紹(Introduce)
  互聯網行業產品經理的一項重要工作,就是進行產品原型設計(Prototype Design)。而產品原型設計最基礎的工作,就是結合批註、大量的說明以及流程圖畫框架圖wireframe,將自己的產品原型完整而準確的表述給UI、UE、程序工程師,市場人員,並通過溝通會議,反覆修改prototype 直至最終確認,開始投入執行。
  進行產品原型設計的軟件工具也有很多種,我寫的這個教程所介紹的Axure RP,是taobao、dangdang等國內大型網絡公司的團隊在推廣使用的原型設計軟件。同時,此軟件也在產品經理圈子中廣爲流傳。之所以Axure RP得到了大家的認同和推廣,正是因爲其簡便的操作和使用,符合了產品經理、交互設計師們的需求。
  在正式談Axure RP之前,我們先來看看做產品原型設計,現在大致有哪些工具可以使用,而他們的利弊何在。
  紙筆:簡單易得,上手難度爲零。有力於瞬間創意的產生與記錄,有力於對文檔即時的討論與修改。但是保真度不高,難以表述頁面流程,更難以表述交互信息與程序需求細節。
  Word:上手難度普通。可以畫wireframe,能夠畫頁面流程,能夠使用批註與文字說明。但是對交互表達不好,也不利於演示。
  PPT:上手難度普通。易於畫框架圖,易於做批註,也可以表達交互流程,也擅長演示。但是不利於大篇幅的文檔表達。
  Visio:功能相對比較複雜。善於畫流程圖,框架圖。不利於批註與大篇幅的文字說明。同樣不利於交互的表達與演示。
  Photshop/fireworks:操作難度相對較大,易於畫框架圖、流程圖。不利於表達交互設計,不擅長文字說明與批註。
  Dreamweave:操作難度大,需要基礎的html知識。易於畫框架圖、流程圖、表達交互設計。不擅長文字說明與批註。
  以上這些工具,都是產品經理經常會使用到的,但是從根本上來說,這些工具都不是做prototype design的專門利器,需要根據產品開發不同的目的,不同的開發階段,選擇不同的工具搭配使用,才能達到表達、溝通的目的。
  比如使用紙筆,更適合在產品創意階段使用,可以快速記錄閃電般的思路和靈感;也可以在即時討論溝通時使用,通過圖形快速表達自己的產品思路,及時的畫出來,是再好不過的方法。而word則適合在用文字詳細表達產品,對產品進行細節說明時使用,圖片結合文字的排版,是word最擅長的工作。而ppt自然是演示時更好。visio則可以適用於各種流程圖、關係圖的表達,更可通過畫use case 獲取用戶需求。PS/FW是圖片處理的工具,DW則是所見即所得的網頁開發軟件,這些是設計師的看家本領,對於普通的產品經理來說,需要耗費太多的精力去掌握。
  其實每件工具,每個軟件,在創造它的初期,軟件設計師們都給它賦予了性格、氣質。因爲每個工具的產生,都是爲了滿足人類的某一方面需求。比如鋤頭是鋤土的,起子是起螺絲的,電熨斗是燙衣服的。但是不同的工具都有自己的工作領域,在其他領域它並不擅長。而以上的軟件在創造的初期,並非爲了幫助產品經理、ue完成產品原型設計,因此他們都不能在prototype design 這件工作上得心應手。而Axure RP正是在互聯網產品大張其道的前提下,爲滿足prototype design創建的需求,應運而生。
   
  Axure RP 能幫助網站需求設計者,快捷而簡便的創建 基於目錄組織的原型文檔、功能說明、交互界面以及帶註釋的wireframe網頁,並可自動生成用於演示的網頁文件和word文檔,以提供演示與開發。
  沒錯!Axure RP 的特點是:
快速創建帶註釋的wireframe文件,並可根據所設置的時間週期,軟件自動保存文檔,確保文件安全。
在不寫任何一條html與javascript語句的情況下,通過創建的文檔以及相關條件和註釋,一鍵生成html prototype演示。
根據設計稿,一鍵生成一致而專業的word版本的原型設計文檔。
  說到這裏相信很多人已經激起了興趣,但是在開始學習之前,我認爲我們還是有必要先了解一下軟件短短的歷史,創造這一軟件的公司—Axure Software Solutions, Inc.該公司創建於2002年五月,Axure RP是這一軟件公司的旗艦產品,2003年一月Axure RP第一版本上線發表,至今已經正式發行到了第四個版本,而我提筆寫到這裏的時候,Axure 5.0版本beta版本已經正式提供下載試用,雖然我已經下載使用,但是我想,寫教程還是應該先從穩定的4.6版說起,至於5.0版,我們可以伴隨着軟件一起成長。
  接下來我會結合圖片,分幾個步驟分享我對Axure的認識,
  一、 界面與功能
  二、 工具欄
  三、 站點地圖
  四、 組件與使用方法
  五、 複用模板與使用
  六、 交互功能與註釋
  七、 實例
  當然,在書寫的過程中我會根據具體的情況再進行調整,儘量做到圖文並茂,易於理解。寫這個教程的目的,一方面爲自己熟悉與更加理解Axure,另一方面也鞭策自己完善自己的blog網站www.2tan.net,同時也希望以自己的綿薄之力,爲希望學習Axure的朋友分享一點經驗。由於這是我第一次嘗試寫教程,難免會出現偏頗,也希望朋友們能夠不吝賜教,共同進步。
  爲e文好的朋友附上自學Axure RP的幾個途徑:
  1、 打開軟件,按F1調取幫助文檔,對照文檔學習。
  2、 登錄http://www.axure.com/au-home.aspx 查看flash視頻學習。
  3、 登錄 Axure 博客 http://axure.com/cs/blogs/Default.aspx,瞭解軟件最新信息。
  4、 登錄討論組http://axure.com/cs/forums/Default.aspx,參與討論。
 
Part II : 界面與功能(Interface & Function)

  不論學習什麼,打基礎是很重要的。關於基礎練習,我印象最深的故事是王羲之練習書法的故事,將一池水染黑,需要怎樣的毅力?再有就是達芬奇與雞蛋的故事,一個簡單的雞蛋,達芬奇畫了無數次。我相信正是他們的一步一個腳印,才讓他們有了後來偉大的成就。故事老套,道理淺顯,可是我認爲很重要。
  學習軟件,應該先熟悉每個面板,每個基礎功能,才能夠真正談到運用。所以我的學習方法是瞭解軟件的基礎功能開始。
  一、歡迎界面與功能
   

  運行Axure RP後,首先彈出的是歡迎界面,它擁有的功能和其他軟件的歡迎界面沒有什麼特別的不同。
  功能區1:文檔區,這個區域顯示用戶最近打開的Axure RP文件,用戶可以快捷的打開之前編輯的文件。同時也提供快捷按鈕,可以創建新文檔與打開Axure RP默認文件夾。
  功能區2:認證區,這個區域顯示註冊信息。
  已經註冊的用戶,顯示註冊者名稱,與已經獲得認證的圖標。
  未註冊用戶,顯示註冊鏈接,引導用戶完成註冊註冊。
  功能區3:Axure RP學習中心。主要包括在線學習、幫助文檔、問題反饋三個環節。
  a、在線學習提供了三個鏈接:
  video tutorial:點擊後進入視頻學習中心,可以通過觀看相關的flash教程學習Axure RP,不過都是e文解說。
  online community:進入Axure RP的官方討論組,在線討論學習。
  Axure blog:進入Axure的官方論壇,瞭解最新資訊。
   
  b、幫助文檔也提供了兩個鏈接,但是其實起到的是一樣的效果,都是打開幫助文檔,只是跳往不同的章節罷了。
  c、問題反饋,通過點擊鏈接可以發郵件到[email protected],以尋求獲得幫助。
  在歡迎界面中,Axure還提醒用戶,用4.6高版本的軟件創建保存的Axure文件,無法用以前的低版本查看。
  同時,如果我們不希望下次打開軟件再看到這個面板,我們可以通過選擇“Don't show this at startup”實現。
  二、軟件主界面與功能
   

  關閉歡迎界面後,我們進入軟件的主界面,淡藍色調的ui,並不是很張揚。
  功能區1:命令區,和我們操作的所有office軟件一樣,包含文件、編輯、查看和幫助,這些功能大抵是差不多的。table也很容易理解,就是對錶格編輯的命令。而Axure特有的幾個特殊的命令欄目是
    a、wireframe:線框,包含所有畫原型線框圖的相關命令。
    b、object:包含所有對工作區物體的操作命令,操作放入工作區的所有widgets,包括組合、排序、鎖定以及腳註命令等。
    c、generate:自動生成html演示文件、word說明文檔,以及對生成規則進行自行編輯、定義。
  功能區2:工具欄,基本和office風格一模一樣,功能也很容易上手。
  功能區3:工作區,這就是我們平常操作工具,創建prototype的舞臺,將自己的構思在這裏釋放,將自己的想法在這裏展現。
  工作區的上部顯示打開的文件名,可同時打開多文檔,進行操作。
  功能區4:站點地圖,Axsure RP創建的文件是模擬真實網站頁面關係的,sitemap就是通過樹形目錄關係,管理所有的站點頁面文件與流程圖文件。科學的文件關係結構,對有效的演示文檔與生成易讀的說明文檔相當重要。
  我的操作習慣是先畫流程圖,然後根據流程圖構建頁面文件框架,最後纔開始頁面的具體設置。期間可以將文件分爲LOFI(低保真)與HIFI(高保真)兩個部分進行分別展示,有利於不同的需求者使用。
  功能區5:器具箱,囤積了所有用來畫wireframe與流程圖的對象。我們可以通過拖拽的方式將小圖形放入工作區,進行操作。對於這裏面的對象,我們有必要一一詳細瞭解。
  功能區6:複用模塊區,這裏創建的頁面文件和sitemap的頁面相似,唯一不同的是,master的每個文件,可以當作一個整體,被sitemap反覆調用。這個功能就相當於程序開發中的程序複用,用好這個功能,可以減少我們很大一部的工作量。也更容易理解網頁文件的關係,瞭解網頁設計師、程序員是怎麼構建網站的頁面的。
  功能區7:頁面筆記,用來對當前創作頁面進行註釋與說明。同時可以在這裏對頁面裏的關鍵字段和特殊問題進行詳細的描述。
  功能區8:頁面載入時的交互功能。通過在這裏設置,不同條件下,頁面初次打開時的狀況。
  功能區9:註釋與交互區。這個註釋和交互和7、8不同,7、8針對的是頁面,而9針對的是頁面中的元素,也就是一個個widgets。
  功能區的上面部分設置交互條件。通過鼠標點擊、滑入、滑出,設置觸發的事件,與對應widgets相應的變化。這一部分對沒有程序基礎的人可能會有一點難度,我稍後會做詳細解釋。
  功能區的下面部分是註釋部分,用戶可以對選定的對象進行詳細的註釋。Axure已經設置了幾個默認的註釋字段,但是其實這些默認的註釋字段,大家完全可以不使用,因爲它可能和你要說明的東西風馬牛不相及。
   
  那麼該怎麼辦呢?Axure提供了自主設置字段,只要你自己設置好自己常用的字段,然後按照自己的習慣編寫就可以了。比如說你要說明對象的功能、優先級、參數,那麼你在設置中加入這三個字段就好了。Axure最大的優勢就是你設置的這些註釋,在生成說明文檔時,Axure自動幫你生成PRD規格的表格文檔,你可以省去相當大的編號工作,與文檔工作。這些我在之後也會做說明。
  這些就是Axure的主要功能區,但是其實還有兩個小的角落大家可能會忽略,那就是6、7、8區下面的一行系統信息,這裏顯示的信息很重要,但是一般人卻經常會忽視。我只所以說重要,因爲我們在給ui設計師wireframe的時候他們總會問,這裏多少像素,那裏多少像素,可是我們在畫wireframe的時候卻無法度量。Axure創建的wireframe,完全可以生成html,因此我們可以在畫的時候就度量好每個像素距離。但是我們要怎麼做呢?這就需要利用到下面這行小信息欄了。
  信息欄左邊顯示的是文檔保存情況。而右邊呢,當你將一個widgets放入工作區,並選擇這個widget時,這裏就有用了,它顯示的是你所選擇widget的高寬,以及距離頁面頂部和左邊的px距離。通過使用上下左右鍵,結合這個信息欄,你可以一步一步將它移動到你想去的地方。有意思吧?
Part III : 文檔管理(Document)
  
  開章要說的是文檔管理。文檔管理看似簡單,但是這是從操作功能上來說的,而我在說功能上的時候,想把我對文檔管理的理解也一併說一下。
  文檔管理的目的,其實是爲了有一個清晰的產品思路。剛開始工作的時候,我發現很多剛從學校出來的朋友對文檔的命名與放置都是隨心所欲的,我也不例外。沒有好的整理習慣,這直接導致每次尋找先前的文檔都要花費相當長的時間,甚至不小心誤刪,如果恰好有事請假,別的同事也無法接手工作。
  所以,做一個prototype需要首先構建一個清晰的文檔關係,這樣一方面能夠讓自己清楚文件關係與位置,更主要的是讓開發者與接受者能清晰理解你的思路,生成更合理的產品說明word文檔。
  Axure RP的sitemap,與windows的樹形目錄相似,是以父子關係構建頁面關係的,每個頁面既可以是一個頁面page,也可以是一個流程圖flow。
一、工具功能條
   

  1、增加一個子頁面:爲所選擇的頁面創建一個子頁面。
  2、頁面上移:同等級的頁面中,將所選頁面的上下排列次序,上移一個位置。
  3、頁面下移:同等級的頁面中,將所選頁面的上下排列次序,下移一個位置。
  4、頁面降序:將所選頁面等級降序,作爲原等級中,排列在所選頁面上方之頁面的子頁面。
  5、頁面升序:將所選頁面等級升序,將所選頁面的頁面等級,升序爲父頁面的同等級頁面。
  6、刪除頁面:將所選頁面刪除,同時刪除其子頁面。
  7、編輯頁面:在工作區打開所選擇頁面,進行編輯。
二、右鍵—增加爲鼠標右擊文件所顯示命令,下同。
   

  1、增加一個子頁面:同 一,1。(表示和第一大點,第1小點功能相同,以下同此)
  2、在所選頁面之上增加一個同等級頁面。
  3、在所選頁面之下增加一個同等級頁面。
三、右鍵—移動
   

  1、頁面上移:同一,2。
  2、頁面下移:同一,3。
  3、頁面降序:同一,4。
 4、頁面升序:同一,5。
四、右鍵—複製
   

  1、複製頁面:複製所選頁面,作爲同級頁面顯示在所選頁面下方。不包含所選頁面子頁面。
  2、複製分支:複製所選頁面以及子頁面,作爲同級分支顯示在所選頁面分支下方。
五、右鍵—頁面類型
   
  1、wireframe:頁面類型定爲線框圖,文件圖標顯示頁面圖標。
  2、flow:頁面類型定位流程圖,文件圖標顯示流程圖標。
六、右鍵—其他
   

  1、刪除頁面:同一、6。
  2、重命名頁面:爲所選頁面重命名。
  3、編輯頁面:同一、7。
  4、生成流程表:將所選頁面以及其子頁面關係,生成流程圖。生產圖有兩種頁面佈局方式可選。標準模式,頁面按照父子關係從上自下排列;階梯模式,頁面按照父子關係從左上至右下,以階梯方式進行排列。
  5、複製頁面鏈接到剪切板。
  以上就是sitemap所有命令,其實這些命令都很簡單,也很容易理解,關鍵在於怎麼去使用。
  由於頁面有兩種類型,wireframe與flow,所以要善於用這兩種標記頁面,從而讓人理解你的意圖。我總結大致這兩種標記可以如下利用。
  flow圖爲父頁面,wireframe圖爲子頁面:先畫流程圖,然後根據流程圖構建頁面關係。這樣在流程圖的指引下結構頁面關係,可以更清晰的理解頁面框架。
  wireframe爲父頁面,flow爲子頁面:爲頁面線框圖中的特殊部分做流程解釋。可以對頁面的細節部分進行詳盡的解釋。
  當然,這兩種結構方式要活學活用,在複雜的產品頁面結構中,他們完全是你中有我,我中有你的。
Part IV : 模板複用(Templates)
   

  masters和sitemap面板很相似,文檔操作也一樣,它們的本質區別是,sitemap裏的文件是最終展示頁面,masters裏的文件卻只是一個模塊,是頁面的一個部分。
  masters的英文直譯是主人或僱主,但是我認爲這裏可以叫做模板,或者複用模塊。masters的文件,是頁面中重複的模塊,由於在不同頁面中這些模塊是一樣的,所以拿出來作爲一個模塊編輯,然後在不同頁面中進行調用。
  這個功能類似於網頁程序開發中的程序複用,不同頁面中調用同一段程序,一般把這段程序單獨做成一段頁面程序,然後用include命令進行調用。master的文件就相當於這段被調用的頁面程序。dreamweaver也有類似的功能,就是template,可以參照理解。
一、功能條
  master的功能條功能基本和sitemap一模一樣,功能也基本一樣。唯一不同的是master可以創建文件夾,可以通過文件夾收納不同的文件,因此唯一不同的就是第一個功能按鈕,功能作用是增加一個文件夾。
二、右鍵單擊文檔——增加
   

  增加功能的功能模塊功能除了增加文件夾其他和sitemap相同,大家可以參考教程三中的二大條。
  而masters的文檔組織結構主要依靠文件夾完成,頁面文件之間不存在父子關係。這是文檔操作與組織中與sitemap的最大不同。
三、右鍵單擊文檔——移動
   

  文件移動功能基本上也和sitemap完全相同,但是父子關係的文檔移動是文件相對於文件夾完成,而不是相對於文件進行。
  功能,基本上也可以參考教程三的第三點。
四、右鍵單擊文件——文件身份“行爲”
   

  behavior是行爲的意思,這個功能是axure升級到4版本後加入的,是針對master的不同使用情況而添加的一個功能,也是要重點介紹的功能。
  1、normal:普通文件。就是一般的複用文件。是默認創建的複用文件。
  2、place in background:定位的複用模板,這類模板的特點是定位於頁面的底層,並且鎖定模板中的widgets在他原來創建的位置。這類複用模塊主要用於創建head、foot、側邊欄等明確定位的複用模塊。
  3、custom widgets behavior:自定義模塊。這類模塊就類似於自創了一個widgets。
  這類模塊與其他類型的複用模塊的不同在於,其他模塊與複用到頁面的模塊是完全相同的,模塊的功能設置是什麼,功能說明是什麼,頁面中的模塊設置和功能說明就是什麼。
  而自定義模塊與頁面中被複用的模塊是母子關係。自定義模塊只決定了模塊的功能和位置,但是進入到特定的頁面中,模塊中的各自部分的說明和功能可以重新定義。
  充分理解三種不同類型的複用模塊的區別,根據不同環境有效的選擇,也是非常重要的。
五、右鍵單擊文件——其他
   

  1、2、3功能都是文檔文檔操作功能,和sitemap一樣,分別是刪除、重命名和編輯master。
  4、5功能是對應的。前者是將所選模板文件批量運用於頁面,後者是將所選模板文件,批量從頁面中去除。通過選擇此功能,會彈出sitemap文件的樹形目錄,你可以通過選擇需要添加模板的頁面,從而完成模板使用或移除。
  check all:選擇所有頁面
  uncheck all:所有頁面都不選擇
  check all children:選擇所選頁面以及其所有子頁面
  uncheck all children:不選擇所選頁面以及其所有字頁面
  在4中有特殊的position設置和options命令,
  position中有兩個命令
  place in blackground:將文件至於頁面背景
  specify location:是特殊定位,可以通過設置距離左側和上邊的距離,來將模板文件放入特定的位置。 
  options裏的多選框的意思是“只有頁面中沒有此模板時才置入”,默認是選擇的。如果不選擇而置入頁面,就會出現如果頁面中已經有模板,模板被再次置入的情況。當然如果有特殊需要的模塊,就可以這麼使用了。
  6、usage report:使用報告,點擊後彈出面板,顯示所有使用了此複用模板的列表,顯示的是文件名稱,通過雙擊文件名,可以在工作區打開,直接編輯。
PartV:Widget工具
  Axure RP的widgets工具欄,就是我們用來畫線框圖wireframe、流程圖flow的工具,也可以說是組成我們最終輸出圖表的零件。好比我們小時候玩的組裝積木,這些工具就是組裝積木裏的一個個小部件,組成什麼?組合得怎樣?完全依靠個人的經驗和智慧。因此,熟悉每一個工具的用法和用途,才能隨心所欲的畫出腦海中的圖形。
  Widgets工具欄,下分兩類工具:
  wireframe線框圖工具:基本上對應着web頁面中的各種圖形。針對頁面中交互行爲的表達,Axure RP專門增加了image map region 圖像映射區、dynamic panel動態面版、menu(vertical/horizontal)水平/垂直菜單等幾個特殊的工具。
  Flow工具:流程圖所需的基本圖形框架。
  我們先談wireframe線框圖工具。學習這部分工具,如果事先有html基礎,或者對web頁面元素有比較充分的理解,就很容易入手。以下我根據圖片中的編碼,依次講解。
   

  1、image圖片:給wireframe中插入一個圖片站位,也可以直接置入真實的圖片。
  2、text panel文本:插入文本。相當於插入了一個< text >標籤。是不帶鏈接的文本。但是其實也可以帶鏈接,在interactions中我們會提到。
  3、hyperlink超鏈接:插入帶鏈接的文本。相當於插入了一段帶< a >標籤的文字。但其實在Axure中它與普通文本除了外型不同,沒有本質區別。
之所以將兩類文字區分開來,目的還是爲了在視覺表達中讓人直觀的理解鏈接文本和普通文本,而這對於設計人員理解也非常重要,因此建議畫圖時儘量標準的區分鏈接文本和普通文本。
  4、rectangle矩形:插入一個矩形。可以對其進行圖形樣式編輯。此圖形通暢被用來表達板塊的邊界。
  5、placeholder佔位符:插入一個佔位符。佔位符通常用來表達在頁面中某些特殊區域,比如情況複雜,或者在系統升級中不需要修改,又或者無關緊要的區域等等。作者需要結合說明文字,進行對應的詳細表達。
  6、button按鈕:插入一個按鈕,相當於< button >標籤。按鈕一般結合表單使用,當然也可以作爲強化的提示鏈接使用。
  7、teble表格:插入一個表格。Axure的表格使用起來不是很方便,增加行、列,修改行、列寬度都不方便,算是一個敗筆。期待在下一個版本的時候能夠有更好的進步。與標準化製作網頁一樣,表格的使用在畫wireframe的時候就應該明確其作用,是用來作爲數據列表展示使用,而不是作爲網頁佈局的控件。
  8、text field文本輸入框:結合表單使用。一般用作表單中提交數據。比如搜索框、用戶登錄框、註冊信息填寫框等。用作字段提交或單行數據提交。
  9、text area文本區:結合表單使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。
  10、droplist下拉列表框:結合表單使用。一般用作下拉菜單或者下拉列表選項,比如在搜索中,可以通過下拉列表框來定位搜索分類的範圍。也有人用它來做友情鏈接,可以通過下拉選擇直接進行頁面跳轉。
  11、listbox列表選擇框:結合表單使用。通過文本框列表選項,通常使用在多項列表選擇,比如在填寫簡歷表的時候,選擇你所感興趣的行業,會提供列表選擇框。不過列表選擇框都會結合按鈕使用。
  12、checkbox多項選擇:多項選擇通常使用在表單中,以提供多項選擇。比如在有些有些註冊要求用戶選擇興趣愛好,會提供十多個選項,因爲選項可以並列進行,因此使用的是多項選擇。
  13、raido button單項選擇:在一組選擇中選擇適合選項,選項關係非此即彼。比如在填寫性別的時候提供男女選擇,用戶非男即女,只取一項。當然,不排除再多提供一個雙性選擇,這樣就是三選一,但是同樣是非此即彼的單一選擇。
  14、15、horizontal line水平線、vertical line垂直線:用以分割頁面中的不同板塊區域。由於web頁面中只能存在垂直與水平線,爲了系統生成用於演示的html文件,特將兩種線條分開使用。
  16、button shape形狀按鈕:相當於圖形按鈕,多用於導航,或者多幀切換的版面切換按鈕。可進行邊角編輯。
  17、image map region圖像映射區:它用於在web頁面中製造一片不可見的區域,一般是圖片的部分區域,相當於圖片的熱區,從而添加說明與互動。在現實的網頁中經常會有一張大圖中有某個區域是觸發按鈕,而圖像映射區就可以用來說明這個區域的的功能和互動內容。
  18、inline frame框架:類似於html中的< iframe >對象。用於在頁面中製造頁面框架,每個框架中嵌入不同的頁面。我們經常看到後臺系統分左右兩欄,一般都是使用了框架,左側載入的是導航頁面,右側是載入的管理頁面。
Axure的缺點是,暫時不支持百分比,因此iframe都是按像素度量的,和實際頁面效果還是有差距。
  19、dynamic panel動態面版:是Axure爲了表現多幀區域內容而製造的一個工具。它的圖標很形象的說明了它的結構。它是不同的state疊加的一個動態區域,默認顯示其中一個state,當用戶觸發按鈕、圖片或者下拉列表等時,可以設置相應動態面版切換到不同的state。不同state的關係,類似於photoshop的層,也類似於html中的css屬性layer。
我們可以通過右擊dynamic panel進行state編輯,然後通過打開對應state進行編輯,編輯方式和編輯頁面相同。
  20、21、menu(vertical/horizontal)水平/垂直菜單:用於製作水平或者垂直的菜單,可以添加漂浮的的子菜單,添加方法很簡單,就是選擇所要添加的菜單項,添加submenu。
   Axure RP pro 的widgets工具欄,另一個重要的工具組就是flow,流程工具。
  
  對於畫流程圖,是我們經常會遇到的問題。我們和程序工程師溝通,用再多的口水,也無法挑明的事情,畫一張簡明的流程圖,就能很直白的說明關鍵問題。
  有時候你可能會懊惱,因爲程序員的思維猶如計算機,你告訴他爲什麼沒有用,你就告訴他該怎麼做,是左是右,是0是1就好了。這個時候,產品經理需要的是理性思維,清晰的思路,如果你不清晰,工程師大多數會跟着你的思路亂做一團。所以多畫幾個流程,多根據頁面需求畫清晰的流程,就能解決實際的問題。
  話不多說,本章主要介紹flow裏面的工具,因爲圖形其實很好介紹,簡單的英文翻譯就好了,所以也順帶說說這些圖形在流程裏的作用。方式還和以前一樣,編號,對號入座,咱們來一個蘿蔔,一個坑:
  1、rectangle:矩形
  作用:一般用作要執行的處理(process),在程序流程圖中做執行框。
  在axure中如果是畫頁面框架圖,那麼也可以指代一個頁面。有時候我會把頁面和執行命令放在同一個流程中做說明,這個時候將兩類不同的矩形做色彩區別,然後做說明就好了。
  2、rounded rectangle:圓角矩形或者扁圓
  作用:表示程序的開始或者結束,在程序流程圖中用作爲起始框或者結束框。
  3、beveled rectangle:斜角矩形
     作用:斜角矩形我幾乎不使用,可以視情況自行定義。或者在其他的流程圖中,有特殊含義,暫不知曉,也希望有識之士指點一二。
  4、diamond:菱形
     作用:表示決策或判斷(例如:If...Then...Else),在程序流程圖中,用作判別框。
  5、file:文件
     作用:表達爲一個文件,可以是生成的文件,或者是調用的文件。如何定義,需要自己根據實際情況做解釋。
  6、bracket:括弧
     作用:註釋或者說明,也可以做條件敘述。一般流程到一個位置,做一段執行說明,或者特殊行爲時,我會用到它。
  7、semicircle:半圓形
     作用:半圓在使用中常作爲流程頁面跳轉、流程跳轉的標記。
  8、triangle:三角形
     作用:控制傳遞,一般和線條結合使用,畫數據傳遞。
  9、trapezoid:梯形
     作用:一般用作手動操作。
  10、ellipse:橢圓形或圓形
     作用:如果畫小圓,一般是用來表示按順序數據的流程。
     如果是畫橢圓形,很多人用作流程的結束。如果是在use case用例圖中,橢圓就是一個用例了。
  11、hexagon:六邊形
     作用:表示準備之意,大多數人用作流程的起始,類似起始框。
  12、parallelogram:平行四邊形
     作用:一般表示數據,或確定的數據處理。或者表示資料輸入(Input)。
  13、actor:角色
     作用:來自於use case 用例,模擬流程中執行操作的角色是誰。需要注意的時,角色並非一定是人,有時候是機器自動執行,有時候也可是是模擬一個系統管理。
  14、database:數據
     作用:就是指保存我們網站數據的數據庫。
  15、image:圖片
     作用:表示一張圖片,或者置入一個已經畫好的圖片、流程或者一個環境。
  基本上,axure講基本流程圖、頁面框架圖、use case 用例圖涉及到的一些關鍵圖形都囊括在flow流程工具中,模糊了流程圖的區別,而儘量貼近交互設計時的工作內容。
  流程圖無疑只是一個表達的工具,我們在使用的時候應該根據自己的實際情況使用,而不應該死鑽牛角尖,非要知道某個圖形的通用標準。理解和溝通是第一位的。而對於某些具有標準性含義的圖形,大家人所共知,則我們應該遵循共同的準則,這樣就能達到表達的目的。
  其實axure裏面由於不涉及到具體的程序流程,所以有些標準的圖形並沒有提供,如不規則圖形、側面雙矩形等,大家可以自己google一下或者baidu一下很容易就知道。大多數情況下,還是自己自定義一下自己的符號標準,就跟prd文檔加上名詞解釋一樣,纔是解決方法。

 PartVI:註釋annotations
  

  Axure rp將interaction交互與annotations註釋說明功能放在了一個面版上,同時又針對整個頁面有一個交互與註釋說明。
  交互功能設置的是用戶通過不同方式觸發頁面中元素或者載入頁面時,發生的交互動作。而註釋說明則用文字詳細說明對應元素的細節或頁面的說明。由於針對整個頁面的說明和交互,與針對頁面中某個元素的說明與交互在文檔表現和生成的不同,而被分開,但是他們的實際功能是一致的,可以一起來說。
  針對頁面和針對頁面元素的功能,分別默認處於軟件界面的右側和底側。如下面兩張圖片所示:
   
                   底部
    
          右側
  對於交互與註釋說明,有必要分開講述。這一節主要講述annotations,即註釋說明。
  首先,我定義一下對交互與註釋說明的解釋。
  Interaction:交互功能,用以設置頁面中的交互事件,如頁面跳轉、面版跳轉。從而實現框架圖中不同對象的實際功能。在生成html框架頁面時,產生相應的對象功能,用以演示操作。
  Annotations:註釋說明,用以對頁面或頁面中的特定對象進行說明註釋。可以根據實際情況分類編寫說明內容。比如優先級、功能類型、交互效果、說明等。讓程序在開發的時清楚瞭解該對象或該頁面的程序實現詳情與細節。
  那麼,現在重點來說註釋。
  1、自定義註釋與說明
  你也許看到e文會頭大,你也許第一次看到annotations面版中specification、status、benefit、effect等一連串的英文單詞腦袋發暈,那麼我告訴你,你完全不用在意這些單詞和選項的意義,因爲也許它們根本就不適合你,而你可以自定義一套自己的說明選項。
  我之所以說你不必去理解,出於兩個理由,一是因爲這些定義,是axure根據一些歐美公司文檔中常見的字段歸納出來的,他不適合我們的國情和我們自己公司的實際情況,二則是一個文檔中該向你的程序員、設計師表達什麼,並沒有一個完全的框架。你儘可以根據你要說明的事情,以及你們往常的溝通方式來定義。那麼現在看看,我們怎麼來定義吧。
  如果是定義右側的對象註釋,選擇 annotations & interactions > customize fields and viwe
  如果是定義底部的頁面註釋,選擇 page notes – default > manage notes
  就彈出了自定義窗口,由於功能類似,所以我只選擇複雜的右側的對象註釋來說明
    
  如圖所示,我們看到了兩個區域:
  區域一:Fields:這是管理系統所有的說明字段的,這裏定義了針對對象你要說明它的哪些屬性,這些屬性,用什麼類型type的文字進行表述。
  A)新增字段
   
  先在前面的下拉選擇框中定義該字段的type類型,有四種類型:
  Text:文本文字。說明字段中用大段的文字進行說明。
  Number:數字。說明字段中只包含數字說明。
  Date:日期。說明字段只有日期
  Selectlist:選擇列表。通過設置特定的選擇條件,以供選擇。
  然後在後面的填空框中輸入字段的名稱,比如我想設置一個對頁面中對象的開發優先級的說明字段,那麼我就可以給這個字段命名爲“優先級”。然後點擊add按鈕,你所設置的說明字段就被添加到下面的字段列表了。
  B)管理字段
  管理字段,首選必須選中你要管理的字段。
   
 
  然後可以通過選擇右側的功能按鈕,對字段進行管理:
  [b]Remove:[/b]刪除此字段。
  Rename:對字段重命名。
  Move up:將字段排列順序上移一格。
  Move down:將字段排列順序下移一格。
  Edit selectlist:編輯選擇列表中的項目,該功能只有當你所選擇的說明字段的type類型是selectlist時,你才能選擇。選擇後會彈出編輯窗口,你可以根據自己的需求,填寫不同的選擇項,Axure定義,每一行爲一個選擇項。
    
  點ok之後,你就完成了對所選項的管理。
  區域二Custom views:這裏是定義了我們自定義文件的版本。我們可以選擇幾個常用的說明字段,歸納起來生成一個自定義版本。
  A)新增用戶自定義說明
   
  新增說明很簡單,只要在輸入框中輸入一個名稱,點選add,就會彈出一個選擇框
    
  你可以通過add field下拉列表選擇你的自定義說明中要包含的說明字段項目,然後點add添加到你的自定義說明中。
  當你都選擇完成後,點done,就創建了一個你自己的自定義說明。
  B)管理自定義說明
  管理自定說明,和管理說明字段一樣,在管理前,你必須選中你要管理的自定義說明。
  Rename:對字段重命名。
  Edit:重新定義此自定義說明中所包含的fields說明字段。彈出選擇框,供你重新選擇。
  Remove:刪除此自定義說明。
  最後,當你即完成了對字段的處理,又完成了自定義說明的生成後,點done,你就定義完成了你自己的註釋與說明。這個時候,你再選擇annotations & interactions,你將會看到你自己的自定義說明:
    
  選擇後,右側的註釋與說明的字段就都是你自己的了:
    
  2、自定義註釋與說明的現實意義
  那麼這些自定義說明到底對於我們有什麼現實的意義呢?有的,下面我來說明一下。
  這涉及到axure rp的兩個文檔生成功能
  生成演示文檔:我們利用axure完成文檔的編寫後,需要給程序演示,那麼我們怎麼演示呢?
  請按下f5鍵,會彈出提示框,按照默認設置確定後,就會生成html演示文件。你就可以拿這些html文件,給程序員、設計師們演示你的文件了。
  而我們自定義的這些說明,在編寫好的時候會出現在如圖中的位置:
   
   就是說明面版的激活按鈕,點擊彈出你的說明文字。這樣,用戶就可以在不明白的時候在頁面中調出說明文字,一一查看了。
  生成word文檔:我們也可以生成word的文檔的說明文件,這樣的文件甚至可以當作PRD文檔使用,而說明則會根據label的標籤以及編號,對應生成table說明文檔。
生成word的快捷鍵是F6,生成specification說明書。
   
  綜上所述,運用好了annotations,就可以解決好prd文檔中最重要的工作,即功能說明。至於設置怎樣的註釋,完全就靠你自己來掌控了。
  Ps:頁面notes更加簡單,因爲針對頁面的說明只能有一段文本,不存在特殊說明字段的編輯。
 ============ 最默默無聞的分割線,以下是2008.07.22更新的內容 ============
PartVII:交互interactions(上)
  Axure RP Pro5終於發佈了,直觀操作上,最明顯的變化之一就是在命令行多了“share.分享”,其次所有窗口可以以浮動形式編輯了。爲了與時俱進,以後的教程將以Axure RP Pro5爲基礎來繼續寫。
  話說上次功能說到註釋annotations,這次就來說它的“親兄弟”交互interactions。之所以說他們是親兄弟,除了因爲他們長在同一個面版上,更因爲他們需要結合起來使用,這樣才能清楚的表明功能詳情。
  打個不恰當的比方,如果要說明的功能對象是人,那麼註釋annotations標註的是這個人的基本屬性,比如“性別、年齡、學歷……”,交互interactions則是說明人根據外部條件,做出的迴應。比如你父母做好飯菜給你,你就吃飯;給你10塊錢,一個瓶子,囑託你買醬油,你就會一溜煙小跑去打醬油(這個比喻有點過時,現在都不這麼買了)。當然,我們說的是絕對條件下的絕對反應,這就是機器語言。
  我們以一條簡單的文字鏈接爲例:“hawking 的 axure rp 5  文章列表”。我們來對它添加交互行爲。
  我把交互分爲三個部分的:交互觸發、交互條件、交互行爲。這樣的區分,其實是參考程序編程的結構而做的,這就把程序構成人性化、語義化了。
  這章我着重講解交互觸發與交互行爲中的快速鏈接,詳情的交互行爲與交互條件留待後面兩章進行詳解。還是照例先給三個名詞做出名詞解釋。
  交互觸發:是發生交互的導火索,說明引起交互的觸發動作是什麼。
   以此文字鏈爲例,交互的觸發原因,是“點擊文字鏈”。
  交互條件:是達成我們目標行爲的前提條件。如果目標行爲只有一個,對觸發沒有任何條件限制,交互條件則可以被忽略。
   再以此文字鏈接爲例,如果對查看文章列表沒有任何限制,則不設置交互條件,用戶點擊文字鏈,直接發生交互行爲。如果對查看文章列表有權限限制,只允許作者查看,則觸發交  互行爲的條件就是“以文章作者hawking的身份登錄”。
   PS:有條件本身,就必然會有條件的反面。或者有多個條件,就會有多個條件之外的例外情況。在寫文檔的時候,必須考慮進去,說明清楚,這一點最容易疏漏,而造成程序員在開發的時候想當然,或者再回來問你。針對這個例子,條件的反面就是“登錄者不是hawking,或沒有登錄”。
  交互行爲:是機器依據觸發事件與條件,做出的反應動作或行動。
   此文字鏈接的的交互行爲,就是“頁面跳轉到hawking 的 axure rp 5  文章列表頁面”。
  一、交互觸發
  觸發主要有兩種,一種是頁面載入觸發,一種是鼠標行爲觸發。
  1、頁面載入觸發,針對的對象就是我們所編輯的頁面,axure將其放在了page notes&page interactions面版中。如下圖所示,就是page interactions。
 
   Axure暫時僅支持一種頁面觸發條件,就是OnPageLoad當頁面載入時。
  如圖所示,針對我們設置的case事件,axure提供了三個功能。
  Add case:給所選對象增加事件。
  Edit case:編輯所選事件。(功能前提,選擇你索要編輯的事件,比如鼠標選擇case 1)。
  Delete case:刪除所選事件。(功能前提,選擇你索要編輯的事件,比如鼠標選擇case 1)。
  2、鼠標行爲觸發是當用戶使用鼠標操作界面時,引發交互。
 
  Axure支持的鼠標觸發行爲根據你所選擇的對象不同而不同,選擇圖形、文字、鏈接會出現三種觸發行爲:
  Onclick:當鼠標點擊目標時,觸發交互行爲。
  OnMouseEnter:當鼠標移入目標熱區時,觸發交互行爲。
  OnMouseOut:當鼠標從目標熱區移出時,觸發交互行爲。
  如果選擇的是輸入框、多選框等則會出現對應功能的觸發行爲:
  OnKeyUp:Fires when the user releases a key.當釋放鍵盤時觸發交互行爲。
  OnFocus:當鼠標選擇、聚焦到對象時,觸發交互行爲。
  OnLostFocus:當鼠標失去對目標對象的選擇、聚焦時,觸發交互行爲。
  特別的,選擇下拉框、列表框會出現:
  Onchange:當所選項被更改時,觸發交互行爲。
  而選擇我們所編輯的對象後,如果對象之前沒有編輯過交互事件,則有兩個選項
  Add case:給所選對象增加事件。
  Quick link:快速添加鏈接。
  如果曾經編輯過交互事件,則有三個功能,和頁面載入觸發是一樣的,這裏也就不再累述。
  二、交互行爲—快速鏈接
  選擇好交互觸發後,在對交互沒有特定條件設置的前提下,我們可以直接設置此次觸發引起的交互行爲。由於鏈接跳轉是網頁中最常用的交互行爲,因此axure特意提供了一個快速鏈接的功能。
  選擇對象後,點擊快速鏈接則會彈出如下link properties 鏈接屬性面版:
 
  如圖所示,此面版中有四條可選命令:
  1、link to a page in this design:鏈接到這個項目中的某一特定頁面。
  你可以通過鼠標點擊,選擇你想要跳轉的,樹型目錄中的相應頁面。
  2、link to an external url or file:鏈接到一個外部鏈接或者文件。
  你可以通過在hyperlink框中輸入鏈接地址,完成鏈接導向。
  注意:鏈接最好是絕對鏈接地址,不然就容易出錯。
  3、reload current page:重新載入當前頁面。
  Variable changes are applied變量變化生效。
  4、back to previous page:返回瀏覽前一頁面。
  Varable changes are not applied變量變化不生效。
文章轉載自“折折熊de交互論”(http://www.jojobox.cn
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章