> ## 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 中文應用案例】奇幻風 Icon 道具商店｜訓練營作品心得 060 - URL: https://blog.lifehacker.tw/notion-casestudy-060/ - Published: 2025-11-01T15:04:45.000Z - Updated: 2026-04-07T02:10:47.000Z - Description: 本篇分享 Rain 將 Notion 打造成奇幻風格道具商店，融合 icon 設計與引導互動，提升使用者體驗。 - Author: 生活黑客社群 - Tags: Notion, 訓練營學員作品, Notion 線上訓練營, 遊戲設計, 個人網站 ## 一、優秀學員介紹 - 暱稱：rain - 現職：科技業設計工程師 - 哪屆訓練營：第 9 屆 Notion 訓練營（學號：#2530） - 作品連結：[rain 的冒險者武器道具商店](https://www.notion.so/rain-1f76364b438c80e89266d8fe5a4f3cb5?pvs=21&ref=blog.lifehacker.tw) - 作品摘要：rain 透過奇幻風格的商店場景介紹自己在訓練營期間製作的吉祥物、icon，並且透過結合在訓練由期間學會的區塊功能以及自製的 icon，來展現頁面設計的核心概念 ”不需要說明就是最好的說明”，透過減少使用者的學習成本來達到更好的使用體驗。 --- ## 二、Notion 作品展示 > 作品名：rain 的冒險者武器道具商店 0:00 /0:07 1× --- ## 三、系統製作與迭代過程 ![奇幻風 Icon 道具商店 配圖 1](https://blog.lifehacker.tw/content/images/2025/09/image--1-.png) ### 主題思考階段 1. **製作微網站的目的：** 當時會想做這個網站一方面是想保存以及記錄我在訓練營期間的創作，另一方面則是想向其它人介紹。 2. **主題的選定：** 其實我一直很想嘗試製作奇幻風格的頁面，這次剛好有機會可以讓我試試。會選擇以商店的方式呈現是因為我其實也想看到大家的反饋，所以就用了以反饋來交換 icon 的形式做了一間商店。 ### 草稿階段 我在製作微網站時有一個核心理念： > 不需要說明就是最好的說明 我認為當一個網站的使用學習成本過高時，會願意停留的人少之又少，所以我才會以此為核心來設計頁面，而我用了以下方式來達成我的想法。 ![奇幻風 Icon 道具商店 配圖 2](https://blog.lifehacker.tw/content/images/2025/09/image--3-.png) ![奇幻風 Icon 道具商店 配圖 3](https://blog.lifehacker.tw/content/images/2025/09/image--2-.png) 當明確的標題配合圖示，及簡短的說明以「主標題 → 副標題 → 簡短的說明」來引導閱讀者閱讀方向，告訴他這是甚麼樣的東西（ 不過因為被我改造成中世紀奇幻風格，所以看的時候反而變得沒那麼清楚） ![奇幻風 Icon 道具商店 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/09/CleanShot-2025-09-19-at-22.17.50@2x.png) ![奇幻風 Icon 道具商店 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/09/CleanShot-2025-09-19-at-22.21.11@2x.png) ![奇幻風 Icon 道具商店 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/09/CleanShot-2025-09-19-at-22.25.20@2x.png) 除了文字引導以外，還加上了icon、動圖來引導閱讀者，告訴他這裡可以點擊，透過指引的方式減少頁面使用的學習成本就是我的目的。 ### 實踐之後的迭代優化（Before & After） **初版 Layout 完成後遇到的問題** - **頁面沒有更明確的引導：** 其實第一版是沒有圖示、icon 或文字來做引導的，只有做出簡潔方便觀看的頁面，在一開始剛想好主題後，我馬上開始想頁面會需要的內容以及使用的區塊，想完後我就使用無內容只有標題的區塊把我要的版面大概 Layout 出來，但很快的我就發現這個頁面在使用上並不直覺，這違背了我版面設計的核心概念，所以馬上開始想著我要如何改善這個問題，我嘗試了幾種方式，文字、箭頭、icon、gif 動圖…..等，最後我把這些互相合併使用，做出現在我覺得最能引導使用者的樣式。 **助教批改後發現的問題** **無法一眼知道頁面的內容：** 其實一開始看到助教建議後，我第一個想法是，是不是我的引導做的不夠，才會讓她給出這個建議，但我後來就發現是因為我改造成奇幻風格，確實目前真的看不懂這個網頁在幹嘛，所以馬上，加了網站簡介，讓整體更加完整。 ![奇幻風 Icon 道具商店 螢幕截圖](https://blog.lifehacker.tw/content/images/2025/11/CleanShot-2025-11-01-at-22.50.45.png) --- ## 四、**Notion 訓練營學習心得分享** 這個訓練營真的讓我有很不一樣的體驗，一開始其實我只是想著要學一項工具來管理我工作，如果有機會可以與人交流，學習別人的思考方式，但事實上我學到的不僅僅只是這些，我還看到了更多不一樣的面向，別人的人生觀、思考邏輯、使用工具的方式，這些都讓我大為震撼，雖然我一開始就知道參加訓練營，吸收這些不一樣的觀點、知識有機會讓我的人生起一點變化，但完全沒想到變化如此之大，有如驚滔駭浪般襲來，就算是結營的現在，回頭看看同學的作業或是跟大家閒聊的過程中都還能學到不一樣的觀點、看到不一樣的面向，我現在很感謝當時即使猶豫還是給它刷下去的自己。 --- ### 📍 本文由 [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)