此前在一些設(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)容可以起到拋磚引玉的作用，歡迎大家一起來探索及討論。
深色模式作為2020的主流設(shè)計(jì)趨勢之一，早已上升到系統(tǒng)級(jí)別的設(shè)計(jì)了（ iOS、material design），另外還有一些主流的APP也跟隨系統(tǒng)進(jìn)行了深色模式的設(shè)計(jì)。
1. 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、魅族、華為等。
2. 一些主流APP的深色模式
國內(nèi)外的APP都有用使用到深色模式，部分跟隨系統(tǒng)的設(shè)定而變化，例如Instagram、知乎、微信、優(yōu)酷；而部分則是以主題化的方式進(jìn)行呈現(xiàn)，例如YouTube、QQ音樂。
3. 深色模式的設(shè)計(jì)建議
深色模式的設(shè)計(jì)不能簡單粗暴的進(jìn)行反色處理或變暗處理，處理不當(dāng)可能還會(huì)產(chǎn)生反效果。因此需要整體考慮深色調(diào)的使用規(guī)則和邏輯，這里參考Material Design的規(guī)范總結(jié)了幾個(gè)較為關(guān)鍵的點(diǎn)。
4. 使用基礎(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ì)是否偏灰。
5. 通過層級(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è)定。
6. 優(yōu)化深色下的亮色對(duì)比程度
深色的背景下，文本或圖標(biāo)的飽和度或亮度過高會(huì)產(chǎn)生強(qiáng)對(duì)比，容易造成視覺疲勞，因此從白色切換到深色模式下的設(shè)計(jì)需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過降低飽和度或明度來達(dá)到視覺和諧的程度。
7. 小結(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ì)。
1. 多顏色搭配
從個(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á)到年輕化和顏色豐富感。
2. 大膽使用漸變色
漸變相比純色的表達(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)形式）
3. 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á)到效果。
4. 小結(jié)
多彩的設(shè)計(jì)固然比簡潔的設(shè)計(jì)來得更加吸引眼球，但更多時(shí)候需要把控整體界面的平衡，而非天花亂墜。建議可以參考上面列舉的一些內(nèi)容去嘗試，是否達(dá)到你想要的多彩氛圍。
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)行嘗試。
1. 基本原理
最基礎(chǔ)的新擬物化效果分別有「凸起效果」和「凹陷效果」，兩者差異化在于對(duì)光影的處理方式不同。凸起效果使用外投影來實(shí)現(xiàn)，疊加層級(jí)依次為：基層-亮投影-暗投影；凹陷效果效果使用內(nèi)投影來實(shí)現(xiàn)，疊加層級(jí)依次為：亮投影-暗投影-基層。亮、暗投影的數(shù)值建議偏移值形成正負(fù)并保持一致，透明度依據(jù)實(shí)際情況進(jìn)行調(diào)整。
2. 結(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á)到明暗投影的效果
3. 設(shè)計(jì)方式拓展
常態(tài)的表現(xiàn)往往并不難滿足我們所有的設(shè)計(jì)，因此我們可以基于常態(tài)的設(shè)計(jì)樣式再結(jié)合其他的設(shè)計(jì)方式，讓整體的感受更加豐富。例如下面的一些例子：
4. 小結(jié)
新擬物化的設(shè)計(jì)雖然新穎，但是否適合所有的設(shè)計(jì)？這個(gè)是值得思考的問題。面對(duì)一個(gè)新的趨勢，建議可以多去研究和了解這方面更深層的內(nèi)容，這樣在實(shí)際應(yīng)用才能更加得心應(yī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ì)理念。
1. 圖標(biāo)動(dòng)畫的多樣性
tabbar圖標(biāo)動(dòng)畫的設(shè)計(jì)是多種多樣的，包括有位移、劃線、彈性、縮放、透明變化、抖動(dòng)、填充等等，不同的方式表達(dá)出來的設(shè)計(jì)感受也會(huì)有差異。具體可以查看之前寫過的一篇文章《Tabbar圖標(biāo)動(dòng)畫設(shè)計(jì)》進(jìn)行深入了解：
2. 圖標(biāo)動(dòng)畫的工具
制作動(dòng)畫的工具有多種多樣，作為設(shè)計(jì)師無需被工具而限制。而我最常用的有Principle和AE的結(jié)合，在設(shè)計(jì)前期我會(huì)使用Principle進(jìn)行demo設(shè)計(jì)輸出，在確定之后通過AE進(jìn)行二次繪制并輸出動(dòng)畫文件，目前與開發(fā)對(duì)接的格式大概有APNG、Lottie、PNG序列幀。
Principle的優(yōu)點(diǎn)在于操作簡便，自帶的動(dòng)畫命令基本可以滿足我們對(duì)于圖標(biāo)動(dòng)畫的需求，缺點(diǎn)在于無法生成實(shí)現(xiàn)的格式；反之，AE實(shí)現(xiàn)動(dòng)畫的方式更多樣性，但在使用中并不符合效率性，因此兩者結(jié)合使用更能滿足效率和可實(shí)現(xiàn)性。
卡片式設(shè)計(jì)對(duì)于我們來說并不陌生，從設(shè)計(jì)類網(wǎng)站上或一些APP中也會(huì)看到很多的卡片式設(shè)計(jì)的案例，卡片式設(shè)計(jì)也是UI設(shè)計(jì)中最常用的方式之一。
而隨著設(shè)計(jì)趨勢的變化，卡片的設(shè)計(jì)的設(shè)計(jì)形式也在發(fā)生著變化，接下來從幾個(gè)關(guān)鍵點(diǎn)來分析新的卡片設(shè)計(jì)趨勢。
1. 柔和的圓角
從dribbble或IOS的設(shè)計(jì)上，可以很明顯的感受到卡片圓角的變化，大圓角的卡片設(shè)計(jì)方式變得越來越常見，當(dāng)然也不是越大越好，設(shè)計(jì)師需要從實(shí)際的設(shè)計(jì)中去思考和嘗試。
大小的差異化呈現(xiàn)出不同的視覺感受和風(fēng)格差異，我們?cè)?a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)時(shí)更多需要考慮我們設(shè)計(jì)的 產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計(jì)網(wǎng)站上的流行趨勢。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場景下進(jìn)行設(shè)定才更為合理。
2. 自然的投影
新的卡片設(shè)計(jì)更加趨向自然的投影，減弱投影帶來的切割感覺，提升界面的平整性。從以下三種效果對(duì)比，合理的投影數(shù)值可以讓卡片的表現(xiàn)更加自然，太深太大的投影會(huì)顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬。
流暢的動(dòng)效可以給人耳目一新的感受，讓使用者感受到動(dòng)效帶來的愉悅性。從設(shè)計(jì)的角度來看，交互動(dòng)效并不是錦上添花而是UI設(shè)計(jì)的必需品，它不應(yīng)該被強(qiáng)調(diào)有或無，而應(yīng)該被強(qiáng)調(diào)好或不好，好的交互反饋動(dòng)效可以讓整體的設(shè)計(jì)更加具有品牌調(diào)性。
1. 了解動(dòng)畫基礎(chǔ)原理
動(dòng)畫的方式可以有很多不同的方式，并且在很多設(shè)計(jì)網(wǎng)站都能了解到，下面從以下幾個(gè)案例來進(jìn)行分析，并進(jìn)行優(yōu)化嘗試建議。基于簡單的動(dòng)效效果，如何通過設(shè)計(jì)優(yōu)化讓動(dòng)畫變得更加不一樣且具有差異化。
動(dòng)畫的基礎(chǔ)原理
以AE作為范例來說，動(dòng)效最基礎(chǔ)的原理是由「位移、縮放、旋轉(zhuǎn)、透明度」等方式結(jié)合「時(shí)間軸和關(guān)鍵幀」而產(chǎn)生的視覺補(bǔ)間效果，一個(gè)動(dòng)效是否流暢（快或慢）往往取決于一段時(shí)間內(nèi)所發(fā)生的幀數(shù)，幀數(shù)越少位移距離越大（縮放變化越大、旋轉(zhuǎn)度數(shù)越多）則速度越快。了解這些基礎(chǔ)知識(shí)并進(jìn)行結(jié)合使用，便可以設(shè)計(jì)出很多不一樣的動(dòng)畫效果。
動(dòng)畫的基本運(yùn)動(dòng)規(guī)則
以principle作為范例來說，動(dòng)畫的基本運(yùn)動(dòng)規(guī)則包括有：默認(rèn)、緩入、緩出、緩入緩出、彈性、線性、等效果。我們可以直接使用默認(rèn)的數(shù)值，亦可根據(jù)自己的習(xí)慣對(duì)這些動(dòng)畫效果進(jìn)行微調(diào)設(shè)定來達(dá)到我們想要等效果。（不同的demo軟件的基本運(yùn)動(dòng)規(guī)則及應(yīng)用上差異性基本不會(huì)太大，我們只需要選擇一款我們習(xí)慣的即可。）
2. 常見的動(dòng)效反饋模塊
我們知道交互動(dòng)效反饋的重要性，但也需要明確哪些模塊可以在設(shè)計(jì)中進(jìn)行應(yīng)用，這里進(jìn)行了一些梳理其中包括：頁面切換、對(duì)話框、上滑浮層、彈出式菜單、觸發(fā)縮放類（如查看圖片）、頁面導(dǎo)航、分頁滾動(dòng)、小模塊滑動(dòng)、開關(guān)類、按鈕或模塊觸發(fā)的反饋…等等。
3. 案例嘗試
常規(guī)的動(dòng)效方式基本能夠滿足常規(guī)的需要，而設(shè)計(jì)師在設(shè)計(jì)的時(shí)候更需要追求一些動(dòng)效的給用戶帶來的愉悅感和視覺沖擊力。
連動(dòng)式頁面切換
很多頁面的轉(zhuǎn)場效果是可以被設(shè)計(jì)為連動(dòng)的轉(zhuǎn)場方式，主要常見于商品詳情頁、插圖詳情頁、小說/書籍/專輯等類的詳情頁。如下案例，左邊為常規(guī)的交互方式，我們可以通過差異化的交互設(shè)計(jì)，讓整體的體驗(yàn)更加自然流暢。
滑出式模塊
滑出式模塊的設(shè)計(jì)動(dòng)畫設(shè)計(jì)需要強(qiáng)調(diào)怎么出現(xiàn)怎么收起，通過視覺動(dòng)線動(dòng)的引導(dǎo)并告知用戶模塊的具體來源，并且展開或收起的時(shí)間是否需要一致也值得去思考。如下案例，通過動(dòng)畫細(xì)節(jié)的優(yōu)化，使用彈性的動(dòng)畫效果讓滑出浮層更加具有生命力。
滾動(dòng)表現(xiàn)
滑動(dòng)操作是非常常見的設(shè)計(jì)內(nèi)容，無論是模塊的滑動(dòng)還是整體頁面的滾動(dòng)。如下案例，左邊是比較常見的整體滑動(dòng)，但如果每個(gè)內(nèi)容之間賦予一個(gè)視覺時(shí)間差，那整體的視覺效果和體驗(yàn)感受也會(huì)變得更加不一樣。
觸發(fā)反饋
一些常規(guī)的內(nèi)容，例如按鈕、列表、圖標(biāo)按鈕、卡片..等的點(diǎn)按可以結(jié)合動(dòng)效的細(xì)節(jié)變化來增強(qiáng)反饋感受。但我們?cè)趯?shí)際應(yīng)用重色是否都需要如此強(qiáng)調(diào)，則需要根據(jù)實(shí)際的情況而定。
4. 小結(jié)
這里我們可以思考兩個(gè)問題：
1.動(dòng)效的必要性？
2.動(dòng)效如何進(jìn)行設(shè)計(jì)？
從個(gè)人的觀點(diǎn)來說，動(dòng)效是非常具有必要性的，除了可以讓整體的感受更加具有差異化，更可以拓展設(shè)計(jì)師對(duì)于每一個(gè)設(shè)計(jì)的思考角度。另外動(dòng)效的設(shè)計(jì)應(yīng)該是和靜態(tài)的界面設(shè)計(jì)一樣，都需要進(jìn)行系統(tǒng)性的思考，應(yīng)用在每一個(gè)細(xì)節(jié)的效果及動(dòng)畫參數(shù)都需要保持高度的一致性。
留白的設(shè)計(jì)可以讓我們的界面變得更有呼吸感，相比于緊湊的設(shè)計(jì)，適當(dāng)?shù)牧舭卓梢宰屓嗽陂喿x時(shí)更加具有放松的心理暗示。留白是一種對(duì)比手法或方式，而非純粹的減少內(nèi)容來達(dá)到留白的目的，在有限的手機(jī)屏幕內(nèi)容我們需要清楚哪些位置或內(nèi)容可以做到適當(dāng)留白。
1. 頂部留白
在界面的頂部減少內(nèi)容的呈現(xiàn)或加大內(nèi)容與界面頂部的間距來達(dá)到留白的方式，讓使用者從一開始的就降低視覺壓迫性。例如在一些設(shè)計(jì)APP的游戲詳情頁、個(gè)人資料頁等較為常見。
2. 去線留白
通過減少線的使用以及間距的調(diào)整來達(dá)到留白的效果，強(qiáng)調(diào)內(nèi)容的自然視覺分區(qū)，減少線對(duì)內(nèi)容的信息干擾。例如在一些列表或具有明確大標(biāo)題的內(nèi)容模塊下可以嘗試減少線的使用。
3. 借助標(biāo)題留白
模塊與模塊之間使用較大號(hào)的字體，通過大字體的支撐產(chǎn)生更加自然舒適的空間留白。例如iOS的系統(tǒng)界面的頂部大標(biāo)題設(shè)計(jì)。
4. 增加邊距留白
適當(dāng)增加內(nèi)容與內(nèi)容之間、內(nèi)容與屏幕之間的間距來優(yōu)化界面的空間感，達(dá)到留白的效果，增強(qiáng)內(nèi)容的聚焦。
5. 減少重色
減少大面積的重顏色使用，降低視覺層次，讓整體界面的設(shè)計(jì)更加輕量化、扁平化。例如上下導(dǎo)航的顏色，在無需過渡強(qiáng)調(diào)品牌色的情況下，可以考慮使用白色或淺色來增強(qiáng)整體界面的呼吸感和留白效果。
6. 小結(jié)
在手機(jī)屏幕空間相對(duì)有限的情況下，我們的視覺會(huì)更加聚焦。過于密集的設(shè)計(jì)往往更會(huì)造成視覺疲勞，因此更需要多去思考內(nèi)容設(shè)計(jì)的空間感，適當(dāng)?shù)牧舭卓梢越档鸵曈X疲勞，提高視覺聚焦和閱讀效率。
每年都會(huì)有新的設(shè)計(jì)趨勢變化，但實(shí)際上應(yīng)用的設(shè)計(jì)方法都不會(huì)有太大差異。了解設(shè)計(jì)趨勢可以更好的幫助我們?nèi)ミM(jìn)行設(shè)計(jì)思考，然后再結(jié)合日常鍛煉的設(shè)計(jì)基礎(chǔ)能力作出更好的設(shè)計(jì)。趨勢幫助我們明白往哪個(gè)方向做，而基礎(chǔ)幫助我們更好的達(dá)到方向。
謝謝閱讀！
歡迎關(guān)注作者的微信公眾號(hào)：「IDfor」
全部評(píng)論