欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

UI設(shè)計視頻教程之需要了解知道的七個UI動效技巧

2018-04-09 14:19:03 3012瀏覽

交互設(shè)計的作用是展示不同狀態(tài)之間的連續(xù)性、闡述共享元素之間的關(guān)系、將用戶的注意力吸引到他們應(yīng)該注意或者需要操作的元素上來。

一、讓標(biāo)簽下的內(nèi)容滑動起來

圖左是將新標(biāo)簽下的內(nèi)容直接覆蓋上來；

圖右是將新標(biāo)簽下的內(nèi)容自然地從左/右滑動進(jìn)來。

◆一般的內(nèi)容切換動效是將標(biāo)簽下對應(yīng)的內(nèi)容直接覆蓋展現(xiàn)或者消失變沒。

◆卓越的內(nèi)容切換動效會將不同單元的轉(zhuǎn)換過渡非常流暢地展現(xiàn)出來。

當(dāng)你設(shè)計一個標(biāo)簽或者飛出式菜單的交互時，試著擺放一下其對應(yīng)打開的內(nèi)容的位置。

這樣你不但可以保證交互動效中內(nèi)容的可見性，也可以確定內(nèi)容出場/消失的起止位置。

最后，添加滑動的效果，讓內(nèi)容從一個單元切換到另一個單元呈現(xiàn)出順滑的過程。

二、鏈接共享一張卡片的元素

圖左打開的內(nèi)容呈以上滑的方式打開了一個新的頁面；

圖右的卡片則是拉伸并鋪滿了真?zhèn)€屏幕。

◆一般的動效基本上是采用向左推動或者向上滑動等過渡形式推出一整屏的內(nèi)容。

◆卓越的動效則是在共享元素上做文章，通過共享的元素建立兩個單元的自然鏈接。

在做鏈接多單元的動效時，觀察一下，在它們之間是否有共享的元素，或者它們中間有沒有其他的鏈接。

三、在你的目錄中使用層級效果

圖左的目錄直接便完整出現(xiàn)了；

圖右目錄出現(xiàn)的動效是一樣的，但是每個卡片出現(xiàn)呈層級延遲出現(xiàn)。

◆一般的動效是在新頁面或者新單元進(jìn)入屏幕時改變其整體的位置或者不透明度。

◆卓越的動效則在每一組甚至每一個元素上做文章，讓它們有序且快速地出現(xiàn)在屏幕中。

要實現(xiàn)這種瀑布效果，需要將每一組元素的進(jìn)場時間做延遲。保持一致的間隔和持續(xù)時間，因此它們看起來很和諧。

但是，不要每一個小小的元素都做這種效果，將元素分組，類似目錄卡片那樣就好。

萬事過猶不及，我們還要保證動效的干凈利落。Google建議每組元素之間的間隔不要超過20毫秒。

四、讓新展出的內(nèi)容將其他內(nèi)容推出屏幕


圖左的動效是新打開內(nèi)容直接覆蓋在其他元素上；

圖右的動效是新打開的內(nèi)容在展開的同時把其他元素推出了屏幕。

◆一般的動效是單純移動、展示出現(xiàn)的元素；

◆卓越的動效則會呈現(xiàn)出，當(dāng)一個元素出現(xiàn)或者發(fā)生改變時，它對周邊其他元素產(chǎn)生了怎樣的影響。

在設(shè)計的過程中注意元素周邊的環(huán)境，也就是說，讓你設(shè)計中的元素的變化去影響周邊元素的變化。

五、讓你的菜單從特定環(huán)境中出現(xiàn)


圖左的菜單是從底部飛上來的；

圖右的菜單是從觸發(fā)的按鈕位置延展出來的。

◆一般的菜單動效，其內(nèi)容是在按鈕觸發(fā)后直接從某個特性方向進(jìn)場。

◆卓越的菜單動效，其內(nèi)容是由觸發(fā)按鈕這一個點擴展出來的。

六.用按鈕來展示不同的狀態(tài)


圖左的按鈕依靠旁邊的文本來表達(dá)其狀態(tài)；

圖右的按鈕則變換成進(jìn)度條來展示不同時段的事件。

◆一般的交互靠按鈕旁邊的文本來展示事件；

◆卓越的交互則可以運用按鈕本身來展示事件的不同階段。

試著用按鈕特效來提供視覺反饋，比如你把“GetApp”替換成一個loading動畫，

或者你可以在整個背景上做一個動效來展示進(jìn)程，用什么方法，取決于你。另外可以將通過恢復(fù)按鈕并改變其顏色來表達(dá)成功狀態(tài)。

七、將注意力拉到重要的元素上


圖左利用顏色和位置來使右下角的元素突出；

圖右則使用微動效來吸引用戶的注意力

◆一般的設(shè)計會利用顏色、尺寸、位置來著重突出用戶需要注意的比較重要的操作或者信息；

◆卓越的設(shè)計則可以利用微動效，在不破壞原有設(shè)計的基礎(chǔ)上吸引用戶的注意力。

當(dāng)用戶需要去操作一些比較重要的功能時，可以嘗試使用動效來喚起他們的注意力。

你可以先從一個微動效開始，然后根據(jù)這個操作的重要性來考慮是否增加動效的強度（變化尺寸、顏色和速度）。

當(dāng)然，值得注意的是，這種動效要運用在至關(guān)重要的操作上。這種方式用得越多，它的效果反而會越低，甚至?xí)蓴_用戶的注意力，得到適得其反的效果。

我們可以通過動效來展示在變化中的不同階段，將用戶的注意力拉到重要的功能操作上來，確定元素之間的關(guān)系，為我們的產(chǎn)品增加趣味和鮮明的特征。最后想要工作不累就要不斷的提升自己的技能，請關(guān)注扣丁學(xué)堂UI培訓(xùn)官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺為您提供權(quán)威的UI設(shè)計視頻教程系統(tǒng)，通過千鋒扣丁學(xué)堂金牌講師在線錄制UI在線視頻教程，讓你快速掌握UI從入門到精通UI設(shè)計實戰(zhàn)技能。需要PS軟件伙伴們，免費發(fā)給你，扣丁學(xué)堂UI交互設(shè)計交流群：568096113。

【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】

查看更多關(guān)于“ui設(shè)計資訊”的相關(guān)文章>>