Lazy loaded image
單元 6-03|視覺化進度條設計教學
00 分钟
2023-10-4
最後更新
Oct 4, 2023 09:38 AM
標籤
BONUS|解鎖贈送
製作者
更多  Notion 模版和應用教學?
都在最完整的 Notion 中文課程 → 【Notion 實戰:打造專屬數位工作術】
更多 Notion 模版和應用教學? 都在最完整的 Notion 中文課程 → 【Notion 實戰:打造專屬數位工作術】
📌 使用須知:
  1. 🔗 若需最新內容::
    1. 請使用 Copy Link(複製此頁面網址)貼到你的 Notion 頁面上。
    2. 或直接拷貝(Duplicate)到你的 Notion 工作區,會變成可編輯頁面,但無法自動更新。
🧑🏻‍💻 製作 by 雷蒙
→ 想掌握知識管理、時間管理、專案協作,甚至製作個人網站,點此加入我們
https://raymondhouch.com/lifehacker/digital-workflow/notion-progress-bar/
進度條工具圖文教學&進階函數教學&本單元挑戰:
Notion 教學|視覺化進度條製作工具,個性化公式設計(動態月亮)
如果你是用 Notion 作為專案管理,習慣養成,或者學習知識庫......等任何有關目標設定和進度記錄的應用,你可能會需要「 視覺化進度條」這項技巧,幫助你把 進度可視化 ,也讓你在過程更有成就回饋感。 當我們掌握 Notion Formula 後,我們可以做到這種的應用: 我在學習 Notion 進度條的時候,覺得網路上許多教學內容都搞的好複雜......例如加減乘除也用函數、簡單的需求卻用了好多層 if 條件式......等等。所以我寫了這篇「 不懂公式代碼 」也能做出客製化進度條的圖文說明。​ 今天用這篇文和你分享,怎麼用 Notion 做出個人化的進度條。 我會和你分享兩種方法,一種非常簡單,一種能高度客製化,最後還提供一個小挑戰。 🙋🏻‍♀️:「老師我很不會使用這些公式,有沒有更簡單的方法?」🤫:「我就知道你會這樣說,還真的有。」 只要透過 這個網站 的進度條產生器,就能直接無腦做出屬於你的視覺化進度條。 接下來我簡單教你如何使用這個工具: 在這個進度條產生器裡,有兩個最重要的變數我們要設定,是「 現在進度」和「 目標值 」這兩格,我覺得他這邊兩個都寫 Target 有點混亂,建議你在左下角那格直接填入「目標值」,右上角填入「現在進度」,這樣待會就能直接無腦產出你想要的進度條了。 這個工具有兩種樣式可以選擇,Bar 是 條型圖 ,Slider 是有一個東西在上面滑,兩個的圖示都可以在「圖示更改」那邊調整。這個產生器還很貼心把一些常用的圖示素材放在底下,讓你可以直接複製貼上來使用。 獲得公式之後,我們回到 Notion Database 資料庫中把這公式貼過來。 首先你要記得先新增兩個 數字屬性的欄位,分別是「目標值」和「現在進度」,然後再新增一個 Formula 的屬性欄位,把剛剛產生器的公式,貼在這個公式欄位裡: Ta-Da!簡單的兩個步驟你就完成了視覺化進度條的製作了,接下來你就能搭配你的應用場景,去更換你想要的圖示和符號了。 不過,這種懶人產生器的侷限在於你只能做到「兩個圖示」,沒辦法做出「多個圖示」的精緻的進度條,像是這種: 這種精緻的進度條是怎麼做的呢?你就必須要理解 slice() 這個公式了。 我們先看下 slice() 在 Notion 上的說明: 如函數的名稱一樣, slice() 會把你輸入的字符串中,根據你給的 數字 做切除。 再給個範例參考: slice("Notion", 1,4) == "oti" 第一個數字會從最開始做切除(包含此字),也就是填入數字多少,就從最前面刪除幾個字。所以如果只有 slice("Notion", 1),就會輸出 otion 第二個數字是選填項,不同的地方則是「不包含」,所以 4 就是從 N 開始數 4 個字(i),因為不包含,所以留下 i ,而 i 後面的字全部切除: oti 好,當你瞭解這函式的原理後,如果我們把這兩格數字以「變數」的方式填入,就可以跟著配合我們的進度百分比進行變化: 上面公式: slice("■■■■■■■■■■", 10 - floor(prop("完成率") * 10)) 公式說明: 1.
Notion 教學|視覺化進度條製作工具,個性化公式設計(動態月亮)

一、進度條工具
Name
現在進度
目標值
進度條1
進度條2
12
100
■□□□□□□□□□ 12%
📍︎⎓⎓⎓⎓⎓⎓⎓ 12%
54
100
■■■■■□□□□□ 54%
⎓⎓⎓📍︎⎓⎓⎓⎓ 54%
100
100
■■■■■■■■■■ 100%
 

二、% 數的條件式(IF)
Name
現在進度
目標值
完成率(%)
進度條1
進度條2
進度條3
12
100
12
NaN%
NaN%
NaN%
54
100
54
NaN%
NaN%
NaN%
88
100
88
NaN%
NaN%
NaN%
100
100
100
NaN%
NaN%
NaN%
77
133
58
NaN%
NaN%
NaN%
公式說明

 
三、日期進度條
Name
Time
已經過去(天)
已經過去(%)
日期進度條
Jan 1, 2021
NaN
NaN%

日期判斷進度條

  1. 要先計算目前過了多少天,所以我們用dateBetween(date, date, text)這個函數
  1. 但是dateBetween()所輸出的格式是時間,但我們要的是數字
  1. 所以我們需要用toNumber()函數來把時間轉換成數字。
  1. 最後把這數字,除以 365 * 100 輸出百分比的數字。
  1. 再加強一筆,如果你不喜歡小數點,可以透過Round()函數將數字四捨五入。
 

進階:雙重進度視覺化

讀書挑戰
Name
Pages
Page On
Date Range
雙重進度條
431
168
Jul 3, 2021 → Jul 31, 2021
Progress: ‒‒‒‒‒‒‒📗‒‒‒‒‒‒‒‒‒‒‒‒‒ 38% Deadline: ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒⭕ 100%
541
446
Jul 18, 2021 → Aug 8, 2021
Progress: ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒📗‒‒‒‒ 82% Deadline: ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒⭕ 100%
782
782
Jun 14, 2021 → Jul 3, 2021
Progress: ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒📗 100% Deadline: ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒⭕ 100%
公式拆解
上一篇
读书盘点|2022年世界读书日
下一篇
第三周刊_No.28|写在新一岁