2022-6-12 純純
在本文中，我們將發(fā)現(xiàn)：
3D視覺(jué)設(shè)計(jì)師的內(nèi)卷將會(huì)越來(lái)越嚴(yán)重
數(shù)據(jù)可視化的工作將變得越來(lái)越重要
服務(wù)的移動(dòng)化還需要做出更多努力
scrollytelling 技術(shù)會(huì)越來(lái)越流行
舊的滾動(dòng)是無(wú)聊的。如果你想吸引注意力，你就需要實(shí)現(xiàn)滾動(dòng)敘事（scrollytelling）。（彩云注：這個(gè)技術(shù)的核心在于邊滾動(dòng)頁(yè)面邊講故事）
《紐約時(shí)報(bào)》是第一批在他們的文章《雪花飄落》中使用滾動(dòng)敘事手法的機(jī)構(gòu)之一。
它是一種敘事形式，可以在網(wǎng)頁(yè)和APP上呈現(xiàn)。想象一下，在一個(gè)網(wǎng)站中每個(gè)插圖、文本和其他元素都開(kāi)始變得生動(dòng)起來(lái)。自然地，你會(huì)想看到這個(gè)故事的結(jié)局。它就像一個(gè)游戲，帶你穿越迷宮。雖然你不能影響它的進(jìn)程，但卻讓你感覺(jué)自己能參與其中。
2022年，Scrollytelling將會(huì)出現(xiàn)在你看到的每一個(gè)流行網(wǎng)站上。
另一方面，scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動(dòng)態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團(tuán)隊(duì)知道如何讓信息看起來(lái)更好:
Scrollytelling在用戶向下滾動(dòng)時(shí)被激活，因此得名。沒(méi)有點(diǎn)擊，沒(méi)有選擇的麻煩，沒(méi)有彈出窗口。你似乎停留在一個(gè)地方，但通過(guò)滾動(dòng)，把屏幕上的故事慢慢展開(kāi)。這不僅要求設(shè)計(jì)師創(chuàng)造出酷炫的視覺(jué)效果，還需要認(rèn)真思考一個(gè)你想要講述的故事情節(jié)。
所以，最好的網(wǎng)站不可能在2天內(nèi)建成，需要更多的時(shí)間去打磨。
IAmBinadam令人驚艷的敘述設(shè)計(jì)
滾動(dòng)敘事的項(xiàng)目通常需要大量的時(shí)間和精力。不過(guò)，這樣做的結(jié)果是值得的。頁(yè)面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時(shí)很難感到無(wú)聊。
那么移動(dòng)端APP呢? Pure是一款約會(huì)應(yīng)用（彩云注，這個(gè)應(yīng)用在app store可以搜到，推薦大家安裝一個(gè)體驗(yàn)一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事(當(dāng)你第一次點(diǎn)擊并打開(kāi)應(yīng)用時(shí)，它就會(huì)被激活):
Scrollytelling是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁(yè)面去閱讀整個(gè)故事。相反，網(wǎng)頁(yè)設(shè)計(jì)的整個(gè)故事都是事先考慮好的，并盡可能以最有趣的方式設(shè)計(jì)出來(lái)。
如何在2022年做出一個(gè)還不錯(cuò)的企業(yè)網(wǎng)站？你不會(huì)想告訴用戶你是“XX領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者，該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價(jià)值的信息。
最好不要用形容詞，而是用事實(shí)來(lái)說(shuō)明:你有多少分支機(jī)構(gòu)，在哪些城市，誰(shuí)是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡(jiǎn)單，而且有趣。
數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動(dòng)敘事（Scrollytelling）緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:
通過(guò)去除數(shù)據(jù)集的復(fù)雜性，使信息更容易讓讀者感知。
不同級(jí)別的數(shù)據(jù)具有不同的大小，這樣用戶知道應(yīng)該先從哪里查看
讀者可以很快注意到作者試圖通過(guò)圖片引出的結(jié)論?？紤]到如今人們消費(fèi)的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來(lái)的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對(duì)公司及其員工的長(zhǎng)期影響。根據(jù)英國(guó)國(guó)家統(tǒng)計(jì)局的數(shù)據(jù)，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來(lái)，得分已升至4.0/10，很少低于這一水平。同樣因?yàn)榇罅餍校谶^(guò)去兩年里工作量增加了4個(gè)小時(shí)。
人們壓力太大，卷的太辛苦，以至于不愿去看復(fù)雜的數(shù)據(jù)。
設(shè)計(jì)師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復(fù)雜的信息通常被忽略，因?yàn)樽x者試圖節(jié)省他們的時(shí)間，更有可能使用滾動(dòng)按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數(shù)據(jù)的方式
1）圖表和曲線圖
2）插圖
3）靜態(tài)信息圖
4）互動(dòng)信息圖
Illustration by Ink Factory
一個(gè)好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應(yīng)該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書(shū)中，Tufte通過(guò)圖表解釋了好圖表的3個(gè)原則：
1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于1。簡(jiǎn)單地說(shuō)，應(yīng)該刪除一切不必要的元素，保持整潔。
2）充分利用好畫(huà)面空間。也就是說(shuō)，需要將數(shù)據(jù)編排的更緊密
Graph by Hootsuite
3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來(lái)很酷，但真實(shí)永遠(yuǎn)是更重要的。
根據(jù)We Are Social的數(shù)據(jù)，2021年有52.2億人使用手機(jī)，約占世界人口的66%。自2020年1月以來(lái)，手機(jī)用戶數(shù)量增長(zhǎng)了1.8%(9300萬(wàn))，而手機(jī)聯(lián)網(wǎng)總數(shù)量增長(zhǎng)了7200萬(wàn)(0.9%)，到2021年初達(dá)到80.2億。
過(guò)去一年，社交媒體用戶的數(shù)量增長(zhǎng)了13%以上。到2021年初，社交網(wǎng)絡(luò)上已有近5億新用戶注冊(cè)。根據(jù)App Annie的數(shù)據(jù)，Android用戶每天花在手機(jī)上的時(shí)間超過(guò)4小時(shí)。2020年，安卓用戶上網(wǎng)時(shí)長(zhǎng)超過(guò)3.5萬(wàn)億小時(shí)。
令人印象深刻的數(shù)字，是嗎？似乎到2022年，為產(chǎn)品做一個(gè)APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用？有以下幾點(diǎn)可供評(píng)估：
1）用戶主要通過(guò)移動(dòng)設(shè)備訪問(wèn)你的網(wǎng)站這是你應(yīng)該了解的重要數(shù)據(jù)。
客戶和你在一起的時(shí)間越長(zhǎng)，你就有越多的機(jī)會(huì)去吸引他們，了解他們的習(xí)慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時(shí)長(zhǎng)。）
2）幫助內(nèi)部業(yè)務(wù)流程更加有效。
如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤(rùn)，那么就制作一個(gè)可以幫助管理業(yè)務(wù)流程的移動(dòng)應(yīng)用。
如今，像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來(lái)越復(fù)雜和多樣化的任務(wù)，加快日常重復(fù)操作和文檔管理。
3）實(shí)現(xiàn)一些網(wǎng)站上沒(méi)有的新功能。
如果你認(rèn)為APP能為用戶打開(kāi)新的觸點(diǎn)，并讓用戶體驗(yàn)更加友好，那么它就值得考慮開(kāi)發(fā)。問(wèn)問(wèn)自己的APP能提供什么新的商業(yè)機(jī)會(huì)？例如，隨著疫情的蔓延，許多人開(kāi)始用上健身APP在家里鍛煉。
4）競(jìng)爭(zhēng)對(duì)手做的情況。
要了解競(jìng)爭(zhēng)對(duì)手在做什么，他們是否有APP，能做什么，以及他們是否真的對(duì)用戶有用。
查看App Store和谷歌Play的統(tǒng)計(jì)數(shù)據(jù)。下載和評(píng)論的數(shù)量可以告訴你用戶是如何使用競(jìng)爭(zhēng)對(duì)手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要，那么你就容易被甩在后面。
5）復(fù)購(gòu)率。
一個(gè)應(yīng)用可以幫助你留住那些習(xí)慣從你那里購(gòu)買(mǎi)的人。如果想為老客戶開(kāi)展促銷活動(dòng)了，給他們發(fā)送一個(gè)通知就能完成，成本更低。
在正確的時(shí)間提供的報(bào)價(jià)越有吸引力，人們購(gòu)買(mǎi)的可能性就越大。
6）促銷工具。
有了應(yīng)用，你就不需要花錢(qián)設(shè)計(jì)和制作實(shí)體卡，客戶也不需要隨身帶卡。將促銷計(jì)劃整合到APP，并分享有用的促銷信息。
開(kāi)發(fā)手機(jī)網(wǎng)站比開(kāi)發(fā)手機(jī)應(yīng)用需要更少的工作量，這反過(guò)來(lái)可以降低整體推廣成本。
這部分是由于響應(yīng)式設(shè)計(jì)的出現(xiàn)，它允許你根據(jù)打開(kāi)網(wǎng)站的設(shè)備屏幕來(lái)調(diào)整網(wǎng)站。至于APP，它們必須為許多移動(dòng)平臺(tái)單獨(dú)編寫(xiě):Android、IOS、Windows等。
一些設(shè)計(jì)師認(rèn)為“前端驅(qū)動(dòng)的網(wǎng)絡(luò)體驗(yàn)”會(huì)是2022年的一個(gè)好機(jī)會(huì)，我非常同意!（彩云注：在國(guó)內(nèi)，現(xiàn)在開(kāi)發(fā)小程序的肯定越來(lái)越多了。）
我們一開(kāi)始并沒(méi)有將其放在首位，因?yàn)檫@并不是一個(gè)新的趨勢(shì)，在很久以前設(shè)計(jì)師們就已經(jīng)設(shè)計(jì)了很多3D圖像和動(dòng)畫(huà)了。
Cardi B rhymes with 3D
3D技術(shù)已經(jīng)在過(guò)去流行了很多年，但它不會(huì)很快消失。此外，我們預(yù)測(cè)3D圖形將變得更加多樣化和包容。
在過(guò)去的幾年里，3D藝術(shù)和動(dòng)畫(huà)已經(jīng)出現(xiàn)在各種UI設(shè)計(jì)趨勢(shì)評(píng)論中。這意味著越來(lái)越多的設(shè)計(jì)師將它們整合到頁(yè)面中。
3D當(dāng)然應(yīng)該成為2022年最熱門(mén)的趨勢(shì)和預(yù)測(cè)之一，因?yàn)榕c經(jīng)典動(dòng)畫(huà)相比，逼真的3D形狀結(jié)合動(dòng)畫(huà)總是引人注目的。
“從技術(shù)上講，通過(guò)3D更容易傳達(dá)更多內(nèi)容，因?yàn)樗绕矫鎴D片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動(dòng)性。"
許多設(shè)計(jì)師將3D對(duì)象無(wú)縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合，也作為一個(gè)優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。
烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國(guó)
注意一點(diǎn)：在整合3D圖形等重量級(jí)內(nèi)容之前，確保你的應(yīng)用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D?；蛘邇烧呒娑兄?這就是即將到來(lái)的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個(gè)概念在去年簡(jiǎn)直不要太火，未來(lái)幾年肯定還會(huì)是一個(gè)大的趨勢(shì)，設(shè)計(jì)師也需要保持關(guān)注。跟著趨勢(shì)走，易于放大自身價(jià)值。）
越來(lái)越多的公司在網(wǎng)站和移動(dòng)應(yīng)用中使用動(dòng)畫(huà)，以提高用戶的沉浸感和體驗(yàn)，使內(nèi)容更有趣。
動(dòng)畫(huà)是2022年重要的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)。2022年，如果沒(méi)有它，你的產(chǎn)品很可能會(huì)看起來(lái)就像個(gè)半成品。混合風(fēng)格的動(dòng)畫(huà)越來(lái)越受歡迎:定格動(dòng)畫(huà)和3D動(dòng)畫(huà)的結(jié)合，2D動(dòng)畫(huà)和3D動(dòng)畫(huà)的結(jié)合。設(shè)計(jì)師這樣做是為了獲得不同尋常的風(fēng)格解決方案，以及提高最終產(chǎn)品的質(zhì)量。
2022年，動(dòng)畫(huà)設(shè)計(jì)將是品牌市場(chǎng)定位的重要組成部分，想想一個(gè)公司新的視覺(jué)形象——?jiǎng)赢?huà)形象。隨著這個(gè)領(lǐng)域的專業(yè)設(shè)計(jì)師數(shù)量的增長(zhǎng)，實(shí)現(xiàn)新想法的機(jī)會(huì)也在增加。
1）講故事動(dòng)畫(huà)。
可以通過(guò)在界面和用戶之間建立情感聯(lián)系來(lái)傳達(dá)信息。
加載動(dòng)畫(huà)Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫(huà)面很有趣。帶有百分比的動(dòng)畫(huà)不僅可以分散用戶的注意力，還可以告知他們加載頁(yè)面需要多少時(shí)間。使用進(jìn)度條或者任何你能想到的可以顯示時(shí)間流逝的東西。
3）光標(biāo)效果。
用戶可以精確地觀察光標(biāo)所在的位置。通過(guò)添加智能互動(dòng)動(dòng)畫(huà)，對(duì)這個(gè)光標(biāo)作出反應(yīng)來(lái)探索網(wǎng)站。這種效果在21世紀(jì)初非常流行。如你所知，流行趨勢(shì)往往每20年就會(huì)重演一次。
4）動(dòng)態(tài)排版
你有沒(méi)有想過(guò)讓字母跳舞?
據(jù)Statista統(tǒng)計(jì)，2020年全球動(dòng)畫(huà)市場(chǎng)達(dá)到了2700億美元。趨勢(shì)是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動(dòng)畫(huà)制作廣告。毫無(wú)疑問(wèn)，動(dòng)畫(huà)插圖的優(yōu)勢(shì)是它們非常靈活和多樣化。
寶馬歷史動(dòng)畫(huà)
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動(dòng)畫(huà)解說(shuō)的趨勢(shì)出現(xiàn)在幾年前，解說(shuō)視頻清楚地顯示點(diǎn)擊的位置或公司的項(xiàng)目是關(guān)于什么的。
在招聘或商業(yè)視頻中，用戶更喜歡看畫(huà)出來(lái)的人物，而不是抽象的形狀或物品。畫(huà)出來(lái)的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺(jué)或聲音效果:它們顯示發(fā)生了什么，將導(dǎo)致什么操作，下一步需要做什么。
圖片來(lái)源awwards
動(dòng)畫(huà)交互將為你的設(shè)計(jì)注入活力，并有助于保持用戶粘性。關(guān)注每一個(gè)細(xì)節(jié)是設(shè)計(jì)師工作的關(guān)鍵，因?yàn)樵O(shè)計(jì)中的所有元素都可以帶來(lái)積極的用戶體驗(yàn)。
重要的是要達(dá)到元素的和諧，而不是把注意力分散到界面的各個(gè)方面。微交互作用的一個(gè)重要部分是顏色，它們?yōu)榻缑嬖卦鰪?qiáng)價(jià)值。
微交互有助于頁(yè)面導(dǎo)航，解釋它們的功能。最重要的方面之一是加快和簡(jiǎn)化以前冗長(zhǎng)的功能，以實(shí)現(xiàn)特定的行為。
2022年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動(dòng)畫(huà)logo設(shè)計(jì)。
圖片來(lái)源Toridori
動(dòng)畫(huà)logo主要有以下幾點(diǎn)營(yíng)銷優(yōu)勢(shì):
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動(dòng)態(tài)內(nèi)容，帶有動(dòng)態(tài)圖形的頁(yè)面更容易吸引用戶。
3）在移動(dòng)端看起來(lái)更好。絲滑的動(dòng)畫(huà)看起來(lái)比靜態(tài)的logo更有趣。
4）最重要的是展示了歷史。靜態(tài)logo背后的想法正在動(dòng)畫(huà)中發(fā)展。由于這一點(diǎn)，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價(jià)值!
一家洗衣機(jī)[公司]的標(biāo)志(https://www.schulthess.ch/)
現(xiàn)在有很多設(shè)計(jì)模板，可以很容易地用字體制作一個(gè)動(dòng)畫(huà)logo:
圖片來(lái)源Shabello, Bobby Voeten
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com