Axure PR 9 保姆級使用教程

0 評論 1590 瀏覽 11 收藏 71 分鐘

作為產(chǎn)品經(jīng)理的基本能力要求之一,所有的產(chǎn)品經(jīng)理都要求會使用Axure畫原型。這篇文章,作者就分享了Axure 這款軟件的基本知識,供各位參考學(xué)習(xí)。

Axure是產(chǎn)品經(jīng)理用來繪制原型的工具,在快速迭代快速發(fā)展的當(dāng)下,原型能驗證設(shè)計的概念,將現(xiàn)有的需求轉(zhuǎn)化為具體可視方案,讓團隊成員可以更好的理解需求方案。

這期內(nèi)容先來熟悉一下Axure的操作界面。

一、操作界面

1. 頁面

AxureRP文件在頁面窗格中,在“頁面”窗格中進行管理。

單擊“頁面”窗格右上方的“添加頁面”按鈕,添加頁面。

在“頁面”窗格中雙擊頁面名稱,打開畫布。

2. 畫布

畫布是設(shè)計原型的地方,可以根據(jù)自己的想法設(shè)計原型圖,也可以根據(jù)設(shè)備設(shè)置頁面尺寸。

3. 元件庫

AxureRP預(yù)先安裝了基本元件、表單元件、菜單表格、標(biāo)記元件等,除此之外,還可以創(chuàng)建自己的元件庫或添加其他人創(chuàng)建的元件庫。

從“元件庫”窗格中拖動,也可以使用“插入菜單”中的選項來添加文本,圖像和形狀,將元件添加到畫布。

雙擊,或者選中元件按Enter,編輯元件文本。

在“樣式”窗格中可以改變元件的外觀,例如,填充顏色,字體等,當(dāng)然通過畫布頂部樣式工具欄也可以實現(xiàn)。

二、交互效果

在“交互”窗格中給拖到畫布中的元件添加交互。

1. 鏈接到另一個頁面

1.在“頁面”窗格中,添加一個新頁面,現(xiàn)在應(yīng)該有兩個頁面,第1頁和第2頁。

2.在第1頁上,將按鈕元件從“元件庫”窗格拖到畫布上,選中按鈕,在“交互”窗格中單擊“單擊”或“點擊”→“打開鏈接”,在列表中選擇第2頁,然后單擊確定。

3.在瀏覽器中打開原型,單擊按鈕會轉(zhuǎn)到第2頁。

2. 顯示和隱藏元件

在頁面上動態(tài)顯示和隱藏元件。

3. 交互樣式效果

使用樣式效果更改將鼠標(biāo)懸停,單擊并進行其他操作時的部件的視覺外觀。

4. 分享原型

單擊界面右上方的“共享”、“發(fā)布”按鈕,并指定名稱和密碼,將原型分享給開發(fā)或其他同學(xué)。

三、AxureRP界面環(huán)境

在AxureRP界面環(huán)境的中心是畫布,可以通過排列元件來創(chuàng)建圖表,畫布周圍是工具欄和工具面板,允許自定義圖表樣式和交互并與其他人分享。

*提示:可以在視圖菜單中切換界面的窗格和工具欄。

1. 界面環(huán)境地圖

  1. 主工具欄和樣式工具欄:執(zhí)行常用操作,如管理元件、設(shè)置元件樣式和發(fā)布,可以在選擇模式、連接器模式和繪圖工具之間更改光標(biāo)工具。
  2. 畫布:在這個環(huán)境中拖放布局元件,更改元件顏色和尺寸、添加網(wǎng)格和參考線,以及切換標(biāo)尺的可見性。
  3. 頁面:添加、刪除、重命名和管理文件中的頁面。
  4. 概要:查看當(dāng)前圖表上所有可搜索、可排序和可篩選的部件、母版及動態(tài)面板列表。
  5. 元件庫:例如按鈕、圖像、文本和形狀等元件的庫,從“元件庫”窗格中拖動元件,然后放到畫布上,通過“元件庫”窗格,可以在元件庫之間切換及加載其他元件庫,甚至可以創(chuàng)建自己的自定義元件庫,還可以從本地添加圖像文件夾。
  6. 母版:可以在整個文件中重復(fù)使用的元件集合,可以進行添加、刪除、重命名和管理母版等操作。
  7. 樣式:編輯元件和頁面樣式。
  8. 交互:在頁面或選定元件上添加和編輯交互及其他交互屬性。
  9. 注釋:添加、編輯元件和頁面注釋。

2. 自定義環(huán)境

界面窗格可以被拖放到任何地方,甚至可以變成自由浮動的窗口,或者放在綠松石熱區(qū),固定在Axure界面中的新位置。

3. 自定義主工具欄

通過點擊:視圖→工具欄→自定義主工具欄更改顯示在主工具欄中的圖標(biāo),或右鍵單擊工具欄中的空白區(qū)域,在上下文菜單中選擇自定義工具欄。

在出現(xiàn)的模式中,選中要包含在主工具欄中的項目,對于極簡界面,可以取消選中右下角的顯示文本復(fù)選框圖標(biāo)隱藏工具欄中的圖標(biāo)標(biāo)簽。

單擊右上角的恢復(fù)默認(rèn)值,可以將工具欄恢復(fù)成默認(rèn)設(shè)置。

4. 黑暗模式

在應(yīng)用程序首選項中將AxureRP切換為深色用戶界面模式,該選項位于頂部菜單中的以下位置之一,具體取決于操作系統(tǒng):

  • Mac:AxureRP9-首選質(zhì)
  • Windows:文件選頂

在畫布選項卡的外觀下拉菜單中選擇暗模式,Mac用戶還可以選擇“使用系統(tǒng)設(shè)置”,讓AxureRP與操作系統(tǒng)界面設(shè)置匹配。

5. 查看和分享原型

AxureRP會將文檔轉(zhuǎn)換為HTML,CSS,JavaScript和圖像文件,統(tǒng)稱為“HTML輸出”,在瀏覽器中查看AxureRP原型并與之交互。

6. 預(yù)覽

在設(shè)計原型的時候,需要定期在瀏覽器中測試進度,單擊界面右上角的預(yù)覽按鈕以查看當(dāng)前在畫布上打開的頁面。

預(yù)覽時,瀏覽器中的原型鏈接到RP文件,文件更改時,在瀏覽器中刷新原型查看更改內(nèi)容。

*預(yù)覽僅在當(dāng)前計算機上可見,無法從任何其他設(shè)備訪問,如果需要在其他設(shè)備上查看原型或與其他設(shè)備共享原型,需發(fā)布到AxureCloud或保存并共享原型HTML輸出的本地副本。

7. 控制臺

預(yù)覽原型時,可以使用原型播放器的“控制臺”面板來測試交互并進行故障排除。

8. 預(yù)覽選項

默認(rèn)情況下,預(yù)覽原型在操作系統(tǒng)的默認(rèn)瀏覽器中打開,并且原型播放器處于默認(rèn)狀態(tài),在發(fā)布→預(yù)覽選項中可以更改設(shè)置。

9. 發(fā)布到AxureCloud

如果與其他同學(xué)共享原型,可以通過單擊AxureRP界面右上角的分享按鈕或通過app,Axure,Cloud的axurecloudweb發(fā)布。

發(fā)布成功會獲得一個已發(fā)布原型的鏈接,可以與其他人共享并在任何具有web瀏覽器的設(shè)備上使用該鏈接。

10. 快捷鍵

Axure官方全部快捷鍵,以及快捷鍵對應(yīng)功能的中英文名稱,實際原型設(shè)計中,由于快捷鍵操作便捷性的差異,和每個人使用習(xí)慣的不同,應(yīng)用到的快捷鍵并不會太多,而且不同人也各不相同,以下快捷鍵選擇性使用。

11. 自動保存的備份文件

AxureRP自動保存打開的RP文件的備份副本,恢復(fù)文件的早期版本或恢復(fù)未保存的更改,可以訪問備份文件。

默認(rèn)情況下,AxureRP每15分鐘保存一次備份副本,并將備份文件保存在電腦上30天。

12. 恢復(fù)自動保存的備份文件

1.轉(zhuǎn)到文件→從備份恢復(fù)文件,在打開的對話框中,可以找最近保存的備份文件列表。

2.在對話框左上角,輸入1到30之間的值,查看備份天數(shù),默認(rèn)顯示5天。

3.雙擊列表中的備份文件恢復(fù)文件,打開文件之前,系統(tǒng)將提示保存文件。

*提示:建議使用新文件名保存恢復(fù)文件,避免要蓋最近保存的文件。

13. 導(dǎo)入變更

一旦恢復(fù)并保存了備份文件,可以直接從恢復(fù)RP文件繼續(xù)工作,或者,按照以下步驟更改從備份文件導(dǎo)入原始文件:

  1. 打開原始的RP文件。
  2. 使用文件→從RP文件導(dǎo)入菜單選項,打開導(dǎo)入對話框。
  3. 在出現(xiàn)的文件瀏覽器中選擇恢復(fù)的備份RP文件。
  4. 使用導(dǎo)入向?qū)е械倪x項從備份文件中導(dǎo)入所需的更改。

14. 備份首選項

15. 更改備份頻率

默認(rèn)情況,AxureRP每15分鐘保存一次所有打開的RP文件副本。

在文件→備份設(shè)置,對話框中輸入新的備份間隔值,可以設(shè)置為低至5分鐘,高至60分鐘。

16. 禁用備份

在文件→備份設(shè)置,取消選中啟用備份復(fù)選框,可以禁用備份功能。

*提示:建議不要禁用備份,電腦崩潰或斷電,可能會導(dǎo)致文件丟失。

四、管理元件

1. 在畫布上定位元件

從元件庫窗格中拖拽元件可以將元件添加到畫布,或者使用界面左上角的插入菜單中的選項繪制多種元件形狀。

使用鼠標(biāo)可以將元件或元件組拖放到適當(dāng)位置,使用上下左右鍵將元件在畫布上微移,也可以使用頂部工具欄或樣式窗格中的X和Y字段選擇畫布坐標(biāo)。

當(dāng)元件拖動到畫布上時,會自動捕捉到畫布網(wǎng)格、已設(shè)置的所有輔助線以及附近的其他元件。

2. 一次定位多個元件

在畫布上選擇多個元件時,可以更改整個選區(qū)的坐標(biāo),也可以重新定位選區(qū)內(nèi)的每個元件:

設(shè)置頂部工具欄中的X和Y字段,會將選中的元件移到畫布上的目標(biāo)坐標(biāo),并且每個元件將保持與目標(biāo)坐標(biāo)的相對距離。

*提示:選中元件位于畫布上的不同位置時,樣式窗格中的X或Y字段將為空白。

3. 調(diào)整元件大小

在畫布上選中元件并拖動手柄,可以調(diào)整元件大小,拖動時可以按住SHIFT維持元件的長寬比。

使用頂部工具欄或樣式窗格中的W和H字段為元件選擇尺寸,在W和H字段之間單擊保持長寬比圖標(biāo),可以維持元件的長寬比。

或者,在其中一個字段中輸入新值后按SHIFT+ENTER一次調(diào)整多個元件的大小。

4. 一次調(diào)整多個元件的大小

在畫布上選中多個元件時,選擇按比例整體調(diào)整整個選區(qū)的大小,也可以選擇調(diào)整單個元件的大小。

頂部工具欄中的W和H字段,可以調(diào)整整個選區(qū)的大小,設(shè)置所選內(nèi)容本身的寬度和高度,按比例調(diào)整所選元件的大小和位置,以適合所選尺寸。

樣式窗格中的W和H字段,也可以調(diào)整每個元件的大小,例如,將每個元件的寬度設(shè)置為150px。

*提示:當(dāng)選中的元件尺寸不同時,樣式窗格中的W和H字段將為空白。

5. 距離輔助線/紅線

在畫布上移動元件時,會出現(xiàn)紅色輔助線,顯示元件與附近的其他元件之間的距高,這些輔助線還會顯示何時邊緣對齊或中點對齊。

6. 元件命名

默認(rèn)情況下,元件沒有命名,在概要窗格和其他顯示元件名稱的位置,未命名元件在括號中顯示元件型標(biāo)識(矩形)、(圖像)等。

如果在沒有名稱的元件上輸入文本,它將顯示文本的前幾個單詞,例如:默認(rèn)段落元件在概要窗格中顯示Loremipsumdolorsi.

在概要窗格中雙擊元件,可以給元件命名,還可以選中元件,在樣式、交互或注釋窗格的頂部輸入名稱。

7. 元件分組

為方便將多個元件命名、定位和交互,可以將元件設(shè)置為一個分組。

選擇兩個或多個元件,單擊頂部工具欄中的組合。

選擇一組元件,單擊取消分組,拆分一組元件。

8. 層順序/深度順序/前后順序

當(dāng)兩個或多個元件重疊時,層次順序較高的元件顯示在前面,層次順序較低的元件顯示在后面。

層順序(或“z-index”)決定在Web瀏覽器中使用TAB鍵導(dǎo)航的元件(如:文本字段和下拉列表之類的元件)的TAB順序,TAB鍵首先使最后一個元件聚焦,逐漸向前移動。

在概要窗格查看元件的特定深度/z-index位置,默認(rèn)情況下,元件是從前到后排序的,因此窗格頂部的元件在前面,底部的元件在后面。(可以通過單擊概要窗格右上方的排序和過濾器圖標(biāo)來更改排序方向。)

9. 重新排序元件

在概要窗格中上下拖動元件,更改元件的深度/z-index位置,頂部工具欄中也有用于實現(xiàn)此功能的按鈕,使用頂層按鈕將選定的元件移動到圖的最前面,然后使用底層按鈕將元件移動到最后面,還可以自定義頂部的工具欄,選中上移一層和下移一層按鈕,這些按鈕可向前/向后移動選中元件,一次一層。

10. 折疊和展開元件

在概要窗格中切換元件或者組名稱旁邊的箭頭,可以折疊或展開元件組(或具有嵌套結(jié)構(gòu)的元件,例如動態(tài)面板和中繼器)

還可以單擊概要窗格右上角的排序和篩選圖標(biāo),選擇折疊/展開全部以同時折疊或展開所有組。

11. 對齊和分布元件

頂部工具欄中的對齊和分布工具可用于自動組織選中的一組元件。

對齊工具可以將兩個或多個選定的元件在左側(cè),中心或右側(cè)水平對齊,或在頂部,中間或底部垂直對齊,新位置基于選擇的第一個元件的位置,必須至少選擇兩個元件才能對齊。

分布工具可以水平或垂直地均勻分布三個或更多選中元件的位置,在分布元件之前,必須至少選擇三個元件。

*提示:可以自定義頂部工具欄將這些選項合并到兩個圖標(biāo)下,對齊和分布。

12. 將元件鎖定到畫布

被鎖定元件,不能在畫布上拖動更改大小和位置,此時,用頂部工具欄或樣式窗格中的字段才可以改變,這種配置有助于防止被鎖定的元件意外移動或調(diào)整大小。

右鍵單擊元件,在上下文菜單中的鎖定下選擇適當(dāng)?shù)倪x項,支持鎖定或解鎖元件,頂部工具欄鎖定和解鎖圖標(biāo)支持自定義。

*提示:鎖定的元件具有紅色邊框,如果無法拖動或調(diào)整特定元件的大小,可以查看元件邊框顏色查看元件是否被鎖。

13. 隱藏元件

用“顯示”操作來動態(tài)顯示窗口,隱藏元件,在Web瀏覽器中不可見。

選中元件,單擊頂部工具欄或樣式面板中的隱藏圖標(biāo),可以隱藏元件,隱藏元件在畫布上顯示為黃色,還可以在頂部菜單的視圖→遮置中切換遮置。

五、元件樣式

1. 樣式屬性

在樣式窗格可以自定義元件的外觀樣式。

2. 不透明度

用滑塊或數(shù)字輸入字段設(shè)置目標(biāo)元件的整體不透明度,值與填充顏色和文本顏色不透明度值一起疊加顯示。

3. 排版

字體設(shè)置:通過設(shè)置元件的字體,字型,字號和字體顏色來控制元件文本的樣式。

行距:調(diào)整文本行之間的間距,可以設(shè)置特定的像素值,也可以選擇自動以使用默認(rèn)間距。

字符間距:調(diào)整元件文本中各個字符之間的間距,可以設(shè)置一個特定值(以十分之一像素為單位),也可以選擇0以使用默認(rèn)間距。

其他文本選項:此菜單包括以下格式選項:

  • 項目符號列表、粗體、斜體、下劃線和刪除線。
  • 基線:向上或向下移動選定文本的基線,從正常、上標(biāo)和下標(biāo)中進行選擇。
  • 字母大小寫:轉(zhuǎn)換所選文本中所有字符的大小寫,從正常、大寫和小寫中進行選擇。

文本陰影:向元件文本中的每個字符添加陰影。

對齊:六個對齊選項控制元件文本在其邊框內(nèi)的對齊,可以控制水平對齊和垂直對齊。

4. 填充

顏色:設(shè)置元件的填充顏色,元件填充顏色可以是實心的,也可以包括線性或徑向漸變。

圖像:設(shè)置形狀元件的填充圖像以及圖像的對產(chǎn)、縮放和平鋪。

6. 邊框

顏色:設(shè)置線條元件或二維元件輪廓的顏色和不透明度,線條顏色可以是實心的,也可以包括線性漸變或徑向漸變。

厚度:設(shè)置直線元件或二維元件輪廓的厚度。

模式:設(shè)置元件輪廓的模式。

可見性:控制矩形元件的哪些邊顯示邊框

箭頭:將箭頭添加到行元件或開放形狀的一端或兩端。

7. 陰影

給選中的元件添加外部或內(nèi)部陰影,可以控制陰影的X和Y偏移,模糊和顏色。對于內(nèi)部陰影,還可以控制陰影的擴散。

8. 角

用數(shù)字半徑字段將矩形元件的角弄圓。(也可以通過選擇畫布上的元件并拖動左上角的黃色三角形來執(zhí)行操作。)

9. 邊距

這些數(shù)字控件確定元件的文本和相應(yīng)的邊框(左,上,右和下)之間的最小間距(以像素為單位)。

10. 元件樣式

元件樣式屬性可以將單個元件樣式應(yīng)用于多個元件,統(tǒng)一元件樣式,如果更改選擇元件樣式中的屬性之一,則更改將應(yīng)用于使用該樣式的所有元件。

選擇元件,在樣式窗格或樣式工具欄的元件樣式下拉列表中選擇元件樣式,可以將元件樣式應(yīng)用于一個或多個元件。

可以通過項目→元件樣式管理器,或單擊樣式窗格或樣式工具欄中的元件樣式下拉菜單旁邊的管理元件樣式圖標(biāo),查看和管理原型中的元件樣式。

11. 元件樣式層次結(jié)構(gòu)

每個元件的視覺外觀由在以下位置設(shè)置的樣式屬性決定,從最低優(yōu)先級到最高優(yōu)先級:

1.元件樣式管理器對話框頂部的默認(rèn)樣式,樣式屬性選擇將應(yīng)用于原型中的每個元件。

2.元件已應(yīng)用的元件樣式(例如Box1樣式),其樣式屬性選擇將覆蓋默認(rèn)樣式中的選擇。

3.在樣式窗格或樣式工具欄上的元件自身上進行的樣式屬性設(shè)置,將覆蓋默認(rèn)樣式和元件自己應(yīng)用的窗口元件樣式中的選擇。

*提示:當(dāng)元件的樣式屬性選擇與其元件樣式的選擇不同時,元件樣式名稱后的樣式窗格和樣式工具欄中將帶有星號。

六、更新和創(chuàng)建樣式

1. 快速更新

在樣式窗格中,單擊樣式名稱右側(cè)的更新可以進行快速更新,更新將應(yīng)用于當(dāng)前使用元件樣式的項目中的所有元件,還將適用于使用元件樣式的任何新加元件。

2. 快速創(chuàng)建

在樣式窗格中,單擊元件當(dāng)前應(yīng)用的元件樣式右側(cè)的創(chuàng)建,可以打開元件樣式管理器對話框,其中元件的樣式更改已添加到新樣式中,在對話框的左列中,重命名新的元件樣式。在右列中,可以對樣式進行其他更改。

3. 元件樣式管理器

單擊樣式窗格或工具欄中的元件樣式下拉菜單旁邊的管理元件樣式圖標(biāo)打開元件樣式管理器,也可以通過項目→元件樣式管理器菜單選項訪問對話框。

單擊對話框頂部的添加,或者,單擊復(fù)制從現(xiàn)有樣式制作新樣式,添加新樣式。

選中元件,單擊刪除,刪除樣式。

使用向上和向下箭頭重新組織對話框中的樣式。

在左欄中選擇元件,編輯元件樣式的樣式屬性。

在右列中,選中樣式屬性旁邊的框,以使該屬性覆蓋默認(rèn)樣式,在適用的字段中選擇該屬性。

也可以一次編輯多種樣式,在左欄中選擇樣式時,按住CTRL或CMD,在右欄中進行更改。

4. 復(fù)制和粘貼樣式

復(fù)制一個元件的樣式并將其粘貼到另一個元件上。

  1. 復(fù)制第一個元件。
  2. 右鍵單擊第二個元件。
  3. 選擇特殊粘貼→粘貼樣式。

第二個元件將具有第一個元件的所有樣式屬性,包括已經(jīng)應(yīng)用的元件樣式。

5. 格式刷

在主菜單的編輯→格式刷中使用格式刷。

可以選擇要復(fù)制和粘貼的單個屬性,也可以一次粘貼到多個元件上。

此外,格式刷允許復(fù)制和粘貼樣式效果。

6. 交互樣式效果

樣式效果是基于Web瀏覽器中的應(yīng)用于交互動態(tài)的元件樣式,只要元件處于特定狀態(tài)(例如,將鼠標(biāo)懸?;蚪?,就會將元件樣式從其基本樣式更改為其他樣式。

七、元件庫

AxureRP預(yù)裝了四個元件庫——默認(rèn)、流程、圖標(biāo)和示例UI模式——也可以安裝其他庫,甚至創(chuàng)建自己的元件庫。

AxureRP元件庫以獨立的,rplib文件存儲在電腦文件系統(tǒng)中。

1. 元件庫切換

元件窗格頂部的下拉菜單列出了當(dāng)前加載到AxureRP中的所有元件庫和本地映像文件夾,以及通過AxureCloud獲取的任何元件庫。

單擊下拉列表并在列表中選擇元件庫,可以切換元件庫,或者,選擇所有庫一次查看所有已加載的元件。

2. 添加和刪除庫

添加本地庫文件

單擊窗格頂部的添加元件庫圖標(biāo),在出現(xiàn)的文件瀏覽器中,找到所需的.rplib文件,選擇將元件庫添加到元件庫窗格中,可以將本地儲存的元件庫添加到元件庫中。

每次打開AxureRP時,都會嘗試加載過去已添加的所有本地元件庫。

AxureRP還將嘗試加載在以下文件位置找到的所有元件庫:

  • Windows:C:Users%USERNAME%MyDocumentsAxureLibraries
  • Mac:~/Documents/Axure/Libraries

*提示:單擊窗格右上方的選項菜單,選擇在磁盤上查找,可以查看本地元件庫文件的存儲位置。

刪除庫

在元件庫窗格頂部的下拉列表中選中,單擊窗格右上方的選項菜單,然后選擇刪除元件庫。

八、網(wǎng)格、參考線和對齊

AxureRP畫布包含許多功能來輔助設(shè)計圖表,可以顯示和自定義背景網(wǎng)格以及垂直和水平參考線,這些參考線可以應(yīng)用于特定頁面,也可以全局應(yīng)用于項目中的所有頁面。

用作簡單的視覺指南,也可以讓元件自動相互對齊。

1. 網(wǎng)格

通過視圖→標(biāo)尺,網(wǎng)格和參考線并選中顯示網(wǎng)格,在畫布上顯示點或線的網(wǎng)格。

無論網(wǎng)格是否可見,拖動移動或調(diào)整元件大小時,元件都會捕捉到網(wǎng)格,可以通過取消選中視圖→標(biāo)尺,網(wǎng)格和參考線下的對齊網(wǎng)格禁用。

默認(rèn)情況下,網(wǎng)格為10pxx10px的繪制點,如果需要,可以通過視圖→標(biāo)尺,網(wǎng)格和參考線→網(wǎng)格設(shè)置對話框中的選項設(shè)置自定義間隔,切換到線條,更改網(wǎng)格的顏色。

2. 參考線

參考線是添加到畫布上的線條,有助于標(biāo)記應(yīng)放置元件的位置,在視圖→標(biāo)尺,網(wǎng)格和參考線中切換各種參考線的可見性。

1)頁面和全局參考線

頁面參考線出現(xiàn)在項目的單個頁面或母版中,從其中一個標(biāo)尺上單擊并拖動,將參考線放置在所需的X或Y值處,可以將頁面參考線添加到畫布,頁面參考線默認(rèn)為藍色。

全局參考線類似于頁面參考線,無論當(dāng)前正在使用哪個頁面或母版,參考線始終在畫布上可見,按住CTRL或CMD并從標(biāo)尺中拖動,創(chuàng)建全局參考線,全局參考線默認(rèn)為紫紅色。

2)刪除頁面和全局參考線

右鍵單擊參考線,選擇刪除,或者,選擇一個參考線或一組參考線,然后按鍵盤上的Delete鍵,可以刪除參考線。

在視圖→標(biāo)尺,網(wǎng)格和參考線→除所有參考線,可以刪除所有參考線

*提示:從一頁刪除全局參考線也會將其從項目的其他每一頁中刪除。

3)創(chuàng)建參考線對話框

用視圖一標(biāo)尺,網(wǎng)格和參考線一創(chuàng)建參考線對話框一次創(chuàng)建一系列頁面或全局參考線。

可以為每個字段指走自己的值,也可以從對話框頂部的下拉列表中選擇四個預(yù)設(shè):

  1. 960像素網(wǎng)格:12列
  2. 960像素網(wǎng)格:16列
  3. 1200像素網(wǎng)格:12列
  4. 1200像素網(wǎng)格:15列

4)鎖定參考線

選擇參考線,單擊鼠標(biāo)右鍵,在上下文菜單中選擇鎖定,可以鎖定頁面和全局參考線,讓參考線不能被移動或刪除。

還可以通過檢查視圖→標(biāo)尺,網(wǎng)格和參考線→鎖定參考線,一次鎖定項目中的所有參考線。

5)頁面尺寸參考線

頁面尺寸參考線顯示了已走義頁面尺寸的頁面邊界,頁面頂部,左側(cè)和右側(cè)邊界由出現(xiàn)在畫布的視口區(qū)域周圍的灰色蒙版標(biāo)記,底部邊界由虛線,褐紅色線標(biāo)記。

如果在頁面上使用自適應(yīng)視圖,則頁面尺寸參考線將在切換時視圖時自動更新。

6)打印參考線

打印參考線顯示了當(dāng)前所選打印紙張尺寸的頁面邊界(可在文件→紙張尺寸和設(shè)置中找到),并目當(dāng)你在紙張尺寸之間切換時,參考線會自動更新,默認(rèn)情況下,打印參考線為灰色。

7)對齊參考線

在畫布上拖動元件或?qū)ζ溥M行調(diào)整大小時,參考線將自動捕捉到附近的所有參考線。

在視圖→標(biāo)尺,網(wǎng)格和參考線,取消選中對齊參考線,可以禁用此行為。

8)底層顯示參考線

默認(rèn)情況下,參考線展示在畫布上的元件前面,始終可見。

打開視圖→標(biāo)尺,網(wǎng)格和參考線→參考線設(shè)置對話框,選中底層顯示參考線,可以將參考線設(shè)置在元件后面。

4. 標(biāo)尺

在視圖→標(biāo)尺,網(wǎng)格和參考線,選中或取消選中顯示標(biāo)尺,可以切換畫布的左邊緣和上邊緣標(biāo)尺的可見性。

九、管理頁面

AxureRP原型被組織到頁面中,可以在“頁面”窗格中進行管理,添加AxureRP原型的頁數(shù)沒有限制,在“頁面”窗格中雙擊頁面名稱,以在畫布上將其打開。

1. 添加,刪除和命名頁面

單擊“頁面”窗格右上方的“添加頁面”圖標(biāo),添加頁面,也可以右鍵單擊頁面,使用“添加”子菜單選擇在被單擊頁面的之前,之后或作為其子頁面添加頁面。

在頁面上單擊鼠標(biāo)右鍵,選擇“刪除”,或選中頁面并按Delete,刪除頁面。

雙擊頁面名稱或右鍵單擊頁面名稱,選擇“重命名”更改頁面名稱,頁面名稱被修改時,指向該頁面的現(xiàn)有鏈接將動態(tài)更新。

2. 管理頁面

在“頁面”窗格向上,向下,向右或向左拖動頁面名稱,或者,按住CTRL(Windows)或CMD(Mac)的同時使用鍵盤的箭頭鍵,對頁面進行重新排序。

*提示:“頁面”窗格頂部的頁面用作Web瀏覽器中原型的登錄頁面,重新排列頁面順序更改登錄頁面。

3. 文件夾

使用“頁面”窗格右上方的“添加文件夾”圖標(biāo)添加文件夾,也可以右鍵單擊頁面,選擇添加→文件夾,右鍵單擊文件夾,選擇“刪除”或選中頁面并按Delete。

*提示:刪除文件夾會刪除其中包含的頁面,刪除包含頁面的文件夾之前,AxureRP會要求確認(rèn)操作。

雙擊文件夾名稱或右鍵單擊該文件夾,選擇“重命名”,修改文件夾名稱。

4. 圖表類型

頁面名稱左側(cè)的圖標(biāo)指示該頁面包含的圖表類型,即“頁面”或“流程”,右鍵單擊頁面,使用“圖表類型”子菜單,更改圖標(biāo)。

5)管理打開的頁面

在畫布上打開的每個頁面都由畫布上方的選項卡表示,單擊頁面的選項卡顯示在畫布上,或使用鍵盤快捷鍵在這些選項卡中導(dǎo)航。

通過拖動重新排列頁面選項卡的順序,單擊選項卡上的X圖標(biāo)關(guān)閉,也可以右鍵單擊一個選項卡,從“關(guān)閉選項卡”,“關(guān)閉所有選項卡”和“關(guān)閉其他選項卡”中選擇(僅打開你右鍵單擊的選項卡)。

單擊畫布右上方的箭頭圖標(biāo),打開的頁面的完整列表。

十、頁面樣式

1. 樣式屬性

在“樣式”窗格中通過編輯自定義原型頁面樣式。

2. 頁面尺寸

默認(rèn)情況下,頁面尺寸是根據(jù)畫布上的元件自動計算的,畫布本身不受約束。

用頁面尺寸下拉菜單從多種常用設(shè)備尺寸中進行選擇為頁面設(shè)置靜態(tài)寬度或高度,或者使用“Web”和“自定義設(shè)備”選項定義自己的自定義尺寸。

為頁面選擇尺寸時,畫布將更改大小以匹配,灰色負(fù)空格將白色視口區(qū)域框定,該框架也反映在Web瀏覽器中。

*提示:在移動設(shè)備上查看原型時,在原型播放器的視圖設(shè)置中選擇“縮放到寬度”,以使頁面內(nèi)容適合設(shè)備的視口。

3. 自適應(yīng)視圖

單擊“添加自適應(yīng)視圖”為每個目標(biāo)視口分別設(shè)置一組頁面尺寸,可以設(shè)計多鐘視口尺寸,為每種視口大小調(diào)整內(nèi)容大小和位置,然后Web瀏覽器將自動為目標(biāo)設(shè)備的視口顯示適當(dāng)?shù)囊晥D。

4. 頁面對齊

在“左對齊”和“居中對齊”之間進行選擇,確定頁面內(nèi)容是對齊到瀏覽器窗口的左邊緣還是居中對齊。

*提示:頁面對齊方式不會影響AxureRP畫布上元件的對齊方式。

5. 填充

顏色:設(shè)置頁面的背最顏色和不透明度

圖片:設(shè)置頁面的填充圖像以及圖像的對齊方式和填充類型。

*提示:在AxureRP和Web瀏覽器中都應(yīng)用了顏色和圖像填充。

6. 低保真模式

低保真度模式會降低頁面的視覺保真度,將注意力集中在設(shè)計用戶體驗上,而不是視覺上,在頁面上啟用“低保真”模式時,元件將轉(zhuǎn)換為灰度,所有字體都替換為“Axure手寫”字體,以使外觀更粗糙。

7. 交互

1)事件、案例和動作

交互決定了元件和頁面的動態(tài)行為,單擊按鈕導(dǎo)航到原型中的另一個頁面是一種交互,如將鼠標(biāo)懸停在一個元件上顯示頁面上的另一個元件。

在“交互”窗格中創(chuàng)建和管理原型的交互,從窗格底部的所選元件的最常見交互中選擇,也可以單擊“新建交互”來構(gòu)建自己的交互。

*提示:單擊“交互”窗格右下角的窗口圖標(biāo),或雙擊任何事件或窗口元件名稱打開“交互編輯器”對話框,處理更多交互。

2)交互結(jié)構(gòu)

交互由三部分組成:

  1. 元件和頁面事件
  2. 添加到事件中的案例
  3. 添加到案例中的交互

3)事件

事件相當(dāng)于是特定頁面和窗口元件的行為觸發(fā)器,在Web瀏覽器中發(fā)生觸發(fā)行為時,將觸發(fā)事件,并且與此事件相關(guān)聯(lián)的其他事件也會觸發(fā),例如,單擊按鈕導(dǎo)航到原型中的其他頁面,則已觸發(fā)基點擊事件。

查看頁面或窗口元件可用的事件,選中元件在“交互”窗格中單擊“新建交互”,在列表中選擇一個事件以配置其下的交互。(可以在此頁面的下方查看可用頁面的完整列表和窗口元件事件。)

在“交互”窗格中將其選中,后按DELETE,刪除事件及其所有案例和操作。

4)案例

案例在Web瀏覽器中為響應(yīng)頁面或窗口元件事件觸發(fā)而發(fā)生的有序操作列表,盡管默認(rèn)情況下第一個案例的名稱是隱藏的,當(dāng)為事件分配一個或多個操作時,案例會自動添加到事件中。將光標(biāo)懸停在事件名稱上,然后單擊右側(cè)的“啟用案例”查看第一個案例的名稱。

可以通過單擊事件名稱右側(cè)的“添加案例”圖標(biāo)來向事件添加其他案例,當(dāng)事件在Web瀏覽器中觸發(fā)時,可以在出現(xiàn)的菜單中選擇要執(zhí)行的事件,或者,設(shè)置條件邏輯以根據(jù)某些條件自動進行此確定。

在“交互”窗格中將其選中,按DELETE,可以刪除案例,可以通過上下拖動事件來對事件重新排序。(使用條件邏輯時,案例的順序很重要。)

5)動作

動作是響應(yīng)頁面或窗口元件事件觸發(fā)而在Web瀏覽器中發(fā)生的更改。例如,如果單擊按鈕導(dǎo)航到原型中的其他頁面,則響應(yīng)按鈕的點擊事件,發(fā)生了“打開鏈接”操作。

在“新建互動”菜單中選擇一個事件時,將顯示可用操作的列表。選擇動作后,系統(tǒng)會提示配置,通過將光標(biāo)懸停在操作名稱上方并單擊右側(cè)的“添加目標(biāo)”,將其他目標(biāo)添加到該操作(對于添加目標(biāo)的操作)

單擊案例底部的“+”“插入操作”圖標(biāo),向案例添加更多操作。

在“交互”窗格中選擇案例,按DELETE,刪除案例。

可以通過上下拖動來重新排列案例中的動作,操作從上到下按順序進行,因此按照希望案例在Web瀏覽器中發(fā)生的準(zhǔn)確順序進行排列。

十一、事件列表

1. 頁面和母版事件列表

1)鼠標(biāo)

  • 頁面單擊:當(dāng)頁面被單擊時。
  • 頁面雙擊:當(dāng)頁面被雙擊時。
  • 頁面右擊:在頁面上觸發(fā)上下文菜單時,通過右鍵單擊或其他方法。
  • 頁面鼠標(biāo)移動:鼠標(biāo)光標(biāo)在頁面上移動時連續(xù)觸發(fā)。

2)鍵盤

  • 頁面按鍵按下:當(dāng)按下鍵盛鍵時。
  • 頁面按鍵松開:釋放鍵盤鍵時(按下后)。

3)頁面

  • 窗口尺寸改變時:調(diào)整瀏覽器窗口大小時(在頁面首次載入及頁面載入以后都會觸發(fā))。
  • 頁面載入時:首次在Web瀏覽器中加載頁面時。
  • 視圖改變時:當(dāng)前的自適應(yīng)視圖由以下原因之一發(fā)生改變時:

。調(diào)整瀏覽器窗口的大小。

。使用“設(shè)置自適應(yīng)視圖”操作設(shè)置視圖。

。在原型播放器的“自法應(yīng)視圖”下拉列表中選擇一個新機圖。

  • 窗口向上滾動時:當(dāng)窗口向上滾動時。
  • 窗口向下滾動時:當(dāng)窗口向下滾動時。
  • 窗口滾動時:當(dāng)頁面向任何力向滾動時。

2. 元件事件列表

1)所有元件

鼠標(biāo)

  • 單擊:元件被單擊時。
  • 雙擊:元件被雙擊時。
  • 鼠標(biāo)右擊時:在窗口元件上觸發(fā)上下文菜單時,通過右擊或其他方法。
  • 鼠標(biāo)按下時:單擊元件時,同時按住鼠標(biāo)按鈕。
  • 鼠標(biāo)松開時:單擊元件時,釋放鼠標(biāo)按鈕。
  • 鼠標(biāo)移動時:鼠標(biāo)光標(biāo)在元件上移動時連續(xù)觸發(fā)。
  • 鼠標(biāo)移入時:鼠標(biāo)光標(biāo)進入元件上方的區(qū)域時。
  • 鼠標(biāo)移出時:鼠標(biāo)光標(biāo)移出元件上方的區(qū)域時。
  • 鼠標(biāo)停放時:鼠標(biāo)光標(biāo)懸停在元件上一秒鐘時。
  • 鼠標(biāo)長按時:在元件上按住鼠標(biāo)按鈕一秒鐘后。

鍵盤

  • 按鍵按下時:當(dāng)元件具有瀏施器焦點時按下建盤鍵。
  • 按鍵松開時:當(dāng)元件具有劉覽器焦點時釋放鍵盤鍵(按下后)。

元件

  • 移動時:通過“移動”動作移動元件時。
  • 旋轉(zhuǎn)時:過“旋轉(zhuǎn)”動作旋轉(zhuǎn)元件時。
  • 尺寸改變時:通過“縮放”動作縮放元件尺寸時。
  • 顯示時:通過顯示或切換可見性操作顯示窗口元件時。
  • 隱藏時:通過隱落或切換可見性操作隱藏窗口元件。
  • 獲取焦點時:當(dāng)窗口元件通過單擊、制表或通過“焦點”動作獲得瀏覽器焦點時。
  • 失去焦點時:當(dāng)窗口元件通過單擊、制表戲通過“焦點”操作失去瀏覽器焦點時。
  • 選中:通過“設(shè)置進中動作”將元件設(shè)置為選中狀態(tài)時,或者單擊復(fù)選框或單選按鈕時。
  • 取消選中:通過設(shè)置選中動作將元件設(shè)置為未選中狀態(tài)時,或者單擊復(fù)選框或單選按鈕時。
  • 選中改變時:當(dāng)窗口元件的選中狀態(tài)由于“設(shè)置選中操作”而改變時,或者當(dāng)單擊復(fù)選框或單選按鈕時。
  • 載入時:窗口元件最初加載到Wed瀏覽器中時(頁面加載后觸發(fā))。

2)下拉列表和列表框獨有

  • 選項改變時:下拉列表或列表框中的選中選項改變時。

3)文本輸入框和文本域獨有

  • 文本改變時:當(dāng)文本輸入框和文本城文本更改時,可以通過通過“設(shè)置文本”操作案更改。

4)動態(tài)面板獨有

手勢

  • 向左滑動:將動態(tài)面板從右向左滑動時。
  • 向右滑動:當(dāng)動態(tài)面板從左向右滑動時。
  • 向上滑動:當(dāng)動態(tài)面板從底部向頂部滑動時。
  • 向下滑動:將動態(tài)直板從頂部滑動到底部時。

動態(tài)面板

  • 面板轉(zhuǎn)態(tài)改變時:通過“設(shè)置面板狀態(tài)”操作更改面板的狀態(tài)時。
  • 拖動開始時:拖動動態(tài)面板時。
  • 拖動時:停止拖動面板時,(釋放鼠標(biāo)按鈕時觸發(fā),而不是停止移動時觸發(fā))。
  • 拖動結(jié)束:拖動動志面板時連續(xù)觸發(fā)。
  • 向上滾動時:動態(tài)面板向上滾動時。
  • 向下滾動時:動態(tài)面板向下滾動時。
  • 滾動時:動態(tài)面板沿任何方向滾動時。

5)中繼器獨有

  • 每項加載時:當(dāng)Web瀏覽器中首次加載中繼器的項目以及中繼器數(shù)據(jù)集發(fā)生任何更改時。
  • 列表項尺寸改變時:由于任何交互(例如,顯示,隱藏或調(diào)整項目中元件的大小)而導(dǎo)致中繼器項目的大小發(fā)生變化時。

3. 操作列表

1)鏈接

打開鏈接:在以下位置打開原型頁面或外部URL:

  • 當(dāng)前窗口:當(dāng)前瀏覽器窗口。
  • 新窗口/標(biāo)簽:新的瀏覽器窗口或標(biāo)簽。
  • 彈出窗口:一個彈出窗口。
  • 父級窗口:彈出窗口的父窗口(必須在彈出窗口中加載的頁面中使用)。
  • 關(guān)閉窗口:關(guān)閉當(dāng)前的瀏覽器窗口或標(biāo)簽。

在框架中打開:更改在內(nèi)聯(lián)框架窗口元件中加載的頁面或包含內(nèi)聯(lián)框架的頁面。

  • 內(nèi)聯(lián)框架:頁面上的內(nèi)聯(lián)框架。
  • 父級框架:包含內(nèi)聯(lián)框架的頁面(必須從內(nèi)聯(lián)框架中加載的頁面中使用)。

動到元件(錨鏈接):將瀏覽器窗口滾動到頁面上元件的位置。

2)元件

  • 顯示/隱藏:改變元件的可見性。
  • 設(shè)置面板狀態(tài):更改動態(tài)面板的可見狀態(tài)。
  • 設(shè)置文本:改變元件上的文本。
  • 設(shè)置圖片:更改圖像元件上的圖像。
  • 設(shè)置選中:更改元件的選中狀態(tài),如果窗口元件具有“選中樣式”效果,則會更改其樣式效果。
  • 設(shè)置列表選項:更改下拉列表或列表框的選定列表選項。
  • 啟用/禁用:啟用或禁用窗口元件,禁用的窗口元件無法在Web瀏覽器中進行交互,如果具有禁用樣式效果,則其樣式效果會發(fā)生變化。
  • 移動:將元件移動到頁面上的新位置。
  • 旋轉(zhuǎn):圍繞所選錨點旋轉(zhuǎn)元件。
  • 設(shè)置尺寸:更改元件的大小。
  • 置于頂層/底層:將元件按頁面的層級放置到最前面或最后一層。
  • 設(shè)置透明度:改變元件的透明度。
  • 焦點:賦予窗口元件瀏覽器焦點,將文本光標(biāo)移至文本輸入元件并突出顯示可單擊的窗口元件。
  • 展開折疊樹節(jié)點:展開或折疊樹元件的選定節(jié)點。

3)變量

  • 設(shè)置變量值:設(shè)置全局變量的值。

4)中繼器

  • 添加排序:使用指定的排序條件對中繼器數(shù)據(jù)集進行排序。
  • 刪除排序:從中繼器中刪除排序。
  • 添加篩選:使用指定的篩選條件過濾中繼器數(shù)據(jù)集。
  • 刪除篩選:從中繼器刪除篩選。
  • 設(shè)置當(dāng)前頁:顯示分頁中繼器的特定頁面。
  • 設(shè)置每頁項目數(shù):設(shè)置分頁中繼器每頁顯示的項目數(shù)。
  • 數(shù)據(jù)集→添加行:向中繼器的數(shù)據(jù)集添加新行。
  • 數(shù)據(jù)集→標(biāo)記行:標(biāo)記中繼器數(shù)據(jù)集中符合指定條件的行。
  • 數(shù)據(jù)集→取消標(biāo)記行:取消標(biāo)記中繼器數(shù)據(jù)集中符合指定條件的行。
  • 數(shù)據(jù)集→更新行:更新中繼器數(shù)據(jù)集中的現(xiàn)有數(shù)據(jù)。
  • 數(shù)據(jù)集→刪除行:從中繼器的數(shù)據(jù)集中刪除行。

5)其他

  • 設(shè)置自適應(yīng)視圖:更改顯示在web瀏覽器中的自適應(yīng)視圖。
  • 等待:在執(zhí)行任何后續(xù)操作之前,添加指定時間的暫停(以毫秒為單位)。
  • 其他:顯示指定的文本描述(作為尚未原型化的動作的占位符)。
  • 觸發(fā)事件:在頁面,母版或窗口元件上觸發(fā)指定事件。
  • 引發(fā)事件:“引發(fā)”母版窗口元件上的事件,直至頁面級別。

4. 文字鏈接

文本鏈接是一種獨特的窗口元件類型,不能單獨存在,必須將添加到形狀元件上并作為元件的一部分。

1)創(chuàng)建和刪除文字鏈接

在形狀元件上雙擊或選擇文本,按Enter,以編輯文本,然后,選擇要變成鏈接的文本部分,在“交互”窗格中單擊“插入文本鏈接”

在畫布上選擇文本鏈接,按DELETE,刪除文本鏈接。

2)文字鏈接遮罩

默認(rèn)情況下,文本鏈接用粉紅色遮罩,可以在應(yīng)用程序菜單的“視圖”→“遮罩”中切換遮罩。

*提示:窗口元件遮罩,包括文本鏈接遮罩,不在Web瀏覽器中顯示。

3)文字鏈接樣式

選擇文本鏈接,在“樣式”窗格或樣式工具欄中進行樣式選擇。

更新“文本鏈接”窗口元件樣式,該樣式默認(rèn)情況下應(yīng)用于所有文本鏈接。

十二、樣式效果

鼠標(biāo)懸停

當(dāng)鼠標(biāo)光標(biāo)移到元件上時應(yīng)用。(默認(rèn)情況下在文本鏈接上啟用。)

鼠標(biāo)按下

單擊窗口元件并按下鼠標(biāo)按鈕時應(yīng)用。(默認(rèn)情況下在文本鏈接上啟用。)

選中

當(dāng)通過“設(shè)置選中動作”將元件設(shè)置為選中狀態(tài)時,或者在單擊復(fù)選框或單選按鈕時自動應(yīng)用。

禁用

通過“禁用”操作將元件設(shè)置為禁用狀態(tài)時應(yīng)用。(默認(rèn)情況下在例如文本字段和下拉列表之類的窗體元件上啟用。)

獲取焦點

當(dāng)元件在Web瀏覽器中獲取焦點時應(yīng)用,例如文本字段和下拉列表之類的窗體元件在單擊或切換到選項卡時會自動獲取瀏覽器的焦點,還可以使用“焦點”操作動態(tài)地給元件瀏覽器焦點。

*提示:定義文本字段或文本區(qū)域上提示文本的樣式。(默認(rèn)情況下在這些元件上啟用。)

啟用樣式效果

  1. 選擇窗口元件,然后在“交互”窗格中單擊“新建交互”。
  2. 在事件列表下方,在“樣式效果”標(biāo)題下選擇所需的樣式效果。
  3. 在出現(xiàn)的區(qū)域中,選擇要為樣式效果更改的樣式屬性,通過單擊更多樣式屬性來查看樣式屬性的完整列表。

在編輯樣式效果時,更改內(nèi)容暫時應(yīng)用于畫布上的元件,在“交互”窗格中關(guān)閉樣式效果的對話框時當(dāng)前元件將返回默認(rèn)樣式。

*提示:創(chuàng)建一個元件樣式保存樣式選擇,在“窗口元件樣式”下拉菜單中選擇窗口元件樣式,啟用樣式效果。

更改窗口元件樣式,會自動應(yīng)用到使用它的所有窗口元件。

復(fù)制和粘貼樣式效果

在主菜單的“編輯”→“格式刷”中找到格式刷,使用格式刷將樣式效果從一個窗口元件復(fù)制并粘貼到另一個窗口元件。

十三、動畫

可以對某些動作進行動畫處理,在Web瀏覽器中發(fā)生時具有視覺效果,例如使用漸變動畫隱藏元件或使用反彈動畫移動元件。

每個動畫都有兩個部分:效果和時間。

  • 在“動畫”下拉列表中選擇的動畫效果決定了動畫的視覺效果。
  • 在ms字段中輸入的動畫時間決定了完成動畫所需的時間(以毫秒為單位)。

1. 可見性效果

以下效果可應(yīng)用于更改窗口元件可見性的操作,這些是“顯示/隱藏”操作和“設(shè)置面板狀態(tài)”操作。

  • 淡入淡出:逐漸更改元件或面板狀態(tài)的不透明度,直到完全看不見。
  • 向左/向右/向上/向下滑動:將元件或狀態(tài)滑動到視圖中或從視圖中移出。
  • 向左/向右/向上/向下翻轉(zhuǎn):沿中心軸翻轉(zhuǎn)元件或狀態(tài)到視圖中或從視圖中移出(X代表上/下,Y代表左/右)。

2. 移動效果

也稱為“緩動”以下效果決定了在指定時間范圍內(nèi)動畫的步調(diào),這些可以應(yīng)用于更改窗口元件或頁面本身的空間方向的動作。包括“滾動到元件”,“移動”,“旋轉(zhuǎn)”,“設(shè)置大小”和“設(shè)置不透明度”操作。

  • 逐漸:動畫在開始和結(jié)束時比在中點處稍微慢一些。
  • 線性:動畫在整個定時中以相同的速度進行。
  • 緩進:動畫開始緩慢,逐漸變快,直到定時結(jié)束。
  • 緩出:動畫開始緩慢,逐漸變快,直到定時結(jié)束。
  • 緩進緩出:動畫開始緩慢,逐漸變快直到定時的中點;然后逐漸變慢。(類似于Swing,但更為明顯。)
  • 彈跳:動畫像緩進一樣加速,但是一旦達到動畫的終點,就會反彈幾次。
  • 彈性:動畫會超出其終點,然后彈回原點。

十四、文檔化原型

1. 頁面和元件注釋

元件和頁面注釋是可以添加到設(shè)計中的文本元數(shù)據(jù),使用這些注釋來記錄規(guī)范,將元件和頁面與項目需求相關(guān)聯(lián),記錄更改并與開發(fā)同學(xué)進行交流。

1)頁面注釋

如果在畫布上沒有選擇任何元件,則頁面注釋字段位于“注釋”窗格的頂部,單擊進入頁面注釋字段以編輯其文本。

在編輯時,可以單擊字段右上方的“格式”圖標(biāo)來格式化注釋的文本。

2)元件注釋

元件注釋在“注釋”窗格中的頁面注釋下方列出,在畫布上沒有選擇任何元件時,將看到頁面上存在的所有元件注釋,在畫布上或“概要”窗格中選中元件,過濾到單個元件的注釋。

添加元件注釋

單擊“注釋”窗格底部“新注釋”區(qū)域中的注釋字段之一,該注釋字段以灰色的腳注圖標(biāo)標(biāo)記。編輯此區(qū)域中的一個字段將創(chuàng)建一個新的元件注釋。

分配元件注釋

可以將窗口元件注釋分配給頁面上的任何窗口元件,并且一個窗口元件可以分配多個注釋。此外,可以選擇不分配元件注釋。

如果在選擇元件時創(chuàng)建新的元件注釋,則該注釋將自動分配給該元件。相反,如果在未選擇任何元件的情況下創(chuàng)建新的元件注釋,則該注釋未分配;單擊注釋右上方的“分配元件”,分配未分配的注釋;單擊便箋右上角的元件名稱,將當(dāng)前分配的注釋分配給其他元件,或取消分配。

刪除元件注釋

選中元件,按DELETE。

或者,右鍵單擊窗口元件注釋,然后在上下文菜單中選擇“刪除”。

在單擊時按CMD(Mac)或CTRL(Windows)多選元件,按DELETE刪除。

排列元件注釋

元件的腳注圖標(biāo)上顯示的數(shù)字與其在頁面上存在的元件注解列表中的注解位置相對應(yīng)。可以通過在“注釋”窗格中向上,向下,向左或向右拖動注釋來更改編號。還可以通過“布局”一“對腳注重新編號”菜單選項立即自動對所有腳注重新編號。

向左或向右拖動元件注釋將使其縮進或縮進。

在另一個注下縮進一個注時,縮進注的編號將變成一個小數(shù),表示其在父便箋下的位置。例如,在注釋#4下縮進一個注釋將使該注釋縮進為注釋#4.1,隨后的注釋將為#4.2,#4.3,依此類推。

3)包括元件文本和交互

單擊注釋右上角的回形針圖標(biāo),選擇要包括的項目,可以在其分配的注釋中包括元件的文本和交互。

對窗口元件文本和交互的任何更改將自動反映在注釋中。

復(fù)制和粘貼元件注釋

復(fù)制帶有所需注釋的元,右鍵單擊要粘貼注,可以將元件注釋從一個元件復(fù)制并粘貼到另一個元件,然后選擇選擇性粘貼→粘貼元件注釋。

添加注釋字段

默認(rèn)情況下,頁面和元件均具有單個文本類型的注釋字段??梢酝ㄟ^單擊“注釋”窗格右上方的“更多屬性”圖標(biāo)或使用“項目”→“注釋字段和集合”主菜單選項來添加更多字段。

在“注釋字段和集”對話框中,使用“編輯元件注釋”選項卡來管理元件注釋字段,并使用“編輯頁面注釋”選項卡來管理頁面注釋字段。頁面注釋字段僅支持文本,但是窗口元件注釋字段可以是文本,選擇列表或數(shù)字字段。

4)元件注釋字段集

在“編輯元件字段集”選項卡上,可以將元件注釋字段組織成針對項目生命周期中不同受眾或不同時期的集合。

創(chuàng)建至少一個字段集后,可以使用頁面注釋下方的下拉列表按字段集過濾“注釋”窗格。

在瀏覽器中查看字段

在Web瀏覽器中查看原型時,可以通過單擊原型播放器右上方的“文檔”圖標(biāo)來查看當(dāng)前頁面的頁面和元件注釋。

使用HTML生成器設(shè)置的“注釋”選項卡上的選項,更改頁面和窗口元件注釋在瀏覽器中的顯示方式。

項目文檔中的注釋

頁面和元件注釋包含在Word文檔規(guī)范和CSV報告中。

*內(nèi)容中所用的AxurePR9版本號:3744

本文由 @PM大明同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!