Axure中的(隨機(jī)/自定義)背景色

Jorkin
0 評(píng)論 546 瀏覽 2 收藏 3 分鐘
零基础想转行产品经理?别担心!我们的实战营专为转行者设计,提供体系化课程和项目实战,帮你弥补经验短板,成功实现职业转型,拿到心仪offer。

在Axure的操作中,隨機(jī)事件算是比較常用和實(shí)用的功能之一。這篇文章,我們來(lái)講解一下在Axure中進(jìn)行隨機(jī)背景色的操作,希望能幫大家掌握這個(gè)技能。

在Axure中,我們有時(shí)會(huì)用到隨機(jī)的背景色,特別是常見(jiàn)的Avatar頭像,目前大部分的解決方式是動(dòng)態(tài)面板內(nèi)置多種顏色,但如果想純隨機(jī)就比較困難了,那有沒(méi)有一種方法可以想用什么顏色就用什么顏色呢?

一、萬(wàn)能的圖片

Axure中的圖片元件是可以動(dòng)態(tài)設(shè)置值的,普通的圖片都需要進(jìn)行base64的轉(zhuǎn)換,但有一種圖片基于 XML 標(biāo)記語(yǔ)言,用于描述二維的矢量圖形,這就是可縮放矢量圖形(Scalable Vector Graphics,SVG)。

二、教程

我們拖出一個(gè)“圖片”元件,添加“加載時(shí)”交互設(shè)置圖片

代碼如下:

data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' height='100%' fill='red' /></svg>

預(yù)覽一下你會(huì)發(fā)現(xiàn)這個(gè)默認(rèn)圖片已經(jīng)變成了紅色。

所以只要變更代碼內(nèi)的fill的顏色,就可以生成任何想要的顏色背景。

三、注意事項(xiàng)

如果是用Hex顏色代碼(比如:#820222)的話,需要把井號(hào)#換成%23。

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

題圖來(lái)自 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. 目前還沒(méi)評(píng)論,等你發(fā)揮!