2020 網站設計小技巧 (動起來！動起來！)

tags: 資源

有幾個小方法，可以讓以往版型在網頁上增加強烈的設計感，

【色彩】色彩越簡單越好，極端使用主色與輔色，甚至單色都可。
【動畫】讓網頁動一下，為網站製造活潑的氣氛。
【排版】除了文字焦點區域，讓裝飾性元素適當錯置豐富視覺排版效果。

好的範例：

https://ist-w.co.jp/

https://www.soken-home.jp

01.遮罩動畫Mask Animation 以下範例幾乎都使用相同效果

推薦使用：

技術難度：

此動畫效果極為普遍，適用於較為專業、效率、潮流感覺的網站

使用物件可用於任何網頁上元素，動畫原理使用before與after做transition，方向可以用css自由控制。
請注意動畫、物件與色彩三者搭配的速度與視覺效果必須流暢，才能提升質感。
如果圖檔太大，防止動畫跑完但圖尚未載入，此時可以將動畫做到lazyload載完後再執行動畫，動畫都是用css3效果，因此用addClass加入動畫即可。

https://estar-kobe.co.jp/en/

https://www.e-uemura.jp/

codepen範例：

---

02.縮放效果輪播圖ZoomSlider

推薦使用：

技術難度：

巨幅的廣告輪播已成了現在網站的標準配備，是進入網站的第一焦點，不論輪播內容是否美觀，可試著讓Slider加入小小的縮放動畫，增添時尚感。
盡量引導客戶挑選美麗圖片上稿，或是由設計師代為精緻的banner。

https://www.fpcorp.co.jp/company/recruit/

https://enecoop.sapporo.coop/

codepen範例:

---

03.幾何排版 Geometric Design

推薦使用：

技術難度：

幾何型排版適合運用於文字量較少的專案使用，文字還是要以閱讀最佳動線優先，避免不規則排版破壞閱讀的節奏。
運用css的transform skew的偏移角度，可以輕易讓元素做傾斜的視覺效果。但此種排版相對比較需要大量的切版時間調整角度，專案上請斟酌使用。

https://www.unitrust.co.jp/

https://www.jr-takashimaya.co.jp/new_grad/

https://www.t-i-forum.co.jp/

04.移入移出效果 Hover Effects

推薦使用：

技術難度：

在網頁的互動區域，增加小動畫提升互動感。可多利用 hover.css，
https://ianlunn.github.io/Hover/

05.國內相關設計公司設計表現參考

檯面上競爭對手，以設計面向來說，只剩下哈瑪星以及先得利，先得利比較少碰到，其他家大部分是祭品，我們首要目的：別讓哈瑪星有喘息的機會，壓著他打！

• 競爭對手設計表現：

  • 哈瑪星：https://www.hamastar.com.tw/cp.aspx?n=24&s=10
  • 先得利：https://www.ec-media.com.tw/Article.aspx?sNo=03009147
  • 網譯：https://www.eki.com.tw/tc/case_01.html
  • 桓基：http://www.hgiga.com/page_03_02.html#CaseStudy60
  • 藝凡：https://www.evonne.com.tw/work/?id=68
  • 欣揚：https://www.syoung.com/

• 設計公司設計表現：

  • 威亞：https://www.weya.com.tw/
  • 艾羽設計：https://www.i7-11.com/project
  • COSMO：https://www.cosmo-br.com/
  • 創造力：https://www.creatop.com.tw/project
  • 山川久也：https://www.nsdi.com.tw/#works
  • 亞堤：https://www.artie.com.tw/work.php
  • 米蘭數位：https://medialand.tw/work.aspx
  • 簡訊設計：https://www.simpleinfo.cc/categories/web
  • 版塊設計：https://blockstudio.tw/project/
  • 版塊設計總監創的臉書社團，分享網站設計：https://reurl.cc/L1YGAX
  • BASED DESIGN：https://based.design/ (作品：台東設計中心 by紫瑜)
  • Re-lab：https://relab.cc/portfolio (偏資訊設計、資料視覺化 by紫瑜)
  • dosomething studio：https://dosomethingstudio.myportfolio.com/projects (2018柯文哲網站、也做金馬視覺 by紫瑜)

• 平面設計公司設計表現：

  • 品墨：https://pinmo.com.tw/about.php?v=3
  • 洋蔥：https://www.oniondesign.com.tw/
  • 美可特：http://www.victad.com.tw/