從「五感」出發打造線上體驗, 擴展數位形象的整體性——專訪版塊設計李明

2023/09/26
從「五感」出發打造線上體驗, 擴展數位形象的整體性——專訪版塊設計李明
攝影/April Chang © Shopping Design、圖片提供/版塊 Block Stu
分享
收藏
立即加入Shopping Design會員,收藏喜歡的文章,把關注的展覽活動加入行事曆!
在線上體驗習以為常的時代,版塊設計創辦人李明如何透過設計將體驗最佳化?面對後疫情的環境與設產業變動,為何於今年啟動品牌重塑與推出網站 3.0?

本文選自《Shopping Design》雜誌 2023/秋季號 FEEL GOOD DESIGN・好有感!今日的體驗設計

在數位藍海上航行八年之久的版塊設計,是將動態特效導入網站設計開發領域的先鋒之一,創立以來從架構單純的活動型專案,擴大至城市規模型專案。在線上體驗習以為常的現代,版塊設計創辦人李明與我們分享如何透過設計將體驗最佳化,以及面對後疫情的環境與設計產業的變動,他是如何進一步探索,使版塊設計於今年啟動品牌重塑與推出網站 3.0 改版。

專訪 版塊設計 李明
攝影/April Chang © Shopping Design

版塊網站要改版?後疫情的策略調整與探索

過去幾年疫情導致各個產業受到極大影響,實體活動被迫取消,廠商將行銷預算轉向投入線上,版塊去年全盛時期 18 個案子同步運作,面對龐大的案量,李明的策略是將商業類型與創作類型的案子相互交錯調配,同時也考量員工穿插在相異類型之間的心態轉換。

今年疫情全面解封後,數位行銷市場卻開始低落。據李明觀察,品牌將未來的預算暫時挪用到疫情期間運用,導致疫情穩定後開始縮減,因而在今年接洽案子的過程中,需要更有耐心、更縝密地與客戶討論預算等的環節。以網站設計領域來說,版塊設計製作期間較長,而這呼應到設計理念——「與品牌策略緊密結合,專注網站設計開發,不要成為一間什麼都做的設計公司」李明清楚知道公司的運作方式,與專注守備的範圍。

專訪 版塊設計 李明
攝影/April Chang © Shopping Design
專訪 版塊設計 李明
攝影/April Chang © Shopping Design

「我發現客戶不只是需要網站設計,而是從品牌策略開始介入。」——版塊設計創辦人 李明

近年來,版塊除了網站設計開發,也向外擴張數位策略的範疇,而後疫情影響與產業變動,也促使李明在兩年前開始重新佈局,於八月上線的「官方網站改版 3.0」即是第一個計畫。

原版的官網著重於動態特效的表現,打破閱讀的慣性規律,雖然具實驗性,但是在資訊查找、介面直覺性上卻相對薄弱。因此,在全新 3.0 官網中,以數位策略為導向出發,在擅長的動態特效上突破框架,同時建構兼具美感與功能性的實用型網站。

專訪 版塊設計 李明
版塊設計於 2018 年的 2.0 網站與今年改版的 3.0 網站對比。 圖片提供/版塊 Block Studio

導入網站建築概念,3.0 網站融合五感體驗

李明大方分享在網站製作時會將「網站建築」的概念導入,將複雜的網站架構以建築作為對照,透過層層架構打造各種場景。首先,會詢問 「這個專案的目標是什麼?」 以此安排製作的流程。再來,以品牌精神、即將推出的產品等制定腳本,思考如何將品牌精神帶入網站。最後,打造情境氛圍,並將機能性的操作回扣到專案目標,打造具有整體感的數位體驗。

專訪 版塊設計 李明
版塊設計曾以「網站與建築關係」為題發布文章。 圖片提供/版塊 Block Studio

「如果體驗設計時沒有五感,就像在網站貼上不同的海報,無法讓使用者從氛圍引導到場景中。」——版塊設計創辦人 李明

李明認為若要打造更佳的數位體驗,必須進一步從 「網站五感」 切入,以版塊 3.0 網站為例:在 「形象(視覺)」 上,導入 AIGC(人工智慧內容生成)技術,建構 AI 輔助數位內容的角色,協作生成視覺圖形、文案等,同時將繁複的文字以動態流程圖作為示意,每個重點階段轉譯以圖像呈現,讓使用者得以快速了解詢案、應徵及專案等流程與時序。 「象徵(味覺)」 宛如香水象徵一個人的品味,而象徵版塊的石頭模型採用 WebGL 3D 效果,隨著滑鼠滾動、移動模型會有相對的腳本回饋,呈現版塊先進技術與多元素材結合的能力。

專訪 版塊設計 李明
運用 AI 工具協作,輔助數位內容生成。 圖片提供/版塊 Block Studio
專訪 版塊設計 李明
在流程規劃的內容區塊,將繁複的文字以動態流程圖呈現。 圖片提供/版塊 Block Studio

在數位的平行時空裡以 「互動(觸覺)」 共創故事,移動游標跟隨著一排藍色矩形方塊,移到圖像時會轉為黃色,還採用即時雙向傳輸技術「Socket.io」,藉由游標能看到同時在線的使用者。更在網站的滯留頁面中,埋藏著與使用者之間的 「感知(嗅覺)」 彩蛋,破損的畫面、疏密不齊的文字,遠看以為是遭受惡意攻擊的程式碼,近看才發現內容主角是版塊的吉祥物「版班貓」。雖然 3.0 的網站中沒有運用到 「音效(聽覺)」 ,但豐富且趣味的四感已帶給使用者超乎想像的數位體驗。李明認為在五感中最重要的是「視覺」,唯有讓使用者第一眼關注、停留,才有機會進一步操作。

專訪 版塊設計 李明
在版塊設計大部分的案子中,皆能看到隱藏的「游標動態」符號。 圖片提供/版塊 Block Studio
專訪 版塊設計 李明
網站的滯留頁面中,埋藏著與使用者之間的互動彩蛋。 圖片提供/版塊 Block Studio

引領體驗創新,從動態特效到品牌策略

李明提到 「未來的設計重心將在數位戰場上」 ,期許版塊以訂定產業標準的角色,引領數位設計領域不斷進化與革新,同時持續在數位設計生態中觀察並分享,將社團「網站趨勢 WebCRACK」轉型為知識共享平台。版塊體現的不純然是品牌氛圍,而是藉由沉穩的開發技術與獨具風格的視覺設計,與使用者共創深刻的數位體驗。

「我們希望透過品牌策略,延伸到網站設計開發,提供全面的數位策略解決方案,創造令人印象深刻的品牌體驗。」——版塊設計創辦人 李明

細節的經營是建構體驗的基本,版塊設計從品牌思維、動態特效、全面性數位策略到客製化打造品牌形象,在客戶面和產業面塑造核心競爭力,逐漸從網站設計開發擴展到設計顧問;當網站體驗成為現代不可或缺的一環,也帶領著企業、產業不斷地創新,同時也塑造版塊設計的品牌,持續邁向下一個階段的未來。

專訪 版塊設計 李明
社團「網站趨勢 WebCRACK」將逐步轉型為知識共享平台。 圖片提供/版塊 Block Studio
專訪 版塊設計 李明
攝影/April Chang © Shopping Design

本文選自《Shopping Design》雜誌 2023/秋季號 FEEL GOOD DESIGN・好有感!今日的體驗設計,更多內容請 點此試閱

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

我還不是會員, 註冊去!
找有趣、有用、有意義的大小設計事...
Vol.157
Vol.157 破繭、浴火,然後我們重生

25+ 個品牌・文化・創作者的「瀕死經驗」

© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓