Name: 儀表盤設計技巧 Tableau 中的資訊按鈕切換開關 (Dashboard Design Tips Information Buttons Toggle Switches in Tableau)
Uploaded: 2024-10-16T18:28:23.000Z
Duration: 19 min 55 s

程度副詞

Just make sure that you're in the right spot.

This is the spot for dashboard design tips.

這裡是儀表盤設計技巧的彙集地。

I'll be talking about dashboard design, info buttons, and toggle switches.

我將介紹儀表盤設計、資訊按鈕和撥動開關。

First things first, please make your purchase decisions of any Tableau products and service based on existing features and services.

首先，請根據現有功能和服務決定是否購買任何 Tableau 產品和服務。

This conversation may go well or not, it may be awesome or awful, it's too early to tell, so please make your purchase decision wisely.

這次對話可能順利，也可能不順利；可能很棒，也可能很糟糕，現在下結論還為時過早，所以請明智地做出購買決定。

With that said, I'd like to say thank you to all of you for attending the session.

在此，我想對各位出席會議表示感謝。

And let's talk a little bit about myself so that we can get to know each other a little bit better.

讓我們談談我自己吧，這樣我們就能更好地瞭解對方。

If we have any Mandarin speaking people here, it's Huang Kewen in Mandarin.

如果我們這裡有講國語的人，那就是講國語的黃克文。

And there's several things I'd like to know about myself before we start the session.

在會議開始之前，我想了解自己的一些情況。

First of all, I've been using Tableau for more than five years.

首先，我使用 Tableau 已經五年多了。

I'm currently the lead BI analyst at Discover Financial Services.

我目前是 Discover 金融服務公司的首席商業智能分析師。

That's just another word to say that when I'm not using Tableau at work, I use Tableau for fun to try to push the limit of the tool to see what it can do that's not commonly available at a moment.

這句話的另一個意思是，當我在工作中不使用 Tableau 時，我會把使用 Tableau 當做一種樂趣，嘗試突破工具的極限，看看它能做什麼，而這些都是目前不常見的。

That just means that I am very, very passionate in sharing my findings with all of you.

這隻能說明，我非常非常熱衷於與大家分享我的研究成果。

And I try to do that every year in a conference.

我每年都會在會議上嘗試這樣做。

So with that said, let's talk about what you may get out of the conference.

說了這麼多，讓我們來談談您可能從會議中得到的收穫。

I'll start with the demonstrations of a dashboard that filled with buttons.

我先來演示一個佈滿按鈕的儀表盤。

Then we'll talk about how you may find good icon libraries for your own dashboard development.

然後，我們將討論如何為自己的儀表盤開發找到好的圖標庫。

I'll talk about a specific kind of button called icon buttons, and then a specific category of icon buttons called toggle switches.

我將介紹一種特殊的按鈕，叫做圖標按鈕，以及一類特殊的圖標按鈕，叫做撥動開關。

We'll end the session with giving you all learning resources so that you could use them to create your own business dashboards as well.

在課程的最後，我們將為你提供所有的學習資源，這樣你也可以用它們來創建自己的業務儀表盤。

By the end of the session, you should be able to do the following.

課程結束時，您應該能夠做到以下幾點。

First of all, you should be able to find suitable icon libraries that are readily available to use for you for dashboard development.

首先，你應該能夠找到合適的圖標庫，這些圖標庫可以隨時用於儀表盤開發。

You should be able to create custom-shaped icons with good user interface, or UI for short.

您應該能夠創建具有良好用戶界面（簡稱 UI）的自定義形狀圖標。

These icons, some of them should have good parameter interactivity.

這些圖標中，有些應該具有良好的參數交互性。

Last but not least, you should be able to lease at least three applications of icon buttons in dashboard design.

最後但並非最不重要的一點是，在儀表盤設計中，你應該至少能租用三種圖標按鈕。

So with that said, please raise your hand if you have explained the same thing about a dashboard or a metric over and over again in the last couple of days.

是以，如果你在過去幾天裡反覆解釋過儀表盤或度量標準的相同內容，請舉手示意。

People just keep asking the same questions about a chart, a metric, a equation.

人們只是不斷地就圖表、度量標準、方程式提出同樣的問題。

Now raise your hand if you have had too many filters or parameters in a dashboard.

如果你在儀表板中使用過太多過濾器或參數，請舉手示意。

People just keep asking for more, but you only have limited real estate in the dashboard, a lot of you.

人們一直在要求更多，但儀表盤上的空間有限，很多人都是如此。

How many of you have tried to find good icons on internet, but you always ended up with something that you're not sure whether they're proper or professional, right?

有多少人曾試圖在互聯網上找到好的圖標，但最後總是找不到合適或專業的圖標，對嗎？

So today I'll try to help you solve all of these problems.

所以，今天我就來幫你解決所有這些問題。

Before I demo the dashboard, there are two notes I'd like to give to you and myself.

在演示儀表板之前，我想給大家和我自己做兩點說明。

First of all, a well-designed dashboard button should help the target users.

首先，精心設計的儀表盤按鈕應能幫助目標用戶。

They should be easily used by them, but not bedazzled them.

要方便他們使用，但不能讓他們眼花繚亂。

They shouldn't spend too much time looking at them.

他們不應該花太多時間去看它們。

And the second thing is, later, I'd like you to pay attention to the buttons.

第二件事是，稍後我希望你們注意按鈕。

These are the buttons that changes the charts.

Now let's look at what can actually be done with icon buttons.

現在，讓我們來看看圖標按鈕到底能做些什麼。

I have published this dashboard on my Tableau public account, and it's currently publicly accessible to all of you.

我已經在我的 Tableau 公共賬戶上發佈了這個儀表盤，目前大家都可以公開訪問它。

These are the three icon buttons that I will be demonstrating today.

這就是我今天要演示的三個圖標按鈕。

So what does it do is when you hover your cursor on it, it will spill out an information about a dashboard or a chart.

當你把遊標停留在上面時，它就會顯示出儀表盤或圖表的相關資訊。

An example of use would be in the chart on the right side here, it has a fancy metric called punctual delivery rate.

右邊的圖表就是一個很好的例子，它有一個花哨的指標，叫做準時交貨率。

If you hover your cursor over it, you will read the definition of that metric.

如果將遊標懸停在該指標上，就會看到該指標的定義。

So this could be useful for all of those indexes, all of those rates in your company.

是以，這對貴公司的所有指數和費率都很有用。

The second kind of icon buttons that I'd like to introduce to you is called A-B switch.

我要向大家介紹的第二種圖標按鈕叫做 A-B 開關。

It lets you switch between setting A and setting B in the same chart when you click it.

點擊後，您可以在同一圖表中切換設置 A 和設置 B。

So here it tells you when you click it, it will switch from B to A. And when you click it again, it will switch back.

是以，這裡會告訴你，當你點擊它時，它會從 B 切換到 A。

An example of this application would be you can switch the X metrics between two different metrics.

例如，您可以在兩個不同的指標之間切換 X 指標。

Currently, the X metrics for this chart is sales per order by category.

目前，該圖表的 X 指標是按類別劃分的每個訂單的銷售額。

When you click the icon, it will switch to profit per order by category.

點擊圖標後，將切換到按類別計算的每筆訂單利潤。

The third kind of button that I'd like to introduce to you is a special kind of A-B switches.

我要向大家介紹的第三種按鈕是一種特殊的 A-B 開關。

Basically you turn on or turn off a setting of a chart or a dashboard by clicking it like this on and off.

基本上，你可以像這樣通過點擊來打開或關閉圖表或儀表盤的設置。

It's pretty much like the light switch at your home.

The example that I'm showing you here is sometimes when we compare the existing value with our plan value, like a target, like a forecast, we want to temporarily hide or show that forecast or that compared value.

我在這裡向大家展示的例子是，有時當我們將現有值與計劃值（如目標值或預測值）進行比較時，我們希望暫時隱藏或顯示預測值或比較值。

So with the on off switch, you can accomplish so.

是以，有了開關，您就可以做到這一點。

I know that all of this is very overwhelming with a lot of buttons on the screen, but now let's take a step back.

我知道螢幕上有很多按鈕，讓人眼花繚亂，但現在讓我們後退一步。

Let's talk about how do we actually get this icon buttons.

讓我們來談談如何真正獲得這個圖標按鈕。

On the screen here, we have two set of icons.

I'd like you to spend about five seconds to think which one set, which set is better for a professional business dashboard.

我希望你們花 5 秒鐘的時間思考一下，哪一套更適合專業商務儀表盤。

We're in a good, we're in a good, we're in a good place.

我們的處境很好，我們的處境很好，我們的處境很好。

Oh, by the way, I'm not a graphic designer.

I did not create any of this icons, but I do agree with you that icons on the top are better than the ones on the bottoms.

這些圖標都不是我設計的，但我同意你的看法，上面的圖標比下面的好。

那麼，究竟是什麼讓它們變得更好呢？

According to Google material design, the icons that could be, should be used in a software or in our case, a dashboard, this should be simple in design, they should be easily recognizable.

根據谷歌材料設計的要求，軟件或儀表盤中使用的圖標應設計簡潔，易於識別。

That means that when you step at a very far and you can still figure out a small one, what do they mean without the text next to it.

這就意味著，當你走到很遠的地方，你仍然可以弄清楚一個小的地方，如果沒有旁邊的文字，它們是什麼意思。

And amongst the icons, they should have style consistency, meaning that the color should be similar.

圖標之間應保持風格一致，即顏色應相似。

If they have any line in it, their line weight should be similar, their thickness should be similar.

如果其中有任何線，其線的重量和粗細都應相似。

They should look like they belong in the same family.

它們看起來應該屬於同一個家族。

So in the past couple of months, I have gathered about 26 icons that I deem they could be commonly used in dashboard designs.

是以，在過去的幾個月裡，我收集了大約 26 個我認為可以在儀表盤設計中常用的圖標。

And then by the end of the session, you will get all 26 of them.

在課程結束時，你將獲得全部 26 項內容。

現在，讓我們回到這些按鈕上來。

But actually, they're all coming from the same starting point.

但實際上，他們的出發點都是一樣的。

All three buttons are actually one worksheet, like each of them is their own worksheet, with one custom shape mark overlap with a transparent shape.

所有三個按鈕實際上是一個工作表，就像每個按鈕都是自己的工作表，其中一個自定義形狀標記與一個透明形狀重疊。

For those who are not familiar with the term, a transparent shape is just a circle PNG file with zero opacity, or 100% transparency.

對於不熟悉這個術語的人來說，透明形狀只是一個不透明度為零或透明度為 100% 的圓形 PNG 文件。

You can export it and then import it to Tableau.

您可以將其導出，然後導入到 Tableau 中。

Basically all of them starting with this starting point, they're just two marks overlap with each other with a transparent circle being larger than the actual icon.

基本上所有的圖標都是從這個起點開始的，它們只是兩個標記重疊在一起，透明的圓圈比實際圖標要大。

And of course, we have some text in the tooltip.

當然，我們還在工具提示中添加了一些文字。

字幕列表影片播放

儀表盤設計技巧 Tableau 中的資訊按鈕切換開關 (Dashboard Design Tips Information Buttons Toggle Switches in Tableau)

specific

awesome

basically

scale