莫b
iOS系统迎来了一次重大更新,iOS13。在这次更新中,深色模式无疑是系统最大的亮点之一。
除此之外,作者还发现了新系统在交互设计上的一些改变。这些改变,有的是改的更好了;有的。。。作者认为还值得商榷。下面为大家一一解析。

 

照片应用全新改版

照片App,有4个tab。第一个tab,也是最重要的tab,是“照片”tab。照片App的这次改版,改动最大的也是照片tab。
设计改版,从表皮上看是改变了页面的排版和样式;从核心看,是改变了产品的形态,目的只有一个:用更好的方式满足用户的
于是问题来了:在照片tab里,用户的需求是什么?
分析可知,用户的需求主要有以下两个:
  • 1. 按照时间先后顺序,浏览照片。这就像用户使用实体的相册,从前往后翻阅相册,以此回忆起某个时间段,比如“去年暑假”、“刚工作那年”。
  • 2. 根据时间信息,寻找某张照片。比如,“我想找去年9月左右的一张照片”。
分析一下上面两个需求,不论是浏览,还是寻找特定照片,用户都需要先定位到某个时间段。因此,如何以一种高效的
形式呈现出时间线上的照片,就成为设计的重点。
在改版前,照片以“照片墙”的形式呈现:“年”的维度中,照片尺寸最小;点击后,展现“月”维度,照片尺寸加大;再次点击,进入“天”维度,尺寸更大,如下图所示👇
相比旧版,苹果新版的做法,是把一个时间段的相片,用相册的形态封装起来。
比如,用户想看2014年的照片,可以先找到“2014年”这个相册,再浏览2014年当中以月份组织起来的相册,如下图所示:
在每个维度下,相册都有一张封面图,用户可以通过封面图了解该相册的内容。
相册封面图比起改版前的缩略图照片墙,浏览起来容易多了。
但这也有一个弊端:封面图每次只能展示一张图片,对整个相册的内容无法完整的概括。苹果设计师的解决办法,是在“年”这个维度下,相册在静止的情况下,最底部位置的封面图会自动每隔4秒自动切换,就像很多应用顶部的焦点图那样;如果在封面图位置按住并左右滑动,也可以切换封面图的照片👇
这个交互操作,巧妙地解决了“相册只使用一张封面图,如何代表这个相册”的难题,可以说是神来之笔了。
另外,新版照片App,在底部增加了一个操作栏,点击可以切换“年”、“月”、“日”、“所有照片”这些维度;增加了手势返回的支持:从屏幕左边缘向右滑动,可以返回上一个维度,例如现在用户位于“日”这个维度,向右滑动则可以返回到“月”这个维度。这些控件和操作的增加,对于用户在不同时间维度之间切换,还是很方便的。

 

 更灵巧的音量提示

iOS13之前,用户按动手机左上侧的实体音量键,则会出现如下的提示:
这个提示控件名叫HUD,中文翻译为“透明指示层”。这个透明指示层个头很大,而且位于页面正中央,经常会挡住页面中的关键信息。
苹果的设计团队大概也发现了这个问题,因此在iOS的升级中,用一个更灵动小巧的音量提示取代了HUD👇
具体交互逻辑如下:
  • 点按音量增加或减小按键,音量提示会从左向右进入,出现在音量键的旁边,且形态是比较粗的柱形,柱形底部展示有音量icon;
  • 此时继续点按音量增加或减小按钮,则音量提示由较粗的柱形,变为较细的柱形,底部音量icon消失;
  • 当用户没有继续点按音量键,则较细柱形从右向左退出;
  • 音量提示退出后,用户如果在3秒内,又一次点按音量增加或减小按键,则较细柱形从左向右进入;
  • 若用户在3秒外点按音量按键,则仍出现较粗的柱形。
观察上面的交互逻辑,可以看到,音量提醒有两种形态:较粗柱形和较细柱形。
为什么会有两种?
沐风认为,较粗形态是提示用户“当前柱形代表的是音量”,但由于较粗的柱形遮挡面积较大,因此它会迅速变成较细的柱形,以减少遮挡。
当手机横置,点按音量按键,音量提醒会移动到屏幕顶部区域,这样设计的原因,是顶部区域较为明显,可以让用户可以及时看到音量调节情况,获得及时反馈。
另外还有一个彩蛋:当音量调到最大,为了表现出“已经到头了不能再调大了”的含义,手机会给出震动反馈,柱形也会表现出被“抻(chen)”了一下的动效,效果十分呆萌👇
当音量调到最小然后继续点按音量减小键时,也会有震动+动效👇

 

更轻量的模态视图

模态视图,是苹果iOS设计规范中提出的一个概念,是指那些在当前页插入的“浮层页面”。
模态视图一般用于在一个大功能流程中,相对独立的小功能。比如在照片App中,浏览查看照片是应用的核心功能,而对于照片的分享、打印等等都属于独立的小功能。这些“用完就走”的小功能,就很适合使用模态视图来承载。
在iOS13之前,iOS系统里的模态视图,一直是全屏的形态,如下图所示👇
iOS13中,将模态视图改成了非全屏的形态(顶部会露出一些空间),且支持手势向下滑动,则退出当前模态视图页面,如下图所示👇
这样的改变,让体验更轻了。
所以,更轻了是不是好事呢?
沐风认为是好事。原因是模态视图承载的功能,都是当前情景下的一些简单操作。这些简单操作,宜轻不宜重。
道理很简单:如果这些操作太复杂,会影响用户对应用里核心功能的使用,属于本末倒置。最好的情况,是用户迅速用完这些分享、打印之类的简单操作,然后继续浏览照片的核心功能使用。
iOS13,将模态视图轻量化,更激励用户用完就走,是符合场景的设计。

 

3D Touch 变 “Haptic Touch”

在iOS13以前,系统里是有3D touch的:当用户“先按住,然后再更用力向下按下去”,就会触发3D Touch。这个交互操作很创新,但使用成本略大。反正沐风我是很少使用这个操作了,因为用起来真的会觉得有一点不爽:先按着,然后使劲按,比别的操作都要费劲。
这次iOS13的更新,把3D Touch直接改成了Haptic Touch,也就是长按操作。说实话比原来顺畅多了,也轻松多了。
下图所示,是在iOS自带的邮件应用里,长按一封邮件后,出现的页面。左边是默认的状态,当用户在页面上从下向上滑动后,则出现右边所示的状态。
其实长按所唤起的这些操作选项,逻辑上很像是电脑上的“单击鼠标右键”所唤起的选项,是系统提供的、在当前情景下,可以对当前目标进行的一系列的额外操作选项。

 

新增三指长按操作

在iOS中,三指长按,并且满足以下条件时,会出现剪贴板:
  • 1. 当前页面有输入光标;
  • 2. 剪贴板中有内容(也就是说,你进行过剪切、复制操作,或者输入文字操作)。
如下图所示👇
不过在体验这个功能的过程中,发现一个bug:iOS自带的备忘录应用中,两种操作栏出现了重叠👇
在其它应用中,如果唤起一种操作栏,则另一种操作栏会消失,逻辑更为合理。
在体验的过程中,发现三指长按时容易触发到别的操作。
总体来说,三指长按操作,触发条件比较隐蔽且多,使用起来不是很方便。个人不是太喜欢这个新增的设计。

 

分段控件:没做好的设计更新

下面这张图,对比了改版前后的分段控件👇
可以看到,改版之后,去掉了原有的分割感,取而代之的是在一个通栏中,用一个白色按钮来表现当前的选中项。
在交互上,这个控件没有变化,依然是只能用点击来选择分段控件里不同的选项。但改版之后,视觉上造成了一种“可以通过滑动来切换选项”的错误预期
虽然改版后,视觉上更柔和了,但从交互的角度,这样的改变可能会误导用户进行左右滑动来切换,是有一定缺陷的。
再贴一个App Store的截图👇
看起来确实很有滑动感啊,有木有。
以上为大家分析了iOS13中,6个交互优化。从中可以看出,设计师懂些交互,还是很有必要的
如果文章对你有启发,欢迎转发👏。

 

原文地址:沐风与体验设计(公众号)
作者:小哥哥沐风

转载请注明:学UI网 » iOS13:交互上都有哪些更新?

登录收藏
 
你可能喜欢的:
如何做出好的“卡片”设计?8种方法大分享如何做出好的“卡片”设计?8种方法大分享
如何悄无声息的如何悄无声息的”杀死”交互等待
UI备忘单:文本字段UI备忘单:文本字段
B端筛选器的小秘密,你们发现了吗?B端筛选器的小秘密,你们发现了吗?
说这款银行APP不但省钱还体验很好,于是我们评测了一下说这款银行APP不但省钱还体验很好,于是我们评测了一下
QQ亲密关系 | 从工具到情感再到认同QQ亲密关系 | 从工具到情感再到认同
产品思考:体系化设计流程与思路产品思考:体系化设计流程与思路
PRD分享:「luckin coffee 购买流程」产品需求文档PRD分享:「luckin coffee 购买流程」产品需求文档
底部导航设计的黄金法则底部导航设计的黄金法则
乔布斯和淘宝都喜欢的圆角卡片乔布斯和淘宝都喜欢的圆角卡片