一、優秀學員介紹

  • 暱稱：清華
  • 現職：自由文字工作者
  • 哪屆訓練營：第 10 屆 Notion 訓練營（學號：#2778）
  • 作品連結：花落時再見｜入口
  • 作品摘要：
    • 清華集結了訓練營四週以來的作業內容，製作成動漫推薦的微網站，並分為三大區塊「動畫清單→動畫評論→動畫周邊」，由淺入深，以圖庫、看板等不同檢視方式，以及資料庫按鈕，讓用戶可以一鍵可轉跳至有興趣區塊，同時透過不同角度去接觸動畫，找到自己在動漫中喜歡的位置。

二、Notion 作品展示

作品名：花落時再見｜寫出動漫裡的人性

Before
After

三、系統製作與迭代過程

主題思考階段

微網站的目的：

  • 為自己：我喜歡動漫，從中獲得很多樂趣和啟發，因此想推廣所愛、獲得讀者認同
  • 主要是給誰看的：這次為網站的受眾是「動漫迷，而且是喜歡進一步了解動畫裡的故事、讓動漫融入生活，希望從中得到啟發或動力的動漫迷」

微網站的用途：

  • 滿足想要進一步從動漫中獲得啟發的人→提供動畫評論，帶給讀者更多觀點，不只是流於表面的迷因或精華片段
  • 不知道有什麼動畫好看的人→提供動畫清單，沿用一句話心得讓讀者快速判斷是否要去追
  • 想買周邊但完全沒概念的人→提供周邊實拍、一句收藏心得等幫助讀者判斷怎樣的周邊適合自己

微網站的理念：

動漫迷給人的刻板印象是膚淺、幼稚，目前常見的動漫推廣形式多半以「動畫片段截錄精華、迷因梗圖」為主流，但我覺得很可惜，明明製作動畫本身是一門技藝，故事更是作家、漫畫家等創作者的心血，只聚焦在表面，真的很可惜。

所以，我想要透過文字寫下動漫裡的好與不好、善與惡，觀念與反思，讓所有喜歡動漫的人，可以體驗到動畫和故事裡更多的樂趣。

可能會有人覺得這種想法很無聊，不過就是個動漫何必這麼認真，但對我來說當你有多認真看待一向興趣，就越有機會從中獲得獨特的體驗，畢竟興趣本身就是目的。

希望讓別人感受到的特色：

  1. 希望能讓喜歡動漫的人，可以靜下心來專注在動畫與作品本身，透過文字沉穩的力量，去看過一句話心得，勾起想要親自去看動畫的想法。
  2. 同時，也能看看我所寫下的文章，進一步思考為什麼好看？好看在哪裡？為什麼這段台詞讓我激動不已。
  3. 最後，當然也要回歸動漫的本質「娛樂消遣」，不同種形式的周邊不僅可能成為你的個人特色，也或許是你更深入喜歡作品和角色的契機。

草稿階段

針對不同裝置設計了【電腦版】及【手機板】。

觀看【電腦版】頁面的人，理想中的閱讀／使用流程：

這次選擇的是「F 型視覺動線」

  1. 原則上用戶第一眼會先看見最上方的「三大痛點」
  2. 接著會看往左側邊欄的「✦ 關於花落時再見」，底下已經放置好本站三大區塊的簡介＋按鈕，用戶有興趣可以直接點擊
  3. 途中對中間欄位有興趣時，也可以往「✦ 動畫清單」看過去，下一步會希望用戶看完動畫清單的圖庫後，順勢看往右側邊欄的「✦ 關於版主」
  4. 順著關於版主的欄位往下看之後，會再看見「✦ 動畫清單」和「✦ 動畫評論」，大致結束該微網站的旅程
  5. 最底下的本站資訊與相關聲明，因為並非主要目的，是針對因為三大版塊的內容感興趣的對象而寫，所以沒看到也沒關係

觀看【手機版】頁面的人，理想中的閱讀／使用流程是？

手機版一樣是選擇「F 型視覺動線」，考量到手機的版面是直式為主，所以與電腦版相比，在設計上都會盡量將文字以長型、窄的方向去規劃。

  1. 用戶第一眼會先看見最上方的「三大痛點」
  2. 接著繼續往下滑，會看見「✦ 關於花落時再見」，這裡沿用了電腦版本站三大區塊的簡介＋按鈕的配置，用戶若對文字介紹感興趣可以直接點擊前往，不用再繼續往下滑才能看見內容，可以避免耐心消磨跳出
  3. 再來與電腦版不同，在這裡先放置了快速前往「動畫評論」、「動畫周邊」和「關於版主」的連結，不僅可以讓用戶知道還有哪些內容，與能避免用戶失去耐心而跳出
  4. 然後才是「✦ 動畫清單」、「關於版主」、「動畫評論」和「動畫周邊」的版塊
  5. 滑到動畫周邊底部時，同樣有設置快速轉跳至「網站頂部」、「動畫清單」和「動畫清單」的連結
  6. 最後的本站資訊沿用電腦版設計

實踐之後的迭代優化（Before & After）

  1. 微網站目前有「無 Notion 帳號者無法點擊按鈕進入對應網站」的問題
    1. →因此額外新增指引，讓用戶依自身狀況點選。
  2. 手機板最上方的三大痛點區塊有字體不會自動斷行及字數過長影響排版的問題
    1. 因此將原本用方程式呈現的標題，改為一般字體加粗
    2. 底下三大痛點縮短字數
  3. 手機版在滑動「『動畫清單』區塊時過長，可能導致用戶失去耐心而跳出，錯過底下區塊」
    1. 因此從「圖庫」的檢視方式改為橫向滑動的「看板」，用戶可以快速滑過，不需要全部滑完才能看見底下的區塊
  4. 動畫清單的資料庫點擊進去後，會跳到動畫清單的入口頁，較難跳回微網站的主頁
    1. 因此在動畫清單的入口頁，加入回到微網站主頁的快捷鍵
  5. 左側邊欄的「關於花落時再見」底下區塊字數過多，視覺上過擁擠
    1. 所以將網站及版主拆分到左右的側邊欄，並基於 F 型視覺動線的先後順序，將比較重要的網站介紹放在左側邊欄，希望用戶可以先從網站內容認識起
  6. 雖然用 H 標籤很顯眼，但為了避免目錄出現不重要的標題，而修改呈現方式
    1. 關於網站運用了標示＋按鈕＋方程式，避免使用 H 標籤讓文字出現在目錄，但又能保持一眼看見的吸睛設計

四、Notion 訓練營學習心得分享

想當初報名時還覺得 40 天好漫長，沒想到一下子就要過完了。

先從結論說起，訓練營最大的收穫是「對於怎麼設計適合自己的系統」這件事情上，終於有點頭緒了，我一直都是先做再說＋規劃半天死不行動的極端性格，在此之前都把資料搞得又亂又雜，每天都浪費很多時間。

這次報名的主要目標，說實話並不是學會怎麼活用 Notion，而是找到自己的工作流程，隨著每週直播課和寫作業的過程，很神奇的！居然真的漸漸地建立起工作流程的輪廓。

也讓我意識到過往的錯誤，「我不應該是把個人『套入』模板」，而是要讓 Notion 來輔助我的工作，所以大前提是我要先確立個人的工作流，再針對模板進行個人化（＝建立個人系統）。

現階段說用得十分順手是騙人的，可與我四十天前相比，已經有明確的方向，實際應用如何就等我真正上手時再來分享吧。

其次是每週作業的「設計思路」，這件事所帶來的收穫遠超乎我想像，因為前兩週我其實沒有特別在乎。（抱歉雷蒙）

雖說工作上寫作時我會跟著寫作指引，也會規劃大綱，但⋯⋯現在想想才注意到，面對其他事務時，我的思考向來都習慣在腦袋裡，不會特地寫下來，更別說跟著什麼框架循序漸進地將思考脈絡記錄下來。

而當我乖乖地跟著作業要求寫下思路，連續五個禮拜後，我很清楚地發現「地圖」越來越清晰，做事的地圖、執行專案的地圖、往目標邁進的地圖⋯⋯這些本來被濃霧壟罩的高山，本來是難以想像如何達成的願景，在此時也終於能看見──

我可以做到，只要繼續這樣前進，就可以做到。

第三項收穫是「同學們的作業」，訓練營講求網狀學習，雖然我完全是錯誤示範，從頭潛水到尾⋯⋯但讓我解釋一下，這真的是我做事習慣和性格所致，我傾向自己做完、自己快樂，有人提問我會很開心地回答，可就是不會主動去哈囉，我沒有獨自排擠各位！！（夠了）

言歸正傳，我在寫作業或設計私下個人系統卡關時，會去看看同學作業的思路，每個人的思考邏輯各不相同、獨一無二，有些很跳躍、很活潑，也有脈絡明確、嚴謹專注，常常帶給我新的想像與視野，想在這偷偷地謝謝各位同學。

期待有更多同好跟我一起追番，也感謝這次訓練營造就的緣分，希望每個人都能往自己理想的生活邁進。ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

五、喜歡動漫的你，歡迎來花落時再見跟我一起把動漫融入生活吧！

如果你也不知道追什麼番、想看更多動畫心得或是週邊開箱，歡迎到以下平台跟我一起追番！(๑•̀ㅂ•́)و✧

📍 本文由 Notion 線上實戰訓練營 學員的作品投稿

感謝同學們在這 40 天的陪伴式教學中，用行動力產出這些優質的 Notion 作品，並分享自己在課程中的收穫！

我們會繼續收集、整理同學們優秀作品和應用到這專欄，同時也歡迎認真學習的你，也和更多人分享你的成果、作業思路和改變故事，讓你透過這輸出練習，更瞭解自己、熟練工具，還能讓需要的人因為你的分享而被點亮。

👇🏼 最完整的中文 Notion 教學服務點此瞭解，與 12,000 多名各行各業的同學一起精進自己！

06c43261-8f2b-4181-9695-519e9f20ff0a.png

分享這篇文章