生活黑客|一人公司|數位遊牧

探討數位生活現狀、活用數位生活工具、提供數位生活方案。
讓每個人從工具中獲得力量,享受科技樂趣,找到生活的掌握感。

Notion 教學|最完整的進度條製作、快速產出個性設計、懶人工具,進階公式與動態月亮

Notion 視覺化進度條公式教學

如果你是用 Notion 作為專案管理,習慣養成,或者學習知識庫……等任何有關目標設定和進度記錄的應用,你會需要「視覺化進度條」這項技巧,幫助你把進度可視化,也讓你在執行過程更有成就、回饋感。

當我們掌握 Notion Formula(公式) 後,我們就可以做到這種的應用:

CleanShot 2021 07 14 at 00.47.16
30 分鐘影片完整逐步教學:Notion 實戰課程

我在學習 Notion 進度條的時候,覺得網路上許多教學內容都搞的好複雜……例如加減乘除也用函數、簡單的需求卻用了好多層 if 條件式……等等。所以我寫了這篇「不懂公式代碼」也能做出客製化進度條的圖文說明。​

今天用這篇文和你分享,怎麼用 Notion 做出個人化的進度條。

我會和你分享兩種方法,一種非常簡單,一種能高度客製化,最後還提供一個小挑戰。


懶人方法:進度條產生器

🙋🏻‍♀️:「老師我很不會使用這些公式,有沒有更簡單的方法?」
🤫:「我就知道你會這樣說,還真的有。」

CleanShot 2021 07 14 at 00.49.17
Notion Progress Maker(進度條生產器)介面中文翻譯

只要透過這個網站的進度條產生器,就能直接無腦做出屬於你的視覺化進度條。

接下來我簡單教你如何使用這個工具:

1. 填入「現在進度」和「目標值」

在這個進度條產生器裡,有兩個最重要的變數我們要設定,是「現在進度」和「目標值」這兩格,我覺得他這邊兩個都寫 Target 有點混亂,建議你在左下角那格直接填入「目標值」,右上角填入「現在進度」,這樣待會就能直接無腦產出你想要的進度條了。

這個工具有兩種樣式可以選擇,Bar 是條型圖,Slider 是有一個東西在上面滑,兩個的圖示都可以在「圖示更改」那邊調整。這個產生器還很貼心把一些常用的圖示素材放在底下,讓你可以直接複製貼上來使用。

CleanShot 2021 07 14 at 00.53.36

2. 在 Notion 裡建立一個 Table 資料庫

獲得公式之後,我們回到 Notion Database 資料庫中把這公式貼過來。

首先你要記得先新增兩個 數字屬性的欄位,分別是「目標值」和「現在進度」,然後再新增一個 Formula 的屬性欄位,把剛剛產生器的公式,貼在這個公式欄位裡:

CleanShot 2021 07 14 at 01.01.26

Ta-Da!簡單的兩個步驟你就完成了視覺化進度條的製作了,接下來你就能搭配你的應用場景,去更換你想要的圖示和符號了。

不過,這種懶人產生器的侷限在於你只能做到「兩個圖示」,沒辦法做出「多個圖示」的精緻的進度條,像是這種:

月亮進度條 Notion

這種精緻的進度條是怎麼做的呢?你就必須要理解 slice() 這個公式了。


高手玩家:slice() 函數實現多重圖示進度條

slice() 函數說明

我們先看下 slice() 在 Notion 上的說明:

CleanShot 2021 07 14 at 07.27.00

如函數的名稱一樣,slice() 會把你輸入的字符串中,根據你給的數字做切除。

再給個範例參考:

slice(“Notion”, 1,4) == “oti”

第一個數字會從最開始做切除(包含此字),也就是填入數字多少,就從最前面刪除幾個字。
所以如果只有 slice("Notion", 1),就會輸出 otion

第二個數字是選填項,不同的地方則是「不包含」,
所以 4 就是從 N 開始數 4 個字(i),因為不包含,所以留下 i ,而 i 後面的字全部切除:oti

slice():單個圖示的進度條製作

好,當你瞭解這函式的原理後,如果我們把這兩格數字以「變數」的方式填入,就可以跟著配合我們的進度百分比進行變化:

CleanShot 2021 07 14 at 08.11.04

上面公式:

slice(“■■■■■■■■■■”, 10 – floor(prop(“完成率”) * 10))

公式說明:

1. floor(),是將小數點無條件捨去,然後我又「乘以 10」,所以輸出 1。
2. 因為我的 slice() 只放第一格數字,所以用 10 – 1 = 9,切除前面 9 個字,最後變成一個黑格子。

你當然也可以用:

slice(“■■■■■■■■■■”, 0,  floor(prop(“完成率”) * 10))

這個公式實現一樣的結果。

slice():完成與未完成雙重圖示進度條製作

簡單完成了單個符號的進度條,接下來我們試試把兩個 slice() 加在一起,來實現雙符號進度條:

CleanShot 2021 07 14 at 08.44.15

上面公式:

公式說明:

1. 為什麼要 *2?因為這個 emoji 是算兩個字符(emoji 裡有些是算 1 個字符,有些 2,有些 3,要自行測試)。
2. ceil() 是什麼?因為要算「未完成」,所以用無條件進位。
3. format() 是什麼?讓值轉為文字串格式,才能讓後面做到文字相加。

挑戰:五個圖示的月亮進度條製作

前面有提到因為 emoji 裡面有五種月亮圖示(🌑🌘🌗🌖🌕),所以我們可以運用 slice() 做到月球陰晴圓缺的轉動效果。

月亮進度條 Notion

此挑戰來自 Linmi 的《如何打造个性化 Notion 进度条?》,不過作者本人並沒有給出完整公式,我在網路上搜了搜也找不到答案,所以就自己動手做啦:

CleanShot 2021 07 14 at 10.49.33

這個挑戰比較複雜,我就不做步驟說明了,給些提示,既然你都到高手區看這麼久了,那建議你自己花時間思考做做看:

1. 要用三個 slice()
2. 配合三個 if() 條件式

💬 想知道怎麼做出月亮動態進度條嗎?留言集氣,超過 10 則就公布。
3
下方留言區可用臉書登入x

※ 我本來打算留言超過 10 個後,在公布我的答案和作法,畢竟我這一篇寫了 4 個多小時😨。

希望能有多一些迴響和影響,後來覺得還是直接放出來好了(反白可見答案):

後記

Notion 的好玩之處在於它的自由性,這次展示的進度條應用就不會只有一種寫法,更不只是「目標值」與「現在值」的這種玩法,還可以作為「今年已經過了幾天」來自動計算日期並用視覺化進度條呈現。

不過 Notion 的困難之處也在於它的自由性,學習門檻稍微高了些。有些人會偷懶直接套用別人的模版和作法,這樣做短期來看省時間省力,但長期下來,你會發現你穿了一雙不這麼合腳的鞋子,要一直不斷迎合別人的需求,而不是自己的。

讓工具為你所用,讓工具幫助你思考,而不僅僅照著做。

希望這一篇寫了 4 個多小時的教學文章有幫助到你。✌🏻

CTR BNR
Notion 進度條完整操作影片教學,在我們的 Notion 課程裡都有唷,歡迎你加入

這篇文對你有幫助嗎?歡迎分享
侯智薰 雷蒙 大頭照 800 podcast

侯智薰(雷蒙)

💻 生活黑客・一人公司實踐者
分享高效數位工作術、品質生活方法,幫助個體加速發展,讓每個人從工具中獲得力量,提升生活掌握感。
30 歲前的目標:和老婆全世界數位遊牧、打造智能科技宅。

文章分類

追蹤侯智薰的消息

Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments