自然而流暢！聊聊常見的界面切換動畫

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

一、淡入淡出

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

比如把iPhone從第一屏滑動到Spotlight頁面時候的效果，我們可以看到有個黑色半透明背景從無到有的過程，同時首屏的圖標從完全不透明慢慢變成透明狀向右移出屏幕。

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

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

二、場景切換

場景切換通常用于兩個不同的界面之間，視覺效果會看起來很酷，缺點是會需要因為切換場景而需要等待時間。

我們來看看Apple的Cards應用，從選擇一張卡片，到進入編輯卡片的界面，卡片緩緩地飛入到一個皮革質感的桌面。

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

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

三、翻轉界面

翻轉界面的方式在iOS平臺相當常見，通常翻轉前后的兩個界面存在一定的聯(lián)系。常見于設置界面和列表界面。

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

四、黑屏

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

有時候我們也會在游戲里看到這樣的效果，比如打開CuttheRope應用，當點擊設置按鈕后，也會以黑屏的方式切換界面。

五、變形

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

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

六、形式追隨內容的縮放

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

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

七、放大

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

八、多種效果同時使用

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

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

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

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

最后，留個小小的作業(yè)。在iPad的主屏上，重力感應導致的橫豎屏切換，它是以怎樣細微的動畫過渡來實現(xiàn)的呢？

可能有同學會問，這些動效如何保存的：《經(jīng)驗分享：如何快速保存APP動效？》

還有一組很火的《帥呆了！一組令人愉悅的APP動效設計》也可以戳進去感受一下。

原文地址：cdc.tencent

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量73萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：