如何用axure做動態交互效果
我們經??吹絼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協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!