細(xì)節(jié)決定成敗！交互設(shè)計(jì)上常見(jiàn)的界面切換動(dòng)畫！

在使用一些移動(dòng)端的App或PC端的軟件的時(shí)候，我們常常會(huì)有一些界面之間切換的操作，尤其是在移動(dòng)端的設(shè)備上，因?yàn)槠聊怀叽绾徒换シ绞降奶匦?，就更多的?huì)出現(xiàn)這些切換的操作，而很突然地從一個(gè)界面切換到另一個(gè)界面會(huì)給用戶帶來(lái)困擾，所以在觸發(fā)這些操作的同時(shí)，往往需要過(guò)渡形式的動(dòng)畫來(lái)引導(dǎo)用戶是如何從一個(gè)界面切換到另一個(gè)界面的，我們來(lái)看看一些常見(jiàn)的界面切換的過(guò)渡方式吧。

一、淡入淡出

　　淡入淡出的過(guò)渡效果是最為常見(jiàn)的處理手法，這種效果往往能很直觀的表現(xiàn)從一個(gè)畫面到另一個(gè)畫面變化的過(guò)程，視覺(jué)表現(xiàn)上比較柔和，但同時(shí)通常會(huì)局限在需要過(guò)渡的兩個(gè)界面之間有一定的共同特點(diǎn)。

　　比如把iPhone從第一屏滑動(dòng)到Spotlight頁(yè)面時(shí)候的效果，我們可以看到有個(gè)黑色半透明背景從無(wú)到有的過(guò)程，同時(shí)首屏的圖標(biāo)從完全不透明慢慢變成透明狀向右移出屏幕。

　　再比如在Windows7平臺(tái)上的Aeropeek功能，當(dāng)把鼠標(biāo)移動(dòng)到桌面右下角的顯示桌面按鈕的時(shí)候，窗口內(nèi)容就會(huì)以淡入淡出的效果從不透明過(guò)渡到全部透明的效果。

　　iOS的Music界面也同樣用到了這樣的效果，從“正在播放”界面切換到上一級(jí)界面的時(shí)候，頂部的狀態(tài)欄和標(biāo)題欄就會(huì)用淡入淡出的效果，從播放界面的深色轉(zhuǎn)換為列表界面的淺色。

二、場(chǎng)景切換

　　場(chǎng)景切換通常用于兩個(gè)不同的界面之間，視覺(jué)效果會(huì)看起來(lái)很酷，缺點(diǎn)是會(huì)需要因?yàn)榍袚Q場(chǎng)景而需要等待時(shí)間。

　　我們來(lái)看看Apple的Cards應(yīng)用，從選擇一張卡片，到進(jìn)入編輯卡片的界面，卡片緩緩地飛入到一個(gè)皮革質(zhì)感的桌面。

　　再比如iOS里面的“用電子郵件發(fā)送照片”，也同樣是使用了這類效果(照片進(jìn)行移動(dòng)，同時(shí)郵件界面從底部滑入屏幕)。

　　此類過(guò)渡效果不太適用于需要經(jīng)常切換的頁(yè)面之間，過(guò)多的等待時(shí)間會(huì)讓用戶感到焦躁。

三、翻轉(zhuǎn)界面

　　翻轉(zhuǎn)界面的方式在iOS平臺(tái)相當(dāng)常見(jiàn)，通常翻轉(zhuǎn)前后的兩個(gè)界面存在一定的聯(lián)系。常見(jiàn)于設(shè)置界面和列表界面。

　　如下圖的“正在播放”界面和“專輯列表”界面的切換。

四、黑屏

　　有iPhone的同學(xué)可以一起來(lái)做個(gè)測(cè)試，把iPhone的壁紙和鎖屏界面設(shè)置為兩張不一樣的照片時(shí)(注意，一定要不一樣哦)，當(dāng)你劃開(kāi)解鎖按鈕以后，屏幕會(huì)先以淡入淡出的方式黑屏一下，然后再慢慢亮回來(lái)回到主界面。

　　有時(shí)候我們也會(huì)在游戲里看到這樣的效果，比如打開(kāi)CuttheRope應(yīng)用，當(dāng)點(diǎn)擊設(shè)置按鈕后，也會(huì)以黑屏的方式切換界面。

五、變形

　　iOS中打開(kāi)一個(gè)文件夾會(huì)以一個(gè)帶箭頭的樣式展開(kāi)，而展開(kāi)的那部分最后卻缺少了那個(gè)小三角的那部分面積，讓我們放慢速度看看iOS是如何很自然的把小三角隱藏掉的吧：

　　在打開(kāi)文件夾的同時(shí)，我們可以很清晰的看到那個(gè)小箭頭漸漸縮小直到完全沒(méi)有。雖然這里的變形速度很快以至于人眼可能很難去察覺(jué)到它的變化過(guò)程，但是以合理又自然的變形過(guò)程來(lái)達(dá)到最后想要的形狀結(jié)果也正是體現(xiàn)細(xì)節(jié)的一部分。

六、形式追隨內(nèi)容的縮放

　　此類動(dòng)畫的表現(xiàn)通常還會(huì)伴隨淡入淡出的效果配合，比較常見(jiàn)的是Window7的任務(wù)欄預(yù)覽窗格，當(dāng)鼠標(biāo)從一個(gè)圖標(biāo)移動(dòng)到另外一個(gè)圖標(biāo)的時(shí)候，因?yàn)轭A(yù)覽窗口的大小不一致，所以窗口會(huì)針對(duì)內(nèi)容的大小自動(dòng)縮放至適當(dāng)?shù)拇笮。鴥?nèi)容則會(huì)伴隨以淡入淡出的方式變化。

　　在Mac平臺(tái)下，此類頁(yè)面切換的過(guò)渡方式則更常見(jiàn)，比如在Mac下打開(kāi)系統(tǒng)配置，在系統(tǒng)配置里面切換任何一個(gè)設(shè)置項(xiàng)都會(huì)有這種效果。

七、放大

　　放大的效果常見(jiàn)于從一個(gè)較小的元素進(jìn)入到一個(gè)較大的界面時(shí)候的過(guò)渡，有時(shí)候也會(huì)伴隨淡入淡出的效果作為配合。如GarageBand中，選擇一個(gè)樂(lè)器進(jìn)入該樂(lè)器的編輯界面時(shí)所使用的效果。

八、多種效果同時(shí)使用

　　在有些復(fù)雜的界面切換過(guò)程中，有時(shí)候僅僅使用一種方式來(lái)實(shí)現(xiàn)界面的切換是遠(yuǎn)遠(yuǎn)不夠的，為了能夠更生動(dòng)而自然的在界面中進(jìn)行切換，需要同時(shí)運(yùn)用幾種過(guò)渡效果。

　　比如上圖的Lion系統(tǒng)，將iTunes全屏的過(guò)程中，可以看到桌面背景在進(jìn)行左右切換的同時(shí)，iTunes伴隨淡入淡出的效果并且放大至全屏，Dock則往下移動(dòng)以騰出屏幕空間給iTunes全屏。

　　這樣做的目的 1：是很好的將iTunes界面過(guò)渡到全屏的狀態(tài)，2：是背景的切換，代表著全屏的iTunes作為一個(gè)單獨(dú)的Space存放在Mac的屏幕里。也由此可見(jiàn)，以怎樣的動(dòng)畫過(guò)渡效果去實(shí)現(xiàn)界面的轉(zhuǎn)換實(shí)際上也在告知用戶，我這樣切換意味著什么。

　　除了以上列出的這些過(guò)渡效果以外，還有更多的過(guò)渡效果沒(méi)有在這里列出來(lái)。大家可以進(jìn)一步去挖掘和發(fā)現(xiàn)更多。動(dòng)畫除了可以使界面變得不那么死板以外，合理的動(dòng)畫也會(huì)讓用戶很直觀的了解到界面與界面之間的關(guān)系以及如何切換的，更能增加用戶在使用過(guò)程中的流暢性，從而提升體驗(yàn)。

網(wǎng)站題目：細(xì)節(jié)決定成??！交互設(shè)計(jì)上常見(jiàn)的界面切換動(dòng)畫！
分享鏈接：http://bm7419.com/news/169865.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、服務(wù)器托管、小程序開(kāi)發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)