如何用axure做動態交互效果

0 評論 1683 瀏覽 7 收藏 8 分鐘

我們經??吹絼e人分享一些很炫酷的交互原型,其實這些原型都是由一些很小的交互點來組成。這篇文章,作者分享了一些簡單的交互操作,通過這些交互組合,你也可以做出很炫酷的交互原型。

產品經理的工作日常離不開畫原型,原型圖分為低保真、高保真,高保真圖無疑是效果最好的,而且現在企業的要求多數比較高,需要制作高保真原型圖,以動態的效果做展示匯報。

那么如何制作高保真原型呢?

本文將以AXURE工具為例,講述一些交互效果的操作指導,希望能幫助到一些產品小白們。

一、密碼登錄

將用戶名、密碼、登錄按鈕以及透明提示框合并成組,在case1中設定條件,當用戶名和密碼文本框==值為,注意符合條件應該選擇任何以下條件。然后添加動作—設置文本與“提示”矩形框—設置為富文本(富文本框控件,它能夠處理有格式的文本,還可以顯示字體、顏色、鏈接、嵌入的圖像等。)點擊圖上右下角的編輯文本設置提示文字為:用戶名或密碼不能為空。然后設置顯示“提示”矩形框。

設置case2,設頂為變量值!=局部變量的值還是選擇添加動作—設置文本—選擇“提示”矩形框設置為富文本然后編輯文本為:”用戶名或密碼錯誤“之后選擇顯示“提示”文本框即可實現。

設置case3,重復上述操作。

二、驗證碼倒計時

添加全局變量onloadvariable

設置鼠標點擊時,當onloadvariable的值不等于0時設置:

步驟一:禁用“按鈕”

步驟二:設置當前原件文本的值為“[[onloadvariable-1]]”秒后重新獲取

步驟三:設置全局變量的值為“[[onloadvariable-1]]”

步驟四:添加等待2000毫秒

步驟五:添加“按鈕”鼠標單機事件。

三、上下拖動

上下拖動頁面需要添加動態面板,然后設置拖動為垂直拖動,并添加邊界值設置界限

先要在最外面設置一個動態面板,作為拖動的外邊框,再將需要拖動的內容組合命名也設置為動態面板。

一共設置兩個動態面板,并命好名,方便后序的辨認。

選中外面一層開始設置交互: 添加了兩個界限后,一個設置為頂部<=0,另一個需要打開函數設置界面設置函數。

四、輪播圖

如下圖所示,設置動態面板向左右拖動時候的效果。

我們所有的頁面都是基于主動態面板完成的,實現動態面板之間的切換,所以所有的頁面幾乎都是在主的動態面板之下,要實現拖動以及輪播等效果就需要再次建立動態面板,所以需要動態面板套動態面板,需要功能越多,套的層數就越多,故動態面板需要命名規范,以及動態面板下的每一個面板都要命名規范,方便后期不會亂掉,同時思路得清晰,不能混亂,要理清楚哪一層是哪一層的動態面板。

繪圖時也要盡量將每一個元件命名規范,一個頁面盡量都組合在一起方便進行交互設計,不然很容易選錯元從而達不到我們想要的操作。

比如密碼登錄就需要設置三種狀態,賬號密碼為空、賬號或密碼輸入錯誤以及登陸成功,每種狀態下的值都要設置正確。

驗證碼倒計時使用了全局變量。全局變量,顧名思義是全局的,簡單理解就是整個Axure文件中的不同頁面,都可以訪問使用。

因為我們知道在Axure建立多個頁面后,在頁面a,是無法直接改變頁面b中元件的文本、選中狀態、顯示隱藏、移動等狀態的。這個全局變量可以雙擊修改名稱進行使用。

在沒有添加新的全局變量之前,這個全局變量不能夠被刪除,因為在Axure中,系統要求一個項目文件中,至少有一個全局變量。

我們也可以點擊加號“+”圖標添加新的全局變量進行使用,并且可以在變量名稱右側,給變量添加默認值。

全局變量是Axure一個重要組成部分,其作用在交互效果是頁面值傳遞的時候比較常見。

全局變量顧名思義是值在整個axure項目中生效,即A頁面定義的全局變量在B、C中同樣適用;說到全局變量就不得不說局部變量,局部變量僅對當前頁面定義的變量范圍生效。

用編程的思想來理解,即作用域不一樣,全局變量作用域>局部變量作用域。

本文由 @晚遲 原創發布于人人都是產品經理。未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!