一個分號，連起兩個各自完整、卻彼此相關的句子；《服務聲》第十六期把這個符號變成整本刊物的閱讀結構。
《服務聲》是國立清華大學服務科學研究所的年度電子報。2025 年度的第十六期（VOL.16）以「分號」為主題，在 2026 年 2 月以網頁的形式出版。我負責整體網站的概念、視覺與前端實作，用 React、GSAP ScrollTrigger、Three.js、Matter.js 與 p5.js，把一份年度刊物做成一條可以一路往下讀的互動卷軸。
分號：延續中的轉折
分號在文法上連接兩個獨立卻相關的句子。它不像句號那樣終結，也不像逗號只是短暫換氣，而是一種「延續中的轉折」。我把這個符號轉譯成網站的結構：每一位老師、學長姐，每一篇專訪，都是一個完整的句子；網站把它們並列在一起，讓新的語意在並列之間產生。讀者讀完一篇，不會被送回目錄，而是直接接到下一篇——從第一章到第十一章是同一條連續的卷軸，章節像分號一樣一直延續下去。
從開場走進第一章
網站一打開，黑底上輪播著不同語言、不同領域裡的分號：王勃的「落霞與孤鶩齊飛；秋水共長天一色」、松尾芭蕉的俳句、笛卡兒的「Cogito, ergo sum; Sum, ergo cogito」，甚至是組合語言裡的一行「MOV EAX, 1 ; INT 0x80」。在讀者進入內容之前，分號已經先被放進不同的文化脈絡裡。
接著是封面：左右兩段影片交叉淡入淡出，一枚白色分號把畫面切成兩半，直排英文、「服務聲016期 VOL.16」的期數標籤與 2025 年份構成刊頭。往下捲，編輯序旁有一顆用 Three.js 做的有機形體，貼著同一段影片材質，隨捲動從橢圓變成圓角方形、再變成卡片，視覺化「單獨的句子靠近之後變得更完整」。
形體最後定格成一張毛玻璃卡片，也就是「分號接龍」：卡片上是上一位讀者留下的一句話，並邀請你寫下自己的下一句；你的句子會成為下一位讀者看到的第一句，最後也會出現在封底。我希望「分號連接彼此」不只是一個比喻，而是一段真正跨越時間的讀者互動。
目錄的五個分組各用一個標點符號當代號：「/ 服科的入口 /」、「... 在校服科人 ...」、「@ 服科前輩們 @」、「: 展開專訪 :」與「# 活動現場 #」。右側固定的導覽列就是這五個符號，捲到哪一組就亮哪一個。目錄周圍，由 Matter.js 驅動的圓、十字與方形色塊從天而降、互相碰撞堆疊，材質用的也是同一段影片；接著一道黑色 3D 階梯斜向延伸，讀者沿著它走進第一章。
章節內頁
每一章的封面把大標題壓在校園插畫或受訪者照片上，下方列出採訪、撰文、陪訪名單與 Share 按鈕，並配上一個專屬的 3D 小物件——貝殼、勳章、花瓣、太陽——作為該篇的識別符號。專訪頁右下角固定顯示受訪者所屬的課程模組（IS／BA／SID／SMM），呼應服科所的四大課程模組。閱讀時會有圖片「掉落」進畫面，點擊就能收藏，收集到的元素會集中出現在最後的封底，讓讀完整本刊物變成一趟帶著紀念品的旅程。
章節之間，黑底或白底的粒子場是呼吸的段落。老師篇把每位老師的分享做成堆疊的復古視窗卡片，右下角是低多邊形的 3D 人偶，手裡拿著老師自己選的符號：問號、波浪號、驚嘆號……。年度大事紀用月曆搭配時間軸，整理 2025 年的活動、榮譽與演講。封底以「未完待續」收尾，封面元素回歸，讀者接龍的句子串成一道句子牆。
視覺語言
整本刊物以黑白為主，影片的綠色是唯一的色彩來源：封面、形體的材質與掉落的色塊，用的都是同一段草地與天空的影片，讓網站有一致的「材質感」。版面中英雙語混排，直排英文與橫排中文對照，標題用粗黑體、內文用襯線體，保留紙本期刊的閱讀質感。手機版同樣保留封面影片、序文與接龍互動，導覽列則收合成一列符號。
我的角色
這一期《服務聲》由我和胡育慈、邱筠婷組成編輯團隊，我負責整個網站的概念、視覺設計與前端開發，從把「分號」轉譯成閱讀結構，到每一段互動的實作。我希望這份年度刊物不只是被搬上網頁，而是讓「延續」本身成為閱讀的體驗——讓讀者在延續中閱讀，也在閱讀中留下自己的分號。
