【產品經理】超級易學易上手的AXURE入門使用指南

Axure下載與工程創建

對於Axure的下載,可以選擇直接下載破解版,也可以選擇去官網下載正品版本。Axure是收費軟件,下載用戶可以獲得免費試用天數30天,如果超過了試用期也不想付費的話,其實可以到網上隨便搜索一個激活碼按照步驟激活即可(大家還是支持正版,手動狗頭)

在這裏插入圖片描述

運行成功後,點擊新建文件,就可以創建一個新工程了,工程文件在保存時會保存爲axure類型的文件,在二次打開文件時可以直接導入。下圖即爲一個新工程創建之初的樣子。

在這裏插入圖片描述

工程佈局介紹

在這裏插入圖片描述

  1. 菜單:最上方菜單項就是一些工程文件的總體設置,和word、ppt這種工具的頂部菜單欄功能一樣,根據需要自行查找即可,需要介紹的不多

在這裏插入圖片描述

  1. 頁面:左上“頁面”框圖表示的是當前的原型中包含的所有頁面,每一個page都是一個完整的頁面或者區域,我們可以看到新項目中,默認存在一個index和其下的3個小page,其實就是四個頁面,只不過分成了兩個層級結構。這種分層結構有利於我們對原型製品作出更清晰整體的規劃

在這裏插入圖片描述

  1. 工作區:頁面中最中間佔比最大的白色區域就是工作區,我們所有的設計都是在工作區內完成的。工作區以頁面爲一個基本單位進行展示,如圖我們當前所處的就是index頁面

在這裏插入圖片描述

  1. 元件庫:頁面下方的組件庫就是我們原型設計時使用的組件了,分爲default、flow和icon,default中的組件最爲常用,分爲基本元件,表單元件,菜單表格和標記元件,我們可以使用拖拽的方式直接將某種組件添加到工作區,也可以使用鼠標拖拽的方式控制組件在頁面中的位置和其自身的大小,從而完成頁面設計

在這裏插入圖片描述

  1. 母版:母版可以理解爲自定義組件,也就是已有組件的組合,我們可以通過將組件組合設置爲母版的形式快速進行構圖與設計,如頁面腳註的固定設計等。

在這裏插入圖片描述

  1. 檢視頁面:檢視頁面用於對頁面樣式、組件樣式進行詳細的設定。

    • 當我們點擊背景空白區域時,控制的是當前頁面的整體設置,可以修改頁面載入動畫、設置頁面大小佔位線、添加頁面說明、設置頁面背景效果等

在這裏插入圖片描述

  • 當我們點擊某個元件時,檢視控制的是當前元件的樣式,可以設置元件的交互事件、修改尺寸,修改名稱,修改陰影圓角填充不透明度等樣式信息

在這裏插入圖片描述

  1. 摘要:摘要部分是對當前工作區內的元素進行的彙總,在這裏,我們可以修改組件元素的順序、組合組件等,但是最主要的功能還是作爲目錄查看元素列表,比如現在就是說明index頁面下有一個名爲胖子的橢圓形

在這裏插入圖片描述

使用小技巧

使用元件庫內的組件進行交互設計其實非常簡單,在這裏我們介紹集中比較常用而且重要的元件的使用方法以及一些使用技巧

形狀

在這裏插入圖片描述

這些簡單形狀組件的使用方法都非常簡單粗糙,主要是使用檢視頁面下的樣式選項卡進行樣式的調節。最常用的調節點有:

  • 長寬、位置(x y)
  • 背景色(純色、漸變色)
  • 陰影(x y偏移)
  • 圓角半徑(大小,角的選擇)
  • 邊框(樣式,粗細)
  • 字體(字體,大小,顏色)
  • 對齊等等

可以說,熟練使用檢視調節元素樣式可以讓我們如魚得水地應用元件庫裏的大部分組件,設計一些簡單的產品佈局都是沒有問題的

動態面板

在這裏插入圖片描述

其實掌握檢視頁面後,我們對於組件的控制其實已經入門了,但是爲什麼我要把動態面板這個組件單獨拿出來呢,是因爲這個逐漸真的很重要。動態面板的作用是可以包含很多個頁面,這些頁面都位於同一個位置,並且同時刻只能有一個顯示出來,需要通過交互的邏輯決定誰是這個顯示出來的部分。其實看它的圖標也能看出來,動態面板就是在同一個位置上堆疊很多頁面。

在我們做“根據導航欄選中狀態確定界面展示”這個需求時,動態面板就幫了很大的忙,所以實在是很重要

在這裏插入圖片描述

我們先在上圖的位置新建一個動態面板,在右側我們可以看到動態面板組件有一個名爲state1的子部分,其實這就是這個面板其中的一個頁面,雙擊這個state1,我們可以發現,當前的工作區更新爲動態面板state1這個頁面了,藍色框圖的部分就是我們剛剛創建的面板的大小,也就是說,我們要把所有想要放進state1頁面的組件都放進這個藍色框裏。

在這裏插入圖片描述

此時,我們向state1中放入一個矩形框,再回到index頁面,我們會發現,動態面板的位置就出現了我們剛剛添加的矩形

在這裏插入圖片描述
在這裏插入圖片描述

那麼我們怎麼給這個動態面板增加新的頁面並進行管理呢

我們雙擊這個面板,此時會彈出面板的編輯框,點擊加號就可以爲面板增加新的頁面了

在這裏插入圖片描述

此時我們要注意,動態面板中,哪個頁面排列順序最高,哪個頁面就是這個動態面板默認顯示的頁面,通過設置中這個上和下的箭頭,我們可以進行頁面順序的修改。此時我們就將state2的順序修改爲state1上方。

在這裏插入圖片描述

爲了驗證默認頁面的變化,我們在state2中添加個圓形,再次回到index頁面,我們發現,動態面板顯示的修改爲state2中的圓形了,也就是默認頁面修改成功

在這裏插入圖片描述

在這裏插入圖片描述

那麼如何控制兩個頁面的顯示呢?這就需要學習下面的交互設計部分了

交互設計

交互設計是指用戶在使用產品時所有的操作及其產生的反饋,如點擊修改顏色、選中浮動提示等等,都是交互設計的範疇。交互行爲是用戶最直接評價產品的通道,所以好的交互設計能夠使產品最快獲得用戶的好感。我們製作原型的關鍵也是完成產品交互邏輯的設計。

爲了實現頁面的操作性讓它不僅僅是一個靜態的組件佈局,我們需要用到的是檢視頁面的屬性選項卡。

選中剛剛的圓形胖子,我們在屬性中可以看到交互這個選項,這部分就是我們需要進行的交互設計的入口。

在這裏插入圖片描述

添加一個用例就是指爲我們選中的元素增加一個交互邏輯。前面說到,交互設計就是用戶的操作以及反饋,上圖中的“鼠標移入時”“鼠標單擊時”“鼠標移出時”就是用戶操作,在axure中稱爲事件(也可以看到下面可以選擇更多事件),以鼠標移入時爲例,雙擊這個事件,我們會發現彈出一個用例編輯的面板,這時候需要選擇的就是用戶操作後的反饋了。

在這裏插入圖片描述

第一列添加動作中對反饋類型做出了分類,比如我們可以設置移入時打開某些鏈接,也可以設置移入時修改元件狀態,元件狀態包括顯示隱藏、面板狀態、文本、圖片、啓用禁用等等。

中間的組織動作則是一種交互邏輯的前提條件的聲明,每一種動作的設置都要放在一個case下,表示在這個事件發生時,如果處於這個case,那麼就執行對應的動作。

最後一列配置動作則是配置動作的具體參數。

以“鼠標移入胖子就修改動態面板狀態爲state1”爲例,在當前的編輯框中,我們首先需要選擇的是添加的動作,此時應該選擇“設置面板狀態”選項,雙擊後,系統默認在case1下添加了設置面板狀態這個動作,下一步,我們就要進行動作的配置了

在這裏插入圖片描述

首先選擇要控制的面板(勾選這個面板),然後把狀態設置爲state1,可添加一些進入動畫的類型時間等設置,此時我們發現,case1下的動作後將我們剛剛設置的具體參數都添加了進去,點擊確定完成設置。

在這裏插入圖片描述

回到index頁面,我們發現圓形圖標上多了一個1,這表示爲它設置了剛剛的交互,我們此時點擊右上方的預覽按鈕

在這裏插入圖片描述

預覽按鈕就是將當前的設計放到瀏覽器中展示出來查看效果,我們將鼠標移入橢圓形,可以發現,面板狀態從一開始state2的圓形,以逐漸的動畫形式轉變爲state1中的矩形

在這裏插入圖片描述
在這裏插入圖片描述

這就是使用axure完成交互邏輯設計的一次完整過程啦

總結

本文對Axure的安裝方法、工程佈局、使用方法進行了簡單的介紹,在使用方法中,分別對樣式設計、元件特性、交互邏輯添加進行了舉例和詳解,掌握了這三種基本的知識點,相信大家一定可以輕鬆入門Axure原型設計!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章