# 2022年設計介面趨勢
## ➤ 可切換黑白的介面設計
隨著Apple的市占率攀升，更多人關注到了使之成功的設計，中性用色與扁平化的設計元素，google、youtube跟進，各大廠牌陸續推出可切換黑白主題的功能，讓界面更個性化，這股潮流在2022年也持續發燒。

<video class="img-responsive center-block" muted="" loop="" playsinline="" autoplay="" src="https://cdn.dribbble.com/users/192407/videos/24673/themes_animation.mp4" alt="image preview"></video>

### 為什麼需要深色模式？
深色模式不僅不護眼，在很多場景其實反而會降低閱讀效率。有研究視覺研究表明，人類天生就是更喜歡前暗後亮(dark-on-light)。
深色模式未必所有產品的設計趨勢，但好的深色模式卻讓不少必要的場景體驗更加人性化。

**Android開發者介紹深色模式兩大優勢：**
- **省電**──新款的螢幕在全黑畫面不會發亮,所以大幅減少電量的消耗(Google更指出，使用暗黑模式主題看YouTube，將可比一般模式省下43%的功耗。)
- **可視性**──為暗光環境、強光敏感的用戶，降低眩光，提供更好的可視性

[Android App Dark Theme（暗黑模式）配適指南](https://zhuanlan.zhihu.com/p/110629634)

[實測深色模式电量消耗降低30% ](https://www.sohu.com/a/348478924_114838)

### [範例一] Chrome瀏覽器設定強制深色模式

1. 請複製貼上網址 **chrome://flags/#enable-force-dark**
2. 第一個Defaulte下拉改選擇 **Enabled**
3. 系統會自動重新開啟Chrome瀏覽器,所有網頁即強制進入**深色模式**




### [範例二] 可自身切換的Facebook
切換位置︰「選單」→「設定和隱私」→「夜間模式」→「開啟」(若選擇「系統」App 風格就會隨 iOS 系統自動轉換)



### 深色模式設計提醒
* 避免純黑色(深灰色可減輕眼睛疲勞，建議#121212)
* 避免在深色主題上使用飽和色(會產生視覺上的振動難閱讀)
* 符合無障礙色彩對比標準(確保深色模式仍然清晰易讀)
* 字體與背景用色要更有層次(特別是內文白色字的深淺)
* 不同光源測試設計(確保可讀性)


---
**資料來源：**
- [「UI設計」8個技巧做好深色主題設計](https://kknews.cc/zh-tw/design/lmb3xa9.html)
- [So Dark! Material Design 的 dark theme 初登場，它可以為設計帶來什麼變化呢？](https://medium.com/zaou/material-dark-theme-9bdbe88670b7)
- [Design for the Dark Theme](https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5)
- [Dark theme](https://material.io/design/color/dark-theme.html)

---

# 2022年設計元素趨勢
## ➤ 復古革命
隨思維跳躍、設計風格五花八門的現在，有一種設計是在往反方向走，往更早的年代吸取靈感。為了表現復古，版面、設計以大字報的感覺呈現，搭配可見線框，以及接近拼貼風或普普藝術的用色，彷彿又回到那個沒有網路的復古年代。

### 《復古的字體排版回歸》
大家似乎已經厭倦了超級現代的設計風格，更加複古的襯線字體和肆意張揚的手寫字體在網站設計中重新回歸。與之前流行的非襯線字體相比，襯線字體有著更加吸引人的線條和邊角，這些精緻的細節正是大家沉迷復古設計的原因之一。

### 《早期流行的設計元素》
網頁設計已有20多年的歷史了，如今有一部份的設計師開始走起復古懷舊的路線，讓像素圖形、彈出視窗、計數器、GIF動畫重新回歸大眾的視線中，希望可以讓人們感受早期所流行的網路設計元素。

---
### 《復古設計範例》
> [ANITA冰淇淋品牌](https://www.anita-gelato.com/about/)
黑白色調、類似報紙般簡單排版、1px像素
---
> [Twitch](https://brand.twitch.tv/)
復古美學和當代設計完美結合！
帶點普普風華麗的紫色、粉色和黃色漸變有明顯的80年代特徵，滾動觸發的動畫讓探索變得更加有趣。
---
>[Block Rage](https://blockrage.pgs-soft.com/)
由PGS Software工作室設計的多人遊戲。遊戲將您帶入一個裝飾有80年代元素的房間、指示您向右移動的像素化手、DOS界面的老電腦，復古元素濃烈。
---
>[Pluto App](https://www.pluto.app/)
復古美學和當代設計完美結合！
華麗的紫色、粉色和黃色漸變有明顯的80年代特徵，滾動觸發的動畫讓探索變得更加有趣。
---
>[Miu Miu — Twist香水](https://www.miumiu.com/miumiu-twist/en/index.html)
強大的洋紅色字體、大像素與2D圖形的視覺氛圍增強網站的複古感！

### 復古設計元素

* 色調：結合懷舊濾鏡與陳舊色調
* 字體：書寫體襯線體與偏大字級
* 元素：引發舊時回憶物件與插圖
* 質感：懷舊像素感與粗粒子網點

---
**資料來源：**
- [16個正在流行的網頁設計風格，你試過幾個？](https://www.gogoshark.com/blog/design/web-design/topic-78766955/)
- [當代網頁設計美學，打造令人難忘的網頁視覺效果！](https://www.pongo.com.tw/web-visual-effects/#h--10)
- [2020年20大復古設計趨勢靈感](https://medium.muz.li/top-20-retro-design-trend-inspiration-2020-84a06682b1)
- [現代網頁設計中的 80 年代復古風格探索](https://medium.muz.li/an-exploration-of-the-80s-retro-style-in-modern-web-design-5fff0ff1031d)