新手使用Axure,你該知道這些內容

最近人機交互課要求用Axure製作一個軟件原型,然後就接觸到這個軟件。最開始沒有什麼概念,在網上看了幾個案例之後就覺得這個軟件太厲害了。軟件開發前期忽悠甲方必備?哈哈哈哈哈哈哈。今天就大概講一下使用這個軟件的一些心得

Axure簡單來說就是將各種框框條條、圖片組合起來,設計出一個軟件的大致外觀框架,我理解的是開發一個軟件之前畫的草稿,設計出這樣一個原型之後就能確定大概的方向,能夠儘可能地減少開發過程中出現修修改改的情況吧
這個軟件總體來說入門很簡單,只要有想象力、懂得常用的元件怎麼用基本就可以

我認爲常用的元件:

  • 矩形:我認爲矩形一般可以用來當作一個底板,可以設置填充顏色作爲背景,然後可以在矩形內部添加其他的元件,這樣做也能夠很清晰地進行區域劃分;也可以改變矩形的樣子或者用幾個矩形進行結合、相交等操作創作出喜歡的圖形
  • 圖片:一個原型如果只是由幾個矩形組合在一起來表達內容會顯得很蒼白無力,所以可以通過添加圖片、圖標來美化原型。這裏推薦一個圖標網站 https://www.iconfont.cn/ 這是阿里的網站,裏面有很多免費的圖標,而且可以自定義圖標的顏色
  • 按鈕:設計出一個軟件不能是死的,必須要能夠交互,那麼就肯定會用到按鈕,確認、取消、保存等很多場景都會用到按鈕,但有一說一,按鈕和矩形也差不多
  • 文本標籤:軟件需要有圖、有文字、有交互,所以文字也很關鍵。文本標籤可以用來寫一些提示之類的簡短的文字,方便用戶理解
  • 文本框:和文本標籤不同的是,文本框既可以顯示內容,也可以進行編輯,可以用來在類似登錄輸入賬號密碼的地方使用
  • 水平(垂直)線:線段最好的用途就是用來劃分區域,讓結構更清晰
  • 動態面板:可以理解成是一個頁面中的頁面,也可以理解爲一個頁面中可能出現的不同狀態,動態地選擇其中的一個狀態顯示。選擇動態面板一般是因爲幾個狀態比較相似,沒有必要創建過多的新頁面;還有一種可能就是模擬手機上下滑動屏幕。它的優點是切換狀態比切換頁面流暢。

我認爲常用的交互操作:

  • 打開鏈接:如果需要切換頁面,那麼就要用到打開鏈接,給切換頁面的按鈕加上鼠標單擊時打開鏈接就可以了
  • 顯示/隱藏:可以用來製作彈框的出現和消失,或者進行某些操作之後顯示內容都可以用顯示/隱藏來解決
  • 設置面板狀態:動態面板的交互就用這個來處理,最常見的就是用來切換面板的不同狀態
  • 設置文本:可以用來切換矩形、文本標籤等顯示的文字,例如點擊某個按鈕之後修改顯示的文字
  • 移動:可以用來實現一些簡單的動畫,還可以模擬出手機屏幕上下滑動。

可能還有其他很方便的元件、交互操作我沒講到,那只是因爲我在設計原型的時候沒怎麼用到,理解不太到位。

母版的操作:
母版就像是一個模具,提前做好一個樣式之後,需要用到的頁面直接拿來用就可以了,從而減少了一些重複的操作。製作母版只需要將模具做出來之後選中所有元件然後右鍵選擇轉換爲母版即可,以後就把它當作一個元件來使用就可以了。
在這裏插入圖片描述
模擬手機屏幕滑動:
在頁面中先創建一個動態面板,可以看作是一個屏幕
在這裏插入圖片描述
進入State1這個狀態中,再創建一個長度大於屏幕的動態面板作爲滑動的內容
在這裏插入圖片描述
在內容的狀態里加入你想要添加的內容後效果是這樣
在這裏插入圖片描述
最後給作爲屏幕的動態面板添加交互操作:拖動時->移動,移動的是作爲內容的動態面板,同時需要設置邊界,邊界上界爲頂部<=0,下界要根據內容的長度確定,使用一個函數[[LVAR1.Height-LVAR2.Height]],其中LVAR1,LVAR2爲變量,分別代表屏幕和內容,兩個長度相減就得到應該往下滑多少距離
在這裏插入圖片描述
在這裏插入圖片描述
總結:
多學一樣是一樣哈哈哈哈哈

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