頁面轉換動畫的指導方針

Applies to Windows and Windows Phone

使用頁面轉換動畫來顯示新啟動應用程式的第一頁或應用程式中頁面之間的轉換。

附註  只有螢幕的部分內容會變更時,請使用內容轉換動畫而不要使用頁面轉換動畫。

可行與禁止事項

  • 沿著自然的邊框或界限,將頁面分割成二到五個區域組。將交錯時間套用到區域,讓區域依序顯示而不是一次全部顯示,並且針對寬形應用程式配置將區域位移 100 個像素。如果您的應用程式在寬度較窄的狀態有特殊配置,則可以使用較小的位移。如需最常見的頁面切割和它們應該顯示的順序,請參閱其他用法指導方針
  • 確定傳出和傳入頁面上的任何共有內容都保持不變,不會對它們套用任何動畫。例如,如果 [上一頁] 按鈕同時出現在傳出和傳入頁面上,它就不應該包含於轉換動畫中。
  • 如果傳出頁面沒有 [上一頁] 按鈕 (例如應用程式的第一頁) 但傳入頁面有,則 [上一頁] 按鈕應該指定為個別區域,且該區域應該早於其他區域建立動畫進入檢視。
  • 如果您的傳出和傳入頁面有不同的背景,請使用淡入動畫來顯示新的背景。在頁面轉換動畫開始的同時開始淡入動畫。
  • 如果傳入頁面上的某些內容還沒有準備好立即顯示,請使用頁面轉換動畫,盡可能顯示已準備好顯示的內容。於此同時 (如有必要),在準備其他內容時顯示進度控制項。當其他內容準備好可以顯示的時候,將它產生動畫效果,進入應該放置它的內容區域。如果是大型內容區域,請使用內容轉換動畫。如果是小型內容區域或不連續的內容,請使用淡入動畫
  • 針對一般頁面流程或閱讀順序,將頁面滑入至檢視中。例如,如果傳入頁面上的內容是從左至右,則傳入頁面應該以從右至左的方式滑入。在從右至左閱讀順序的應用程式中,傳入頁面應該從左至右滑入。同樣地,在您將頁面分割為下圖中所述的區段時,這些區段帶入檢視的順序必須與閱讀順序相反。
  • 不要在使用者調整應用程式視窗大小時執行頁面轉換動畫。頁面轉換動畫只適合用於在特定檢視內從一個頁面瀏覽到另一個頁面時。當檢視變更時,系統會處理新舊配置之間的動畫。

其他用法指導方針

最常見的頁面切割 (包括它們應該顯示的順序) 如下所示:

常見的頁面切割

最常見的頁面切割 (包含返回按鈕),如下所示。如果傳出頁面沒有 [上一頁] 按鈕 (例如應用程式的第一頁) 但傳入頁面有,則 [上一頁] 按鈕應該指定為個別區域,且該區域應該早於其他區域建立動畫進入檢視。

常見的頁面切割

這是在窄格式寬度或直向檢視中顯示應用程式時最常使用的頁面切割,這些切割顯示的順序,如下所示。如果傳出頁面上已經出現 [上一頁] 按鈕,它應該停在原地,不應該包含在動畫中。

調整大小或直向檢視中的常見頁面切割

相關主題

適用於設計者
新增和刪除動畫的指導方針
內容轉換動畫的指導方針
拖曳動畫的指導方針
以邊緣為基礎之 UI 動畫的指導方針
淡入/淡出動畫的指導方針
指標按一下動畫的指導方針
重新定位動畫的指導方針
快顯 UI 動畫的指導方針
撥動動畫的指導方針
適用於開發人員 (HTML)
HTML 動畫庫範例
讓 UI 產生動畫效果
讓頁面轉換產生動畫效果
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
適用於開發人員 (XAML)
讓 UI 產生動畫效果
讓內容和進場轉換產生動畫效果
快速入門:使用動畫庫讓 UI 產生動畫效果
EntranceThemeTransition class

 

 

顯示:
© 2014 Microsoft