锐客网

  1. 首页 > 科技 > >

谷歌发布安卓折叠屏手机应用设计规范( 三 )

oled渲染图三星galaxy a53超炫屏


谷歌发布安卓折叠屏手机应用设计规范
文章插图

【 谷歌发布安卓折叠屏手机应用设计规范】△ 支持面板
信息流是新闻或社交类应用中的常见模式，模板采用图块 (Tile) 的形式来吸引用户发现更多内容。这种交互与移动手机一样 —— 打开一项即表示打开一个新页面，但这种体验更具沉浸感，而且专为大屏幕尺寸而设计。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

△ 信息流
主页横幅优先将内容排列在屏幕顶部，并在内容周围和下方设计了支持元素，这对以媒体为中心的应用来说，是非常棒的体验。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

△ 主页横幅
规范布局实践采用响应式界面不仅仅是为不同屏幕尺寸提供并行结构，应用还要足够灵活，这样才能根据各种需要调整尺寸，例如旋转设备、多窗口模式以及折叠和非折叠姿态。因此在运行期间，应用可从一个尺寸类别过渡到另一个尺寸类别，并再次过渡回去。重要的是，不要将尺寸类别视作完全独立的桶，应用也需保证连续性 (即不中断用户体验)，所以应用状态或数据不能丢失。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

△ 响应式界面可根据屏幕尺寸变化而调整内容布局
设想一下，当您调整浏览器窗口大小时，如果浏览器回退了一个页面，或者重定向到另一个页面，又或者修改了历史记录，这种体验非常奇怪。因此，每个页面都应足够灵活，而且应当能够在尺寸过渡期间保持状态不变，这个时候规范布局就能发挥重要作用。针对每个页面，您可以思考一下，当屏幕尺寸变大时，可以添加什么内容。当屏幕尺寸变小时，可以删除哪些内容。然后再选择合适的策略。这可能意味着您需要重新审视导航图，尤其是当您目前的设计以手机为主时更应如此。
如需构建响应式界面，我们应该优先考虑界面中长驻元素的位置，例如导航元素。遵循 Material 指南，我们可以根据宽度的尺寸类别提供替代布局，将导航调整到最方便使用的位置。例如，小屏幕采用底部导航视图，中等屏幕采用 Navigation rail，大屏幕采用完整导航视图。请大家注意，这些布局采用的是宽度限定符 "-w"，而非最小宽度限定符 "-sw"。剩余空间用于排列内容，我们可以在这些空间应用规范布局。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

列表 / 详情
对列表 / 详情而言，AndroidX 中有个名为 SlidingPaneLayout 的专用控件，使用前需为它的两个子元素指定 layout_width，在运行期间，SlidingPaneLayout 会判断是否有足够空间同时展示两个窗格:
△ SlidingPaneLayout 布局示例
当屏幕空间足够，则两个窗格至少都要达到指定的宽度，剩余空间可通过 layout_weight 分配，如左图所示；如果空间不足，如右图所示，则每个窗格都使用父视图的全宽，详情窗格将被滑到一边，或直接覆盖第一个窗格。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

谷歌发布安卓折叠屏手机应用设计规范
文章插图

△ SlidingPaneLayout 中空间分配结果
viewModel.selectedItemFlow.collect { item ->// 更新详情窗格的内容detailPane.showItem(item)// 将详细信息窗格滑动到视图中// 如果并排放置两个窗格// 并不会产生实际效果slidingPaneLayout.openPane()}

推荐阅读


上一篇：专利|OPPO 折叠屏手机外观专利获授权，可折叠两次

下一篇：智能手机|荣耀成为中国第三大智能手机品牌，成为增长最快的手机公司之一