移動(dòng)App應(yīng)用設(shè)計(jì)和動(dòng)效原理

如今,人們對(duì)于網(wǎng)站動(dòng)效的追捧和熱愛(ài)可以用一句很簡(jiǎn)單的話去表達(dá)：帶有動(dòng)效的app才是好的app。良好的效果,用戶(hù)粘度的積極作用,在改善產(chǎn)品體驗(yàn)設(shè)計(jì)方面已成為一個(gè)網(wǎng)站設(shè)計(jì)的一個(gè)主流方向,應(yīng)用現(xiàn)在產(chǎn)品交互設(shè)計(jì)和界面設(shè)計(jì)基本要素?；趧?dòng)態(tài)效果,上海海濤科技想從以下常見(jiàn)的四個(gè)方面簡(jiǎn)述動(dòng)態(tài)都有哪些獨(dú)特的效果

Part 1 基礎(chǔ)動(dòng)效

常見(jiàn)動(dòng)效通常是由多個(gè)基礎(chǔ)動(dòng)效組合而成。下面就讓我們來(lái)看看有哪些常見(jiàn)的基礎(chǔ)動(dòng)效。

一般常見(jiàn)的網(wǎng)站的動(dòng)態(tài)效果是由很多個(gè)基礎(chǔ)動(dòng)效組合成的，接下來(lái)，我們就一起來(lái)欣賞平時(shí)常見(jiàn)的基礎(chǔ)動(dòng)效都有哪些

位移和速度

位移是一個(gè)物理量，把它設(shè)計(jì)在網(wǎng)站的動(dòng)態(tài)效果中式做適合不過(guò)了，因?yàn)槲灰票旧肀磉_(dá)的就是一個(gè)在移動(dòng)的物體，從一個(gè)位置到另外一個(gè)位置的距離。因此，動(dòng)畫(huà)中的元素是可以通過(guò)位移的變化而產(chǎn)生的動(dòng)態(tài)的效果

相同的位移，元素通過(guò)不同的速度可以產(chǎn)生不同的動(dòng)畫(huà)效果，就是因?yàn)樗麄冴P(guān)系密不可分的，這些不一樣的動(dòng)畫(huà)效果可以通過(guò)勻速、加速、減速和緩入緩出等方式展現(xiàn)，不同速度的變化可以為網(wǎng)站的頁(yè)面增加動(dòng)感，給用戶(hù)帶來(lái)不一樣的視覺(jué)體驗(yàn)

放大和縮小

界面元素等比放大或縮小的過(guò)程。

放大

縮小

消失和出現(xiàn)

網(wǎng)頁(yè)的界面是一個(gè)從有到無(wú)或者是一個(gè)從無(wú)到有的過(guò)程

翻轉(zhuǎn)

翻轉(zhuǎn)既是上下翻轉(zhuǎn)或者左右翻轉(zhuǎn)或帶有動(dòng)畫(huà)3D效果180度轉(zhuǎn)動(dòng)，也可以是帶有折疊效果的90度

翻轉(zhuǎn)

翻折

旋轉(zhuǎn)

旋轉(zhuǎn)是圍繞中心點(diǎn)轉(zhuǎn)動(dòng)的界面元素，同樣也是整個(gè)界面元素圍繞中心點(diǎn)轉(zhuǎn)動(dòng)，比如說(shuō)移動(dòng)設(shè)備橫屏和豎屏之間的切換。

局部旋轉(zhuǎn)

全部旋轉(zhuǎn)

變形

界面元素根據(jù)可觸發(fā)或可自發(fā)變化的不同的形狀設(shè)計(jì)操作形成的變形情況。

變色

變色是指動(dòng)態(tài)效果中界面元素具有不同的色彩設(shè)計(jì)，以至于發(fā)生不同的變化

Part 2 動(dòng)效作用

結(jié)論動(dòng)態(tài)效應(yīng)有許多功能,可以分為五個(gè)方面:友好,有趣,反饋,過(guò)渡和引導(dǎo)。下面一起來(lái)了解下這方面具體作用,同時(shí)享受一些良好的動(dòng)態(tài)效果。

友好

與手勢(shì)結(jié)合，增強(qiáng)操控感

當(dāng)界面的元素是可以隨著手指的操作而在動(dòng)時(shí)，用戶(hù)會(huì)覺(jué)得控制界面,好像不是在使用一個(gè)智能設(shè)備接口,不是被界面所控制,而是在操作一個(gè)真實(shí)的運(yùn)動(dòng)的物體。這種模擬現(xiàn)實(shí)操作的一個(gè)界面，使手勢(shì)操作更容易學(xué)習(xí),體驗(yàn)更流暢。

讓錯(cuò)誤不再令人沮喪

有些是網(wǎng)絡(luò)不穩(wěn)定，服務(wù)器不穩(wěn)定，網(wǎng)絡(luò)容易出錯(cuò)或者是用戶(hù)輸入的驗(yàn)證碼不正確，用戶(hù)名不存在等，這時(shí)為了讓你再次重新操作，界面的設(shè)計(jì)可以制作成萌萌噠的動(dòng)效，這種效果可以緩解那些沒(méi)有耐心或者是感覺(jué)自己經(jīng)常出錯(cuò)愚蠢的行為。讓出錯(cuò)也是那么的可愛(ài)

有趣

讓等待不再無(wú)聊

很多的用戶(hù)在網(wǎng)上會(huì)等待著下載文件軟件等，或者是等待著網(wǎng)頁(yè)的刷新，為了不讓等待變成的很乏味?？梢栽谟脩?hù)操作頁(yè)面增加動(dòng)態(tài)效果，當(dāng)你還在沉浸在萌萌噠或創(chuàng)意搞笑的動(dòng)效中的時(shí)候，時(shí)間已經(jīng)悄然的流失。

增添趣味性，創(chuàng)造超出預(yù)期的驚喜

網(wǎng)絡(luò)時(shí)代，登錄是一種最傳統(tǒng)的不可避免的操作,當(dāng)我們?cè)谝粋€(gè)新網(wǎng)站迫不及待想評(píng)論時(shí)，登錄界面的出現(xiàn)不覺(jué)得讓人產(chǎn)生厭煩的心理。但當(dāng)看到動(dòng)態(tài)的效果,真的覺(jué)得很有趣,驚訝的愉快地完成首次登錄。

過(guò)渡

表現(xiàn)層級(jí)關(guān)系

轉(zhuǎn)場(chǎng)效果的展示是從一個(gè)界面到另一個(gè)界面的切換過(guò)渡，設(shè)計(jì)出與眾不同的轉(zhuǎn)場(chǎng)效果可以很好的把兩個(gè)界面的層級(jí)關(guān)系展現(xiàn)給用戶(hù)。

增加界面轉(zhuǎn)場(chǎng)的延續(xù)感

兩個(gè)開(kāi)關(guān)之間的接口,有一些常見(jiàn)的界面元素,在設(shè)計(jì)過(guò)渡的動(dòng)態(tài)效果,保存延續(xù)常見(jiàn)的界面元素顯示,可以使界面更加流暢自然。

隱藏和展示界面元素

接口界面的空間是有限的,需要顯示大量的信息?？梢詫?dāng)前不需要的界面元素顯示不出來(lái)，將需要展示的元素使用一定的空間展示出來(lái)

反饋

讓反饋更高效觸達(dá)

生硬的文字反饋與直觀的動(dòng)態(tài)效果相比較，高等和底下立刻可以顯現(xiàn)。動(dòng)態(tài)反饋也可以帶一些情感因素,抓住用戶(hù)的心情。

令人愉快的提示

網(wǎng)站欄目：移動(dòng)App應(yīng)用設(shè)計(jì)和動(dòng)效原理
URL標(biāo)題：http://bm7419.com/news/170666.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、用戶(hù)體驗(yàn)、自適應(yīng)網(wǎng)站、服務(wù)器托管、小程序開(kāi)發(fā)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)