《零樹計畫 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
1會員
30內容數
你有沒有曾經下定決心做一件事,發誓我一定要做到,卻在幾天後幾個月後甚至到了年尾,才發現...我怎麼什麼都沒做? 生命總是充滿意外,人生總是不斷追逐,因為不甘心,所以強大,因為不認輸,所以鴂降,承受冽風刺骨,脫離象玡般的塔,曝曬在烈炎之下 這是紀錄夢想的地方,不論成敗,只問你敢不敢狂,畢竟如果不狂,怎麼能稱作是夢想
留言
avatar-img
留言分享你的想法!
零樹計畫日記 的其他內容
《零樹計畫 ZeroTriz Chapter 29》 中午的陽光從窗簾縫隙鑽進來,我揉著眼睛從床上爬起來,瞥了一眼手機——已經12點了。果然又睡過頭了。拖著有點懶散的身子,我走進廚房,簡單煮了一鍋水餃當午餐。水餃在鍋裡咕嘟咕嘟地翻滾,我靠在流理台邊,腦袋還有些迷糊。 吃完水餃,我窩進沙發,順手打
天氣依舊陰沉,窗外的雨滴在玻璃上留下斑駁的痕跡。週末的早晨,我原本計畫早起,但鬧鐘響起的瞬間,手指不自覺地按下了延遲。當我終於從床上爬起來,已經接近中午。 吃著媽媽煮的炒米粉,我邊咀嚼邊思考。這幾天的進度並不算順利,雖然 UI 介面終於有個雛形,但總覺得少了什麼。運動前,我打開電腦盯著那棵「幾何樹
今天是星期五,不知怎麼回事,整個星期感覺渾渾噩噩的,轉眼就到了最後一天的上班日。我坐在辦公室裡,心思有些飛散,但腦海中卻冒出一個聲音——這時候,很適合整理資料。 我翻開先前隨手建立的範本,稍微修改了一下內容,驚喜地發現它竟然能很好地記錄程式運作狀況。昨天才剛跟同事抱怨,待辦事項太多,經常一不小心就
錯誤、修正、再嘗試——這已經成為這幾天的日常。 「小零,這次又是哪裡有問題?」我揉了揉眉心,盯著螢幕上沒有任何變化的進度條,感覺自己像是在跟一棵死樹對話。 【目前的 UI 雖然有按鈕,但進度條沒有正確更新,可能是 state 沒有觸發,或者 event listener 設定錯誤。】小零漂浮在畫
回到家後,我把壽司放到桌上,打開電腦,讓畫面慢慢亮起。小零的身影隨之浮現在螢幕角落,葉片狀的手臂輕輕晃動,像是在等我開口。 【今天有什麼新進展嗎?】 「今天去了一間公司開會,還看到藍牙聽診器,結束後提早下班,結果在公車站變成了活體導航機。」我一邊拆著筷子,一邊無奈地笑道,「大概有四五個人來問路,
「靛夏,你今天跑得跟烏龜一樣慢喔!」球場另一頭傳來同事小陳的喊聲,語氣裡帶著明顯的笑意。我坐在體育館的長椅上,手裡拿著剛纏好握把布的新羽球拍,忍不住回了他一個無奈的笑。 「鞋子太緊啦,跑不動怪我嗎?」我晃了晃腳,那雙特價登山鞋硬邦邦的,早上還傻乎乎地穿了厚襪子,結果大拇指被擠得直抗議。中午跑去買了
《零樹計畫 ZeroTriz Chapter 29》 中午的陽光從窗簾縫隙鑽進來,我揉著眼睛從床上爬起來,瞥了一眼手機——已經12點了。果然又睡過頭了。拖著有點懶散的身子,我走進廚房,簡單煮了一鍋水餃當午餐。水餃在鍋裡咕嘟咕嘟地翻滾,我靠在流理台邊,腦袋還有些迷糊。 吃完水餃,我窩進沙發,順手打
天氣依舊陰沉,窗外的雨滴在玻璃上留下斑駁的痕跡。週末的早晨,我原本計畫早起,但鬧鐘響起的瞬間,手指不自覺地按下了延遲。當我終於從床上爬起來,已經接近中午。 吃著媽媽煮的炒米粉,我邊咀嚼邊思考。這幾天的進度並不算順利,雖然 UI 介面終於有個雛形,但總覺得少了什麼。運動前,我打開電腦盯著那棵「幾何樹
今天是星期五,不知怎麼回事,整個星期感覺渾渾噩噩的,轉眼就到了最後一天的上班日。我坐在辦公室裡,心思有些飛散,但腦海中卻冒出一個聲音——這時候,很適合整理資料。 我翻開先前隨手建立的範本,稍微修改了一下內容,驚喜地發現它竟然能很好地記錄程式運作狀況。昨天才剛跟同事抱怨,待辦事項太多,經常一不小心就
錯誤、修正、再嘗試——這已經成為這幾天的日常。 「小零,這次又是哪裡有問題?」我揉了揉眉心,盯著螢幕上沒有任何變化的進度條,感覺自己像是在跟一棵死樹對話。 【目前的 UI 雖然有按鈕,但進度條沒有正確更新,可能是 state 沒有觸發,或者 event listener 設定錯誤。】小零漂浮在畫
回到家後,我把壽司放到桌上,打開電腦,讓畫面慢慢亮起。小零的身影隨之浮現在螢幕角落,葉片狀的手臂輕輕晃動,像是在等我開口。 【今天有什麼新進展嗎?】 「今天去了一間公司開會,還看到藍牙聽診器,結束後提早下班,結果在公車站變成了活體導航機。」我一邊拆著筷子,一邊無奈地笑道,「大概有四五個人來問路,
「靛夏,你今天跑得跟烏龜一樣慢喔!」球場另一頭傳來同事小陳的喊聲,語氣裡帶著明顯的笑意。我坐在體育館的長椅上,手裡拿著剛纏好握把布的新羽球拍,忍不住回了他一個無奈的笑。 「鞋子太緊啦,跑不動怪我嗎?」我晃了晃腳,那雙特價登山鞋硬邦邦的,早上還傻乎乎地穿了厚襪子,結果大拇指被擠得直抗議。中午跑去買了
你可能也想看
Google News 追蹤
Thumbnail
川普2.0的關稅與貿易政策,表面看似反覆無常,實則圍繞著幾個核心目標:扭轉貿易不公、推動美國再工業化、確保戰略自主,以及貫徹「美國優先」原則。本文深入剖析其背後的一致性邏輯、長期戰略意義,以及對全球產業鏈的影響,並探討不同產業的贏家與輸家。
Thumbnail
早晨沒有夢想叫起我,純粹只有熬了一天的夜,與嘴乾舌燥的懊悔。每一天都在警告自己要早睡,但每一天都追著新的Netfilx戲劇直到天明,像是人生與其他人有著共同努力的起跑線一樣。 早晨五點的微光對我而言是個儀式,從三坪大的小窗外看著的世界就猶如俯瞰著自己的世界一樣。淺琥珀色的光芒緩緩地上升在都市的
Thumbnail
起床的時候仍然有點睏, 不過並不特別感覺痛苦, 因為如同年復一年的那樣。 有時候, 太過清醒有時候反而不知所措, 陷入一股樂觀於精神、 但悲觀於無作為的矛盾之中......
罷了,也改變不了什麼
我真的睡不著,興奮又焦慮的的日子總會失眠,索性起來打個文章。就當是散文紀錄的起始吧!說到為什麼無法入眠…
Thumbnail
昨天還是沒有達到早睡的目標,今早起床也是一早在馬桶上掙扎了很久之後努力的爬了起床,再怎麼想睡或是沒睡好也都起來了。 一早就化好妝地奔向外面,走路經過公園,在長椅上坐下來閉眼冥想5分鐘,呼吸公園清新的空氣,今天的天氣是有點點濕冷的,有一點點小毛毛雨飄下來的樣子,是個沒那麼大太陽的陰天。 冥想結束以
Thumbnail
川普2.0的關稅與貿易政策,表面看似反覆無常,實則圍繞著幾個核心目標:扭轉貿易不公、推動美國再工業化、確保戰略自主,以及貫徹「美國優先」原則。本文深入剖析其背後的一致性邏輯、長期戰略意義,以及對全球產業鏈的影響,並探討不同產業的贏家與輸家。
Thumbnail
早晨沒有夢想叫起我,純粹只有熬了一天的夜,與嘴乾舌燥的懊悔。每一天都在警告自己要早睡,但每一天都追著新的Netfilx戲劇直到天明,像是人生與其他人有著共同努力的起跑線一樣。 早晨五點的微光對我而言是個儀式,從三坪大的小窗外看著的世界就猶如俯瞰著自己的世界一樣。淺琥珀色的光芒緩緩地上升在都市的
Thumbnail
起床的時候仍然有點睏, 不過並不特別感覺痛苦, 因為如同年復一年的那樣。 有時候, 太過清醒有時候反而不知所措, 陷入一股樂觀於精神、 但悲觀於無作為的矛盾之中......
罷了,也改變不了什麼
我真的睡不著,興奮又焦慮的的日子總會失眠,索性起來打個文章。就當是散文紀錄的起始吧!說到為什麼無法入眠…
Thumbnail
昨天還是沒有達到早睡的目標,今早起床也是一早在馬桶上掙扎了很久之後努力的爬了起床,再怎麼想睡或是沒睡好也都起來了。 一早就化好妝地奔向外面,走路經過公園,在長椅上坐下來閉眼冥想5分鐘,呼吸公園清新的空氣,今天的天氣是有點點濕冷的,有一點點小毛毛雨飄下來的樣子,是個沒那麼大太陽的陰天。 冥想結束以