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)更改)這一模式。
暗黑模式三大優(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