【文章內(nèi)容簡(jiǎn)介】 1 dynamic panel動(dòng)態(tài)面版：是Axure為了表現(xiàn)多幀區(qū)域內(nèi)容而制造的一個(gè)工具。它的圖標(biāo)很形象的說明了它的結(jié)構(gòu)。它是不同的state疊加的一個(gè)動(dòng)態(tài)區(qū)域，默 認(rèn)顯示其中一個(gè)state，當(dāng)用戶觸發(fā)按鈕、圖片或者下拉列表等時(shí)，可以設(shè)置相應(yīng)動(dòng)態(tài)面版切換到不同的state。不同state的關(guān)系，類似于 photoshop的層，也類似于html中的css屬性layer。我們可以通過右擊dynamic panel進(jìn)行state編輯，然后通過打開對(duì)應(yīng)state進(jìn)行編輯，編輯方式和編輯頁面相同。2menu（vertical/horizontal）水平/垂直菜單：用于制作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡(jiǎn)單，就是選擇所要添加的菜單項(xiàng)，添加submenu。（六）widgets工具下對(duì)于畫流程圖，是我們經(jīng)常會(huì)遇到的問題。我們和程序工程師溝通，用再多的口水，也無法挑明的事情，畫一張簡(jiǎn)明的流程圖，就能很直白的說明關(guān)鍵問題。有 時(shí)候你可能會(huì)懊惱，因?yàn)槌绦騿T的思維猶如計(jì)算機(jī)，你告訴他為什么沒有用，你就告訴他該怎么做，是左是右，是0是1就好了。這個(gè)時(shí)候，產(chǎn)品經(jīng)理需要的是理性 思維，清晰的思路，如果你不清晰，工程師大多數(shù)會(huì)跟著你的思路亂做一團(tuán)。所以多畫幾個(gè)流程，多根據(jù)頁面需求畫清晰的流程，就能解決實(shí)際的問題。話不多說，本章主要介紹flow里面的工具，因?yàn)閳D形其實(shí)很好介紹，簡(jiǎn)單的英文翻譯就好了，所以也順帶說說這些圖形在流程里的作用。方式還和以前一樣，編號(hào)，對(duì)號(hào)入座，咱們來一個(gè)蘿卜，一個(gè)坑：rectangle：矩形 作用：一般用作要執(zhí)行的處理（process），在程序流程圖中做執(zhí)行框。 在axure中如果是畫頁面框架圖，那么也可以指代一個(gè)頁面。有時(shí)候我會(huì)把頁面和執(zhí)行命令放在同一個(gè)流程中做說明，這個(gè)時(shí)候?qū)深惒煌木匦巫錾蕝^(qū)別，然后做說明就好了。rounded rectangle：圓角矩形或者扁圓 作用：表示程序的開始或者結(jié)束，在程序流程圖中用作為起始框或者結(jié)束框。beveled rectangle：斜角矩形 作用：斜角矩形我?guī)缀醪皇褂?，可以視情況自行定義?；蛘咴谄渌牧鞒虉D中，有特殊含義，暫不知曉，也希望有識(shí)之士指點(diǎn)一二。diamond：菱形 作用：表示決策或判斷（例如：If...Then...Else）,在程序流程圖中，用作判別框。file：文件 作用：表達(dá)為一個(gè)文件，可以是生成的文件，或者是調(diào)用的文件。如何定義，需要自己根據(jù)實(shí)際情況做解釋。bracket：括弧 作用：注釋或者說明，也可以做條件敘述。一般流程到一個(gè)位置，做一段執(zhí)行說明，或者特殊行為時(shí)，我會(huì)用到它。semicircle：半圓形 作用：半圓在使用中常作為流程頁面跳轉(zhuǎn)、流程跳轉(zhuǎn)的標(biāo)記。triangle：三角形 作用：控制傳遞，一般和線條結(jié)合使用，畫數(shù)據(jù)傳遞。trapezoid：梯形 作用：一般用作手動(dòng)操作。ellipse：橢圓形或圓形 作用：如果畫小圓，一般是用來表示按順序數(shù)據(jù)的流程。 如果是畫橢圓形，很多人用作流程的結(jié)束。如果是在use case用例圖中，橢圓就是一個(gè)用例了。1hexagon：六邊形 作用：表示準(zhǔn)備之意，大多數(shù)人用作流程的起始，類似起始框。1parallelogram：平行四邊形 作用：一般表示數(shù)據(jù)，或確定的數(shù)據(jù)處理。或者表示資料輸入（Input）。1actor：角色 作用：來自于use case 用例，模擬流程中執(zhí)行操作的角色是誰。需要注意的時(shí)，角色并非一定是人，有時(shí)候是機(jī)器自動(dòng)執(zhí)行，有時(shí)候也可是是模擬一個(gè)系統(tǒng)管理。1database：數(shù)據(jù) 作用：就是指保存我們網(wǎng)站數(shù)據(jù)的數(shù)據(jù)庫。1image：圖片 作用：表示一張圖片，或者置入一個(gè)已經(jīng)畫好的圖片、流程或者一個(gè)環(huán)境?；旧?，axure講基本流程圖、頁面框架圖、use case 用例圖涉及到的一些關(guān)鍵圖形都囊括在flow流程工具中，模糊了流程圖的區(qū)別，而盡量貼近交互設(shè)計(jì)時(shí)的工作內(nèi)容。流程圖無疑只是一個(gè)表達(dá)的工具，我們?cè)谑褂玫臅r(shí)候應(yīng)該根據(jù)自己的實(shí)際情況使用，而不應(yīng)該死鉆牛角尖，非要知道某個(gè)圖形的通用標(biāo)準(zhǔn)。理解和溝通是第一位的。而對(duì)于某些具有標(biāo)準(zhǔn)性含義的圖形，大家人所共知，則我們應(yīng)該遵循共同的準(zhǔn)則，這樣就能達(dá)到表達(dá)的目的。其 實(shí)axure里面由于不涉及到具體的程序流程，所以有些標(biāo)準(zhǔn)的圖形并沒有提供，如不規(guī)則圖形、側(cè)面雙矩形等，大家可以自己google一下或者baidu 一下很容易就知道。大多數(shù)情況下，還是自己自定義一下自己的符號(hào)標(biāo)準(zhǔn)，就跟prd文檔加上名詞解釋一樣，才是解決方法。（七）注釋annotationsAxure rp將interaction交互與annotations注釋說明功能放在了一個(gè)面版上，同時(shí)又針對(duì)整個(gè)頁面有一個(gè)交互與注釋說明。交 互功能設(shè)置的是用戶通過不同方式觸發(fā)頁面中元素或者載入頁面時(shí)，發(fā)生的交互動(dòng)作。而注釋說明則用文字詳細(xì)說明對(duì)應(yīng)元素的細(xì)節(jié)或頁面的說明。由于針對(duì)整個(gè)頁 面的說明和交互，與針對(duì)頁面中某個(gè)元素的說明與交互在文檔表現(xiàn)和生成的不同，而被分開，但是他們的實(shí)際功能是一致的，可以一起來說。針對(duì)頁面和針對(duì)頁面元素的功能，分別默認(rèn)處于軟件界面的右側(cè)和底側(cè)。如下面兩張圖片所示：底部右側(cè)對(duì)于交互與注釋說明，有必要分開講述。這一節(jié)主要講述annotations，即注釋說明。首先，我定義一下對(duì)交互與注釋說明的解釋。Interaction：交互功能，用以設(shè)置頁面中的交互事件，如頁面跳轉(zhuǎn)、面版跳轉(zhuǎn)。從而實(shí)現(xiàn)框架圖中不同對(duì)象的實(shí)際功能。在生成html框架頁面時(shí)，產(chǎn)生相應(yīng)的對(duì)象功能，用以演示操作。Annotations：注釋說明，用以對(duì)頁面或頁面中的特定對(duì)象進(jìn)行說明注釋。可以根據(jù)實(shí)際情況分類編寫說明內(nèi)容。比如優(yōu)先級(jí)、功能類型、交互效果、說明等。讓程序在開發(fā)的時(shí)清楚了解該對(duì)象或該頁面的程序?qū)崿F(xiàn)詳情與細(xì)節(jié)。那么，現(xiàn)在重點(diǎn)來說注釋。自定義注釋與說明你 也許看到e文會(huì)頭大，你也許第一次看到annotations面版中specification、status、benefit、effect等一連串的 英文單詞腦袋發(fā)暈，那么我告訴你，你完全不用在意這些單詞和選項(xiàng)的意義，因?yàn)橐苍S它們根本就不適合你，而你可以自定義一套自己的說明選項(xiàng)。我 之所以說你不必去理解，出于兩個(gè)理由，一是因?yàn)檫@些定義，是axure根據(jù)一些歐美公司文檔中常見的字段歸納出來的，他不適合我們的國情和我們自己公司的 實(shí)際情況，二則是一個(gè)文檔中該向你的程序員、設(shè)計(jì)師表達(dá)什么，并沒有一個(gè)完全的框架。你盡可以根據(jù)你要說明的事情，以及你們往常的溝通方式來定義。那么現(xiàn) 在看看，我們?cè)趺磥矶x吧。如果是定義右側(cè)的對(duì)象注釋，選擇 annotations amp。 interactions customize fields and viwe如果是定義底部的頁面注釋，選擇 page notes – default manage notes就彈出了自定義窗口，由于功能類似，所以我只選擇復(fù)雜的右側(cè)的對(duì)象注釋來說明如圖所示，我們看到了兩個(gè)區(qū)域：區(qū)域一：Fields：這是管理系統(tǒng)所有的說明字段的，這里定義了針對(duì)對(duì)象你要說明它的哪些屬性，這些屬性，用什么類型type的文字進(jìn)行表述。A)新增字段先在前面的下拉選擇框中定義該字段的type類型，有四種類型：Text：文本文字。說明字段中用大段的文字進(jìn)行說明。Number：數(shù)字。說明字段中只包含數(shù)字說明。Date：日期。說明字段只有日期Selectlist：選擇列表。通過設(shè)置特定的選擇條件，以供選擇。然后在后面的填空框中輸入字段的名稱，比如我想設(shè)置一個(gè)對(duì)頁面中對(duì)象的開發(fā)優(yōu)先級(jí)的說明字段，那么我就可以給這個(gè)字段命名為“優(yōu)先級(jí)”。然后點(diǎn)擊add按鈕，你所設(shè)置的說明字段就被添加到下面的字段列表了。B)管理字段管理字段，首選必須選中你要管理的字段。然后可以通過選擇右側(cè)的功能按鈕，對(duì)字段進(jìn)行管理：[b]Remove：[/b]刪除此字段。Rename：對(duì)字段重命名。Move up：將字段排列順序上移一格。Move down：將字段排列順序下移一格。Edit selectlist：編輯選擇列表中的項(xiàng)目，該功能只有當(dāng)你所選擇的說明字段的type類型是selectlist時(shí)，你才能選擇。選擇后會(huì)彈出編輯窗口，你可以根據(jù)自己的需求，填寫不同的選擇項(xiàng)，Axure定義，每一行為一個(gè)選擇項(xiàng)。點(diǎn)ok之后，你就完成了對(duì)所選項(xiàng)的管理。區(qū)域二Custom views：這里是定義了我們自定義文件的版本。我們可以選擇幾個(gè)常用的說明字段，歸納起來生成一個(gè)自定義版本。A）新增用戶自定義說明新增說明很簡(jiǎn)單，只要在輸入框中輸入一個(gè)名稱，點(diǎn)選add，就會(huì)彈出一個(gè)選擇框你可以通過add field下拉列表選擇你的自定義說明中要包含的說明字段項(xiàng)目，然后點(diǎn)add添加到你的自定義說明中。當(dāng)你都選擇完成后，點(diǎn)done，就創(chuàng)建了一個(gè)你自己的自定義說明。 B）管理自定義說明管理自定說明，和管理說明字段一樣，在管理前，你必須選中你要管理的自定義說明。Rename：對(duì)字段重命名。Edit：重新定義此自定義說明中所包含的fields說明字段。彈出選擇框，供你重新選擇。Remove：刪除此自定義說明。最后，當(dāng)你即完成了對(duì)字段的處理，又完成了自定義說明的生成后，點(diǎn)done，你就定義完成了你自己的注釋與說明。這個(gè)時(shí)候，你再選擇annotations amp。 interactions，你將會(huì)看到你自己的自定義說明：選擇后，右側(cè)的注釋與說明的字段就都是你自己的了：自定義注釋與說明的現(xiàn)實(shí)意義那么這些自定義說明到底對(duì)于我們有什么現(xiàn)實(shí)的意義呢？有的，下面我來說明一下。這涉及到axure rp的兩個(gè)文檔生成功能生成演示文檔：我們利用axure完成文檔的編寫后，需要給程序演示，那么我們?cè)趺囱菔灸兀空?qǐng)按下f5鍵，會(huì)彈出提示框，按照默認(rèn)設(shè)置確定后，就會(huì)生成html演示文件。你就可以拿這些html文件，給程序員、設(shè)計(jì)師們演示你的文件了。而我們自定義的這些說明，在編寫好的時(shí)候會(huì)出現(xiàn)在如圖中的位置：就是說明面版的激活按鈕，點(diǎn)擊彈出你的說明文字。這樣，用戶就可以在不明白的時(shí)候在頁面中調(diào)出說明文字，一一查看了。生成word文檔：我們也可以生成word的文檔的說明文件，這樣的文件甚至可以當(dāng)作PRD文檔使用，而說明則會(huì)根據(jù)label的標(biāo)簽以及編號(hào)，對(duì)應(yīng)生成table說明文檔。生成word的快捷鍵是F6，生成specification說明書。綜上所述，運(yùn)用好了annotations，就可以解決好prd文檔中最重要的工作，即功能說明。至于設(shè)置怎樣的注釋，完全就靠你自己來掌控了。Ps：頁面notes更加簡(jiǎn)單，因?yàn)獒槍?duì)頁面的說明只能有一段文本，不存在特殊說明字段的編輯。（八）交互interactions（上）Axure RP Pro5終于發(fā)布了，直觀操作上，最明顯的變化之一就是在命令行多了“”，其次所有窗口可以以浮動(dòng)形式編輯了。為了與時(shí)俱進(jìn)，以后的教程將以Axure RP Pro5為基礎(chǔ)來繼續(xù)寫。話說上次功能說到注釋annotations，這次就來說它的“親兄弟”交互interactions。之所以說他們是親兄弟，除了因?yàn)樗麄冮L在同一個(gè)面版上，更因?yàn)樗麄冃枰Y(jié)合起來使用，這樣才能清楚的表明功能詳情。打 個(gè)不恰當(dāng)?shù)谋确?，如果要說明的功能對(duì)象是人，那么注釋annotations標(biāo)注的是這個(gè)人的基本屬性，比如“性別、年齡、學(xué)歷……”，交互 interactions則是說明人根據(jù)外部條件，做出的回應(yīng)。比如你父母做好飯菜給你，你就吃飯；給你10塊錢，一個(gè)瓶子，囑托你買醬油，你就會(huì)一溜煙 小跑去打醬油（這個(gè)比喻有點(diǎn)過時(shí)，現(xiàn)在都不這么買了）。當(dāng)然，我們說的是絕對(duì)條件下的絕對(duì)反應(yīng)，這就是機(jī)器語言。我們以一條簡(jiǎn)單的文字鏈接為例：“hawking 的 axure rp 5 文章列表”。我們來對(duì)它添加交互行為。我把交互分為三個(gè)部分的：交互觸發(fā)、交互條件、交互行為。這樣