請先找出核心內容,再設計有效的小工具版面配置。版面配置會決定資訊和互動式元素在小工具中的排列方式。Android 提供多種預先建構的版面配置,適用於工具列、文字、清單和格線型小工具,可簡化這個程序。
文字
文字版面配置適合顯示簡潔的資訊。你也可以在文字旁加入圖片,提升小工具的視覺吸引力。
適合用於標題、狀態更新、簡短說明,或任何單行文字就能有效傳達訊息的情況。如要瞭解如何根據小工具大小動態縮放文字內容,請參閱標準版面配置範例。
加入圖片,增加視覺衝擊力。詳情請參閱「中斷點」,瞭解如何根據不同螢幕大小調整版面配置。
工具列
使用工具列版面配置,讓使用者在應用程式中快速存取常用工作,並以彈性版面配置配合小工具大小調整。
搜尋工具列版面配置的設計目的,是為了將焦點放在工具列中的主要動作「搜尋」。其他實用按鈕可讓你快速存取常用功能。
工具列會顯示應用程式品牌,接著是常用工作的按鈕,非常適合用於可切換的設定或工作連結。調整大小時,系統會隱藏較不常用的選項,顯示較常用的動作。使用「中斷點」,在有空間時新增最小 48 dp 的可輕觸按鈕。
清單
使用清單版面配置,以清楚且可掃描的格式整理多個項目。這項功能非常適合用於新聞標題、待辦事項清單或訊息。將內容整理成結構化的可掃描清單。根據內容需求,選擇是否要以容器呈現。
可掃描的文字和圖片清單非常適合展示多種內容類型,例如新聞標題、附有專輯封面的播放清單或訊息。
核取方塊版面配置非常適合顯示工作,並提供明確的輕觸目標,方便使用者快速將項目標示為完成。
透過動作清單提供直覺的控制項分組,視覺化的開啟/關閉狀態可立即回饋項目狀態。
格線
以精簡、彈性且視覺豐富的格狀版面呈現圖片,並搭配選用標籤。 使用可因應不同螢幕大小的欄和列。
使用僅含圖片的格線,建立視覺效果出眾的可捲動圖片庫。系統會根據不同螢幕大小自動調整列和欄,以呈現最佳效果。
你也可以加入文字標籤和說明,為圖片格內容提供更多背景資訊。