桌面版使用入门

桌面设备体验从一开始就具有自适应性,支持在连接的显示屏上或窗口内显示各种尺寸的内容。通过创建自适应界面来支持各种 Android 设备。自适应布局对于桌面设备体验至关重要,可让用户顺畅地调整应用窗口大小。

若要为桌面设备体验准备应用,请先调整应用的界面,然后继续进行密度和输入互动设计。如需了解详情,请参阅自适应布局。如需通过设计实验练习,请参阅自适应设计实验

以窗格为单位思考

通过使用分组和包含功能,采用基于窗格的布局方法。您可以使用视觉容器或通过空白空间进行隐式分组来整理内容。这些窗格非常灵活,可以展开、限制、隐藏、移动或显示为弹出式窗口。使用窗格进行设计可简化在各种移动设备上创建一致体验的过程,并且可以与当前网格集成,以简化复杂的布局对齐。

您可以将类似的内容分组在一起,以帮助创建窗格和包含逻辑。
可以将类似内容分组在一起,以帮助创建窗格和包含逻辑。
考虑内容容器或窗格,而不是屏幕。

缩放

虽然大屏幕可以容纳更多内容,但必须考虑额外的空间和人体工程学因素,例如观看距离。应略微放大字号,以便可能离得较远或使用键盘输入文字的用户能够舒适地查看。

在大屏幕上缩放界面元素和文字
选择较大的标题,以便更充分地利用空间。

界面元素和字体会在扩展显示屏和已连接的显示屏上进行缩放,并且由于屏幕分辨率不同,缩放比例可能也会有所不同。

在现有字号比例设计中增加一到两个步长,或者考虑实现专为桌面设备和扩展显示屏设计的专用字号比例。您可以在设计中进行主观调整,以提高编辑质量。

图片也会放大并铺满整个屏幕。这样一来,用户可以更详细地查看植物,但空间利用率不高。在构建界面元素时,请谨记这一点。

内容和界面元素

现在内容已分组并缩放,部分内容界面也可以移动或更新,以更好地适应断点。

在每个内容窗格中,确定是否以及如何进行自适应调整。查看内容本身。如果列表行更改为卡片,内容是否会失去互动效率和可扫描性?组件在不同断点处的行为可能会有所不同。它们会调整其宽度或可见性,甚至切换组件。

确定窗格中每个界面元素和复制内容的最大宽度。界面元素不应拉伸到全宽或出现扭曲。设置窗格内的边衬区和边距上限。文案应限制行长,以便用户舒适地阅读。短文案的长度应限制在 60 个字符左右,而长文案的长度可以更长。

为内容和组件设置最大宽度,以防止拉伸到全宽度。

使用优雅的渐进式显示。用户增大窗口尺寸时,是否可以显示更多内容?考虑一下,额外内容是否能以更少的点击次数提高工作效率,还是会造成混淆。

在紧凑布局中,说明处于隐藏状态,而在展开布局中,系统会显示完整说明,以充分利用空间。

每个窗格中的内容都可以更改布局,具体取决于内容,方法是重新排列到不同的列和网格结构中。例如,带有轮播界面的垂直网格可以更新为带有精选轮播界面的瀑布流网格。考虑元素的垂直变化,并将其与限制和呈现变化相结合。您可能不希望像这样移动组件,具体取决于内容消费情况。

基于包含关系和设置布局最大宽度的重排内容容器的线框视图。

考虑让用户根据自己的偏好调整布局,以最大限度地提高可读性和工作效率。

最终改编的内容。

调整内容和界面元素后,请确定内容窗格如何相互交互以及如何与导航层次结构交互。您无需点按即可前往详细内容,而是可以利用额外的屏幕空间并排显示详细信息和辅助内容。

  • 如果使用导航栏,则应将底部栏更新为屏幕侧面的侧边导航栏,以提高人体工程学效果。不拉伸底部导航栏。
  • 对于标签页等辅助导航,请考虑将其固定为最大宽度,以便更精确地进行导航。
  • 应用栏也可以固定到相应的内容窗格,但请务必不要混淆导航层次结构。
精简模式和展开模式下的导航
紧凑模式和展开模式下的导航。

密度

由于输入精度和屏幕尺寸,桌面体验可能会改变其互动密度和视觉密度。

  • 与紧凑型手机布局相比,您可以增加表格数据等视觉元素的密度,而不会让用户感到信息过载。将所有内容密度视为可选,并始终允许在布局内进行文字缩放,不要硬性设置字体大小。
  • 组件应具有更精确的点击目标。组件周围的固有点击目标可能会导致误点击。
布局文本中的密度。
布局文本中的密度。
移动设备和桌面设备之间的按钮目标尺寸
移动设备和桌面设备之间的按钮目标尺寸。

输入

更多输入方式意味着用户可以采用更多互动模式。

当用户拥有鼠标和键盘时,您的应用需要考虑悬停状态和焦点。

  • 为指针输入源(例如鼠标和触控笔)添加悬停状态。
  • 当用户使用 Tab 键进行无障碍浏览时,捕获元素的焦点状态。
  • 考虑光标状态,因为光标还可以帮助向用户传达互动和应用状态。
悬停时的其他互动
鼠标指针悬停时的其他互动。

添加更多状态可以提高效率。

  • 右键点击功能可以包含上下文菜单,以便快速访问功能。
  • 悬停提示可帮助用户入门。
  • 键盘快捷键可帮助高级用户提高工作效率。
右键点击上下文菜单
右键点击上下文菜单。