此前在一些設計網站看到一些設計趨勢相關的內容，但大多是屬於全品類的趨勢。因此，我想通過我自己的了解和一些收集，重新整理一些屬於移動UI設計方向的設計趨勢，並且進行一些設計相關的分析。這樣或許對於許多移動UI設計師來說會更加的實用一些，而非只是純粹的停留在了解趨勢而已。同時希望這些內容可以起到拋磚引玉的作用，歡迎大家一起來探索及討論。

暗夜風（深色模式）

深色模式作為2020的主流設計趨勢之一，早已上升到系統級別的設計了（ iOS、material design），另外還有一些主流的APP也跟隨系統進行了深色模式的設計。

1. iOS & Material design

作為主流的手機系統，對於一些手機APP的設計非常具有指導意義，他們在其官網有有一些相關的指引，建議大家可以去對應的網站詳細檢視。

一些國內的安卓系統的也深色模式的設計，如OPPO、魅族、華為等。

2. 一些主流APP的深色模式

國內外的APP都有用使用到深色模式，部分跟隨系統的設定而變化，例如Instagram、知乎、微信、優酷；而部分則是以主題化的方式進行呈現，例如YouTube、QQ音樂。

3. 深色模式的設計建議

深色模式的設計不能簡單粗暴的進行反色處理或變暗處理，處理不當可能還會產生反效果。因此需要整體考慮深色調的使用規則和邏輯，這裡參考Material Design的規範總結了幾個較為關鍵的點。

4. 使用基礎色進行延展

在設計之初你可以先設定一個最基礎的深色，並且使用這個色調去貫穿整體深色模式的設計。儘量使用深灰色而非純黑色，因為在深灰色上使用淺色文字的對比相對來說較弱些，可以減輕眼睛閱讀的疲勞度。

從以下案例來看，「000000」（純黑色）會顯得顏色過深淺色文字過亮；「111111」和「222222」則適中；「333333」相對來說相對較亮，雖然文字閱讀並無問題，但需要考慮往上疊加後整體設計是否偏灰。

5. 通過層級疊加的顏色變化

為你的介面層級設計一個合理的透明度疊加變化規則，例如以底層為基準，往上每一層都疊加2%的透明度變化。如下：底層疊加0%，導航層疊加3%，內容層疊加6%，彈出類浮層疊加9%，操作反饋層疊加12%。以上是一個舉例，實際則需要根據你的設計需要進行設定。

6. 優化深色下的亮色對比程度

深色的背景下，文字或圖示的飽和度或亮度過高會產生強對比，容易造成視覺疲勞，因此從白色切換到深色模式下的設計需要進行適當的調整，通過降低飽和度或明度來達到視覺和諧的程度。

7. 小結

深色模式在各大手機系統及主流APP的推進下，相信會越來越多的APP會跟隨設計。但其實我們還需要思考，深色模式的設計解決了什麼問題？是否都需要深色模式的設計？我們可以一起來探討下。

iOS 13 官方設計指南：深色模式篇中文版

官方的指南雖然篇幅較短，但更側重於細節層面，仍然可以幫助你在真正上手新系統及深色設計之前，對相關設計原則，特別是顏色的適配機制與方法進行了解。

新鮮多彩的顏色

年輕人一直是移動網際網路的主力軍，年輕化的UI設計風格一直是UI設計師所追求的方向之一。年輕、活力、朝氣是年輕化的表現特徵，而設計師通過新鮮、多彩、大膽的顏色來表達這些特徵是更容易產生設計共鳴。

如下面的案例，就是通過多顏色搭配、漸變色、對比色等設計方式來表達年輕化的設計。

1. 多顏色搭配

從個人的經驗中總結，如果只使用一種顏色來設計往往容易使介面變得單調，且具有應用的侷限性。而多顏色搭配的設計更能讓整體的UI介面變得豐富有層次，並且更加貼合年輕化的趨勢。這裡建議一個主色搭配多個次級顏色，整體上讓使用者感知到整體的品牌色調，但卻不會覺得單調。

如以下的一些APP的設計，也是使用主的品牌色再結合一些輔助色進行設計，來達到年輕化和顏色豐富感。

2. 大膽使用漸變色

漸變相比純色的表達可以更好的拓展顏色的使用，提升顏色的跨度表現，豐富設計質感。漸變跨度的大小決定顏色的衝突感，小漸變表現柔和的輕質感，大漸變提升色調的對比碰撞可以讓介面表達更加鮮明、活力。

漸變對比

不同的漸變效果會得到不同的視覺感受，更會影響整體的設計風格。而具體使用哪一種漸變則需要依賴於設計師對整體設計風格的定調和對產品調性對把握。

運用撞色

通過對比色或鄰近色的使用讓漸變更加富有多樣性，提升用色的層次感。

更多漸變的方式

通過不同的疊加方式，可以迸發出更加不同的漸變效果。（以下的內容只作為案例展示，不限制有更多的表現形式）

3. UI中多彩的體現

UI設計的多彩化主要表現在一些控制元件或元件中，例如我們可以通過圖示、按鈕、內容模組、插圖、背景、投影等內容的設計來豐富整體介面的顏色應用。

圖示

我們可以通過漸變疊加、對比色使用，又或者2色疊加、3色疊加等多種多樣的方式來營造圖示的多彩感。

通過使用漸變色提升按鈕的質感，讓原本簡單的按鈕變得更加精緻並增強按鈕的可點選性。當然是否使用漸變需要根據整體APP的視覺風格而定，以下有幾點漸變按鈕的建議：

內容模組

在模組的設計中使用不同的色調來區分內容並來營造多彩的氛圍設計表達，讓整體的模組設計避免過於單調，提高視覺衝擊力。

空白頁插圖

空白頁的設計不再是簡單的影象，而是使用顏色較為多彩的插畫形式，在情感表達上更加豐富和具象。

多彩背景

多彩的背景結合簡單的反白文字，在氛圍上更具有調性和視覺衝擊力，同時兼顧內容的表達。

彩色投影

在多彩的元素下使用帶顏色的投影而非使用簡單的黑色投影，更能烘托多彩的內容元素，整體的感受是一種近似環境色影響的變化，而非簡單的遮擋投影變化。結合多彩的設計，讓你的設計更加精彩奪目，常見於一些彩色的內容卡片或彩色的按鈕中。

4. 小結

多彩的設計固然比簡潔的設計來得更加吸引眼球，但更多時候需要把控整體介面的平衡，而非天花亂墜。建議可以參考上面列舉的一些內容去嘗試，是否達到你想要的多彩氛圍。

新擬物風格

2019年底就在dribbble上就開始有人預言擬物化的風格，這是一種新擬物化設計風格，與以往的擬物化設計不完全一樣，是一種介於扁平化和擬物化的新風格嘗試。主要是通過光影的變化來突出內容的區域或模組設計，整體感覺相比扁平化的設計來說會更加具有氛圍性和視覺衝擊感。

此類風格是否適合所有型別的APP場景還有待探討，或許在一些工具類的APP可以考慮進行嘗試，例如：音樂播放器、計算器、簽到類、操作工具類APP，在UI設計上可以考慮在部分按鈕、卡片式設計、表單類的內容上進行嘗試。

1. 基本原理

最基礎的虛擬物化效果分別有「凸起效果」和「凹陷效果」，兩者差異化在於對光影的處理方式不同。凸起效果使用外投影來實現，疊加層級依次為：基層-亮投影-暗投影；凹陷效果效果使用內投影來實現，疊加層級依次為：亮投影-暗投影-基層。亮、暗投影的數值建議偏移值形成正負並保持一致，透明度依據實際情況進行調整。

2. 結合顏色

以深色、單色、漸變三組顏色進行了嘗試，整體上來的處理方式都是以基層的顏色為基礎對HSB進行調整，深色與單色的處理方式較為一致，漸變色的投影或陰影則需要根據不同的顏色進行調整，來達到合適的效果。

我們可以通過HSB的顏色模式來進行微調，達到明暗投影的效果

3. 設計方式拓展

常態的表現往往並不難滿足我們所有的設計，因此我們可以基於常態的設計樣式再結合其他的設計方式，讓整體的感受更加豐富。例如下面的一些例子：

4. 小結

新擬物化的設計雖然新穎，但是否適合所有的設計？這個是值得思考的問題。面對一個新的趨勢，建議可以多去研究和了解這方面更深層的內容，這樣在實際應用才能更加得心應手。

2020 年最火的新擬物化設計趨勢，快來了解下！

用一篇文章來了解一下短時間內風靡設計圈，被稱為擬物風格 2.0 ，引起廣泛熱議、使用的風格 —— Neumorphism。

Tab bar 圖示動畫

Tab bar 作為整個APP的第一觸點，給使用者傳遞的理念及資訊在整個APP中具有不可替代的重要性。我們的第一感受是粗糙或是精緻，都會通過這個簡單的操作切換而得到。因此 tab bar 的設計，往往也檢驗著著整個APP設計是否精緻的標準。

Tabbar圖示動畫的作用主要有：1.提升操作的愉悅感和期待感；2.增強第一視覺焦點的精緻度；3.通過動畫的設計傳遞品牌的設計理念。

1. 圖示動畫的多樣性

tabbar圖示動畫的設計是多種多樣的，包括有位移、劃線、彈性、縮放、透明變化、抖動、填充等等，不同的方式表達出來的設計感受也會有差異。具體可以檢視之前寫過的一篇文章《Tabbar圖示動畫設計》進行深入了解：

超全面！大廠都在用的 Tab Bar 圖示動效設計型別總結

相信很多人都會留意到 手機QQ 切換底部標籤欄時有趣的動畫效果，Tab bar 作為整個 APP 的第一觸點，該如何做好它的動效設計，有哪些動效設計型別和組合方式？本文騰訊設計師為你全面揭祕！

2. 圖示動畫的工具

製作動畫的工具有多種多樣，作為設計師無需被工具而限制。而我最常用的有Principle和AE的結合，在設計前期我會使用Principle進行demo設計輸出，在確定之後通過AE進行二次繪製並輸出動畫檔案，目前與開發對接的格式大概有APNG、Lottie、PNG序列幀。

Principle的優點在於操作簡便，自帶的動畫命令基本可以滿足我們對於圖示動畫的需求，缺點在於無法生成實現的格式；反之，AE實現動畫的方式更多樣性，但在使用中並不符合效率性，因此兩者結合使用更能滿足效率和可實現性。

卡片式的設計

卡片式設計對於我們來說並不陌生，從設計類網站上或一些APP中也會看到很多的卡片式設計的案例，卡片式設計也是UI設計中最常用的方式之一。

而隨著設計趨勢的變化，卡片的設計的設計形式也在發生著變化，接下來從幾個關鍵點來分析新的卡片設計趨勢。

1. 柔和的圓角

從dribbble或IOS的設計上，可以很明顯的感受到卡片圓角的變化，大圓角的卡片設計方式變得越來越常見，當然也不是越大越好，設計師需要從實際的設計中去思考和嘗試。

大小的差異化呈現出不同的視覺感受和風格差異，我們在設計時更多需要考慮我們設計的 產品風格或氣質是適合大圓角還是小圓角，而非依據一些設計網站上的流行趨勢。因此基於不同的風格或者實際內容場景下進行設定才更為合理。

2. 自然的投影

新的卡片設計更加趨向自然的投影，減弱投影帶來的切割感覺，提升介面的平整性。從以下三種效果對比，合理的投影數值可以讓卡片的表現更加自然，太深太大的投影會顯得整體卡片過於厚重，太淺太小的投影則顯得過度生硬。

騰訊超全乾貨，幫你完整掌握「卡片式設計」知識點

卡片式設計也是 UI 設計中最常用的方式之一，本文騰訊設計師結合實戰案例，用一篇深度好文幫你掌握卡片式設計要點。

流暢的互動反饋

流暢的動效可以給人耳目一新的感受，讓使用者感受到動效帶來的愉悅性。從設計的角度來看，互動動效並不是錦上添花而是UI設計的必需品，它不應該被強調有或無，而應該被強調好或不好，好的互動反饋動效可以讓整體的設計更加具有品牌調性。

1. 了解動畫基礎原理

動畫的方式可以有很多不同的方式，並且在很多設計網站都能了解到，下面從以下幾個案例來進行分析，並進行優化嘗試建議。基於簡單的動效效果，如何通過設計優化讓動畫變得更加不一樣且具有差異化。

動畫的基礎原理

以AE作為範例來說，動效最基礎的原理是由「位移、縮放、旋轉、透明度」等方式結合「時間軸和關鍵幀」而產生的視覺補間效果，一個動效是否流暢（快或慢）往往取決於一段時間內所發生的幀數，幀數越少位移距離越大（縮放變化越大、旋轉度數越多）則速度越快。了解這些基礎知識並進行結合使用，便可以設計出很多不一樣的動畫效果。

動畫的基本運動規則

以principle作為範例來說，動畫的基本運動規則包括有：預設、緩入、緩出、緩入緩出、彈性、線性、等效果。我們可以直接使用預設的數值，亦可根據自己的習慣對這些動畫效果進行微調設定來達到我們想要等效果。（不同的demo軟體的基本運動規則及應用上差異性基本不會太大，我們只需要選擇一款我們習慣的即可。）

2. 常見的動效反饋模組

我們知道互動動效反饋的重要性，但也需要明確哪些模組可以在設計中進行應用，這裡進行了一些梳理其中包括：頁面切換、對話方塊、上滑浮層、彈出式選單、觸發縮放類（如檢視圖片）、頁面導航、分頁滾動、小模組滑動、開關類、按鈕或模組觸發的反饋…等等。

3. 案例嘗試

常規的動效方式基本能夠滿足常規的需要，而設計師在設計的時候更需要追求一些動效的給使用者帶來的愉悅感和視覺衝擊力。

連動式頁面切換

很多頁面的轉場效果是可以被設計為連動的轉場方式，主要常見於商品詳情頁、插圖詳情頁、小說/書籍/專輯等類的詳情頁。如下案例，左邊為常規的互動方式，我們可以通過差異化的互動設計，讓整體的體驗更加自然流暢。

滑出式模組

滑出式模組的設計動畫設計需要強調怎麼出現怎麼收起，通過視覺動線動的引導並告知使用者模組的具體來源，並且展開或收起的時間是否需要一致也值得去思考。如下案例，通過動畫細節的優化，使用彈性的動畫效果讓滑出浮層更加具有生命力。

滾動表現

滑動操作是非常常見的設計內容，無論是模組的滑動還是整體頁面的滾動。如下案例，左邊是比較常見的整體滑動，但如果每個內容之間賦予一個視覺時間差，那整體的視覺效果和體驗感受也會變得更加不一樣。

觸發反饋

一些常規的內容，例如按鈕、列表、圖示按鈕、卡片..等的點按可以結合動效的細節變化來增強反饋感受。但我們在實際應用重色是否都需要如此強調，則需要根據實際的情況而定。

4. 小結

這裡我們可以思考兩個問題：

1.動效的必要性？

2.動效如何進行設計？

從個人的觀點來說，動效是非常具有必要性的，除了可以讓整體的感受更加具有差異化，更可以拓展設計師對於每一個設計的思考角度。另外動效的設計應該是和靜態的介面設計一樣，都需要進行系統性的思考，應用在每一個細節的效果及動畫引數都需要保持高度的一致性。

留白增強呼吸感

留白的設計可以讓我們的介面變得更有呼吸感，相比於緊湊的設計，適當的留白可以讓人在閱讀時更加具有放鬆的心理暗示。留白是一種對比手法或方式，而非純粹的減少內容來達到留白的目的，在有限的手機螢幕內容我們需要清楚哪些位置或內容可以做到適當留白。

1. 頂部留白

在介面的頂部減少內容的呈現或加大內容與介面頂部的間距來達到留白的方式，讓使用者從一開始的就降低視覺壓迫性。例如在一些設計APP的遊戲詳情頁、個人資料頁等較為常見。

2. 去線留白

通過減少線的使用以及間距的調整來達到留白的效果，強調內容的自然視覺分割槽，減少線對內容的資訊干擾。例如在一些列表或具有明確大標題的內容模組下可以嘗試減少線的使用。

3. 藉助標題留白

模組與模組之間使用較大號的字型，通過大字型的支撐產生更加自然舒適的空間留白。例如iOS的系統介面的頂部大標題設計。

4. 增加邊距留白

適當增加內容與內容之間、內容與螢幕之間的間距來優化介面的空間感，達到留白的效果，增強內容的聚焦。

5. 減少重色

減少大面積的重顏色使用，降低視覺層次，讓整體介面的設計更加輕量化、扁平化。例如上下導航的顏色，在無需過渡強調品牌色的情況下，可以考慮使用白色或淺色來增強整體介面的呼吸感和留白效果。

6. 小結

在手機螢幕空間相對有限的情況下，我們的視覺會更加聚焦。過於密集的設計往往更會造成視覺疲勞，因此更需要多去思考內容設計的空間感，適當的留白可以降低視覺疲勞，提高視覺聚焦和閱讀效率。

最後總結

每年都會有新的設計趨勢變化，但實際上應用的設計方法都不會有太大差異。了解設計趨勢可以更好的幫助我們去進行設計思考，然後再結合日常鍛鍊的設計基礎能力作出更好的設計。趨勢幫助我們明白往哪個方向做，而基礎幫助我們更好的達到方向。