《卡關・闖關：GAMA25線上展》11月正式上線，一推出便引起話題，打開網站，可愛又復古的點矩陣視覺畫面，帶使用者搭上時光機回到往昔。其網站設計的幕後功臣，正是「版塊設計Block Studio」的創辦人兼設計總監──李明，他為橘子的25歲建構美好舞台，讓線上展成為跨時空的冒險，喚醒記憶，同時可以看見自己、看見有橘子陪伴的過去和現在。
加入不同的元素網站才有機會跳出來
曾操刀金曲29、顏社煮場秀、台灣設計研究院等網站設計，李明的作品早已席捲人們生活。認為網頁設計不只是用來溝通訊息，他大玩創意，在作品裡搞動態、互動，玩設計、資訊傳遞和介面視覺的各種可能。問他哪個成分是構成關鍵？李明笑笑回答，每個元素都很重要，必須依循客戶屬性、需求打造最適合的包裝方式，不過，如何讓作品從網路大海裡跳出來，使它變得更帥、更好玩，是每一次都會為自己下的戰帖。
聊到與Gamania的第一次合作，李明說他和同事都相當興奮，儘管現在忙到沒時間玩遊戲，但國中時期的自己，曾是個不折不扣的「天堂」迷。他觀察到這幾年的橘子不只關注遊戲，更跨足電商、媒體、生活、藝文領域，讓好玩的事不斷發生，在視覺溝通上，開始走往更具設計感的嘗試，他早在心中埋下期待合作的種籽，藉著這次機會施展腦海創意。
設計一場有時間感的線上展覽
經過多次討論，李明團隊和橘子決定用「點矩陣式」視覺方向來大玩一場，抓住橘子25週年的精神，他讓時間感成為設計核心，並繼續從橘子個性裡列出幾個關鍵字，包括接納、創新、變化、好玩，將這些特質融入復古桌面型式，放上特效、畫面視窗、單元Icon，如：我的電腦、網路上的芳鄰、我的最愛等等。人們進入頁面，就如同登錄25年前的某台舊電腦，窺探著主人翁的使用路徑，創意滿分，同時呼應導演楊力州執掌拍攝、音樂人阿爆（阿仍仍）配樂製作的《橘子25 一起闖關吧》企業影片、幕後花絮及其它時代文化議題等，完美延伸展覽氛圍。
「線上展覽的概念其實一直都有，但今年因為疫情關係，加速全球市場蓬勃發展。」李明分享，實體展覽的呈現，往往會因為場地、時間、距離問題受侷限，網頁設計卻可以同時實驗各種組合，例如融合3D場景、虛擬實境、影像，藉由互動或圖像拉近與群眾的關係，而GAMA25線上展網站則同時擁有沉浸式體驗和開放式水平瀏覽特色，特別著重與使用者的互動性，李明說：「GAMA25線上展網站的每個步驟都有意義，大家會先感受到視覺氛圍和敘述鋪陳，再慢慢被畫面層次所感染，過程中將發現很多驚喜和流暢感，覺得網站有點鬧有點可愛（笑）。」
網站精華VS彩蛋 設計師一次帶你看！
進入網站一開始的畫面，是李明很喜歡的設定，他將網站加載的LOADING程式轉化為過往DOS電腦系統的開機模樣，跑出黑底白色，也帶出橘子想對大家說的話：「這不是你第一次卡關，卡關闖關之後，We will be better。」繼續往下探索，還能發現其它特別安排，例如「我的電腦」單元分頁，可以任意改變桌布造型，將「展場視覺」換成自己喜歡的樣子。
此外，為了還原時空，網站也設計有特別的螢幕保護程式，李明說：「我們仿了當年最流行的兩個款式，一個是不斷前進的星空、一個是會跑來跑去的水管。」他分享，這個作法其實就是許多媒體網站上常見的使用提醒：「你已經停留三分鐘囉，請換個地方去吧。」將習以為常的樣態稍作變化，就成為別具心裁的驚喜。而桌面Icon方面，「網路上的芳鄰」融入社交平台概念，點進去就能連結橘子臉書粉專、按下「Player」即會前往Youtube頻道等，每個細節都詳細傳遞品牌訊息，為Gamania做最全面的宣傳。
李明接著說，當滑鼠繼點選到「遊樂場」單元，使用者便會展開與土撥鼠的戰爭，若是反應慢分數太難看，三十秒之後能再戰一回合，如果幸運得到滿分，就能發現隱藏版彩蛋，據聞世界上還不到30人發現，十分神祕。小編偷偷詢問李明設定了什麼，他露出謎一般的表情，堅持不說，鐵了心要讓玩家自己去挖掘。
別具意義的關機程式
驚喜還沒完，瀏覽結束後別急著按右上的X離開，試著從左下角「Start」登出吧！按下確定關機選項，咻一下，視窗將瞬間變黑，彷彿真的關機了，對，李明團隊就是想讓人嚇一跳！一想到使用者在電腦前的反應，他露出調皮表情賊賊地笑，並說：「大家看到一定會驚呼，X！不會真的關機吧？！」請放心，這只是個小玩笑，再點擊一下視窗，畫面就會重新出現，回到網站正常使用狀態XDD。
李明表示，這個設定除了好玩，也是自己最有感的地方，看著記憶裡熟悉的畫面被關起，就像重新看見從前，並和過去的自己道別。李明想起小時候瞞著爸媽偷玩電腦、用棉被壓住吵雜的數據機，就如同影片《橘子25 一起闖關吧》故事情節，那段深埋心裡的回憶，都在設計這個畫面時被喚醒，也鼓勵著當下的自己，繼續向前。相信每個瀏覽過《卡關・闖關：GAMA25線上展》的人都有一樣的心情，都看見了往昔，並從中找到力量、勇氣和共鳴，這正是展覽所要傳遞的本質，無論未來會遇到什麼關卡，只要突破難關，將會打開人生新風景，而橘子也將繼續陪著大家，一起開創不同里程。
讀到這裡，是否很想到《卡關・闖關：GAMA25線上展》看看呢？快點光臨網站，挖掘更多互動驚喜吧！
採訪撰文：Arya.S.H
攝影：曾琮霖 Aaron Tseng、李邦豪 Larry Lee
【相關連結】
卡關・闖關：GAMA25線上展：https://gama25.gamania.com/
【橘子25 一起闖關吧】企業形象影片：https://youtu.be/DhVmLHGK0gk
【橘子25 一起闖關吧】幕後訪談影片：https://youtu.be/lAPKC6z8DAE