小工具設定

設定小工具,顯示應用程式中的特定內容或資料。

使用設定的時機

讓使用者在選取小工具時或透過按住操作設定小工具。請考量自訂功能對小工具體驗的重要性,再決定何時開放使用。

  • 如果小工具顯示空白,且您未選擇設定或自訂項目,請在放置小工具時直接開啟設定工作流程。
  • 如果小工具具有偏好的預設值,或不需要使用者先選取內容再查看,則小工具不需要初始設定畫面。在這些情況下,請讓使用者在刊登後存取設定。

直接使用者

建議您提供設定步驟,為含有多個內容類別的應用程式 (例如電子郵件應用程式) 提供可自訂且一目瞭然的體驗。

圖 1:讓使用者設定小工具,並選擇要顯示的資料夾。

使用設定的時機

讓使用者在選取小工具後,或透過按住小工具的方式,設定小工具並顯示在主畫面上。請考量自訂功能對小工具體驗的重要性,再決定何時開放使用。

  • 如果小工具顯示空白,且您未選擇設定或自訂項目,請在放置小工具時直接開啟設定工作流程。
  • 如果小工具具有偏好的預設值,或不需要使用者先選取內容再查看,則小工具不需要初始設定畫面。在這些情況下,請讓使用者在刊登後存取設定。

直接使用者

引導使用者完成設定,並提供清楚的回饋。如果應用程式已包含設定流程,您可以複製應用程式內的設定體驗,最好將流程縮減為 1 到 2 個畫面。

提供清楚的選項路徑,引導使用者新增小工具。

舉例來說,左側的鬧鐘設定畫面只允許使用者選取鬧鐘類別,然後新增小工具。輕觸類別會關閉設定步驟,並新增小工具。如果尚未完成設定,請勿取消新增小工具。提供狀態,以便在小工具中還原或設定。

引導使用者進入死胡同,或將這個步驟視為應用程式內設定。

在本例中,即使選擇要顯示的內容,透過 x 圖示關閉設定檢視畫面時,系統也不會新增小工具。

如果沒有其他預設選項,請加入空白狀態。空白狀態可以顯示入門或驗證提醒,確保引導使用者。

自訂小工具外觀

盡可能提供理想的預設小工具,讓使用者不必自訂就能快速上手,或瞭解小工具在主畫面上的顯示方式。

自訂小工具外觀時,顯示小工具的預覽畫面。

圖 2:顯示自訂預覽畫面的小工具。

針對進階控制項使用漸進式揭露功能,協助使用者快速完成自訂作業。

圖 3:使用者選取自訂大小後,顯示大小滑桿。

變奏曲

如果小工具的自訂選項有限,小工具挑選器會直接顯示熱門或獨特的設定。這樣就不需要另外設定畫面。

應用程式支援的小工具數量不限。不過,小工具挑選器必須著重於只顯示重要工作和實用變化版本。將挑選器預覽畫面限制為 6 到 8 種變化。透過確認畫面允許存取其他變體。

提供可設定選項的專屬小工具用途,例如步數小工具和連線小工具。
在挑選器中顯示所有可能的變化版本。而是將這些選項顯示為設定選項。

版面配置

建構設定畫面時,請遵循版面配置基本概念最佳做法,或善用Material Design 元件,例如含有切換開關、核取方塊和切換按鈕的清單版面配置。如要進一步瞭解如何製作高品質的小工具版面配置,請參閱「小工具品質」一文。