浮空島：這個網站

設計概念

樹就像一張知識網，枝葉茂密；好奇心則像滿天的星星。每當我真的動手做出一樣東西，星星就會聚在一起，就如同把樹上不同的知識連結起來，變成機械手臂，變成一本書。星星對我還有另一層意義，來自一個重要的人：我就像天上的星星一樣，閃爍著。

黑底與星光

網站以黑色為底，搭配紫色與琥珀色，讓整個畫面像一座黑色舞台。粒子的顏色則是我自己挑的：這裡的形狀是會閃爍的星星和圓點，想襯托出粒子的視覺感，於是選了能搭配夜空的色調，有白、靛藍、翡翠綠、玫瑰粉和金。原本有一個青色，但那個色號放在整體配色裡不太合適，我主觀上覺得翡翠綠和整體更協調，就換掉了。按鈕滑過時，會有一層更深的紫色從底部往上蓋滿。

四芒星

粒子我想用星星，每一顆都是一顆四芒星。一開始是實心的，但放在背景裡，總覺得質感差了一點，後來改成只留輪廓的線框，看起來輕盈許多。星星之間也藏著連結的寓意：我好奇這個，也好奇那個，看似不相干的好奇，最後都會連在一起，彼此有關聯。首頁那棵大樹，就是由這些四芒星組成的。

粒子造型

樹（自我介紹）：樹冠由六團圓潤的枝葉組成，與浮空島上的樹同出一源。模型以 3D 生成，樹冠沿用網站的主題配色，樹幹則染上純粹的棕色。

星空（宣言）：樹散開，變成滿天的星星。背景的四芒星不會全都一樣：有些繞著一個軸自轉，有些在翻滾。

機械手臂（作品）：機械手臂的夾爪夾著一顆星星。夾爪的顏色刻意和星星不同，才不會搶走星星的光。

浮空島（網站設計）：靈感取自《天空之城》。島上的樹，象徵網站由好奇心萌芽而生；這座懸浮於星空中的島嶼，則是作品與靈感落腳的棲息地。在實作上，模型以 3D 生成，並將樹冠、樹幹、島身等部件拆解上色。

北斗七星（論文）：論文之間都是有連結的，所以星星之間連上線，聚成北斗七星。

書（閱讀）：最後收進一本翻開的書，也就是好奇心的儲思盆。儲思盆是《哈利波特》裡的一個石盆，把記憶放進去，就能隨時回頭再看。書頁下緣彎成弧線，下面填滿，書才不會顯得單薄。

字型

英文的標題用 Archivo，內文用 Newsreader，小標籤用 Geist Mono；中文的標題用 Noto Sans TC，內文用 Noto Serif TC。參考的網站大多只有英文，但這裡還有中文，所以中文的字級和行高另外訂，不和英文共用。中英文的字級至少差 2px 左右，畢竟兩種文字的樣子本來就不一樣。

細節

當初我想過，網站的返回和前往要不要放箭頭，最後決定不放：可以點的地方，都改用顏色變化來提示。畫面裡也沒有塞滿東西，是靠捲動時的視差，讓文字和粒子前後錯開移動，才不會顯得空。導覽列的標誌是一個五點的小星座，載入時旋轉的圖示也是一組正在連線的星座，和論文的北斗七星呼應。

手機

到了手機上，我想讓畫面更簡潔：右上角只留選單按鈕，GitHub 在其他地方都找得到，就不再放一次。三句宣言和桌機一樣，一句一句分開出現，不擠在同一個畫面裡。頁尾也改矮了，排成三行：GitHub 圖示、作品／閱讀／論文、版權。版面在不同寬度之間的切換點，只在真的需要時才調整，調了反而不合適的，就維持原樣。

設計過程

從十月八日到十二日，一共五天。每個段落都先討論、寫成規格，再拆成一步一步的實作步驟，首頁和粒子加起來一共 45 步，留下 147 次 commit。設計方向和每一個選擇由我決定，Agent 負責寫程式；每做完一段，就用自動測試和截圖檢查各種寬度，不對就再調。我不怕慢，比起快，我更在意穩定。

參考資料

1. 版面與動態參考 Dala（Grand Central）
2. 字型：Archivo、Newsreader、Noto Sans TC、Noto Serif TC、Geist Mono，皆採 SIL Open Font License 1.1
3. 機械手臂的粒子造型取樣自 SO-ARM100 模型（TheRobotStudio），Apache License 2.0