Axure教程—?jiǎng)討B(tài)多散點(diǎn)圖(中繼器)

0 評(píng)論 3295 瀏覽 6 收藏 5 分鐘
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

動(dòng)態(tài)多散點(diǎn)圖是一種廣泛應(yīng)用于數(shù)據(jù)分析的工具,可以有效地呈現(xiàn)數(shù)據(jù)。如果你想了解如何使用AXURE中的中繼器來(lái)創(chuàng)建這種圖形,建議你可以仔細(xì)閱讀本文。

本文將教大家如何用AXURE制作動(dòng)態(tài)多散點(diǎn)圖。

一、效果介紹

如圖:

預(yù)覽及下載地址:https://w8j93u.axshare.com

二、功能介紹

  • 簡(jiǎn)單填寫中繼器內(nèi)容即可生成動(dòng)態(tài)多散點(diǎn)圖
  • 樣式顏色等可以自由變換
  • 鼠標(biāo)移入時(shí)散點(diǎn)變大并顯示相應(yīng)的數(shù)據(jù)

三、制作方法

1)中繼器

中繼器里有四列,d、y1、y2和y3,d為橫坐標(biāo),y1、y2、和y3為具體數(shù)值如下圖所示:

2)中繼器內(nèi)材料組合

拖入三個(gè)矩形,其形狀分別設(shè)置為圓,大小設(shè)置為10*10,分別命名為藍(lán)、黃、綠,顏色為#0000FF、#FEA213、,#54CD72,三個(gè)散點(diǎn)制作完畢,在每個(gè)散點(diǎn)上拖入一個(gè)熱區(qū),其大小為24*24,散點(diǎn)和熱區(qū)組合一起,三個(gè)散點(diǎn)疊放一起,如圖:

拖入一個(gè)矩形,其大小為8030,顯示橫坐標(biāo)數(shù)據(jù)。

如下圖所示放置即可:

3)中繼器外文本

在中繼器外建一個(gè)矩形,大小設(shè)置為100*50,顏色設(shè)置為#333333,透明度為60,設(shè)置隱藏狀態(tài),只用于顯示其具體數(shù)值,如圖:

4)制作圖表

制作豎坐標(biāo)刻度以及圖例,如圖:

最終制作結(jié)果,如圖:

四、交互設(shè)置

1)中繼器

中繼器每項(xiàng)加載時(shí):

2)散點(diǎn)設(shè)置

藍(lán)散點(diǎn):

鼠標(biāo)移入時(shí)和鼠標(biāo)移出時(shí):

黃散點(diǎn):

鼠標(biāo)移入時(shí)和鼠標(biāo)移出時(shí):

綠散點(diǎn):

鼠標(biāo)移入時(shí)和鼠標(biāo)移出時(shí):

3)中繼器外文本

鼠標(biāo)移出時(shí):

這樣我們就完成原型制作了。

本文由@產(chǎn)品纖纖 原創(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. 目前還沒評(píng)論,等你發(fā)揮!
专题
14087人已学习14篇文章
在很多产品中,搜索都是其中比较基础且很重要的一个功能。搜索的设计、逻辑、交互等问题也是需要特别注意,本专题的文章分享了电商搜索功能的设计指南。
专题
12562人已学习13篇文章
在用户运营中,拉新往往要比做好用户留存所花费的成本要高,但有各种各样的原因会让用户在某个过程中流失掉,应当如何规避与注意呢?本专题的文章分享了如何做好用户流失预警。
专题
14240人已学习14篇文章
流量难获取,获取之后转化为付费用户更是困难。本专题的文章分享了如何提升付费转化率。
专题
80121人已学习19篇文章
当AI已然成为新的焦点和风口,产品经理该如何抓住这个风口顺势飞起?
专题
12753人已学习15篇文章
知识付费是内容赛道上的一块高地,有着上百亿的市场规模。本专题的文章分享了关于对知识付费的观点。
专题
49262人已学习14篇文章
产品经理往往会承担一定的项目管理职能,那么该如何做好项目管理呢?