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

一、暗夜風(fēng)（深色模式）

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

IOS & Material design

作為主流的手機(jī)系統(tǒng)，對(duì)于一些手機(jī)APP的設(shè)計(jì)非常具有指導(dǎo)意義，他們?cè)谄涔倬W(wǎng)有有一些相關(guān)的指引，建議大家可以去對(duì)應(yīng)的網(wǎng)站詳細(xì)查看。

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

一些主流APP的深色模式

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

深色模式的設(shè)計(jì)建議 

深色模式的設(shè)計(jì)不能簡單粗暴的進(jìn)行反色處理或變暗處理，處理不當(dāng)可能還會(huì)產(chǎn)生反效果。因此需要整體考慮深色調(diào)的使用規(guī)則和邏輯，這里參考Material Design的規(guī)范總結(jié)了幾個(gè)較為關(guān)鍵的點(diǎn)。

使用基礎(chǔ)色進(jìn)行延展

在設(shè)計(jì)之初你可以先設(shè)定一個(gè)最基礎(chǔ)的深色，并且使用這個(gè)色調(diào)去貫穿整體深色模式的設(shè)計(jì)。盡量使用深灰色而非純黑色，因?yàn)樵谏罨疑鲜褂脺\色文本的對(duì)比相對(duì)來說較弱些，可以減輕眼睛閱讀的疲勞度。

從以下案例來看，“000000”（純黑色）會(huì)顯得顏色過深淺色文字過亮；“111111”和“222222”則適中；“333333”相對(duì)來說相對(duì)較亮，雖然文字閱讀并無問題，但需要考慮往上疊加后整體設(shè)計(jì)是否偏灰。

通過層級(jí)疊加的顏色變化

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

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

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

小結(jié)

深色模式在各大手機(jī)系統(tǒng)及主流APP的推進(jìn)下，相信會(huì)越來越多的APP會(huì)跟隨設(shè)計(jì)。但其實(shí)我們還需要思考，深色模式的設(shè)計(jì)解決了什么問題？是否都需要深色模式的設(shè)計(jì)？我們可以一起來探討下。

二、新鮮多彩的顏色

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

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

多顏色搭配

從個(gè)人的經(jīng)驗(yàn)中總結(jié)，如果只使用一種顏色來設(shè)計(jì)往往容易使界面變得單調(diào)，且具有應(yīng)用的局限性。而多顏色搭配的設(shè)計(jì)更能讓整體的UI界面變得豐富有層次，并且更加貼合年輕化的趨勢。這里建議一個(gè)主色搭配多個(gè)次級(jí)顏色，整體上讓使用者感知到整體的品牌色調(diào)，但卻不會(huì)覺得單調(diào)。

如以下的一些APP的設(shè)計(jì)，也是使用主的品牌色再結(jié)合一些輔助色進(jìn)行設(shè)計(jì)，來達(dá)到年輕化和顏色豐富感。

大膽使用漸變色 

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

漸變對(duì)比

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

運(yùn)用撞色

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

更多漸變的方式

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

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

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

圖標(biāo)

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

按鈕

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

內(nèi)容模塊 

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

空白頁插圖

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

多彩背景 

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

彩色投影 

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

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

小結(jié)

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

三、新擬物風(fēng)格

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

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

基本原理 

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

結(jié)合顏色

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

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

設(shè)計(jì)方式拓展        

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

小結(jié)

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

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

Tab bar 作為整個(gè)APP的第一觸點(diǎn)，給用戶傳遞的理念及信息在整個(gè)APP中具有不可替代的重要性。我們的第一感受是粗糙或是精致，都會(huì)通過這個(gè)簡單的操作切換而得到。因此 tab bar 的設(shè)計(jì)，往往也檢驗(yàn)著著整個(gè)APP設(shè)計(jì)是否精致的標(biāo)準(zhǔn)。

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

https://mp.weixin.qq.com/s/ovLkEFOvxEgvWGB_zaKwXQ

原文鏈接： https://mp.weixin.qq.com/s/iMcT36zbV85hGsYScsyWEw