Trackr 是一个能够治理工作的示例利用，除了次要用于从反对辅助性能的角度摸索通用的 UI 范例外，它还是咱们展现古代 Android 开发最佳实际的示例之一。近期咱们为它适配了大屏幕设施，所以无妨一起看看怎么在利用中应用 Material Design 和响应式范式，让利用在大屏幕设施上提供更粗劣、更直观的用户体验。
导航
调整前 : 从工作 (Tasks) 界面，您能够从底部利用栏的菜单中找到归档 (Archive) 和设置 (Settings) 选项。在大屏幕设施上，弹出菜单是一个小触控区域，它处于不太不便操作的地位。并且底部利用栏也被适度拉伸了。
△ 左侧: 手机上的导航展现。右侧: 平板上的导航展现。
调整后 : 当屏幕变宽时，咱们显示导航轨道 (navigation rail) 来取代底部利用栏。咱们也将悬浮操作按钮 (用于关上新建工作界面) 放到导航轨道中，从而齐全移除底部利用栏。
△ 在大屏幕上的导航轨道
尽管是思考到较大屏幕的设施而进行的此项更改，但因为腾出了更多的纵向空间来显示工作列表，横向模式显示的手机也可能因而受害。
△ 横向显示的手机上的导航轨道
双窗格布局
调整前 : 工作 (Tasks) 和归档 (Archive) 界面齐全占满了整个显示宽度，并且点击列表中某一我的项目时，其对应的详细信息会笼罩显示之前的列表。在大屏幕上，UI 元素要么被拉伸，要么挤在一边，导致屏幕内容显得很不均衡。
△ 在手机上这样显示很天然，但在大屏幕上的空间利用率却不太现实。
调整后 : 工作 (Tasks) 和归档 (Archive) 界面都通过 SlidingPaneLayout 显示 列表 / 详细信息布局。咱们在此前一篇文章中形容了怎么实现这种布局，如果您对具体的技术细节感兴趣，请参阅文章《实际 | Google I/O 利用是如何适配大尺寸屏幕 UI 的？》
工作详细信息 (Task Detail) 界面中也有一个悬浮操作按钮 (用于关上编辑工作界面)，但如果导航轨道正处于可见状态，就会导致屏幕中呈现两个悬浮操作按钮，这显然不太现实。于是咱们将第二个悬浮操作按钮暗藏，并在右上角的工具栏增加了一个编辑按钮。
△ 双窗格布局能更好地利用屏幕空间
编辑工作和新建工作
调整前 : 当您编辑一个工作时，编辑工作的界面会取代工作详细信息界面，并占据整个屏幕。和此前的工作详细信息界面一样，这样会使屏幕内容显得不均衡。新建工作界面也存在这个问题 (事实上，新建工作和编辑工作界面在咱们的导航图中实质上是雷同的目标页面)。
△ 左侧: 手机上的编辑工作界面。右侧: 平板上的编辑工作界面。
调整后 : 在大尺寸屏幕上，咱们应用了 DialogFragment，于是编辑工作的界面就悬浮在了其余内容之上。
△ 悬浮的编辑组件将关注点放在用户以后的指标内容上
起初咱们尝试将编辑工作界面取代工作详细信息 (Task Detail) 显示在详细信息窗格中。尽管这样很含糊其辞，但咱们很快就发现这种实现形式并不能让咱们称心，起因如下:
- 这对于创立新建工作 (New Task) 界面是没有意义的，因为它曾经位于导航轨道中，能够全局拜访了。咱们能够将其作为独自的导航目标页面，并调配不同的行为，然而感觉这不是个好方法。
- 编辑工作 (Edit Task) 看起来与工作详细信息 (Task Detail) 十分类似，只不过其中的属性字段是能够编辑的。在双窗格布局中，如果咱们在详情窗格里将工作详细信息替换为编辑工作，那么看起来仿佛没有产生什么变动——界面中必要的视觉强调还不够。相比之下，DialogFragment 吸引了用户，让关注点处于后面和两头。
- 在用户保留本人的改变或是咱们确认用户的批改能够勾销之前，咱们不心愿从编辑工作 (或者新建工作) 界面导航到其余中央。本来全屏显示编辑界面时，这种申请很容易被拦挡，因为惟一来到此界面的形式就是应用返回键。然而应用双窗格布局之后，咱们还须要关注额定的状况: 用户能够点击导航轨道中的其余按钮，或是列表窗格中的其余工作来切换。长期禁用这些元素会很麻烦。应用 DialogFragment 之后，所有的这些元素都位于对话框之后，使得用户不能与它们交互，这恰好是咱们想要的成果。
△ 新建工作应用了与编辑工作雷同的 UI 范式
这里的重点是，当您在设施上尝试那些最含糊其辞的设计时，可能会发现它们在性能上有所缺点。当这种缺点呈现时，后退一步，关注用户体验，并且寻找一种设计范式来改良它。
小结
随着平板电脑和可折叠设施逐步风行，创立响应式用户交互界面变得比以往更加重要。咱们展现了通过增加导航轨道和应用 SlidingPaneLayout，是如何让 Trackr 利用不仅看起来更好，同时还显著改善了可用性和发明了在手机上无奈感触的体验的。咱们还向您阐明了为了更好满足用户的需要，您应该怎么围绕可用性而不仅是屏幕空间来从新思考您的设计。
咱们心愿您喜爱更新和改良后的 Trackr 利用！您能够 查看源代码。
欢迎您 点击这里 向咱们提交反馈，或分享您喜爱的内容、发现的问题。您的反馈对咱们十分重要，感谢您的反对！