預測返回設計

預測返回是指手勢操作的結果,使用者在完成返回手勢前,已滑動返回預覽返回手勢的目的地。這可讓使用者決定是要繼續 (也就是「修訂」返回手勢),或留在目前的檢視畫面。

預測返回功能可在使用手勢操作時,提供更順暢且直覺的瀏覽體驗。它利用內建動畫,告知使用者會前往哪些動作,從而減少意外結果。

如果應用程式設計需要針對重要時刻的自訂轉場效果和動畫提供返回導覽功能,請使用本頁的設計指南。

支援預測返回手勢

無論使用預設或自訂返回瀏覽功能,都可以支援預測返回功能。如果使用預設的返回導覽功能,可以輕鬆選擇啟用這項功能。進一步瞭解如何支援預測返回手勢

選擇加入後,應用程式就會內建動畫,例如返回首頁、跨活動和跨工作的動畫。

您也可以將 Material 元件依附元件升級至 MDC Android 1.10.0-alpha02 以上版本,接收下列 Material 元件動畫:

確保應用程式具備無邊框支援

為了協助使用者,預測返回導覽會遵循先進功能中定義的手勢插邊。請避免在這些手勢區域底下新增觸控手勢或拖曳目標。

圖 1:系統手勢插邊。請避免將觸控目標完全放在這些區域

全螢幕介面

如果您的應用程式為全螢幕介面建立自訂應用程式內轉場效果,請按照這份設計指南操作。

影片 1.全螢幕表面預測返回範例。


返回預覽

使用者在全螢幕介面執行返回手勢時,內部區域應隨著手勢進度縮小。使用者超過修訂門檻後,內容應以淡入/淡出效果切換至下一個狀態,告知使用者動作的哪個位置。

內插類型

使用的內插器可確保螢幕快速離開。參數為 (.1、.1、0、1),用於比對 SystemUI 動畫的內插器

取消動作

如果使用者在非修訂狀態下放開手勢,內容會在手勢開始之前迅速回傳並縮放回原始狀態和大小,藉此復原任何狀態變更。

影片 2.非修訂狀態和取消動作示例。

動態規格

參數

初始值

目標價值

背景資訊

退出體重計

100%

90%

輸入體重計

110%

100%

結束淡出

100%

0%

達到 35% 進度門檻的目標值

進入淡出

0%

100%

進入 35% 進度門檻時進入淡出效果

影片 3:加入一些微妙的過度射擊,可吸收在手勢過程中構建的彈簧緊張張力

共用元素轉換

如果您的應用程式針對共用元素轉換建立自訂應用程式內轉場效果,請使用下列設計指南。

使用者在共用元素轉換期間做出返回手勢時,途徑會在返回預覽畫面中完全卸離螢幕邊緣,且使用者可以直接操控該手勢。不過,設計不應向使用者展示在完成返回手勢的過程中,依返回手勢的方向關閉某個項目。

例如,您可以在關閉詳細資料畫面並返回直向清單時,使用共用元素轉換功能,透過視覺提示向使用者說明要復原上一個動作。在影片 3 中,日曆活動會關閉回「天」檢視畫面。為了提高動作的靈活度,設計在設計上會增加細微的衝擊,以便吸收手勢過程中累積的部分彈簧緊張力。


返回預覽

向使用者呈現預測動畫時,應用程式維護的「預先修訂」狀態會測量使用者何時執行無邊框返回手勢,但未透過允許執行提交動作。您必須提供適用於這個修訂前狀態的參數。

顯示的移動量取決於使用者可從手勢開始位置移動的最前方。

影片 4.返回預覽示例

動態規格

共用元素轉換效果會直接受到手勢開頭的 x 和 y 位移影響。本節說明用於管理螢幕意見回饋機制的規格和值。

下圖顯示表面動畫的建議動態規格。

圖 2:從左側邊緣滑動時可使用的介面位移、縮放和邊界參數"

1 邊界:兩側寬度的 5% (與 3 中所述的表面積有關)

2 將視窗縮放至中心時計算的位移。依據要求的 8dp 邊界計算:((螢幕寬度 / 20) - 8) dp

3 途徑可將大小縮放至 90%,留下 10% 的邊界 (請參閱 1)

4 與螢幕邊緣保持 8 dp 的間隔

建議您保留列出的參數以維持一致的體驗,但也可以修改規格來建立自訂動畫。

上圖中的螢幕寬度為 1280,使 x 軸位移 56 dp。計算公式如下:

((1280/20)-8)= 56 dp x 偏移

圖 3:從左側滑動滑動的 Y 軸位移和縮放參數。全螢幕介面會顯示返回預覽畫面。

1 邊緣與裝置邊界之間的空間可供 Y 軸移動

2 如果途徑從螢幕中移位,請將面朝下縮放,幅度不超過 50%。

2 途徑會從垂直置中開始,Y 軸定義如下:

  • 限制 Y 軸,讓表面一律不會超過 8 dp 螢幕邊界
  • 為避免介面突然停止,請使用減速內插器並對應至 Y 軸限制值

3 表面夠短時,保留 8 dp 邊界

如要自訂動畫,您必須定義下列所有參數。

參數

背景資訊

X 軸位移

((螢幕寬度 / 20) - 8) dp

偏移上限,留下 8dp 邊界

Y 軸位移

((可用螢幕高度 / 20) -8) dp

偏移上限,留下 8dp 邊界

縮放

90%

視窗大小下限

開發人員透過預測返回進度 API 實作自訂動畫時,會使用這些參數。

內插手勢進度

線性進度值可從使用者的手勢衍生,但不應直接用於預覽動畫。相反地,您應根據適當的方式,向使用者提供適當的意見回饋。使用 STANDARD_DECELERATE 符記PathInterpolator(0f, 0f, 0f, 1f) 提供進度值,以便在一開始就更清楚顯示手勢。這項意見回饋可強化手勢啟動偵測功能,並採用減速機制,以賞心悅目且清楚的方式控制回饋。

執行

影片 5:執行快速滑過修訂的範例

當使用者手勢超過修訂點和發布時,系統會顯示動畫,確認動作已完成。

當使用者快速執行手勢時,系統通常會將其解讀為快速滑過動作。這類互動可將高速套用至螢幕上的元素,因此在返回預覽的內容中,系統會在執行修訂版本動畫之前,暫時將介面動畫朝最大預覽狀態,藉此吸收該速率。

快速滑過強度決定了在執行修訂版本動畫前,預覽動畫會顯示多少畫面。顯示的動畫類型取決於關閉的內容,如影片 2 所示。

取消動作

影片 6:取消動作的範例

影片 6 展示了使用者在達到門檻前放開手指會發生什麼情況,並顯示確認動作已取消的動畫。針對共用元素轉換,視窗會在手勢開始之前迅速移動並移回原始的邊緣至邊緣狀態。