> [time=Thu, Jun 16, 2022 4:32 PM]

# 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](https://www.facebook.com/)
切換位置︰「選單」→「設定和隱私」→「夜間模式」→「開啟」(若選擇「系統」App 風格就會隨 iOS 系統自動轉換)



### [範例三] 一鍵變色的Naive UI
更直覺一鍵變色

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


**資料來源：**
- [「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/)
黑白色調、素描式插畫、模擬印刷的網格背景、內文襯線體與斑駁懷舊的效果、低彩度色調的影像照片、古典的裝飾分隔線
---
> [普普風的Twitch](https://brand.twitch.tv/)
跟上一個例子風格大不同，Twitch走的是復古和當代設計完美結合！
帶點普普風與高彩度華麗的紫、粉、黃漸變色有明顯的80年代特徵，狂野的字體與有點無厘頭的版型，加上滾動觸發的微動畫也讓探索變得更加有趣。
---
>[小時候的電動遊戲 Block Rage](https://blockrage.pgs-soft.com/)
這是一個可多人遊戲的網站，網頁一開始就帶入一個裝飾有80年代元素的房間，並指示您向右移動的像素化手、DOS界面的老電腦與視窗捲軸與電子配樂，復古元素濃烈，特別挑選可引發懷舊記憶的小遊戲。
---
>[完美融合了過去和未來 Pluto App](https://www.pluto.app/)
設計師在整個網站上散佈了簡單的箭頭圖標——這是另一個明顯的80年代特徵，因為在那個時代，圖像和線條藝術非常流行，搭配精彩的3D動畫和懸停效果感覺又很未來。
---
>[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)

> [name=Pinky]