改造 Notion 進度條：用 Emoji 帶動任務完成動力

Notion以其強大的組織功能而聞名，豐富多彩的功能和高度定制性讓用戶能夠依照自身需求來設計和規劃項目，已經是個人和團隊項目管理的首選工具，糰子自己也是經常使用。

例如，通過Notion的內建Project & Task模板，能夠得到一個非常便捷的專案管理工具🧰。用戶可以輕而易舉地創建、分配和追蹤任務，確保項目能夠準時完工。

糰子自己覺得其中Completion進度條功能顯得尤為重要，讓使用者能夠以數字（number）🔢、橫條（bar）➖、圓環（ring）⭕的形式直觀地展示任務的完成狀況。進度條的視覺效果不僅能夠為用戶帶來心理上的滿足感，也能有某種程度的成就感促使使用者持續努力，以完成更多的任務。

Notion預設的進度條Completion功能相當便利，但它的視覺呈現卻略顯單調，對於喜歡胡搞瞎搞的糰子來說缺乏趣味性和視覺吸引力。因此，我們今天要來介紹如何利用各種有趣的emoji，來設計出富有個性和吸引力的進度條。（相信有讀過糰子文章的朋友應該會注意到糰子很愛用Emoji 😂）

Progress Bar with Emoji

基本介紹

在探究如何創建這些Emoji進度條之前，先來看看糰子的設計概念。我利用了三種不同的emoji來呈現進度條的三個主要部分：1. 進度指標、2. 已完成進度、3. 未完成進度。以下是一個具體的範例，以助於更好的理解：

Examples of Emoji Progress Bar

從上圖中的上排示例中可以看出，隨著任務的完成，狗🐶會往前吃肉🥩，並留下腳印🐾。這不僅使進度條視覺上更有吸引力，也為完成任務增加了一些趣味性。（已完成進度：腳印🐾、進度指標：狗🐶、未完成進度：肉🥩）

另外，從上圖中的下排示例中可以看出，隨著任務的完成，飛機✈️會在藍天🟦中前進，並留下飛機雲☁️。這不僅使進度條視覺上更有吸引力，也為完成任務增加了一些趣味性。（已完成進度：☁️白雲、進度指標：飛機✈️、未完成進度：藍天🟦）

要實現這個進度條，糰子寫了一個Formula。重點在於利用兩個屬性「Completed Tasks」和「Total Tasks」，來表達已完成的任務和總任務，而這個Formula會計算已完成任務佔總任務的比例，來呈現進度條的效果。

在一般的Database表格中，你只需複製並貼上我提供的Formula就能輕鬆實現這個可愛的進度條。

而如果想在Notion的Project-Task模板或是自己的模板中使用，則需利用Notion的Relation和Rollup功能。

跟著糰子以下的簡單步驟設定，就能在你的項目中輕鬆實現這個有趣的Emoji進度條囉～

如何使用 Emoji 進度條

兩種情境：創建表格或開啟Project-Task模板

1. • 糰子在這裡介紹兩種使用情境，一種是在Notion中創建一個新的Database，手動設定進度。一種則是打開一個現有的Project-Task模板，導入原本在模板內的任務。

情境一：一般的表格或模板—直接添加必要的屬性：

1. • 在你的Database或模板中，新增兩個屬性名為「Completed Tasks」和「Total Tasks」。確保這些屬性的類型設為「Number」，以便能夠輸入任務的數量。

Setting of Properties for Normal Database

1. • 後續如果完成任務，要手動更新欄位中的數字，當變更對應屬性時，進度條會自動更新往前推進。

情境二：Project-Task模板—設定Relation、Rollup：

1. • 在Project-Task模板中，我們要分別設定好「Completed Tasks」和「Total Tasks」兩個屬性
   • 首先來設定「Total Tasks」，點開你原本的Project-Task模板，我們直接來進行Rollup設定， 創建一個新的屬性並將類型設為「Rollup」。在Rollup設定中，選擇已有的Relation屬性，並選擇要計算的欄位「Status」，選擇計算方式為「Count All」，最後再把名字改為「Total Tasks」。
   • 再來設定「Completed Tasks」，我們再次創建一個新的屬性並將類型設為「Rollup」。在Rollup設定中，選擇已有的Relation屬性，並選擇要計算的欄位「Status」，選擇計算方式為「Count per group」，再選擇「Complete」，最後再把名字改為「Completed Tasks」。 後續如果任務/Task的狀態/Status變更為完成/Complete，進度條便會自動更新往前推進。

Setting of Properties for Project-Task Template

1. • 補充：如果使用自建模板，須先設定Relation，再設定Rollup。具體步驟則請先在你的項目表格中，創建一個新的屬性，將類型設為「Relation」，然後選擇你想連接的任務表格（Task）。 接著按照上述的Rollup設定步驟進行。

複製並貼上Formula

1. • 接著，我們在表格中創建一個新的屬性，屬性類型選擇「Formula」，點選編輯，然後將以下Formula貼上（詳細的解釋請參照後面的進階：Formula解說）：

	format(repeat("🐾", floor(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10)-1) + "🐶" + repeat("🥩", ceil(10 - toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10 )) + " " + format(round(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 100)) + "%")

或是

format(repeat("☁️", floor(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10)-1) + "✈️" + repeat("🟦", ceil(10 - toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10 )) + " " + format(round(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 100)) + "%")

Setting of Notion Formula

1. • 一旦你輸入了所有必要的數據，你就可以看到進度條隨著你完成的任務而變化。
   • 如果你是用第一組Formula，每當你完成一定比例的任務，狗🐶就會往前吃肉🥩，並留下腳印🐾，直到所有的任務都完成！如果是用第二組Formula的話，飛機✈️會隨著你的進度，往前探索藍天🟦並留下飛機雲☁️喔！

其他進度條設計

在你熟悉了基本的進度條設計後，可能會想嘗試一些不同的設計來使你的項目看起來更吸引人。糰子在這裡提供了一些不同的Emoji組合，你可以按照自己的喜好來選擇和嘗試。你只需將Formula中的Emoji替換為下面提供的新Emoji，就能輕鬆創建出不同風格的進度條。

1. 🦴🐺🍖骨頭-狼-排骨
2. 🏢🏗️🚧大廈-建築-施工
3. 🪐🚀🌌行星-火箭-太空
4. 🤖🛠️⚙️機器-工具-零件
5. 🏝️🚢🌊島嶼-探險船-海洋
6. 🏖️🚢🌍海灘-探險船-地球
7. 💎⛏🪨鑽石-十字鎬-礦石
8. 🗿🔨🪨石像-鐵鎚-礦石
9. 🌺🚿🌱花朵-澆水-發芽
10. 🌾👨‍🌾🌱水稻-農夫-秧苗
11. 🖼️👨‍🎨🎨畫作-畫家-顏料
12. 🎯🏹🍎靶心-弓箭-蘋果
13. 🧥🪡🧶毛衣-針線-毛線
14. 🔓🔑🔒解鎖-鑰匙-鎖
15. ⛓️🕵️🧩鏈條-偵探-拼圖
16. 💡📖💭發明-學習-想法
17. 💰🔍🗺️寶物-放大鏡-地圖
18. 🍟👨‍🍳🥔薯條-廚師-馬鈴薯
19. 🏰🛠️🏚️城堡-工程-小屋
20. 🏦🐷🪙銀行-儲蓄-硬幣

結語

Emoji的多樣性和Notion的靈活性組合在一起，提供了一個既實用又富有創意的方式來視覺化項目進度。透過以上的介紹，糰子相信大家可以學到如何在Notion中創建一個簡單而有趣的進度條，而且也一起探索到更多的自定義選項以配合自己的項目需求。

現在就開始嘗試吧，找到最能表達自己特色和氛圍的進度條設計！

進階：Formula解說

糰子寫的Formula應該算是滿直觀的，大概就是透過計算進度完成比例，再逐步呈現已完成進度、進度指標、未完成進度，可以分為以下五個步驟，一起看看吧！

1. 計算任務完成比例：
2. • 首先，公式中的 toNumber(prop("Completed Tasks"))/prop("Total Tasks") 部分是用來計算任務完成的比例。prop("Completed Tasks") 是已完成任務的屬性，而 prop("Total Tasks") 則是總任務的屬性。然後，toNumber 函數將這些屬性的值轉換為數字，以便進行除法運算。
2. 向下取整以獲取已完成進度的圖示數量：
3. • 接著，floor(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10)-1 部分是用來計算已完成進度的圖示“🐾”數量。這裡先將任務完成比例乘以10（以獲得一個0到10的數值），然後向下取整（以獲得一個整數值），最後減去1（以確保有空間放置“🐶”符號）來完成的。
3. 利用 repeat 函數呈現已完成進度的圖示：
4. • 然後，repeat("🐾", floor(toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10)-1) 部分用來呈現已完成進度的圖示。repeat 函數將“🐾”符號重複指定的次數，而這裡的次數是根據已完成任務的比例計算出來的。
4. 顯示進度指標：
5. • 公式中的 + "🐶" + 部分是用來在已完成進度的圖示後面添加一個“🐶”符號，作為進度指標。
5. 計算並顯示未完成進度的圖示：
6. • 最後，repeat("🥩", ceil(10 - toNumber(prop("Completed Tasks"))/prop("Total Tasks") * 10 )) 部分用來計算並顯示未完成進度的圖示。這裡是先計算10減去已完成任務的比例（以獲得未完成任務的比例），然後向上取整（以獲得一個整數值），並使用 repeat 函數來重複“🥩”符號指定的次數來完成的。

將這些步驟組合在一起，就能完成我們的Emoji進度條，而這個進度條會根據任務的完成狀況更新，並以一個直觀且吸引人的方式顯示進度囉！

喜歡糰子律師的文章嗎？歡迎按讚、分享！更歡迎你到FB或IG追蹤我們（搜尋「糰子律師」），也可以到糰子律師的社群集散地（Linktree）找到更多的糰子律師！！