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

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

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

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

1、應(yīng)對式的

在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)?shù)丶皶r呼應(yīng)，并顯示出觸發(fā)的動作或元素本身跟新界面間的聯(lián)絡(luò)。對用戶來講，可以在應(yīng)用程序中觸發(fā)必定操作后意識到發(fā)作了啥是非常棒的感受。

2、相關(guān)的

相關(guān)性是以新的辦法創(chuàng)建出那些在元素或動作的作用下所觸發(fā)的新界面。相關(guān)性背面的邏輯是協(xié)助用戶了解剛剛在視圖規(guī)劃中發(fā)作的改動以及觸發(fā)的源頭。

下面可以看到兩個關(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)顯而易見。

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

3、天然的

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

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

4、 有意的

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

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

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

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

5、迅速的

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

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

減緩許多元素的改動速度會延伸全體動態(tài)改動的時刻。

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

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

6、潔凈的

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

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

定論

最終主要的一點(diǎn)是，動態(tài)改動絕不是隨機(jī)的，每一個動作的背面必定有其實(shí)踐意圖。它協(xié)助指引用戶重視于那些主要的當(dāng)?shù)囟恢劣诿允ё詡€。不論你的應(yīng)用程序是風(fēng)趣好玩的仍是嚴(yán)厲直接的，運(yùn)用適宜的動態(tài)規(guī)劃設(shè)計準(zhǔn)則必將可以幫你向用戶供給一個潔凈而富粘性的用戶體驗(yàn)。

網(wǎng)站標(biāo)題：設(shè)計資訊干貨之優(yōu)秀動態(tài)設(shè)計的6個特征
本文路徑：http://m.newbst.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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)