《零樹計畫 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
留言分享你的想法!
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
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
雙11購物節準備開跑,蝦皮推出超多優惠,與你分享實際入手的收納好物,包括貨櫃收納箱、真空收納袋、可站立筆袋等,並分享如何利用蝦皮分潤計畫,一邊購物一邊賺取額外收入,讓你買得開心、賺得也開心!
Thumbnail
雙11購物節準備開跑,蝦皮推出超多優惠,與你分享實際入手的收納好物,包括貨櫃收納箱、真空收納袋、可站立筆袋等,並分享如何利用蝦皮分潤計畫,一邊購物一邊賺取額外收入,讓你買得開心、賺得也開心!
Thumbnail
分享個人在新家裝潢後,精選 5 款蝦皮上的實用家居好物,包含客製化層架、MIT 地毯、沙發邊桌、分類垃圾桶及寵物碗架,從尺寸、功能到價格都符合需求,並提供詳細開箱心得與購買建議。
Thumbnail
分享個人在新家裝潢後,精選 5 款蝦皮上的實用家居好物,包含客製化層架、MIT 地毯、沙發邊桌、分類垃圾桶及寵物碗架,從尺寸、功能到價格都符合需求,並提供詳細開箱心得與購買建議。
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
Thumbnail
紀錄時間2024/06/02
Thumbnail
紀錄時間2024/06/02
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News