ico_gvoice

這個網站有點鬧又有點可愛── 專訪《GAMA25線上展》網站設計師李明

《卡關・闖關: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