UX
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。

第 2 层级 - 针对大屏设备优化
对用户而言,界面就是应用。界面决定了用户体验,而用户体验决定了用户满意度、应用使用情况、应用购买情况和客户留存率。
大屏设备提供了广阔的显示空间,可用于打造创新且宽松的界面,从而提供小屏设备无法复制的用户体验。
请添加以下界面元素,针对大屏设备优化您的应用:
- 侧边导航栏或抽屉式导航栏
- 较大的触摸目标
- 菜单和对话框的位置恰当
- 多窗格布局
自适应布局
创建自适应布局,以优化应用在各种大小的屏幕上的界面。
同时针对多种外形规格进行设计和构建。让应用为新设备类型做好未来准备。
规范布局
利用久经考验的大屏设备布局,打造出色的应用用户体验。
创建列表-详情、辅助窗格或 Feed 布局,让用户更轻松地管理和欣赏更多内容。
自适应界面
根据屏幕尺寸设置界面元素格式。对于会占据小屏幕整个宽度的按钮、卡片和文本字段,请限制这些元素的宽度,使其在大屏设备上具有能让功能正常运行的尺寸。请勿让对话框和其他模态窗口填满整个屏幕。让上下文菜单和与元素相关的其他弹出式窗口显示在用户所选的元素旁边,而不要在屏幕上居中显示。
activity 嵌入
更新基于 activity 的旧版应用,使其在大屏设备上采用多窗格布局。无需重构代码。您可以在 XML 中或通过进行几个 Jetpack WindowManager API 调用来配置布局。
后续步骤
如需了解如何开发可优化用户体验的界面,请参阅以下开发者指南:
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-27。
[null,null,["最后更新时间 (UTC):2025-07-27。"],[],[],null,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]