我們不能不談?wù)撍淖嫦?Flash 就談?wù)?Motion UI。這種積累已經(jīng)持續(xù)了 8 年之久，然后就這樣，在 2022 年 1 月 12 日，Adobe 終于殺死了 Flash。 在全球范圍內(nèi)，在 2000 年代初期經(jīng)歷了 Flash 史詩(shī)般崛起的大批老派創(chuàng)意人士發(fā)出了感慨的嘆息。該死的那些 Flash 安全風(fēng)險(xiǎn)。

什么是Motion UI?

好的設(shè)計(jì)是網(wǎng)站或應(yīng)用程序的重要方面。這些很重要，因?yàn)樗兄诮⒘己玫挠脩?hù)界面。過(guò)渡和動(dòng)畫(huà)是很好的工具，可以幫助為Web帶來(lái)急需的優(yōu)雅。早期使用靜態(tài)設(shè)計(jì)，但現(xiàn)在運(yùn)動(dòng)設(shè)計(jì)非常流行。將這些過(guò)渡和動(dòng)畫(huà)引入網(wǎng)絡(luò)的一種方法是ZURB Studios。 ZURB從事制作出色的Web設(shè)計(jì)軟件已經(jīng)有一段時(shí)間了，最常見(jiàn)的軟件之一就是Motion UI。 Motion UI是ZURB自己的Sass庫(kù)，除了為您的平臺(tái)提供動(dòng)態(tài)過(guò)渡和動(dòng)畫(huà)外，不提供其他任何功能。這兩種效果都專(zhuān)門(mén)結(jié)合到了Motion UI中，這有助于使動(dòng)畫(huà)處理變得異常快捷和高效。

具有諷刺意味的是，F(xiàn)lash 是網(wǎng)絡(luò)上電影質(zhì)量的運(yùn)動(dòng)和動(dòng)畫(huà)的原始推動(dòng)者，并且在當(dāng)時(shí)是最終推動(dòng)者。在 Flash 中設(shè)計(jì)意味著擺脫了設(shè)計(jì)社區(qū)的束縛，讓創(chuàng)造力不受阻礙地蓬勃發(fā)展，網(wǎng)絡(luò)上充滿(mǎn)了引人注目的東西，品牌 Flash 的“啟動(dòng)頁(yè)面”無(wú)處不在。

實(shí)際上，F(xiàn)lash 的消亡是一段緩慢而痛苦的經(jīng)歷——史蒂夫·喬布斯在 2007 年推出了不支持 Flash 的 iPhone 時(shí)給棺材釘了第一顆釘子。從那時(shí)起，Adobe 一直在悄悄地為該插件提供生命支持，而更廣泛的網(wǎng)頁(yè)設(shè)計(jì)社區(qū)——意識(shí)到即將發(fā)生的事情——逐漸過(guò)渡到使用 HTML5。

在接下來(lái)的十年里，動(dòng)作設(shè)計(jì)和動(dòng)畫(huà)變得成熟并變得更加成熟。設(shè)計(jì)師們從浪費(fèi)帶寬（通常毫無(wú)意義）的過(guò)渡和動(dòng)畫(huà)的派對(duì)時(shí)代發(fā)展到今天——人們普遍認(rèn)為，運(yùn)動(dòng)設(shè)計(jì)應(yīng)該有節(jié)制地使用，并最終為最終用戶(hù)提供功能效用。

什么是動(dòng)態(tài) UI？
-

Motion UI 是利用界面內(nèi)的運(yùn)動(dòng)和動(dòng)畫(huà)來(lái)幫助引導(dǎo)用戶(hù)體驗(yàn)并傳達(dá)數(shù)字產(chǎn)品的序列、下一步、過(guò)渡或操作的藝術(shù)。動(dòng)作也被廣泛用作品牌工具，加強(qiáng)我們可能與特定品牌相關(guān)聯(lián)的視覺(jué)提示和互動(dòng)。

作為人類(lèi)，我們的大腦天生就對(duì)運(yùn)動(dòng)做出反應(yīng)。這是我們戰(zhàn)斗或逃跑反應(yīng)的一部分，也是為什么連接到大腦的所有神經(jīng)纖維中有 40% 以上都與視網(wǎng)膜相連的原因。當(dāng)我們使用周邊視覺(jué)來(lái)辨別危險(xiǎn)和保護(hù)自己時(shí)，它非常有用。當(dāng)我們的眼睛被網(wǎng)站上毫無(wú)意義的動(dòng)作和動(dòng)畫(huà)所吸引時(shí)，這只會(huì)降低功能性用戶(hù)體驗(yàn)，這真是太煩人了。

今天的運(yùn)動(dòng)用戶(hù)界面
-

從使用標(biāo)簽（橫向滾動(dòng)文本）在網(wǎng)絡(luò)上開(kāi)始的動(dòng)作<marquee> 到今天日常網(wǎng)頁(yè)設(shè)計(jì)師使用的電影質(zhì)量的動(dòng)作 UI 框架，動(dòng)作已經(jīng)成為在整個(gè)網(wǎng)絡(luò)中提供參與和交互的最重要的工具之一。網(wǎng)。

如今，大多數(shù) Web 界面運(yùn)動(dòng)是通過(guò)瀏覽器控制的，利用 CSS、HTML5 和 JavaScript 框架。這否定了需要進(jìn)行3次三方插件或視頻播放器，以顯示運(yùn)動(dòng)和動(dòng)畫(huà)。

隨著平臺(tái)和品牌之間的在線(xiàn)爭(zhēng)奪戰(zhàn)在爭(zhēng)奪我們的注意力方面愈演愈烈，利用運(yùn)動(dòng)和動(dòng)畫(huà)來(lái)消除網(wǎng)絡(luò)噪音的需求從未如此重要。當(dāng)有限制地使用時(shí)，Motion UI 是美麗用戶(hù)體驗(yàn)的強(qiáng)大推動(dòng)者，可以將平面、靜態(tài)的交互轉(zhuǎn)變?yōu)榕c品牌深度互動(dòng)的難忘時(shí)刻。

許多著迷于出色用戶(hù)體驗(yàn)的先驅(qū)品牌已經(jīng)發(fā)布了自己的設(shè)計(jì)指南，其中包含圍繞運(yùn)動(dòng)的標(biāo)準(zhǔn)和最佳實(shí)踐，包括 Google 的 Material Design、Apple 的 人機(jī)界面指南 和 來(lái)自 AirBNB的令人難以置信的以運(yùn)動(dòng)為中心的 Lottie 框架。這些指南旨在將優(yōu)秀設(shè)計(jì)的經(jīng)典原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合。它最終是關(guān)于提供跨平臺(tái)和設(shè)備的統(tǒng)一體驗(yàn)。

通過(guò)動(dòng)作講故事

-

動(dòng)作可用于講述故事和喚起情感。講故事是提高在線(xiàn)參與度的有效方式，但從本質(zhì)上講，故事只是一系列事件。作為數(shù)字專(zhuān)家，我們努力為網(wǎng)站用戶(hù)提供最直觀(guān)的故事，而動(dòng)作是完美的指南。用動(dòng)作和動(dòng)畫(huà)講故事可以創(chuàng)造出非常美觀(guān)的時(shí)刻，同時(shí)也能增強(qiáng)令人難以置信的功能性用戶(hù)體驗(yàn)。

Motion UI 可以在用戶(hù)如何與數(shù)字平臺(tái)互動(dòng)方面發(fā)揮重要作用；我們的眼睛跟隨運(yùn)動(dòng)，我們本能地尋找視覺(jué)線(xiàn)索和敘述。我們還知道，運(yùn)動(dòng)比靜態(tài)圖像更容易讓游客難忘，因此我們不僅可以將其用于文本和形狀等簡(jiǎn)單的視覺(jué)元素，還可以帶人們踏上旅程，通過(guò)運(yùn)動(dòng)序列讓他們的視覺(jué)感受器參與進(jìn)來(lái)更好地傳達(dá)更令人難忘的想法。

通過(guò) Motion 進(jìn)行微交互

-

微交互是與用戶(hù)界面交互的那些微妙的、特定的時(shí)刻，它將體驗(yàn)與用戶(hù)應(yīng)該采取的下一個(gè)最佳步驟聯(lián)系起來(lái)。這可能意味著點(diǎn)擊漢堡菜單圖標(biāo)以下拉導(dǎo)航、向左或向右滑動(dòng)或打開(kāi)或關(guān)閉控件。運(yùn)動(dòng)使這些交互感覺(jué)更加有機(jī)且不那么突然。

“微交互是一種克制的練習(xí)，用盡可能少的方式做盡可能多的事情。接受限制，將注意力集中在做好一件事上?！?（Dan Saffer，微交互作者）

如果實(shí)施得當(dāng)，由動(dòng)作和動(dòng)畫(huà)實(shí)現(xiàn)的微交互幾乎不會(huì)被用戶(hù)注意到——直到用戶(hù)面臨他們?nèi)毕膯?wèn)題。微交互的其他示例包括動(dòng)畫(huà)按鈕、開(kāi)關(guān)、系統(tǒng)狀態(tài)動(dòng)畫(huà)、負(fù)載指示器和其他通知。

微交互有助于提高產(chǎn)品的整體可用性。它們通知用戶(hù)任務(wù)已成功完成；按鈕已按下，開(kāi)關(guān)已移動(dòng)或所需的表單字段已填寫(xiě)。

用動(dòng)作創(chuàng)造預(yù)期

-

預(yù)期設(shè)計(jì)意味著創(chuàng)建一個(gè)界面，在用戶(hù)實(shí)際表達(dá)這些需求之前一步響應(yīng)他們的需求。Motion UI 是一個(gè)出色的工具，可以通知用戶(hù)并突出顯示元素、操作可用性和操作結(jié)果之間的關(guān)系。

Motion 有助于引導(dǎo)訪(fǎng)問(wèn)者瀏覽整個(gè)網(wǎng)站或應(yīng)用程序體驗(yàn)，通過(guò)移動(dòng)和動(dòng)畫(huà)直觀(guān)地傳達(dá)關(guān)注的位置、下一步做什么以及頁(yè)面上最重要的元素是什么。

Motion 建立對(duì)兩個(gè)元素之間流動(dòng)的理解，可用于導(dǎo)航、元素轉(zhuǎn)換、功能更改和其他效果之間的層次結(jié)構(gòu)和連接。Motion 用于保持注意力等待頁(yè)面加載，從而產(chǎn)生速度錯(cuò)覺(jué)，使用戶(hù)更有可能耐心等待頁(yè)面內(nèi)容顯示。

通過(guò) Motion 使數(shù)據(jù)栩栩如生

-

對(duì)于我們大多數(shù)人來(lái)說(shuō)，數(shù)據(jù)（最純粹的零和一形式）在視覺(jué)上沒(méi)有什么啟發(fā)性。當(dāng)?shù)谝淮卧谄聊簧铣尸F(xiàn)給我們時(shí)，我們的大腦不會(huì)本能地努力嘗試處理復(fù)雜的表格和數(shù)字。對(duì)于大多數(shù)人來(lái)說(shuō)，很難對(duì)屏幕上的表格數(shù)據(jù)感到興奮。

進(jìn)入運(yùn)動(dòng)用戶(hù)界面。用運(yùn)動(dòng)可視化數(shù)據(jù)既提供了美學(xué)上的滿(mǎn)足感，又提供了解釋性的可用性，從本質(zhì)上將數(shù)據(jù)帶入了生活。數(shù)據(jù)可以用形狀、顏色和漸變表示，通過(guò)豐富的數(shù)據(jù)可視化和動(dòng)態(tài)移動(dòng)為表格布局注入活力。

品牌認(rèn)知度

-

Motion UI 最有效的用途之一是加強(qiáng)品牌認(rèn)知度。許多先鋒品牌使用 Motion UI 為其界面添加一層識(shí)別和深度，喚起本能的品牌回憶并產(chǎn)生比通過(guò)靜態(tài)圖像實(shí)現(xiàn)的更高的情感反應(yīng)。動(dòng)效設(shè)計(jì)確保數(shù)字交互與品牌保持一致并與消費(fèi)者產(chǎn)生共鳴。它本質(zhì)上是通過(guò)一致的用戶(hù)體驗(yàn)向消費(fèi)者傳達(dá)連貫的品牌敘事的一種方式。

總之

-

那么，這種更現(xiàn)代的對(duì)實(shí)用性和功能性的關(guān)注是否意味著使用動(dòng)作在網(wǎng)絡(luò)上創(chuàng)造史詩(shī)般的視覺(jué)效果和有影響力的視覺(jué)體驗(yàn)的輝煌時(shí)代已經(jīng)結(jié)束——或者仍然有機(jī)會(huì)利用 Motion UI 來(lái)驚喜和取悅訪(fǎng)問(wèn)者，而無(wú)需通過(guò)花哨的干擾減少用戶(hù)體驗(yàn)？

答案是，運(yùn)動(dòng) 是 未來(lái)的網(wǎng)絡(luò)體驗(yàn)是絕對(duì)關(guān)鍵的，應(yīng)由設(shè)計(jì)師用來(lái)呼吸的生活進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)的靜態(tài)和單調(diào)的世界。一旦基本用戶(hù)需求得到滿(mǎn)足并且數(shù)字產(chǎn)品按預(yù)期（或更好）工作，運(yùn)動(dòng)就是最終放大器和促進(jìn)品牌與客戶(hù)之間積極、長(zhǎng)期關(guān)系的推動(dòng)因素。