版塊設計以數位策略規劃設計掀起企業品牌形象革新，在數位藍海上航行已有八年之久，於創立隔年開始陸續角逐國內外設計獎，從各類獎項中獲得多項肯定：德國設計獎(German Design Award)、西班牙網站設計評鑑 AWWWARDS、臺灣金點設計獎等。

此外，仍跨足展覽場館、教育學習、精緻餐飲、流行娛樂及宗教文化等領域，像是臺北流行音樂中心、高雄流行音樂中心、臺灣當代文化實驗場、RAW、可不可熟成紅茶、金點設計頒獎典禮、逢甲大學、媚登峰等。透過微細觀察生活環境將設計思維帶入，在乎多數人忽略的角度，藉由數位策略建構品牌的數位形象體驗，並在數位世界留下許多足跡。

本篇文章我們藉由分享版塊設計全新的品牌官網，拆解改版動機、網站動態特效設計與建立差異化等目的，以「版塊風格」的設計思維作為動態特效網站領域催化劑，詮釋產業設計標準之源。

---

溯源檢視體質 找出創新契機

版塊創立以來從架構較單純的活動型專案，擴大至城市規模型專案，因此我們藉由品牌重塑(Rebrand)重整品牌體質，將全新理念、視覺帶入新官網，並針對頁面中許多區塊做新的詮釋。

在原版的版塊官網著重在動態特效的表現，以上帝視角層層撥開直至版塊公司內部，並以大量的切格組織資訊，打破閱讀的慣性規律，雖實驗性強但在資訊查找、介面直覺性相對較薄弱。因此，我們在全新的版塊官網中，除了在動態特效上突破框架外，使用者介面也徹底顛覆過往。

 

經歷反覆思索、換位思考網站操作流程，網頁中每個區塊的使用順序應該為何，持續透過測試、優化使用者體驗，讓網站整體的易用性提高，建構兼具美感與功能性的強大實用型網站。而這次特別在流程規劃的內容區塊，將繁複的文字以動態流程圖作為示意，每個重點階段轉譯以圖像呈現，讓使用者得以快速了解詢案、應徵及專案等流程時序。

 

要素一：破除墨守成規 導入多元工具 AI 協作

整體視覺除了套入全新的品牌識別外，我們導入 AIGC（人工智慧內容生成）技術，透過正處方興未艾之時的 AI 工具 Midjourney 協作生成主視覺岩石圖形，快速運算出腦中的想像；再以影像 AI 工具 Kaiber 賦予版塊運動碰撞等概念，創作出全新的視覺動態。全站文案也以 ChatGPT 梳理業務主軸「數位形象策略」、「網站設計＆開發」、「品牌視覺識別」、「數位顧問」，建構 AI 輔助數位內容的角色，並且我們希望每個專案都會有新的創意發生，是版塊的創作態度。

 

要素二：將品牌視覺轉化網站特效，形塑獨特共鳴的互動體驗

『表演序幕的開場，讓經典持續發生』

「進場、轉場動態」我們延續了 2.0 官網的 Reveal 色塊做法，讓所有內容像是一場完美的表演布幕展開，未來我們也會持續將這經典效果繼續發生。

 

『版塊是巨大岩石碎片，分布在地球表面的岩石圈上』

「代表動態」採用了 WebGL 3D 效果，將石頭模型置入後隨著滑鼠滾動、移動而有相對的腳本回饋，呈現版塊先進技術與多元素材結合之能力。

 

『以獨特切角和實驗性設計，埋下互動驚喜』

在網站中埋下彩蛋是我們與使用者間的互動驚喜，我們在網站中設定滯留頁面一段時間後，即會跳出一個破損效果的網頁畫面，而這個做法對使用者來說相對不那麼陌生；好比流連媒體網站閱讀文章時，因停留頁面過久而跳出提醒通知。

裡頭疏密不齊的文字遠看誤以為是遭受攻擊的程式碼，近看發現內容毫無邏輯可言！？這其實是版塊夥伴時常離開位子後，回來看到的螢幕畫面，而留下這些令人難解的內容主角就是「版班貓」，不經意的踩踏鍵盤留下一片問號給人類……. 但眼尖的使用者就會發現其中關鍵，只要點擊網頁任何一處即可解鎖畫面！

 

要素三：突破常規作法，靈活線上建築

在設計公司林立的大環境中，我們以獨具的風格在時代裡不斷挑戰、創新，更積極在設計領域築起差異化，官網的「關於我們」頁面巧思就是很好的示範。

官網代表了品牌的數位形象，除了結合動態特效、3D 動畫等酷炫的方式外，透過「跨平台」靈活更新視覺是目前少見的手法，於是我們在「關於我們」頁面埋下巧思，特別獨立使用 Webflow 平台製作無程式碼(NoCode)網頁。目的除了嘗試多樣工具協作外，也將此頁作為定期更新重製設計的空間，計畫讓版塊的每位創作者都有機會參與創作。

靈活協作之下，體現了版塊設計內部強大的創作能量，同時我們也讓整個網站活起來，扣回數位策略的核心以及價值觀「透過獨特構思和實驗性的設計探索未知的領域」。

---

在全新的品牌官網中，將品牌重塑後的企業識別延伸至線上，除了可以看見我們最為擅長的多元動態特效表現外，也帶出品牌具「前瞻」、「刺激」、「創新」、「敏捷」、「改變」的核心價值觀，藉此讓使用者一進入網站後即開啟一趟互動體驗之旅。

未來的設計重心將在數位戰場上，不只是官網改版或品牌重塑表現，我們都將持續在數位設計生態中觀察並分享網站趨勢，從廣泛收集視覺效果很酷、很新潮的動態特效，至精煉實際執行程式開發，我們想體現的不純然是一種品牌氛圍，而是藉由沈穩的開發技術和獨具風格的視覺設計，與使用者共創深刻的數位體驗，同時引領數位設計領域不斷進化與革新。

 

編輯：LuLu Chang / Lee Ming
核稿編輯：Lee Ming

---

專案作品介紹 → 版塊 3.0 ─ 品牌官網