如今,人們對于網(wǎng)站動效的追捧和熱愛可以用一句很簡單的話去表達(dá):帶有動效的app才是好的app。良好的效果,用戶粘度的積極作用,在改善產(chǎn)品體驗設(shè)計方面已成為一個網(wǎng)站設(shè)計的一個主流方向,應(yīng)用現(xiàn)在產(chǎn)品交互設(shè)計和界面設(shè)計基本要素。基于動態(tài)效果,上海海濤科技想從以下常見的四個方面簡述動態(tài)都有哪些獨(dú)特的效果
常見動效通常是由多個基礎(chǔ)動效組合而成。下面就讓我們來看看有哪些常見的基礎(chǔ)動效。
一般常見的網(wǎng)站的動態(tài)效果是由很多個基礎(chǔ)動效組合成的,接下來,我們就一起來欣賞平時常見的基礎(chǔ)動效都有哪些
位移和速度
位移是一個物理量,把它設(shè)計在網(wǎng)站的動態(tài)效果中式做適合不過了,因為位移本身表達(dá)的就是一個在移動的物體,從一個位置到另外一個位置的距離。因此,動畫中的元素是可以通過位移的變化而產(chǎn)生的動態(tài)的效果
相同的位移,元素通過不同的速度可以產(chǎn)生不同的動畫效果,就是因為他們關(guān)系密不可分的,這些不一樣的動畫效果可以通過勻速、加速、減速和緩入緩出等方式展現(xiàn),不同速度的變化可以為網(wǎng)站的頁面增加動感,給用戶帶來不一樣的視覺體驗
放大和縮小
界面元素等比放大或縮小的過程。
放大
縮小
消失和出現(xiàn)
網(wǎng)頁的界面是一個從有到無或者是一個從無到有的過程
翻轉(zhuǎn)
翻轉(zhuǎn)既是上下翻轉(zhuǎn)或者左右翻轉(zhuǎn)或帶有動畫3D效果180度轉(zhuǎn)動,也可以是帶有折疊效果的90度
翻轉(zhuǎn)
翻折
旋轉(zhuǎn)
旋轉(zhuǎn)是圍繞中心點(diǎn)轉(zhuǎn)動的界面元素,同樣也是整個界面元素圍繞中心點(diǎn)轉(zhuǎn)動,比如說移動設(shè)備橫屏和豎屏之間的切換。
局部旋轉(zhuǎn)
全部旋轉(zhuǎn)
變形
界面元素根據(jù)可觸發(fā)或可自發(fā)變化的不同的形狀設(shè)計操作形成的變形情況。
變色
變色是指動態(tài)效果中界面元素具有不同的色彩設(shè)計,以至于發(fā)生不同的變化
結(jié)論動態(tài)效應(yīng)有許多功能,可以分為五個方面:友好,有趣,反饋,過渡和引導(dǎo)。下面一起來了解下這方面具體作用,同時享受一些良好的動態(tài)效果。
友好
與手勢結(jié)合,增強(qiáng)操控感
當(dāng)界面的元素是可以隨著手指的操作而在動時,用戶會覺得控制界面,好像不是在使用一個智能設(shè)備接口,不是被界面所控制,而是在操作一個真實(shí)的運(yùn)動的物體。這種模擬現(xiàn)實(shí)操作的一個界面,使手勢操作更容易學(xué)習(xí),體驗更流暢。
讓錯誤不再令人沮喪
有些是網(wǎng)絡(luò)不穩(wěn)定,服務(wù)器不穩(wěn)定,網(wǎng)絡(luò)容易出錯或者是用戶輸入的驗證碼不正確,用戶名不存在等,這時為了讓你再次重新操作,界面的設(shè)計可以制作成萌萌噠的動效,這種效果可以緩解那些沒有耐心或者是感覺自己經(jīng)常出錯愚蠢的行為。讓出錯也是那么的可愛
有趣
讓等待不再無聊
很多的用戶在網(wǎng)上會等待著下載文件軟件等,或者是等待著網(wǎng)頁的刷新,為了不讓等待變成的很乏味??梢栽谟脩舨僮黜撁嬖黾觿討B(tài)效果,當(dāng)你還在沉浸在萌萌噠或創(chuàng)意搞笑的動效中的時候,時間已經(jīng)悄然的流失。
增添趣味性,創(chuàng)造超出預(yù)期的驚喜
網(wǎng)絡(luò)時代,登錄是一種最傳統(tǒng)的不可避免的操作,當(dāng)我們在一個新網(wǎng)站迫不及待想評論時,登錄界面的出現(xiàn)不覺得讓人產(chǎn)生厭煩的心理。但當(dāng)看到動態(tài)的效果,真的覺得很有趣,驚訝的愉快地完成首次登錄。
過渡
表現(xiàn)層級關(guān)系
轉(zhuǎn)場效果的展示是從一個界面到另一個界面的切換過渡,設(shè)計出與眾不同的轉(zhuǎn)場效果可以很好的把兩個界面的層級關(guān)系展現(xiàn)給用戶。
增加界面轉(zhuǎn)場的延續(xù)感
兩個開關(guān)之間的接口,有一些常見的界面元素,在設(shè)計過渡的動態(tài)效果,保存延續(xù)常見的界面元素顯示,可以使界面更加流暢自然。
隱藏和展示界面元素
接口界面的空間是有限的,需要顯示大量的信息??梢詫?dāng)前不需要的界面元素顯示不出來,將需要展示的元素使用一定的空間展示出來
反饋
讓反饋更高效觸達(dá)
生硬的文字反饋與直觀的動態(tài)效果相比較,高等和底下立刻可以顯現(xiàn)。動態(tài)反饋也可以帶一些情感因素,抓住用戶的心情。
令人愉快的提示