自然而流暢——聊聊界面的切換動畫

0 評論 14592 瀏覽 0 收藏 9 分鐘

在使用一些移動端的?App?或?PC?端的軟件的時候,我們常常會有一些界面之間切換的操作,尤其是在移動端的設(shè)備上,因為屏幕尺寸和交互方式的特性,就更多的會出現(xiàn)這些切換的操作,而很突然地從一個界面切換到另一個界面會給用戶帶來困擾,所以在觸發(fā)這些操作的同時,往往需要過渡形式的動畫來引導(dǎo)用戶是如何從一個界面切換到另一個界面的,我們來看看一些常見的界面切換的過渡方式吧。

1.???淡入淡出

淡入淡出的過渡效果是最為常見的處理手法,這種效果往往能很直觀的表現(xiàn)從一個畫面到另一個畫面變化的過程,視覺表現(xiàn)上比較柔和,但同時通常會局限在需要過渡的兩個界面之間有一定的共同特點。
比如把iPhone從第一屏滑動到Spotlight頁面時候的效果,我們可以看到有個黑色半透明背景從無到有的過程,同時首屏的圖標(biāo)從完全不透明慢慢變成透明狀向右移出屏幕。

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

232

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

331

 

2.???場景切換

場景切換通常用于兩個不同的界面之間,視覺效果會看起來很酷,缺點是會需要因為切換場景而需要等待時間。
我們來看看Apple的Cards應(yīng)用,從選擇一張卡片,到進(jìn)入編輯卡片的界面,卡片緩緩地飛入到一個皮革質(zhì)感的桌面。

431

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

53  此類過渡效果不太適用于需要經(jīng)常切換的頁面之間,過多的等待時間會讓用戶感到焦躁。

 

3.???翻轉(zhuǎn)界面

翻轉(zhuǎn)界面的方式在iOS平臺相當(dāng)常見,通常翻轉(zhuǎn)前后的兩個界面存在一定的聯(lián)系。常見于設(shè)置界面和列表界面。
如下圖的“正在播放”界面和“專輯列表”界面的切換。

63

4.???黑屏

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

73

有時候我們也會在游戲里看到這樣的效果,比如打開Cut the Rope應(yīng)用,當(dāng)點擊設(shè)置按鈕后,也會以黑屏的方式切換界面。

831

5.??變形

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

92

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

 

6.???形式追隨內(nèi)容的縮放

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

1021

在Mac?平臺下,此類頁面切換的過渡方式則更常見,比如在?Mac?下打開系統(tǒng)配置,在系統(tǒng)配置里面切換任何一個設(shè)置項都會有這種效果。

 

7.???放大

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

113

8.???多種效果同時使用

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

1211

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

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

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

 

來源:CDC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!