Hi，我是彩云。2021 年比 2020 年變得更好了嗎？是的，如果我們探討的是 UI 和 UX 設(shè)計的話。新的令人驚艷的網(wǎng)站和 APP 被開發(fā)出來，面向設(shè)計師的新軟件得到更新和發(fā)布，創(chuàng)造力被進一步激發(fā)了出來。

當(dāng)設(shè)計師被迫待在家里時，終于能有時間去反思現(xiàn)有的設(shè)計并重新創(chuàng)造。無聊是藝術(shù)家最大的敵人，他們會盡可能地打破困局。

那么，2022 年的 UI/UX 設(shè)計趨勢是什么呢？看看現(xiàn)在的情況，我們已經(jīng)可以預(yù)測未來的設(shè)計趨勢，就像我們對 2021 年所做的預(yù)測一樣（回頭看非常準(zhǔn)確）。

在本文中，我們將發(fā)現(xiàn)：

1. 3D 視覺設(shè)計師的內(nèi)卷將會越來越嚴(yán)重
2. 數(shù)據(jù)可視化的工作將變得越來越重要
3. 服務(wù)的移動化還需要做出更多努力
4. scrollytelling 技術(shù)會越來越流行

滾動已死，滾動敘事興起

舊的滾動是無聊的。如果你想吸引注意力，你就需要實現(xiàn)滾動敘事（scrollytelling）。（彩云注：這個技術(shù)的核心在于邊滾動頁面邊講故事）

《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構(gòu)之一。

它是一種敘事形式，可以在網(wǎng)頁和 APP 上呈現(xiàn)。想象一下，在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結(jié)局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。

2022 年，Scrollytelling 將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。

另一方面，scrolllytelling 讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站（https://www.google.com/search/howsearchworks/）。他們的團隊知道如何讓信息看起來更好:

Scrollytelling 在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設(shè)計師創(chuàng)造出酷炫的視覺效果，還需要認(rèn)真思考一個你想要講述的故事情節(jié)。

所以，最好的網(wǎng)站不可能在 2 天內(nèi)建成，需要更多的時間去打磨。

令人驚艷的敘述設(shè)計

滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結(jié)果是值得的。頁面變成"活的"，每一秒都有新的事情發(fā)生，所以在閱讀時很難感到無聊。

那么移動端 APP 呢? PURe 是一款約會應(yīng)用（彩云注，這個應(yīng)用在 app store 可以搜到，推薦大家安裝一個體驗一下，非廣告），它創(chuàng)造了一種我稱之為"tappytelling"的故事（當(dāng)你第一次點擊并打開應(yīng)用時，它就會被激活）:

Scrollytelling 是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網(wǎng)頁設(shè)計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設(shè)計出來。

用戶喜歡看數(shù)據(jù)，數(shù)據(jù)可視化越來越被重視

如何在 2022 年做出一個還不錯的企業(yè)網(wǎng)站？你不會想告訴用戶你是"XX 領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者，該領(lǐng)域最好的之一"。這種標(biāo)準(zhǔn)的廣告表達并不傳達任何有價值的信息。

最好不要用形容詞，而是用事實來說明:你有多少分支機構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結(jié)合。以下是 IAmBinadam 展示數(shù)據(jù)的方式:

通過去除數(shù)據(jù)集的復(fù)雜性，使信息更容易讓讀者感知。

不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應(yīng)該先從哪里查看

讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。

有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到

還有一種現(xiàn)象叫做"新冠后遺癥"。這是 Covid 對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù)，2018 年，壓力和焦慮的平均得分約為 2.7/10。自新冠疫情發(fā)生以來，得分已升至 4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了 4 個小時。

人們壓力太大，卷的太辛苦，以至于不愿去看復(fù)雜的數(shù)據(jù)。

設(shè)計師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復(fù)雜的信息通常被忽略，因為讀者試圖節(jié)省他們的時間，更有可能使用滾動按鈕。

Illustration by Mona Chalabi

以下是我們推薦的一些表示數(shù)據(jù)的方式

1. 圖表和曲線圖
2. 插圖
3. 靜態(tài)信息圖
4. 互動信息圖

Illustration by Ink Factory

如何讓信息圖表看起來更好?

一個好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應(yīng)該具有在 Edward Tufte 的"定量信息的可視化顯示"中描述的特征。在他的書中，Tufte 通過圖表解釋了好圖表的 3 個原則：

1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于 1。簡單地說，應(yīng)該刪除一切不必要的元素，保持整潔。

Graph by Hootsuite

2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密。

Graph by Hootsuite

3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實永遠(yuǎn)是更重要的。

2022 年還有必要做 APP 嗎？

根據(jù) We Are Social 的數(shù)據(jù)，2021 年有 52.2 億人使用手機，約占世界人口的 66%。自 2020 年 1 月以來，手機用戶數(shù)量增長了 1.8%(9300 萬)，而手機聯(lián)網(wǎng)總數(shù)量增長了 7200 萬(0.9%)，到 2021 年初達到 80.2 億。

過去一年，社交媒體用戶的數(shù)量增長了 13%以上。到 2021 年初，社交網(wǎng)絡(luò)上已有近 5 億新用戶注冊。根據(jù) App Annie 的數(shù)據(jù)，AndROId 用戶每天花在手機上的時間超過 4 小時。2020 年，安卓用戶上網(wǎng)時長超過 3.5 萬億小時。

令人印象深刻的數(shù)字，是嗎？似乎到 2022 年，為產(chǎn)品做一個 APP 將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用？有以下幾點可供評估：

1）用戶主要通過移動設(shè)備訪問你的網(wǎng)站

這是你應(yīng)該了解的重要數(shù)據(jù)?？蛻艉湍阍谝黄鸬臅r間越長，你就有越多的機會去吸引他們，了解他們的習(xí)慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）

2）幫助內(nèi)部業(yè)務(wù)流程更加有效

如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業(yè)務(wù)流程的移動應(yīng)用。

如今，像這樣的手機應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù)，加快日常重復(fù)操作和文檔管理。

3）實現(xiàn)一些網(wǎng)站上沒有的新功能

如果你認(rèn)為 APP 能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發(fā)。問問自己的 APP 能提供什么新的商業(yè)機會？例如，隨著疫情的蔓延，許多人開始用上健身 APP 在家里鍛煉。

4）競爭對手的情況

要了解競爭對手在做什么，他們是否有 APP，能做什么，以及他們是否真的對用戶有用。

查看 App Store 和谷歌 Play 的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要，那么你就容易被甩在后面。

5）復(fù)購率

一個應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發(fā)送一個通知就能完成，成本更低。

在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。

出租車服務(wù)公司有回頭客，他們肯定需要一個應(yīng)用

6）促銷工具

有了應(yīng)用，你就不需要花錢設(shè)計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到 APP，并分享有用的促銷信息。

做原生 APP 還是移動端網(wǎng)站?

開發(fā)手機網(wǎng)站比開發(fā)手機應(yīng)用需要更少的工作量，這反過來可以降低整體推廣成本。

這部分是由于響應(yīng)式設(shè)計的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于 APP，它們必須為許多移動平臺單獨編寫:Android、iOS、Windows 等。

一些設(shè)計師認(rèn)為"前端驅(qū)動的網(wǎng)絡(luò)體驗"會是 2022 年的一個好機會，我非常同意!
（注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）

3D 設(shè)計具備更強競爭力

我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設(shè)計師們就已經(jīng)設(shè)計了很多 3D 圖像和動畫了。

Cardi B rhymes with 3D

3D 技術(shù)已經(jīng)在過去流行了很多年，但它不會很快消失。此外，我們預(yù)測 3D 圖形將變得更加多樣化和包容。

在過去的幾年里，3D 藝術(shù)和動畫已經(jīng)出現(xiàn)在各種 UI 設(shè)計趨勢評論中。這意味著越來越多的設(shè)計師將它們整合到頁面中。

3D 當(dāng)然應(yīng)該成為 2022 年最熱門的趨勢和預(yù)測之一，因為與經(jīng)典動畫相比，逼真的 3D 形狀結(jié)合動畫總是引人注目的。

"從技術(shù)上講，通過 3D 更容易傳達更多內(nèi)容，因為它比平面圖片更接近我們的感知。3D 插圖更有深度，信息量更大，也更具互動性。"

許多設(shè)計師將 3D 對象無縫地"安置"在 2D 空間中。它允許創(chuàng)建更有趣的組合，也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。

烏克蘭政府網(wǎng)站用 3D 手模擬了黑客帝國

注意一點：在整合 3D 圖形等重量級內(nèi)容之前，確保你的應(yīng)用性能是 OK 的，能夠快速加載所有元素。

元宇宙風(fēng)潮

Meta 的 logo 既不是 2D 也不是 3D?；蛘邇烧呒娑兄?？這就是即將到來的 2022 年的莫比烏斯帶和薛定諤的貓。

Meta logo 的變化

（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設(shè)計師也需要保持關(guān)注。跟著趨勢走，易于放大自身價值。）

混合動畫

越來越多的公司在網(wǎng)站和移動應(yīng)用中使用動畫，以提高用戶的沉浸感和體驗，使內(nèi)容更有趣。

動畫是 2022 年重要的網(wǎng)頁設(shè)計趨勢。2022 年，如果沒有它，你的產(chǎn)品很可能會看起來就像個半成品。混合風(fēng)格的動畫越來越受歡迎:定格動畫和 3D 動畫的結(jié)合，2D 動畫和 3D 動畫的結(jié)合。設(shè)計師這樣做是為了獲得不同尋常的風(fēng)格解決方案，以及提高最終產(chǎn)品的質(zhì)量。

2022 年，動畫設(shè)計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領(lǐng)域的專業(yè)設(shè)計師數(shù)量的增長，實現(xiàn)新想法的機會也在增加。

2022 年如何使用網(wǎng)頁動畫?

1）講故事

動畫可以通過在界面和用戶之間建立情感聯(lián)系來傳達信息。

加載動畫 Yoichi Kobayashi

2）更有趣的加載

用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。

3）光標(biāo)效果

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動動畫，對這個光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在 21 世紀(jì)初非常流行。如你所知，流行趨勢往往每 20 年就會重演一次。

4）動態(tài)排版

你有沒有想過讓字母跳舞?

添加角色的動畫插圖

據(jù) Statista 統(tǒng)計，2020 年全球動畫市場達到了 2700 億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動畫制作廣告。毫無疑問，動畫插圖的優(yōu)勢是它們非常靈活和多樣化。

寶馬歷史動畫

這樣的作品通常用于兩種情況:

1）用于解釋視頻

2）電商廣告

動畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關(guān)于什么的。

在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。

微交互，大影響

微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果：它們顯示發(fā)生了什么，將導(dǎo)致什么操作，下一步需要做什么。

圖片來源 awwards

動畫交互將為你的設(shè)計注入活力，并有助于保持用戶粘性。關(guān)注每一個細(xì)節(jié)是設(shè)計師工作的關(guān)鍵，因為設(shè)計中的所有元素都可以帶來積極的用戶體驗。

重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們?yōu)榻缑嬖卦鰪妰r值。

CTA animated

微交互有助于頁面導(dǎo)航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現(xiàn)特定的行為。

動態(tài) logo，加深品牌印記

2022 年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動畫 logo 設(shè)計。

圖片來源 Toridori

動畫 logo 主要有以下幾點營銷優(yōu)勢:

1. 吸引注意力。這意味著它們有助于提高品牌知名度。
2. 有助于提高 SEO。谷歌更傾向于動態(tài)內(nèi)容，帶有動態(tài)圖形的頁面更容易吸引用戶。
3. 在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的 logo 更有趣。
4. 最重要的是展示了歷史。靜態(tài) logo 背后的想法正在動畫中發(fā)展。由于這一點，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價值!

一家洗衣機[公司]的標(biāo)志

現(xiàn)在有很多設(shè)計模板，可以很容易地用字體制作一個動畫 logo:

來源 Shabello, Bobby Voeten

最后的話

記住，設(shè)計趨勢總是在變化的，但是設(shè)計的意義不會變。如果你不能深刻理解這一點，那么任何設(shè)計趨勢的文章不能幫你做好設(shè)計。