最初,動(dong)畫被(bei)認為是一種美(mei),但是現(xian)在(zai),它們(men)(men)已(yi)成為使用戶交互(hu)變得流暢的(de)(de)非(fei)常強(qiang)大(da)的(de)(de)工(gong)具。 但是,基本原理沒有(you)改變,并且隨著技術(shu)的(de)(de)進步(bu),我們(men)(men)有(you)了(le)更好的(de)(de)實現(xian)。 創建動(dong)畫一直被(bei)認為是網(wang)頁設計中最復雜的(de)(de)方面之一。
1.動畫的主要(yao)目的是(shi)提(ti)高(gao)可用性
一(yi)(yi)個(ge)(ge)(ge)(ge)簡(jian)單(dan)(dan)的動(dong)畫實(shi)際上(shang)可(ke)(ke)以(yi)(yi)是(shi)一(yi)(yi)個(ge)(ge)(ge)(ge)很好的指(zhi)導(dao)工(gong)具,可(ke)(ke)以(yi)(yi)幫助人(ren)們(men)(men)理解(jie)他們(men)(men)應(ying)該單(dan)(dan)擊(ji)哪個(ge)(ge)(ge)(ge)按鈕,或者應(ying)該在網頁(ye)(ye)設計中處(chu)于下一(yi)(yi)個(ge)(ge)(ge)(ge)位置。 許多設計師將簡(jian)單(dan)(dan)的動(dong)畫與用(yong)戶(hu)工(gong)具配對以(yi)(yi)單(dan)(dan)擊(ji)或滾動(dong)。 如果正確使用(yong)動(dong)畫,則(ze)(ze)可(ke)(ke)以(yi)(yi)向(xiang)用(yong)戶(hu)提(ti)(ti)供有(you)(you)價(jia)值的反饋。 您以(yi)(yi)錯(cuo)誤的方式(shi)多次填寫了表格,并顯(xian)示(shi)(shi)一(yi)(yi)個(ge)(ge)(ge)(ge)消息框,突出(chu)顯(xian)示(shi)(shi)您的錯(cuo)誤并告訴您如何解(jie)決它們(men)(men)? 在經(jing)過深思(si)熟慮的操作(zuo)(zuo)可(ke)(ke)以(yi)(yi)指(zhi)導(dao)用(yong)戶(hu)并向(xiang)他們(men)(men)提(ti)(ti)供背景信息之后,您甚至有(you)(you)機會(hui)給用(yong)戶(hu)一(yi)(yi)個(ge)(ge)(ge)(ge)驚喜,使事情變得更加有(you)(you)趣和(he)引人(ren)入勝。 在網頁(ye)(ye)設計中,如果您不以(yi)(yi)純粹的裝飾方式(shi)使用(yong)動(dong)畫,則(ze)(ze)動(dong)畫實(shi)際上(shang)非常(chang)(chang)有(you)(you)用(yong)。 優秀的UX和(he)UI設計人(ren)員經(jing)常(chang)(chang)使用(yong)動(dong)畫來改(gai)善(shan)整個(ge)(ge)(ge)(ge)工(gong)作(zuo)(zuo)流程(cheng)。
2.動畫的第(di)二種(zhong)用途是美(mei)學
動(dong)畫可以用(yong)作很好的(de)裝(zhuang)飾(shi)(shi)。 動(dong)畫的(de)目(mu)標通常是純視(shi)覺(jue)目(mu)標,在(zai)一定(ding)程(cheng)度上(shang)是可以接受的(de)。 裝(zhuang)飾(shi)(shi)性動(dong)畫可以幫助在(zai)用(yong)戶和界面(mian)之間(jian)(jian)建立情感聯系(xi)。 動(dong)畫還可以激發視(shi)覺(jue)吸引力,并確保您的(de)用(yong)戶與(yu)您的(de)網(wang)站(zhan)保持較長時間(jian)(jian)的(de)聯系(xi)。 在(zai)創建具有純視(shi)覺(jue)效(xiao)果的(de)動(dong)畫時,請(qing)考慮該(gai)怎么做。 考慮您希望用(yong)戶具有哪種(zhong)連接。 是有趣還是令人驚(jing)訝? 您是否要(yao)放置一些應該(gai)共享的(de)獨特內容? 即使是純粹視(shi)覺(jue)的(de)東西也(ye)應該(gai)有一定(ding)的(de)用(yong)途。
3.使用動(dong)畫(hua)的(de)另一個(ge)原(yuan)因是傳(chuan)達某種功能
動畫可以(yi)是一(yi)個(ge)很好的(de)工(gong)具,可以(yi)以(yi)直觀的(de)方(fang)式(shi)向用戶顯示特定(ding)內容的(de)工(gong)作方(fang)式(shi)。 不(bu)要無緣無故地(di)使用視(shi)差滾動效果(guo)來犯一(yi)些錯(cuo)誤(wu)。
4.動畫還可以幫助指導用戶
動(dong)(dong)畫(hua)不(bu)僅用(yong)于動(dong)(dong)畫(hua),而且還用(yong)于轉換(huan)。 它們可以幫助您的(de)用(yong)戶理解該(gai)頁面,并引(yin)導他們到應(ying)單擊的(de)特定(ding)位置。
5.您可(ke)以使用它們顯示信(xin)息(xi)
除了(le)提示(shi)功能外,您還(huan)可以使(shi)其成(cheng)為顯(xian)示(shi)輔(fu)助(zhu)信息(xi)的好工具。 例如,您可以讓用(yong)戶將鼠標懸停在內容上并顯(xian)示(shi)其他選(xuan)項。 并且由于(yu)懸浮(fu)內容的“隱藏”默(mo)認狀態(tai),您只(zhi)想將其用(yong)作輔(fu)助(zhu)信息(xi),對于(yu)想要(yao)瀏(liu)覽您的網站的用(yong)戶來說,沒有(you)什么是真(zhen)正重要(yao)的。 另外,請(qing)記住,在移動(dong)設備上懸停不起作用(yong)。