一、社會(huì)背景  Social Context

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

1.大廠的變化

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

谷歌的 Aandroid 11 

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

蘋果的 IOS 14

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

微軟的 Fluent UI

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

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

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

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

二、UI設(shè)計(jì) User Interface

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

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

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

2.更大的圓角

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

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

3.用有含義的插畫提升用戶體驗(yàn)

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

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

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

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

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

5. 自然的界面和運(yùn)動(dòng)效果

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

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

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

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

7. 深色模式

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

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

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

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

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

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

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

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

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

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

四、交互方式  IInteraction

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

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

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

2. 秒驗(yàn)身份認(rèn)證

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

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

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

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

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

4. 折疊屏

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

五、技術(shù)升級(jí)  Iechnology

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

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

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

2. 智能自動(dòng)化辦公

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

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

3. 腦機(jī)

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

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

4. 虛擬現(xiàn)實(shí)&增強(qiáng)現(xiàn)實(shí)

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

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

5. 5G 運(yùn)用

依稀記得上大學(xué)時(shí) 4G 時(shí)代的到來(lái)，旁邊的人都在說(shuō)網(wǎng)速多快多快，聽歌看視頻一點(diǎn)都不卡。 

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

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

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

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

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

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

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