設(shè)計 | 值得一看的2020 UX設(shè)計趨勢这刷!

00 前言


2020年UX設(shè)計趨勢婉烟!感謝關(guān)注我的小朋友~?


01 Dark Mode? 深色模式


Dark Mode (深色/暗黑模式)已經(jīng)成為了一種新的設(shè)計趨勢。AppStore強制要求第三方 APP適配這一模式崭歧。

Slack、WhatsApp撞牢、Chrome 等軟件率碾,都已宣布支持 Dark Mode叔营,微信雖然與蘋果僵持了一段時間,最終還是決定推出暗黑模式所宰。在iOS系統(tǒng)中绒尊,開啟 Dark Mode 后,深色配色方案將作用于整個 iOS 系統(tǒng)仔粥,包括 iOS 隨附的應(yīng)用婴谱,第三方 APP 被 AppStore 強制要求適配(或者系統(tǒng)自動識別實現(xiàn)更改)這一模式。


圖:Chrome軟件 暗黑模式


圖:微信團隊宣布即將上線暗黑模式


阿里巴巴APP案例


暗黑模式三大優(yōu)點

夜晚避免強光刺激躯泰,符合數(shù)字健康理念:

Google 在去年提出了「Digital Wellbeing(數(shù)字健康)」的概念谭羔,注重在科技設(shè)備與用戶之間,找到一個健康的平衡點麦向。Dark mode是一個新的系統(tǒng)色澤瘟裸,深色模式下,柔和暗光讓眼睛避免強光刺激诵竭。這不是簡單的顏色改變话告,從背景填充到文字圖標(biāo),都基于大量的人因研究進行了對比度和色階調(diào)試卵慰,只為帶給用戶更舒適沉浸的閱讀體驗沙郭。

OLED屏幕省電,減少功耗:

對于使用OLED的最新一代設(shè)備而言裳朋,可以幫助用戶節(jié)省電池消耗病线,因為OLED在顯示純黑時,會徹底關(guān)閉發(fā)光體再扭,這樣一來氧苍,更少的光意味著更少的功耗。

圖:華為手機暗黑模式

聚焦于內(nèi)容泛范,提供更好的沉浸感:

如果你細心觀察让虐,你會發(fā)現(xiàn)許多專業(yè)級的多媒體內(nèi)容生產(chǎn)軟件,一直以來都是黑色的界面罢荡。深色背景具有良好的沉浸感赡突,并與其它的高飽和度亮色相互作用,帶來更高的識別效率区赵,有利于我們沉浸于生產(chǎn)內(nèi)容/消費內(nèi)容本身惭缰。同時很好地體現(xiàn)產(chǎn)品的科技感和時尚感。



2.Illustrations in UI 界面插圖


近年來笼才,越來越多的手機應(yīng)用程序背景設(shè)計使用了插畫漱受。插圖有助于保持用戶的注意力,是一種很好的視覺符號骡送,幫助用戶理解產(chǎn)品背后的故事昂羡,配上一些好的創(chuàng)意概念絮记,以更有趣的方式講述品牌、公司或產(chǎn)品的故事虐先,使得信息傳達的更快怨愤。

案例一:

設(shè)計師:JAM? ? 應(yīng)用類別:小說閱讀,美術(shù)或繪畫應(yīng)用

這位設(shè)計師的靈感來自世界各地的著名畫作蛹批。它們以非常幽默的方式進行了重新設(shè)計撰洗。


案例二:Smart Home App — IOS by Maria Osadcha


3.Animated graphics &Micro-interactions 動態(tài)插圖與微交互(混合媒體)


拍攝的視頻,生動的插圖腐芍,用戶與媒介的交互操作差导,把這些結(jié)合在一起會產(chǎn)生意想不到的驚喜。微交互使用戶了解產(chǎn)品的工作原理甸赃,并引導(dǎo)其獲得更好的體驗柿汛。使用動效后,能抓住用戶的注意力使其能夠更加沉浸在產(chǎn)品中埠对。

插圖非常能抓人眼球络断,尤其是在融入動效后會顯得更加的自然,將產(chǎn)品帶入生活的氣息项玛,使得產(chǎn)品功能更加突出貌笨,同時也增添了更多的細節(jié)和個性。

案例一:UI/UX | Smart Pharmacy app by Anastasia M, Sergey Nikonenko UX


案例二:Welcome to Swiggy by Saptarshi Prakash


案例三:谷歌動態(tài)形象設(shè)計



4.Gradients 漸變


設(shè)計中的漸變趨勢在2020年將繼續(xù)保持強勁襟沮,因此值得一提锥惋。新鮮大膽的色彩是成功使用漸變的完美選擇。它們可以用于按鈕开伏、圖標(biāo)膀跌、插圖、排版固灵。

案例:Arabic World App Background

設(shè)計師:Andrei Honcharuk? 應(yīng)用類別:旅游類應(yīng)用

案例二:NIKE


5.Bold colors 大膽用色


明亮鮮艷的配色往往在視覺上非常具有吸引力捅伤,強烈大膽的色彩已成為重要的趨勢。這些顏色大膽巫玻、色彩豐富丛忆、明亮,甚至極富活力仍秤,使用它們作為主要或次要顏色熄诡。近兩年,我們看到越來越多的品牌開始使用超高飽和度的色彩作為品牌色诗力。

舉例一:支付寶的品牌色凰浮,新版比舊版更明快

高飽和度的藍色能讓品牌更有科技感也更專業(yè),無論是線上還是線下傳播都能輕易吸引眼球。


視覺層次是創(chuàng)造導(dǎo)航和交互的核心元素袜茧。色彩是有層次的屿良,但是這種層次是怎么樣被理解,則和用戶的思維有關(guān)系惫周。明亮的色彩更容易被注意到,所以設(shè)計師會使用它們來表現(xiàn)需要突出顯示的元素康栈,將色彩運用到不同元素上递递,產(chǎn)生重要性或者功能上的關(guān)聯(lián)。UI 組件需要以層次分明的方式組織起來啥么,用戶的大腦才能通過層次所營造的差異區(qū)分對象登舞,明白優(yōu)先級。

舉例二:點餐的價格和操作按鈕這兩個重要信息悬荣,以高飽和度的明黃顯示

舉例三:大膽使用高飽和度的色彩菠秒,活力和炫才是重點



6.Functionality 功能設(shè)計


UI設(shè)計中一個重要的部分即是功能設(shè)計,設(shè)計將更專注如何引起用戶對APP/Web的注意氯迂,而功能設(shè)計將使體驗變得更輕松践叠,讓用戶可以更快地找到信息,以實現(xiàn)設(shè)計和功能之間的平衡嚼蚀、融合禁灼、相互補充。

案例一:Skilling Trading (skilling.com) — Loredana Papp-Dinea , Mihai Baldea

案例二:支付寶APP


7.Storytelling 故事性設(shè)計


故事在整個用戶體驗中扮演著非常重要的角色轿曙。一個完整的故事包含幾個關(guān)鍵點:人物弄捕、人物的需求(目標(biāo))、場景导帝、人在場景中的行為(人和物及環(huán)境發(fā)生了哪些互動關(guān)系)守谓、人的體驗、最終的結(jié)果您单。一個好的設(shè)計不僅僅是信息羅列和元素堆砌斋荞,還需要提供有用的內(nèi)容為用戶提供一個完整的用戶體驗。

講故事就是利用創(chuàng)意的形式把信息傳遞給用戶睹限。這可以通過強大的視覺元素來呈現(xiàn)(字體譬猫、插畫、高清圖片羡疗、顏色染服、動畫、交互元素)叨恨。故事性設(shè)計更多運用于網(wǎng)頁設(shè)計中柳刮,較大的頁面寬幅更有助于講述網(wǎng)頁獨有的故事,為用戶提供個性化的體驗。

講故事可以幫助產(chǎn)品創(chuàng)造出品牌和用戶之間積極的情感連接秉颗,創(chuàng)造出記憶點痢毒,讓用戶感受到自己就是產(chǎn)品或服務(wù)的一部分,他們便會更加愿意使用你的產(chǎn)品蚕甥。

講故事也是一種非常有效的營銷手段哪替,極大地提高你的產(chǎn)品/服務(wù)的銷量。一個好的故事(尤其是一個準(zhǔn)確把握受眾需求菇怀,巧妙結(jié)合企業(yè)產(chǎn)品特色凭舶,并能夠輕松引起用戶共鳴的故事),更能賦予網(wǎng)頁思想和靈魂爱沟,讓用戶不由自主停留帅霜,逐步深入,最終完成購買呼伸。

http://www.thebestreason.gr/en/


圖為知名希臘葡萄酒品牌(Domaine Glinavos)在線網(wǎng)頁身冀,用戶輕松點擊,即可逐步了解必選該酒類品牌的8個理由括享。


8.Video in UI 視頻內(nèi)容


2020年信息傳遞給用戶必須快速搂根,通過視頻內(nèi)容將會更好地完成這個目標(biāo)。不管是選擇通過動畫铃辖、經(jīng)典影片兄墅、廣告片來解釋產(chǎn)品,視頻內(nèi)容對于任何APP/Web都是必不可少的澳叉。

案例一:蘋果官網(wǎng)(https://www.apple.com.cn/pro-display-xdr/)

案例二:Mountain Bike Tracker App Video Background

設(shè)計師:Kirill Shapoval? App類:旅游類App

山地自行車追蹤App利用騎行視頻來吸引用戶隙咸。而不是冗長的宣傳介紹,視頻背景用簡單成洗、簡短的文字更有效地激發(fā)用戶的興趣五督。


9.Attention to details 專注細節(jié)


在UI設(shè)計中,從按鈕瓶殃、圖標(biāo)充包、加載、導(dǎo)航到細微的細節(jié),都影響著設(shè)計水平。隨著新技術(shù)的出現(xiàn)竣灌,在UI中必須注意細節(jié)持續(xù)變化,即使非常小和細節(jié)處的設(shè)計都可能會帶來巨大的沖擊力家浇,并讓產(chǎn)品體驗上升一個臺階。

案例一:Tab bar active animation — Aaron Iker

案例二:線框圖


參考文獻:

【1】2020 UX設(shè)計趨勢:https://mp.weixin.qq.com/s/zf5GWiYwFv6iMuW31-Mt8g

【2】Behance發(fā)布2020設(shè)計趨勢報告:http://www.shejijingsai.com/2019/12/330755.html

【3】支付寶“藍上加藍”背后碴裙,你必須知道的logo色彩常識:https://www.digitaling.com/articles/269912.html

【4】時下流行的鮮艷配色方案钢悲,缺點和優(yōu)點一樣明顯:https://www.uisdc.com/bright-colors-in-ui-design

【5】2020年最佳App背景設(shè)計范例:https://mp.weixin.qq.com/s/hYz46otaG1mqAiMtclVG8Q

【6】Behance 年度好文点额!2020年設(shè)計趨勢全方位分析:https://new.qq.com/omn/20191030/20191030A0CYR500

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市莺琳,隨后出現(xiàn)的幾起案子还棱,更是在濱河造成了極大的恐慌,老刑警劉巖惭等,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件珍手,死亡現(xiàn)場離奇詭異,居然都是意外死亡辞做,警方通過查閱死者的電腦和手機珠十,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凭豪,“玉大人,你說我怎么就攤上這事晒杈∩┥。” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵拯钻,是天一觀的道長帖努。 經(jīng)常有香客問我,道長粪般,這世上最難降的妖魔是什么拼余? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮亩歹,結(jié)果婚禮上匙监,老公的妹妹穿的比我還像新娘。我一直安慰自己小作,他們只是感情好亭姥,可當(dāng)我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著顾稀,像睡著了一般达罗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上静秆,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天粮揉,我揣著相機與錄音,去河邊找鬼抚笔。 笑死扶认,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的殊橙。 我是一名探鬼主播蝠引,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阳谍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了螃概?” 一聲冷哼從身側(cè)響起矫夯,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吊洼,沒想到半個月后训貌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡冒窍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年递沪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片综液。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡款慨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谬莹,到底是詐尸還是另有隱情檩奠,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布附帽,位于F島的核電站埠戳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蕉扮。R本人自食惡果不足惜整胃,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喳钟。 院中可真熱鬧屁使,春花似錦、人聲如沸奔则。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽应狱。三九已至共郭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間疾呻,已是汗流浹背除嘹。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留岸蜗,地道東北人尉咕。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像璃岳,于是被迫代替她去往敵國和親年缎。 傳聞我的和親對象是個殘疾皇子悔捶,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 情況說明:在很多情況下(如使用迅雷批量下載文獻),可以將網(wǎng)址批量粘貼到粘貼板上单芜,然后逐條打開蜕该。 歡迎多多交流Ema...
    快樂的夏天_eaf9閱讀 176評論 0 0
  • Headers HTTP協(xié)議的Header總共分為三種,分別是General Headers洲鸠、Entity Hea...
    Allenware閱讀 656評論 0 1
  • 昨天堂淡,無意中看到一部穿越羅布泊無人區(qū)的短片,講述了整個穿越過程扒腕,特意還去了幾個地方绢淀。片頭部分特意描述了下羅布泊無人...
    來過吧閱讀 547評論 0 0
  • 這兩天在廣州參加騰訊的“理性公益 科技向善”互聯(lián)網(wǎng)公益峰會,聽了大咖的主題分享瘾腰,看了分論壇各行各業(yè)的公益創(chuàng)意...
    徐竹君閱讀 296評論 0 2