iOS 10 界面设计新发现

圆角

iOS 10 中的圆角更多也更显眼了。从 Spotlight 的搜索框,到通知中心和 Siri,还有按钮,看起来都比之前更加圆润。事实上,在 iOS 10 中几乎已经看不到直角矩形了,就连 News 中新闻配图、Music 中的专辑封面,以及 Photos 中的回忆相册封面也都套上了圆角矩形遮罩。

round-corner-elements

导航栏

Messages 的二级页面的导航栏上返回按钮右侧的“返回”文字消失了,只剩下了箭头图标;而原本直接使用会话人姓名作为导航栏标题的做法,如今变成了会话人头像与姓名的组合,导航栏的高度也随之增加。

fresh-looking-nav

Music、News 和 Home 的一级页面已经看不到传统意义上的导航栏了。取而代之的,是粗黑的左对齐大字号标题(我还不知道这些应用的二级页面的导航栏会怎么处理,因为我现在只能从苹果官网的 iOS 10 预览苹果开发者网站上窥探到 iOS 10 的部分界面)。

bold-title

Translucent Effect

也就是常说的毛玻璃效果,在 iOS 10 中几乎随处可见。一个我之前似乎从未见过的应用是 Toggle Button。Home 的一级页面中排列了场景模式和智能电器的开关。当这些控件所代表的状态未被激活或处于关闭状态时,控件使用了 translucent effect 作为这些状态的视觉提示;当处于被激活或开启状态时,控件则会切换至纯白色背景。

translucent-toggles

Modal View

Map 中有多处交互使用了 Modal View。在十分贴近这些视图顶部的位置有一条不粗不细的线,似乎在暗示着可以将这个视图向上拖进屏幕范围或者向下拖出屏幕范围,看起来有点像 Control Center;顶部两侧的转角运用了圆角,这点倒是和 Control Center 不太一样。奇怪的是,即便都出现在 Map 中,有些 Modal View 还自带一定透明的黑色背景遮罩,有些则没有;有些在视图右上角有看起来像是意味着关闭视图的圆形按钮,有些却没有。

map-modal-view

投影

投影出现了!虽然只在 Music 中有所应用,但在 iOS 7 之后,已经很久没有在 iOS 原生应用中见到这么显眼的投影了。和那些粗黑的标题一样,可能都是苹果在界面设计中的新鲜尝试。

shadow-style-in-music

3D Touch

圆角也太大了吧!

这是我看到 iOS 10 后到第一感受。如果要我给苹果为什么要这么设计作出一些解释的话,我觉得大概是为了 3D Touch。

3D Touch 有个问题就是视觉提示很少或者说几乎没有。当用户看着手机的时候,很难知道屏幕界面上有哪些区域是可以进行 3D Touch 操作的。很多人觉得这是硬伤,甚至直接给这个功能打上了“鸡肋”的标签。我倒觉得这个问题并不是大问题。因为对于在 PC 上何处使用右键,这个功能的掌握,我想任何一个 PC 使用者都经历过从茫然无知到推测尝试,最终内化为自然操作的过程。

iOS 9 时期,苹果为 3D Touch 定下了几个基本的使用域,包括主屏幕的应用图标和应用内 Table Row。观察这两处的 Pop View,其圆角大小和 iOS 10 中可进行 3D Touch 操作的元素十分相似。我怀疑,也许在使用和适应 iOS 10 一段时间之后,这些大圆角会慢慢变成 3D Touch 的视觉提示。一旦形成了视觉提示,用户便有可能将 3D Touch 内化为自然操作。

关于 3D Touch,我还有个观点是,这个功能或许只能被中高级用户熟练掌握。我并不喜欢将用户分等级,而且普世的设计原则是为所有人设计。但需要一些悟性才能熟练掌握的功能和操作方法并不是没有必要的。不满足于低效率基本操作的用户自然会希望有更高效的操作方法。就像键盘快捷键。如果不使用快捷键,使用鼠标点击当然也能完成一份文档的编辑,但使用快捷键的话,效率会提升很多。效率也是生产力嘛,没有人会拒绝高效率。

3D Touch 在 iOS 9 时期的尴尬是“快捷键太少了”,对于效率的提升并不明显。这次,iOS 10 拓宽了 3D Touch 的使用域,就像为系统多加了几个快捷键。我不敢说这对效率一定有显著的提升,但其可能性会大大增加。毕竟很多人的确只知道 Ctrl+C/V。

严格说来,3D Touch 属于交互设计的讨论范围,这里就算是借题发挥一下个人观点吧。