2020海棠來了品牌官網《驚喜巧思篇》
海棠設計官網已上線一陣子，是否有在網站上發現一些細微的互動呢？這個專案在設計動畫上也是其中一個難處；難處不僅僅是寫什麼樣的動畫，考量用什麼樣的方式建構也是重要的一環，不過製作上的辛酸血淚與技巧不是本篇的重點，在此篇只會簡易帶過。
這個專案設計相當多的動態巧思，可惜無法一一羅列，因此選出十大比較有特色的項目來做分享。如果還沒看過海棠設計官網，可以先去瀏覽一圈再回來看這篇文章，不然可能會被暴雷；如果已經看過海棠設計官網，可以在心中數看看有發現下列幾項呢？
※本篇文章有大量的GIF，如果使用智慧型裝置，建議在有 Ｗi-Fi 的地方觀看。
※此篇分享的巧思多半以電腦版觀看的樣式為主，手機、平板因效能問題，製作上有做取捨。
精選海棠設計官網專案十大特殊巧思：
1. 社群 Icon 的 Hover 動畫
專案上常會有社群連結圖示，而海棠設計官網則有特別設計 Hover 後會動的 Icon，不單只是淡入淡出、放大縮小，利用原本社群網站的 Icon 與原網站的性質特色延伸出各有特色的動畫，每個動畫都是精心設計，當然如果社群網站哪天心血來潮改 Icon 就要另外再花時間製作新的動畫（例如 Medium），這就是後話了。
Codepen 上為最初規劃的 SVG 版本，非最後網站上使用的版本，基於一些複雜的原因，最後選擇使用 GIF。（最初的版本沒有 Twitter）
※ Line 與 Twitter 在下方「中毒的分享」中有出現。
※ 海棠設計目前沒有 IG ，只是順手做 IG 的動態，未來說不定有機會運用。
2. 藏在程式內的歡迎
打開瀏覽器開發者工具常會發現一些網站隱藏的訊息，像是 FB 有警示文字，使用一些套件也有比較特殊的提示訊息，一直覺得相當有趣，可惜沒有機會使用，剛好藉由海棠設計官網這個專案來實踐。
海棠設計官網使用的是以符號組成海棠設計的 Logo 與文字的圖形，搭配主題色組成有趣的歡迎圖案。這種運用符號組成圖形的圖稱作「ASCII 藝術（ASCII Art）」，有興趣可以搜尋相關關鍵字，網路上有不少能夠轉換圖形與文字的資源，海棠設計官網是運用兩種網站，分別生成 Logo 與文字再拼湊而成。
生成文字：Text to ASCII Art Generator (TAAG)
圖片轉譯：TEXT-IMAGE.com :: Convert
※ Safari 無法觀看正確呈現結果，建議使用其它瀏覽器觀看。
※ 開發者工具建議在螢幕寬 1200 以上才能觀看正確的圖形。
3. 客製化的滑鼠
使用電腦瀏覽海棠設計官網會發現滑鼠游標有經過特別設計，在原規劃上還有其它模式，基於時間花費與重要性考量，只能斟酌放棄。
這種特殊滑鼠在一般在絢麗的活動網站、個人作品集、設計公司網頁較常見，原因在於製作與管理相較繁複與困難，海棠設計官網又是使用前端框架的單頁應用網頁（SPA），製作上又有重重障礙，還好最終都能順利跨越。
4. 換頁的波浪
海棠設計官網更換頁面時，會出現波浪的圖形，再加上海棠設計的英文點綴，在製作上非常喜歡的一項。
靈感是來自於海棠設計目前的名片設計，英文字「Ｉ」也是有按照名片上的設計排版。然而製作時卻因為效能問題頻頻卡關，原本預想還有更多樣的變化，例如波浪原本是有層次的上升與下降、英文以遮罩的方式出現等，都因為效能問題選擇放棄或是判斷效能較佳的電腦才呈現；中間一度將文字移除，最終還是無法放棄這項特殊的設計，重寫幾次才製作成目前的版本。
5. 藏在 Footer Logo 的海棠小柳丁
如果滑鼠移動到 Footer 的 Logo ，會發現有海棠小柳丁們藏在 Logo 內。使用 Photoshop 製作影格動畫，搭配 CSS 的 animation 來設定最終效果。
是否有發現打開的門板還是有厚度的呢？如果有歡迎在下方留言讓我知道，身為製作者的我會很開心。
6. 可以畫插圖的區塊
有發現在首頁的 Banner 第三個畫面上有個可以互動的小區塊嗎？點擊插圖的噴漆罐，會發現畫面上浮現可以繪畫的區塊，繪畫完還能夠下載圖片喔！我自己寫程式寫到很煩悶的時候，用來紓壓的簡易小互動。（另外一個漂浮的小人也有不同的互動！）
如果有運用這個小互動畫出有趣的圖，歡迎留言在海棠粉絲團專頁讓我們知道！
7. 中毒的分享
是否有點擊過首頁的 Banner 第三個畫面上的「複製程式碼」按鈕呢？會出現類似電腦中毒的彈窗設計，這是最初主視覺設計師 Fen 與團隊其他成員討論時就有規劃這別出心裁的設計，但因為這項目些許雞肋、製作上又相較麻煩，是上線後才更新的效果。如果沒看過，可以到海棠設計官網玩看看！（有出現上方提到的「社群 Icon 的 Hover 動畫」的其它 Icon）
8. Header 的 Logo 動畫
要從其它頁回到首頁，在網頁上通常能夠從 Header 上的 Logo 跳轉回首頁，海棠設計官網當然也有這個功能，不過在滑鼠移上去後會發現 Logo 出現耐人尋味的動畫。
海棠 Logo 的意義最外層線上的圓圈代表著老闆，後面跟著大員工與小員工一起奔走。
關於 Logo 的意義不曉得在哪聽到的不可考版本，才有這個動畫的誕生，不過最根本的原因是只有旋轉太過單調，才想加一些不同的動畫。（有沒有發現最後悄悄地轉出更小的圓圈？）
9. 會閃爍的太空人與成員的隱藏照片
有沒有注意過首頁 Banner 第二個畫面出現的太空人呢？停在太空人畫面上會出現閃爍的效果，以及團隊介紹的成員在滑鼠移上去後閃爍出成員們活潑的樣貌，這種效果會稱作「Glitch Effect」（中文翻譯為「閃爍」，但可能會搜尋到其它的閃爍方式），是近期流行的效果呈現。
※在團隊介紹中，有沒有發現成員們扭動的背景遮罩？滑鼠移上漂浮小藍人會有更多驚奇的發現！
10. 精心設計的 404 錯誤頁
404 錯誤在網頁上代表找不到該頁的錯誤訊息，通常使用者不會看到，比較不受限於其它頁面的風格，所以就會成為專案上設計師可以特別雕琢與前端工程師拿來做特效的頁面。像是 GitHub 錯誤頁面滑鼠移動能夠互動；Slack 錯誤頁面能夠左右觀看場景，還能與動物互動。
當然 404 錯誤頁面海棠設計的團隊成員們也沒放過，特別設計運用滑鼠可以轉動的球形文字雲，以及可以互動的人物對話框。
想玩球形文字雲但不知道如何去404頁？沒關係，可以看Codepen的版本：
結語
每個巧思在背後都有有趣的故事，還有很多可以分享，可惜無法全部呈現。
※下圖：上排中間的鹿設計師 Daisy 有撰寫文章分享專案〈產品需求應對方法：App生態圈專案分享〉，歡迎去閱覽文章幫設計師拍個手！
專案上有很多互動如果客戶沒有侷限的情況下，其實是前端工程師認為有趣想要應用在專案上（當然如果客戶指定，就要看相應要花費的時間成本與效能符不符合原本預估的規劃），這個專案尤其如此，中途屢次遇上難關，就會想做些有趣的事情轉移注意力。
「台上一分鐘、台下十年功」這句話在這業界上也適用，精心設計過的巧思都需要花費相當的時間，不僅僅是上面提到的十個項目，頁面上只要會動的、能動的，背後都累積大量的時間成本。很慶幸有讓我能夠嘗試做各種奇怪事情的團隊，以及很感謝設計師們辛苦製作這些精美的設計稿。
至於這個專案背後到底花多少時間就無法言喻，也許旁敲側擊認識海棠的成員們會知道。
要是在頁面上發現以上未點出但很有趣的巧思，歡迎在下方留言分享給大家；或有什麼想知道這個專案上運用的技巧，也歡迎在下方留言，有機會再分享於未來的文章。
如果欣賞海棠設計官網各種小巧思，歡迎拍一個或多個手讓我知道！
若是喜歡海棠設計的文章，歡迎分享、留言、按讚、關注海棠設計的粉絲團專頁。
感謝閱讀到最後的你。
