移動網際網路之路——Axure RP 8.0網站與APP原型設計從入門到精通

1.1　　 瞭解 Axure RP
Axure RP 是一個專業的快速原型設計工具。 Axure(Ack-sure) 代表美國 Axure 公司； RP
則是 Rapid Prototyping( 快速原型 ) 的縮寫，最新版本為 Axure RP 8.0，其軟體啟動介面 如圖 1-1

所示。

圖 1-1
Axure RP 的第一個版本在 2003 年誕生。它是第一個專門被用來設計與製作基於瀏覽器三維網
站原型的軟體。9 年後，Axure RP 被公認為是網頁原型工具中的標準，並且被全世界眾多的使用者體
驗專家、商業分析人員和產品經理使用著。
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
2
　1.2　　 Axure RP 的安裝和啟動
在開始安裝之前，要執行一些相關的步驟，以減少安裝過程中遇到問題的可能性，例如確定執行
Axure RP 8.0 的計算機硬體要求，瞭解 Axure RP 8.0 版本與執行的作業系統等。具體系統要求如下。
作業系統： Windows 7/ Windows 8。
記憶體： 1GB。
CPU： 1GHz。
硬碟空間： 60MB。
產品的規格說明需要 Office 版本： Microsoft Office Word 2000/2003/2010。
例項分析：
該例項透過安裝和啟動軟體，了
解軟體的基本效能，熟悉軟體的工作
介面。
Axure RP 8.0 的安裝和啟動
例項1 教學影片：影片 \ 第 1 章 \Axure RP 8.0 的安裝和啟動 .mp4　　原始檔：無
製作步驟：
01 　將下載好的 Axure RP 安裝包解壓，如圖 1-2 所示。解壓完成後，雙擊開啟 Axure_RP_
Pro 資料夾，如圖 1-3 所示。

圖 1-2

圖 1-3

第 1 章　初識 Axure RP
3
02 　在 Axure_RP_Pro 資料夾中雙擊 AxureRP-Setup-Beta 選項，如圖 1-4 所示。彈出安
裝 Axure RP 軟體介面，在介面上單擊 Next（下一步） 按鈕，完成下一步的安裝，如圖 1-5 所示。

圖 1-4

圖 1-5

03 　在 License Agreement( 許可協議 ) 下勾選 I Agree（我同意），單擊 Next（下一步）按鈕，
繼續進行安裝，如圖 1-6 所示。選擇軟體的安裝位置，單擊 Next( 下一步 ) 按鈕進行安裝，如圖 1-7 所示。

圖 1-6

圖 1-7

04 　繼續單擊 Next( 下一步 ) 按鈕進行安裝，如圖 1-8 所示。繼續單擊 Next（下一步）按鈕進
行安裝，如圖 1-9 所示。

圖 1-8

圖 1-9

移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
4
05 　進入安裝程式開始進行安裝，如圖 1-10 所示。完成軟體的安裝，如圖 1-11 所示。

圖 1-10

圖 1-11

06 在“開始”選單下可以看到 Axure RP 8.0 的啟動圖示，如圖 1-12 所示。單擊該選項即可
啟動 Axure RP 8.0，啟動介面如圖 1-13 所示。

圖 1-12

圖 1-13

使用者可以在軟體介面中完成原型的設計與製作。執行“檔案 > 退出”命令，即可退出 Axure RP
8.0 的工作介面。
　1.3　　 原型設計
原型設計概括來說是整個產品在上市之前的一個框架設計。以網站註冊作為例子 , 完成前期互動
設計流程圖的設計之後 , 就是原型開發的設計階段 , 簡單來說就是將頁面的模組、元素、人機互動的
形式，利用線框描述的方法，更具體生動地表達出來，如圖 1-14 所示。
第 1 章　初識 Axure RP
圖 1-14
Axure RP 是一個專業的快速原型設計工具，讓負責定義需求、規格、設計功能和介面的專家能
夠快速建立應用軟體或 Web 網站的線框圖、流程圖、原型和 Word 說明文件。作為專業的原型設計
工具，它能快速、高效地建立原型，同時支援多人協作設計和版本控制管理，如圖 1-15 所示。

圖 1-15
　1.4　　 Axure RP 中專業術語的區分
使用者在使用 Axure RP 之前要將線框圖、原型和視覺稿區分清楚，這對接下來的學習很有幫助。
1.4.1　線框圖
線框圖是低保真的設計圖，通常以黑白線條來表達，並配以說明文字，其內容包括內容大綱 ( 什
麼東西 )、資訊結構 ( 在哪兒 )、使用者的互動行為描述 ( 怎麼操作 )。
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
6
除了使用筆和紙繪製線框圖外，使用 Axure RP 也可以繪製線框圖，其繪製線框圖的最大優點
是“快”，繪製時不必在意細節，但必須表達出設計思想，不要漏掉重要部分。視覺上的審美效果應
該儘量簡化，黑白灰是經典用色，也可以使用藍色代表超連結，如圖 1-16 所示。

圖 1-16
好的線框圖應該能夠清晰、明確地表達出設計師的設計創意，在團隊成員中準確傳
達設計思想。在複雜專案的初始階段，線框圖是必不可少的，發揮著極其重要的作用。
提示
1.4.2　原型
原型是中 ( 低 ) 保真的產品設計圖，代表最終的產品。原型 ( 指網際網路產品原型 ) 的作用非常關鍵，
也非常豐富，有以下 4 種。
● 高效、準確地展示產品需求。
● 快速更新和迭代。
● 有效地測試不同的假設和想法。
● 將使用者的需求視覺化。
原型的設計應該儘可能與最終產品一致，在進入正式產品開發階段之前，將產品原型傳送給股東、
使用者等進行測試，並根據他們的反饋意見進行調整，在原型中做這些工作要遠遠強過開發出應用程式
之後再做 , 如圖 1-17 所示。

1.4.3　視覺設計稿
視覺設計稿是高保真原型的靜態設計圖。將視覺設計稿製作成可互動的原型就是高保真原型了。
通常來說，視覺設計稿就是視覺設計的草稿或終稿，幫助團隊成員以視覺審美的角度審視產品。用優
秀的視覺設計稿製作高保真原型可以起到意想不到的作用，無論是拿去見投資人，還是收集使用者反饋，
都是最佳選擇，如圖 1-18 所示。

第 1 章　初識 Axure RP
例項分析：
在 Axure RP 中新建專案檔案的
方法有很多。本例項是透過執行新建
命令進行操作的，Axure RP 還有很
多新建專案檔案的方法，詳細內容將
在後面的章節中向使用者講解。
新建專案文件
例項2 教學影片：影片 \ 第 1 章 \ 新建專案文件 .mp4　　原始檔：無
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
8
製作步驟：
01 　雙擊 Axure RP 8.0 啟動圖示，開啟軟體，如圖 1-19 所示。執行“檔案 > 新建”命令，新
建專案文件，如圖 1-20 所示。

圖 1-19

圖 1-20

02 　完成新建專案文件的操作，如圖 1-21 所示。

圖 1-21
雙擊啟動圖示後，開啟的 Axure RP 預設介面就是一個新建的專案文件，使用者可以
直接在上面進行繪製，無須再新建文件。
提示
第 1 章　初識 Axure RP
9
　1.5　　 Axure RP 8.0 的特色功能
Axure RP 8.0 有四大特色功能——產品概念圖及設計、互動、文件和合作。
1.5.1　產品概念圖及設計
產品概念圖就是設計師使用元件及鋼筆工具將專案粗略地繪製在頁面編輯區中，展現出原型。
1. 既可粗略設計又可精細設計的工具
在 Axure RP 中，只使用矩形、佔位符、形狀和文字元件，就可以飛快地製作出漂亮的線框圖。
將原型中需要的元素都準備好，再進行精細的視覺美化，加上顏色、漸變色、半透明填充、匯入圖片、
使用網格和參考線進行精確定位，或者在其他工具 ( 例如 Photoshop、 Illustrator 等 ) 的幫助下使項
目達到使用者需要的合理的真實程度。
如圖 1-22 所示，第一張是比較粗略的線框圖，第二張是視覺美化之後的高保真原型圖，它們都
是原型，只是真實程度不同。

圖 1-22
2. 可切換到手繪圖的效果
在專案的製作階段，可以隨時透過調整精細程度將原型圖修改為灰度的手繪效果。使用者可能會因
為這種原生態的感覺而喜歡上它。透過這種方式，設計師可以免去使用者不必要的期待，讓他們專注於
功能、內容和互動。
在 Axure RP 中新建一個專案，拖曳一個矩形元件到頁面編輯區中 ( 使用者可能還不太熟悉這個流
程，後面會詳細介紹 )， Axure RP 會自動將矩形的邊框變得不規則，從而展現一種手繪的效果，如
圖 1-23 所示。

圖 1-23
3. 簡單易操作
從一開始， Axure RP 經典的原型工作環境非常類似使用者熟悉的 Windows 介面和 Office 介面，
行內文字編輯和超過 50 種的鍵盤快捷鍵就能夠讓使用者高效工作，如圖 1-24 所示。當使用者開始熟悉
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
10
選擇模式、元件皮膚和檢視皮膚等功能後，其工作效率將與日俱增。

圖 1-24
4. 使用母版以做到“一處修改，處處更新”
使用母版製作一些需要重複使用的部分，例如網站的頭部、尾部或者其他母版。一旦母版被
更新了，所有使用此母版的頁面就會自動更新。使用者在設計時可以儘自己所需，在頁面中多使用
母版。
5. 元件可以讓使用者迅速地掌握 Axure RP
Axure RP 支援載入第三方元件庫，使用者可以下載其他使用者釋出的免費元件，也可以加入自己的
圖示、商標、品牌元素或者設計模式，建立屬於自己的獨一無二的元件。
Axure RP 提供了大量的元件，如圖 1-25 所示。元件就像是 PowerPoint 模板一樣，使用方法
相似。

圖 1-25
第 1 章　初識 Axure RP
11
例項分析：
透過該例項可以熟練掌握基本元
件的使用方法，從簡單的介面開始，
學習原型設計。例項中主要使用了文
本標籤元件、矩形元件和文字元件等
多個元件。
使用元件繪製找回密碼介面
教學影片：影片 \ 第 1 章 \ 使用元件繪製找回密碼介面 .mp4
原始檔：原始檔 \ 第 1 章 \ 使用元件繪製找回密碼介面 .rp
例項3
製作步驟：
01 　執行“檔案 > 新建”命令，新建專案文件，如圖 1-26 所示。將“佔位符”元件拖曳到編輯區內，
調整大小和位置，並輸入 Logo 文字，效果如圖 1-27 所示。

圖 1-26

圖 1-27

02 　繼續將“矩形 1”元件拖曳到編輯區中，將矩形轉換為橢圓形，如圖 1-28 所示。調整橢圓
形的位置和大小，並輸入文字“1”，如圖 1-29 所示。

圖 1-28

圖 1-29

移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
12
03 　選中橢圓形元件，在檢視皮膚中橢圓形皮膚的“樣式”標籤下設定“填充顏色”為
#FF6633，如圖 1-30 所示。“邊框顏色”為 #666666，如圖 1-31 所示。

圖 1-30

圖 1-31

04 　效果如圖 1-32 所示。使用相同的方法繪製其他形狀，如圖 1-33 所示。

圖 1-32

圖 1-33

05 　將“文字標籤”元件拖曳到編輯區內，在圓形下分別編輯文字，如圖 1-34 所示。使用“聯結器”
工具將圓形連線，如圖 1-35 所示。

圖 1-34

圖 1-35

06 將“矩形 1”元件拖曳到編輯區內，調整元件的位置，設定“填充顏色”為 #66CCFF，“不
透明”為 5，“邊框顏色”為無，如圖 1-36 所示，效果如圖 1-37 所示。
07 　將“文字標籤”元件拖曳到編輯區內，編輯文字，如圖 1-38 所示。將“文字框”元件拖曳
到編輯區內，編輯文字，如圖 1-39 所示。
08 　使用相同的方法繪製找回密碼頁面的其他內容，最終效果如圖 1-40 所示。
第 1 章　初識 Axure RP
13

圖 1-36

圖 1-37

圖 1-38

圖 1-39

圖 1-40
1.5.2　原型的互動動態
Axure RP 建立的元件可以具有網頁、 JavaScript 和 Ajax 的互動動態功能，使用者瞭解程式設計知識
也很重要，以便可以快速掌握 Axure RP 中的技術應用。
1. 不只是點選這麼簡單
使用者可以非常容易地建立簡單的點選網頁，也可以使用條件邏輯、動態內容、動畫、拖放和計算
來建立高階功能和豐富的頁面原型，並不一定要建立高保真的原型，但是如果需要，可以很容易地讓
自己的設計上升到新的高度，能夠更加方便評估，及時獲得使用者反饋以及使用者測試。
使用 Axure RP 可以輕鬆地建立網頁上常見的幾乎所有基於 CSS、 JavaScript 和 Ajax 的互動
動態功能。
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
14
2. 不需要程式設計知識，所見即所得
選擇一個事件，例如頁面載入時、視窗滾動時或頁面按鍵鬆開時，
如圖 1-41 所示。選擇一個事件並且選擇動作，例如開啟連結或設定元
件值。最後為動作設定選擇引數，這樣就完成了。

在 Axure RP 中，完全不懂程式碼的人經過學習也可以完成簡單的網
頁互動功能，而這些功能原本是需要對 CSS、 HTML 和 JavaScript 熟
練掌握的工程師才可以做到的。
建議網際網路的從業者多少都要懂一些程式碼，但是 Axure RP 的便捷
效能夠極大地簡化使用者的工作，不需要花費太多的時間和精力，就可以
更加方便地製作網頁。
3. 快速 HTML 程式碼
執行“釋出 > 生成 HTML”命令， Axure RP 會立刻將使用者的設
計生成基於 HTML 程式碼和 JavaScript 程式碼的原型，並且該原型可以在
Internet Explorer、 Safari、 Firefox 或者 Chrome 等多個瀏覽器中瀏覽，
如圖 1-42 所示。

圖 1-42
決策者、開發者和測試者無須安裝 Axure RP 或者是特定的瀏覽器。使用者可以把自己的文件發
布到網路上，或者在 上進行分享。
4. 自己的原型設計就是自己的品牌
自己的網站原型就應該擁有自己的品牌，所以可以新增 Logo 圖片和標題到自己的原型中，突出
個人網站原型設計的特點。
1.5.3　獨立儲存文件
提到文件，相信使用者並不陌生，使用 Axure RP 文件也是特色功能之一，具體和 Word 等文件
有什麼不同，下面將向使用者詳細講解。
1. 元件說明和頁面說明
使用者可以為元件和頁面新增說明，從而更好地解釋原型的背景情況和對原型進行詳細的功能描述。
說明按照自定義的欄位進行組織，以便更好地管理資訊和使文件標準化。頁面說明還可以針對不同的
圖 1-41
第 1 章　初識 Axure RP
15
受眾進行不同的分類，如圖 1-43 所示。

2. 強大的、可自定義的 Word 文件生成器
Axure RP 可以生成自定義頁頭、頁尾、標題頁和標題樣式的 Word 文件模板，如圖 1-44 所示。
選擇是一欄顯示還是兩欄顯示，設定選項，點選立刻生成自定義文件說明，即可使用。

圖 1-43

圖 1-44

3. 匯出文件
Axure RP 不僅可以匯出所有的元件說明和頁面說明，還可以匯出元件的一些值，例如將列表元
件或者下拉類別元件中的所有供選擇的值匯出為 Word 文件。使用者可以隨時選擇是要匯出哪些有說明
的元件或者所有的元件。
4. 透過過濾器將元件分類，然後匯出為不同的文件
使用者可以根據元件說明中的不同值，透過設定過濾器的方式，將不同值的說明分別匯出。如果用
戶在跟蹤某個特定的版本或者在說明中更改了需求，僅僅匯出某個版本或者某個變化後的說明即可 ( 在
本書的第 6 章向使用者詳細講解該內容 )。
1.5.4　團隊合作
合作就是個人與個人、群體與群體之間為達到共同目的、彼
此相互配合的一種聯合行動方式。在 Axure RP 專案中也可以通
過合作的方式更出色地完成專案。
1. 在設計團隊中共享專案
使用共享專案可以在所有成員間同步工作。 Axure RP 會保
留所有的工作歷史，並且如果需要的話，可以匯出之前版本的項
目文件。使用一個共享的網路目錄可以建立共享專案。最棒的是
這些都是免費的。建立團隊專案對話方塊如圖 1-45 所示。
2. 共享使用者自己的專案並且獲得反饋
使用者可以把自己的檔案上傳到 ， 

圖 1-45
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
16
原型會在幾分鐘之內自動生成並且共享。透過設定密碼，讓只有授權的人才可以訪問，還可以在共享
的專案中開啟討論功能，大家可以在使用者的原型中進行討論 ( 在本書的第 7 章向使用者詳細講解該內容 )。
　1.6　　 Axure RP 8.0 的新增功能
Axure RP 對工作流程改進的一個重要方法是可以為團隊提供自定義的元件，這有效地節約了大
家的時間，並提高了專案的一致性。 2015 年 8 月推出了 Axure RP 8.0，下面將向使用者介紹 Axure
RP 8.0 的三大新增功能。
1.6.1　鋼筆工具
全新的鋼筆工具可以讓使用者自己繪製自定義的元件。由於這些圖形都是向量圖，使用者可以對它們
進行自由拉伸，另外還可以改變它們的填充和邊框，這對於設計圖示、圖表、彎曲箭頭、圖案輪廓和
按鈕等是非常有用的，如圖 1-46 所示。還可以使用合併、去除、相交和排除等選項來選擇影像，如
圖 1-47 所示是使用鋼筆工具和去除選項來建立一個自定義的表情符號。

圖 1-46

圖 1-47

1.6.2　全新的動畫與互動
高保真原型對於贏得使用者的購買意願是非常有幫助的。對於高保真的原型， Axure RP 8.0 提供
了一些新特性使其更加豐富，如圖 1-48 所示。

圖 1-48
第 1 章　初識 Axure RP
17
Axure RP 8.0 可以在同一時間使一個物件執行多個動畫，例如在移動的同時顏色變淡，如
圖 1-49 所示。還能夠以動態旋轉物件設定物件的形狀和大小，可以翻轉動畫，如圖 1-50 所示。

圖 1-49

圖 1-50
此外， Axure RP 8.0 在互動上還會有一些微妙但有效的改進。例如，新增了兩個新的事件——
視窗向下滾動時和視窗向上滾動時。中繼器元件是 Axure RP 7.0 版本新增加的功能，備受使用者好評。
在 Axure RP 8.0 中，它被升級到擁有更多的不同尺寸。
1.6.3　快照元件
建立完全清晰的互動設計文件耗時且乏味。其中很大一部分時間被用來建立和更新需要傳達
給團隊的各種狀態的螢幕截圖。專業版的自動化 Word 文件生成器非常強大，但在原型的豐富上，
它有很大的侷限性。已經有越來越多的使用者開始選擇在 Axure RP 上建立自定義文件，如圖 1-51
所示。

Axure RP 8.0 的快照元件旨在更快地建立和更新自定義文件。它可以被用於捕捉頁面影像並對
引用進行管理，使用者可以拖動和縮放快照頁面的特定部分。當頁面出現改變以後，快照也會自動進行
相應改變。
可以對引用的頁面指定動作以此捕捉它的特定狀態。例如，可以在頁面的“點選”按鈕上使用新
的互動事件行為，並得到按鈕被點選之後的頁面快照。如果改變了按鈕的互動行為，快照也會自動更
新。這對於流程圖是非常有用的，現在可以看到一系列事件的頁面縮圖，如圖 1-52 所示。

移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
1.6.4　其他新增功能
另外，Axure RP 8.0 還有其他的一些新增功能，具體如下。
● 環境的更新。
● 新增加預設元件和元件樣式。
● 增加群組功能。
● 流程圖。
● 行為動作。
● 動畫。
● 新增事件。
● 團隊專案。
● 中繼器。
這些新增功能將在後面的各章節中向使用者詳細講解，Axure RP 8.0 將會向使用者呈現
出一個全新的工作環境，提高設計師的工作效率。
提示
第 1 章　初識 Axure RP
19
　1.7　　 Axure RP 與其他原型工具的比較
還有很多其他軟體可以用來做原型設計，例如 Visio、 Word 和 Photoshop 等。它們都是非常
強大的軟體，但是對於網站原型的製作工作來說，沒有比 Axure RP 更貼近需求的了。如表 1-1 所示，
簡單地向使用者對比一下這幾個軟體，從而可以具體瞭解 Axure RP 的優勢。
表 1-1　各軟體的對比

Word	Photoshop	Visio	Axure RP
簡述	微軟出品的文件編輯 工具	Adobe 公司出品的圖 片編輯軟體	微軟出品的視覺化模型 和流程軟體	Axure 公司出品的網頁 原型軟體
特長	文字編輯、排版	圖片編輯、平面創意	流程圖、網路圖、工作 圖、軟體圖和結構圖	網頁建模、原型圖和線 框圖
網頁模型排版 能力	低 ( 對齊很難 )	自由	自由	自由
生成格式	doc/docx	psd/jpg/png	vsd/html	html/rp
互動	無互動，靜態文件	無互動，靜態圖片	簡單的基於點選的互動	支 持 各 種 基 於 HTML 的互動效果
適用者	產品經理、專案經理、 測試經理	平面設計師、網頁開 發工程	產品經理、專案經理	產品經理、平面設計師、 網頁開發工程師、測試 經理、營銷經理、專案 經理
學習難度	容易	容易	容易	容易
安裝檔案大小	幾百 MB	幾 GB	幾 MB	幾十 MB
演示檔案	不適合演示	不適合演示	適合	適合
製作線框圖	很困難	困難	容易但是無法互動	容易
多人協作	只能透過批註的模式	困難	無	有
版本管理	無	無	無	有
嵌入 Flash	無	無	無	有
原型真實程度	低	高	高	高

　1.8　　 原型設計流程的不同模型
在生活中經常會看到建築設計圖、樣板間和一些數碼產品的概念設計圖、概念車，這些都是原型
的不同體現。
如圖 1-53 所示，這是兩種常見的使用者體驗原型設計模型。
A 種模式原型： 完全依賴於前端開發者來表達互動的想法，並且要承受被拒絕採用或多次修改的
風險。在此場景中，使用者體驗設計師建立靜態線框圖，前端開發者將其轉換為 HTML。
B 種模式原型： 設計師自己開發原型，自己學會 HTML、 CSS 和 JavaScript，線框圖和可互動
原型都靠自己一手搞定。
Axure RP 給提供了第三種選擇，使用者體驗設計師不必依賴前端工程師，也不用讓自己成為程
序員。
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
20

圖 1-53
雖然 Axure RP 8.0 的學習曲線比較苛刻，但是一旦掌握 Axure RP，就可以輕鬆地實現自己設
想的非常現代的使用者體驗效果。使用 Axure RP 可以將一個概念落實為線框圖，再進一步製作成高保
真原型，甚至可以根據需求製作響應式佈局來適配不同尺寸的螢幕。
如果使用者熟悉編碼，Axure 對 JavaScript 和 CSS 的支援是非常強大的；如果
使用者不熟悉編碼，仍然可以建立令人驚歎的產品原型，而不需要編寫一行程式碼。
提示
　1.9　　 原型設計的互動式原理
事實證明，原型不是今天才發明的。原型的價值貢獻、投資回報率和原型技術術語至少已有上千
年曆史。相比傳統原型設計，軟體原型設計需要豐富的使用者體驗，這是 UX 對設計師的巨大挑戰 (UX
全稱 User Experience，中文名“使用者體驗”)。
1. 情景化
原型是模擬使用者在介面上的操作流程，系統也要對使用者的操作做出響應。通常，流程要考慮多方
面因素，帶有很多條件，要經過多步才能順利完成。 UX 設計師能夠使用的互動模式，已經比十年前
要豐富得多了，如圖 1-54 所示。

圖 1-54
第 1 章　初識 Axure RP
21
2. 多種螢幕大小
原型設計必須考慮螢幕大小。例如，各種屏
幕尺寸的手機、平板電腦、個人電腦以及超大屏
幕的裝置等。螢幕大小影響著使用者體驗，而使用者
完成某一項任務時，又會期望在各個螢幕上有一
致的功能和體驗，如圖 1-55 所示。

3. 頁面內非同步更新
在 20 世紀 80 年代，軟體以使用者端 / 伺服器
(C/S) 模式為主，任務的普遍流程是從一個視窗
跳轉到另一個視窗。在 20 世紀 90 年代的 Web
模式下，常見的 Web 導航是從一個頁面超級鏈
接到另一個頁面。現在，隨著頁面中資料的非同步更新，多個頁面之間切換的情況有所減少。頁面內異
步更新，使原型設計的複雜度大大增加，如圖 1-56 所示。

圖 1-63

圖 1-64

4. 不同許可權使用者的個性化體驗
根據不同的使用者許可權，原型會有不同的應對措施。對於非註冊使用者，網站可能會顯示特殊的條件
吸引使用者註冊，如圖 1-57 所示。

圖 1-57
對於已註冊登入使用者，網站可能會依據以往使用者所設定的內容 , 提供給使用者相應的資訊。對於付
費使用者，則可以訪問更多內容，如圖 1-58 所示。

移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通

5. 可擴充套件性
許多應用程式是分階段的，因此可以基於戰略目標、實際預算和技術限制等對專案的投入進行排
序。原型往往反映了完整的產品，但一個好的原型也必須支援設計人員精簡或擴充套件的功能。
6. 本地化
在全球經濟形勢下，所開發的應用程式必須易於本地化，以適應當地語言、文化和偏好。設計出
的原型需要支援多種語言。
7. 異常處理
原型要演示出應用程式在互動過程中出現異常的情況。這種異常可能由使用者觸發，也可能有系統
觸發。這也是互動原型最難實現的一項功能。
　1.10　　 Axure RP 的實踐應用
很多人不清楚應該什麼時候使用 Axure RP，在處理什麼樣的專案或任務時使用 Axure RP 最合
適。下面將向使用者介紹 Axure RP 在生活中的實踐應用。
1.10.1　簡單的專案
在生活中常常會遇到這樣的情形，作為策劃者，在與使用者或者與專案提出者洽談時，常常會聽到
“想法很簡單，就是做個簡單的網站 ( 或 APP)，只需要一些非常基礎的功能……”，事實上，使用者
或者專案提出者想要的絕不是他所描述的那樣簡單。因此在簽訂合同之前，使用者最好能把所有的詳細
需求都一一列出來。
使用者並不知道自己想要的“簡單的”網站 ( 或 APP) 到底是什麼樣子。“簡單”這個詞是用來表
達目的，因為通常情況下人們對“簡單”這個詞的理解都會本能地將注意力集中在最突出 ( 基本 ) 的
功能和所涉及的頁面數量上。然而，這可能會導致非常嚴重的誤導。
1. 少數頁面模板的組成
現代的 Web 應用程式的頁面模板都相對較少，例如首頁、列表頁及詳情頁等，如圖 1-59 所示。
每個頁面的複雜性可能都不相同。
第 1 章　初識 Axure RP
23

圖 1-59
2. 需要制訂內容戰略
內容的展示需要適應不同的裝置，這是必須要考慮的重要條件。對於任何給定的螢幕，至少要考
慮 3 種佈局 ( 桌面電腦、平板電腦和手機 )，如圖 1-60 所示。

對於某些型別的應用程式，為了確保
工作流程在多個螢幕中順利進行，工作的複雜性可能以指數倍增加。
3. 應用程式的使用者數量
應用程式的使用者數量，也是一個需要
注意的問題。是否需要動態改變內容？是
否需要註冊 / 登入功能？是否需要交易功
能？是否有動畫效果，是否需要模擬使用者
運算元據？這些問題直接影響到最終產品
的效果，所以要特別注意。
1.10.2　網站應用程式和入口網站
網站： 是用來展示內容的，如新聞、部落格等，如圖 1-61 所示。

圖 1-61

移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
24
網站應用程式： 是用來執行任務的，例如百度就是一個網站應用程式，使用者使用它執行搜尋任務。
此外，火車票、機票、酒店的查詢預訂等，供使用者執行任務的都屬於網站應用程式，如圖 1-62 所示。

圖 1-62
網站應用程式和入口網站的原型是最適合使用 Axure RP 的。雖然有很多入口網站可用，但是
企業往往需要定製開發來增強某些功能，以便滿足業務需求，需要注意以下幾點。
● 為了確保專案能夠獲得企業高層的認可，需要先建立一個簡單的 UX 概念原型。在實際專案
中，UX 的資源投入可能很小，但對專案的發展會產生重大影響。
● 高保真原型的建立是一個複雜的過程。儘可能記錄自己的工作思路、指導原則、各個相關者
的反饋意見、優先順序，以及可能存在分歧的地方。
● 應用程式包含多個模組，代表組織中不同的業務單元。通常情況下，這些業務單元遍佈全國
甚至世界各地，每個業務單元可能有其自己的規則、要求和技術支援。這些需求在整合到應
用程式之前必須考慮到將其簡化、統一。
● UX 設計師需要擁有全域性觀，一個好的 UX 設計師，需要具備務實與創新之間保持良好平衡
的能力。
提示
不要擅自做任何假設，詢問儘可能多的關於術語、流程和不明白的地方。
在專案早期，指出潛在的差距和實現風險。
在評審會議中對這些方面進行評審。
● 建立一個共享專案，與團隊成員多溝通，保證應用程式的整體性和一致性。
● 為了處理每個模組的複雜性和具體需求， UX 團隊還需要業務和技術相關人員的加入。
第 1 章　初識 Axure RP
25
1.10.3　移動應用
一直以來，蘋果公司非常重視使用者體驗。隨著移動裝置和傳統計算機之間體驗差距的逐漸縮
小，新的互動模式 ( 如手勢 ) 已被廣泛運用。使用 Axure RP 的元件可以輕鬆地為主流移動裝置 ( 如
iPhone、 iPad 和 Android 裝置 ) 建立原型，如圖 1-63 所示。
越來越多的公司想要將傳統計算機上的 Web 程式擴充套件到移動裝置上。可以使用 Axure RP 為這
些 APP 進行原型設計，並在移動裝置上進行演示，如圖 1-64 所示。

1.10.4　使用者驗證
可以利用企業提供的條件進行使用者驗證活動，例如可用性測試。最重要的是把控好使用者驗證在項
目中的預算和時間表，還有要用到的互動原型質量，這對於複雜的應用程式尤其重要。在進行可用性
測試之前，要確保可用性測試的場景是建立在原型中的，因為計劃以外的場景可能會導致大量的問題，
造成不必要的返工和修改。
1.10.5　啟發式評估
在對一個應用進行重新設計時，設計師的任務之一是對現有使用者介面進行啟發式分析。分析結果可
以幫助決策者確定專案涉及的範圍、預算和時間表，並讓設計師有機會熟悉應用程式和現有的使用者體驗。
可以在 Axure RP 頁面中插入螢幕截圖，快速建立一個應用程式的複製品。在螢幕截圖的合適位
置新增更多的細節內容，如操作按鈕，建立一個原型。在相關說明欄位上新增說明，生成一個 HTML
原型和一個 Word 文件，可以使用此原型文件向所涉及的部門展示結果。
1.10.6　原型和規範文件
通常情況下，使用者都會要求設計師給出線框圖、高保真原型和 Word 規範文件。下面所列出的是
設計師需要重點考慮的內容 ( 如果使用者對其內容不瞭解，後面的章節會詳細講解 )。
移動網際網路之路——Axure RP 8.0 網站與 APP 原型設計從入門到精通
26
Axure RP 是一款很好的原型設計工具，重要的是在處理不同規模的專案、面對不同的問題時，
如何將這款工具的價值最大化地發揮出來。
● 向開發團隊索要一份使用過的規範文件，體驗一下什麼格式的專案文件是可接受的。
● 如果使用者需要設計師提供互動原型，他對原型所預期的互動是什麼樣的？使用者的期望都是基
於過去的經驗，設計師可以和使用者商談瀏覽一下自己看過的互動原型，把自己做過的成功案
例展示給使用者，提高雙方對互動原型效果的共識。
● 如果應用程式需要製作基於不同角色的使用者登入效果，你要為每個角色都製作完整的使用者體
驗，還是隻為主要角色製作。僅這一點就有可能毀掉整個專案，因為專案負責人 ( 投資人 )
可能想看到每個角色的不同需求，而你的預算和工作計劃中可能只模擬了一個角色的使用者體
驗，這一點在專案前期一定要注意，並與專案相關人員溝通清晰。
● 計算一下製作靜態線框圖的費用是多少。製作原型的高保真視覺介面的費用是多少。是否需
要快速製作出高保真原型，根據高保真原型的設計細節和規範文件進行開發。
　1.11　　 大專案中的 Axure RP 技巧
以下一些技巧或提示，可以最大限度地發揮 Axure RP 在大型專案中的作用。
● Axure RP 可以促進設計的一致性，但是無法強制，所以要透過管理手段確保設計的一致性。
● 讓所有團隊統一和正確地建立線框圖很重要。
● 建立線框圖和動態皮膚時，要約定一個命名規範。管理稽核時，要對這些命名的合理性進行稽核。
● 對線框圖的組織和結構進行統一，讓所有團隊使用這種統一的結構。
● 要花時間使用 Axure RP 的細節。
● 在專案開始時，嘗試合理地使用母版和動態皮膚，統一使用一種方法。在管理稽核時，要驗
證執行情況。
● 注意在專案計劃中 Axure RP 的檔案時間。
● 在進行可用性測試、重大設計修改之前，要對 Axure 專案檔案進行重新稽核。
　1.12　　 本章小結
近年來， Axure RP 已成為許多 UX 設計師的首選工具，它在功能、複雜性和投入成本之間找到
了平衡，是展示設計創意和想法的最佳工具。本章向使用者詳細介紹了 Axure RP 的發展、原型設計
的應用和不同原型設計工具之間的區別。 Axure RP 8.0 是 Axure 公司推出的最新版本，本章向使用者
簡單介紹了 Axure RP 8.0 的新增功能。透過深入瞭解 Axure RP 滿足自己需求的同時，也要記住
Axure RP 只是一個原型設計工具而已，進行互動設計最重要的還是想法，工具只是用來幫助實現想
法的。不必過於追求技術，不必過於追求視覺表現。把握好整個產品方向的同時，應專注於互動流程、
頁面內互動、佈局結構的創新和最佳化 。
　1.13　　 課後練習——解除安裝 Axure RP 8.0
如果使用者不想使用 Axure RP 了，可以透過解除安裝將軟體從計算機中移除。下面講解如何解除安裝
Axure RP 8.0。
第 1 章　初識 Axure RP
27

如果使用者不需要再使用 Axure RP，可以 選擇解除安裝該軟體。如果想要再次使用該軟體，則 需要再次安裝。解除安裝 Axure RP 8.0 的具體操作 如下。

01 開啟“控制皮膚”，單擊“程式和功能”
圖示。
02 選擇需要解除安裝的Axure RP 8.0軟體列表。
03 單擊“解除安裝”按鈕，根據提示開始解除安裝
軟體。

購買地址：