苹果iOS7产品界面中的新动态设计思维.pdf

苹果 iOS 7 产品界面中的新动态设计思维 作为界面体验的重要组成部分，产品界面的动态设计也不仅仅是用来增加视觉方面的感官刺激，而 更多的是影响用户对产品的感知和理解。 iOS 平台的动态设计，从第一代 iPhone 发布起即通过产品 的动态表现，体现了界面在 X 、Y 、Z 轴之间的空间层级关系。通过 iOS 平台的动态表现，用户可以 轻松地理解屏幕中所存在的 世界“ ”，以及 我“”在这其中所处的位置座标。而良好的动态设计和表现也 是2007 年iPhone 诞生时，让用户和全世界为之惊叹的原因之一。 　　在 iOS 7 beta 版本发布后，我们就开始对新版本进行解构和研究。作为全世界最受关注的操作 系统平台， iOS 7 对未来产品设计的影响是不言而喻的，因此这样的研究学习对于产品设计而言是不 无裨益的。在动态设计方面，我 (eico 创意总监张卷益 )与动态设计师白烨飞对已经发布的多个 beta 版 本进行了分解和模拟。今天可以看到由 beta 版到正式发布的产品中，一种新的动态设计思维被加入 到iOS 7 的平台，其中主要包括两个方面：其一为以操作焦点为中心的动态切换，其二 是以 “Parallax结构为基础的空间速率变化。” 操作焦点为中心 在iOS 7 的桌面系统及自带应用中，正式采用了被称为集合视图转换 (UI Collection View Transition Layout) 的界面切换效果。此前 iOS 系统中不同层级间的界面切换，几乎都是通过单一推箱子式进 行的。而在 iOS 7 中的集合视图转换，大都采用了这种以用户操作焦点为中心的运动方式，其特点为 ：集合视图界面的运动基准点或线，不再单一为过去的屏幕中心或边缘，而是将用户的操作点或轴 ，作为界面切换运动的基准点或线。运动路径也从过去固定路径的运动，转变为根据操作点和轴进 行移动的动态模式。其意义在于进一步将用户的操作与界面切换过渡动态进行衔接，引导用户在不 同界面的切换过程中移动视觉焦点。而在过去的大多数界面切换动态中，用户不得不在每次界面切 换完成后，再重新定位自己的视觉焦点。 　　首先可以看到，在桌面层级中，无论是点击某个图标打开 APP 的启动动态，还是打开 APP 文件 夹的展开效果，都是以用户的操作点为放大中心进行的。然而每个区域点击后的效果速率也是不 同的，并且这样的速率规则贯穿于所有的同类动态中，后文中会进行详解。 　　同样的规则也体现在 iOS 7 的其他自带应用中。在全新设计过的日历中，由年视图到月视图的切 换动态，以用户所点击的具体日期为中心进行动态放大切换，由月视图到日视图的过程，则是以所 点击的日期所在行，进行 Y轴的纵向提升。 　　在全新的相册界面中，由年度 精选 时刻的切换动态中，照片缩略图在不同尺寸上的的放大 直至全屏查看的效果，其动态运动轨迹也取决于用户在屏幕上的触摸点。 　　对于新版 Safari 的设计，操作焦点引导的设计思想主要体现在多窗口选择的切换方式上。相较旧 版本，新版 Safari 采用纵向层叠浏览窗口的设计方式，使用立体透视的层叠效果以更好地利用竖向 屏幕空间。同时，在点击选择窗口至放大的切换效果时，以点击位置作为基准线进行立体透视运动 。 　　实际上，以操作焦点为基准的动态运动，并不是 iOS 7 才出现的新鲜产物，包括在如 Clear 、 Evernote 等 APP 以及 iOS 5 的部分设计中，早已采用了类似的设计方式。但对 iOS 来说，从系统级别 开始就全面引入这样的设计理念，可以算作其诞生 6 年以来一次很大的进步。 “Parallax空间速率” 以上谈到的根据操作焦点的切换模式，是从运动的方位轨迹上来进行分解。而对于动态设计来说， 运动速率则是影响用户感知的另一维度。就像是同样的音乐曲谱，用不同的节拍速度进行演奏，可 能会出现催眠曲和电子舞曲这样截然不同的效果。 iOS 7 的应用启动动态设计中，运动时间不仅比 iOS 6 多出了 80% ，而且在速率曲线上也有了较大的 差异。下图中的 X 轴代表了动态运动的