為了因應日益增加的螢幕尺寸,我們已將回應式行為納入 ProtoLayout Material 版面配置範本和 Figma 設計版面配置,讓這些版面配置自動調整。基本上,運算單元會填滿可用的寬度。我們將邊界設為百分比,並在螢幕底部和頂端的插槽中加入額外的內部邊界,以便在螢幕放大時考量曲線的變化。
為了充分利用更大的螢幕尺寸和額外空間,建議您利用額外的螢幕空間,讓使用者存取額外資訊或選項,提供更多價值。如要實現這些版面配置,除了內建的回應式行為之外,還需要額外自訂。方法是將更多實用的內容加入中斷點後的版面配置。請注意,建議的中斷點是設在 225dp 螢幕大小。
重要條款
回應式設計:一種設計方法,可讓版面配置動態調整按鈕、文字欄位和對話方塊等元素的格式和位置,提供最佳使用者體驗。採用回應式設計做法,自動為使用者提供更大的螢幕畫面,進而提供額外價值。無論是讓使用者一目瞭然的文字、畫面上的更多操作,或是更大、更容易觸及的目標,回應式設計做法都能為大螢幕使用者提供更優質的體驗。
自適應設計:一種設計方法,可根據已知的使用者、裝置或環境條件變更介面。Material 中的自動調整式設計包含版面配置和元件的調整功能。
建立回應式及最佳化設計
為確保設計版面配置能配合較大的螢幕尺寸,我們已更新版面配置和元件的行為,讓版面配置和元件具備內建的回應式行為,包括以百分比為準的邊界和邊框間距。如果您使用的是 ProtoLayout 範本,可以透過 ProtoLayout API 和 Beta 版發布說明自動繼承這些更新,只需在螢幕大小中斷點後新增其他內容或元件的版面配置即可。如需完整指南和建議,瞭解如何善用更大的螢幕尺寸,請參閱我們的圖塊指南。圖塊的螢幕高度固定,因此我們調整了邊框,盡可能充分利用有限的螢幕空間,同時避免不必要的裁剪。