2020的UI設計趨勢,我先收藏了(上)

2020-12-17 人人都是產品經理

設計總是在變化,在過去一年裡,我們不僅看見了五福的C4D運用,雙11的動效插畫運用,以及大量AR/VR智能的設計,還有蘋果黑暗模式的普及,新技術帶來新的體驗和解決方案。2020年,關注研究新興的用戶體驗趨勢,一起來研究關於2020界面設計趨勢,希望能幫助大家是設計中有所啟發。

研究背景

隨著UI/UX領域人工智慧的發展,和虛擬實境等新技術的變革,從前單一的內容很難滿足用戶的訴求,用戶的訴求也變得千人前面,所以在研究趨勢之前,我基於這些關鍵詞,來分析2020的設計趨勢。

色彩趨勢

1. 彩虹漸變

這兩年來,彩色漸變一直是設計趨勢,設計師將大膽的漸變,飽和度更高的漸變運用在設計中去,讓整體的色彩感覺,更加年輕化與活躍。

Apple一直是這個領域的引領者,隨著當年iPhoneX的發布,彩虹的漸變色,大膽的漸變風格瞬間成為設計師筆下的弄潮兒。

這組插畫中,作者就運用了大面積的漸變,兩種顏色的運用,通過重疊,明度變化,豐富了整個設計層次。

不僅在平面設計中,在網頁設計中,也是被大量運用,SWATCH的官網,清新的漸變配合動感的模特照片,以及和產品的完全結合,讓頁面充滿著活力。

在移動端也是如此,金融產品的背景設計,銀行卡面的設計,可視化圖表的運用,都能看出大膽漸變還是很受歡迎。

2. 黑暗模式

隨著google和facebook以及instagram這些知名應用都開始提供黑暗模式,國內微信也開始黑暗模式,2020黑暗模式設計,一定是需要設計師去關注的。

黑暗模式,除了在黑暗中提高內容可讀性以外,還能減少用戶疲勞,還可以節約電池,所以黑暗模式在今年將是所有應用程式必不可少的一個功能。

Google的黑暗模式運用,通過一個簡單的按鈕開關就可以切換,也可以根據系統定義切換。

黑暗模式未來會成為一種標配,一個軟體設計在剛開始的時候就必須考慮進來。

關於黑暗模式,正向當年iOS扁平化剛出來的時候,國內的很多產品都還沒有準備好,但是相信過不了多久,黑暗模式一定會普及開來,所以2020大家都應該提前去了解黑暗模式的,設計規範和細節。

3. 更大膽的一種顏色

除了漸變色,那麼大膽的單色在設計中運用也會越來越多,整個設計就一套色彩體系貫穿,大多時候以品牌色的形式去運用,配合留白,對比明顯的字體,整體給人印象深刻。

在韓國的應用中用的比較多,它的優勢是色彩乾淨,品牌整體感強,但是對設計師駕馭頁面能力也要求很高,因為大面積的單色,如果用不好就會很刺眼。

Naverpay的設計,整個界面就是用的綠色漸變,清新同時也能很好和Naver品牌色進行結合。

在它的很多頁面中,很多控制項這個綠色運用的很巧妙,不會給人很刺眼的感覺,所以大膽的一種顏色運用在2020頁將是設計師值得去關注的一個方向。

插畫趨勢

在過去幾年裡,插畫是一種新的表達方式,越來越多的設計師,插畫師通過插畫表達產品的情緒,個人的情緒主張,那麼在2020插畫的運用就得和品牌很好的融合起來,如果你的插畫是和品牌割裂的,需要注意。

1. 和品牌結合

wibbite的插畫,標誌性歐美的風格,除了插畫本身手法比較簡約模塊,插畫中運用的色彩和內容本身也很產品定位匹配。

插畫對於品牌來說也是非常重要的一個因素,無論在界面設計,還是在品牌營銷很多場景都需要插畫去營造產品氛圍和氣質,插畫有助於將我們的品牌故事講述給聽眾聽。所以在構建一個品牌時候,插畫是非常重要的點之一,但是做之前一定要儘量多去了解我們為客戶提供的設計價值,只有了解了用戶價值,才能去定義去特色的故事,幫助產品。

Uber系列插畫提供暖色,以及安全藍的運用,突出打車服務中安全的關鍵要素。

Google的插畫系統也是如此,沒有很華麗的炫技,有的是對於多元文化的思考,設計場景的融合貫通。

所以不難看出,插畫的方向一定是和品牌結合的,不會為了趨勢而趨勢,一定是圍繞內容去設計。

2. 3D插畫

如果說這2年,各種各樣的插畫手法百花齊放,那麼隨著人們的審美變化,趨勢也從靜態變成動態,從平面變成3D,從今年的支付寶五福設計中大家應該能感覺到2020的插畫設計一定是往著3D方向,而且是動態3D方向演進的。

谷歌一組插畫,結合與大腦、團隊合作、想法、密碼箱為圖形進行創意設計,人物造型可愛好玩,凸顯年輕化潮流。

Apple在中國區App Store 的一組設計,整體設計以紅色為主,運用了象徵中國元素的龍、紅包、燈籠、福字、紙牌作為設計元素,整體運用3D表達,凸顯年輕和趣味性。

3. 等距插畫

等距插畫這兩年已經是一個主流風格之一,在未來還會接著流行,但是等距插畫未來或許和場景聯繫在更緊密,在每年天貓雙11設計中,互動城的設計每年基本都是等距插畫風格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設計,在短時間內,大型活動場景基本都離不開這個風格。

這組等距插畫場景故事感很強,建立了一個空間世界,作為網站主風格非常的吸引人。

除了這種大的場景,等距插畫,在小的場景中,作為插畫規範也是運用比較多,它風格可輕可重,隨著5G時代到來,靜態可能會逐步演進成動態插畫。

4. 根據內容定製的插畫

隨著內容的升級,對內容的表達也會被越來越重視,那麼如何更好的把內容更生動表達出來,插畫就是很好的一個形式,根據內容定製的插畫,在很多產品中被運用到,網際網路教育,IT等領域。所以專門針對內容去設計插畫,在今年或許是一個趨勢,插畫不再是孤零零隻是為了情感化而存在。

Crowdrise的產品設計,整體就是運用作為整體設計語言,風格統一,內容突出,畫面效果好。

插畫的形態終於不再是孤零零的只是用戶情感的表達,而是隨著內容的升級變化,在產品中發揮的重要性也越來越大。

3. 3D黏土插畫的運用

3D設計因為今年設計師很喜歡用的樣式之一,我們將儘管3D已經存在了一段時間,但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設計趨勢,我們甚至還會看到很多藝術家在電影,插畫和廣告中結合了2D和3D風格。

在instagran的一組設計中,設計師運用這種黏土和3D的方式設計,畫面充滿了生活感和溫暖。

谷歌也在它們的項目中大量運用這種黏土風格設計,會顯得更加的現代和活潑,黏土的設計相對3D插畫區別在於更加細膩,線條上更加柔和。

字體趨勢

這幾年越來越多的公司,開始定製字體,根據自己的品牌特質去做一些獨特的字體,從國外到國內,品牌定製字體未來或許還會越來越多,對於設計師好處來說,這些品牌字體很多都是免費開放給設計師用,會形成一個很高的商業環境。

1. 定製字體

錘子發布了他們的Smartisan T黑字體。

騰訊發布了定製的「騰訊字體」,相比原來傾斜的黑體字,騰訊的新字體更現代、更協調、更動感。運用起來也非常有力量感。

阿里普惠體,隨著集團業務龐大,字體使用場景多且複雜,包括各產品客戶端、營銷設計、作業系統、硬體設備、建築空間及公關傳播等等。決定以現代為核心設計理念,以可靠、明快為設計切入點,將阿里精神融入到字體當中。最終一款擁有現代感滿足全場景黑體誕生了,而且商用免費。

除了前面的阿里,騰訊,錘子,小米OPPO,京東也都發布了自己的專屬品牌字體,所以在2020年,品牌字體或許是每個公司的一個標配了,我們拭目以待。

國外其實是最早開始為品牌定製字體的,三星手機雖然銷量消化,但是他們品牌字體:SamsungOne,設計風格,很強的現代感,而且,這個字體有不同粗細的筆畫字重,適用面很廣。

IBM的字體名稱:IBM Plex Sans Text,這款字體設計比較簡潔,乾淨,沒有多餘的筆畫,這個字體很良心免費商用的。

2. 粗體的運用

縱觀2020的一些設計,留白越來越大,邊距越留越多,字體也變的很粗,粗的字體和正文普通字體形成了明顯的對比,再加上網格的布局,讓頁面內容更加凸顯。

大字體的運用,字體就是內容,重複運用內容元素作為排版手段,對於內容組織和平面要求較高。

在UI設計中,大字體的設計也很常見,蘋果商店,蘋果官方應用都是大字體的推崇者,隨便5G的來臨,對於內容的追求也會越來越高,那麼除了大字體,視覺元素減少,內容本身質量要求也越來越高。

粗的字體常用語大標題,或者頁面導航性指引作業,幫助用戶更好去理解功能本身,上面這個頁面粗的字體就是導航,告訴用戶這一頁,你需要去完成什麼動作指引。

最後

設計趨勢必然與技術發展緊密結合,作為設計師我們需要了解,以及平時和我們設計進行結合,下期將帶來,2020的UI設計趨勢下部分,看看還有哪些需要我們去關注的。

#專欄作家#

Sky,微信公眾號:我們的設計日記(ID:helloskys),設計交流可加微信:hellosky678,人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名網際網路公司設計經驗,對於產品從0到1、品牌定位、金融產品、設計規範、運營規範、大促等有豐富實戰經驗。

本文原創發布於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

相關焦點

  • 2021年UI設計趨勢指南
    -2021-637ac038cb99 譯文地址:非科班設計(公眾號) 譯者:逗砂 我們終於還有一個月就要告別魔幻的2020年了,uxdesign又寫了一篇趨勢指南。
  • 2021設計趨勢:UI/UX篇
    編輯導語:轉眼間,2020年就要結束了。這一年許多東西都放慢或者停滯了,正如2020年的設計趨勢沒有發生太大的變化,但是2020年的許多因素卻會對2021年產生很大的影響。接下來,本文作者為我們預測總結了2021年的主要趨勢。
  • 8種版式設計,讓你的UI作品更上一層樓!
    看完這些版式設計的方法,相信大家對以後的設計都有了更多的想法了吧。希望大家在設計的道路上掌握更多的技法,形成自己的設計風格,做自己喜歡的設計。ui設計越來越火,網上很多朋友在問ui設計要學什麼?怎麼學?關於ui設計的學習,常常會聽到這麼一些忠告「多看 多想 多做」,但作為新人更想知道咋看、咋想、咋做。
  • 2015年移動UI/UX設計趨勢
    從扁平化設計到Material design,我分析了設計趨勢的發展,得出了一些結論與讀者分享,看看設計領域有哪些趨勢?為什麼這些趨勢對用戶有益?以及如何設計出符合趨勢的產品?1.Why輕量化的設計排除了幹擾因素,把注意力放在屏幕上有意義的內容,讓用戶的操作更加簡單,同時使界面更加優雅、現代。2.
  • 2020設計趨勢報告,趕快收藏!
    文 | GrayKam 原標題:《Behance發布2020設計趨勢報告!》 這是Behance連續第五年發布設計流行趨勢,在過去幾年從讀者的積極反饋中逐步促使我們繼續探索和分析主要設計領域的新趨勢。最關鍵的設計趨勢必定與技術發展緊密結合,以及對設計領域的影響相關。
  • 趕快收藏,2020年設計趨勢總結!
    最重要的設計趨勢是與技術有關的趨勢,以及它們的發展趨勢,以及它們如何影響設計領域。 總體趨勢 2020年的主要趨勢動作設計與動畫, 對於2020年,我們認為運動設計是主要趨勢,因為我們在所有設計領域都遇到動畫,從小的交互到徽標和UI,一切都在變化。
  • 學UI設計需要會手繪嗎
    經常有很多人在問:學ui設計需要手繪嗎?一直以來都有人問類似的問題。那麼到底ui設計需要手繪能力嗎?手繪不好是不是不能做UI?不是科班出身,沒有手繪基礎怎麼學UI?今天我就針對UI設計要不要手繪能力做一些回答。
  • 現在學UI設計的是不是都是傻子
    最近不經意間,在網上看到這樣一個問題,「現在學習UI設計的都是傻子?」不知怎地,腦海中立刻浮現了一句話,在這裡先賣個關子,大家可以猜一猜。行外人在學習UI設計之前,現在學UI設計的是不是都是傻子https://www.aaa-cg.com.cn/ui/2527.html?gpf可能會有這樣的疑慮,就是時至今日,UI設計已經火爆10餘載,每年都有很多人轉行學UI設計,這麼多人在不知不覺中悄悄湧入UI設計行業,真的不會飽和嗎?現在學習完還能找到工作嗎?
  • UI設計中插畫的重要性
    如今的UI設計趨勢在不斷的更新!尤其是在中國這樣一個人口基數眾多的國家,人家比你會多一點,就比你更有優勢,說到底企業想用性價比更高的人。 現在對UI設計師的要求,更多的是一種全能型人才,手繪、插畫、交互、動效等什麼都要會,十八般武藝,UI設計師得會十七成半。
  • 南京ui設計中的構成是什麼?
    南京ui設計中的構成是什麼?構成是一種造型概念,它的含義是將不同形態的幾個以上的單位元素組成一個新的形態,構成能夠掌握均衡、比例、節奏、統一等形式,美能夠讓用戶感受色彩明暗、對比以及冷暖的變化。今天我們來說說,構成都有哪些內容?
  • 平面設計和UI設計從事行業的區別
    平面設計和UI設計從事行業的區別。隨著現階段就業競爭壓力越來越大,人們都想通過學習設計技能,提升個人的核心競爭力。但是很多小夥伴並不知道自己是要從事平面設計行業還是ui設計行業,這兩個行業對從業者有什麼樣的要求。那麼接下來小編就跟大家簡單分析一些平面設計和ui設計有哪些區別。
  • ui設計可提取哪些品牌視覺元素
    ui設計可提取哪些品牌視覺元素?每個品牌具備相應的視覺表現元素,這些元素的不同組合能夠創造出不同的視覺效果,於是很多企業會選擇在ui設計中融入品牌元素,提升品牌知名度。那麼接下來小編就給大家簡單講一下進行ui設計能夠提取哪些品牌視覺元素?
  • 如何利用品牌元素進行ui設計
    如何利用品牌元素進行ui設計?在企業發展的過程中往往需要進行一定的品牌建設和推廣,優秀的品牌形象設計能夠加深消費者對於品牌的特有印象,進而促使企業更好地發展。那麼設計師應該如何根據品牌元素進行品牌形象的設計呢?接下來小編就跟大家簡單分析一下。
  • 2021年湧現的UX/UI設計熱門趨勢
    同樣,用戶體驗設計在移動端和網頁端也正在經歷著改變。 語音技術的創新,讓人們對數字產品的交互有了新的認知。全屏交互,語音指令,低對比度漸變,大量的動畫,等等——我們預計在接下來的一年裡,會有更多新的令人驚嘆的數字趨勢出現。用戶體驗設計猶如一隻鳳凰,正努力在我們的腦海中重生,隨著2021年的創新,將會變得更加震撼。
  • 留白是ui設計的點睛之筆
    ui設計師技巧我們應該明白,同樣是作圖,為什麼UI設計相對於其他的設計方向來說就這麼突出,同樣的UI設計師培訓課程也是比其他的設計類課程要更加複雜和提升的,很大的一部分原因,就是UI設計,不僅是要會作圖,更是要懂交互,這才是UI設計的核心所在啊。
  • Behance報告:2021年UI設計流行趨勢
    Behance是Adobe公司旗下的一個設計創意交流網站,也是設計師們必備的欣賞設計大神作品、汲取設計靈感的素材網站之一。 2020年即將結束,Behance為設計師們總結了一些2021年UI設計流行的趨勢,趕緊來看看吧!
  • UI設計新人如何兼職接單
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享UI設計新人如何兼職接單?其實這個問題也是很多新人的痛點啊,新人前期剛入行除了工資就沒有其他收入,卻又不得不面對各種各樣的房租水電煤,交通,或者說還有女朋友等開銷... ...
  • UI設計怎麼做,才能拿到更高薪?
    2 設計思維 作圖只是設計基礎功,ui設計師最大的優勢,還在於他們的思維邏輯,產品要想廣受好評,前期調研和競品分析必不可少。
  • 學ui設計好還是平面設計好?
    平面設計和UI設計它們有一個共同點就是它們用的軟體大部分是一樣的如Photoshop,CorelDRAW ,AI等軟體,那麼到底是學平面設計好還是UI設計好呢? 我們先來了解一下平面設計和UI設計的區別吧!
  • 對啊網設計|2020UI設計十大趨勢 設計師必看
    設計和創造力的一年即將過去,因此讓我們回顧一下,回想一下2020年用於網站和應用程式的UI/UX設計中流行和需要的內容。與往常一樣,我們包裝了大量的UI設計示例。Let’s go!網站的視頻應用今年視頻內容整合成網頁的所有種類都躍上了一個新臺階。原因是對於在不同平臺上實現的網站,視頻集成在技術上越來越友好。