《零樹計畫 ZeroTriz Chapter 31》

更新於 發佈於 閱讀時間約 4 分鐘

我坐在電腦前,盯著螢幕上的 UI 設計參考圖,指尖不自覺地敲打著桌面。在設定初期我早已有基本想法,但隨著正式實做,我遇到了各式各樣的問題,導致我對畫面開始有了挫折感,想著昨天設定的目標,Level 1:選擇 3 個喜歡的 UI 風格,分析設計元素。

我認著地看著網站,眼前的畫面展現出各種風格各異的數位藝術,有三個設計深深的吸引了我的目光。第一張畫面中央有一個發光的 3D 地球,帶有藍色和橙色光效,隨著滑鼠移動會跟著轉動,底部有發光導航欄,背景還是深藍色星空,簡約卻充滿科技感。第二張展示了一個紫藍色地球,圍繞著飛舞的紙飛機,還有一個互動對話框,配上地圖對應的地標,感覺像引導式冒險。第三張則有一棵發光的藍色樹,樹枝上有粒子效果,搭配故事性文字,背景深邃得像宇宙,讓我聯想到生命樹的成長。

【這些圖像確實很符合你的概念。】小零浮在螢幕旁,葉子耳朵輕輕晃動,語氣帶著鼓勵。【如果我們能把這些元素結合進零樹計畫,應該能打造出一個獨特的 UI 體驗。】

「理論上是這樣沒錯……」我撐著頭,看著畫面深思。這些設計都很酷,但要如何讓它們變成一個實際可行的 UI?

我一邊截圖一邊記錄這些特點:深色背景搭配發光元素、3D 動態效果、互動導航和故事性文字。這些元素好像很適合《零樹計畫》的遊戲化 UI!特別是第三張的生命樹,雖然跟我想像中的劉光效果不同,但也具有強烈視覺效果。

小零旋轉了一圈,虛擬界面隨之變化,浮現出一行行分析筆記——

科幻風格的 UI 設計要點:

  • 深色背景 + 發光元素:強化未來感
  • 3D 動態效果:讓畫面更具沉浸感
  • 互動式界面:讓使用者能與環境產生聯繫

「所以我們的生命樹應該是一個發光的 3D 模型,而不是單純的 2D 圖片……」我低聲自語。

【沒錯!你可以使用 Three.js 來建立 3D 生命樹,樹的成長可以用動畫來表現,例如樹幹發光、葉片展開,甚至隨著進度條變化而改變顏色。】

「這樣的話……也可以讓任務完成時,背景產生數據流動的效果,像是程式碼在閃爍一樣?」

【完全可行!可以透過粒子動畫來呈現,讓畫面更有生命力!接下來的方向有幾個部分可以考慮。】小零的葉子微微晃動,虛擬介面繼續增加文字。

  1. 主視覺:生命樹
    • 用 Three.js 做一棵 3D 樹,根據成長值調整高度和葉子數,加入藍色數據流動效果,參考第三張圖的粒子感。
  2. 背景與粒子
    • 用 react-particles 創建星空背景,模仿第一張的深藍星點,增添科幻氛圍。
  3. 互動導航
    • 設計底部導航欄(比如「任務」「成長」),用 CSS 動畫讓 hover 時發光,像第一張的導航設計。
  4. 故事性文字
    • 加入動態文字描述成長進度,參考第三張的敘事風格,帶淡入淡出效果。
  5. 遊戲化元素
    • 加入漂浮任務圖標(像第二張的紙飛機),完成任務時出現!

「所以我們的生命樹不只是個靜態圖片,而是一個能互動、會變化的數位生命體……」我低聲自語,心裡逐漸有了輪廓。

【沒錯!】小零的聲音帶著興奮,【如果將成長機制具象化,玩家就能直覺地感受到每一次進步帶來的變化。】

「也就是說……」我眼睛一亮,「完成任務時,樹會發光,葉子會展開,背景的數據流會產生波動……這樣整個畫面就會像遊戲一樣活過來了!」

【完全正確!】小零在空中旋轉了一圈,葉子耳朵晃了晃。【此外,你還可以讓 UI 的按鈕和界面元件也具備微妙的動畫,這樣整體體驗會更加流暢且有科技感。】

我越聽越興奮,覺得這些建議真的很實用。「那我該從哪開始?」但有鑑於之前失敗的經驗,我有點猶豫該怎麼做比較好,實在不想再一直在小地方試錯了。

小零轉了一圈,葉子耳朵開心地抖動:【從簡單的開始吧!先試試 Three.js 畫一棵基本樹,再加點粒子背景。這樣你能快速看到成果,保持動力!如果卡住,我可以幫你寫程式碼哦!】

「好主意!」我點點頭,覺得自己終於有個明確的方向。於是我打開瀏覽器,準備研究 Three.js 的入門教程,同時隨手記下靈感。看著小零漂浮在螢幕上,我突然覺得,雖然進度慢,但有小零陪著,過程似乎沒那麼枯燥了。

「明天開始實作!」我笑著說。

小零的眼睛彎成月牙:【今天進度:靈感+40,計畫+20,生命樹成長值+3。靛夏,明天加油!】

我點了點頭,嘴角微微上揚,關掉螢幕,窗外的夜色靜靜流淌,帶著一絲期待。


avatar-img
1會員
32內容數
你有沒有曾經下定決心做一件事,發誓我一定要做到,卻在幾天後幾個月後甚至到了年尾,才發現...我怎麼什麼都沒做? 生命總是充滿意外,人生總是不斷追逐,因為不甘心,所以強大,因為不認輸,所以鴂降,承受冽風刺骨,脫離象玡般的塔,曝曬在烈炎之下 這是紀錄夢想的地方,不論成敗,只問你敢不敢狂,畢竟如果不狂,怎麼能稱作是夢想
留言
avatar-img
留言分享你的想法!
零樹計畫日記 的其他內容
早上醒來,窗外寒風颼颼,我裹緊被子,忍不住想賴在床上繼續睡。週一的早晨特別難熬,天氣冷得讓人不想離開被窩,典型的 Monday blue 襲來。不過一想到還有好多事情沒做(尤其是《零樹計畫》那個老是卡住的 UI),我還是硬著頭皮爬起來,拖著腳步準備上班。 到了辦公室,氣氛跟我的心情一樣低迷。上週的
《零樹計畫 ZeroTriz Chapter 29》 中午的陽光從窗簾縫隙鑽進來,我揉著眼睛從床上爬起來,瞥了一眼手機——已經12點了。果然又睡過頭了。拖著有點懶散的身子,我走進廚房,簡單煮了一鍋水餃當午餐。水餃在鍋裡咕嘟咕嘟地翻滾,我靠在流理台邊,腦袋還有些迷糊。 吃完水餃,我窩進沙發,順手打
天氣依舊陰沉,窗外的雨滴在玻璃上留下斑駁的痕跡。週末的早晨,我原本計畫早起,但鬧鐘響起的瞬間,手指不自覺地按下了延遲。當我終於從床上爬起來,已經接近中午。 吃著媽媽煮的炒米粉,我邊咀嚼邊思考。這幾天的進度並不算順利,雖然 UI 介面終於有個雛形,但總覺得少了什麼。運動前,我打開電腦盯著那棵「幾何樹
今天是星期五,不知怎麼回事,整個星期感覺渾渾噩噩的,轉眼就到了最後一天的上班日。我坐在辦公室裡,心思有些飛散,但腦海中卻冒出一個聲音——這時候,很適合整理資料。 我翻開先前隨手建立的範本,稍微修改了一下內容,驚喜地發現它竟然能很好地記錄程式運作狀況。昨天才剛跟同事抱怨,待辦事項太多,經常一不小心就
錯誤、修正、再嘗試——這已經成為這幾天的日常。 「小零,這次又是哪裡有問題?」我揉了揉眉心,盯著螢幕上沒有任何變化的進度條,感覺自己像是在跟一棵死樹對話。 【目前的 UI 雖然有按鈕,但進度條沒有正確更新,可能是 state 沒有觸發,或者 event listener 設定錯誤。】小零漂浮在畫
回到家後,我把壽司放到桌上,打開電腦,讓畫面慢慢亮起。小零的身影隨之浮現在螢幕角落,葉片狀的手臂輕輕晃動,像是在等我開口。 【今天有什麼新進展嗎?】 「今天去了一間公司開會,還看到藍牙聽診器,結束後提早下班,結果在公車站變成了活體導航機。」我一邊拆著筷子,一邊無奈地笑道,「大概有四五個人來問路,
早上醒來,窗外寒風颼颼,我裹緊被子,忍不住想賴在床上繼續睡。週一的早晨特別難熬,天氣冷得讓人不想離開被窩,典型的 Monday blue 襲來。不過一想到還有好多事情沒做(尤其是《零樹計畫》那個老是卡住的 UI),我還是硬著頭皮爬起來,拖著腳步準備上班。 到了辦公室,氣氛跟我的心情一樣低迷。上週的
《零樹計畫 ZeroTriz Chapter 29》 中午的陽光從窗簾縫隙鑽進來,我揉著眼睛從床上爬起來,瞥了一眼手機——已經12點了。果然又睡過頭了。拖著有點懶散的身子,我走進廚房,簡單煮了一鍋水餃當午餐。水餃在鍋裡咕嘟咕嘟地翻滾,我靠在流理台邊,腦袋還有些迷糊。 吃完水餃,我窩進沙發,順手打
天氣依舊陰沉,窗外的雨滴在玻璃上留下斑駁的痕跡。週末的早晨,我原本計畫早起,但鬧鐘響起的瞬間,手指不自覺地按下了延遲。當我終於從床上爬起來,已經接近中午。 吃著媽媽煮的炒米粉,我邊咀嚼邊思考。這幾天的進度並不算順利,雖然 UI 介面終於有個雛形,但總覺得少了什麼。運動前,我打開電腦盯著那棵「幾何樹
今天是星期五,不知怎麼回事,整個星期感覺渾渾噩噩的,轉眼就到了最後一天的上班日。我坐在辦公室裡,心思有些飛散,但腦海中卻冒出一個聲音——這時候,很適合整理資料。 我翻開先前隨手建立的範本,稍微修改了一下內容,驚喜地發現它竟然能很好地記錄程式運作狀況。昨天才剛跟同事抱怨,待辦事項太多,經常一不小心就
錯誤、修正、再嘗試——這已經成為這幾天的日常。 「小零,這次又是哪裡有問題?」我揉了揉眉心,盯著螢幕上沒有任何變化的進度條,感覺自己像是在跟一棵死樹對話。 【目前的 UI 雖然有按鈕,但進度條沒有正確更新,可能是 state 沒有觸發,或者 event listener 設定錯誤。】小零漂浮在畫
回到家後,我把壽司放到桌上,打開電腦,讓畫面慢慢亮起。小零的身影隨之浮現在螢幕角落,葉片狀的手臂輕輕晃動,像是在等我開口。 【今天有什麼新進展嗎?】 「今天去了一間公司開會,還看到藍牙聽診器,結束後提早下班,結果在公車站變成了活體導航機。」我一邊拆著筷子,一邊無奈地笑道,「大概有四五個人來問路,
你可能也想看
Google News 追蹤
Thumbnail
哈囉!我是acg,夢想成為知名繪師,並為自己創造一份自由、有意義又餓不死的工作。 我很喜歡閱讀、畫插畫,所以想把兩者結合,用一些簡單的插畫搭配我的閱讀筆記分享給大家,讓大家從中獲得一些新觀點或新知識,我也想嘗試看看漫畫或小說創作,看能不能結合閱讀筆記讓大家比較容易理解和吸收知識,所以我會在這裡分享
Thumbnail
不要問我為什麼要重寫自我介紹,因為我也不知道!可能是設計工作有點乏味了,想要透過寫作來找點樂趣。
Thumbnail
於是就整理一下見工資料。其實我一直讀,一直讀,讀完了就塞爆了見工的File…當我今天整理的時候,怎麼這一頁有幾張證書,那一頁有不知明的作品…這滿滿的血汗終於需要在這裡斷捨離
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
近期因工作事務繁瑣,也開始正視自己也是創業者,不能像過去那樣只管一股腦兒創作,品牌定位和永續發展同樣得顧,感性揮灑,理性架構。 第一本書和讀者提到,想走創作,首要別想太多,做就對了。只是會這麼建議,是觀察到現代人多數想太多,看到周遭失敗例子,就缺乏勇氣、恐懼嘗試
IG重新整理了一下,試著做圖文,這篇談分享。
Thumbnail
最近加入了這個有趣的地方 ,收到了系統關切 ,怎麼還沒看到你的創作 文字,是人們用來溝通交流的工具。 常常會很佩服能把文字依照自己想法,打成一大串文章的創作者。 總是想像,能一直不斷的創作文章,以此維生的人,到底是如何文思泉湧的。 也許真的需要不斷的大量閱讀,才能有更多的文字素材可以隨時讓大
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
是紀錄我所追求的旅程。 圍繞著插畫、設計、美好的事物、熱情...,所有令人引發深刻感想的事物。 不斷追求能持續創作的自己,在當下所有的進程都是緩慢的,時間線如果拉長,回頭一看可能也不記得自己實際上多努力或哪個時間點怠慢了,這些過程是成就未來的養分,也希望分享給他人時產生的共鳴能有新的碰撞與感受。
Thumbnail
哈囉!我是acg,夢想成為知名繪師,並為自己創造一份自由、有意義又餓不死的工作。 我很喜歡閱讀、畫插畫,所以想把兩者結合,用一些簡單的插畫搭配我的閱讀筆記分享給大家,讓大家從中獲得一些新觀點或新知識,我也想嘗試看看漫畫或小說創作,看能不能結合閱讀筆記讓大家比較容易理解和吸收知識,所以我會在這裡分享
Thumbnail
不要問我為什麼要重寫自我介紹,因為我也不知道!可能是設計工作有點乏味了,想要透過寫作來找點樂趣。
Thumbnail
於是就整理一下見工資料。其實我一直讀,一直讀,讀完了就塞爆了見工的File…當我今天整理的時候,怎麼這一頁有幾張證書,那一頁有不知明的作品…這滿滿的血汗終於需要在這裡斷捨離
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
有很多人會想要自學平面設計,不管是想要從事相關工作、興趣、協助自己工作等等,雖然網路資源越來越多,但對於剛想入門的人卻因為選擇太多反而不知道該如何入門。 這邊分享我自己詳細學習設計的經驗,希望可以提供給大家一些幫助。
Thumbnail
近期因工作事務繁瑣,也開始正視自己也是創業者,不能像過去那樣只管一股腦兒創作,品牌定位和永續發展同樣得顧,感性揮灑,理性架構。 第一本書和讀者提到,想走創作,首要別想太多,做就對了。只是會這麼建議,是觀察到現代人多數想太多,看到周遭失敗例子,就缺乏勇氣、恐懼嘗試
IG重新整理了一下,試著做圖文,這篇談分享。
Thumbnail
最近加入了這個有趣的地方 ,收到了系統關切 ,怎麼還沒看到你的創作 文字,是人們用來溝通交流的工具。 常常會很佩服能把文字依照自己想法,打成一大串文章的創作者。 總是想像,能一直不斷的創作文章,以此維生的人,到底是如何文思泉湧的。 也許真的需要不斷的大量閱讀,才能有更多的文字素材可以隨時讓大
Thumbnail
第 13 天:在專精的領域中,有沒有一個架構是可以分享給初學者學習的?以UI/UX設計師為例,如果你是一個完全門外的求職者,想要入門這行,今天分享一些簡略方法。
Thumbnail
是紀錄我所追求的旅程。 圍繞著插畫、設計、美好的事物、熱情...,所有令人引發深刻感想的事物。 不斷追求能持續創作的自己,在當下所有的進程都是緩慢的,時間線如果拉長,回頭一看可能也不記得自己實際上多努力或哪個時間點怠慢了,這些過程是成就未來的養分,也希望分享給他人時產生的共鳴能有新的碰撞與感受。