關於產品經理對Axure的應用

注意：本系列文章內容，均爲做者結合自身經驗，給出的建議性方案，做爲實際應用的參考！若有不嚴謹或錯誤之處，敬請指出，不勝感激！

Axure不等於產品經理，它只是一個可以輔助產品經理工做的工具；

Axure不等於交互設計，Axure可以幫助咱們直觀呈現產品需求，便於溝通；

Axure不等於低保真原型，它也可以在產品論證階段，經過交互模擬實現對功能模塊的可用性測試以及用戶體驗測試。

Axure不等於高保真原型，Axure在產品經理手中應該有各類不一樣的應用；

Axure並不像大多數人想象中的樣子。

從這一篇開始，我將結合一個虛擬出來的APP產品，對Axure的具體應用，給你們作詳細的展現。

讓你們可以知道，在產品經理的工做中，Axure的主要應用和不可忽視的做用。

不過，既然是一個APP產品，咱們總要先有這個產品的結構信息，纔可以在此基礎上進行原型以及其餘重要圖表的繪製。

下面這張圖就是使用Xmind整理出來的一個產品信息結構圖。（由於是一個虛擬出來的產品，僅做爲後面內容的基礎，因此並無過多的考慮功能是否完整，請勿在這方面過於追究。）

我將結合這張圖，逐漸的深刻，結合各類姿式、技巧，來知足你們的需求。

特別說明：這張圖是思惟導圖軟件Xmind中的邏輯圖（向右），用這樣的圖表來呈現產品信息結構，結構上比較清晰，也比較適合用戶從左至右、從上至下的閱讀習慣。

當咱們完成這樣的一張圖表以後，其實已經能夠進行一次產品需求的溝通，例如：與決策層溝通在產品目標定位上是否匹配，是否與商業需求以及市場需求相一致；與開發部門探討產品研發是否有障礙或難度，以及對開發週期進行粗略的評估。

當溝通獲得確認以後，咱們就能夠着手進行下一步。

在前文中，我經過思惟導圖整理了一個資訊類APP的產品結構。

不過，在這篇文章中，我將這個結構進行了修正和細化，呈現了完整的產品信息結構。

你們能夠對比兩次的圖表看一下修正與細化的內容。

經過對比，你們可以看出，思惟導圖軟件在咱們梳理產品結構的工做中，可以讓咱們很是容易的進行結構的修改。

這樣可以大大的下降以後產品原型的錯誤率。

這裏我把這個使用Xmind製做的思惟導圖源文件與你們分享，下載地址：https://pan.baidu.com/s/1C6qdXxb2erLOwP7pImIv5Q

注意：轉載的文章若是直接點擊不能下載，請嘗試將下載地址複製到瀏覽器打開。

在肯定了產品信息結構圖以後，這裏我在思惟導圖軟件中把頁面功能與元素收起，這樣咱們就能看到產品的框架結構。

不過，在實際工做中，咱們通常的順序是先完成產品框架結構，再在此基礎上完成產品信息結構。

也就是先作好提綱，再進行細化。

下圖中帶有向右綠色箭頭的分支主題都是頁面。

當咱們完成了產品信息結構圖，確認了產品結構、功能、元素、關聯都沒有問題以後，接下來，咱們就能夠依據着這張圖表，進行原型頁面的建立、頁面佈局的規劃以及頁面功能的組織與元素的添加。

下面這張圖，就是對照着產品信息結構圖建立的原型頁面結構。

經過這樣的方式所建立的原型頁面，在結構上，可以與產品框架結構保持一致，具備清晰的層級關係（圖中編號表示層級），而且方便咱們進行下一步的工做。

咱們開始使用Axure構建頁面佈局，而且添加每一個頁面的功能、元素。

咱們從第一步開始。

第一步，界定原型的尺寸。

原型的尺寸通常參考設備的邏輯分辨率（注意不是物理分辨率）。

通常來講有如下幾種主流邏輯分辨率。

Android：寬度360*高度640

iPhone6/7：寬度375*高度667

iPhone6/7 Plus：寬度414*高度736

那麼，咱們製做原型時就可使用這些分辨率，設定原型尺寸。

不過，若是想在手機上全屏顯示，建議你們使用Axure Share APP，在應用商店中就有下載。經過F6的發佈功能，上傳至官方服務器，同步到手機本地後瀏覽。

這裏須要注意，在發佈以前，要在【移動設備】設置中勾選【包含視口標籤】。

在肯定了分辨率以後，咱們先在頁面中，經過建立全局輔助線，幫助咱們確邊界。

在頁面中，點擊鼠標右鍵，在【柵格和輔助線】的選項中，咱們選擇建立輔助線。

而後，咱們按下圖進行設置，建立全局輔助線，這個輔助線可以在全部頁面中顯示。

設置完輔助線以後，接下來咱們進行第二步。

第二步，製做母版。

母版的內容，是多個頁面中共有的內容。

這裏咱們要作的是頂部的狀態欄。

在母版功能模塊，咱們添加母版，而且在母版名稱上點擊鼠標右鍵，選擇【添加到頁面中】。

而後，按下圖設置，將母版添加至除了【加載頁loading】和【引導頁guide】的全部頁面中。

母版設置完畢以後，就能夠繼續進行下一步。

第三步，建立頁面。

這裏我先把一級頁面根據以前作好的產品信息結構圖搭建出來。

通常來講，移動端的頁面佈局都是垂直佈局，方便用戶瀏覽。

不過，並非全部產品都這樣。

例如，移動營業廳的APP，業務分類界面中採用的是左右佈局，左側是分類，右側是相應的內容。

咱們應該根據需求，來界定佈局，這樣才能方便用戶使用。

• 加載頁（loading）

• 引導頁（guide）

注：引導頁是三張可切換圖片，能夠放在一個動態面板的三個狀態中，經過交互進行切換。

• 首頁（home）

注：這裏以首頁爲例建立頁面，把頁面功能、元素與思惟導圖一一對應，以後頁面也同樣建立。另外，文章列表內容較長，能夠放在動態面板中，並在屬性中設置【自動顯示垂直滾動條】，這樣在移動端瀏覽就能夠經過手指上下滑動內容。下面的頁面一樣處理。

• 精選頁（select）

• 話題頁（topic）

• 收藏頁（favorite）

到這裏，一級頁面咱們就建立完畢了。其餘的頁面，咱們也這樣逐一建立出來。

我把這個產品原型全部的頁面都進行了梳理，並繪製了線框圖。

在繪製過程當中，對頁面的結構作了一些優化調整和補充。

而且，對思惟導圖也作了一些細微的調整。

新的思惟導圖下載地址：http://downloads.iaxure.com/PM_APP_V1.2.xmind

注意：若是點擊不能下載，請將網址複製到瀏覽器中打開。

當完成了這些工做以後，我在頁面管理模塊中，新增了一個Flow文件夾和一個page_flow頁面（見上圖）。

接下來，我使用了Axure RP 8中的頁面快照元件。頁面快照元件可以呈現指定頁面的縮略圖。

我在page_flow頁面中，放入了一個頁面快照元件，而且雙擊指定了要顯示縮略圖的頁面。

這裏，我將頁面快照元件的寬高設置成了180*320。而且，爲了美觀，在屬性中取消了縮略圖四周的填充。

接下來，經過Ctrl+D，把這個元件進行復制，而且雙擊指向不一樣的頁面。

這樣，就把這個原型的全部頁面的縮略圖都放在了同一個頁面中。

而且，經過鏈接線，將這些頁面進行關聯，造成了一張完整的頁面流程圖。

這張圖，可以體現原型的總體結構、頁面關係以及用戶訪問路徑。

添加鏈接線，咱們須要在頂部功能菜單中，點擊【鏈接】圖標。

鏈接線樣式的設置，則是在頂部快捷功能菜單中或者【樣式】模塊中進行設置。

經過以上步驟，咱們就結合頁面快照元件以及鏈接線，完成了頁面流程圖的繪製。

咱們已經完成了產品結構和頁面流程、關係的處理。

這一篇，咱們繼續深刻，從業務流程的角度，來看一下Axure可以幫助咱們作什麼？

首先，在產品經理書寫產品需求文檔時，會包含用例說明部分。

那麼，什麼是用例（Use Case）呢？

用例實際上是對系統功能的描述，能夠理解爲使用場景。

在這裏，我使用Axure的流程圖元件，作了一個用例圖，包含了當前這個產品全部的用例內容。

爲了不有些同窗對英文比較暈，包含（incloud）和擴展（extend）的關係，我使用中文作了標註。另外，還有一種泛化的關係，使用的是白色的三角箭頭（如：搜索文章）。

這三種用例間的關係，我是這麼進行理解的。

包含：是指一個使用場景（基用例）的過程當中，必須包含另一個使用場景（子用例）；子用例能夠單獨存在，但若是缺乏子用例，基用例則不完整。以生活場景舉例，就像炒米飯的整個操做中要包含作熟米飯的操做，作熟米飯能夠單獨存在，炒米飯若是確少作熟米飯的操做則不完整（沒有米飯可炒）。

擴展：是指一個使用場景（基用例）以後的多種可選操做（擴展用例），擴展用例爲基用例添加新的行爲，但擴展用例不影響基用例的操做。仍是以生活場景舉例，好比咱們去健身，進入場館（基用例）的這個行爲以後，咱們不止一種的行爲能夠選擇，例如能夠跑步（擴展用例）、也能夠打羽毛球（擴展用例）。

泛化：是指子用例與父用例相似，但具備特別的行爲。一樣以生活場景舉例，好比咱們在工做時要找上級審批文件，對於審批這個行爲（父用例），各類審批流程（子用例）都比較相似，但也有其特別之處，例如：請假審批、加班審批以及離職審批等。

本人用例圖知識比較匱乏，以上內容若有問題，歡迎指正交流，我會進行更正。

接下來，咱們能夠基於用例圖，進行用例說明的撰寫。

在撰寫用例說明的過程當中，咱們也能夠經過Axure繪製業務流程圖進行輔助說明。

這裏的業務流程圖，我結合頁面快照元件完成。

以用戶註冊爲例：

用戶註冊的主要事件流程是：打開首頁--打開功能菜單--點擊登陸打開登陸面板--切換進入註冊面板--填寫註冊內容--提交註冊

咱們以前繪製的線框圖，沒有繪製功能菜單和註冊面板。

在這裏咱們先經過在動態面板「MenuPanel」中放置元件組成功能菜單，並將面板隱藏。

再將登陸面板的內容放入動態面板「Login_Register_Panel」中，而且添加一個新的狀態「Register」，在這個狀態中建立註冊面板內容。

完成以上兩步以後，接下來咱們在一個新的頁面「case01_register」中，繪製業務流程圖。

第一步，根據操做流程，放入一個頁面快照元件，調整成合適的尺寸，而後雙擊指向「home」頁，而且在頁面快照屬性中，取消四周的填充。

第二步，將這個頁面快照元件Ctrl+D進行復制，複製出來的頁面快照元件在屬性中添加動做，顯示動態面板「MenuPanel」。這樣，咱們就獲得了一個顯示了功能菜單的首頁縮略圖。

第三步，再次複製快照元件，添加第三個頁面「login_register」的縮略圖。

第四步，再複製頁面快照元件，添加第三個頁面「login_register」的縮略圖，並設置動做，切換面板狀態爲「Register」。這樣就獲得了第四個縮略圖。

第五步，咱們點中每一個頁面快照元件，在快捷功能區的更多功能中，找到鏈接點工具，爲每一個頁面快照在用戶操做的位置添加鏈接點，並經過鏈接線對頁面快照元件進行鏈接，表達整個操做流程。

第六步，在這裏咱們還能夠經過給頁面快照元件添加動做，製做出帶有不一樣的註冊錯誤提示的縮略圖，表達註冊過程當中的對用戶輸入內容進行驗證的場景。

我繼續給你們分享一些Axure的應用場景和使用方法。

1.標記與便籤

當咱們的線框圖沒有添加交互效果，又須要讓溝通對象可以理解圖中的每個功能，這個時候，咱們每每須要添加標註進行說明。下面就是一種添加標註，進行功能說明的方法。

咱們能夠經過頁面快照元件，獲取到頁面的縮略圖，而且在頁面快照上添加不一樣編號的標記。而後，對應着標記，在縮略圖的旁放入便籤，進行文字說明。並且，標記和便籤的顏色也能夠相對應，方便用戶查看。

另外，咱們還能夠經過旋轉標記元件，讓它表示頁面間的跳轉。例如：左側的紅色水滴形狀標記元件，旋轉了90度，元件中的文字「2」對應着右側編號爲「2」的縮略圖。這樣咱們就可以知道，當咱們點擊標記所指向的一個列表項時，可以打開另一個界面，繼續進行瀏覽。

二、連線與便籤

與上面的使用方法相似，咱們還能夠結合連線與便籤元件，實現功能的說明。

這種方式可以比較直接 的對功能進行標註說明，不過由於連線不宜過多，因此，比較適合單個界面的功能說明。

3.頁面區域快照

頁面快照元件，能夠經過屬性的設置，將頁面某一區域的內容呈現爲縮略圖，而且可以調整顯示的比例。實現對界面中某一功能模塊單獨放大展現，並進行說明。

上圖中，放大的區域也是一個頁面快照元件，不過，在屬性中，沒有勾選【適應比例】。而且，將原有尺寸進行了120%的放大處理。

這裏須要注意，顯示頁面區域快照，須要經過{偏移量}的調整，讓頁面快照元件從某一個位置開始加載頁面縮略圖的內容。例如上圖中，第一個文章列表項，x軸座標爲0，y軸座標爲133，在屬性的設置中，x軸無需偏移，可是y軸就須要向上移動133個像素的距離。因此，偏移量的設置中y軸的數值爲「-133」（負數爲向上）。

4.頁面快照與元件說明

Axure軟件自帶了元件說明的功能。咱們也能夠將一個界面或功能模塊的說明寫在頁面說明或者元件說明中。

這裏以元件說明爲例。

好比，咱們對更換手機號碼功能的使用場景進行說明，也就是用例說明。

首先，咱們須要在說明功能中【自定義字段】。

【自定義字段】的設置，在說明模塊的左上角（見下圖）。設置好自定義字段以後，咱們就能夠點中頁面快照元件，進行說明的添加。

經過這種方式添加的說明，在預覽的時候可以在界面中經過點擊說明的圖標，將說明內容顯示出來。

另外，經過這種方式添加的說明，咱們還可使用Axure自帶的【生成Word說明書】的功能，將其生成到Word文檔中。

若是，咱們在Axure中，對每個功能的使用情形都作了規範的說明（即用例說明），那麼這些內容就能夠經過【生成Word說明書】的功能生成文檔後，做爲產品需求文檔的組成部分。

以上，就是關於產品經理對Axure應用的最後一部份內容。在這些內容中，我主要演示了繪製產品線框圖的方法以及應用場景。在實際工做中，咱們還能夠在線框圖的基礎之上，對整個原型或者部分主要功能進行交互或者視覺效果的添加。這樣產出的高保真原型，可讓用戶或者溝通對象進行真實的視覺和操做體驗，驗證功能的可用性、易用性以及界面的友好性等。

最後，我把這一系列文章最終的線框圖和思惟導圖，也分享給你們。

下載地址：

線框圖：https://pan.baidu.com/s/1E8TfyGoGaJywF9sMRkAleQ

思惟導圖：https://pan.baidu.com/s/1bXdm5v1xu58Shu583dv-Hg

注意：若是不能直接點擊下載，請講以上網址複製到瀏覽器地址欄中進行下載。

但願個人分享可以給你們帶來切實的幫助。