隱藏的設計思考 ─ 版塊官網首頁特效解析

跟大家分享我們官網首頁的特效概念&解析
除了想呈現版塊設計的「所在位置」以外，還能夠怎麼樣的把「理念與好玩」的事情埋入進去。

重點

• 主要動態
• 細節技術

---

主要動態

主要有 4 個觀看版塊設計的層級表現。
開始讓每個層級都有賦予它的意義！

從上帝視角 → 進入城市街道 → 再進屋內平面圖 → 轉到桌面

 

• 第一層「上帝視角」↓
  利用 Google Map的 Customizer 功能把多餘的元素剔除，留下讓台灣純粹的土地與河川，讓畫面更為單純。
  再使用WebGL技術將圖片做動態分割，切成不規則形塊狀，長按滑鼠左鍵會進行分割位移，放開會自動合併，以此動態體現版塊設計的品牌概念：「每個角色都是一片版塊，既可獨立存在且能擠壓創造成為新的可能。」

• 第二層「城市街道」↓
  畫面以版塊為中心，左下角顯示2種呈現地點的精密計算方式「經緯度 & 座標」作為裝飾
  四周環繞著「停車位」，讓拜訪者停車落點參考。

• 第三層「屋內平面圖」↓
  此平面圖為當初裝潢時所規劃的室內配置圖。
  大家可以清楚看見，會議室的物件擺放、茶水間、廁所等位置，以及版塊同仁們的座位分佈，以利拜訪者到訪時找尋大家位置。
  更重要的是！知道我們的「室內植物分佈情況」。

• 第四層「工作桌面」↓
  到了工作桌面，眼前見到的是iMac 27’ 也就是我們平常每個同仁標配的電腦設備。
  再往電腦螢幕上觀看，會看到一組程式碼：
  blockStudio.fn = blockStudio.prototype = {
  version:” 3.0″
  constructor:BlocksStudio.
  frontEnd: function( awesomeEffects, HTML, CSS, JavaScript ) {
  return
  “Website”;
  },
  …
  …….
  剩下內容的code大家可以自己解讀看看 …

過場特效

1. 概念呈現
   我們排除XY軸水平垂直的方向，而改採用Z軸的方向，不斷地往內進入，呈現從外太空不斷往前進入到工作桌面的意象。
2. 畫面設計
   模擬GoogleMap的地圖設計，右下角帶有放大縮小按鍵來作切換，當然雙點擊也是可以的。
3. 技術做法
   以圖片放大 + 淡出的簡單做法呈現複雜的Zoom in 效果。
   當然，裡面還是有很多細節技巧需要克服的哦！
   參考Demo：

讓每個環節都賦予意義，埋入好玩彩蛋才是真諦