> ## Content Index > Fetch the complete content index at: https://blog.lifehacker.tw/llms.txt > Use this file to discover other available public pages before exploring further. # 【Notion 中文應用案例】英雄成長旅程互動微網站｜訓練營作品心得 046 - URL: https://blog.lifehacker.tw/notion-casestudy-046/ - Published: 2025-05-25T06:03:23.000Z - Updated: 2026-04-07T02:10:58.000Z - Description: 將榮格心理學英雄旅程結合遊戲互動設計，蔡澤把個人成長與 Notion 作業整合成一場精彩的數位冒險。 - Author: 生活黑客社群 - Tags: Notion, 訓練營學員作品, Notion 線上訓練營, 遊戲設計, 個人網站 ## 一、優秀學員介紹 - 暱稱：蔡澤 - 現職：醫藥產業專案經理 - 哪屆訓練營：第 ９ 屆 Notion 訓練營（學號：#2358） - 作品連結：[被魔王滅團的我重生到沒有隊友的國度但還是要完成英雄旅程](https://www.notion.so/1f7e6333d6f0801ca5ecdb88e53efe68?pvs=21&ref=blog.lifehacker.tw) - 作品摘要：蔡澤透過奇幻冒險的對話場景介紹榮格心理學中英雄旅程的這個個人化成長的概念，並整合了 Notion 訓練營中不同作業的內容，可以讓使用者透過點擊按鈕的互動方式展示蔡澤介紹自己想要在訓練營中尋找夥伴的期待、訓練營其他優秀作業的參考連結跟心得、英雄旅程的參考資料、透過劇本撰寫讓劇本殺玩家可以體驗英雄旅程的 PAI 專案、以及找到一個夥伴的故事。 --- ## 二、Notion 作品展示 > **作品名：被魔王滅團的我重生到沒有隊友的國度但還是要完成英雄旅程** ![英雄成長旅程互動微網站 配圖 1](https://blog.lifehacker.tw/content/images/2025/05/---Before.png) Before 0:00 /0:37 1× After --- ## 三、系統製作與迭代過程 ### 主題思考階段 - 製作微網站的目的 - 為自己：想加強詮釋英雄旅程的意涵，也想用一個有趣的方式介紹自己的作業 - 主要是給誰看的：希望對於英雄旅程有興趣，或是 Notion 可以做到什麼程度想知道的人 我想透過收到連結，點開這個頁面，幾乎不需要教學的方式讓使用者看到 Notion 在呈現不同層面的方法，不管是互動的按鈕，標籤的資料整理，或是透過連結跳轉到其他頁面。 我已經預先設計了手機版跟電腦板，理想上就是希望可以透過點選對話的方式來回穿梭在不同的頁面，盡可能簡化往來的流程，提升體驗感。 ![英雄成長旅程互動微網站 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/05/CleanShot-2025-05-25-at-14.35.44@2x.png) 初級作業主要是呈現我自己的內容，因此花了很多時間構思跟寫出高級作業希望呈現大禮包的內容，所以想維持當初選擇的冒險模式，不斷地重複復盤原來的描述跟內容。使用了以下的設計： 1. Callout 非常適合遊戲風格的對話框，所以用來作為主要的視覺風格 2. 透過按鈕來選擇手機版還是電腦版 3. 頁面都是連結之前作業的資料庫或是同步區塊，訓練營的同學應該都可以看到全部內容 ### 草稿階段 第一次有一個作業，想了兩天都還沒辦法開始動手，在飛機上靠自由書寫寫了幾千個字才大概有個輪廓，基本上是打算製作一個努力復盤自己的過程，內容跟排版都會放在高級作業再填上，初級作業打算只呈現概念。 在第一份作業，我把大部分的頁面都呈現在跟訓練營相關的內容上，關於自己的部分非常少，當我逛了其他學員的作業之後，我發現很多人都做得很有特色，而且個人色彩很鮮明，而我卻是把自己藏起來，其實我一直都不知道怎麼展現自己是怎麼樣的人，這也導致我花了很久的時間思考要怎麼填內容。 我想嘗試規劃自己的關鍵字，盡可能簡短但明確的解釋關鍵字，並搭配已經製作的作業內容，最核心的概念是我自己的價值觀： > 人生是個體驗的旅程。 這也是一開始打算用來貫穿整個訓練營作業的概念（即使根本不知道訓練營要幹嘛），這會是一個透過 Notion 這個軟體來復盤跟整理自己的過程，也會是一個為期 40 天的濃縮版英雄旅程。 我保留了大部分的版面配置，即使是放了圖片的內容也用摺疊清單收起來，讓瀏覽上可以使用 **F 型瀏覽**，快速理解重點，如果想看細節再點開（以免有人根本不想看我的廢話）。 ![英雄成長旅程互動微網站 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/05/CleanShot-2025-05-25-at-14.36.54@2x.png) 一開始要填入關鍵字，其實我卡了兩天，因為我實在想不出來，我有什麼值得放上關鍵字的描述，後來把自己這個主題由內而外，由時間序切分成三個題材。 另外要分不同年份來介紹自己的事蹟，我也覺得很不容易填寫，為了與關鍵字有關聯，所以最後選擇用主題性的敘述來闡述。 ![英雄成長旅程互動微網站 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/05/CleanShot-2025-05-25-at-00.51.07.gif) 使用主題性的標籤描述搭配按鈕，點擊後會跳出相對應的故事頁面 ### 實踐之後的迭代優化（Before & After） 在一開始完成初級作業的時候沒有好好呈現英雄旅程的內容，只是把資訊放到連結裡面。經過助教的建議後，重新構思如何可以同時呈現出介紹自己的微型網站，又可以提供英雄旅程的資訊，並良好的做出連結。 由於這次訓練營一開始就打算用冒險者的風格來完成每次的作業，所以乾脆就把其他的作業也取出一部分放進來，作為一個以終為始的大禮包。 透過冒險這個主題，讓使用者可以接觸不同作業的精華內容，體驗 Notion 可以做到的事情不侷限在單純的記錄筆記，也可以透過其實沒有很可怕的資料庫追蹤專案跟閱讀筆記。 ![英雄成長旅程互動微網站 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/05/CleanShot-2025-05-25-at-14.39.18@2x.png) 每份作業都有專屬助教回饋，四十天的陪跑手把手帶你打造最適合自己的系統。 身為迭代老司機，在閱讀完助教非常明確的建議後可以馬上動工，迭代後對於非Notion 使用者不論是明確的跳轉按鈕、解說使用資料庫方式或是分頁，都可以更輕鬆地達成跟閱覽，而這也是我本來的目的。 此外同學們的網狀學習，在研究其他同學在同一份作業遇到的不同問題去嘗試解決，也讓我學會了其實本來沒有用到的功能或思維。 ![英雄成長旅程互動微網站 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/05/CleanShot-2025-05-25-at-14.40.09@2x.png) 在線上訓練營，同學們上完直播課後有任何疑問都能到 Discord 課後社群提出，除了有教學團隊的回覆外，這裡也鼓勵你解答其他同學的問題，因為：「所有人都能向所有人學習。」 --- ## 四、**Notion 訓練營學習心得分享** 我覺得這次很多同學都有一樣的感想，這不是一個關於如何使用 Notion 這個軟體的訓練營，而是一個把想提升自己或是了解自己的人聚在一起長達 40 天的體驗。 在 Discord 上，不論是直播課暴風般的聊天室，每天的早安點點名刷留言，小隊裡面互相討論完成作業遇到的問題，或是線上圍爐宛如演唱會的體驗跟分享，我們小隊還有戀綜小說連載跟閃圖鍛造店，讓每天的 DC 都非常熱鬧，就跟參加營隊一樣。 在 Notion 上，除了助教的批改建議之外，同學互相的留言跟心得也是完成作業後的一大激勵，如果有藏彩蛋被發現會特別開心。透過參考其他同學的作業，不只是了解其他同學如何神乎其技的完成作業，而是了解他們的故事或想做的事情，一起組成共學團、讀書會，或是一起到線下參與共同興趣。 就如同前面所說的，我認為人生就是一個體驗，而訓練營就是一個超棒的體驗！（但很累，建議不要排其他恐怖的工作或事情\~\~，因為助教已經夠恐怖了\~\~） 如果想進一步認識我，歡迎追蹤[我的 Instagram](https://www.instagram.com/ppco?ref=blog.lifehacker.tw) --- ### 📍 本文由 [Notion 線上實戰訓練營](https://raymondhouch.com/notioncamp?ref=blog.lifehacker.tw) 學員的作品投稿 感謝同學們在這 40 天的陪伴式教學中，用行動力產出這些優質的 Notion 作品，並分享自己在課程中的收穫！ 我們會繼續收集、整理同學們優秀作品和應用到這專欄，同時也歡迎認真學習的你，也和更多人分享你的成果、作業思路和改變故事，讓你透過這輸出練習，更瞭解自己、熟練工具，還能讓需要的人因為你的分享而被點亮。 👇🏼 最完整的中文 Notion 教學服務[點此瞭解](https://raymondhouch.com/notionhacker/?ref=blog.lifehacker.tw)，與 12,000 多名各行各業的同學一起精進自己！ [![06c43261-8f2b-4181-9695-519e9f20ff0a.png](https://blog.lifehacker.tw/content/images/2025/01/06c43261-8f2b-4181-9695-519e9f20ff0a-1.png)](https://raymondhouch.com/notioncamp?ref=blog.lifehacker.tw)