網(wǎng)站建設(shè)中優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征發(fā)布者：本站     時(shí)間：2022-05-08 10:05:21

功能性動(dòng)畫(huà)是具有明確的、合乎邏輯的目的的微妙動(dòng)畫(huà)。它能夠降低用戶(hù)在認(rèn)知上的負(fù)擔(dān)，阻止毫無(wú)征兆的變化出現(xiàn)，并在不同頁(yè)面、元素、層級(jí)間建立起一套更好的空間關(guān)系。還有重要的一點(diǎn)就是，動(dòng)畫(huà)使用戶(hù)界面更符合真實(shí)。

通過(guò)在用戶(hù)界面間游刃有余的出現(xiàn)，并改變它們的形狀和大小，動(dòng)畫(huà)可以使用戶(hù)界面散發(fā)出生氣。你應(yīng)該在具有導(dǎo)航意義的上下文間切換時(shí)、在解釋頁(yè)面元素的狀態(tài)變化時(shí)、在強(qiáng)化元素的層級(jí)關(guān)系時(shí)考慮使用合理的動(dòng)畫(huà)來(lái)完成這期間平滑的過(guò)渡。

成功的動(dòng)態(tài)設(shè)計(jì)具有以下六個(gè)特征：

1、應(yīng)答式的
在UI設(shè)計(jì)領(lǐng)域，視覺(jué)上的反饋是極其重要的，好的視覺(jué)反饋之所以起到作用是因?yàn)樗狭巳藗冊(cè)谡J(rèn)知上的自然預(yù)期。想想看，在真實(shí)生活中，按鈕，控件和其他物品大都能夠針對(duì)我們的操作做出友好的響應(yīng)，而這種真實(shí)的體驗(yàn)也應(yīng)該遷移到界面設(shè)計(jì)中。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

用戶(hù)界面應(yīng)該精確的在用戶(hù)觸發(fā)動(dòng)作的地方及時(shí)響應(yīng)，并顯示出觸發(fā)的動(dòng)作或元素本身跟新界面間的聯(lián)系。對(duì)用戶(hù)來(lái)講，能夠在應(yīng)用程序中觸發(fā)一定操作后意識(shí)到發(fā)生了什么是非常棒的感覺(jué)。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

2、關(guān)聯(lián)的
關(guān)聯(lián)性是以新的方式創(chuàng)建出那些在元素或動(dòng)作的作用下所觸發(fā)的新界面。關(guān)聯(lián)性背后的邏輯是幫助用戶(hù)理解剛剛在視圖布局中發(fā)生的變化以及觸發(fā)的源頭。

下面可以看到兩個(gè)關(guān)于菜單轉(zhuǎn)變的例子。例1中，菜單出現(xiàn)在遠(yuǎn)離觸發(fā)點(diǎn)的位置，這種方式打破了兩者間的關(guān)聯(lián)性。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

在例2中，菜單就是從觸發(fā)點(diǎn)位置出現(xiàn)，恰似菜單和觸發(fā)點(diǎn)綁定在一起，其關(guān)聯(lián)項(xiàng)不言而喻。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

另一個(gè)例子是在特定條件下功能變化的操作按鈕?！安シ拧?和 ”暫?！?可能是最普遍的一個(gè)例子。 將播放按鈕變換為暫停按鈕意味著兩個(gè)動(dòng)作是關(guān)聯(lián)的，在操作時(shí)按壓一個(gè)按鈕后就將顯現(xiàn)另外一個(gè)。你應(yīng)該在一個(gè)動(dòng)作的不同狀態(tài)間嘗試使用這種過(guò)渡動(dòng)畫(huà)，使它看起來(lái)平滑而不失連續(xù)性。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

3、自然的
避免出現(xiàn)意外的轉(zhuǎn)變。每一個(gè)動(dòng)作都應(yīng)該能映射到真實(shí)世界中。在真實(shí)世界，一個(gè)物體加速或減速要主要取決于自身的重量和接觸面的摩擦力大小。類(lèi)似的，在一個(gè)用戶(hù)友好的界面中，開(kāi)始和結(jié)束都不要是突如其來(lái)的。

下面是一個(gè)很好的例子，用戶(hù)選擇一個(gè)列表項(xiàng)后放大查看其詳細(xì)信息，在卡片的擴(kuò)展過(guò)程中，原本的小卡片遵循了一條面向終點(diǎn)的弧線型軌跡。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

4、 有意的
用戶(hù)引導(dǎo)應(yīng)該在合適的時(shí)間出現(xiàn)在合適的地點(diǎn)。動(dòng)態(tài)變化，因其本質(zhì)影響，在一個(gè)用戶(hù)界面中擁有最高的吸引力。文本段落和靜態(tài)圖像都無(wú)法與其相比。一個(gè)設(shè)計(jì)優(yōu)秀的轉(zhuǎn)場(chǎng)能帶領(lǐng)用戶(hù)從一個(gè)交互到另一個(gè)交互。

對(duì)于一個(gè)新手用戶(hù)，他常常不能預(yù)測(cè)一個(gè)將要發(fā)生的交互動(dòng)作會(huì)是怎樣的，而合適的動(dòng)畫(huà)則能夠指引用戶(hù)且不會(huì)讓用戶(hù)覺(jué)得內(nèi)容的變化太過(guò)突然。

Mac OS在最小化窗口的時(shí)候使用一個(gè)功能性的動(dòng)畫(huà)效果。這個(gè)動(dòng)畫(huà)將窗口的兩個(gè)狀態(tài)連接在了一起。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

另一個(gè)很好的案例是下面這種父子層級(jí)間的轉(zhuǎn)場(chǎng)，用戶(hù)選擇了一個(gè)列表項(xiàng)或者卡片元素，然后經(jīng)由動(dòng)畫(huà)方法展開(kāi)其詳細(xì)信息的視圖。這樣的轉(zhuǎn)場(chǎng)效果允許了用戶(hù)在變化前后保持上下文聯(lián)系。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

5、快速的
元素在不同的位置或狀態(tài)間轉(zhuǎn)變時(shí)，其運(yùn)動(dòng)應(yīng)該足夠快到不用讓用戶(hù)等待，但同時(shí)也要足夠緩慢好讓用戶(hù)能夠理解這個(gè)過(guò)程（快速的同時(shí)保證用戶(hù)理解）。

不要讓動(dòng)畫(huà)太慢，好像是產(chǎn)生了不必要的延遲得讓用戶(hù)等待一樣。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

減緩許多元素的變化速度會(huì)延長(zhǎng)整體動(dòng)態(tài)變化的時(shí)間。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

讓你的動(dòng)畫(huà)足夠快保證用戶(hù)不必等待這個(gè)過(guò)程的逐漸完成。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

想想看，很多轉(zhuǎn)場(chǎng)用戶(hù)是會(huì)頻繁看到的，你一定要讓這個(gè)過(guò)程夠快，別讓用戶(hù)總是等。這個(gè)時(shí)間應(yīng)該控制在300ms以下。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

6、干凈的
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)應(yīng)該避免一次性做太多事情，試想在有多個(gè)項(xiàng)目需要朝不同方向或不同路徑移動(dòng)時(shí)，看上去不混亂才怪。

優(yōu)秀動(dòng)態(tài)設(shè)計(jì)的6個(gè)特征

轉(zhuǎn)場(chǎng)應(yīng)該清晰、簡(jiǎn)單而連貫一致。對(duì)于動(dòng)畫(huà)而言，少即是多。因此我們應(yīng)該關(guān)注于對(duì)用戶(hù)起到實(shí)用性作用的動(dòng)畫(huà)效果。