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

###### tags: `資源`

有幾個小方法，可以讓以往版型在網頁上增加強烈的設計感，
>:star: <font size="4" color="#F00">【色彩】</font>色彩越簡單越好，極端使用主色與輔色，甚至單色都可。
:star: <font size="4" color="#F00">【動畫】</font>讓網頁動一下，為網站製造活潑的氣氛。
:star: <font size="4" color="#F00">【排版】</font>除了文字焦點區域，讓裝飾性元素適當錯置豐富視覺排版效果。

### 好的範例：
[https://ist-w.co.jp/](https://ist-w.co.jp/)
[https://www.soken-home.jp](https://www.soken-home.jp)

<br/><br/>
# 01.遮罩動畫Mask Animation <font size="3" color="#777">以下範例幾乎都使用相同效果</font>
推薦使用：:star: :star: :star: :star: :star:
技術難度：:star: :star:

<font color="#000" size="4">**此動畫效果極為普遍，適用於較為專業、效率、潮流感覺的網站**</font>

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


:link: [https://estar-kobe.co.jp/en/](https://estar-kobe.co.jp/en/)


:link: [https://www.e-uemura.jp/](https://www.e-uemura.jp/)
### codepen範例：
<iframe height="500" style="width: 100%;" scrolling="no" title="mask animation into viewport" src="https://codepen.io/hahamimidido/embed/dyPNOop?height=500&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/hahamimidido/pen/dyPNOop'>mask animation into viewport</a> by Eason Hsieh
(<a href='https://codepen.io/hahamimidido'>@hahamimidido</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

---

<br/><br/>
# 02.縮放效果輪播圖ZoomSlider
推薦使用：:star: :star: :star:
技術難度：:star: :star:
>巨幅的廣告輪播已成了現在網站的標準配備，是進入網站的第一焦點，不論輪播內容是否美觀，可試著讓Slider加入小小的縮放動畫，增添時尚感。
>盡量引導客戶挑選美麗圖片上稿，或是由設計師代為精緻的banner。
> [color=#9ad358]


:link: [https://www.fpcorp.co.jp/company/recruit/](https://www.fpcorp.co.jp/company/recruit/)


:link: [https://enecoop.sapporo.coop/](https://enecoop.sapporo.coop/)

## codepen範例:
<iframe height="500" style="width: 100%;" scrolling="no" title="Carousel zoom Slick" src="https://codepen.io/hahamimidido/embed/zYxdgrr?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/hahamimidido/pen/zYxdgrr'>Carousel zoom Slick</a> by Eason Hsieh
(<a href='https://codepen.io/hahamimidido'>@hahamimidido</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

---

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


:link:[https://www.unitrust.co.jp/](https://www.unitrust.co.jp/)


:link:[https://www.jr-takashimaya.co.jp/new_grad/](https://www.jr-takashimaya.co.jp/new_grad/)


:link:[https://www.t-i-forum.co.jp/](https://www.t-i-forum.co.jp/)
<iframe height="500" style="width: 100%;" scrolling="no" title="mdyMNMK" src="https://codepen.io/hahamimidido/embed/mdyMNMK?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/hahamimidido/pen/mdyMNMK'>mdyMNMK</a> by Eason Hsieh
(<a href='https://codepen.io/hahamimidido'>@hahamimidido</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<br/><br/>

# 04.移入移出效果 Hover Effects
推薦使用：:star: :star: :star: :star: :star:
技術難度：:star:

>在網頁的互動區域，增加小動畫提升互動感。可多利用 **<font color="#000" size="5">hover.css</font>**，
>[https://ianlunn.github.io/Hover/](https://ianlunn.github.io/Hover/)
<iframe height="500" style="width: 100%;" scrolling="no" title="Fancy 3D flip card (on hover - CSS)" src="https://codepen.io/hahamimidido/embed/oNgGvWJ?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/hahamimidido/pen/oNgGvWJ'>Fancy 3D flip card (on hover - CSS)</a> by Eason Hsieh
(<a href='https://codepen.io/hahamimidido'>@hahamimidido</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

# 05.國內相關設計公司設計表現參考
>檯面上競爭對手，以設計面向來說，只剩下哈瑪星以及先得利，先得利比較少碰到，其他家大部分是祭品，我們首要目的：<font size="4" color="#F00">別讓哈瑪星有喘息的機會，壓著他打！</font>
- ## **競爭對手設計表現：**

- 哈瑪星：https://www.hamastar.com.tw/cp.aspx?n=24&s=10
- 先得利:star:：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/
- 艾羽設計:star:：https://www.i7-11.com/project
- COSMO：https://www.cosmo-br.com/
- 創造力:star:：https://www.creatop.com.tw/project
- 山川久也:star:：https://www.nsdi.com.tw/#works
- 亞堤：https://www.artie.com.tw/work.php
- 米蘭數位：https://medialand.tw/work.aspx
- 簡訊設計：https://www.simpleinfo.cc/categories/web
- 版塊設計:star:：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紫瑜)

- ## **平面設計公司設計表現：**
- 品墨:star:：https://pinmo.com.tw/about.php?v=3
- 洋蔥:star:：https://www.oniondesign.com.tw/
- 美可特:star:：http://www.victad.com.tw/