首頁

2020-2021 設計趨勢報告:用戶體驗篇

資深UI設計者

前言

身為用戶體驗設計師,無時無刻不被世界上的新事物沖刷著認知——互聯(lián)網(wǎng)紅利下降帶來變化莫測的商業(yè)動向、循著摩爾定律野蠻生長日新月異的新技術、各類亞文化群體催生出多元復雜的圈層文化、腦洞口味越來越獨特的年輕人,甚至眼下席卷全球的黑天鵝事件……

任何一個新事物的悄悄冒頭,都有可能在未知的將來影響著用戶體驗設計師。我們能做的是,在起初感受到微微震幅時,便沿著震感逐步尋找源頭,并思考未來的發(fā)展走向。趕在變化降臨前先擁抱變化。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

本文通過研究近一兩年科技、社會文化以及自身用戶體驗領域的變化,從用戶體驗領域關鍵的用戶、媒介(設備與應用)、交互行為、信息與場景的五個角度出發(fā),探索用戶體驗設計未來的趨勢,希望能帶來啟發(fā)。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

更智能的服務提供方式

隨著人工時代到來,過去機械的單向交互方式逐漸被打破,機器漸漸演化成了會主動「觀察」真實場景,「感受」用戶情感,預判用戶意圖并自動完成任務的貼心小棉襖。機器如何為人們提供更智能便捷的服務,未來還有非常大的想象空間。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

1. 基于真實場景推理用戶意圖

隨著AI技術的發(fā)展,智能設備可以越來越無縫地將數(shù)字世界和物理世界嫁接起來,主動感知用戶所處情境并智能提供相應服務。

在2019的 Google I/O 大會上,Google Lens 展示的AR點菜功能可以智能識別用戶掃描的菜單并將美食網(wǎng)站上的相關推薦直接呈現(xiàn)在屏幕上。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

當用 Google Lens 識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節(jié)省人工計算的時間成本。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

隨著信息入口從數(shù)字空間延伸到周圍的物理空間中,未來萬物皆可為用戶體驗的媒介,設計師未來在設計的時候需要注意:

尋找適合的打通真實世界的切入點:在陌生語言、信息復雜或者難以處理等苛刻的環(huán)境下,充分發(fā)揮智能設備對信息智能讀取、批量識別與翻譯等強大能力,幫助用戶完成任務;

將用戶旅程的上下游串聯(lián):根據(jù)生活常識和經(jīng)驗預判用戶行為目的,前置推薦服務;

更加系統(tǒng)細心地考量干擾因素:真實場景是動態(tài)變化的,需要更全方位考慮光線的強弱、多源的噪音、實體的可視性、人員和事件的打斷等因素。

2. 任務自動化,簡化用戶旅程

為了完成一項任務,用戶往往需要借助多個應用來回切換配合,使用起來瑣碎麻煩。如今應用越做越強大也越復雜,過去僅僅解決單一場景的解決方案不再適應于用戶對于完成任務的訴求。

Google Assistant 的新能力 Duplex on the web 可以通過自動跨應用任務處理來簡化用戶旅程。只需要用戶發(fā)出語音指令「預定一輛去某地的車」,助手便可自動跨郵件、日歷、付款等應用調(diào)取信息、自動根據(jù)使用習慣做選擇,并自動填寫信息,而用戶全程需要的只是在關鍵節(jié)點輕敲「確認」即可。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2019年隨著 iOS 13 的更新,「快捷指令」推出了「自動化」能力,用戶通過「if…then…」語法便可為自己的App設計一套程序,實現(xiàn)如:「當我回到公司時提醒我打卡」、「每天早上10點給我的女朋友發(fā)送一條表白短信」等能力,將不相關的場景動作串聯(lián)字一起自動化執(zhí)行,大大節(jié)省人工操作成本。

提升使用效率是用戶體驗設計孜孜不倦努力的方向之一。在利用新技術進一步簡化用戶旅程時,設計師可以充分利用以下因素:

借助語音輸入:比起界面觸控操作,語音交互的直達性可以「穿透」復雜界面,讓設備第一時間明確用戶目標;

基于用戶行為形成習慣記憶:對用戶長期重復的行為做分析處理,構建用戶習慣模型并主動提供服務;

適當考慮專家級用戶:隨著部分用戶的智能設備使用水平越來越高,可以考慮為專家用戶提供自定義操作腳本,滿足其自身的獨特需求。

3. 基于情感感知,主動理解用戶需求

隨著人臉識別、表情識別、肢體跟蹤等技術的提升,機器逐漸學會感性語言,主動感知用戶內(nèi)在情感和心理需求。

2019年1月的CES展上起亞亮相的互動式「情感駕駛空間」技術,可通過傳感器讀取用戶的面部表情、心率等反應,調(diào)整駕駛空間內(nèi)的燈光、影片類型、音樂風格等,舒緩艙內(nèi)乘客心情,由此提供更人性化的出行體驗。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

用戶總是會期待更貼心的服務,設計師未來對同理心的情感嗅覺更加敏銳:

利用感性線索定位用戶情緒:需要通過面部表情、特殊時間節(jié)點或者識別到的關鍵詞,對用戶情緒進行理解和定位,判斷用戶情感理解用戶內(nèi)心訴求是自由探索、趣味娛樂、或者靜謐修行并提供符合用戶當下心境的服務。

綜合使用感性元素進行設計:通過使用線條、色彩、聲音和動作等傳達并喚起相對應的情感,提供更加人性化的體驗。

4. 小結(jié)

更智能的服務提供方式會讓人們生活擁有更多可能性,但一旦火候把握不得當,可能就會造成對人們生活的野蠻入侵。關于如何讓科技更好造福于人們,早在上個世紀,施樂帕克研究中心提出了寧靜技術(Calm Technology)的愿景,認為影響最深遠的技術應該是隱匿不見的,它們?nèi)缋w維般融入日常生活,絲絲入扣,直至不可分辨。

隨著科技的發(fā)展,設計師對新技術不應是不加克制地應用,而應該潤物細無聲般地提供服務,幫助人們從繁雜喧囂的數(shù)字世界中解脫出來,將寶貴的注意力資源投放在讓生活更美好的事物上。

更自然豐富的交互方式

回顧人類和機器的交流語言,從命令行界面、圖形用戶界面到自然用戶界面,人機交互方式越來越貼合人與人之間更自然的交流方式,其背后是心智模型與實現(xiàn)模型的高度擬合的趨勢。

在自然用戶界面中,為滿足新形態(tài)智能硬件對新接口的需求,以及人們對更豐富強大的交互方式的自然訴求,越來越多的自然用戶界面被開發(fā)出來。語音交互和隔空手勢交互便是近幾年迅速發(fā)展并落地的兩種交互方式。

1. 隔空手勢交互:更自由、更靈動

為了讓機器更好地讀懂用戶的身體語言,能夠感知深度信息的攝像頭走進了日常手機。2019年國內(nèi)外手機廠商的發(fā)布大會上,LG 手機 G8 ThinQ 以及華為發(fā)布 Mate 30 系列推出的隔空手勢,可實現(xiàn)一些簡單的諸如滑動、切歌、截屏等效果。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

除此以外,隔空手勢支持更加細微的手勢,如旋轉(zhuǎn)、揉搓等,可以更直觀、更靈活的方式操控界面,讓用戶獲得一種像魔術師用意念控制事物運作的快感。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

對于隔空手勢操作網(wǎng)上的言論褒貶不一,其中爭議性最大的就是隔空手勢宛如「殺雞用牛刀」,明明可以用更加精準的手勢觸控,為什么還要用看似很酷炫其實精準度更低的隔空手勢操作?

隔空手勢并不是要替代觸控手勢成為主流的人機交互方式,更多是對情境式障礙場景的補充。在某些場景下,用戶使用設備的條件可能是充滿干擾的。想想看當你邊看手機食譜邊炒菜的時候、邊煲劇邊剝小龍蝦的時候、疫情期間出門佩戴橡膠手套無法正常觸控手機屏幕時…..隔空手勢是不是特別好用?

每個人在特殊的場景下都有可能面臨感官障礙,未來的設計也應該更多地考慮情境式障礙的場景,讓用戶無論身處何時何地依舊能一如既往無障礙地使用設備。

2. 語音交互:更精準、更好玩

語音交互作為更趨近于人與人之間最自然的交流方式,近些年有許多發(fā)展的突破點。

在發(fā)展主線上,語音交互趨向更自然、更人性化、更個性化。過去反人類的一些溝通方式慢慢被「調(diào)教」。此外,多人會話場景下的技術方案日漸增多。

2019的 Google I/O 大會展示了一個視頻片段,視頻中的兩位嘉賓相繼吐槽,經(jīng)常出現(xiàn)針鋒相對難以聽清的時候,這時用戶可以調(diào)節(jié)音源音量選擇性增強自己關注的人物聲音,讓另一個人「靜音」。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

△ 滑動選擇音源

此外,語音交互除了在智能音箱領域廣泛應用以外,也逐漸應用在廣告等更多的傳播媒介中,刷新人們?nèi)粘J褂皿w驗。2020年2月索尼提交了一項廣告播放新專利。當用戶在觀看電視節(jié)目時,如果出現(xiàn)廣告,只要站起來大喊廣告中對應品牌的名字,便可直接跳過這個廣告。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

設計師在語音交互場景下,需要留意以下幾個比較容易被忽視的因素:

用戶語音交互習慣培養(yǎng):如今還處于培養(yǎng)用戶語音交互使用習慣階段,設計師需要更多地考慮應用的語音交互規(guī)則如何才能更趨近于人們?nèi)粘5臏贤晳T,并進一步為人們的社會習俗所接納。

真實場景下的多人音源:在現(xiàn)實情境中, 在多人對話場景下將面臨音源不清、穿插停頓、噪音過多等影響體驗的情況,由于計算機聽覺分析能力開始從單人音源拓寬到了多人音源,多人對話解決方案上還有很大想象空間。

改變傳統(tǒng)的視聽體驗:在使用場景上,語音交互接口也將逐漸運用到更多的媒介上,更全面地刷新用戶體驗。

3. 小結(jié)

人類擁有雙手、眼睛、耳朵和發(fā)聲的嘴巴,但是并不總是在每個使用場景下都能自如地使用:在安靜的自習室下聲音收到限制,在駕駛場景下注意力受到限制,在雙手拎著東西場景下雙手受到限制……但目前許多產(chǎn)品設計都建立在用戶能完整使用感官功能這一理想化的基礎上。

未來的發(fā)展趨勢傾向于將視、聽、觸、嗅等多通道信息完美整合起來,綜合使用多種輸入通道和輸出通道,根據(jù)用戶使用場景用最恰當?shù)姆绞絺鬟f服務,滿足用戶多方位的需求。

硬件形態(tài)帶來新的挑戰(zhàn)

盡管喬布斯曾斷言3.5英寸是手機的黃金尺寸,但作為人們?nèi)粘?nèi)容消費與娛樂的窗口,手機屏幕毫無疑問地變得越來越大,甚至超出傳統(tǒng)物理限制。人們對大屏享受的追求與設備攜帶便捷性之間的矛盾由來已久,硬件形態(tài)的變化對舊有的用戶體驗設計思路帶來的新的挑戰(zhàn)。

1. 大屏幕:單手持握新挑戰(zhàn)

屏幕橫縱比越來越大,而人類的手部具有先天限制,曾經(jīng)慣用的界面布局方式在高橫縱比的屏幕上可能無法被大拇指無障礙全覆蓋,使得越來越多的設計更加重視利用移動屏幕下半部分。

操作與信息進一步下移:

高德地圖、蘋果地圖的搜索框下移,方便單手操作用戶快速激活輸入框;

影視資訊平臺IMDB強化底部標簽欄功能,雙擊「搜索」tab即可激活輸入框,無須艱難地觸摸頂部。

即時戰(zhàn)斗類手游皇室戰(zhàn)爭的說明卡片主要展示在下半部分,方便用戶進行卡片上的相關操作。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

底部導航被賦予更多能力:

Pocket的底部標簽欄現(xiàn)在兼任漢堡菜單功能,在激活狀態(tài)下再次點擊主頁icon可選擇主頁上須展示的內(nèi)容。

利用下滑手勢代替點擊:

Snapchat的許多表示前后進退關系的頁面都不是」返回「按鈕,而是向下箭頭,用戶可下滑退出當前頁面。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2. 折疊屏:新形態(tài)的交互方式

為了解決設備形態(tài)和人類手部先天限制之間的矛盾,折疊屏誕生瀏覽并顛覆舊有的界面設計方式。

更靈活的信息布局

過去在單屏設計下,考慮到用戶注意力由上到下縱向衰減,因此信息布局更多是按照優(yōu)先級從上往下排序。而折疊屏中,屏幕展開后便可以開辟出更大的可利用空間,將次級頁面或者較為重要的內(nèi)容曝光在第二屏,對信息的布局將帶來全新的變化。設計師為保證大小屏下順暢的閱讀體驗,需要對信息模塊在不同空間布局下的流動性有更強的把控能力。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

更便捷的多任務操作

在過去的單屏體驗中,用戶只能將注意力完全集中在當前的界面中,一次只做一件事。但在實際生活中,用戶面臨的情景往往是主線任務和支線任務的頻繁交錯,并且根據(jù)會任務不同的性質(zhì)自由調(diào)動自己的注意力重心,如邊看視頻邊聊天、邊看直播邊逛街等等。在折疊屏中,設計師可以探索更多主線和支線交錯進行的場景,利用折疊屏帶來的更大的屏幕空間,可以讓用戶在不離開主線場景的基礎上進行支線任務的處理,大大節(jié)約了在不同App上來回切換的操作成本。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

更直觀的拖拽交互

此外,隨著多任務處理越來越廣泛使用,拖拽交互將成為重要的交互模式之一。文本、表情包、圖片、視頻等交互對象,不再需要經(jīng)過復雜的分享轉(zhuǎn)發(fā)流程才能在不同App中流轉(zhuǎn),通過拖拽的方式可以更直觀地進行交互。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

雙面屏互動玩法

外折疊屏在折疊狀態(tài)下可轉(zhuǎn)為雙面屏,等于是給用戶增加多一個觀看視角。例如華為 Mate X 的鏡像拍攝可以讓被拍攝者即時獲知自己的鏡頭影像是否滿意,這一拍女友神器有望成為直男拍攝終結(jié)者。在未來更多的多人觀看和互動玩法將被開拓出來。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

△ 華為Mate X 的鏡像拍攝

未來隨著5G通訊技術的成長,越來越多的設備可以同時加入物聯(lián)網(wǎng),人們的生活將被各種智能設備圍繞,設計師需要參與更多屏幕外的設計,讓不同設備串聯(lián)在一起協(xié)同合作,讓用戶能更加自在地享受科技的便利。

疫情催生新的線上體驗

席卷全球的新冠疫情讓數(shù)十億用戶乖乖待在家里。過去需要花費大量精力去教育的用戶使用習慣因為疫情紛紛轉(zhuǎn)變。云購物、云蹦迪、云賞櫻、云監(jiān)工……人們足不出戶便可還原許多線下場景。隨著用戶線上和線下生活的界限進一步模糊,用戶對于應用的效率和情感訴求也發(fā)生了變化。

1. 更關注效率導向

疫情讓遠程辦公學習需求劇增,多人協(xié)作場景越來越頻繁,許多企業(yè)隨之升級了電話、視頻會議、文檔制作等多人協(xié)作效率軟件。過去僅僅考慮少人場景協(xié)作的方式不適用,設計師需要比以往更多地考慮多人協(xié)作場景下,如何對海量密集的信息進行分析處理和展示。

在學習方式上,由于線下學習轉(zhuǎn)移至線上,學生群體對于娛樂向軟件也有了效率訴求。為了順應用戶訴求變化,2020年5月QQ推出學習模式,屏蔽娛樂性的內(nèi)容推送,讓學生更專注在學習上。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2. 更注重緩解社交疏離感

除了效率訴求急劇提升以外,隨著長時間的線上學習與辦公所產(chǎn)生社交疏離感和缺失感,人們對于線上學習工作的情感化訴求也進一步增強。

2020年推出的plagi遠程辦公軟件支持設置每個人的avartar形象,讓大家在遠程辦公時依舊能時刻感受到彼此的存在。在完成任務時還可以放鞭炮慶祝,讓員工能感受到親密無間的線上辦公體驗。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

設計師需要更加關注如何讓線上生活進一步與現(xiàn)實生活圈和時間線接軌,通過拓展真實社交下的更多伴生行為讓線上也能還原線下的真實場景細節(jié)和互動體驗,以彌補用戶對真實社交的缺失感。

3. 加速人和信息的強連接

疫情的發(fā)生加速了人與信息之間的連接。人們越來越習慣將自身的身體資料、心情狀態(tài)等信息沉淀在智能設備上。

為了做好廣大市民群眾的健康監(jiān)測服務,輔助疫情防控工作,微信和支付寶在2020年年初都上線了健康碼服務,不同顏色的健康碼代表人們不同的健康情況,市民出入特定場所都需初始健康碼。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

隨著人的數(shù)據(jù)化越來越深入,個人身份信息的線上化在各平臺上將成為更加通用的能力。設計師需要考慮如何更自然更低成本地將線下動態(tài)變化的資料信息線上化,更有效地對用戶信息進行加工處理,以及記憶用戶的使用習慣和行為,以便幫助用戶更地完成任務。

疫情的出現(xiàn)加速了線下生活線上化,短短時間內(nèi)我們看到日常習以為常的應用為響應疫情下的特殊需求紛紛出現(xiàn)改造,釘釘、QQ群被改造成上網(wǎng)課、批改作業(yè)的地方,醫(yī)療衛(wèi)生公眾號開辟了實時疫情播報與辟謠通道,無接觸設計和服務需求異常突出……這也啟發(fā)了設計師需要保持對突發(fā)事件的敏感力以及應急能力,在日常生活中留心思考,為日后突發(fā)事件提供充足的場景支撐。

關注以人為本

在洶涌的資本語境下,互聯(lián)網(wǎng)設計師裹挾在商業(yè)驅(qū)動的結(jié)果導向中狂奔,對設計的倫理和責任鮮有發(fā)聲,但伴隨著互聯(lián)網(wǎng)紅利退潮,發(fā)展放緩,狂奔之下的人本問題也逐漸浮出水面。在大趨勢下,UX設計師需要培養(yǎng)自身設計對倫理和責任的敏感度,在滿足商業(yè)目的外,重拾節(jié)操,為多群體,為大社會設計,更加注重「以人為本」。

1. 更包容性的設計

包容性設計師指在做設計產(chǎn)品的時候,考慮到各類用戶的訴求,輸出具有包容性的設計方案。包容性設計依舊是2020年設計主題之一,伴隨著互聯(lián)網(wǎng)產(chǎn)品全球化,在通用性和包容性上也提出了新的要求。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

為身障人士設計

三星在2019年針對東南亞市場推出了一款讓聾盲人士和健全人實時交流的app:Good Vibes,盲聾人輕擊屏幕輸入摩斯電碼,預先連線好的另一臺手機就會顯示從盲聾人發(fā)來的短信。健全人用普通的文字輸入回復,在盲聾人這一端就會翻譯成摩斯電碼、以手機振動的方式讀出短信內(nèi)容。

GOOD VIBES宣傳視頻:https://v.qq.com/x/page/g3108sr8qc9.html

餓了么:在餓了么送貨騎手中,約8%受色盲色弱的困擾(全國男性群體中紅綠色盲色弱占比達8%-9%,餓了么騎手男性占比90%),為此餓了么設計團隊在2019年對app的進行了重新設計,包括使用WCAG無障礙色彩對比度,以及無障礙色盤,以及調(diào)整字階,使用輔助圖形等設計手段來解決部分騎手在送貨途中使用APP的痛點問題。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

△ 餓了么UED:《為騎士創(chuàng)造平等 — 配送 App 的包容性設計》

跨年齡段設計

谷歌助手禮貌功能 ( Google Pretty Please ) :開啟谷歌助手禮貌功能后,如果使用者在下達指令的語句中包括「Please」,谷歌助手會對禮貌的請求表示感謝,以此培養(yǎng)孩子的禮貌言行。

Google Pretty Please功能宣傳:https://v.qq.com/x/page/e3108ue3e2t.html

Swift Playground:當10后小學生VITA君的編程課被「可敬的發(fā)量」刷滿彈幕時,Swift playgrounds功不可沒,這款為兒童新手學習編程的軟件,用趣味的游戲方式為4歲以上低齡用戶提供了一個學習編程的低門檻平臺。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

為性別平等而設計

蘋果emoji:回看歷年蘋果emoji的更新,從膚色平等,到性別、性向平等,再到為殘疾人設計,2020年再為跨性別者增加新表情,性別平等依舊是包容性設計中重要一環(huán)。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

Airbnb插畫:愛彼迎在插畫系統(tǒng)中,也為不同膚色,不同職業(yè),不同性別,以及身障人士進行了人物的繪制。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2. 關注用戶隱私

2019是互聯(lián)網(wǎng)科技隱私問題沉浮的一年,國外有Facebook因泄露隱私收到史上最大罰單,國內(nèi)則打響了「人臉識別第一案」?;\罩在隱私信任危機下,個人信息和數(shù)據(jù)立法突飛猛進,美國推動《加州消費者隱私法案》,國內(nèi)也將在2020年出臺《個人信息保護法》和《數(shù)據(jù)安全法》。

MIUI12推出隱匿面具功能

Android開放生態(tài)導致的權限隱私問題一直被用戶所詬病,某些APP存在用戶不授權就無法使用情況,針對這一情況,MIUI12推出了隱匿面具功能。當用戶在開啟某些APP要求授權權限時,可以選擇空白通行證進行授權,從而保護用戶真實信息。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

在MIUI12的更新中,還推出了照明彈、攔截網(wǎng)兩項隱私保護功能

iOS 14剪貼板提醒

在iOS 14的更新中,保護用戶隱私方面進一步升級。

其中剪貼板提醒設計很貼心,當用戶打開應用,如果該應用讀取了你剪貼板的內(nèi)容,會在系統(tǒng)頂部彈出提示,用戶能在第一時間意識到剪貼板內(nèi)容被讀取,幫助用戶更好的保護自己的隱私內(nèi)容。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

3. 健康的數(shù)碼生活方式

科技的發(fā)展是一把雙刃劍,互聯(lián)網(wǎng)產(chǎn)品的發(fā)展給用戶帶來便捷和沉浸體驗的同時,也使得用戶沉溺于科技所帶來的惰性和投食之下,逐漸喪失了對真實生活的把控權,被科技綁架。

數(shù)字福祉(digital wellbeing)近年被頻頻提起,指科技產(chǎn)品需要權衡好數(shù)碼產(chǎn)品和真實生活之間的平衡,防止數(shù)碼產(chǎn)品過渡分散用戶的注意力而影響生活質(zhì)量。

Android Q 專注模式 Google Android Q Focus Mode

Android Q的更新加入了專注模式,用戶在專注模式下,可以在系統(tǒng)層面快捷地關閉使你分心的應用,讓你聚焦于更重要的事情。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

防沉迷系統(tǒng)升級

推薦技術的進步,產(chǎn)品體驗的升級,給用戶帶來了更合胃口的菜式和沉浸體驗,但同時也被冠上了「電子海洛因」的稱號。游戲或者內(nèi)容產(chǎn)品的防沉迷系統(tǒng)依舊會是數(shù)字福祉下不可避免的趨勢。

王者榮耀在2020年升級防沉迷系統(tǒng),對青少年的娛樂時間和點券充值的限制進行了進一步升級。承接話。B站在2019年推出青少年模式,在該模式下,使用時長和內(nèi)容推薦等做了定制化處理。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2020年的UI設計趨勢,一方面是對往年風格的衍變和細化,另一方面,在扁平克制的界面風格盛行后,設計師們向往更自由、更突破的視覺表達。

UI的繼承和創(chuàng)新

1. 深色模式

2019年iOS 13深色模式姍姍來遲,緊接著大廠APP相繼推出此功能。在2020年,深色模式會繼續(xù)普及外,也會在可視性和實現(xiàn)成本方面有更多細節(jié)打磨和研究。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

2. 新擬態(tài)

設計趨勢的發(fā)展是螺旋式上升的,在扁平化設計流行之后,對物體的擬真再一次回歸設計圈,新擬態(tài)以一種對舊擬物風格的再創(chuàng)新,重新流行起來。

新擬物風格(Neumorphism)緣起于設計師Alexander Plyuto發(fā)布在dribbble的一組作品,以投影重新對扁平界面進行了塑造,模仿出類似浮雕的視覺效果,感受耳目一新,引起大量設計師相盡模仿。

新擬態(tài)的實用性和可落地性有待商榷,但是作為一種新的風格受到設計師擁躉,也不失為下一波風潮到來前的靈感繆斯。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

WWDC2020對mac OS的更新也重新定義了新擬態(tài)設計語言,在mac OS新系統(tǒng)Big Sur中,圖標的設計增添了輕微的漸變、投影、高光,以此來營造圖標內(nèi)元素之間的縱深關系。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

3. 多彩配色

在扁平簡潔UI風格盛行之后,豐富的色彩依舊是設計趨勢之一,大面積色塊,碰撞配色,帶來更具沖擊感的視覺體驗。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

4. 字體裝飾化

UI界面逐漸扁平,色塊圖標弱化,為突出頁面重心和內(nèi)容,iOS 11在界面標題上使用更大的字號,更粗的字重。近年在大標題的風格衍變下,文字在傳達信息外,也開始有了裝飾性作用,采用超大字體,成為頁面排版美化的一部分。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

5. 更大圓角

大圓角的風格會繼續(xù)延續(xù),相較以往,卡片的處理圓角會更大,隨之帶來的是多的留白處理,結(jié)合大字號,帶來更透氣通透的視覺感受。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

Mac OS Big Sur的界面相對舊版本采用了更大的圓角;系統(tǒng)圖標的設計統(tǒng)一成圓角矩形。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

6. 更豐富的插圖

UI插圖的豐富體現(xiàn)在樣式和內(nèi)容上,樣式上開始3D化,內(nèi)容上更注重插圖敘事的表達。

7. 3D插圖

3D圖形往年更多運用在動態(tài)影像或運營類設計中,隨著3D的普及運用,UI插圖也會迎來3D化,給用戶帶來更立體,更新鮮的視覺感受。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

8. 講求敘事表意

相較于往年追求形式的UI插圖,新趨勢下的插圖更講求功能性,每一副插圖都承載一定的作用——傳達功能信息或透傳品牌情感;同時插圖更講求畫面表意和情節(jié),給用戶敘事性的視覺體驗,增進用戶和產(chǎn)品之間的情感聯(lián)系。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

9. 插圖組件化

插畫的流行,隨之而來的是成本的水漲船高——一套系列插圖為保持風格統(tǒng)一,往往由唯一設計師繪制,同時為兼容各類場景,設計師往往要繪制多張。

為解決插圖的成本和效率,插圖開始以組件化的方式進行繪制——插圖設計師將插畫進行拆分繪制——不同人物,不同場景,不同物件等,再通過組件化的拼接合成,使用組件的設計師可以根據(jù)需求場景自由組合,也避免了風格不統(tǒng)一問題。

設計師Pablo Stanley將日常繪制的插畫制成一套矢量插圖組件庫,將人物分為:半身、全身和坐姿3大類。通過不同表情、發(fā)型和服裝可自由搭配出近60萬種組合。

Pablo Stanley人物插畫系統(tǒng):https://v.qq.com/x/page/s3108yeyhmt.html

10. 多維度動畫表現(xiàn)

新趨勢下,動畫一方面回溯復古線描手繪風格,另一方面追求更三維的體驗,同時幀率進一步提升,追求更流暢的視覺感受。

11. 手繪動畫

手繪插圖是往年的熱門,其隨性自然的筆觸,能給用戶帶來親切的感受,在新的趨勢下,動畫的加入賦予手繪插圖一份靈性和趣味。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

12. 3D運動

Google Material Design通過卡片投影層級和二維動畫規(guī)律,賦予扁平界面Z軸的縱深感。隨著3D的普及流行,新趨勢下的界面,界面的運動從二維走向三維,表現(xiàn)出3D場景下透視感。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

13. 高幀率動畫

高幀率影視從線下電影院移步到線上流媒體,手機高幀率屏幕從90Hz到120Hz逐步升級,用戶對畫面流暢的定義一再刷新,UI動畫的幀率升級也會是新的一輪趨勢。

Telegram的表情采用了高幀率動畫,給用戶更流暢的視覺感受。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

更的涉及協(xié)作方式

體驗的持續(xù)升級,產(chǎn)品的高速迭代,對UX設計師的設計師效率提出了更高的要求。的設計方式是一個永恒的趨勢。

1. 從本地文件到云端協(xié)作

傳統(tǒng)的文件交接方式效率低下,導致設計師之間信息不對稱,最終影響產(chǎn)品的一致性體驗。近些年在線設計協(xié)同工具發(fā)展迅速,從UI設計、 設計交付以及組件協(xié)同等環(huán)節(jié)上給設計師提供更加實時的協(xié)作體驗,獲得大量UX設計師的簇擁。在2019 uxtool的設計工具調(diào)研中,在線設計協(xié)同工具佼佼者figma以其協(xié)作和性能優(yōu)勢,大有追趕sketch之勢。

隨著團隊對設計效率要求的提高,設計文檔從本地走向云端協(xié)作是不可逆趨勢。不過設計工具的迭代是需要成本的,尤其在大型設計團隊,設計工具需要渡過陣痛期來完成迭代,進而提升設計效率和體驗一致性。

2. 科學有效的設計系統(tǒng)

UX的發(fā)展,從早期的靜態(tài)規(guī)范到當下的動態(tài)設計系統(tǒng),是為解決產(chǎn)品迭代增速后帶來的設計效率和產(chǎn)品體驗問題。商業(yè)驅(qū)動下的產(chǎn)品迭代速度有增無減,設計系統(tǒng)依舊會是未來幾年的設計趨勢之一。

這里說的設計系統(tǒng)不是廣義上的設計系統(tǒng),而是在互聯(lián)網(wǎng)設計的發(fā)展中,對組件化設計逐步迭代升華的一套設計協(xié)作方法:

「設計系統(tǒng)(Design systems)是一組為了共同目標而服務的內(nèi)在相互聯(lián)系的設計模式和多人協(xié)同執(zhí)行的方法。」(引自《Design systems》,Alla Kholmatova,C7210翻譯)。

3. 設計系統(tǒng)歷程衍變

組件化的發(fā)展歷經(jīng)規(guī)范文檔到UI組件,再到設計系統(tǒng),形態(tài)從最初對設計一致性的指導規(guī)范,到對產(chǎn)品研發(fā)流程的規(guī)范,以及產(chǎn)品設計價值觀的輸出,當下的設計系統(tǒng)以集大成者形式影響整個產(chǎn)品的設計形態(tài)。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

設計系統(tǒng)的結(jié)構見下圖:

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

4. 設計系統(tǒng)的求同存異

設計系統(tǒng)并非一成不變的,他是一個動態(tài)進化的系統(tǒng),會根據(jù)團隊性質(zhì)、產(chǎn)品特性在內(nèi)容上有所區(qū)分——比如大團隊更應該大而全,小團隊更傾向小而精;成熟產(chǎn)品的設計系統(tǒng)更傾向于打造完整閉環(huán)的合作流程機制,新產(chǎn)品的設計系統(tǒng)應該以小為始,快速迭代……

隨著產(chǎn)品的垂直化,細分化,設計系統(tǒng)的趨勢會是在趨勢大同之下找到適合產(chǎn)品和團隊自身的形態(tài)和節(jié)奏。

Material Design是一個包含了指導規(guī)范、組件,以及設計開發(fā)工具的自適應性設計系統(tǒng)。

它作為平臺型性設計系統(tǒng),更為大而全的規(guī)范了整個生態(tài)系統(tǒng)的設計風格,以及提供工具讓研發(fā)者能快速產(chǎn)出符合規(guī)范的產(chǎn)品。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

△ Google生態(tài)龐大繁雜,Material Design更為全面

Ant Design作為一個為to B產(chǎn)品提供解決方案的平臺,更多從設計可用性和完整性考慮設計系統(tǒng)的搭建。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

△ Ant Design通過模塊化解決方案,降低冗余的生產(chǎn)成本,讓設計者專注于更好的用戶體驗

QQ作為一款面向95后的2C社交產(chǎn)品,其設計系統(tǒng)Q語言從風格調(diào)性上對設計進行規(guī)范,同時給予設計師一定的自由度;也考慮到QQ內(nèi)兼顧多個產(chǎn)品,以及界面主題樣式,對基礎組件的使用場景和代碼進行了規(guī)范,方便設計和開發(fā)敏捷開發(fā)。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

Q語言,給予產(chǎn)品的自由調(diào)性之外,也針對主題和基礎組件進行了規(guī)范。

每個產(chǎn)品和團隊都有自身的特征,設計系統(tǒng)的建設也應該有的放矢,沒有可照搬的標準答案,在大方向下找到適合自身的解決方案才是的可行之道,將效率最大化。

5. 科學有效的優(yōu)化迭代

組件是設計系統(tǒng)中的重要組成部分,但是以往靜態(tài)的、孤立的協(xié)作方式使得組件的更新迭代滯后和阻塞。隨著設計系統(tǒng)的發(fā)展,設計師組件化思維的普及,組件的更新需要更科學的方式進行管理。

Figma在2019年推出的Design System Analytics功能,組件設計師可以借此查看組件的使用情況,包括引用次數(shù),解組次數(shù)等,并可以生成組件使用情況的曲線趨勢圖,以數(shù)據(jù)的形式,科學地推動組件的優(yōu)化迭代。

騰訊萬字干貨!2020-2021 設計趨勢報告:用戶體驗篇

選擇分析的時間段;組件使用的次數(shù)曲線圖;團隊使用情況;所有組件使用情況

后記

未來的用戶體驗會出現(xiàn)什么新趨勢?人工智能等算法的發(fā)展、5G技術普及、新的智能設備形態(tài)、新的信息處理技術、新一代用戶的喜好和口味……這些往后或?qū)⒂绊懹脩趔w驗發(fā)展的走向。未來用戶對體驗的要求只會越來越高。

用戶體驗設計師需要了解更多的技術動向,但安身立命之本還是讓用戶真正受益:立足于用戶真實使用場景,在理性價值層面上,打造可用、易用、的設計;在感性需求層上賦予情感上的愉悅性,在反思層面賦予意義價值。

文章來源:優(yōu)設    作者:騰訊ISUX

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

上半年最熱門的新擬物設計趨勢是如何演變的?

資深UI設計者

新擬物化——Neumorphism ,這么說可能不容易理解,但如果說「新擬物風格」,想必 UI 界的設計師們就知道這股「風頭」,在2020年刮的多么兇猛了。

烏克蘭設計師亞歷山大·普盧托 (Alexander Plyuto) 在 Dribble 平臺發(fā)布了一張 UI 作品《Skeuomorph Mobile Banking》,由于該作品使用了擬物化的設計風格,令人耳目一新,導致了作品的熱度持續(xù)飆升,并登上了平臺 Popular 榜首。Dribble 的評論區(qū)直接炸開了鍋,大家紛紛討論。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ 普盧托的《Skeuomorph Mobile Banking》,獲得了3000多次喜歡

隨后一位評論者杰森·凱利(Jason Kelley)在評論中將 New Skeuomorphism 「新擬物化」組合得到的 Neuomorphism 稱為「新擬物」 ,并決定去掉「 o 」,于是新設計詞匯「 Neumorphism 」便產(chǎn)生了。之后大家便用此做 Tag ,為自己的新擬物化設計作品打標簽上傳。

此風格的出現(xiàn)也給一直流行的扁平化設計添加了新的展現(xiàn)形式。今年2月初,三星召開 Galaxy Unpacked 活動,為宣傳新設備而發(fā)出的邀請函,便應用了新擬物化。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ 凸出的部分,用來比喻新機型的賣點

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

什么是新擬物風格?

想要了解新擬物的由來,就必須知道擬物的概念。擬物又被稱為擬物化,或是現(xiàn)實主義(Realism),概括的說其主要目標是使用戶界面更有代入感,降低人們使用的學習成本,產(chǎn)生熟悉親和的情感聯(lián)系。

A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.

via:en.wikipedia.org/wiki/Skeuomorph維基百科上關于擬物化的釋義

Apple 蘋果公司最早提出了擬物化的設計概念,通過模擬現(xiàn)實物體的紋理、材質(zhì)來進行界面設計,當時的 UI 設計師們都為擬物化設計「癡狂」。蘋果創(chuàng)始人喬布斯也非常推崇擬物化,他認為:「通過擬物化,用這種更加自然的認知體驗方式,可以減少用戶對電腦操作產(chǎn)生的恐懼感」。不妨來回憶下曾經(jīng)擬物化的 IOS 界面:

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ IOS 5系統(tǒng)中的相機展開狀態(tài)(擬物化的鏡頭)

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ 擬物化的精美 ICON

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ IOS 6系統(tǒng)中,被精細刻畫的錄音機(底部指針也很惟妙惟肖)

而新擬物則是擬物的變體,在擬物的基礎上改變了圖形的樣式,讓設計元素看起來更有真實感,不再是精細的模擬,更像是從界面中「生長」出來。設計師 Michal Malewicz 以卡片的形式,將新擬物和質(zhì)感設計(Material Design)對比,闡述了二者在實現(xiàn)時的差別。

新擬物卡片給人呈現(xiàn)的是一種無縫隙的「閉合」感,由界面中凸起;而質(zhì)感設計卡片,則是漂浮狀,陰影向四周發(fā)散,沒有邊界限制;二者的光影效果也非常明顯,新擬物偏柔和,質(zhì)感設計則相反,非常凸顯物體本體。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

Michal Malewicz 還標注了新擬物卡片的背景、陰影和高光的色值,整體色調(diào)比較接近。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

擬物化風格的結(jié)構由背景色+高光色+陰影組成,掌握了基本規(guī)律,就可以通過改變按鈕、卡片的參數(shù)進行調(diào)整變換。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ 形狀、陰影參數(shù)的不同,實際效果也有區(qū)別

新擬物風格在UI層面的設計表現(xiàn)及趨勢?

新擬物也經(jīng)常被拿來與扁平化比較,因為擬物和扁平化是兩個相對的概念。其實在蘋果創(chuàng)造的設計系統(tǒng)的早期界面其實是非常擬物風的,但系統(tǒng)從 IOS 7開始,才轉(zhuǎn)向扁平的設計風格。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

隨著 AR、VR 技術的進步,其實對于真實物理環(huán)境,或者說對顯示效率的提升之后,我們對接近物理環(huán)境的設計更熱衷了。比較有代表性的就是 Google 推出的 Material Design System,它基于人們?nèi)ツM真實的物理世界的樣子,進而在數(shù)字世界里展現(xiàn)我們對于真實世界的一個反饋后,這樣的設計流程和邏輯,也讓我們的設計更真實,更具有感染力。當然也不止 Google 一家發(fā)布了這樣偏擬物化的設計風格。

從美學角度來看,其實新擬物化拋棄了之前很多擬物化里不必要的冗余,比如一些陰影、細節(jié)的繁瑣設計,更偏近現(xiàn)在先進科技發(fā)展的設計風格。比如 Windows 推出的 Fluent Design System ,正迎合了未來的 AR、VR 技術廣泛普及后的設計環(huán)境,希望打造一個先趨的設計系統(tǒng)。

在 Fluent Design System 提到的特點有:Lignt、Depth、Motion、Material、Scale。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

1. Lignt

光照,它指的是點擊或 Hover 的動作上面加入光照的效果,或是像柔和的光源灑落在空間中,可以去反應物體本身的反光質(zhì)感,它和 Material Design 強調(diào)的光影的擴散的光影效果是不同的概念。

2. Depth

深度,其實它的概念從 Material Design 開始就已經(jīng)被強調(diào)了,但是 Fluent Design System 希望是用更多的方式去呈現(xiàn),比如井深的模糊效果,視差滾動的動態(tài)效果,物件彼此的大小與位置等等。

3. Motion

動效,其實它想強調(diào)的動態(tài)效果更接近真實的世界,更強調(diào)細膩的變化,比如李安的電影「比利·林恩的中場戰(zhàn)事」,這個電影拍攝的幀數(shù)與以往傳統(tǒng)電影不一樣,看起來的感覺會更加的流暢自然,你體驗過之后會很難回去之后那種電影呈現(xiàn)效果了。而 Windows 強調(diào)的 Motion 也是一樣的,比起這種單調(diào)的動作,它也會去強調(diào)每個設計對象彼此之間的動態(tài)效果的時間差,看起來會更加的流暢自然。而且與真實空間中前景后景的物理概念一樣,不同的時間差會更容易凸顯出想要凸顯的主題效果,也會更加的聚焦。

4. Material

材質(zhì),其實在 Windows 提出的 Fluent Design System 里面,它會出現(xiàn)大量的模糊,透明的背景。也就是模擬毛玻璃的材質(zhì)感。通常也會代入一些微光源的效果。除了能夠吸睛,吸引你的視覺之外呢,其實在 AR、VR 的界面上面感知空間中的物件是很重要的,所以模糊的背景的利用可以在不影響觀看內(nèi)容情況下,還能起到背景暗示的作用。其實毛玻璃效果在 Windows 系統(tǒng)中已經(jīng)被運用到了,但是由于當時的效能以及干擾視線的問題僅僅運用在了一些小區(qū)域,而這次 Fluent Design System 的就成為了最強烈的視覺焦點,其實同樣的 iOS 和 Mac iOS 系統(tǒng)里面在最近的更新也大量使用了模糊效果。

6. Scale

縮放,在視覺上眼前的物體大,后面的物體小,所以縮放也是來營造空間感、縱深感,尺度感的這樣一個設計特性。

新擬物風格在設計上的應用體驗?

1. 界面設計上的特點

常應用于圖標、卡片或按鈕元素設計上,背景板多為干凈的純色;界面平滑,沒有明顯的顆粒感;

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ Filip Legierski 《 Banking App 》

按鈕的外邊框均設置了陰影、漸變效果,突出立體感;

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ Samson Vowles《 Neumorphic dark ui kit components 》

在視覺處理上,凸出的按鈕為可點擊的狀態(tài),凹進去則代表已選中。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》

2. 被吐糟的缺點

層次結(jié)構弱

Whale Lab 觀察發(fā)現(xiàn),新擬物弱化顏色區(qū)分而強調(diào)近遠景陰影布局,所以整體色彩都相近,除了在個別的位置加入其它顏色點綴,用戶識別起來也會迷茫;而卡片、按鈕都使用了陰影,高光效果,層次結(jié)構不明確,也很難帶來流暢的體驗;

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

△ 新擬物風格,F(xiàn)ilip Legierski《 Neumorphism UI Elements 》

對比度和視覺限制

明顯的對比是界面設計的重要原則。由于新擬物風格具有各種陰影色調(diào)和角度,可單擊的內(nèi)容與不可單擊的內(nèi)容區(qū)域在哪里不是很好區(qū)分。根據(jù)產(chǎn)品的功能和要求,每個應用神經(jīng)同構的產(chǎn)品都可以具有自己的UI階段規(guī)則;但是由于陰影,角度和浮動水平的不同,由于缺乏一致性,迷失方向的可操作項,「神經(jīng)變形」會給用戶帶來混亂,最終為殘疾用戶造成使用障礙。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

如同下面這個例子,按鈕狀態(tài)已點擊和未點擊的一個效果,由于受壓狀態(tài)的反差太小,則看起來的效果也沒有什么不同。

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

增加開發(fā)難度

更為嚴重的是,不少設計者在使用 Neumorphism 進行界面開發(fā)過程中,也遭遇到了不少局限。要實現(xiàn)這個風格,主要有兩個方式:

卡片、按鈕切圖,每個狀態(tài)(Normal、Hover、Pressed)都要裁切,導致資源庫圖片量過載;

代碼實現(xiàn),這個風格的實現(xiàn)效果是對元素增加兩個不同方向的投影,但需要開發(fā)對每個元素添加投影,樣式代碼增多,工作量浩大。

網(wǎng)站neumorphism.io,可以快速生成 Neumorphism UI 。設置按鈕的參數(shù)值,就能看到多樣的新擬物化效果,非常神奇!

完整梳理!上半年最熱門的新擬物設計趨勢是如何演變的?

新技術、事物、趨勢的出現(xiàn),起初都會給人們帶來焦慮甚至是恐慌。不管是擬物還是扁平,Whale Lab 覺得若是絕對化的去推崇某一種,都是錯誤的,盡管蘋果放棄了擬物進入扁平化,也不一定代表扁平就是最好,畢竟二者始終相輔相成。不敢否認,新擬物風格在今后是否變得「真香」,但對于設計師來說,從用戶體驗、產(chǎn)品出發(fā)的優(yōu)秀設計,都值得被認可與尊敬。

文章來源:優(yōu)設    作者:UX辭典

2020年最值得關注的10個UI設計小趨勢

資深UI設計者

編者按:這篇文章來自 UI 設計師 Diana Malewicz,她在日常工作中會非常注意 UI設計的流行趨勢,而這篇總結(jié)就是她梳理總結(jié)的10個小趨勢。它們更多的是偏向 UI 視覺方面,并不涉及到體驗和交互。

最近我花了不少時間來觀察 UI 設計的發(fā)展趨勢,我偶然間注意到了不少很有意思的苗頭,或者說設計趨勢。我認為這些設計趨勢,能夠在不久的將來塑造更加獨樹一幟的UI 。

下面是我所梳理總結(jié)出來的 10 種趨勢。

1、新擬物化

的確,新擬物化是2020年處于風口浪尖的一種視覺風格,無論你喜歡不喜歡,覺得它可行不可行,它現(xiàn)在都已經(jīng)是一個確定的、成型的風格,并且會持續(xù)存在著。

不過,新擬物化從最初誕生到現(xiàn)在,已經(jīng)有一定的改變了,并且在向著更加復雜、完善的方向發(fā)展,有著更為良好的可訪問性,開始具備更多擬物化的設計特征,但是更加新鮮、現(xiàn)代,并且更能渲染出獨特的氛圍感。

2、柔和漸變

漸變這種設計趨勢正在進入兩極分化的一個階段。一方面,在視覺設計領域,一部分漸變變得更加夸張,但是在 UI 設計領域,無論是背景、UI元素(比如按鈕、卡片和圖形),漸變依然存在,只不過會顯得更加微妙柔和。

在 UI 設計領域,還有的設計師會使用雙色漸變,并且結(jié)合模糊效果,讓它更加柔和。

3、幾何元素

幾何元素既可以作為背景來使用,也可以作為裝飾細節(jié),讓你的設計越來越有趣。幾何元素在最近幾年受到的關注非常多,在設計上的應用也頗為廣泛,甚至有人將幾何元素拼接成為馬賽克,最終呈現(xiàn)出來的視覺效果非???!

4、色調(diào)柔和背景

必須說,我個人是非常喜歡這種設計趨勢的。我已經(jīng)看到了很多令人驚艷的、輕巧且極富美學價值的背景設計,它們用明亮柔和的色彩鋪滿背景,展現(xiàn)出極強的色彩和搭配的技巧。

使用色調(diào)柔和的背景能夠讓整個設計都顯得現(xiàn)代而沉靜,清新,讓內(nèi)容真正抓住用戶的注意力。

5、插畫和3D元素

插畫毫無疑問是非常流行的。不過,不論是配色還是視覺風格,無論是什么樣的插畫風格,最終的目標依然是要契合產(chǎn)品和 UI,所以很多插畫都選擇了相對扁平的風格,或者選擇模擬類似3D的視覺外觀。相比于每個數(shù)字項目都在使用的免費圖片,插畫真的是向前走出了一大步!

在這篇文章當中,我有分享在 UI 中使用插畫的一些簡單技巧:

6、抽象圖形

和傳統(tǒng)的規(guī)則的幾何圖形不同,抽象而不規(guī)則的圖形可以讓界面顯得更加不拘一格和好玩,更通俗的來講,就是讓 UI 界面更加「有機」,我認為這是一件好事。使用鋼筆工具在原始的圓形和矩形上進行編輯,嘗試不同的輪廓,承載不同的顏色和漸變效果,最后生成的效果會非常有趣。如果你不想去自己繪制,可以嘗試一下 Blobmaker 這個工具,能夠幫你節(jié)省時間~

7、深色模式

深色模式在這2年絕對是人所共知的一個設計風尚了,如今的深色模式 UI 設計已經(jīng)深入到各個不同的應用。簡單來說他是整個界面配色反轉(zhuǎn)之后的效果,便于用戶在深夜更輕松地瀏覽界面信息。只不過在具體的設計實施上,深色模式遠不是簡單的色彩反轉(zhuǎn)就可以實施的,有很多注意事項,尤其是在對比度控制上,具體可以看看下面的文章:

8、傾斜角度呈現(xiàn)

最初大家在 Dribbble 上會傾向于使用非標準的排版布局方式來呈現(xiàn)UI界面,后來這種展現(xiàn)方式開始逐漸在實際的設計項目中應用開來。在實際的設計當中,絕大多數(shù)情況下都會挑選30度到50度之間的傾斜角度。這種方法非常不錯,可以多嘗試。

9、彌散的陰影

陰影是擬物化設計當中最重要的視覺元素之一,而如今它又再次大規(guī)模流行開來了。只不過相比于之前「沉重」的陰影,柔和的彌散陰影在美學上更加令人愉悅,通常,陰影會讓 UI 元素的「可點擊感」更強,并且有助于區(qū)分界面中的層次結(jié)構。在這篇文章當中,我有詳細說明:

10、簡約加粗的字體

實際上早在 iOS 7 的時代,曾經(jīng)一度流行過筆觸纖細且字體寬度比較窄的字體,不過很慶幸這個時代過去了?,F(xiàn)在所流行的字體更加講究字體的可讀性,字體的外輪廓都大體趨近于正方形,外觀顯得更加大氣而現(xiàn)代。如果你正在尋找類似這樣的字體,可以試試 PoppinsMontserratGilroySofia Pro、Proxima Nova 等字體。

寫在最后

這篇總結(jié),基本上都是基于我個人對于趨勢的觀察和了解,在我看來,它們都有著非常強大的生命力,UI 設計的未來會更加富有希望。

文章來源:優(yōu)設    作者:Diana Malewicz

2020年最值得設計們保持關注的8個UI設計趨勢

資深UI設計者

快速變化的技術每年都在影響著設計趨勢。作為設計師,我們需要時刻保持關注,對設計趨勢擁有較高的敏感度,不斷學習,擴充自己的設計技能,目的是為了跟上的市場環(huán)境?;谖业恼{(diào)研,經(jīng)驗和觀察,我甄選了在2020年你將會看到的最為關鍵的8個UI/UX設計趨勢。讓我們一起來看看吧。

動效插圖

插圖被應用到APP中已經(jīng)有很長一段時間了,它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設計元素,為我們產(chǎn)品的整體產(chǎn)品增加了情感化體驗。插圖非常能抓人眼球,尤其是在融入動效后會顯得更加的自然,將產(chǎn)品帶入生活的氣息,使得產(chǎn)品功能更加突出,同時也增添了更多的細節(jié)和個性。

△ Welcome to Swiggy by Saptarshi Prakash

△ Onboarding animations — Virgil Pana

另一個好處是使用動效后,能抓住用戶的注意力使其能夠更加沉浸在你的產(chǎn)品中。動效同樣是講好品牌故事,產(chǎn)品或者服務最有影響力的途徑之一。

微交互

微交互存在與每一個網(wǎng)頁或者app界面中。每當打開你最喜歡的那些應用時,都有機會看到它們,比如像Facebook中就有大量不同的微交互,我認為「Like」功能就是一個完美的例子。有時,我們幾乎意識不到它的存在,因為它們非常的不顯眼,非常自然地融到界面中去了。但是,如果當你把這些微交互移除掉的話,你又會非??斓淖⒁獠⒛芨惺艿揭恍┓浅V匾臇|西丟失了。

△ Menu toggle close animation — Aaron Iker

△ Tab bar active animation — Aaron Iker

一般來說,在UI/UX中即使非常小和細節(jié)處的設計都可能會帶來巨大的沖擊力。微交互就是完美的證明,細節(jié)和對它的關注能極大的改善產(chǎn)品的整體體驗,并讓產(chǎn)品體驗上升一個臺階。每年,新設備的發(fā)布伴隨著新的機會,能給產(chǎn)品塑造新品牌和創(chuàng)造富有創(chuàng)意的微交互。

3D圖形

3D圖形設計幾乎無處不在,比如在電影,游戲或者運營廣告里等等。3D圖形設計早在10年前就出現(xiàn)了然后一直在不斷提升和進化。手機和web技術進展迅猛,新的web瀏覽器能力打開了3D設計新世界的大門,這給了設計師們在web和手機界面中創(chuàng)造炫酷3D設計的機會。

△ 3D flip menu by Minh Pham

△ Car health report UI by Gleb Kuznetsov

創(chuàng)造并整合這些3D創(chuàng)意設計到web和手機界面中需要特殊的技能和花費大量的工作,但這些付出會得到回報。

△ Apple AirPods Pro landing page

3D設計對于產(chǎn)品和服務來說,具有非常大的吸引力,例如在交互上能夠支持用戶360度查看產(chǎn)品,從而大大提升整個的產(chǎn)品體驗。

在2020年會有更多的品牌利用3D渲染模型的產(chǎn)品和服務去模仿線下購物體驗。

VR設計

VR技術在2019年有一個巨大的飛躍。最近的一年我們激動地看到了頭戴式設備有了非常大的發(fā)展,尤其是在游戲領域。我們需要記住的是,游戲行業(yè)經(jīng)常在引領著新技術的發(fā)展并落地到實際的產(chǎn)品設計中。研究表明,VR也不例外,在Oculus Quest于2019年推出后,許多機會為其他行業(yè)打開了大門。Facebook CEO 扎克伯格已經(jīng)測試了激動人心的手部交互功能,并正式宣布將在2020年初為Quest進行更新。

△ Oculus Quest — hand interaction feature

△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

索尼和微軟計劃在2020年夏季發(fā)布他們的新設備,這就給VR技術帶來巨大的機會和發(fā)展空間。

學習VR 可以閱讀優(yōu)設這個專題:https://www.uisdc.com/zt/vr-design

AR設計

在最近幾年,我們能看到在AR(增強現(xiàn)實)這塊有了很大的進步和驚喜。世界引領著科技公司在AR開發(fā)方面進行了巨大的投入,所以我們應該期待這項技術在2020年有更大的成長和發(fā)展。蘋果公司也發(fā)布了他們自己的AR套件叫AR KIT3來幫助設計師和開發(fā)者在他們的產(chǎn)品中打造AR體驗。

△ Apple ARKit 3 by Apple

△ Public transit app by Yi Li

△ House of Plants AR Concept by Nathan Riley

在AR空間里會有無限的機會和創(chuàng)意去打造一個新的品牌和激動人心的體驗。為AR做UI設計會在2020年成為一大趨勢,這就要求設計師們在面對創(chuàng)造AR產(chǎn)品體驗前,應該去準備和抓緊學習新的工具,原型之類的知識。

學習AR 可以閱讀優(yōu)設這個專題:https://www.uisdc.com/zt/ar-design

新擬物化設計

一般來說,擬物化設計是指以現(xiàn)實風格/方式創(chuàng)造出來與現(xiàn)實中的物體相匹配的設計元素。不斷發(fā)展的VR/AR技術以及在各大最流行設計平臺(Dribbble,Behance等)上展示的設計作品趨勢來看,預示著擬物化的回歸,但這次換了個更現(xiàn)代,更酷略微高大上的名字叫「新擬物風」(也叫Neumorphism)。

△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

△ Simple Music Player by Filip Legierski

△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

你可能注意到了:Neumorphism代表了豐富細節(jié)和明確的一種設計風格。高光,投影,發(fā)光,這些細節(jié)非常令人印象深刻。Neumorphism風格已經(jīng)鼓舞了全世界一大批的設計師創(chuàng)作作品,它也會成為2020年最大的設計趨勢。

學習新擬物風可以閱讀優(yōu)設這個專題:https://www.uisdc.com/zt/neumorphism

不對稱布局

最近一年我們也注意到一種不對稱風格正在快速發(fā)展。傳統(tǒng)基于「模板」的布局肯定會消失。這種設計趨勢給2020年的設計帶來了更多的差異化。合適的不對稱風格將會在我們的作品中增多一大批不同的性格,火力以及個性,所以設計不再單純的基于模板。

△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

△ Carine fashion store — selection screen concept — Dawid Tomczyk

當設計這種不對稱風格時,設計師擁有非常多的選項以及巨大的發(fā)揮空間。但是,想設計好這種不對稱風格需要大量的練習,它絕不是將元素隨機的擺放在網(wǎng)格中,而應該小心使用和實現(xiàn)它們,時刻需要把用戶的訴求考慮到設計中。我們并不想讓用戶迷失在我們的產(chǎn)品中,對嗎?

用戶故事

故事在整個用戶體驗中扮演著非常重要的角色。你可能經(jīng)常會在著落頁看到它作為品牌介紹,產(chǎn)品或者一個新的服務。講故事就是利用創(chuàng)意的形式把信息傳遞給用戶。這可以通過強大的視覺元素來呈現(xiàn)(字體,插畫,高清圖片,顏色,動畫,交互元素)。

△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

△ Free Sketch Template :: Mimini by Tran Mau Tri Tam

講故事可以幫助產(chǎn)品創(chuàng)造出品牌和用戶之間積極的情感連接。講故事可以為你的產(chǎn)品創(chuàng)造出非常多的記憶點,讓用戶感受到自己就是產(chǎn)品或服務的一部分,他們便會更加愿意使用你的產(chǎn)品。話雖如此,講故事也是一種非常有效的營銷手段,它可以極大地提高你的產(chǎn)品/服務的銷量。講故事作為一種非常成功的手段,將在2020年繼續(xù)發(fā)揚光大。

總結(jié)在2020年非常值得關注的8個設計趨勢

1. 動態(tài)插圖

通過把動畫和插圖進行結(jié)合,我們可以使得設計變得更加突出,并把它帶入用戶的日常生活,為產(chǎn)品賦予了的細節(jié)和個性化。

2. 微交互

微交互被證明是可以在當用戶注意到他們是能夠帶來非常大的驚喜體驗,它能夠有效的提升整個產(chǎn)品的用戶體驗并把產(chǎn)品的品質(zhì)提升一個等級。

3. 3D圖形的應用

新的瀏覽器技術打開了3D圖形應用的大門,能夠給設計師帶來非常大的創(chuàng)意機會去打造讓人驚嘆的3D圖形設計應用到網(wǎng)頁和手機APP中。

4. 虛擬現(xiàn)實

游戲行業(yè)將迎來新的變革,新的技術能夠應用到產(chǎn)品設計中。

5. 增強現(xiàn)實

在AR空間中擁有無限的機會去創(chuàng)造新的品牌和令人激動的新體驗。為AR技術服務的UI設計將在2020年成為主要趨勢,設計師需要位為之準備并去學習新的工具,原型,當真的需要你去做一款AR應用時就需要用到。

6. 新擬物風

AR/VR技術不斷發(fā)展,以及在各大流行設計平臺上大量涌現(xiàn)的寫實設計作品預示著擬物風的回歸,但只是這次換了個新的更加現(xiàn)代化的名字。

7. 不對稱布局

運用不對稱布局能讓設計創(chuàng)意變得擁有更多選項和機會。雖然,設計一個成功的不對稱布局需要投入大量的練習和時間。

8. 講故事

講故事就是利用創(chuàng)意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具,可能會大大增長產(chǎn)品的銷售額或服務。

文章來源:優(yōu)設    作者:彩云譯設計

2020年最全設計趨勢

資深UI設計者

寫在前面

過去幾年中,我們的積極反應促使我們繼續(xù)探索和分析主要設計領域的新趨勢。盡管大多數(shù)趨勢都是去年發(fā)生的變化,但到2020年,我們?nèi)杂幸恍┬纶厔葜档米非?。最重要的趨勢是與技術有關的趨勢,以及它們的發(fā)展趨勢,以及它們?nèi)绾斡绊懺O計領域。 


總體趨勢

2020年的主要趨勢動作設計與動畫, 對于2020年,我們認為運動設計是主要趨勢,因為我們在所有設計領域都遇到動畫,從小的交互到徽標和UI,一切都在變化。動畫內(nèi)容正在進入現(xiàn)代世界,在現(xiàn)代世界中,書面內(nèi)容沒有以前那么吸引人。 動作設計正確實施后,可使廣告系列的信息更快,更正確地傳達給受眾。

undefined

01. theQoos品牌插圖由  閔慶  02  軍團賽季 3由  尼克Scarcella   03.  溶劑-使大麻銀行公開賽由  BluBlu工作室  04  云服務(動畫圖標)由  亞歷山大Baleev  05.  病毒性肝炎由  昂布爾集體 ,  蒂博ZELLER ,  喬納森Plesel  06 。  UXC_Design2020_Project研究通過  Donerzozo


目錄

1. UI / UX

2.插圖

3.動態(tài)圖形

4.平面設計

5.基于技術的趨勢 

6.包裝

7.版式

8.趨勢工具


1. UI / UX

1.1暗模式(Android Q和iOS 13)

暗模式是2020年的新趨勢,Android引入了兩種類型的暗模式,分別稱為“強制暗模式”和“系統(tǒng)暗模式”。微軟通過在其電子郵件應用程序中展示其暗模式擊敗了谷歌,但谷歌迅速推出了自己的針對Android 10的Gmail應用程序的暗版本模式。

有了介紹此更新的大公司,許多設計師將選擇在他們的應用程序或站點中使用暗模式,因此希望在來年看到越來越多的暗模式。

undefined


1.2粗體顏色

在過去的兩年(到2020年)中,強烈的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。 


undefined

01.  EMART UX / UI可再生的通過  加X,  李寶藍 ,  Sabum卞 ,  熙榮,  尤金全度妍 ,  ? ? ?,  Bongho彩  02  NSH通過  索菲婭費多托娃   03.   埃爾多拉多賭場-移動Web UI,應用程序ü用  的Loredana PAPP-Dinea ,  Mihai Baldean ,  Milo主題  04.  mmcité+網(wǎng)站由  工作室9  茲林,帕維爾Valek  05.  自動哈克系列#21-25由  安德烈福  06.  Flipd應用程序通過  ESTUDIO PUM


1.3 UI中的插圖

多年來,插圖一直是設計中最強勁的趨勢之一。插圖是對概念的直觀解釋,可以使用戶更好地理解產(chǎn)品背后的思想。除了一些精美的插圖使這一概念獨具匠心外,它們還可以更快地傳達信息。

undefined

01.  海妖重新設計,以  西爾Theyssens ,  安東尼科拉德  02  浮雕-醫(yī)療項目由  馬丁Pankiewicz  葛爾若,  米沃什Po?arkowski  03.  abuk:圖書封面設計有聲書商店到  謝爾蓋Valiukh,  Tubik工作室  04.我llustration系統(tǒng)GOL到  ESTUDIO PUM  05 。  智能家居的應用程序- IOS到  瑪麗亞Osadcha  06.斯基林貿(mào)易(skilling.com) -   Loredana酒店PAPP-Dinea ,  米哈伊Baldean 


1.4講故事

設計中的講故事是關于幫助用戶在平臺上的旅程,從而使他的體驗盡可能輕松和流暢(在UX設計中)。一個好的故事可以幫助用戶更輕松地了解產(chǎn)品。為了講述一個故事,我們可以使用一個特別創(chuàng)建的角色,將這個角色賦予他個性,我們創(chuàng)建一個故事和一個沖突,最終由我們的產(chǎn)品(UI設計)解決。這是產(chǎn)品設計中講故事的基礎。講故事在UI和UX中都使用,并且基于相同的原理,但實現(xiàn)方式有所不同。

undefined01.  余吳-旅行計劃應用由  朱莉張庭  02.  UX / UI | 食品外賣應用由  康斯坦丁Seredkin  03.  COOC通過  cuneyt仙


1.5動畫圖形和微交互

正如我們所說,動態(tài)圖形是今年的趨勢,它在UI設計中也有很強的表現(xiàn),它為插圖增添了力量,使創(chuàng)意更易于吸收并保留在用戶的記憶中。 

微交互在2018年成為第一流,但這一趨勢值得在2020年關注。它們是UI設計中極其重要的趨勢,這使基本應用程序/網(wǎng)站與非凡的應用程序/網(wǎng)站有所不同。微交互在使用戶了解系統(tǒng)的工作原理并引導其獲得更好的體驗方面起著至關重要的作用。 

如果您是UI設計師,但尚未在工作中使用微交互,建議您這樣做,因為到2020年,沒有UI的任何UI設計都將是非常基本的。 


undefined

01.  UI / UX | 智能藥房應用的   阿納斯塔西婭中號,  謝爾蓋Nikonenko UX   02.  氣候與動物:滅絕危機網(wǎng)站UI / UX  由  丹尼爾·譚,  達芙妮龍  03  飛素食者由  帕特里夏賴納斯  04.  UKRPOSHTA。烏克蘭國家郵政局的移動應用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聾人報警應用程序


1.6用戶界面中的視頻

到2020年,信息必須非??斓氐竭_用戶手中,最好通過視頻內(nèi)容來完成。您選擇通過動畫或經(jīng)典電影來解釋產(chǎn)品,視頻內(nèi)容對于任何網(wǎng)站或應用程序都是必不可少的。


1.7功能

UI設計中的一個重要部分是功能,即,根據(jù)其目的和功能選擇每個元素。許多人認為您必須在設計和功能之間進行選擇,但是在新技術的幫助下,這兩種技術可以很好地融合在一起并相互補充。設計負責引起對站點或應用程序的注意,其功能使體驗變得更輕松。它使用戶可以更快地找到信息。

undefined01.斯基林貿(mào)易(skilling.com) -   Loredana酒店帕普用餐 ,  邁克爾Baldean 


1.8注意細節(jié)

在UI設計中,對細節(jié)的更多關注非常重要。從按鈕,圖標,加載到導航到細微的細節(jié),都可以打造出非凡的設計。隨著新技術的出現(xiàn),我們在UI中必須注意的細節(jié)始終在變化。

在明年,我們將看到越來越少的按鈕,以及更多基于手勢的導航。例如,后退按鈕(Android的導航常用)在Android 10中正式消失。

undefined

01.  FLYR的視覺形象和營銷網(wǎng)站的  Ramotion 

02.  鬧鐘應用聾人通過  Tagir Tikeev


1.8漸變

幾年來,我們一直在談論設計中的漸變,這種趨勢在2020年將繼續(xù)保持強勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標,插圖,甚至用于排版。

undefined

01.  Wavecut - IOS應用程序通過  Eleken局  02.  抗憂郁癥的應用程序-產(chǎn)品設計(UX / UI)由  安娜Arutiunian 

03.  保羅回腸-電影音樂作曲家,制作人,DJ,Perfomer  通過  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主題  04.  ITEXIA通過  下一頁局 ,  亞歷克斯海鷗 ,  Jegor Walowski


2.插圖


2.1角色設計

角色設計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設計師向角色灌輸了強烈的個性。您在應用程序或網(wǎng)站中遇到的虛擬助手是角色設計的一個很好的例子。

undefined

01.  新微小的事情?兒童圖畫書由  Vuon插圖 ,  榮阮 ,  榮范  02  的Adobe X Createfulness由  邁特弗蘭基,  馬蒂厄Tarwane  03。 3D人物V2由  安東尼奧·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


2.2紋理

插圖和紋理很好地結(jié)合在一起,可以創(chuàng)造出令人難忘的構圖。從粒狀紋理到預制的筆觸,您可以找到許多想法來為插圖添加紋理,也可以手動創(chuàng)建它們。瀏覽網(wǎng)絡時,您可以找到許多可以在插圖中使用的紋理,預制筆刷和工具。 

undefined

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀


2.3平面插圖

在過去的幾年中,我們到處都可以看到平面插圖。它們?nèi)匀惶幱谮厔葜校F(xiàn)在有了一個新的組成部分:對每個元素應用細線。大多數(shù)藝術家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。

undefined

01. BILLY KENNY -剛剛為音樂通過  桑戈BANG  02 Babelia - Lecturas對維拉諾由  米格爾·安赫爾Camprubí  03.  拳擊貓-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解釋器VIDEO  由  哈立德abdelazi ?


2.4等軸測圖

是的,等軸測圖仍然在這里。它們主要可以在UI設計中找到。隨著人們對加密貨幣的興趣不斷增加,這種趨勢似乎已經(jīng)生效,但是在2019年它已經(jīng)發(fā)展了,現(xiàn)在我們在其他業(yè)務領域中發(fā)現(xiàn)了這一趨勢。

undefined

01.  龐克市由  溫祚_  02  FastCompany -等距號由  阿圖爾Tenczynski  03和05.  抗體亞型由  馬里奧·德?梅耶爾  04.  松弛插圖由  京張 


2.5 3D

隨著效率越來越高的軟件和工具的出現(xiàn),3d渲染已逐漸發(fā)生變化。3D插圖非常受歡迎,因為與2D插圖不同,它提供了更逼真的圖像。

undefined

01. 游戲巴伊亞之家由  Miagui  02  天平 由  卡韋薩Patata工作室  03.  城堡毀滅者由  穆罕默德Chahin  04.  Eyoo家庭3D插圖由  Baianat  05.  個人插圖第1卷由  巴勃羅·馬林 06.  一個人旅行通過  亂伊萊恩


2.6超大膽的色彩

大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,并在圖像背后展現(xiàn)故事。

undefined

01.  瑪莎·希肖娃(Masha Shishova)攝于莫斯科的  STRTFD咖啡壁畫  02. 作家- 利奧·夏目(  Leo Natsume)的移動互聯(lián)網(wǎng)思想  03.  可口可樂圓罐插圖由塔尼亞·雅庫諾娃(  Tania Yakunova) 


3.動態(tài)圖形


3.1 3D視頻 

在2020年,無法想象沒有3D設計的運動。設計的這個分支打開了一個世界的大門,在這個世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動等中找到3d。

undefined

01.  龐克市由  溫祚_ ,  視覺設計藝術的影響  


3.2視頻+動畫插圖(混合媒體)

拍攝的視頻,動畫插圖以及有時是靜止的照片的結(jié)合可以產(chǎn)生非凡的效果。2d或3d插圖可創(chuàng)建令人難忘的視頻,從幾行運動到3D真實人物甚至是現(xiàn)實生活中不存在的復雜視覺效果。

undefined

undefined

01.  Coppel /回到學校通過  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


3.3 2D動畫-說明性視頻

2D動畫專注于創(chuàng)建故事和角色,并在創(chuàng)作過程中使用矢量。當您想要廣告系列或產(chǎn)品的說明性視頻時,2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中,說明性視頻對于任何網(wǎng)站都是必不可少的。

undefined

01.  Freelive  由  工作室Infografika ,  謝爾蓋·薩多斯基 ,  阿納斯塔西婭Alterka ,  Arsentiy Lesnik賓館 ,  尤里·阿姆斯特朗 ,  阿林好,  喬治VALD ,馬克西姆Tleubaev  


3.4動畫徽標

您已經(jīng)了解到動畫是2020年的“必備”,為了保持競爭力,我們還必須將它們集成到徽標設計中。許多公司已開始對其徽標進行動畫處理,以引起人們的注意。這也是徽標設計的主要趨勢。

undefined


01.  杯茶由  維多利亞伍  02 - 07.  運動野獸?Logomachine。動畫標志的  運動設計學院,  維克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亞歷山大·庫茲涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·馬爾琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安東·福明,  埃米爾Khafizov ,  膽堿哈達           


3.5混合動畫2D和3D集成

這一趨勢不是一個新趨勢,但絕對值得一提?;旌蟿赢嬀褪鞘褂脼榇藙?chuàng)建的特定軟件將2D與3D結(jié)合在一起。 

undefined


4.平面設計


4.1平面設計中的3D 

盡管2d壟斷了設計的這一分支,但3d可以為最終概念添加額外的內(nèi)容。3d渲染可以采用插圖,動畫或字體的形式。

undefined

01.  畫像由  費爾南多·多明格斯Cózar  02.  NASA | 太空時代的  工作室-JQΔ   03.  美國宇航局X BBC | 不自然世界的  工作室,JQΔ


4.2雙色

精益求精的概念可以完美描述這一趨勢,設計師在其中創(chuàng)造出大膽的元素,并帶有優(yōu)雅的手感和強烈的對比。這種趨勢是創(chuàng)建更易于訪問的打印的理想選擇,因為某些打印技術如果顏色更多,則價格會更高。

undefined

01.  冬季公開賽'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物館由  de_form工作室,  諾拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐爾·塞拉


4.3光學感知藝術

歐普藝術作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動感,隱藏的圖像,閃爍和振動的圖案或腫脹或翹曲的印象。(來源:wikipedia.org)。

這種趨勢給人以動靜的印象,但是以一種靜態(tài)的方式。如果要實現(xiàn)在印刷海報中移動圖形的想法,這是最合適的方法。

undefined

01 02  東京電影節(jié)共混物由  梅賽德斯巴桑 ,  的Adobe住  03.  海報-第一卷由  Xtian米勒


4.4平面設計中的插圖

插圖在設計的所有領域都非常重要,因此我們在圖形設計中也可以找到它們。2D插圖在現(xiàn)在已經(jīng)非常流行了幾年,并且即使在2020年,也將繼續(xù)成為設計師的最愛。 

undefined

01.  GOOSE赫爾-海報由  Ewelina鵝  02  CAT酒吧和舞廳/ 2019至  kissmiklos,  Eszter薩拉 


4.5動畫海報

動畫無處不在,我們在設計的各個領域都可以找到它們,當然它們也存在于數(shù)字海報中。動畫可以將2D與3D混合在一起,效果令人著迷。

undefined

01  節(jié)地鐵地鐵由  Bzoing,  維吉尼貝達德  02.  失敗的Windows由  皮埃爾Kleinhouse,  轄Zivony 


4.6復古合成波

復古合成波是一種在80年代出現(xiàn)的趨勢,但一旦好萊塢開始發(fā)行該十年的電影后便開始重新出現(xiàn)。隨著《陌生人事物》系列的成功,這一潮流再次開始流行。

undefinedundefined

01.  雞尾酒和夢想通過  Gjorgji Despodov  02.  CINEMAX由  杰森巴爾巴  03.奇怪的事情(Netflix.com)


4.7瑞士設計,達達主義,包豪斯

20世紀最重要的圖形設計運動始終是最好的設計師的靈感來源。這些樣式值得一提,因為它們始終是的,遵循它們所施加的規(guī)則幾乎不可能在設計中犯錯誤??偟膩碚f,這些運動強調(diào)版式,無襯線字體(Helvetica于1957年在包豪斯舞臺上創(chuàng)建),幾何形狀,簡單的線條,體積和顏色。

undefined


01.  瑞士海報01(版式方面)由  Mehman Mammedov  02.  黃視VOL.3通過  維奧萊納齊名


4.8大的不間斷彩色空間 

大型,不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用,可以在圖形設計,產(chǎn)品設計以及ui中找到。

undefined

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌內(nèi)容由  約翰Vernizzi  03.  Kekkil?-BVB的  Kurppa Hosk


4.9超極簡主義

極簡主義的設計僅使用必需品,非常有限的調(diào)色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素,使所有設計項目都有目的。要創(chuàng)建超極簡主義的設計,您需要使用盡可能多的白色/負空間,簡單的配色方案和一些基本的幾何形狀。

undefined

01.  Heim雜志,第3頁,  Sasha Yaguza撰寫  02.  Andrei Gheorghe- DADA-通過  moodley品牌標識發(fā)布


5.基于技術的趨勢

技術通過智能設備和嶄新的理念正在徹底改變我們的生活。這些新技術使設計師已經(jīng)開發(fā)出進入當前趨勢的新功能。人工智能,機器學習,虛擬現(xiàn)實和增強現(xiàn)實正在影響設計師的思維方式和創(chuàng)作方式。


5.1增強現(xiàn)實的移動應用

隨著蘋果和谷歌推出自己的AR開發(fā)平臺ARKit和ARCore,很明顯,整個世界將面向增強現(xiàn)實技術。 

許多大品牌已經(jīng)在其應用程序中采用了這項技術,而那些尚未采用這種技術的公司必須認真考慮如何使用戶在這種新現(xiàn)實中與之交互。


有一些AR交互可用于創(chuàng)建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環(huán)境相關聯(lián)時。最常用的互動方式之一


是當UI與對象相關并通過掃描特定項目觸發(fā)時。該動作將數(shù)字動畫連接到特殊的“標記”。 

有關更具體的AI規(guī)則,請閱讀Apple指南,以提供“將真實的虛擬對象與現(xiàn)實世界無縫融合的沉浸式,引人入勝的體驗”。

undefined


5.2 AI,ML,聊天機器人和虛擬助手

聊天機器人是一種 通過聽覺或文本方法 進行  對話的  軟件。[1]  此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為,盡管截至2019年,它們?nèi)赃h遠不能通過  圖靈測試。[2]  資料來源:維基百科


人們還不習慣與AI對話,因此設計師(和開發(fā)人員)的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統(tǒng)可以做什么以及如何使用它。


使用AIML(人工智能標記語言)設計和編寫腳本聊天機器人,是出色的UX設計人員的魔力可以發(fā)揮作用的地方。

大多數(shù)使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。

undefined


5.3 VR

大多數(shù)人將VR與游戲行業(yè)聯(lián)系在一起是有充分理由的,但是隨著所有大型科技公司開發(fā)VR套件和應用程序,我們可以肯定地說,我們將發(fā)現(xiàn)使用和享受這項技術的新方法。VR已經(jīng)用于教育,醫(yī)療保健,旅游,房地產(chǎn)或建筑。 

undefined


5.4語音用戶界面(VUI)

語音用戶界面(VUI)使用語音識別  來理解語音命令和問題,通常是文本到語音以播放答復,從而  使語音與計算機的人機交互成為可能  。語音命令設備(VCD)是受語音用戶界面控制的設備。資料來源:維基百科 

去年,使用互聯(lián)網(wǎng)連接的設備的人中有40%每月至少使用一次語音助手,與去年相比,這一數(shù)字增加了10%。


6.產(chǎn)品設計


6.1包裝中的圖案

在過飽和的包裝市場中,很難創(chuàng)造出可以脫穎而出的新產(chǎn)品,因此設計師要回到根源并創(chuàng)造出使產(chǎn)品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產(chǎn)品包裝的大膽選擇。

undefined




01.  飛行山羊咖啡由  妮可LaFave    02.  VITA SPA皮膚  由  DWYW   03.  巧克力包裝設計由  算術   04.  100手繪無縫的圖案和形狀   的  Arseny Samolevsky


6.2包裝插圖

插圖一直是包裝設計中的重要元素。通過他們,我們可以講述一個故事,使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經(jīng)存在了數(shù)十年,并且很可能會一直處于流行趨勢。

undefined





01. 布里格斯原件由  熙宰金  02  天鵝絨咖啡杯  由  安東Malishev,  呵呵卡羅拉  03.  廢物不包括廚房-品牌打造的  嘗試和真正的DESIG ň04  家,甜蜜的壽司兒童  通過  精明的機構,  馬里亞納星火  05.  Cerveza塔Maleante通過  Antonay 


6.3留白

極簡主義是設計的基本原則,而今天它又是新事物。它放棄了設計中不需要的所有內(nèi)容,并用負空間代替了它。這種趨勢將功能帶到了最前沿,并專注于簡潔的設計,使版式脫穎而出。

undefined

01.  香味精油 由Y u型簡林,  黃惡嗯-祥  ,  智泰蓮 02.  重塑品牌理念,為BodriPincészet由  克里斯托夫Gáthi


6.4單色和兩種顏色

首先,在調(diào)色板中僅使用1或2個色調(diào)似乎有些限制,但它們可以創(chuàng)建非常強烈的視覺識別感。僅使用一種或兩種顏色,就可以保持簡約的外觀,放棄所有多余的東西。結(jié)果是精美,高雅的產(chǎn)品令人賞心悅目。

undefined

01. Zerbet冰糕由  才林賈爾斯  02.  貝利啤酒  由  埃德大廳 悉尼,  葉卡捷琳娜Leontyeva ,  波阿斯孫


6.5大膽的顏色

大膽的顏色和漸變?nèi)匀皇欠浅娏业内厔?,這種趨勢將在2020年持續(xù)。使用這些顏色,您可以創(chuàng)建令人難忘的產(chǎn)品。

undefined

01.  極簡主義和享樂主義:Fabula Branding 重新設計了  千年品牌

02  紋身商城  通過  Openmint工作室,  葉卡捷琳娜Teterkino ,  煙,  葉戈爾Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃爾· 沙茨曼

04.  VIZOU -老花眼鏡  的  工作室開頭語,  阿克塞爾杜馬克 

05.  包裝的調(diào)味開心果由  米拉Katagarova


6.6注意細節(jié)(受新藝術風格啟發(fā))

注重細節(jié)的包裝比以往任何時候都更受歡迎。設計師選擇這種趨勢是因為它賦予了產(chǎn)品真實性。這種趨勢使我們以現(xiàn)代方式思考經(jīng)典。 

undefined

01.  HYWILDE由  查德·邁克爾·工作室  02  AMSTEL KARGO IPA通過  卡帕羅設計船員

03.  大島咖啡烘焙-咖啡咬傷的  農(nóng)場設計


6.7包裝中的講故事

到2020年,品牌將不得不重新考慮其產(chǎn)品和包裝。品牌必須講述一個故事,以幫助客戶體驗產(chǎn)品的本質(zhì)。這可以通過為包裝創(chuàng)建視覺和敘述身份來實現(xiàn)。

undefined

01.  喙接通過  骨干品牌推廣   02.  Colorea用t  骨干品牌


7.版式


7.1粗體印刷

粗體印刷術是設計中的重要趨勢,它取代了圖像作為主要元素。勇敢的排版可以在網(wǎng)頁設計和圖形設計中發(fā)揮作用。

undefined

01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrstr?m);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

03.  UCCA當代藝術中心北京由  布魯斯·莫設計(BMD)  ,耶勒馬雷夏爾 


7.2小寫

越來越多的應用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡約和現(xiàn)代的設計中。在明年,我們絕對必須關注這一趨勢。

undefined

01.  Autea品牌和網(wǎng)頁設計由  米哈爾Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


7.3自定義字體 

盡管自定義字體沒有什么新意,但我們將看到這種趨勢越來越多地出現(xiàn)在設計中,尤其是在徽標和海報中。這種做法在大品牌中更常見,因為生產(chǎn)專用字體可能會非常昂貴,但是設計人員可以對現(xiàn)有字體進行少量調(diào)整,結(jié)果可能會非常獨特。 

undefined

01.  Think8全球研究院通過  勃洛克設計  02  ZINEZ?//設計周期由  芭芭拉·卡托納 ,  媒體與設計系埃格爾  03.  式設計'19通過  TRüF創(chuàng)意  04.  Cako字體由  維奧萊納齊名


7.4動力學排版

就像我們說的那樣,動畫在設計中無處不在,因此在排版中也很常見。動態(tài)字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術可以處理文本并創(chuàng)建最終產(chǎn)品,該產(chǎn)品保留在查看器的內(nèi)存中。

undefined

undefined

01和02.  Grafika  ,  Gimmick Studio設計  。03&04.  增強現(xiàn)實與動作排版,作者:  Alex Slobzheninov


7.5堆疊字體 

堆疊文本可能是一種現(xiàn)代化的解決方案,可以吸引您注意基本信息。我們可以在網(wǎng)頁設計,應用程序設計和圖形設計中看到這種趨勢。

undefined




01.  L'嗡通過  Atipus巴塞羅那  02  期刊由  杰瑪馬奧尼  03.  海報收藏| VOL.8由  羅馬發(fā)表  04. SMLXL由  梅麗莎Baillache,  墊新郎,  杰森·利特爾


8.趨勢工具


8.1 Adobe Spark

Adobe Spark是Adobe Systems  開發(fā)的  用于移動和Web的媒體創(chuàng)建應用程序的集成套件  。[1]  它包含三個獨立的設計應用程序:  Spark Page,  Spark Post和  Spark Video。(來源:WIkipedia) 


他的免費Adobe Spark Web應用程序可與Spark Page,Spark Post和Spark Video  iOS移動應用程序同步  ,從而使用戶可以從任何設備創(chuàng)建,編輯和共享其視覺故事。


[3]  這三個設計應用程序允許用戶創(chuàng)建和設計可用于企業(yè),教育,社交媒體營銷人員等的視覺內(nèi)容。[4]  Spark Gallery突出顯示了使用該應用程序的人們所做的不同項目。使用這三個應用程序時,用戶可以導入圖片或搜索圖片。

undefined


8.2繁殖

 Procreate是 由Savage Interactive針對iOS開發(fā)和發(fā)布的   用于  數(shù)字繪畫的  光柵圖形編輯器 應用程序。針對iPad的藝術可能性而設計  ,并且適合從初學者到專業(yè)人士的藝術家。


 它提供130多種逼真的畫筆,多層,  混合模式,  蒙版,   過程視頻的4K分辨率導出  ,  自動保存以及許多其他經(jīng)典和原始的  數(shù)字藝術  工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限  。(來源:Wikipedia)Procreate是2018年App Store上最暢銷的應用程序。

undefined


8.3 Adobe XD

Adobe XD是  由Adobe Inc開發(fā)和發(fā)布的   用于  Web應用程序  和  移動應用程序的基于矢量的 用戶體驗設計工具。它適用于  macOS  和  Windows,盡管有適用于iOS  和  Android的版本   可幫助直接在移動設備上預覽工作結(jié)果。XD支持  網(wǎng)站線框圖,并創(chuàng)建簡單的交互式點擊型原型。(來源:維基百科)

undefined


作者授權


總結(jié)

每一年每一個時間段都會有新的趨勢,學會的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應,念念不忘,必有回響。共勉!

文章來源:站酷-木七翻譯整理

2020 年值得關注的 10 個UI 設計趨勢

資深UI設計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

創(chuàng)意動畫

1. 品牌加載

公眾喜歡有趣,可塑的動畫。Airbnb 和 Netfilx 將品牌 logo 動畫應用到了啟動頁和加載頁面。結(jié)合品牌特點、風格和符號,融合到產(chǎn)品設計中,從而提升視覺的一致性,創(chuàng)造富有特有性格的產(chǎn)品界面。

△ Netflix & Airbnb

2. 圖標動畫

微交互是建立在移動端上微妙視覺效果的小動畫,而圖標動畫是微交互其中的一種。它的目的是吸引用戶,讓用戶感覺順暢、愉悅。

最近,讓我印象深刻的一個圖標動畫是 Facebook 的新消息提醒界面,這些由產(chǎn)品所包含的一個個小細節(jié),創(chuàng)造出了新穎而有趣的設計。

△ Facebook Website

留白分隔

在 UI 界面中,最常見的分隔方式是用細線對模塊進行劃分,但隨著設計重心趨向簡約,注重內(nèi)容本身,傳統(tǒng)的分隔線方式就略顯多余。

根據(jù)格式塔親密原則,通過留白控制間距大小,可以清晰地劃分模塊層級,同時界面看起來也更加透氣、富有張力??梢钥吹?QQ、飛聊、Gmail、Messenger 等應用都采用了留白分隔。

△ Gmail & Messenger

融入插圖

1. 品牌形象插畫

一個好的插畫作品可以為產(chǎn)品帶來極佳的辨識度。Snapchat 的頁面用了很多情感化設計和品牌形象,包括開啟通知引導動畫、查找好友 landing page、下拉刷新頁、照片回憶等等。

從品牌的個性化設計,尋找一種基于插畫的設計語言,把產(chǎn)品塑造成一個高辨識度的 ID。

△ Snapchat

2. 3D插畫

隨著軟件技術的提升,3D 插畫在這幾年中大受歡迎,很多應用都使用 3D 渲染產(chǎn)品,如:星巴克、Keep、毒App 等等,因為它真實立體,有著更高的轉(zhuǎn)化率。

△ Starbucks by Wojciech

△ Keep & 毒

圓角卡片

圓角代表友好、親和力,而卡片模塊化的布局更為清晰、有效、整潔。

在上周的微信改版《微信 7.0.5 發(fā)布:9個細節(jié)提升體驗》的文章中,我講到了訂閱號的推送文章去掉了標題欄的背景,卡片變得更加簡潔。另外,公眾號詳情頁由原先的列表式,改成了圓角卡片式,彈窗也由直角改成圓角。

△ Broadcasting & 微信

視頻背景

長期以來,圖像在視覺設計中起著至關重要的作用,而視頻能夠更直觀的吸引用戶,傳達主要的思想。

在移動端中,視頻主要用于登錄頁背景,一般可以是幾秒鐘的循環(huán)剪輯視頻,它可以帶來一種身臨其境的體驗感受。

△ Lyft & Nike

輕提示

Toast 是一種輕量級的提示,作為用戶操作后的反饋。UI 形態(tài)上從居中浮層,慢慢趨向于底部通欄樣式。這樣設計的好處是不會擋住當前界面的內(nèi)容。

舉一個反例,iOS 的調(diào)整音量提示,大范圍的遮住了界面,特別是對正在玩游戲的用戶非常不友好,直到 iOS 13 這個設計才被修改。

△ Google Earth & Spotify

色彩平鋪

隨著扁平化設計和 Material Design 進一步占據(jù)主流趨勢,簡約的界面,明亮,大膽的色彩一直都處于增長趨勢。色彩平鋪已經(jīng)成為清新、酷炫、數(shù)字時代的代名詞。

△ Snapchat & Spotify

注重內(nèi)容

重內(nèi)容、輕 UI,把注意力引導在重要內(nèi)容和功能上。像 Facebook、Instagram 這種以圖片社交為主的 App 都有一個特點,就是文字都是黑白灰,將彩色交給圖片去傳達,讓用戶關注內(nèi)容即可。

△ Facebook for Android

AR

增強現(xiàn)實的技術,已經(jīng)出現(xiàn)在很多 Web、App 等領域中。許多平臺開發(fā)者也將增強現(xiàn)實技術納入其開發(fā)工具里面,可預期到這種類型的 App 將會越來越多。

1. 地圖導視界面

地圖+AR,讓你不再盯著二維平面上那個藍色的點,而是現(xiàn)實世界中的箭頭告訴你在哪個路口轉(zhuǎn)向。

△ Google Map

2. 表情貼紙

Instagram、Snapchat、Messenger 等平臺可用 AR 濾鏡來創(chuàng)作,表情貼紙可以幫助用戶更直白有效地自我表達、獲取注意力。

△ Spark AR

車載系統(tǒng)界面

隨著 5G、車聯(lián)網(wǎng)、人工智能、自動駕駛的發(fā)展,車載界面也越來越受重視了。

在今年的 Google I/O 開發(fā)者大會上,針對車載系統(tǒng) Android Auto,推出了新的設計語言,它有著更好的可拓展性。在 UI 上,完全重新設計了導航欄,能夠更輕松地訪問應用、通知,和你的 Google 智能助理,最大限度的幫助駕駛者減少分心,將注意力集中在道路上。

△ Android Auto UI

此外,還開發(fā)了新的系統(tǒng)小部件,在使用地圖進行導航時,仍然可以一鍵控制音樂應用,或者正在進行的電話,同時在屏幕上保持地圖的完整視圖。

總結(jié)

UI 設計的趨勢除了側(cè)重內(nèi)容和情感之外,還會根據(jù)不同設備載體、新的技術(3D、AR)而變化。但歸根結(jié)底還是以人為本,借用 Adobe 設計副總裁 Jamie Myrold 的一句話:如今設計師要思考的,絕不僅僅是設計一款 App、網(wǎng)站或設計工具。我們要思考的是人類的需求,用戶的需求,打造真正人性化,多元化與包容性的設計。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


2019 年 LOGO 設計趨勢報告(下)

資深UI設計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

抽象圖形拼接

坦白說,這些抽象的 LOGO 設計讓我立刻想起了JK·羅琳和她書中的魔法符號。如果這些Logo背后都有著獨特而富有力量的故事,那么它們確實可以很好地服務于品牌。這樣的了 LOGO 設計應當在筆觸上保持一致,并且充滿意義,我覺得如果能傳遞出這樣的信息,它就很優(yōu)秀了。

利落清晰的筆觸,完美的角度和弧線,這樣精準的設計會給人帶來可靠的感知。當然,這些Logo 的應用場景同樣有著嚴格的環(huán)境要求,設計師幾乎沒有異想天開的余地。這些 Logo 看上去相當正式,有著明顯的高級感。

負空間

借助負空間來傳遞信息一直一種巧妙的 LOGO 設計技巧,它就像缺少關鍵證據(jù)的犯罪現(xiàn)場,墻上的洞,它并不是借助現(xiàn)有存在的因素來告訴你信息,而是通過一個「不在場的關鍵元素」,來傳遞重要信息。負空間就是這樣,它同樣也是一塊畫布,只不過給人的感覺是通過畫布的背面來呈現(xiàn)信息和故事。

負空間并不是為了隱藏信息而存在,就像聯(lián)邦快遞 (FedEx) Logo中隱藏的箭頭,或是 Toblerone 巧克力 Logo 中山腰上的熊。這些元素都不是為了隱藏信息,而是為了通過這種不完整來傳遞更多的信息。通過正空間來凸顯負空間就是關鍵的技巧,正如 Reinhard Ernst 博物館的 Logo 所示,中間開放的矩形區(qū)塊如同畫框,似乎可以代表博物館的任何一件藏品,這也是一種「less is more」的設計。

托拽筆觸

很多做 Logo 的設計師都曾經(jīng)歷無法控制的時刻,發(fā)呆失神應該也經(jīng)常會發(fā)生。如果你是在紙上畫草圖,筆尖無意識地滑動,或者墨水洇出,都會產(chǎn)生有趣的筆觸痕跡。我知道這不是電腦上繪圖的方式,但它確實幫助我描繪出這種視覺設計的特征。將筆尖繪制成一個完美的圓,而筆尖后則是留下托拽的痕跡,在筆痕結(jié)束的位置,自然留下的也是一個圓弧邊緣。

不管這些 Logo 的布局特征是怎樣的,它們都呈現(xiàn)了類似視覺特征。小圓點和托拽痕跡構成了它主要的「筆觸」,它們而生動地拼出字母,繪制出路徑,或者勾畫出有意義的符號。我想你已經(jīng)捕捉到了它們的特征了——活力四射,生動新鮮的筆觸路徑。

間斷漸變

在logo設計中廣泛使用漸變色,是整個行業(yè)在過去十年中經(jīng)歷的最兩極分化的趨勢之一。仍有很多設計師抵觸過渡色,因為從LOGO設計的角度上來說,漸變色違背了很多規(guī)則,而這些規(guī)則是在數(shù)字時代之前就已經(jīng)存在了。不過,LOGO 設計師們總能想出好辦法,比如間隔漸變式的設計。

將均勻漸進的色彩變化用連續(xù)的純色片段來替代,同樣呈現(xiàn)出色彩的變化和韻律感,但是消解了漸變色在 LOGO 展示過程中潛在各種問題。上面案例中,Qwant 的 logo 就是通過輪廓化的顏色分割來實現(xiàn)這一點,它真實地模擬了漸變的效果,所呈現(xiàn)出的效果比CPA Ireland 要好,CPA Ireland 則使用了的四等分幾何分割加上色階轉(zhuǎn)換??傮w上來說,間隔漸變的色彩使用技巧,很好地在當下的流行趨勢和 LOGO 設計訴求之間找到了平衡點,值得嘗試。

輪廓線條

使用線條來勾勒和描摹事物,傳達信息,是一項古老而傳統(tǒng)的技藝。在時下的審美體系當中,使用輪廓線條來繪制 LOGO 似乎顯得太過于老派,不夠現(xiàn)代。不過技術總歸是服務于表達的,依然有設計師能夠充分的利用這一技術——加入透視,不再局限于二維,而是開始描繪三維的對象。

這一的設計看起來和如今的線性圖標的繪制方式在技法上保持了延續(xù)性,但是它在維度呈現(xiàn)上更加深入,更加具有表現(xiàn)力和形式感。通過富有規(guī)律性的利落的線條,設計師不用太多的線條就能勾勒出立體而抓人眼球的LOGO。這種設計要求設計具備更強大更精準的描摹能力。你可以延續(xù)這種思路到整個設計當中,這會使得整個品牌化設計思路更加開闊、有趣。

句點元素

在 LOGO 設計當中,使用句點這樣的標點符號,通常都會借用它身處標點符號中的含義和功能。當我仔細琢磨這一趨勢時,發(fā)現(xiàn)這些類似句點的符號有時像句號,有時則偏向冒號,它們在LOGO中總帶著一些奇特的意味。如你所見,這些原點在更多的時候,它更接近于句號,充當收尾和封頂?shù)慕K止符。

有的時候,它的裝飾性更強,以不同的形式漂浮在文本和符號周圍。如果你要深究這些 LOGO 設計本身的含義會發(fā)現(xiàn),這個小圓點可能是字母 i 上的那個小圓點簡略之后的殘留痕跡。這個小圓點,在如今的很多 LOGO 中已經(jīng)超出了裝飾性的范疇,基于不同的需求和設計出發(fā)點,它可能意味著時間,可能代表著字母,承載著特定的詞匯和含義,可能是感嘆號或者句號,表達情緒或者終止。設計師將內(nèi)容抽象成幾何圖形,承載意義,提升了對話的智慧。

翅膀元素

在傳遞放飛、飛翔、展望、自由、遠見、輕盈、速度等含義的時候,很多設計師都會借用翅膀的意象。這也是為什么越來越多的地方會看到被提煉和抽象出來的翅膀和羽毛的符號或者圖形,某種意義上,翅膀已經(jīng)遠超出了它本身的意味。這些被設計得形制不一的翅膀類的圖形,有著冥想的前傾或者后掠的姿態(tài),仿佛在對抗變幻莫測的大風,借助空氣動力學向上飛起。

很多翅膀元素形制類似于字母 U,只不過兩只翅膀在傾斜角度、弧度和長短上,進行了比較深入的調(diào)整。之后,再對 Logo 進行弧度和細節(jié)進行修飾,這樣就完成了。如同我們上面所在展示的幾個案例,設計師經(jīng)過很快的迭代就可以完成這樣的設計。與此同時,在具體的設計過程中,設計師還會引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了雙翼的意象。蘋果有翅膀,烏龜也可以有翅膀。我們可以用翅膀填補空白。

門窗元素

門其實我們常常會引申出「打開新世界大門」的概念,它在實際設計中會帶有通道、時間、新世界,甚至一種全新心境和意境的概念。很多品牌 LOGO 都想借助這個意象來承載更高遠的含義,微軟就是一個典型。門和窗本身一直都是一組象征性極強的元素。門象征著通行的權利,解決方案的途徑,機會,甚至歡迎的含義,某種意義上它們和眼睛在含義和隱喻上是共通的。這也是很多設計師在設計 LOGO 的時候青睞這一意象的原因所在。

關于2019年的LOGO趨勢報告

2019年的LOGO趨勢報告,是我們的第17份 LOGO趨勢報告。每年的趨勢報告都是從成千上萬的 Logo 中,尋找新趨勢和細微微妙的差別。我們承認,每一個設計案例都代表著來自世界各地的設計師們的思考和心血,我們對他們表示敬畏,并感謝他們不遺余力地幫助我們完成這份報告。感謝所有在過去、現(xiàn)在和未來幾年為潮流報告做出貢獻的設計師們。


藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


2019年UI和UX設計趨勢來了!

ui設計分享達人

在UI行業(yè)里面,設計趨勢是更新非??斓?,它能夠更好的指導我們的設計方向,包括一些設計手法,都在不斷地發(fā)生變化。作為一個UI設計師,需要更多的了解設計趨勢。所以今天MICU哥將與大家分享2019年UI和UX設計趨勢,希望給大家?guī)硪恍椭?img style="max-width:100%;border-top:0px;border-right:0px;border-bottom:0px;padding-bottom:0px;padding-top:0px;padding-left:0px;margin:22px auto 0px;border-left:0px;display:inline-block;padding-right:0px;" src="https://img.zcool.cn/community/01784c5c1c31e5a8012029ac22c7da.gif" />

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔