創(chuàng)新互聯(lián)跟您聊一聊優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征：

功用性動(dòng)畫是具有明確的、合乎邏輯的意圖的奇妙動(dòng)畫。它可以下降用戶在認(rèn)知上的負(fù)擔(dān)，阻止毫無預(yù)兆的改動(dòng)呈現(xiàn)，并在不相同頁面、元素、層級(jí)間建立起一套非常好的空間關(guān)系。還有主要的一點(diǎn)便是，動(dòng)畫運(yùn)用戶界面更契合實(shí)在。

經(jīng)過在用戶界面間游刃有余的呈現(xiàn)，并改動(dòng)它們的形狀和巨細(xì)，動(dòng)畫可以運(yùn)用戶界面散發(fā)出生氣。你應(yīng)當(dāng)在具有導(dǎo)航含義的上下文間切換時(shí)、在解釋頁面元素的狀況改動(dòng)時(shí)、在強(qiáng)化元素的層級(jí)關(guān)系時(shí)思考運(yùn)用合理的動(dòng)畫來完結(jié)這時(shí)期平滑的過渡。

成功的動(dòng)態(tài)規(guī)劃具有以下六個(gè)特征：

1、應(yīng)對(duì)式的

在UI規(guī)劃領(lǐng)域，視覺上的反應(yīng)是極其主要的，好的視覺反應(yīng)之所以起到作用是因?yàn)樗鹾狭舜蠹以谡J(rèn)知上的天然預(yù)期。想想看，在實(shí)在日子中，按鈕，控件和別的物品大都可以關(guān)于咱們的操作做出友愛的呼應(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ì)用戶來講，可以在應(yīng)用程序中觸發(fā)必定操作后意識(shí)到發(fā)作了啥是非常棒的感受。

2、相關(guān)的

相關(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)顯而易見。

另一個(gè)比如是在特定條件下功用改動(dòng)的操作按鈕?！安ビ场? 和 ”暫?！?可能是最遍及的一個(gè)比如。 將播映按鈕變換為暫停按鈕意味著兩個(gè)動(dòng)作是相關(guān)的，在操作時(shí)按壓一個(gè)按鈕后就將閃現(xiàn)別的一個(gè)。你應(yīng)當(dāng)在一個(gè)動(dòng)作的不相同狀況間測驗(yàn)運(yùn)用這種過渡動(dòng)畫，使它看起來平滑而不失連續(xù)性。

3、天然的

防止呈現(xiàn)意外的改變。每一個(gè)動(dòng)作都應(yīng)當(dāng)能映射到實(shí)在國際中。在實(shí)在國際，一個(gè)物體加快或減速要首要取決于本身的分量和接觸面的摩擦力巨細(xì)。類似的，在一個(gè)用戶友愛的界面中，開始和結(jié)束都不要是出人意料的。

下面是一個(gè)極好的比如，用戶挑選一個(gè)列表項(xiàng)后擴(kuò)大檢查其詳細(xì)信息，在卡片的拓展進(jìn)程中，本來的小卡片遵從了一條面向結(jié)尾的弧線型軌跡。

4、 有意的

用戶引導(dǎo)應(yīng)當(dāng)在適宜的時(shí)刻呈現(xiàn)在適宜的地址。動(dòng)態(tài)改動(dòng)，因其實(shí)質(zhì)影響，在一個(gè)用戶界面中具有高的吸引力。文本階段和靜態(tài)圖像都無法與其比較。一個(gè)規(guī)劃優(yōu)異的轉(zhuǎn)場能帶領(lǐng)用戶從一個(gè)交互到另一個(gè)交互。

關(guān)于一個(gè)菜鳥用戶，他常常不能猜測一個(gè)即將發(fā)作的交互動(dòng)作會(huì)是如何的，而適宜的動(dòng)畫則可以指引用戶且不會(huì)讓用戶覺得內(nèi)容的改動(dòng)太過俄然。

Mac OS在最小化窗口的時(shí)分運(yùn)用一個(gè)功用性的動(dòng)畫作用。這個(gè)動(dòng)畫將窗口的兩個(gè)狀況連接在了一同。

另一個(gè)極好的案例是下面這種父子層級(jí)間的轉(zhuǎn)場，用戶挑選了一個(gè)列表項(xiàng)或者卡片元素，然后經(jīng)由動(dòng)畫辦法打開其詳細(xì)信息的視圖。這么的轉(zhuǎn)場作用答應(yīng)了用戶在改動(dòng)前后堅(jiān)持上下文聯(lián)絡(luò)。

5、迅速的

元素在不相同的方位或狀況間改變時(shí)，其運(yùn)動(dòng)應(yīng)當(dāng)滿足快到不用讓用戶等候，但一起也要滿足緩慢好讓用戶可以了解這個(gè)進(jìn)程(迅速的一起確保用戶了解)。

不要讓動(dòng)畫太慢，好像是產(chǎn)生了不用要的延遲得讓用戶等候相同。

減緩許多元素的改動(dòng)速度會(huì)延伸全體動(dòng)態(tài)改動(dòng)的時(shí)刻。

讓你的動(dòng)畫滿足快確保用戶不用等候這個(gè)進(jìn)程的逐步完結(jié)。

想想看，許多轉(zhuǎn)場用戶是會(huì)頻繁看到的，你必定要讓這個(gè)進(jìn)程夠快，別讓用戶總是等。這個(gè)時(shí)刻應(yīng)當(dāng)控制在300ms以下。

6、潔凈的

轉(zhuǎn)場動(dòng)畫應(yīng)當(dāng)防止一次性做太多工作，試想在有多個(gè)項(xiàng)目需求朝不相同方向或不相同途徑移動(dòng)時(shí)，看上去不紊亂才怪。

轉(zhuǎn)場應(yīng)當(dāng)明晰、簡略而連接共同。關(guān)于動(dòng)畫而言，少便是多。因而咱們應(yīng)當(dāng)重視于對(duì)用戶起到實(shí)用性作用的動(dòng)畫作用。

定論

最終主要的一點(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)。

網(wǎng)站標(biāo)題：設(shè)計(jì)資訊干貨之優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征
本文路徑：http://jinyejixie.com/news8/171908.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、自適應(yīng)網(wǎng)站、服務(wù)器托管、App開發(fā)、面包屑導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)