解析iOS7的动态焦点设计思维

182次浏览
解析iOS7的动态焦点设计思维

正如我们在很多类似的办公大楼中容易迷路,但是在很多全新设计的购物广场或古代庭院中却很容易辨识自己的位置和目的地,优秀的建筑室内设计不仅採用指示标誌引导人们,还能够以空间结构和独特的「韵律」来让人们与建筑产生空间共鸣。

同样的,在产品界面的设计中,随着功能和界面数量级不断增加,使用者是否理解自己所处的「位置」并且清楚的判断下一个「十字路口」该怎幺走,是作为产品易用性设计的重要评价标準。换句话说,常常害使用者「迷路」的界面产品具有很大的缺陷。

解析iOS7的动态焦点设计思维

作为使用界面体验的重要部分,产品界面的动态设计也不仅仅是用来增加视觉方面的感官刺激,更多的是影响使用者对产品的感知和理解。iOS 平台的动态设计,从第一代 iPhone 发表起即通过产品的动态表现,展现界面在 X、Y、Z 轴之间的空间层级关系。通过 iOS 平台的动态表现,使用者可以轻鬆地理解萤幕中所存在的「世界」,以及「我」在这其中所处的位置。而良好的动态设计和表现也是 2007 年 iPhone 诞生时,让使用者和全世界为之惊叹的原因之一。

解析iOS7的动态焦点设计思维

在 iOS 7 beta 版本发表后,我们就开始对新版本进行解构和研究。作为全世界最受关注的作业系统平台,iOS 7 对未来产品设计的影响不言而喻。

在动态设计方面,我与 eico 动态设计师白烨飞对已经发表的多个 beta 版本做了了分解和模拟。我们可以看到一种新的动态设计思维被加入 iOS 7 的平台,其中主要包括两个方面:其一是以操作焦点为中心的动态切换,其二是以「Parallax」结构为基础的空间速率变化。

操作焦点为中心

在 iOS 7 的桌面系统及内建 app 中,正式採用被称为集合视图转换的界面切换效果。此前 iOS 系统中不同层级间的界面切换,几乎都是以单一的平推是式进行。

而在 iOS 7 中的集合视图转换,大都採用了这种以使用者操作焦点为中心的运作方式。其特点为:集合视图界面的运动基準点或线,不再只是过去的萤幕中心或边缘,而是将使用者的操作点或轴线,作为界面切换运动的基準点或线。运动路径也从过去固定路径的运动,转变为根据操作点和轴进行移动的动态模式。这样的意义在于,进一步将使用者的操作与界面切换间的过渡动态做衔接,引导使用者在不同界面的切换过程中移动视觉焦点。而在过去大多数界面切换动态中,使用者不得不在每次界面切换完成后,再重新定位自己的视觉焦点。

解析iOS7的动态焦点设计思维

首先可以看到,在桌面层级中,无论是点击某个图示打开 app 的启动动态,还是打开 app 文件夹的展开效果,都是以使用者的操作点为放大中心进行。每个区域点击后的效果速率也是不同的,这样的速率规则贯穿于所有的同类动态中,后文中会进行详解。

解析iOS7的动态焦点设计思维

同样的规则也适用 iOS 7 其他内建 app。全新设计过的行事曆 app,由年份转换到月份的切换动态,以使用者所点击的日期为中心进行动态放大切换,由月份到单一日期的过程,则是以所点击的日期所在位置,做 Y 轴的纵向提升。

解析iOS7的动态焦点设计思维

在全新的相片 app 界面中,由年份 -> 选集 -> 时刻的切换动态中,照片缩图在不同尺寸上的放大直到全萤幕的效果,动态运动轨迹取决于使用者在萤幕上的触控点。

解析iOS7的动态焦点设计思维

新版 Safari 的设计,操作焦点引导的设计思维主要呈现在分页选择的切换方式上。相较旧版本,新版 Safari 採用纵向层叠浏览页面的设计方式,使用立体透视的层叠效果,善加利用直立萤幕空间。同时,在点击选择页面至放大的切换效果时,以点击位置作为基準线进行立体透视运动。

解析iOS7的动态焦点设计思维

实际上,以操作焦点为基準的动态运动,并不是 iOS 7 才出现的新产物,包括在 Clear、Evernote 等 app 以及 iOS 5 的部分设计中,早已採用了类似的设计方式。但是对 iOS 来说,从系统层级开始就全面导入这样的设计理念,可以算是六年来一次很大的进步。

解析iOS7的动态焦点设计思维
「Parallax」空间速率

前面谈到基于操作焦点的切换模式,是从运动的方位轨迹上来做分解。对动态设计来说,运动速率则是影响使用者感知的另一维度。就像是同样的乐谱,用不同的节拍速度进行演奏,可能会出现催眠曲和电子舞曲这样截然不同的效果。

iOS 7 的 app 启动动态设计中,运动时间不仅比 iOS 6 多出了 80%,而且在速率曲线上也有了较大的差异。下图中的 X 轴代表了动态运动的时长,Y 轴则代表了运动的速率,可以看出 iOS 6 的动态运动由开始至结束过程中,其加速和减速都是较为平均的。而在 iOS 7 中,app 启动动态以更高加速度开始,到达最高速后以非常平缓的减速度直至结束。这样的运动速率给使用者更为舒缓和放鬆的感受,但对于过去六年的 iOS 系统使用者来说意味着一次感知习惯的挑战。

解析iOS7的动态焦点设计思维

但除了时间和加速度曲线的变化外,iOS 7 的动态速率还包含了一个全新维度,就是与其全新「Parallax」解构相呼应的空间速率。在 WWDC 2013,苹果介绍了「Parallax」的界面视差空间结构,也在整个系统中加入了许多针对性的设计要素。而在动态设计中,则是通过运动速率的特殊计算模式进行体现。

解析iOS7的动态焦点设计思维

以下是我们的动态设计师对 iOS 7 的全新动态设计进行了高速模拟和分解:

在模拟影片中可以看出,虽然 iOS 7 中大多数的集合视图动态速率曲线是相似的,但是由不同所操作点引发的界面动态,其速率曲线间也有细微差异。规律是在同样的界面动态时长下,以萤幕中心点作为原点,越靠近萤幕边缘的操作焦点,越以更高的启动速度开启界面动态过程。

解析iOS7的动态焦点设计思维

这样差异化的动态速率方式,相对全部一致化的动态效果,会给人中心点内容离操作者更近,萤幕边缘离操作者相对较远的感觉。通过动态速率在使用者的感知潜意识中,构建出一个界面中的速率空间。这样的设计方式常见于一些纵版射击游戏中,但在界面产品的设计中确实不多见。

结语

透过进一步分析和理解,我们可以看到 iOS 7 设计团队开始从更多新的维度和深度思考界面产品设计。全新的 iOS 系统产品在未来几年内对使用者、产品以及产业都会带来不同程度的影响。其中许多改变令人兴奋,特别是某些方面的全新转变,将过去很多未能实现的设计方案变成现实。对未来产品而言,在带来新挑战的同时,实际上也提供了全新的想像和施展空间。