在UX如何使用動畫
今天介紹一下Taras Skytskyi大神的作品,非常有感觸,對UX的動畫講的非常細了,可見工作也是多麼細緻。
現在有個好的介面動畫會給使用者留下非常深刻的印象和驚喜。這些都發生在螢幕之間的互動,有的一些非常不錯的動畫是幫你做引導怎麼使用這個產品。下面歸類了一些類別,也算是細分把,大家注意做好筆記。
動畫的持續時間和速度
當元素的狀態和位置發生改變的時候,動畫的持續時間應該稍微慢中帶快,慢是讓使用者注意到這個變化,快是不能讓使用者去等待。怎麼把握這個快慢,那就繼續往下看。
通過大量的研究發現證明動畫的最佳速度在200到500毫秒之間,這些資料是基於人腦的特殊性質分析的。也就是說低於100毫秒的動畫都是使用者感覺不到的,幾乎不能看出來(只能用心去感受)。而超過1秒的動畫,對於使用者來說有點延遲,有點拖泥帶水的感覺,對於使用者來說非常無聊。這個是針對互動動畫來說,不是所有動畫都是這樣。
一般如果在移動裝置上,建議持續時間限制在200-300毫秒是最好的。如果是在平板電腦上,由於螢幕尺寸較大,在互動移動過程中路徑比較長,所以時間應該延長個30%,控制在400-450毫秒。在可穿戴這種小螢幕上,持續時間應該縮短個30%,大約150-200毫秒就可以了。
如果做的是網頁互動動畫的話,儘量把持續時間比移動裝置持續時間縮短2倍,大約150-200毫秒之間。因為在瀏覽器開啟網頁的時候,我們都希望能立即開啟,如果開啟慢了,或者互動變慢了,都會不由自主的認為是網站或網路的問題。但如果你是做一些修飾的動畫是為了引起使用者的注意,那就另當別論了,這些動畫持續時間長點都沒關係的。
需要注意的是,動畫的持續時間不僅取決於距離,還要取決於元素的體積,比較小的元素移動的更快些,因此比較大的元素持續時間應該比小的更長才對。
設計列表的時候,在這個操作顯示過程中儘量延遲要短,出現的新內容應該在20到30毫秒之間,元素出現的太慢出現可能會使使用者有點不耐煩。
設計表格的時候要注意展示方向,使用者的焦點應該是對角線,從左上角到右下角顯示下去,而不是逐個這樣的顯示,這樣會使動畫過程變長。
主次互動的時候,要分清誰是主,誰是次。一定先要展示這個核心,然後再把次要的東西從屬於它,這種動畫就給人有一種秩序的感覺,並讓使用者更多關注主要內容,別讓客人搶了主人的風頭。
當移動元素移動的時候,他的比例尺寸發生變化,它們應該是沿著弧線移動而不是直線移動,這樣看起來會更自然些。
這是我總結大神的主要適用部分,歡迎大家去觀看他的其他的文章,寫的非常不錯,非常詳細。