2021-1-4 ui設(shè)計(jì)分享達(dá)人
前言
在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來(lái)的2021的開(kāi)篇帶個(gè)好頭。本文在了解這些趨勢(shì)的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來(lái)幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。
流行趨勢(shì)跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫(xiě)實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說(shuō)趨勢(shì)就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒(méi)有絕對(duì)的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開(kāi)始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。
而在進(jìn)入下一個(gè)十年的過(guò)程中，我們對(duì)數(shù)字產(chǎn)品和體驗(yàn)的依賴(lài)將日益增長(zhǎng)，預(yù)測(cè)真正勝出的將會(huì)是3D動(dòng)畫(huà)和用戶(hù)界面/用戶(hù)體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無(wú)法想象的交互方式，這將是一段充滿(mǎn)創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來(lái)看看未來(lái)那些不可忽視的設(shè)計(jì)趨勢(shì)吧。
（注:圖片來(lái)自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請(qǐng)告知?jiǎng)h除）
1、3D與UI結(jié)合
隨著且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開(kāi)始變得越來(lái)越受歡迎，而在這之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫(huà)、動(dòng)效、電商到平面視覺(jué)，在所有的設(shè)計(jì)類(lèi)型中都能找到它，3D現(xiàn)實(shí)主義已是各個(gè)領(lǐng)域的大勢(shì)。
圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場(chǎng)景組件，幫助3D小白更快地搭建出具有沖擊力的視覺(jué)組合。
特點(diǎn)：
? 直觀感受；
? 立體真實(shí)；
? 形態(tài)豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實(shí)例應(yīng)用：
各大廠(chǎng)都開(kāi)始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個(gè)品牌靜態(tài)頁(yè)面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時(shí)間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開(kāi)始慢慢運(yùn)用到更多的界面交互、H5活動(dòng)中。
▲閑魚(yú)、QQ、花椒直播的3D啟動(dòng)頁(yè)
▲得物（毒）的3D空間動(dòng)效
網(wǎng)易云音樂(lè)每年的音樂(lè)總結(jié)報(bào)告都追隨著的設(shè)計(jì)潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶(hù)的主觀代入感，以下是每年的設(shè)計(jì)風(fēng)格變化：
▲2018-漸變插畫(huà)、2019-撞色漸變、2020-3D人物場(chǎng)景
▲2020-總結(jié)陳詞H5
▲總結(jié)報(bào)告Banner的動(dòng)效
其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營(yíng)場(chǎng)景，高度還原現(xiàn)實(shí)世界，給小朋友帶來(lái)最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。
▲洪恩識(shí)字（3D學(xué)習(xí)場(chǎng)景）、騰訊開(kāi)心鼠英語(yǔ)ABCmouse
▲IP在播放兒歌時(shí)的互動(dòng)
值得一提的是今年蘋(píng)果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺(jué)層次。
蘋(píng)果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶(hù)交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶(hù)體驗(yàn)。”這次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計(jì)趨勢(shì)。
2、軟漸變（Soft gradients）
過(guò)于強(qiáng)烈的漸變不再是趨勢(shì)，大多數(shù)設(shè)計(jì)師都開(kāi)始喜歡使用非常簡(jiǎn)單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶(hù)人群需要輕松溫和的視覺(jué)環(huán)境，那么此風(fēng)格再適合不過(guò)。
軟漸變包括背景、陰影、反光，常與線(xiàn)條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計(jì)中。
特點(diǎn)：
? 低調(diào)溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設(shè)計(jì)網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來(lái)創(chuàng)造多彩的模糊背景。它使設(shè)計(jì)看起來(lái)非常現(xiàn)代、不打擾、清新而令人愉悅，其中畫(huà)面內(nèi)容是主要視覺(jué)焦點(diǎn)。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實(shí)例應(yīng)用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來(lái)塑造物體，柔陰影使設(shè)計(jì)元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實(shí)例應(yīng)用：
▲有道數(shù)學(xué)（已下架）
▲Uki
3、玻璃擬態(tài)（Glassmorphism）
去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶(hù)的閱讀性上可能會(huì)出現(xiàn)問(wèn)題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無(wú)法完整地使用在整套應(yīng)用程序中。
▲Alexander Plyut
伴隨著今年蘋(píng)果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來(lái)的生硬不立體感。而B(niǎo)ig Sur的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語(yǔ)言更為時(shí)尚簡(jiǎn)潔。蘋(píng)果設(shè)計(jì)師 Alan Dye 在發(fā)布會(huì)上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺(jué)的復(fù)雜度，讓用戶(hù)能夠?qū)⒆⒁饬性趦?nèi)容上」。
而的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實(shí)結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對(duì)關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶(hù)可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。
特點(diǎn)：
? 透氣磨砂
? 層級(jí)空間
? 簡(jiǎn)潔擬物
▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的作品也朝著玻璃擬態(tài)變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實(shí)例運(yùn)用：
▲毛玻璃視覺(jué)可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語(yǔ)言
▲的MacOS Big Sur操作系統(tǒng)
▲圖標(biāo)的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時(shí)分。之前用了很長(zhǎng)時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見(jiàn)到太陽(yáng)光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡(jiǎn)單來(lái)說(shuō)暗黑模式可以在任何場(chǎng)景下使用，并沒(méi)有降低對(duì)比亮度；夜間模式則專(zhuān)為夜間場(chǎng)景設(shè)計(jì)，重在降低對(duì)比度，以降低在暗光環(huán)境下屏幕對(duì)人眼的刺激。
特點(diǎn)：
? 突出內(nèi)容
? 減輕干擾
? 沉浸體驗(yàn)
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實(shí)例應(yīng)用：
▲有道詞典
▲愛(ài)范兒（ifanr）
最常使用暗黑模式的車(chē)載系統(tǒng)：
▲小度車(chē)載
暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來(lái)的沉浸以及輕打擾體驗(yàn)還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計(jì)：
▲MOO音樂(lè)(可手動(dòng)切換顏色模式)
▲Space FM
5、多彩高對(duì)比度界面
受Material Design調(diào)色板的影響，2020年用戶(hù)界面趨勢(shì)的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡(jiǎn)約的界面中明亮大膽且對(duì)比鮮明的色彩一直都處于增長(zhǎng)趨勢(shì)。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來(lái)美觀和吸引人的最有效方式之一，對(duì)比鮮明的顏色在白色和黑色界面上都能很快吸引用戶(hù)的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢(shì)還將會(huì)繼續(xù)影響UI、平面、廣告、插畫(huà)等領(lǐng)域。
特點(diǎn)：
? 活潑大膽
? 對(duì)比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網(wǎng)站設(shè)計(jì)中的應(yīng)用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實(shí)例應(yīng)用：
▲GoFun出行
▲開(kāi)言英語(yǔ)
6、抽象幾何元素
從上世紀(jì)初開(kāi)始，抽象構(gòu)成中的簡(jiǎn)單幾何形狀就已經(jīng)用于視覺(jué)藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡(jiǎn)單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計(jì)看起來(lái)既規(guī)則又有趣。
幾何圖形可以運(yùn)用到UI設(shè)計(jì)中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號(hào)的記憶點(diǎn)。
特點(diǎn)：
? 規(guī)則組合
? 品牌印象
? 重復(fù)記憶
▲Johnny Nova
▲Vladimir Gruev
實(shí)例應(yīng)用：
最近看到的一組原色視覺(jué)剛好融合了高對(duì)比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來(lái)打造畫(huà)面空間及變化，帶來(lái)極具視覺(jué)沖擊的音樂(lè)色彩與魅力。
▲專(zhuān)輯的主視覺(jué)
當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來(lái)越多的關(guān)注。
7、極簡(jiǎn)風(fēng)
極簡(jiǎn)設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長(zhǎng)一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來(lái)越多，所以現(xiàn)在用戶(hù)想要盡可能避免“視覺(jué)垃圾”，這也是為什么我們會(huì)選擇更簡(jiǎn)潔專(zhuān)一的界面。
特點(diǎn)
? 專(zhuān)注信息
? 清晰易用
? 簡(jiǎn)單操作
▲RonDesignLab
▲Quan
▲B(niǎo)AOLIN
▲Gregory Loshakov
談到極簡(jiǎn)主義，就不可避免會(huì)涉及到無(wú)鍵趨勢(shì)，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡(jiǎn)潔，而這種簡(jiǎn)化過(guò)的設(shè)計(jì)將讓手勢(shì)操作和語(yǔ)音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實(shí)例應(yīng)用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應(yīng)用到UI中
在 2020 年，信息的觸達(dá)的速度將會(huì)變得更快，而視頻是很好的載體，各個(gè)年齡段的用戶(hù)都喜歡觀看引人入勝的動(dòng)畫(huà)，無(wú)論是選擇通過(guò)短視頻還是電影的方式來(lái)推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶(hù)忠誠(chéng)信任感。
特點(diǎn)：
? 營(yíng)造氛圍
? 類(lèi)型多樣
? 品牌調(diào)性
▲Fireart Studio
▲Ehsan Rahimi
實(shí)例應(yīng)用：
▲moo音樂(lè)登錄頁(yè)
▲蝦米音樂(lè)歡迎頁(yè)
9、插畫(huà)與3D的界線(xiàn)越來(lái)越模糊
藝術(shù)插圖從2017年開(kāi)始到現(xiàn)在仍然很流行，幾乎適用于任何類(lèi)型的設(shè)計(jì)行業(yè)，是設(shè)計(jì)領(lǐng)域中最熱的趨勢(shì)之一。插畫(huà)的視覺(jué)能很好的幫助用戶(hù)理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問(wèn)題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫(huà)的結(jié)合，藝術(shù)家保留了人物在美式漫畫(huà)中的的線(xiàn)條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對(duì)比強(qiáng)烈的大色塊擴(kuò)大了視覺(jué)張力，分分鐘把漫畫(huà)書(shū)甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！
▲3D人物的畫(huà)筆觸感
▲畫(huà)面光源處由波普?qǐng)A點(diǎn)組成的背景
▲紙本漫畫(huà)書(shū)中的“聲音詞”
▲漫畫(huà)經(jīng)典線(xiàn)條
▲Entei Ryu在3D建模使用插畫(huà)質(zhì)感
▲Minh Pham ?在ui界面中的嘗試
實(shí)例應(yīng)用：
騰訊旗下音樂(lè)平臺(tái)JOOX最近的概念宣傳片，從MG、三維、定格、插畫(huà)多個(gè)風(fēng)格之間來(lái)回切換，給我們帶來(lái)了一個(gè)多元的音樂(lè)世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號(hào)“UoU_Studio”觀看完整視頻。
在3D開(kāi)始迅速發(fā)展的階段，二維與三維之間的界限變得越來(lái)越模糊，插畫(huà)作品也可以具備強(qiáng)互動(dòng)性，而3D插畫(huà)與動(dòng)效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來(lái)插畫(huà)更多的可能性。
10、更多的微交互動(dòng)效
最后一點(diǎn)，還是要強(qiáng)調(diào)動(dòng)效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶(hù)更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗(yàn)方面扮演著非常重要的角色。它們?cè)?UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶(hù)界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。
動(dòng)效起到的作用：
? 引起人們對(duì)應(yīng)該做什么或接下來(lái)將要發(fā)生的事情的關(guān)注；
? 創(chuàng)造流暢和視覺(jué)愉悅的過(guò)渡；
? 帶給使用者美觀的享受；
? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；
? 確認(rèn)用戶(hù)使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實(shí)例應(yīng)用：
▲GoFun選擇車(chē)輛后的頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效
結(jié)尾：
2020的趨勢(shì)在滿(mǎn)足用戶(hù)的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會(huì)根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶(hù)提供的豐富體驗(yàn)。
借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話(huà)：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類(lèi)的需求、用戶(hù)的需求，打造真正人性化、多元化與包容性的設(shè)計(jì)。
設(shè)計(jì)趨勢(shì)還在快速增長(zhǎng)變化，有些趨勢(shì)總能長(zhǎng)期霸屏，未來(lái)還將迎來(lái)更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢(shì)，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。
文章來(lái)源：UI中國(guó) 作者：_阿丹a_
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn