原文地址：https://520526.xyz/1400/
此前，我在一些設(shè)計網(wǎng)站上看到了一些與最新 設(shè)計趨勢 相關(guān)的內(nèi)容，但大部分都屬于整個類別的趨勢。因此，我想通過自己的理解和收集整理一些屬于移動用戶界面設(shè)計方向的設(shè)計趨勢，并進(jìn)行一些與設(shè)計相關(guān)的分析。這對許多移動用戶界面設(shè)計師來說可能更實用，而不僅僅是保持潮流。同時，希望這些內(nèi)容能夠起到吸引有價值貢獻(xiàn)的作用。

1、暗夜風(fēng)的夜間模式/深色模式

夜間模式，作為2020年的主流設(shè)計趨勢和賣點之一，已經(jīng)被運用到了系統(tǒng)層級（IOS，material design）。并且，主流應(yīng)用也遵循系統(tǒng)設(shè)計的夜間模式，基本實現(xiàn)夜間模式的全面設(shè)計和覆蓋。

material design與IOS

作為主流的手機(jī)系統(tǒng)，ios對一些手機(jī)應(yīng)用程序的設(shè)計具有重要的指導(dǎo)意義。并且蘋果的官方網(wǎng)站上也有這一些相關(guān)的指南，建議你可以去蘋果官網(wǎng)詳細(xì)查看。

同時，一些國內(nèi)的安卓系統(tǒng)的也深色模式的設(shè)計，如OPPO、魅族、華為等。

主流APP的夜間深色模式

現(xiàn)今國內(nèi)外的APP軟件都有用使用到深色模式，這也是目前 最新設(shè)計趨勢，大部分都可以做到跟隨系統(tǒng)的設(shè)定而變化，例如Instagram、知乎、微信、優(yōu)酷；而少部分呢則是以主題化的方式進(jìn)行呈現(xiàn)，例如YouTube、QQ音樂。

夜間模式設(shè)計建議

夜間模式的設(shè)計不能只簡單、粗暴地進(jìn)行調(diào)光處理或反色處理，不當(dāng)?shù)奶幚砗苡锌赡墚a(chǎn)生相反的效果。因此，我們有必要從整體上考慮和設(shè)計暗色調(diào)的規(guī)律和邏輯，并結(jié)合材料設(shè)計規(guī)范總結(jié)幾個要點。

使用基色作為擴(kuò)展

在設(shè)計開始時，可以先設(shè)定好最基礎(chǔ)的深色，然后用這個色調(diào)貫穿整個設(shè)計的深色模式。試著用深灰色代替純黑色，因為相比之下在灰色上使用淺色文本的對比相對較弱，可以減輕閱讀時眼睛的的疲勞程度。

從下列情況來看，“000000”(純黑色)將出現(xiàn)太暗，淺色文本太亮；"111111"和"222222"比較亮；"333333"相對明亮，盡管文本閱讀不是問題，但需要考慮疊加后的總體設(shè)計是否為灰色。

通過層級疊加的顏色變化

想要設(shè)計一個合理的透明度疊加的變化規(guī)則，例如以底層為基準(zhǔn)，往上每一層都疊加2%的透明度變化：底層疊加0%，導(dǎo)航層疊加3%，內(nèi)容層疊加6%，彈出類浮層疊加9%，操作反饋層疊加12%。這是一個非常簡單的例子，實際中你可以根據(jù)你的需要來進(jìn)行設(shè)計。

優(yōu)化深色下的亮色對比程度

在深色的背景下，文字或圖標(biāo)的飽和度或亮度過高會產(chǎn)生強(qiáng)對比，很容易造成視覺疲勞，因此從白色切換到深色模式下的設(shè)計我們也需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過降低飽和度或明度來達(dá)到視覺和諧的程度。

小結(jié)

深色模式是我們在日常使用和閱讀手機(jī)內(nèi)容的眾望所歸，同時深色模式在各大手機(jī)和軟件廠商的推動下，相信會越來越多的APP會跟隨設(shè)計，并且設(shè)計的更加完善更加優(yōu)越。同時我們還需要思考，深色模式的設(shè)計解決了什么問題？給我們帶來了哪些便利？是否所有的內(nèi)容都有必要深色模式的設(shè)計？

二、青春洋溢的色彩

年輕人一直以來都是是移動互聯(lián)網(wǎng)的主力軍和生力軍，年輕化的UI設(shè)計風(fēng)格也一直是UI設(shè)計師們所追求的方向之一。年輕、朝氣、活力是年輕的表現(xiàn)特征，新鮮、多彩、大膽的顏色則是設(shè)計師們表達(dá)這些特征是更容易產(chǎn)生設(shè)計共鳴。

下面的這幾個案例，就是通過多顏色搭配、漸變色、對比色等設(shè)計方式來表達(dá)年輕化的設(shè)計。

多色彩搭配

我個人的經(jīng)驗中總結(jié)，如果只使用一種顏色來設(shè)計一個界面往往容易使界面變得單調(diào)乏味，缺乏張揚青春的情緒，且具強(qiáng)烈的局限性。而多色彩搭配的設(shè)計更能讓整體的UI界面變得豐富有層次，更加符合年輕、張揚、活力的趨勢。

一個簡單的主色搭配多個次級顏色，便能讓使用者感知到整體的品牌整體的色調(diào)和統(tǒng)一，但卻不會覺得單調(diào)乏味。

下面的APP設(shè)計，便是使用主要的品牌色結(jié)合輔助色進(jìn)行搭配和設(shè)計，來達(dá)到界面效果的年輕化和從、色彩的豐富感。

大膽的使用漸變色

漸變相比純色的表達(dá)可以更好的拓展顏色的使用，提升顏色的跨度表現(xiàn)，豐富設(shè)計質(zhì)感。漸變跨度的大小決定顏色的沖突感，小漸變表現(xiàn)柔和的輕質(zhì)感，大漸變提升色調(diào)的對比碰撞可以讓界面表達(dá)更加鮮明、活力。

漸變對比

不同的漸變效果會得到不同的視覺感受，更會影響整體的設(shè)計風(fēng)格。而具體使用哪一種漸變則需要依賴于設(shè)計師對整體設(shè)計風(fēng)格的定調(diào)和對產(chǎn)品調(diào)性對把握。

運用撞色

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

更多漸變的方式

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

UI中多彩的體現(xiàn)

UI設(shè)計的多彩化主要表現(xiàn)在一些控件或組件中，例如我們可以通過圖標(biāo)、按鈕、內(nèi)容模塊、插圖、背景、投影等內(nèi)容的設(shè)計來豐富整體界面的顏色應(yīng)用。

圖標(biāo)

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

按鈕

通過使用漸變色提升按鈕的質(zhì)感，讓原本簡單的按鈕變得更加精致并增強(qiáng)按鈕的可點擊性。當(dāng)然是否使用漸變需要根據(jù)整體APP的視覺風(fēng)格而定，以下有幾點漸變按鈕的建議：

內(nèi)容模塊

在模塊的設(shè)計中使用不同的色調(diào)來區(qū)分內(nèi)容并來營造多彩的氛圍設(shè)計表達(dá)，讓整體的模塊設(shè)計避免過于單調(diào)，提高視覺沖擊力。

空白頁插圖

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

多彩背景

多彩的背景結(jié)合簡單的反白文字，在氛圍上更具有調(diào)性和視覺沖擊力，同時兼顧內(nèi)容的表達(dá)。

彩色投影

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

彩色投影來源于元素本身，通過對顏色對透明度調(diào)整來達(dá)到效果。

小結(jié)

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

三、新擬物風(fēng)格的設(shè)計趨勢

2019年底就在dribbble上就開始有人預(yù)言擬物化的風(fēng)格的 設(shè)計趨勢，這是一種新擬物化設(shè)計風(fēng)格，與以往的擬物化設(shè)計不完全一樣，是一種介于扁平化和擬物化的新風(fēng)格嘗試。主要是通過光影的變化來突出內(nèi)容的區(qū)域或模塊設(shè)計，整體感覺相比扁平化的設(shè)計來說會更加具有氛圍性和視覺沖擊感。

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

基本原理

最基礎(chǔ)的新擬物化效果分別有“凸起效果”和“凹陷效果”，兩者差異化在于對光影的處理方式不同。凸起效果使用外投影來實現(xiàn)，疊加層級依次為：基層-亮投影-暗投影；凹陷效果效果使用內(nèi)投影來實現(xiàn)，疊加層級依次為：亮投影-暗投影-基層。亮、暗投影的數(shù)值建議偏移值形成正負(fù)并保持一致，透明度依據(jù)實際情況進(jìn)行調(diào)整。

結(jié)合顏色

以深色、單色、漸變?nèi)M顏色進(jìn)行了嘗試，整體上來的處理方式都是以基層的顏色為基礎(chǔ)對HSB進(jìn)行調(diào)整，深色與單色的處理方式較為一致，漸變色的投影或陰影則需要根據(jù)不同的顏色進(jìn)行調(diào)整，來達(dá)到合適的效果。

我們可以通過HSB的顏色模式來進(jìn)行微調(diào)，達(dá)到明暗投影的效果

設(shè)計方式拓展

常態(tài)的表現(xiàn)往往并不難滿足我們所有的設(shè)計，因此我們可以基于常態(tài)的設(shè)計樣式再結(jié)合其他的設(shè)計方式，讓整體的感受更加豐富。例如下面的一些例子：

小結(jié)

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

四、Tab bar 圖標(biāo)動畫

作為整個APP的第一個接觸點，選項卡欄具有將想法和信息傳遞給整個APP中的用戶的重要性。 我們的第一感覺是粗糙或精致的，這將通過此簡單的操作開關(guān)獲得。 因此，標(biāo)簽欄的設(shè)計還經(jīng)常檢查整個APP的設(shè)計是否精美。

Tabbar圖標(biāo)動畫的作用主要有：1.增強(qiáng)第一視覺焦點的精致度；2.提升操作的愉悅感和期待感；3.通過動畫的設(shè)計傳遞品牌的設(shè)計理念。

圖標(biāo)動畫的多樣性

tabbar圖標(biāo)動畫的設(shè)計是多種多樣的，包括有位移、劃線、彈性、縮放、透明變化、抖動、填充等等，不同的方式表達(dá)出來的設(shè)計感受也會有差異。

圖標(biāo)動畫的工具

制作動畫的工具有多種多樣，作為設(shè)計師無需被工具而限制。而我最常用的有Principle和AE的結(jié)合，在設(shè)計前期我會使用Principle進(jìn)行demo設(shè)計輸出，在確定之后通過AE進(jìn)行二次繪制并輸出動畫文件，目前與開發(fā)對接的格式大概有APNG、Lottie、PNG序列幀。

Principle的優(yōu)點在于操作簡便，自帶的動畫命令基本可以滿足我們對于圖標(biāo)動畫的需求，缺點在于無法生成實現(xiàn)的格式；反之，AE實現(xiàn)動畫的方式更多樣性，但在使用中并不符合效率性，因此兩者結(jié)合使用更能滿足效率和可實現(xiàn)性。

五、卡片式的設(shè)計

卡片式設(shè)計對于我們來說并不陌生，從設(shè)計類網(wǎng)站上或一些APP中也會看到很多的卡片式設(shè)計的案例，卡片式設(shè)計也是UI設(shè)計中最常用的方式之一。

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

柔和的圓角

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

大小的差異代表了不同的視覺感受和風(fēng)格差異。 在設(shè)計時，我們需要考慮設(shè)計的產(chǎn)品的樣式或氣質(zhì)是否適合大圓角或小圓角，而不是根據(jù)某些設(shè)計網(wǎng)站上的流行趨勢。 因此，基于不同樣式或?qū)嶋H內(nèi)容場景進(jìn)行設(shè)置更為合理。

自然的投影

新的卡設(shè)計更自然地投影，減弱了投影帶來的切割感，并改善了界面的平坦度。 從以下三個效果的比較來看，合理的投影值可以使卡的性能更自然，對于整個卡來說，太深和太大的投影似乎太厚，而太淺和太小的投影 小會顯得過遲。

六、流暢的交互反饋

流暢的動效會給人耳目一新的感受，讓使用者感受到動效帶來的愉悅性。從設(shè)計的角度來看，交互動效并不是錦上添花而是UI設(shè)計的必需品，它不應(yīng)該被強(qiáng)調(diào)有或無，而應(yīng)該被強(qiáng)調(diào)好或不好，好的交互反饋動效可以讓整體的設(shè)計更加具有品牌調(diào)性。

微交互是建立在移動端上微妙視覺效果的小動畫，而圖標(biāo)動畫是微交互其中的一種。它的目的是吸引用戶，讓用戶感覺順暢、愉悅。為此設(shè)計師借此創(chuàng)造出打動人心的瞬間。

掌握動畫基礎(chǔ)原理

動畫的方式很多，可以在許多設(shè)計網(wǎng)站上學(xué)習(xí)。 以下是以下情況的示例，以分析并為優(yōu)化嘗試提供建議。 基于簡單的運動效果，如何通過設(shè)計優(yōu)化使動畫更具差異性和差異性。

動畫的基礎(chǔ)原理

我們以AE作為范例來說，動效最基礎(chǔ)的原理是由“位移、縮放、旋轉(zhuǎn)、透明度”等方式結(jié)合“時間軸和關(guān)鍵幀”而產(chǎn)生的視覺補(bǔ)間效果。運動效果是平滑的（快還是慢） 通常取決于一段時間內(nèi)發(fā)生的幀數(shù)。 幀數(shù)越少，位移距離越大（變焦變化越大，旋轉(zhuǎn)次數(shù)越多），速度越快。 當(dāng)我們理解這些基礎(chǔ)知識并將它們結(jié)合使用時，我們可以設(shè)計出許多不同的動畫效果。

動畫的基本運動規(guī)則

以principle作為例子來講，動畫的基本運動規(guī)則包括有：默認(rèn)、緩入、緩出、緩入緩出、彈性、線性、等效果。我們可以直接使用默認(rèn)的數(shù)值，也可根據(jù)自己的習(xí)慣對這些動畫效果進(jìn)行微調(diào)來達(dá)到我們想要的效果。（不同的軟件的基本運動規(guī)則及應(yīng)用上差異性基本不會太大，我們只需要選擇一款我們擅長的便可。）

常見的動效反饋模塊

我們都知道交互反饋的重要性，但是我們也需要知道在設(shè)計中可以應(yīng)用哪些交互反饋的模塊。我將簡單地整理一下，包括：對話框、頁面切換、上滑層、觸發(fā)縮放類(如查看圖片)、彈出菜單、頁面導(dǎo)航、頁面導(dǎo)航、頁面滾動、切換類、小模塊滑動、按鈕或模塊觸發(fā)反饋…等等。

案例分享

傳統(tǒng)的運動效果基本上可以滿足一般需求，設(shè)計人員需要通過設(shè)計一些運動效果來追求給用戶帶來的愉悅和視覺沖擊。

連動式頁面切換

可以將許多頁面的過渡效果設(shè)計為連續(xù)過渡模式，主要在產(chǎn)品詳細(xì)信息頁面，插圖詳細(xì)信息頁面，小說/書籍/相冊等中找到。在以下情況下，傳統(tǒng)的交互模式顯示在左側(cè)。 通過差異化的交互設(shè)計，我們可以使整體體驗更加自然和流暢。

微動效

5G時代已經(jīng)到來，加上目前硬件升級，動效的普及已經(jīng)不再是難題。我們可以慢慢發(fā)現(xiàn)目前很多產(chǎn)品設(shè)計里面都開始加入動效，來提升產(chǎn)品體驗，同時動效也有很強(qiáng)的指導(dǎo)性質(zhì)。在某些場景下，使用動效能夠很好與用戶進(jìn)行互動交流，因此在2020年動效的使用將會越來越多。

3D插畫

隨著軟件技術(shù)的提升，3D插畫在這幾年中大受歡迎，很多應(yīng)用都使用3D渲染產(chǎn)品，如：星巴克、Keep、毒App等等，因為它真實立體、有著更高的轉(zhuǎn)化率。

滑出式模塊

滑出式模塊動畫設(shè)計的設(shè)計需要強(qiáng)調(diào)如何出現(xiàn)以及如何折疊，通過視覺動畫引導(dǎo)和告知用戶模塊的特定來源，以及展開或折疊的時間是否需要保持一致 也值得思考。 在以下示例中，通過優(yōu)化動畫細(xì)節(jié)，可以使用靈活的動畫效果使滑出的浮動層更加具有活力和生氣。

滾動體驗

滑動操作在系統(tǒng)和軟件當(dāng)中是一種非常常見的設(shè)計，無論是模塊的滑動或者是整體頁面的滾動。如下，左邊是比較常見的整體滑動，但如果每個內(nèi)容之間賦予一個視覺時間差，那整體的視覺效果和體驗感受也會變得更加不一樣。

觸發(fā)反饋

一些常規(guī)的內(nèi)容，例如按鈕、圖標(biāo)按鈕、列表、卡片……等的點按可以結(jié)合動效的細(xì)節(jié)變化來增強(qiáng)反饋感受。但我們在實際應(yīng)用中是否需要用到重色，則需要根據(jù)實際的情況而定。

小結(jié)

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

• 1.動效的必要性？
• 2.動效應(yīng)如何進(jìn)行設(shè)計？

從我個人的觀點來說，動畫效果是非常具有必要性的，除了可以讓整體的感受更加具有差異化，更可以拓展設(shè)計師對于每一個設(shè)計的思考角度和廣度，也是一種個人能力的深刻體現(xiàn)。

同時動效的設(shè)計應(yīng)該是和靜態(tài)的界面設(shè)計一樣，都需要進(jìn)行系統(tǒng)性的思考，應(yīng)用在每一個細(xì)節(jié)的效果及動畫參數(shù)都需要保持高度的一致性。

七、 留白增強(qiáng)呼吸感

留白的設(shè)計，可以讓我們的界面變得更有呼吸感，相比于緊湊的設(shè)計。適當(dāng)?shù)牧舭卓梢宰屓嗽陂喿x時更加具有放松的心理暗示。

留白是一種常見且頻繁使用到的對比手法，它并非純粹的為了減少內(nèi)容來達(dá)到留白的目的，作為設(shè)計師的我們應(yīng)該知道如何利用好有限的屏幕資源，我們需要知道哪些位置或內(nèi)容可以讓我們適當(dāng)?shù)牧舭?#xff0c;來讓用戶獲得更好的視覺和更舒適的體驗。

今年下半年觀察到Facebook旗下的Messenger應(yīng)用和前段時間雅虎更新他們家品牌語言的同時，也重新設(shè)計他們家所有產(chǎn)品。我們可以看到如下應(yīng)用截圖，基本去分割線，通過留白區(qū)分層級。這樣的好處可以減少分割線對內(nèi)容的干擾，界面呼吸感增強(qiáng)，達(dá)到簡約設(shè)計的目的。

頂部留白

在界面的頂部減少內(nèi)容或加大內(nèi)容與界面頂部的間距，這養(yǎng)的留白設(shè)計會讓使用者從一開始的就降低視覺壓迫性，同時還能獲得更加沉浸式的體驗。

例如：一些APP的游戲詳情頁、個人資料頁等大都采用此方法。

去線留白

在UI界面中，最常見的分隔方式是用細(xì)線對模塊進(jìn)行劃分。但隨著設(shè)計重心趨向簡約，注重內(nèi)容本身，傳統(tǒng)的分隔線方式就略顯多余。

根據(jù)格式塔親密原則，通過留白控制間距大小，可以清晰的劃分模塊層級，同時界面看起來也更加透氣、富有張力。可以看到QQ、飛聊、Gmail、Messenger等應(yīng)用都采用留白分隔。

通過減少分隔線的使用以及間距的調(diào)整來達(dá)到留白的效果，強(qiáng)調(diào)內(nèi)容的自然視覺分區(qū)，減少分隔線對內(nèi)容的信息干擾。

比如：在一些列表中或具有醒目大標(biāo)題的內(nèi)容模塊下可以試著減少線的使用。

借助標(biāo)題留白

在不同的模塊之間插入用較大號醒目的字體，通過大的字體來支撐并產(chǎn)生出更加自然和舒適的空間留白。很多的ui設(shè)計都遵循著這個道理，例如iOS的系統(tǒng)界面的頂部大標(biāo)題設(shè)計。

增加邊距留白

適當(dāng)增加內(nèi)容與屏幕之間、內(nèi)容與內(nèi)容之間的間隔距離，可以起到優(yōu)化界面的空間感，達(dá)到留白的效果，增強(qiáng)內(nèi)容的聚焦。

減少界面中的重色

減少ui界面當(dāng)中重顏色的使用，并且降低視覺的層次感，會讓設(shè)計醋回來的界面更加輕量化、更加扁平化，顯得更加簡約大方。例如下圖中上下導(dǎo)航欄的顏色，在無需強(qiáng)調(diào)品牌顏色的情況下，便可以使用白色或淺色來增強(qiáng)整體界面的呼吸感和留白效果。

小結(jié)

在手機(jī)屏幕空間相對有限的情況下，我們的視覺會更加聚焦。過于密集的設(shè)計往往更會造成視覺疲勞，因此更需要多去思考內(nèi)容設(shè)計的空間感，適當(dāng)?shù)牧舭卓梢越档鸵曈X疲勞，提高視覺聚焦和閱讀效率。

最后總結(jié)

每一年我們都會迎來新的設(shè)計趨勢，但歸根結(jié)底，它們應(yīng)用的設(shè)計方法都不會有太大差異。了解最新設(shè)計趨勢，可以幫助我們更好的去進(jìn)行設(shè)計思考，再結(jié)合日常鍛煉的設(shè)計基礎(chǔ)能力，就能讓我們制作出更好的設(shè)計。

UI設(shè)計的趨勢除了側(cè)重內(nèi)容和情感之外，還會根據(jù)不同設(shè)備載體、新的技術(shù)（3D、AR）而變化。但歸根結(jié)底還是以人為本，借用Adobe設(shè)計副總裁 Jamie Myrold 的一句話：如今設(shè)計師要思考的，絕不僅僅是設(shè)計一款A(yù)pp、網(wǎng)站或設(shè)計工具。我們要思考的是人類的需求，用戶的需求；打造真正人性化，多元化與包容性的設(shè)計。

總結(jié)

以上是生活随笔為你收集整理的设计-细说2020最新UI设计趋势与分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。