海淘科技跟您聊一聊優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征：
功用性動(dòng)畫(huà)是具有明確的、合乎邏輯的意圖的奇妙動(dòng)畫(huà)。它可以下降用戶在認(rèn)知上的負(fù)擔(dān)，阻止毫無(wú)預(yù)兆的改動(dòng)呈現(xiàn)，并在不相同頁(yè)面、元素、層級(jí)間建立起一套非常好的空間關(guān)系。還有主要的一點(diǎn)便是，動(dòng)畫(huà)運(yùn)用戶界面更契合實(shí)在。
經(jīng)過(guò)在用戶界面間游刃有余的呈現(xiàn)，并改動(dòng)它們的形狀和巨細(xì)，動(dòng)畫(huà)可以運(yùn)用戶界面散發(fā)出生氣。你應(yīng)當(dāng)在具有導(dǎo)航含義的上下文間切換時(shí)、在解釋頁(yè)面元素的狀況改動(dòng)時(shí)、在強(qiáng)化元素的層級(jí)關(guān)系時(shí)思考運(yùn)用合理的動(dòng)畫(huà)來(lái)完結(jié)這時(shí)期平滑的過(guò)渡。
成功的動(dòng)態(tài)規(guī)劃具有以下六個(gè)特征：
在UI規(guī)劃領(lǐng)域，視覺(jué)上的反應(yīng)是極其主要的，好的視覺(jué)反應(yīng)之所以起到作用是因?yàn)樗鹾狭舜蠹以谡J(rèn)知上的天然預(yù)期。想想看，在實(shí)在日子中，按鈕，控件和別的物品大都可以關(guān)于咱們的操作做出友愛(ài)的呼應(yīng)，而這種實(shí)在的體驗(yàn)也應(yīng)當(dāng)遷移到界面規(guī)劃中。
用戶界面應(yīng)當(dāng)精確的在用戶觸發(fā)動(dòng)作的當(dāng)?shù)丶皶r(shí)呼應(yīng)，并顯示出觸發(fā)的動(dòng)作或元素本身跟新界面間的聯(lián)絡(luò)。對(duì)用戶來(lái)講，可以在應(yīng)用程序中觸發(fā)必定操作后意識(shí)到發(fā)作了啥是非常棒的感受。
相關(guān)性是以新的辦法創(chuàng)建出那些在元素或動(dòng)作的作用下所觸發(fā)的新界面。相關(guān)性背面的邏輯是協(xié)助用戶了解剛剛在視圖規(guī)劃中發(fā)作的改動(dòng)以及觸發(fā)的源頭。
下面可以看到兩個(gè)關(guān)于菜單改變的比如。例1中，菜單呈現(xiàn)在遠(yuǎn)離觸發(fā)點(diǎn)的方位，這種辦法打破了兩者間的相關(guān)性。
在例2中，菜單便是從觸發(fā)點(diǎn)方位呈現(xiàn)，好似菜單和觸發(fā)點(diǎn)綁定在一同，其相關(guān)項(xiàng)顯而易見(jiàn)。
另一個(gè)比如是在特定條件下功用改動(dòng)的操作按鈕?！安ビ场? 和 ”暫停” 可能是最遍及的一個(gè)比如。 將播映按鈕變換為暫停按鈕意味著兩個(gè)動(dòng)作是相關(guān)的，在操作時(shí)按壓一個(gè)按鈕后就將閃現(xiàn)別的一個(gè)。你應(yīng)當(dāng)在一個(gè)動(dòng)作的不相同狀況間測(cè)驗(yàn)運(yùn)用這種過(guò)渡動(dòng)畫(huà)，使它看起來(lái)平滑而不失連續(xù)性。
防止呈現(xiàn)意外的改變。每一個(gè)動(dòng)作都應(yīng)當(dāng)能映射到實(shí)在國(guó)際中。在實(shí)在國(guó)際，一個(gè)物體加快或減速要首要取決于本身的分量和接觸面的摩擦力巨細(xì)。類似的，在一個(gè)用戶友愛(ài)的界面中，開(kāi)始和結(jié)束都不要是出人意料的。
下面是一個(gè)極好的比如，用戶挑選一個(gè)列表項(xiàng)后擴(kuò)大檢查其詳細(xì)信息，在卡片的拓展進(jìn)程中，本來(lái)的小卡片遵從了一條面向結(jié)尾的弧線型軌跡。
用戶引導(dǎo)應(yīng)當(dāng)在適宜的時(shí)刻呈現(xiàn)在適宜的地址。動(dòng)態(tài)改動(dòng)，因其實(shí)質(zhì)影響，在一個(gè)用戶界面中具有最高的吸引力。文本階段和靜態(tài)圖像都無(wú)法與其比較。一個(gè)規(guī)劃優(yōu)異的轉(zhuǎn)場(chǎng)能帶領(lǐng)用戶從一個(gè)交互到另一個(gè)交互。
關(guān)于一個(gè)菜鳥(niǎo)用戶，他常常不能猜測(cè)一個(gè)即將發(fā)作的交互動(dòng)作會(huì)是如何的，而適宜的動(dòng)畫(huà)則可以指引用戶且不會(huì)讓用戶覺(jué)得內(nèi)容的改動(dòng)太過(guò)俄然。
Mac OS在最小化窗口的時(shí)分運(yùn)用一個(gè)功用性的動(dòng)畫(huà)作用。這個(gè)動(dòng)畫(huà)將窗口的兩個(gè)狀況連接在了一同。
另一個(gè)極好的案例是下面這種父子層級(jí)間的轉(zhuǎn)場(chǎng)，用戶挑選了一個(gè)列表項(xiàng)或者卡片元素，然后經(jīng)由動(dòng)畫(huà)辦法打開(kāi)其詳細(xì)信息的視圖。這么的轉(zhuǎn)場(chǎng)作用答應(yīng)了用戶在改動(dòng)前后堅(jiān)持上下文聯(lián)絡(luò)。
元素在不相同的方位或狀況間改變時(shí)，其運(yùn)動(dòng)應(yīng)當(dāng)滿足快到不用讓用戶等候，但一起也要滿足緩慢好讓用戶可以了解這個(gè)進(jìn)程(迅速的一起確保用戶了解)。
不要讓動(dòng)畫(huà)太慢，好像是產(chǎn)生了不用要的延遲得讓用戶等候相同。
減緩許多元素的改動(dòng)速度會(huì)延伸全體動(dòng)態(tài)改動(dòng)的時(shí)刻。
讓你的動(dòng)畫(huà)滿足快確保用戶不用等候這個(gè)進(jìn)程的逐步完結(jié)。
想想看，許多轉(zhuǎn)場(chǎng)用戶是會(huì)頻繁看到的，你必定要讓這個(gè)進(jìn)程夠快，別讓用戶總是等。這個(gè)時(shí)刻應(yīng)當(dāng)控制在300ms以下。
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)應(yīng)當(dāng)防止一次性做太多工作，試想在有多個(gè)項(xiàng)目需求朝不相同方向或不相同途徑移動(dòng)時(shí)，看上去不紊亂才怪。
轉(zhuǎn)場(chǎng)應(yīng)當(dāng)明晰、簡(jiǎn)略而連接共同。關(guān)于動(dòng)畫(huà)而言，少便是多。因而咱們應(yīng)當(dāng)重視于對(duì)用戶起到實(shí)用性作用的動(dòng)畫(huà)作用。
最終主要的一點(diǎn)是，動(dòng)態(tài)改動(dòng)絕不是隨機(jī)的，每一個(gè)動(dòng)作的背面必定有其實(shí)踐意圖。它協(xié)助指引用戶重視于那些主要的當(dāng)?shù)囟恢劣诿允ё詡€(gè)。不論你的應(yīng)用程序是風(fēng)趣好玩的仍是嚴(yán)厲直接的，運(yùn)用適宜的動(dòng)態(tài)規(guī)劃設(shè)計(jì)準(zhǔn)則必將可以幫你向用戶供給一個(gè)潔凈而富粘性的用戶體驗(yàn)。
