2018-5-15 藍(lán)藍(lán)設(shè)計的小編
在這里先說一下本文轉(zhuǎn)自我的老家的:河北華信智原 致敬哈
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
UI動效現(xiàn)如今在 APP 和網(wǎng)頁中幾乎已經(jīng)成為了基本的組成部分,經(jīng)過仔細(xì)打磨的 UI動效對于整個界面的提升是顯著的。
動效呈現(xiàn)出狀態(tài)切換的過程,展現(xiàn)了元素之間的邏輯關(guān)系,并且吸引用戶的注意力,引導(dǎo)他們執(zhí)行有效的交互。
在設(shè)計動效的過程中,Material Motion 的設(shè)計原則,IBM 動畫設(shè)計規(guī)則和 UX動效宣言都是不錯的設(shè)計參考和指引。遵循這些現(xiàn)有的規(guī)范,能夠很好地提升動效本身的體驗和效果,從優(yōu)秀走向卓越。今天的動效設(shè)計都是遵循著這些規(guī)范使用 InVision Studio 來進(jìn)行制作的。
左側(cè)標(biāo)簽切換的時候使用了淡入淡出,右側(cè)標(biāo)簽頁切換使用了滑動效果。
內(nèi)容切換的時候淡入淡出效果不錯。
通過滑動效果來展示內(nèi)容,不僅呈現(xiàn)了變化的過程,還指明了兩者的位置關(guān)系和邏輯關(guān)系,更為卓越。
當(dāng)你在設(shè)計諸如標(biāo)簽頁或者彈出菜單這樣的控件的時候,盡量借助動效讓內(nèi)容的位置變化關(guān)系呈現(xiàn)出來,這樣不僅確保了內(nèi)容的可見性,而且能夠讓用戶不迷惑。這個時候,滑動手勢交互和位移動效是不錯的搭配,非常符合此處內(nèi)容切換的語境。
卡片是最常見的 UI 元素,左側(cè)的界面中,點擊卡片之后,展開新的界面;右側(cè)界面中,點擊卡片之后,卡片擴(kuò)展并填充整個屏幕。
點擊卡片之后,詳情頁向上滑出或者從左側(cè)滑出的設(shè)計很不錯。
通過展開動效從卡片直接過渡到詳情頁是更卓越的設(shè)計。
最好的動效往往能夠通過變化讓人明白兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。在制作不同狀態(tài)之間變化的動效的時候,注意兩個界面中共享的元素,并且將它作為橋梁,將兩個界面狀態(tài)連接到一起。在使用 InVision Studio 創(chuàng)建原型的時候,這種同時存在前后兩屏中的控件會自動連接起來,構(gòu)成動效。這一功能使得動效的構(gòu)建更加便捷。
左邊的列表使用了較為迅速的淡入淡出動效,而右邊的列表當(dāng)中,淡入淡出以延時的方式呈現(xiàn),效果類似瀑布的展開方式。
淡入淡出的動效讓元素遞次出現(xiàn)加上輕微的位移,比較自然,看起來不錯。
列表元素通過延時次第出現(xiàn),位移更加明顯,形同瀑布,在視覺和體驗上更為卓越。
瀑布式的展開動效只需要通過明顯的延時就能夠?qū)崿F(xiàn),適當(dāng)?shù)乜刂乒?jié)奏,讓整個加載速度適當(dāng)?shù)臏p緩而不會太慢,讓用戶能夠感知到這個過程即可。谷歌建議每個元素的延時不超過20毫秒。你可以在 Material Motion 中看到設(shè)計的原理和更多的實例。
左側(cè)的動效是內(nèi)容在頂層覆蓋列表,而右側(cè)的動效是從中間擴(kuò)展將上下內(nèi)容頂開。
通過移動、覆蓋、展開的方式來呈現(xiàn)詳情頁的動效,視覺上看起來不錯。
而點擊之后展開頂?shù)糁車脑?,和周圍的其他的元素有所互動,這樣的動效更加優(yōu)秀。
界面中所有的元素都應(yīng)該是有「重量」的,某個 UI 控件隨著動效變化的時候,和周圍的元素發(fā)生互動,則能夠強(qiáng)化這種實體感。
左側(cè)的動效中,菜單從底部淡入界面,而右側(cè)的動效中,菜單是從被點擊的按鈕中擴(kuò)展開的。
菜單從按鈕的位置淡入進(jìn)入界面的方式展現(xiàn)了兩者的關(guān)聯(lián),這樣的設(shè)計還不錯。
通過擴(kuò)展動效的方式來呈現(xiàn)菜單的展開,讓按鈕和菜單之間的關(guān)系得到了進(jìn)一步的加強(qiáng),這樣的設(shè)計更加優(yōu)秀。
左側(cè)的按鈕通過文本說明和色彩變化來指示狀態(tài)改變,而右側(cè)按鈕則通過加載控件來展示不同的事件的發(fā)生。
好的按鈕會指示狀態(tài)的改變,哪怕是通過文本來呈現(xiàn)。
通過按鈕本身,視覺化地呈現(xiàn)加載的狀態(tài)變化,比起文本說明更加自然,也更加易于理解,這樣的設(shè)計更加優(yōu)秀。
嘗試使用加載指示器來指示狀態(tài)的變化和進(jìn)度,類似的方式有很多,重點是在于視覺化的、自然的呈現(xiàn)狀態(tài)的變化過程,如果搭配上色彩的變化,那么就更好了。
左側(cè)僅僅是通過色彩、符號和位置來吸引注意力,而右側(cè)加入了微妙的動效來吸引用戶注意。
使用色彩、標(biāo)識和位置來吸引用戶注意力是頗為有效的手段。
借助微妙自然的動效,不僅能夠吸引用戶注意力,而且不會造成干擾,這樣的設(shè)計更優(yōu)秀。
對于一些重要的組件、事件或者信息,使用類似呼吸式的動效來強(qiáng)化效果是自然且干擾性較低的,這樣的動效設(shè)計讓元素的重要性得到凸顯,還不會讓用戶感到反感。
我希望今天所提到的這些技巧能夠讓你在設(shè)計交互動畫的時候,拿出更加自然、優(yōu)秀的方案。從優(yōu)秀到卓越,有的時候只需要進(jìn)行微小的改變。值得一提的是,像 InVision Studio 這樣的工具,對于動效本身的提升是很明顯的,它能夠提供更多自然而富有直覺性的動效。
總之,在設(shè)計動效的時候,注意狀態(tài)變化的指示,元素之間關(guān)系的強(qiáng)化,適當(dāng)?shù)卦黾右恍啡?。遵循這樣的原則,總能讓動效更上一層樓。
藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.820esy.cn