上週參加了由「加個零的社群觀察」所主辦的「動態網頁特效」講座，邀請了版塊設計的創辦人李明，來聊聊動態網頁的設計經驗與趨勢。
剛開始注意到版塊設計，是因為一個名為「拜拜基本款」的動態網頁，用流暢的線條設計跟動態效果，來圖解台灣拜拜習俗。從官網作品，就看出絢麗順暢的動態設計絕對是版塊的一大特色。
一開始李明開場以「撼動現在，而非預測未來」來解釋版塊精神，告訴大家說網頁呈現其實可以有更多想像，但多數人還停留在過去「套版」等傳統網站的想像。因此版塊希望用「現在」的做法，來打破框架。
我覺得這跟以往在設計新聞類的數位專題有點相似，一樣是表現新聞，除了文字，其實還可以透過資料、圖表、影像等素材，來讓讀者更理解報導內容。
怎麼製作出好的網站：明確的「網站目的」與「目標族群」
網站設計畢竟百百種，那什麼叫做「好的網站」呢？李明認為還是要回歸網站的目的，以及目標族群（TA）來決定。
網站目的可能是資料庫查詢、單純氛圍體驗、電子商務訂購等，有時候你「喜歡」一個好的網站，並不代表就是「適合」的網站，假設是單純氛圍體驗的網站，或許可以有很多絢麗的特效，但是如果網站目的是查詢資料，那麼視覺特效可能就是其次。
目標族群則包含年齡跟角度，有對的TA，才會是一個好的網站。這部分超同意的，一個沒有角度跟TA的產品，最後結果可能是根本沒人想用。明確的TA也會牽涉到設計，TA如果是長輩，那麼網站字體就需要大一點，動態跟色彩應用可能也不能太花俏。
那網站設計什麼時候，需要運用到「動態」呢？只要會動就是好的嗎？李明認為，一樣必須要回歸到情境跟TA的設定，但有個簡單的判斷方式「元件是否想被使用者看到？」如果不想被使用者看到，或是感受到，那為什麼要做動態呢？
網站動態規則SOP
關於網站動態規則，可以參考版塊的部落格，列出了11個常用動態特效。每個特效皆有簡介與常見做法。下圖為文章中給讀者參考的圖像。
關於動態特效趨勢，李明提到一個技術通常會流行2~3年，以下是他觀察到近年來動態網頁常用的技術：
- 3D model（將3D模型應用於網頁中）
- Web Graphics Library（WebGL，用於繪製2D圖形和互動式3D圖形）
- Lotties.js（透過動畫製作軟體AE製作動畫，再由程式套件繪製在網頁上）
- Web AR（透過網頁結合AR技術）
- Guideline/BrandBook（許多大企業開始做自己的企業識別網頁）
如何培養創意？
分享座談中，李明也談到如何發想專案設計的流程，如何培養自己的創意？我認為這應該是最有價值的地方，否則光有技術，卻無法收斂需求，可能也沒辦法做出一個撼動人心的網站。
比較印象深刻的是，李明提到在發想過程，會先知道這個案子可能的限制在哪裡，知道限制，才可能突破可能。而要知道網頁的限制，平常搜集素材跟閱讀的功力必不可少。他推薦可以到動態網頁的獎項網站參考作品（如Awwwards），並用台灣團隊開發的素材搜集軟體Eagle記錄素材。
搜集素材後，還要時常去複習，這樣在客戶提出問題時，你才能第一時間講出來，如果不熟悉，平常很難想到這些特效。他也提供了10個觀察好網站的方式，在搜集素材的過程中，或許可以邊看、邊問自己這些問題喔！
觀察好網站的10種方式
- 了解網站在幹嘛
- 主動態是什麼
- 互動動態是什麼？
- 想看看用的是什麼技術？
- 版面Layout是怎麼切版？
- 跟自己經驗有什麼聯想？
- 網站突破點？
- 手機版搞不好有驚喜？
- 如果是我來做會怎麼做？
- 缺點是什麼？
對前端設計有興趣的朋友，可以參考李明經營的「網站趨勢搜集」社團，想看更多關於版塊設計的精彩分享內容，也可私訊「加個零的社群觀察」粉專或IG，購買該場分享影片票喔！
