赞助商
立即赞助

设计师应该知道的 iOS 设备常见差异化设计

UI设计3年前 (2021)更新 流光
2.1K 0 0

近入手了一台二手 iPad mini 2,体验了一些较热门的 iOS 应在 iPad 端的交互设计,发现一些应为了保证 iPad 端的户体验,在应框架层的设计上与 iPhone 端存在一定的差异化。

首先,手持式设备的导航及页面布设计除了要实现产目标之外,还需要考虑户的使场景和最舒适的握持方式。与 iPhone 同的是,由于屏幕和设备尺寸较大,iPad 会有3种握持方式:双手、单手、工具握持(如支架),考虑到设备重量和使场景,中最为见的是双手握持和工具(支架)握持。因此,iPad 的最佳操作舒适区和热区会因为握持方式的同而同,双手握持的最佳操作舒适区在屏幕左右两侧;支架握持时则是全屏幕,这与 iPhone 是有差别的。

设计师应该知道的 iOS 设备常见差异化设计

较之后发现,同一个应在 iPad 和 iPhone 两种设备上的见的差异设计要表现在4个方面:导航栏、标签栏、口、视图布。当然,两种设备使一套 UI 的 APP 除外。

一、 导航栏控件的差异化

Navigation Bars(导航栏)显示在应用程序屏幕的顶部,位状态栏下方,并通一系列分屏幕进行导航。当显示一个新的屏幕时,一个退按钮(通常标有前一个屏幕的标题)出现在该条的左。有时,导航栏的右包含一个控件, Edit 或 Done 按钮,用管理活动视图中的内容。 ——《iOS人机界面指》

导航栏除退、标题、操3个常见元素之外,还以存在「分段控件」,时标题元素就不存在。

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

设计师应该知道的 iOS 设备常见差异化设计

二、标签栏位置的差异化

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

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

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

设计师应该知道的 iOS 设备常见差异化设计

设计师应该知道的 iOS 设备常见差异化设计

三、 窗口形式的差异化

1. Popovers

由于 iPad 设备屏幕较,天的空间优势,以至于 iPad 设备常会出「Popovers 」形式的弹出式窗口。如果 Popovers 运用得当,可以极提升用户任务流的操作效率,因它遮挡当场景下的背景内,让用户感觉到他们并离这「空间」。

Popovers 一瞬时视图,当您点击某控件或某区域时,它会出屏幕的其他内方或近。通常,弹出窗口包含指向其出置的箭。Popovers 可以非模态或模态的。通过点击屏幕的另一部分或弹出窗口的按钮,可以解除非模态弹出窗口。点击弹出窗口的取消或其他按钮即可解除模态弹窗。 ——《iOS人机界面指南》

Popovers 非常合屏幕设备使用,它可以包含各种元素,包括导航栏、具栏、选项卡栏、表、集合、图、图自义视图。当弹出窗口可见时,通常会禁用与其他视图的交互,直到弹出窗口被解除。

2. Modality

相比言,iPhone 的屏幕空间较小,因此 iPhone 应用中,通常会全屏模式 Modality 窗口中呈相关信息不弹出窗口中占用较小的屏幕空间。

Modality 通过阻止人们完任务或消除信息或观点之其他事创造焦点窗口。操作表单、警告、活动视图时会出模式窗口。当模态视图出屏幕时,用户必须通过点击按钮或退出模态体验出选择。某些应用程序可以实模式视图,例如日历中编辑事件或 Safari 中选择书签。模态视图可占据整屏幕、整父视图(如弹出窗口)或屏幕的一部分。模态视图通常包括退出视图的完取消按钮。 ——《iOS人机界面指南》

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

设计师应该知道的 iOS 设备常见差异化设计

iPad 的系统图应用,共享窗口也按钮近显示 Popovers;iPhone 设备里则从底部划出 Modality 窗口。

设计师应该知道的 iOS 设备常见差异化设计

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

设计师应该知道的 iOS 设备常见差异化设计

iPad 的 Mindnode 应用,纲窗口 Popovers 弹出式窗口,可以显示/隐藏,以及调整窗口的高度;iPhone 里,纲 Modality 窗口,用户需关闭或收起这窗口可以行其他操作。

设计师应该知道的 iOS 设备常见差异化设计

四、视图布局的差异化

在 iPhone(除 Plus)设备中,由于屏幕尺寸较小,因此系统和应基本上只供了小屏幕的竖屏交互体验,而对于较大屏幕的 iPad 来说,考虑到屏幕空间的优势及最佳握持手势这两个重要因素,对应的试图布进行差异设计是非有必要的。

Split Views(分割视图)管两个并的容格的呈现,格中包含永久性容,辅助格中包含相信息。每个格可包含各种元素,包括导航栏,工具栏,项卡栏,表格,集合,图像,地图和自定义视图。分割视图通于可过滤的容;格中将显示过滤器类别列表,并且类别的过滤结果将显示在辅助格中。如果您的应需要它,格可覆盖次格,并且可在使时隐藏在屏幕外。这在设备处于纵向方向时特别有,因为它可在辅助格中查看更多容。 ——《iOS人机界面指南》

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

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

设计师应该知道的 iOS 设备常见差异化设计

△ iOS12的系统股市应用

设计师应该知道的 iOS 设备常见差异化设计

△ iOS12的系统语音备忘录

设计师应该知道的 iOS 设备常见差异化设计

△ Youtube

设计师应该知道的 iOS 设备常见差异化设计

△ Bear

iPad 网易云音乐HD应用,用户在歌单列表击某个首歌评论按钮时,评论列表会从屏幕右侧滑入,并将歌单列表左移。过分割视图很好地表现了父子视图关系。

设计师应该知道的 iOS 设备常见差异化设计

总结

 iPad  iPhone 这两类 iOS 设备设信息架构框架时,首先要保证户对系统/产功的认知一致性,次需要基于户场景和最佳握持手势,对导航栏、标签栏、口及视图布进行必要的差异设计。我想,这4个见的差异设计同时是符合 iOS 人机界面指南描述的界面设计大要点的:导航、视图、控件。

欢迎关注作者的微信公众:「设意志」

设计师应该知道的 iOS 设备常见差异化设计

图片素作者:Virgil Pana

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

视觉设计师≈美工/图标仔,是很多“圈外人”甚至设计师自己对“视觉设计”的理解。 当然,“美”作为信息传达的载体,其本质上,也...
用户体验设计
步入职场,成为一名交互设计师快满三年,文章谈谈我今年成长的关键词,以及分享一些心得。 1. 实战 今年一整年我都在学习人...
交互设计师
我们每天都会用微信,但是却不知道有些功能它的存在,究其原因是因为这些功能的使用频率不高,所以产品设计者把他们放到了比...
产品细节
为什么交互设计能帮助产品解决问题 为什么那么多人觉得应该先学UI设计再学交互设计,因为UI门槛低所以入手快。其实交互比UI更...
UI 设计
很多产品设计师,在画原型或者设计 UI 的时候痴迷于工具的使用,拿到需求文档之后急于动手画图,忽略了信息架构设计对于产品...
信息架构
作为一名 UX 设计师或者实习生,入职新工作的前一两周一般都是轻松无压力的。这段适应期甚至只会给你一个需求任务,你只用画...
UX设计
据 Statista 统计,2018年第一季度,Google Play Store 每天平均发布 6140 个应用。然而,77% 的用户在安装应用程序 72 小时...
游戏化设计