從視覺、交互和技術(shù)三個方面淺析2021設(shè)計趨勢

2021-9-8    ui設(shè)計分享達人

一、社會背景  Social Context


2020年因為疫情,讓協(xié)作、云端、即時通訊、遠程會議、AI智能等等,成為了遠程辦公的必需品。目前,疫情在國內(nèi)已經(jīng)獲得了控制,后疫情時代已經(jīng)到來,許多最初沒有的習(xí)慣,在發(fā)現(xiàn)新的工作模式更加有效率后,也即繼續(xù)保留了下來,這些保留下來的習(xí)慣,也將在2021年會更進一步的發(fā)展。



1.大廠的變化

在視覺設(shè)計層面,個大設(shè)計語言陸續(xù)推出了新的設(shè)計版本,更為突出個各自設(shè)計風(fēng)格,以建立自己的視覺護城河,谷歌發(fā)布了 Android 11,Apple發(fā)布了 IOS 14,微軟持續(xù)宣傳他的 Fluent UI 設(shè)計理念,在國內(nèi)的辦公領(lǐng)域,騰訊文檔推出了類似 Fluent UI 設(shè)計理念風(fēng)格,石墨文檔依舊保持獨特的東方韻味,飛書發(fā)布了飛書文檔,繼承飛書本身簡潔的 UI ,以及活潑的插畫風(fēng)格。


谷歌的 Aandroid 11 

基于 Material Design 設(shè)計的 Android 11 ,裝飾上運用簡潔的幾何圖形,UI 細節(jié)上開始趨向圓角的運用,色彩方面選擇了更為協(xié)調(diào)的配色,對比之前版本純度有所降低,顯得更為高級。視頻鏈接:file:///Users/javascript/Desktop/0bf2miadcaaa7eamerkc6fqfaywdgfraamia.f10003.mp4


蘋果的 IOS 14

UI 設(shè)計延續(xù)原有的風(fēng)格,清晰的字體,大圓角的運用,加上豐富的動態(tài)效果,并且新增了許多貼心的新功能,例如懸浮播放視頻、主屏幕的Widget。


微軟的 Fluent UI

這是微軟為跨平臺,而提出的設(shè)計解決方案。支撐設(shè)計概念的關(guān)鍵詞有深度、材質(zhì)、動畫、光線等等,這聽起來感覺與 Material Densign 特別相似。不過在最終的視覺呈現(xiàn)上微軟會更接近于真實世界。例如,透明的毛玻璃效果,或更為立體的圖標(biāo)等。


2.社區(qū)中的熱門設(shè)計

Behance 和 Dribbble 在2020年出現(xiàn)了許多以 3D 插畫為主視覺的設(shè)計方案,因為技術(shù)的發(fā)展,設(shè)計師借助 Figma 或 Dimensions 就可以輕松的創(chuàng)作所需的 3D 素材。關(guān)鍵的這不是設(shè)計方案中的“花瓶”,因為在Mac的最新系統(tǒng) Big Sur 中,已經(jīng)開始運用了 3D 的圖標(biāo),相信在以后的 3D 的運用場景將會不斷的被挖掘出來。


2020年初時在Dribbble流行起來的一個風(fēng)格叫“新擬態(tài)”,這是將投影運用到極致后出現(xiàn)的效果,正如作者所說的:讓我們想象一下,如果在移動界面設(shè)計中,投影的形式發(fā)展的更好的話,那將來的界面將會是什么樣子的,這是我的愿景”。新擬態(tài)在視覺上表現(xiàn)確實很驚艷,為此Aandroid還制作了一個新擬態(tài)的12宣傳視頻,但是主觀感覺這應(yīng)該很難廣泛運用到實際產(chǎn)品當(dāng)中。



二、UI設(shè)計 User Interface


1. 設(shè)計服務(wù)與內(nèi)容

設(shè)計專注于表現(xiàn)內(nèi)容,這是從包豪斯到現(xiàn)在一直遵循的規(guī)則,而這個理念也將會持續(xù)下去。設(shè)計目標(biāo)終將是需要把關(guān)鍵信息傳達到用戶手中,讓用戶知道自己為什么在這,這里有什么,并且能到哪里去。


技術(shù)的發(fā)展,形式也一直在發(fā)生變化,提升信息傳達效率,這已經(jīng)不單是平面設(shè)計專屬。學(xué)會運用動效,交互或智能推薦等綜合的方法,來達到設(shè)計目標(biāo),會是將來常用的設(shè)計手法。


2.更大的圓角


在以前由于屏幕分辨率太低,窗口四角正常會運用直角,因為圓角會出現(xiàn)鋸齒或者模糊,影響界面美觀。而現(xiàn)如今移動屏幕質(zhì)量早已超過紙媒的印刷技術(shù),圓角也開始被廣泛的運用。另一方面圓角在之前的認知中,是兒童的專屬,是更為親和力的表現(xiàn)形式。而經(jīng)過幾年的發(fā)展,這個偏見正在慢慢改變,因為圓角也可以做的很高大上,也能設(shè)計的很潮流。


蘋果總是第一個吃螃蟹的公司,Mac 的最新系統(tǒng) Big Sur 整體變得更加圓潤,窗口四角從以前的 10px 增加到 20px ,并且全新的控制中心也沿用了 IOS 14 的設(shè)計風(fēng)格和設(shè)計布局。值得在一提的是,微軟 Win 10 的概念稿中也開始嘗試運用起了圓角。所以這個趨勢是蠻值得關(guān)注的一點。



3.用有含義的插畫提升用戶體驗


設(shè)計師常常會陷入形式主義,而忽略了本該表達的內(nèi)容,特別是在插畫上。也許這個道理每位設(shè)計師都懂,但為何還是會前仆后繼的撲倒在自我滿足的陷阱中呢?也許原因中會有一點是,當(dāng)內(nèi)容過于直接表達,或者元素過于普通,就很容易讓作品變得毫無趣味,這就是矛盾所在了。


那如果設(shè)計師既不想脫離內(nèi)容,又不想設(shè)計出乏味的設(shè)計,怎么辦?這就需要讓插畫具有含義,而不是淪為純粹的形式。優(yōu)秀的插畫多承載的信息量,能夠遠比文字或界面UI來的豐富。



4. 新材料新擬態(tài)


包豪斯有個教學(xué)目標(biāo),“培養(yǎng)感覺清晰,認知準(zhǔn)確的設(shè)計師”。因此在包豪斯的基礎(chǔ)教學(xué)中,會讓學(xué)員研究各種材料的不同屬性。在 UI 設(shè)計當(dāng)中,我們也能制作出各種各樣的材料,在擬物化的時代就能證明這一點。但在 2020 年初時,當(dāng)某位設(shè)計師發(fā)現(xiàn)了一種新材料,并把這種材料運用到了 UI 設(shè)計當(dāng)中,一時間火爆整個社區(qū),這就是上面提到的“新擬態(tài)”。 



這世界是充滿可能的,所以我相信在未來還會有更多的材料會被發(fā)現(xiàn),或者被以新的方式使用。例如,在 2020 下半年又有一種風(fēng)格開始回歸“毛玻璃”,其中我們所知道的釘釘,在釘釘 6.0 的設(shè)計概念中就融入了毛玻璃的效果。在社區(qū)中,毛玻璃也被運用到 UI 的各種場景中卡片、彈窗或圖標(biāo)等。實話實說,毛玻璃的材質(zhì)的確能增加許多品質(zhì)感。 



5. 自然的界面和運動效果


這里所說的自然,是能讓人感到熟悉和安心,是以人為本的設(shè)計。王敏老師說過:“科技求真,藝術(shù)為美,設(shè)計從善,設(shè)計可以作為結(jié)點,讓真善美實現(xiàn)統(tǒng)一?!辨溄尤伺c產(chǎn)品之間的紐帶是 UI 界面,它需要承載不僅是信息內(nèi)容,還有用戶體驗,因此,以人為本的設(shè)計終會贏得用戶的喜愛。


自然運動效果,不是那種大開大合的炫酷效果,而是讓界面過渡更為自然合理。想要讓界面體驗更為自然,那必然要遵循真實世界的物理規(guī)則。例如,重力、摩擦力、向心力、浮力等動態(tài)效果。



6. 來自未來的風(fēng)格


科學(xué)技術(shù)的快速發(fā)展,讓我們感覺未來近在咫尺,但又十分迷茫不知何去何從。我相信承載UI的媒介,必然不僅僅是現(xiàn)在我們所使用的各種設(shè)備。VR、AR 或全息影像等技術(shù)發(fā)展,將使得UI設(shè)計會有更多的可能性。賽博朋克2077也許真的離我們不遠,那種滿世界無處不在屏讀的社會,怎樣的設(shè)計才能真正滿足需求呢?這是我們需要長期思考的問題。



7. 深色模式


在2020年各大廠都推出了暗色調(diào)模式,這已成了如今APP的標(biāo)配。除了深色模式外,以后還會在可視性、場景和現(xiàn)實成本等因素方面,更近一步的打磨。




三、插畫風(fēng)格  Illustration


1.更具裝飾性的平面插畫風(fēng)格


雖然在 2020 年不管是社區(qū),還是實際項目,許多設(shè)計師都開始熱衷于 3D 插畫,就連蘋果微軟也不例外。但是 Google 卻繼續(xù)堅守自己的設(shè)計風(fēng)格,扁平的裝飾性插畫,例如 Android 11 就運用簡單的幾何圖形進行裝飾,相關(guān)的插畫也是更多運用的扁平風(fēng)格,這種堅持必然會有其重要的原因。


裝飾性插畫在各種屏幕的適配性更廣泛,并且在繪制成本和實現(xiàn)成本方面也會更有優(yōu)勢。在屏幕媒介還沒發(fā)生顛覆性改變前,我認為扁平的裝飾性插畫在未來將還會大放異彩。 


2.情感化的插畫設(shè)計


后疫情時代的遠程辦公,我們需更加考慮如何緩解合作的疏離感。如何拉近人與人之間的協(xié)作,打破遠程的空間桎梏,讓合作更具沉浸感。這時情感化的設(shè)計就能充分體現(xiàn)它的價值,例如,這幾年開始火的 emoji 頭像,或者各種表情包,它們讓溝通的雙方產(chǎn)生情感共鳴,而不是面對著冷冰冰的屏幕。


3. 插畫的組件化與創(chuàng)新


皮克斯運用技術(shù)的創(chuàng)新,提升了質(zhì)量和效率,從而改變了整個動畫的歷史。對于我們來說,未來的插畫需求會越來越多,并且還要求獨特的創(chuàng)新性,這就需要有更優(yōu)的解決方案。


Ant Design 的 HiTu 在 SEE Conf 的時候提出了解放圖形化生產(chǎn)力,那就是將插畫各部件組件化,這有效的提升插畫效率。然而在插畫庫的維護方面,還需要設(shè)計的創(chuàng)新。因為效率的提升,讓設(shè)計師能有更多時間,專注于更有創(chuàng)造性的工作,然后將新的創(chuàng)意理念融入部件,最終完善整個插畫組件庫。 





四、交互方式  IInteraction


1. 多屏協(xié)同辦公


凱文凱利在《必然》里討論了關(guān)于未來的生活方式,他認為我們的未來環(huán)境會充滿各種屏幕,它將會在各種事物的表面出現(xiàn),屏讀會從我們起床開始到晚上睡覺,一直出現(xiàn)在我們視野中。如今的人們每人都有各種各樣設(shè)備,因此,多屏協(xié)同辦公是必然的趨勢,不管你是與人合作,還是獨立工作。


萬物互聯(lián)已經(jīng)是很久的話題了。在 2020 年華為的鴻蒙系統(tǒng),發(fā)布了跨設(shè)備進行的分布式交互,實現(xiàn)了多屏協(xié)同。我感覺,這將是很重要的一步。 



2. 秒驗身份認證


身份認證是信息安全最關(guān)鍵的一步。我們通常會用身份 ID 加密碼進行登錄,并且為了驗證你不是機器人,還會加上人工輸入驗證碼,如果再有其他的設(shè)置選項,那我們的登錄交互就會被拉的很長,有時還會出現(xiàn)登錄失敗的情況。在如今浮躁的社會,許多用戶也許在前幾步就已經(jīng)失去了耐心。 


移動設(shè)備擁有有豐富的傳感器,并且精度也在逐年的提高。隨著指紋、面部、虹膜等等技術(shù)成本的降低,這些技術(shù)也開始越來越普及化。如今使用新的識別技術(shù),很輕松就能完成各種身份認證。 




3. 單手交互的挑戰(zhàn)


當(dāng)年喬幫主一直堅持的單手操作,而如今,手機屏幕逐漸越來越大,單手操作已是一種奢望。為此,各手機品牌想方設(shè)法的改變交互方式,為的就是能實現(xiàn)單手操作,并且為此作為宣傳的噱頭。iPhone 輕點兩下 home 鍵或向下輕滑虛擬 home 鍵,就能讓整個內(nèi)容向下移動半屏,從而方便單手操作頂部功能。 


想達到目標(biāo)的第一步,就是辦法讓拇指能觸及到功能。但我們還需要進一步思考的是,拇指本身的靈活性并不高,并且也只能是單點觸控,那怎樣的交互形式能滿足日益復(fù)雜的交互需求呢? 





4. 折疊屏

屏幕可拓展,將會是移動辦公的重要轉(zhuǎn)折點。不管是需要長篇編輯的文字,還是畫板無限大的表格,或者是需要強大美化功能的演示,這都需要足夠大的屏幕才能有更優(yōu)的體驗。折疊屏的出現(xiàn)讓手機能代替平板,滿足更多使用場景。折疊屏目前由于成本的原因,在大眾眼中還屬于新事物。但我相信成本在未來不會是問題,更重要的問題是,屏幕形式的變化,對于交互來說將會有哪些影響,并且如何挖掘其中真正的潛力。



五、技術(shù)升級  Iechnology


1. 關(guān)注隱私保護


自 MIUI12 隱私功能發(fā)布后,APP 訪問隱私頻次大幅下降,這使得應(yīng)用的行為越來越規(guī)范,也因此獲得了用戶、國家相關(guān)機構(gòu)和媒體的認可。 



在凱文·凱利的《必然》中描述了這樣的一個未來景象,我們的各種狀態(tài)將會被設(shè)備所跟蹤,大到你的地理位置,小到你的心跳,你所經(jīng)歷的一切都將被上傳到網(wǎng)上,設(shè)備能通過對過往的分析,給你推薦各種商品或服務(wù)。這很美好,但同時也存在許多風(fēng)險。在《竊聽風(fēng)云》的電影情節(jié)中,就是由于先進的竊聽技術(shù),造成了各種無法預(yù)估的災(zāi)難。所以這是一把雙刃劍,在技術(shù)進步的同時,我們也需要時時刻刻關(guān)注隱私的保護。 




2. 智能自動化辦公


在 2019 的 Google I/O 大會上,Google Lens 展示的 AR 點菜功能可以智能識別用戶掃描的菜單并將美食網(wǎng)站上的相關(guān)推薦直接呈現(xiàn)在屏幕上。當(dāng)識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節(jié)省人工計算的時間成本。 



在辦公場景下,如何幫助用戶減少無謂的工作,讓更多精力專注于內(nèi)容。把排版規(guī)范、素材提取、文件管理、功能查找等瑣碎的事情,交給人工智能來完成。在以前工業(yè)時期有機器的賦能下,人們的生產(chǎn)效率進行了一次飛躍,而下次的效率提升將會是人工智能。 




3. 腦機

是否希望自己學(xué)會“量子閱讀法”呢?也許 5 分鐘實現(xiàn)十萬字快速閱讀不是夢。Neuralink 發(fā)布了 Link V0.9 版的腦機接口,并且已經(jīng)在動物上進行實驗,他們通過把一塊微芯片植入猴子的大腦,然后讓其通過意念玩電子游戲。雖然這產(chǎn)品在人類普及的概率幾乎為零,但是這也算是人類向前邁出了一大步。 



這只是一個開始,未來的設(shè)備將不局限于可穿戴,而會是與人體緊密相連?;蛟S可以想象一下,在未來人們會像在醫(yī)院預(yù)約掛號一樣,在科技公司樓下排隊更新升級身體里的“機械器官”。 



4. 虛擬現(xiàn)實&增強現(xiàn)實


如果要說接下去哪個技術(shù)變革,將對我們生活工作產(chǎn)生重大影響,我認為將會是 VR 和 AR。在溝通方面,體驗將會變得更為真實。遠程溝通常常效率很低,其中很重要的一點是空間的距離感,而空間的距離會產(chǎn)生雙方鏈接的不穩(wěn)定性,因為雙方無法達成眼神、肢體等信息的交流,有時候一個眼神或者動作就能完成的事情,需要反復(fù)的語言交流,甚至?xí)萑敫鞣N尷尬的境地。 



除了溝通之外,在工作、生活、學(xué)習(xí)等領(lǐng)域,VR 和 AR 也將會有更多可能,媒介的屬性不再是二維平面,而是三維空間,這使得它能提供更為沉浸式的交互體驗。 



5. 5G 運用


依稀記得上大學(xué)時 4G 時代的到來,旁邊的人都在說網(wǎng)速多快多快,聽歌看視頻一點都不卡。 


而如今 5G 開始普及,網(wǎng)速也再次提升,但外界對其的評價褒貶不一,其中最為常見的話題就是“5G 對我們的生活將會有什么改變呢?”,有人覺得它只會提高我們每個月的話費,也有人提出 VR/AR 全景直播、高清遠程會議、無人機作業(yè)、自動駕駛等技術(shù)將會更為成熟。


不管如此,5G 在 2020 年度過各種坎坷,最終普及到我們每個人身上。5G 對許多領(lǐng)域都會有質(zhì)的影響,特別是依賴網(wǎng)絡(luò)環(huán)境的場景。其中就有辦公領(lǐng)域,大文件上云、協(xié)同辦公或遠程會議,5G 將會給這些場景提供更好的體驗,也會讓更多可能變?yōu)楝F(xiàn)實。 



這篇文章是對當(dāng)下的思考,也希望能對 2021 年的工作帶來些許幫助。在這過程中越是總結(jié),越是對未來的趨勢感到迷茫,一篇文章并不能囊括所有內(nèi)容,不足之處也希望理解。在未來或許會有數(shù)不盡的黑天鵝,也可能因為技術(shù)爆炸,使得新的潮流突然的興起,未來是無法預(yù)測的,所以,就讓我們一起擁抱變化吧~


藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷   作者:籃子瑤

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔