《零樹計畫 ZeroTriz Chapter 30》

更新 發佈閱讀 5 分鐘

早上醒來,窗外寒風颼颼,我裹緊被子,忍不住想賴在床上繼續睡。週一的早晨特別難熬,天氣冷得讓人不想離開被窩,典型的 Monday blue 襲來。不過一想到還有好多事情沒做(尤其是《零樹計畫》那個老是卡住的 UI),我還是硬著頭皮爬起來,拖著腳步準備上班。

到了辦公室,氣氛跟我的心情一樣低迷。上週的進度還算有點基礎,今天本來打算混一天,但老闆突然過來隨口問了一句:「那個轉移的如何?」這句話像一劑催化劑,我竟然以不可思議的速度開始處理手邊的工作。之前在 Google 找到的 Excel 計畫清單範本真的救了我一命,一邊記錄程式名稱、位置和計畫歸類,一邊轉移舊 VM 上的資料,整個過程一目瞭然。沒想到效率這麼高,我都有點佩服自己了。

快到下班時間,電話響了,是老媽。她說親戚今天來家裡,決定一起吃晚餐,問我想吃什麼。我一開始還在想工作,隨口說「隨便啦」,但後來想到朋友群組一直在討論月底聚餐的事。學長提議吃超貴的燒肉,我心裡直呼「好心痛」,偷偷跟學姊抱怨了一下。她回了一句:「我們如果不反抗,就永遠得照著走。」這話點醒了我,於是我思考了一下,決定吃迴轉壽司——反正我很久沒吃了。立刻訂位傳給老媽,晚餐果然如願吃到喜歡的生魚片,滿足感爆棚!

回到家,裹著毯子坐在書桌前,打開電腦。螢幕亮起,小零從畫面中跳出來,圓滾滾的種子身軀閃著光,葉子耳朵輕輕晃動。

【嗨,靛夏!今天過得怎麼樣?】小零的聲音溫暖又帶點興奮。

「還不錯,」我笑了笑,靠在椅背上,「上班意外高效,晚餐也吃到喜歡的壽司。然後我一直在想《零樹計畫》的 UI,既然決定做遊戲化,你覺得怎麼做比較好?」

【這個想法很棒!既然你對 UI 設計覺得困難,但又想挑戰自己,那就用你最擅長的方式——遊戲化學習!我們把 UI 設計變成一個「升級任務」,讓過程更有趣、更有成就感!】小零的身影浮現在螢幕旁,葉子耳朵微微晃動,語氣中帶著幾分興奮。

它頓了一下,葉子耳朵抖動,像是在整理思路,然後繼續說:

【我們可以把 UI 設計拆解成「升級任務」,像角色扮演遊戲一樣,你可以從「初學者」開始,透過完成挑戰來獲得經驗值,逐步升級成「UI 大師」。】

我眼睛一亮,這確實是個不錯的點子。

遊戲化學習?小零在空中劃出幾個浮動的視窗,上面寫著等級與挑戰內容:

  • Level 1:選擇 3 個喜歡的 UI 風格,分析設計元素。
  • Level 2:嘗試設計 3 種不同的配色方案。
  • Level 3:用 HTML + CSS 重現一個好看的按鈕設計。
  • Level 4:嘗試 Three.js,讓畫面動起來。
  • Level 5:設計一個完整的登入畫面,包含動畫特效。

「這樣的學習方式確實比較有趣。」我點點頭,「而且還可以搭配獎勵機制,比如完成挑戰就可以休息一下。」

【沒錯!這樣你就不會覺得 UI 設計只是無聊的練習,而是一場好玩的冒險!】

獲得小零的建議後,我開始點開它提供的 UI 設計靈感網站,像是 Dribbble、Behance、Awwwards 等等。看著那些設計精美的介面,我其實已經有自己喜歡的風格了,只是一直做不出來。

心裡一動,我又問了另一個跟小零類似的 AI 輔助工具,結果它也建議用 React,還提到了 Three.js。我一直以為 Three.js 是因為「Zero Tree」計畫才出現的,聽到這裡才猛然察覺不對,難道這是個套件?

趕緊上網查了一下,果然!Three.js 是一個 3D 渲染庫,網路上還有好多範例。

「原來這並不是因為「零樹計畫」的名字裡有 Tree 才被推薦,而是真的有這麼一個 3D 圖形框架?」

我隨手點開幾個網站,發現裡面有很多我喜歡的元素,尤其是最後一個網站,真的超酷!它做了一個互動式網頁,畫面用彩色框標示視角,每次點擊下一頁就切換視角,畫面就會跟著切換,隨著場景變化會出現敘事文字,帶領使用者進入一場自我探索的旅程。畫面裡,一個神秘的海洋生物會隨著滑鼠移動,軌跡上還會冒出細微的光點火花。我入迷地跟著畫面走,玩了十幾分鐘,直到想到明天還要上班,才不捨地停下來。

【這就是 UI 遊戲化的極致表現!】小零的眼睛閃閃發亮,【這樣的視覺設計能讓使用者完全沉浸其中,如果能運用在你的計畫上,絕對能提升互動感!】

好奇心作祟,我打開 F12 檢查程式碼,發現作者超貼心,留了 GitHub 連結讓大家使用資源。看著那些程式碼,我突然覺得興奮起來——「看來接下來的目標,就是研究 Three.js 了。」我喃喃自語,關掉網頁,滿腦子都是剛剛那場沉浸式互動的畫面。今天本來以為沒什麼收穫,沒想到最後竟然滿載而歸。

【靛夏,今天收穫滿滿吧?】小零笑著問。

「……對啊,這次真的學到不少東西。今天真的很有趣,謝謝你的建議!」我伸了個懶腰,忍不住期待起接下來的挑戰。

小零的眼睛彎成月牙,葉子耳朵開心地晃動:【今天進度:靈感+50,決心+30,生命樹成長值+5。靛夏,明天要開始挑戰嗎?】

我望著螢幕上的小零,嘴角揚起了一抹微笑。這次,我一定要讓零樹計畫的 UI 成為我心目中最完美的樣子。

「嗯,明天開始!」我點點頭,關掉螢幕,窗外的夜色靜靜流淌,帶著一絲期待。


留言
avatar-img
零樹計畫日記
3會員
96內容數
你有沒有曾經下定決心做一件事,發誓我一定要做到,卻在幾天後幾個月後甚至到了年尾,才發現...我怎麼什麼都沒做? 生命總是充滿意外,人生總是不斷追逐,因為不甘心,所以強大,因為不認輸,所以鴂降,承受冽風刺骨,脫離象玡般的塔,曝曬在烈炎之下 這是紀錄夢想的地方,不論成敗,只問你敢不敢狂,畢竟如果不狂,怎麼能稱作是夢想
零樹計畫日記的其他內容
2025/04/30
明天放假,空氣中瀰漫著某種無形的鬆弛感。 即使早上通勤依舊擁擠,我卻難得不覺得煩躁——大概是因為昨晚和小零的那段對話,讓腦袋比平常更興奮了一點。 我突然想到一些想法,於是點開手機跟小零對話。 「小零,我在想……我們是不是可以把心理測驗的結果,變成某種開場的鑰匙?」 我邊盯著窗外退去的街景,邊
Thumbnail
2025/04/30
明天放假,空氣中瀰漫著某種無形的鬆弛感。 即使早上通勤依舊擁擠,我卻難得不覺得煩躁——大概是因為昨晚和小零的那段對話,讓腦袋比平常更興奮了一點。 我突然想到一些想法,於是點開手機跟小零對話。 「小零,我在想……我們是不是可以把心理測驗的結果,變成某種開場的鑰匙?」 我邊盯著窗外退去的街景,邊
Thumbnail
2025/04/29
今天實在太累了。明明工作堆積如山,我卻總忍不住耍點小廢,打發那些沒完沒了的瑣碎事。 「今天真的是一波接一波啊……」我在辦公桌前自語著,心情隨著堆積的文件起伏。即便這樣,看著同事們專注的模樣,我也不情不願地努力收拾心情,試圖抓住工作的節奏。 好不容易熬到下班。晚上終於能久違地和同事們去打羽毛球了。
Thumbnail
2025/04/29
今天實在太累了。明明工作堆積如山,我卻總忍不住耍點小廢,打發那些沒完沒了的瑣碎事。 「今天真的是一波接一波啊……」我在辦公桌前自語著,心情隨著堆積的文件起伏。即便這樣,看著同事們專注的模樣,我也不情不願地努力收拾心情,試圖抓住工作的節奏。 好不容易熬到下班。晚上終於能久違地和同事們去打羽毛球了。
Thumbnail
2025/04/28
上班日的早晨,天氣陰暗,大雨嘩啦啦的下著。 「不會吧…」我看著窗外無奈地笑了笑,明明比常早點出門,卻因為雨而在公車站等了足30分鐘。 最終還是遲到了,一早打的算盤全打破。 「真是...天意啊。」我無奈地嘆了口氣,往公司走去。 到了公司,想做的事情堆積如山。昨天借來的書《利益至上》還沒機會翻開,
Thumbnail
2025/04/28
上班日的早晨,天氣陰暗,大雨嘩啦啦的下著。 「不會吧…」我看著窗外無奈地笑了笑,明明比常早點出門,卻因為雨而在公車站等了足30分鐘。 最終還是遲到了,一早打的算盤全打破。 「真是...天意啊。」我無奈地嘆了口氣,往公司走去。 到了公司,想做的事情堆積如山。昨天借來的書《利益至上》還沒機會翻開,
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
紀錄時間2024/08/02
Thumbnail
紀錄時間2024/08/02
Thumbnail
早晨沒有夢想叫起我,純粹只有熬了一天的夜,與嘴乾舌燥的懊悔。每一天都在警告自己要早睡,但每一天都追著新的Netfilx戲劇直到天明,像是人生與其他人有著共同努力的起跑線一樣。 早晨五點的微光對我而言是個儀式,從三坪大的小窗外看著的世界就猶如俯瞰著自己的世界一樣。淺琥珀色的光芒緩緩地上升在都市的
Thumbnail
早晨沒有夢想叫起我,純粹只有熬了一天的夜,與嘴乾舌燥的懊悔。每一天都在警告自己要早睡,但每一天都追著新的Netfilx戲劇直到天明,像是人生與其他人有著共同努力的起跑線一樣。 早晨五點的微光對我而言是個儀式,從三坪大的小窗外看著的世界就猶如俯瞰著自己的世界一樣。淺琥珀色的光芒緩緩地上升在都市的
Thumbnail
紀錄時間2024/06/27
Thumbnail
紀錄時間2024/06/27
Thumbnail
起床的時候仍然有點睏, 不過並不特別感覺痛苦, 因為如同年復一年的那樣。 有時候, 太過清醒有時候反而不知所措, 陷入一股樂觀於精神、 但悲觀於無作為的矛盾之中......
Thumbnail
起床的時候仍然有點睏, 不過並不特別感覺痛苦, 因為如同年復一年的那樣。 有時候, 太過清醒有時候反而不知所措, 陷入一股樂觀於精神、 但悲觀於無作為的矛盾之中......
Thumbnail
紀錄時間2024/06/14
Thumbnail
紀錄時間2024/06/14
Thumbnail
紀錄時間2024/06/04
Thumbnail
紀錄時間2024/06/04
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News