Notion 應用|製作進度條的 3 種方式 (以紀錄追劇進度為例)

進度條的功用很廣泛,可以拿來提醒工作專案、待辦事項的進度,也可以是像我一樣拿來紀錄日常興趣。這篇文章跟大家分享 3 種使用 Notion 製作進度條的方式,將文字化為視覺呈現。

身為一個 MBTI 裡很 J 型的人,我的所有計劃都一定要很完善才行,像是在工作行程上,不能只有「未完成」跟「完成」,而是需要更詳細的去紀錄。

而不只是工作,我在追劇方面也是非常「搞剛」XD,除了紀錄看到的集數,我還會加上進度條視覺呈現,也因此才會誕生這篇文章。

因為是以「追劇進度」為出發點去使用這個功能,所以底下的製作也會以同樣的內容去做示範,那就開始囉!


1. 套入公式 (屬性:formula)

第一種是使用屬性「formula」寫入公式,帶入數字 (也就是我在紀錄的追劇集數),就可以換算成比例,並用圖示的方式,以十為單位呈現。

使用屬性「formula」寫入公式,可製作進度條

程式我是參考牧羊妮的公式去做修改的,這邊我就不特別去介紹,大家也可以進到牧羊妮網站去複製程式碼內容。

使用屬性「formula」製作進度條,可克制自己喜歡的圖案

我自己會去調整的地方會是進度條的圖示部分,因為可以依照自己的喜好調整,這也是我喜歡用這個方式紀錄一個很大的原因。

優點:可自行設計圖示,視覺效果佳,可自動換算比例
缺點:製作麻煩,須懂一點程式運用


2. 內建進度條 (屬性:Number)

第二種是 Notion 裡內建的工具,雖然自己客製的變化性比較低,但製作起來快速,呈現出來也明確,對於不想花太多時間製作,算是很實用的功能。

Notion 裡內建的工具,使用屬性「number」寫入公式,可製作進度條


製作教學

Step 1. 在空白行打上「/」,會跳出區塊選擇,找到「Database-Inline」後插入

在空白行打上「/」,會跳出區塊選擇,找到「Database-Inline」後插入
程式會預設打開「Table」表格

插入後,程式會預設打開「Table」表格,我們就可以直接用這個表格,開始進行製作與紀錄。



Step 2. 在目錄編輯需要紀錄的資訊

以我做追劇進度為例,我的表格需要有「劇名」「進度條」「目前集數」「總集數」「追劇平台」等幾個紀錄內容。

點擊目錄行的加號,可直接新增新的一個目錄項,而點選已創立的目錄項,則會跳出其他屬性可更換。

點擊目錄行的加號,可直接新增新的一個目錄項,而點選已創立的目錄項,則會跳出其他屬性可更換。

要製作進度條,我們要使用「# Number」的屬性,可選取已建立的項目,點擊「Edit Property」切換屬性,或是直接加號建立新的項目。

要製作進度條,我們要使用「# Number」的屬性,可選取已建立的項目,點擊「Edit Property」切換屬性,或是直接加號建立新的項目。

在「# Number」屬性中,可調整屬性名稱、數字呈現、外觀樣貌。

在「# Number」屬性中,可調整屬性名稱、數字呈現、外觀樣貌。

「Number format」選擇「Percent」,可用比例方式呈現內容,但比較要注意的是,這邊的數值區間是 0-100,所以超過後都只會顯示滿格的狀態。

「Show as」有三種外觀可以調整,因為是製作進度條,所以我會選擇長條 Bar 來呈現,也可以調整進度條的顏色。

Step 3. 在對應的空格填入數字,就會自動切換顯示為進度條

在對應的空格填入數字,就會自動切換顯示為進度條
使用內建的進度條,區間只限 0-100,不像套入程式一樣可以帶入數值

只不過使用內建的進度條,除了區間只限 0-100,也不像套入程式一樣可以帶入數值,等於要輸入的 % 數需要自己另外換算後填入。

但因為我主要是純粹想有個圖像方式做紀錄,所以對我來說影響不大,但如果會想要更精準地去計算進度數字,使用起來可能就會比較麻煩。


Step 4. 其餘空格再填入對應的紀錄資訊,就完成專屬的進度清單了

使用內建製作,最大的優點就是操作起來比較快速

內建進度條最大的優點就是製作起來真的比較快速,如果沒有需要精準計算,只是需要一個條列顯示,我還滿推薦可以直接用內建操作。

除了像我一樣用在追劇進度,日常中工作進度,或是真的有需要以 100 為單位去計算的內容,都可以考慮使用內建來做紀錄。

優點:製作方便,進度條顯示清楚,也切換不同顯示方式
缺點:無法自動換算比例,只能用百分比換算


3. 外掛 Indify 製作 (counter)

第三種嚴格來說應該不算進度條,但因為也是我曾經拿來紀錄追劇進度的方式,所以也列在這裡給大家參考。

使用外掛 Indify 製作追劇紀錄

我使用的是外掛「Indify」裡面的小工具「counter」,主要是拿來做簡單的數量紀錄,我把這裡的數量想成追劇的「集數」的概念,看完新的一集,就修改一次數字。

比起前兩項用比例呈現,這邊其實只有打上劇名,並使用整數數字來紀錄,但因為只是需要暫時幫助我記憶,所以實用性上已經很足夠。


製作教學

Step 1. 在空白行插入「Callout」區塊,輸入待追劇名

在空白行插入「Callout」區塊,輸入待追劇名

劇名部分其實也可以不要講求太多,直接輸入文字即可,但我自己是偏愛排版,Callout 區塊會有標註底色 + 可切換不同 Emoji 符號,整體美觀度上很加分。

Step 2. 進入外掛 Indify 網站,底下小工具中選擇「Counter」

進入外掛 Indify 網站,底下小工具中選擇「Counter」

點選之後會需要先輸入小工具名稱,這邊可以自行輸入覺得好辨識的名稱,之後都可以再修改。


Step 3. 進入編輯頁面,調整自己想要的設計樣式
進入編輯頁面後,會看到左側是版型與樣式相關的設定欄,右側會是調整後的預覽外觀。

版面左側是設定欄,右側會是調整後的預覽外觀

接下來就帶大家一項一項認識設定的內容。


A. 基本設定 (SETTINGS)
首先,基本的設定有「標題」和「icon樣式」。標題可以選擇打或不打都可以,按鈕 icon 則有兩種款式可以切換選擇。

基本的設定有「標題」和「icon樣式」
有標題,按鈕選擇「Plus and Minus」的外觀預覽

如果有打上標題,文字會顯示在計數器上方。按鈕選擇「Plus and Minus」款式,切換會是用加減號來做調整。

基本的設定有「標題」和「icon樣式」
無標題,按鈕選擇「Arrows」的外觀預覽

如果沒有打上標題,文字區就會是空白。按鈕選擇「Arrows」款式,切換會是用上下箭頭來做調整。


B. 版型設計 (STYLE – 無背景色)
接著版型設計的部分,可以選擇無背景與有背景兩種類型。而 Counter 的預設是無背景色顯示,會依據電腦系統的外觀顏色來做切換。

 IOS 設定可調整系統外觀顏色

以我用 IOS 來舉例,在電腦的系統設定裡,外觀可以切換成淺色 (light mode)、深色 (dark mode)、自動 (依據白天/晚上時間) 三種類型。

選擇電腦系統外觀設定,去製作對應的外掛設計

而這邊小工具使用無背景色的選項時,可在上方紅框處,選擇你的電腦系統外觀設定,去製作對應的外掛設計。

在設定中選用淺色外觀
白色的背景在淺色的模式下,就會變成無背景呈現出來

如果電腦是選用淺色外觀,這邊顯示就要選擇 Light mode,白色的背景在淺色的模式下,就會變成無背景呈現出來。

在設定中選用深色外觀
黑色的背景在深色的模式下,就會變成無背景呈現出來

反之,如果電腦系統使用深色背景,搭配Dark mode 的外掛,也會有透明背景的效果。

如果你的電腦系統選擇「自動」會隨時間切換淺色與深色模式,那小工具直接選擇「Use system setting」即可。

最後,選擇「Do nothing」則可以手動切換底色,可跳轉底下說明。


C. 版型設計 (STYLE – 有背景色)
而除了預設的無背景透明模式,也可以打開「Set background color」,會跳出更多可調整的項目,可以客製化背景顏色的部分。

打開「Set background color」,可調整小工具背景
小工具加上背景色的外觀預覽

使用有背景的版型,「背景色」、「文字顏色」都可以做調整,按鈕 icon 則可以選擇亮 (白) 和 暗 (黑) 兩種款式。


D. 浮動目錄顯示
最後,還可以選擇目錄是否要顯示在外掛的右下方。

通常要調整外掛內容,需要從 Indify 登入後,找到對應的小工具去修改,但如果開啟目錄顯示,就可以從貼在Notion 上的小工具,將滑鼠滑到右下角,直接點選「Customize」進入到修改頁面。

開啟目錄顯示,就可以從貼在Notion 上的小工具,將滑鼠滑到右下角,直接點選「Customize」進入到修改頁面

這裡比較特別的是,通常如果我們在顯示模式有選擇 Light 或是 Dark mode,開始目錄功能,右下角只會顯示「Customize」的按鈕。

但因為我的顯示模式調整為「Do nothing」,並沒有事先指定外觀,所以開啟目錄後,會多出一個按鈕,讓我可以自由調整Light 或是 Dark mode。


Step 4. 複製最底下網址,回到 Notion 頁面

複製網址回到 Notion 頁面貼上即可置入

完成想要的款式和設計之後,最底下會有一串網址,複製之後回到 Notion 頁面,貼在欲放置的地方。


Step 5. 將網址貼上後,使用嵌入 (Create Embed) 方式置入
貼入網址,Notion 會自動跳出詢問網址插入方式,這邊直接選擇「Create embed」,就會顯示你剛才設定的外掛工具內容。

貼上網址,選擇「Create embed」,即可顯示剛才設定的外掛工具內容
貼上網址,選擇「Create embed」,即可顯示剛才設定的外掛工具內容



Step 6. 調整整體排版位置
而外掛直接貼上後,可能不會直接符合你想要的版面,所以可以再透過調整外掛工具的大小,以及修改一些Notion 的呈現,來製作滿意的版面。


A. 調整外掛版型大小
將滑鼠移到外掛小工具上方,可以透過拉寬或縮小來調整整體大小

小工具可以透過拉寬或縮小來調整整體大小

紅框部分:可透過拉伸調整外掛整體的大小。
藍框部分:可調整外掛對其位置 (置前 / 中 / 後),插入文字敘述等等。


B. 並排文字區塊,使版型對齊
除了調整外掛的外觀,我也會調整原本的版型,我的習慣是讓同一行有多部韓劇同時顯示,也不會顯得資訊不多卻佔許多空間。

可將兩行內容合併至同一行,調整整體版面外觀

將新建立的一行內容,按住左側的六個點,拖移到欲合併的行數最右側,會出現直式合併的藍色線條,放開滑鼠插入即可。

調整完版型,就是專屬你的追劇紀錄啦!之後也可以簡單修改劇名,外掛也可以直接點選「reset」歸零,就可以反覆利用了。

雖然不像前兩項可以呈現精確比例,但相較之下視覺化效果其實更好,且客製化的程度也很高,以只是需要簡單紀錄來說,我還是很推薦這個做法給大家。

除了像我一樣用來紀錄追劇進度,也有很多人會使用在日常生活中,做為每日的飲水、閱讀、運動紀錄或目標等等。

優點:方便進行數量的調整,可客製化標題、顏色
缺點:無法顯示比例,僅能用數字標示



以上就是三種進度條紀錄的方式啦,最後也附上模板,可以讓大家直接套用,希望有幫助到也同樣喜歡紀錄生活,喜歡紀錄興趣,喜歡一點小小儀式感的你們!

延伸閱讀:
如何用 Notion 紀錄韓劇清單,追劇實用的 3 種模板分享
韓劇《二十五,二十一》完結一週年!經典場面回顧 EP1~EP10 (上) 
韓劇《二十五,二十一》完結一週年!經典場面回顧 EP1~EP10 (下) 


返回頂端