黑洞創造創意總監：古健樺

本次講師之一 － 黑洞創造創意總監、零維空間創辦人以及政治大學 3D 遊戲程式兼任講師 － 古健樺，從資工科系相關背景，進入到網頁設計專業，並在接觸到 Unity 後對互動設計領域十分感興趣，因此從工程師的角色轉換到目前專注於介面設計，讓網頁設計專案執行時除了注重流程外，也會更重視介面細節。

古健樺總監觀察到，現今在網頁頁面設計流程中，設計師端與工程師端，時常會對於相同問題點，因理解角度不同而討論，但其實最源頭的執行方向本就有所差異。如何面對這樣的問題呢？古健樺總監認為，可能是設計師方要多一分在程式語言上的能力，又或是工程師在原有的程式語言能力加上些許設計概念，才能有效加速流程的進行。

執行專案介紹

古健樺總監認為，原有的程式語言能力加上多項平台或遊戲引擎的開發學習，強調必須要善用資源的運用，並且更專注在創意流程的設計或是更艱難的技術上，才是未來網頁互動設計的趨勢。在政大遊戲程式教學課程擔任兼任講師時，跨領域或是從零基礎開始的學員有時候會因為不同理解角度而迸發出更多的創意。古總監也在課程中帶領學員進行黑客松，藉此勾引出對程式的興趣而去嘗試學習更多不同的程式語言。

而 黑洞創造 ，主打以美感與設計製作出具有豐富視覺的科技服務，創辦初衷希望能傳遞「勇敢突破、創造力、喜愛接觸新科技」的品牌形象，也因此產出的作品具有極高的視覺吸引力。業務內容包含特效網站、互動科技以及虛擬展場。

以下為黑洞創造執行專案的介紹：

JPG 擊樂實驗室 – 朱宗慶打擊樂團合作

互動裝置設定在當樂手敲擊時，下方投影就會出現相對應的效果，或是將果物與聲音裝置串起，形成另一種趣味。

台北市電腦商業同業公會製作 – 技能競賽線上展

除了展現線上展覽趨勢外，此專案裡七十幾項職類競賽，在兩個月的時間內完成 3D 圖片展示，攤位也皆可以使用滑鼠旋轉，讓整體呈現更富有趣味性。

金赫獎成果展

在展間裡，除了作品欣賞外，觀者還可以進行投票。另外，在展間的整體規劃上，光影以及客戶端的視覺重點 logo 也是可以多加注意的小重點。

大溪大禧

與衍序規劃設計合作之專案。將地方和相關民俗活動盛事做結合，從抽籤、繞境和煙火等等，都做出精美的互動。例如，觀眾在繞境時，可以先選擇不同角色進行活動，在隊伍中，個神將的順序也都參照民俗規範。每個不同的停駐位置都有不同的變化出現，這樣的 CUE 點在互動展場製作中，也讓使用者印象深刻的小技巧。

品牌諮詢公司 Distractions! 網站

互動設計上，介面的動態效果呈現都必定會經過多重修改，此份專案上可以注意到網頁中的球形在行進的狀態，除了拖拉外，還有在放掉球形時，會有動畫式的反彈。

兩廳院合作專案：神不在的小鎮 線上 串聯兩廳院活動，進行與劇本有相連結的線上互動網站

網頁主要強調 2D、3D 及 4D 的呈現，本次專案中黑洞設計主要負責2D 的進行。合作專案本身是一部沉浸式劇場的表演，此網頁主要是以劇情前導部分製作，因此內容詳盡，讓沒有機會前去現場的觀眾，也可以藉由線上展覽了解劇情。特色方面，一樣可以選擇角色，主要畫面以 Pixel 風格完成。

Ladybug 線上策展

此專案以串聯女性設計師為概念的計畫，畫面視覺風格上，想傳達「數量多」的概念，因此使用類似桌面風格，在桌面上多個資料夾，以及文件點開後只會不斷重複堆疊的效果。

品木宣言專案

品木宣言在以線上方式進行直播時，使用 Unity 打造的展間進行展示。在這專案中，強調的是互動網頁設計在串接上的學習重要性。

NEWYELLOW紐耶羅 NFT藝術展

此專案是黑洞創造第一個以虛擬畫作進行展覽的線上展間，使用線上展間進行 NFT 的呈現有一項最大優點，就是使用像是 Javascript 或是 p5.js 呈現的畫作，可以將其作品 3D 的動態效果直接呈現，線上瀏覽動態作品，所以不會是單純以平面的方式展示。

Art Taipei 台北藝術博覽會

展場上，將畫作連結賣場以利買賣，像是在第一天就將七幅畫作以 RNFT 的方式銷售出，購買之後在現下進行兌換。但也因為是多家藝廊合辦，所以針對鏡頭位置的規劃也是當初調整許久的部分。

羅芙奧線上拍賣｜無設限：NFT 專場

羅芙奧為藝術集團，本次合作是為進行 NFT 交易買賣 NFT 拍賣虛擬展，希望帶給藏家們如同在實體展場中觀賞 NFT 收藏，大破既有的規則框架，沉浸在欣賞當中。

從 Web 到 Web3 的數位流程

從數位化 Web 到 數位轉型 Web2、Web2.5再到現在的數位登陸 Web3到底各自代表了什麼？

╴數位化：數位典藏列如將文物掃描、聲音以 Mp3 方式錄製作為紀錄，或是原本只本書冊轉換為電子書。
╴數位轉型：將原先數位化加上原有商業模式，融合改變後形成全新的商業模式。
╴數位登陸：以區塊鏈為基礎，從數位轉型前行的過程。

在 Web3 的浪潮下，古總監 2022 年結合 Web3D 技術打造 Web 3.0 的產品 Virsody i.o 。
Virsody i.o 為線上虛擬策展平台，核心概念主打「在前往 Web3 的路上沒有人該被留下」。強調數位的東西需要以數位的方式被展示出，例如 NFT 、多媒體相關物件、3D模型，甚至是 iframe 網頁本身，皆能嵌入。希望大家都能共同無負擔的進入元宇宙，其簡易的編輯和上傳應用，或是 SEO 縮圖與管控展場模型地圖，主要目的是想讓不是 3D 專業的觀眾也能操作使用，能快速達到虛實整合，讓線上與線下展覽相輔相成，從展前預熱、展期互助到最後的展後留存，都是未來在虛擬世界與現實中希望能夠達到的最佳目標。

閱讀完文章後，對於線上展間感興趣嗎？歡迎一同追蹤古健樺總監所開設的 黑洞創造臉書社團 ，或是加入 動畫互動網頁特效入門（JS／CANVAS） 及 互動藝術程式創作入門課程 開始學習互動式網頁應用的基本功吧！還有不要忘了 追蹤老闆 Twitter 和訂閱 老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷！

此篇直播筆記由幫手熊柑協助整理

這篇文章 【互動網頁設計網聚】數位登陸：網站3D特效到虛擬展間 – 黑洞創造創意總監古建樺 最早出現於 Creative Coding TW - 互動程式創作台灣站。

版塊設計總監：李明

李明畢業於實踐大學媒體傳達學系，他從學習動畫接觸到設計，再發展到現在的網頁，是版塊設計的作品多以動畫作為主要呈現風格的原因。他從 2010 年進入產業，至今將近 12 年的時間，於 2015 年時創立版塊設計。目前團隊人數 20 人以上並執行超過 200 個專案。公司目前業務以品牌識別設計和網站設計開發為主，擅長以互動網頁作為載體傳達品牌的精神和資訊。與前面講者稍有不同的是，板塊設計是先由品牌轉換成視覺，再從視覺轉換成設計與互動，達到一個網站所要傳遞的目的與樣貌。

重點專案介紹

高雄流行音樂中心

使用 3D 模型技術將場館呈現在網站上，希望藉此吸引外縣市人參觀當時臺灣第一座流行音樂場館。藉由鏡頭移轉細節，更有置身於場景內的效果。

放視大賞

與三頁文團隊共同執行的2021放視大賞專案，以主視覺做相關設計發想、動態海報視覺乃至於網站等。

臺灣設計研究中心

使用臺灣文化策進研究院計延伸，以曲面方式呈現線上展覽，將展品環繞在視覺當中進行觀看和互動。 （相關報導：【2020 創意內容大會│Re: 眾感未來（Human Touch – A Closer Future）】Taiwan Creative Content Fest）

Politics Design 政治設計

版塊設計的內部專案。團隊對於社會議題抱持著有趣的心態執行，希望能引起大眾對於公共議題的重視。

實踐大學入學服務中心

遊戲橘子 －GAMA 25周年線上展

與前面講者古健樺所分享的 LadyBug 專案概念相似，但呈現方法更加視覺化。

金曲獎GMA29 – 活動網站

多元的客戶類型

除了上述多方面專案外，版塊設計的客戶從捷安特、實踐大學到可不可熟成紅茶官網，跨足多項領域。數位設計裡的規劃、設計與整合，到網站介面設計、前端後端程式開發和品牌視覺設計，還有許多延伸出來如攝影、動態包裝、線上展覽、ARVR、3D 或是品牌識別等等的小細節都是版塊設計執行的項目。

版塊自己的官網又是如何設計的呢？

他們以地圖概念進行設計，從最外層衛星地圖，到街區景象，最後進到電腦螢幕，表達版塊設計整體一條路的概念。

動態 SOP 與專案經驗

網站動態規則，從互動、設計到生成式藝術，要如何轉換成商業價值呢？其實在一般的網站，使用上與網頁可以進行互動的階段非常多，李明總監在這邊將其觀察到的部分進行 A 到 K 的設計規劃，形成規則 SOP。（延伸閱讀：動態特效網站規則 SOP）

從載入動態到離場畫面都是需要注意的點，但如果全部進行對於效能上可能不是這麼平衡，所以李明總監建議著重或是以優先完成在 A、C、D、F、G、H 這六項上為目標，讓網站呈現更有魅力與互動性。

李明也在講座分享中給上圖六個階段提出建議，像是從網頁 Loading 到進入一個完整頁面，這個載入環節的進場動態，不論是以文字或圖像呈現，都能讓網站細節和品牌視覺的延伸感有所加分。進入網站頁面後，第一個主要呈現的即為代表動態。而就版塊設計的作品舉例，大多皆會在代表動態當中呈現具有高強度視覺印象的圖像動畫，像是前面介紹的高雄流行音樂中心或是文策院專案；或是將頁面做移動時的滾動動態，不單單以平面化圖像呈現，而是經由滑鼠滾動，給予不同的反饋，傳達更多的資訊層級；以及使用游標動態傳遞給使用者如主動提醒般的作用。除去以上幾點必要的執行動作，轉場、持續、點擊、離場或是設備等等，以上動態在執行後會使整個網站體驗更加完整。依據不同的客戶、專案性質，甚至是網站使用情境或架構還有自己本身的技術含量，綜合評估後決定需要編輯哪些動態到網站上面。

接下來，李明以自身經營的網站趨勢社團經歷，與觀眾分享網站觀察上的 11 個重點，目的是在提供不同的觀察角度，不論是網站或是任何的設計作品，我們都能使用這 11 個觀點去練習欣賞或是分享給其他人不一樣的觀點。

1. 了解網站在幹嘛？
   網站本身可能是要賣東西？是推廣活動？或者是線上展覽？
2. 主動態是什麼？
   當觀者在關掉網站後，腦中會浮現對網站第一個印象的事物。
3. 動態 SOP 分別是什麼？
   11 個不同的網站動態規則 SOP 是如何執行的呢？
4. 可能採用什麼技術？
   從動態到整體設計是以什麼技術去執行，並且更進一步思考，這份技術本身可以被使用在何項專案上。
5. 版面切版方式？
   觀察切版目前是否還有再創新的設計
6. 網站突破點？
   例如：一般在執行文章頁面上下篇轉換時，以直接轉換最為常見。但，當你在換期間的三秒內，跳出具有解釋下篇涵義的圖片時，這就呈現了其網站的突破點。
7. 品牌延伸到網站的設計元素
   不只動態技術，設計的含量也要加入思考。如何藉由網站持續傳遞品牌特質，可能是使用具標誌性的圖片，或是顏色上是否只使用了品牌主色，輔助色上面的配比又是如何呢？
8. 缺點是什麼？
   將缺點提出來，並加以思考如果是自己本身在執行此專案的話，會如何修正缺點。
9. 手機版做得如何？
   現代人在手機上面的使用遠遠大於電腦，因此手機版面設計顯得比以往更加重要。一般可能就會以資訊傳遞為主，但某些網站能將電腦版網站無痛轉移至手機版，此類的範例即可以馬上思考學習。
10. 聯想到什麼設計作品？
    在專案與專案間發現類似或是元素擷取的部分，這樣的聯想與記憶幫助了腦中資料庫的建立。
11. 如果是我來做的話會怎麼做？
    在閱覽完一個專案後，不妨開始思考如過是自己設計將會如何執行。

參考案例介紹

一開始進入網頁時，發現中間透明棋子會隨著滑鼠滾動而改變，誤以為中間的透明反光也會跟著變化，後來發現中間棋子只是單純的圖像呈現。這樣翻轉概念的設計和切版有許多跟平常不同的地方，連手機版也是無痛轉移。嘗試套入上述 11 點做自我問答，那這份專案如果是自己執行的話，有哪部分認為能再改進呢？棋子是否能轉換成其他方式的動態，或是能不能再更進一步的資訊分層？

一進入網站，在眼前呈現的便引人思考，它是如何設計出如此動畫卡通的風格呢？3D 地球上的點按動態是如何執行的呢？如此的進行探討練習，對於設計也將有一定幫助。

版塊設計專案介紹與執行流程分享

可不可熟成紅茶

可不可熟成紅茶在視覺傳達的全面性非常完整，網站動態以簡單的弧形視差效果呈現。整體專案從網站想要呈現的目的、品牌名背後呈現概念了解、理解客戶需求以及運用客戶品牌現有資源，為最一開始所需要知道的資訊。可不可熟成紅茶的特色之一為全台不同店家擁有不同的專屬店卡，店卡的設計特色以版畫和復古為主。「將世界各地的好茶，飄洋過海傳遞給你。」是品牌想要強調的核心概念，結合上述品牌特點，與客戶品牌設計師共同構想了網站主視覺的運茶船。

專案流程如下：運用品牌現有的資源、理解網站想要達成的目標，透過 CIS 的 MI（Mind Identity 概念）、 VI（Visual Identity 視覺）、 BI（Behavior Identity 操作）去思考問題。客戶在 MI 上想強調手搖杯精緻化、 VI 將品牌形象延續與獨樹一格的風範、 BI 能以易用性為主，接下來，為列出專案關鍵字。 Cutty Shark 、冒險、手搖杯、水面、側視和茶等等組成設計發想來源，而實際的設計圖像也看得出此類小巧思，像是網站主視覺其實是浮在手搖杯水面的船，希望這艘運茶船能夠乘風破浪將茶運給你喝。再來是主件、顏色與字體設定，以及綜合上述來完成整體樣貌。整體規劃流程以及經由觀察角度可以發現，設計一個網站的動態不需要每一步都完整做到也可以極具吸引力，只要將想法完整呈現、氛圍適度掌握，思考如何才是對此份專案最有利的規劃，就能形成一個好的成果。

遊戲橘子 －GAMA 25周年線上展

遊戲橘子在2020年的合作專案，進行25週年線上展覽，回顧遊戲橘子經歷的歲月與不同遊戲的開發。也因此呈現上，埋設了許多以 Windows95 的特殊視窗操作，加上結合品牌與小遊戲的巧思。流程與上個專案雷同，顏色、字型到轉換遊戲橘子本身自有的 Icon， 與設計了許多彩蛋在網站體驗上，使整體更加活潑也貼近品牌舉行此線上展覽的目的。

高雄流行音樂中心官方網站

在高雄流行藝術中心專案中，使用到 JL Design 品牌設計，發想各項 Icon 與進行3D 場館建置。

高雄流行音樂中心官方網站

整體以「港灣」為發想來源，像是首頁的進場動態就結合滑鼠按壓的時間長度與加速音波的呈現，或是除了首頁外，活動快訊等頁面也加進波型及小泡泡等小彩蛋。希望藉由這些細節，讓觀者在體驗上能感受到更多高雄流行音樂中心想要傳達的概念。

TDRI 台灣設計研究院網站專案

專案中，主要使用滾動動態與持續動態進行，以台灣設計研究院 Logo 裡的兩顆眼睛進行網站貫穿。根據品牌形象、點線圖片以及想要傳遞的政策想法做設計延伸，主要強調台灣過去與現在的政策是如何對接國外及擴散。在單頁式的網站中，也隱藏許多體驗性小彩蛋，使用滾動動態和數位體驗行為營造趣味性。

Politics Design 政治設計

此為公司內部自行設計之專案，目的為蒐集台灣至今，與選舉相關的設計並希望引起民眾對選舉的注意。將原本的問卷調查型式轉換成類聊天室的互動，版塊丟出問題，兩位候選人政見描述以及互動者的回答，讓互動者在做完問答之後可以實際體會到，自己期望的理念與欲投的候選人是否相同。

網站趨勢

網站趨勢 WebCRACK 是李明總監經營的社團，主要分享現今網站趨勢，以及網站上的設計和技術分享，近期也有新手網頁設計師友善的圖文教學。最後，如果對網站設計有興趣並想增進能力的同學，講師在 HaHow 也有開設課程，深入了解如何將品牌轉換成網站、設計師與工程師之間的溝通、動態回推設計以及諸多動態與網站結合的教學。

閱讀完文章後，對於互動式網頁感興趣嗎？歡迎一同追蹤李明總監所開設的網站趨勢社團，或是加入動畫互動網頁特效入門（JS／CANVAS）及互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷！

此篇直播筆記由幫手熊柑協助整理

這篇文章 【互動網頁設計網聚】版塊的線上建築－版塊設計總監李明 最早出現於 Creative Coding TW - 互動程式創作台灣站。