●上課時間：2025年04月15日
●上課地點：揚京網銷二部多功能教室
●主講人：冠穎
●再次迎來設計部能量補給時光！特別感謝 boss 的早餐加持，每次早安儀式不只是美味的慰藉，也像是打開創意腦袋的開關，讓我們準備好迎接滿滿的知識輸入!這次由冠穎帶來精彩的網站設計實戰分享，從風格判斷到動畫技巧，深入淺出解析設計背後的邏輯與眉角，以下是當日精彩重點：
●如何判斷客戶風格？觀察社群、靠直覺也靠策略：
面對沒有明確風格指示的客戶，冠穎分享他的作法「設計有時候也要靠一點運氣，但觀察是關鍵」。可以從客戶平常在 Facebook／Instagram 發的內容下手，看看他們喜歡用什麼顏色、什麼樣的排版和圖片風格。
總結三個實用原則：
1.找出社群貼文裡常出現的元素或調性
2.參考看起來是有設計過的貼文風格
3.設計上加入更多細節，整體質感會更到位
●CSS Transition 特效應用讓網站「滑」起來：
在網頁互動體驗上，transition 是好用又必備的技法。透過時間差、延遲、線性設定，甚至負數的使用，讓整體網站更富有節奏感，不再死板。
但也提醒有些 CSS 屬性（如 position、display）不適用 transition，會導致變化失效常，見問題像是漢堡選單用 display:block 切換，容易呈現呆板，需搭配其他技術優化 總結：
1.看似基礎，其實可以玩出很多變化性
2.整個網站效果要有一致性，整體網站的視覺感才會舒服
●CSS Animation 應用動畫該怎麼做才加分？
以開場動畫為例，他展示了如何用偽元素（pseudo-elements）營造畫面層次與氛圍感，但也分享了設計師們常踩的坑：
1.務必設定 pointer-events，避免動畫蓋住按鈕、干擾操作
2.部分平台購物頁 CSS 會衝突，影響動畫效果
3.並非所有客戶都愛動畫，需視專案適用性評估
4.製作動畫很花時間，要考量時程與人力成本
●三個實用語法小錦囊：
除了整體視覺設計，冠穎也分享了三個實用又高頻率使用的語法小技巧，對設計師與切版師都很受用。
像是 display: flex，是最常用的排版語法之一，直覺又簡單，尤其在做水平或垂直排列時超方便。不過要注意的是，像有些平台預設排版多使用 grid，若兩者混用容易出現結構衝突，覆寫時也會增加時間成本。
而 position: sticky 則是製作「吸頂導覽列」或「滑動固定元件」的好工具，也能搭配動畫做出很酷的效果。不過實作時要特別留意父元素的 overflow 設定與高度限制，否則效果可能會無效或導致跑版，所以雖然視覺帥氣，但也非常花時間。
最後還有一些圖文排版的小技巧也很實用，比如 text-align: justify，可以讓文字左右對齊，看起來比較整齊、專業，常見在功能頁的應用。
而在圖片尺寸控制上，早期常用 padding-bottom(top) 的方式，來做出等比例縮圖效果，現在則可以直接用 aspect-ratio 這個新語法來搞定，不但比較直白好懂，也比較不容易出錯。有些平台也有支援這個語法，用起來會更順手。
●設計想法怎麼「講」出來？與切版師的溝通技巧：
除了技術，合作也是設計師重要的能力。冠穎也分享了與切版師溝通特效時的做法：即使手上沒有現成案例，也可以用簡單範例或關鍵字說明效果概念，並提前討論素材與區塊邏輯，建立雙方共識，讓設計不只是交出去，而是能真正呈現在網站上。
●這堂課節奏緊湊而充實，從靈感的激發、技術的精進到團隊協作的默契，每個環節都在無形中擴展了設計師的視野與工具箱。這不僅是一場技術的分享，更是設計思維與創意邏輯的深度提升。每位設計師都能在這樣的交流中汲取養分，讓自己在日後的專案中更加游刃有餘。期待下一堂設計能量補給，我們將以更強大的創意與實力，開啟更精彩的設計之旅！
