iOS设备的常见差异化设计——系统架构

2021-12-02 16:19:16

阅读 11641次标签：系统架构作者： chenxi0

最近体验了一些比较热门的iOS应用在iPad端的交互设计，发现一些应用为了保证iPad端的用户体验，在应用框架层的设计上与iPhone端的保持了一定的差异化设计。

首先，手持式设备的导航及页面布局设计除了要实现产品目标之外，还需要考虑用户的使用场景和最舒适的握持方式。与iPhone不同的是，由于屏幕和设备尺寸，iPad会有3种握持方式：双手、单手、工具握持（比如支架），考虑到设备重量和使用场景，其中最为常见的是双手握持和工具（支架）握持。因此，iPad的最佳操作舒适区和热区也会因为握持方式的不同，双手握持的最佳操作舒适区在屏幕左右两侧；支架握持时则是全屏幕，这与iPhone存在着差异性。

比较之后发现，同一个应用在iPad和iPhone两种设备上的差异化设计主要表现在导航栏、标签栏、窗口、视图布局。当然，两种设备使用一套UI的APP除外。

一、导航栏控件的差异化

Navigation Bars（导航栏）显示在应用程序屏幕的顶部，位于状态栏下方，并可通过一系列分层屏幕进行导航。当显示一个新的屏幕时，一个后退按钮（通常标有前一个屏幕的标题）出现在该条的左侧。有时，导航栏的右侧包含一个控件，如Edit或Done按钮，用于管理活动视图中的内容。 ——《iOS人机界面指南》

导航栏除了后退、标题、操作这3个常见元素之外，还可以存在“分段控件”，这时候标题元素就不会存在。

iPad设备中的系统日历，在导航栏里通过分段控件，实现日、周、月、年4种视图的快速切换；而在iPhone设备中，则是通过导航栏左侧的返回按钮，实现不同视图的切换。

二、标签栏位置的差异化

Tab Bars（标签栏）出现在应用程序屏幕的底部，并提供在应用程序不同部分之间快速切换的功能。标签栏是半透明的，可以具有背景色调，在所有屏幕方向上保持相同的高度，并且在显示键盘时隐藏。 ——《iOS人机界面指南》

对于iOS端主流手持式设备iPhone来说，屏幕底部的标签栏是最为常见的功能切换方式。那么为了保证用户对系统的主要功能的认知一致性，个人认为：iPad在设计导航时，首先要尽量保证标签栏内容和功能的一致性，其次需要考虑握持方式和屏幕尺寸等因素，对标签栏位置、大小、视觉效果进行优化和调整。

iPad设备中的网易云音乐HD和印象笔记应用，将标签栏放在了屏幕的左侧，适应了iPad设备的最佳握持手势，方便点击切换；而iPhone设备中的标签栏按照《iOS人机界面指南》放在了屏幕底部，同时也符合iPhone的握持手势和点击舒适区域。

三、窗口形式的差异化Popovers

由于iPad设备屏幕较大，有着天生的空间优势，以至于在iPad设备上经常会出现“Popovers ”形式的弹出式窗口。如果Popovers 运用得当，可以极大地提升用户任务流的操作效率，因为它没有遮挡当前场景下的背景内容，让用户感觉到他们并没有离开这个“空间”。

Popovers是一个瞬时视图，当您点击某个控件或某个区域时，它会出现在屏幕上的其他内容上方或附近。通常，弹出窗口包含指向其出现位置的箭头。Popovers可以是非模态或模态的。通过点击屏幕的另一部分或弹出窗口上的按钮，可以解除非模态弹出窗口。点击弹出窗口上的取消或其他按钮即可解除模态弹窗。 ——《iOS人机界面指南》

Popovers非常适合在大屏幕设备上使用，它可以包含各种元素，包括导航栏、工具栏、选项卡栏、表、集合、图像、地图和自定义视图。当弹出窗口可见时，通常会禁用与其他视图的交互，直到弹出窗口被解除。

Modality

相比而言，iPhone的屏幕空间较小，因此在iPhone应用中，通常会在全屏模式视图中呈现相关信息而不是在弹出窗口中占用较小的屏幕空间。

Modality通过阻止人们完成任务或消除信息或观点之前做其他事情来创造焦点窗口。操作表单、警告、和活动视图时会出现模式窗口。当模态视图出现在屏幕上时，用户必须通过点击按钮或退出模态体验来做出选择。某些应用程序可以实现模式视图，例如在日历中编辑事件或在Safari中选择书签。模态视图可占据整个屏幕、整个父视图（如弹出窗口）或屏幕的一部分。模态视图通常包括退出视图的完成和取消按钮。 ——《iOS人机界面指南》

iPad的系统日历APP，新建日程采用的是Popovers弹出式窗口，充分利用了屏幕的空间优势；iPhone的新建日程，考虑到屏幕空间因素，则是从屏幕底部滑出一个全屏式Modality窗口。

iPad的系统地图应用，共享窗口也是在按钮附近显示Popovers；iPhone设备里则是从底部划出Modality窗口。

照片应用中，确认删除照片的窗口也存在差异性。

iPad的Mindnode应用，大纲窗口是Popovers弹出式窗口，可以显示/隐藏，以及调整窗口的高度；iPhone里，大纲是Modality窗口，用户需要关闭或收起这个窗口才可以进行其他操作。

四、视图布局的差异化

在iPhone（除 Plus）设备中，由于屏幕尺寸较小，因此系统和应用基本上只提供了小屏幕下的竖屏交互体验，而对于较大屏幕的iPad来说，考虑到屏幕空间的优势以及最佳握持手势这两个重要因素，对应用的试图布局进行差异化设计是非常有必要的。

Split Views（分割视图）管理两个并排的内容窗格的呈现，主窗格中包含永久性内容，辅助窗格中包含相关信息。每个窗格可以包含各种元素，包括导航栏，工具栏，选项卡栏，表格，集合，图像，地图和自定义视图。分割视图通常用于可过滤的内容;主窗格中将显示过滤器类别列表，并且所选类别的过滤结果将显示在辅助窗格中。如果您的应用需要它，主窗格可以覆盖次窗格，并且可以在不使用时隐藏在屏幕外。这在设备处于纵向方向时特别有用，因为它可以在辅助窗格中查看更多内容。 ——《iOS人机界面指南》

iPad存在竖屏和横屏两种屏幕方向，而分割视图是一种很灵活的视图布局设计方式，能够很好的应对iPad屏幕方向的切换。

通常情况下，分割视图将屏幕的三分之一给到主窗格，三分之二给到次窗格。

iOS12的系统股市应用