Axure制作簡單動(dòng)態(tài)邊框

0 評(píng)論 619 瀏覽 1 收藏 4 分鐘

不少人認(rèn)為,在用Axure模擬一些交互時(shí)的操作都會(huì)很復(fù)雜。其實(shí)很簡單,就像文章中提到的這種動(dòng)態(tài)邊框,跟著操作流程很容易就做出來了。

“動(dòng)態(tài)邊框”是一種設(shè)計(jì)元素,通常用于網(wǎng)頁設(shè)計(jì)或應(yīng)用程序界面中。它指的是一個(gè)具有動(dòng)態(tài)效果的邊框,可以隨著用戶的交互或鼠標(biāo)懸停而改變樣式、顏色或形狀。

動(dòng)態(tài)邊框可以增加用戶體驗(yàn)的趣味性和吸引力,使界面看起來更加生動(dòng)和互動(dòng)。

這種設(shè)計(jì)技術(shù)常用于突出重要內(nèi)容、引導(dǎo)用戶注意力或提供視覺反饋。

一、原理

原理其實(shí)非常簡單,就是外面套一個(gè)動(dòng)態(tài)面板,此動(dòng)態(tài)面板的長寬比內(nèi)部的大一點(diǎn)點(diǎn),然后在最底層放一個(gè)不斷旋轉(zhuǎn)的帶顏色的元件即可。

二、教程

假如我們要做一個(gè)寬140px,高40px,邊框?yàn)?px并且?guī)?dòng)態(tài)邊框效果的按鈕。

我們先拖出動(dòng)態(tài)面板,寬度設(shè)為140px,高度設(shè)為40px,取消“Fit Content(適應(yīng)內(nèi)容)”。

在動(dòng)態(tài)面板里再放一個(gè)按鈕,寬度設(shè)為138px,高度設(shè)為38px,x設(shè)為1,y設(shè)為1。目的是留出4條邊。

在此元件的下放再放一個(gè)帶有邊框顏色的元件,寬度比按鈕大設(shè)為300px,高度比按鈕小設(shè)為30px,與按鈕水平對(duì)齊居中對(duì)齊(可自行調(diào)整,效果千變?nèi)f化)。

在邊框元件的交互里加一條“載入時(shí)”交互:

這里時(shí)間要足夠長,具體角度可自己多預(yù)覽幾次慢慢調(diào)整。

就這么簡單。

三、最后

如果你想要豐富多彩的邊框,那做為邊框的多個(gè)元件可以組合一起,只要旋轉(zhuǎn)那個(gè)組合即可。

如果你的按鈕有圓角,記得外面動(dòng)態(tài)面板的圓角比按鈕的圓角多加上個(gè)邊框的寬度。

本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!