淺析2021年UI設計、交互設計和技術趨勢

Sponsor

前言：無論是UI設計、交互設計或是技術，我們都被微軟、安卓、蘋果這三大巨頭影響著，每一年的設計趨勢和技術都一直在變化。本文回顧2020-2021 年用戶體驗設計趨勢的文章，通過 2020 年的回顧，然后對視覺、交互和技術三個方面進行拆分描述。也許以下內容能為給你的工作提供一些參考價值。

一、社會背景 Social Context

想要探索未來趨勢，必然需要了解當下和過去的事情。因此，我們需要先來回顧下 2020 年的變化吧。

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

1. 大廠的變化

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

谷歌的 Android 11

基于 Material Design 設計的 Android 11，裝飾上運用了簡潔的幾何圖形，UI 細節上開始趨向圓角的運用，色彩方面選擇了更為協調的配色，對比之前版本純度有所降低，顯得更為高級。

查看視頻：https://t.1yb.co/p63n

蘋果的 iOS 14

UI 設計延續原有的風格，清晰的字體，大圓角的運用，加上豐富的動態效果，并且新增了許多貼心的新功能，例如懸浮播放視頻、主屏幕的 Widget。

查看視頻：https://t.1yb.co/p63n

微軟的 Fluent UI

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

查看視頻：https://t.1yb.co/p63n

2. 社區中的熱門設計

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

2020 年初時在 Dribbble 流行起來的一個風格叫“新擬態”，這是將投影運用到極致后出現的效果，正如作者所說的：“讓我們想象一下，如果在移動界面設計中，投影的形式發展的更好的話，那將來的界面將會是什么樣的，這是我的愿景?！毙聰M態在視覺上表現確實很驚艷，為此 Android 還制作了一個新擬態的 12 宣傳視頻，但是，主觀感覺這應該很難廣泛運用到實際產品當中。

查看視頻：https://t.1yb.co/p63n

二、UI設計 User Interface

1. 設計服務于內容
設計專注于表現內容，這是從包豪斯到現在一直遵循的規則，而這個理念也將會持續下去。設計目標終將是需要把關鍵信息傳達到用戶手中，讓用戶知道自己為什么在這，這里有什么，并且能到哪里去。

技術的發展，形式也一直在發生變化，提升信息傳達效率，這已經不單是平面設計專屬。學會運用動效、交互或智能推薦等綜合的方法，來達到設計目標，會是將來常用的設計手法。

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

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

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

那如果設計師既不想脫離內容，又不想設計出乏味的設計，怎么辦呢？這就需要讓插畫具有含義，而不是淪為純粹的形式。優秀的插畫所承載的信息量，能夠遠比文字或界面 UI 來的豐富。

4. 新材料新擬態
包豪斯有個教學目標，“培養感覺清晰，認知準確的設計師”。因此在包豪斯的基礎教學中，會讓學員研究各種材料的不同屬性。在 UI 設計當中，我們也能制作出各種各樣的材料，在擬物化的時代就能證明這一點。但在 2020 年初時，當某位設計師發現了一種新材料，并把這種材料運用到了 UI 設計當中，一時間火爆整個社區，這就是上面提到的“新擬態”。

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

5. 自然的界面和運動效果
這里所說的自然，是能讓人感到熟悉和安心，是以人為本的設計。王敏老師說過：“科學求真，藝術為美，設計從善，設計可以作為結點，讓真善美實現統一?！边B接人與產品之間的紐帶是 UI 界面，它需要承載不僅是信息內容，還有用戶體驗，因此，以人為本的設計終會贏得用戶的喜愛。

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

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

7. 深色模式
在 2020 年各大廠都推出了暗色調模式，這已成了現如今 APP 的標配。除了深色模式外，以后還會在可視性、場景和實現成本等因素方面，更進一步的打磨。

三、插畫風格 Illustration

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

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

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

3. 插畫的組件化與創新
皮克斯運用技術的創新，提升了質量和效率，從而改變了整個動畫的歷史。對于我們來說，未來的插畫需求會越來越多，并且還要求獨特的創新性，這就需要有更優的解決方案。

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

四、交互方式 IInteraction

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

萬物互聯已經是很久的話題了。在 2020 年華為的鴻蒙系統，發布了跨設備進行的分布式交互，實現了多屏協同。我感覺，這將是很重要的一步。

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

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

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

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

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

五、技術升級 Iechnology

1. 關注隱私保護
自 MIUI12 隱私功能發布后，APP 訪問隱私頻次大幅下降，這使得應用的行為越來越規范，也因此獲得了用戶、國家相關機構和媒體的認可。

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

2. 智能自動化辦公
在 2019 的 Google I/O 大會上，Google Lens 展示的 AR 點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。當識別到小票信息時，可快速提取小票上的金額，且可自動彈起計算器快速幫助用戶計算人均消費，節省人工計算的時間成本。

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

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

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

4. 虛擬現實&增強現實
如果要說接下去哪個技術變革，將對我們生活工作產生重大影響，我認為將會是 VR 和 AR。在溝通方面，體驗將會變得更為真實。遠程溝通常常效率很低，其中很重要的一點是空間的距離感，而空間的距離會產生雙方鏈接的不穩定性，因為雙方無法達成眼神、肢體等信息的交流，有時候一個眼神或者動作就能完成的事情，需要反復的語言交流，甚至會陷入各種尷尬的境地。

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

受疫情影響，遠程辦公、網上購物和在線學習等進入了更多人的生活中，這已經成為當今的人類文化，我相信這只是剛剛開始?；赝?10 年前，智能手機還是新鮮事物，而如今已是大眾商品，在未來 10 年后回看今天，某些事物也將是相同感受。

5. 5G 運用
依稀記得上大學時 4G 時代的到來，旁邊的人都在說網速多快多快，聽歌看視頻一點都不卡。

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

不管如此，5G 在 2020 年度過各種坎坷，最終普及到我們每個人身上。5G 對許多領域都會有質的影響，特別是依賴網絡環境的場景。其中就有辦公領域，大文件上云、協同辦公或遠程會議，5G 將會給這些場景提供更好的體驗，也會讓更多可能變為現實。

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

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。