透过过iOS 人机交互指南的变化看iOS7的设计理念本质

标签: 设计理念 IOS7 iOS人机交互指南 扁平化 | 发表时间:2013-10-21 08:45 | 作者:dream
出处:http://www.boxui.com

iOS发布也有一段时间了,谈到iOS7在界面,最大的变化就是抛弃了苹果使用了多年的拟物化设计,而转投扁平化设计阵营。一时间,业界评论褒贬不一,槽点多多亦不乏溢美之词。我们先暂且不去评判新的图标和整体设计风格的好坏,而是从其背后的设计理念的变化来思考苹果的新设计。

IOS人机交互指南

形式追随功能,UI服务内容

苹果在更新的iOS人机交互指南中最先提到的一点就是Defer to Content(尊重内容)。无论UI如何变化,内容始终是体验的核心,UI永远是服务于内容而不能影响内容的表现。这不禁让人想起louis sullivan(易斯·沙里文)当年的那句”Form follows the function”(形式追随功能),苹果的这次改变实际上是对设计本源的重新认知。

从iOS7具体的设计表现来看,以下几点对其设计理念做出了很好的诠释。

  强调充分利用屏幕空间

iOS7强调让内容自然地延伸至整个屏幕,而不使用多余的视觉元素将内容与操作区、信息区分开。一个最明显的例子就是顶部状态栏融入内容,不再用线条分割开,使用户在视觉上感觉内容空间变大。

ios7的天气和备忘录

               iOS7的天气和备忘录

  为了使屏幕主体内容更加突出,更多地呈现给用户,必要时会隐藏UI元素,将屏幕空间让给内容。iOS7在很多原生应用中都是用了自动隐藏上下状态栏和导航栏的设计。地图应用中甚至连最顶端的状态栏也一并隐藏了。

ios7地图

             iOS7地图应用

ios7-safari

              iOS7的safari

弱化控件视觉效果,以避免干扰内容

这一点是iOS7最明显的变化,也就是所谓的扁平化设计风格。新的设计去除了iOS6系统控件的纹理和质感表现,非必要时不再使用拟物化方法来表达。最明显的例子是系统按钮控件,不再使用拟物化的按钮边框及高光、阴影,取而代之的是简化的图标元素和操作内容。

ios6和7备忘录

iOS7和iOS6备忘录

iOS6的按钮被指示箭头和文字所取代,而为了表达元素的可操作性,iOS7定义了关键色这一概念。在同一个app中,使用区别于内容的一致的统一用色来表达可操作元素。在备忘录中,使用的是黄色;而在系统设置中,则统一使用了蓝色作为关键色。

整体视觉效果上的变化,日历的例子最为明显,可以看到iOS7与iOS6两种截然不同风格的日历表达方式,iOS7的日历,内容更加突出,操作元素被弱化;而iOS6的日历,极具操控感,屏幕上每个内容元素和操作元素都是可交互的。

 

ios6和7日历

                iOS7和iOS6日历

 优化内容元素,使其清晰可见

我们知道,在设计中运用留白可以使得要表现的主体内容和功能更加突出。在iOS人机交互指南中,是这样描述留白的:空白可以向用户传递宁静和安宁的感觉,让app显得更专注,更有效率。

iOS7的日历是一个留白运用的经典例子,空白空间的使用使得iOS7的日历内容更加突出,并不在有iOS6日历的拥挤和紧迫感。

ios7日历

        iOS7日历

构建全新的层次空间,建立新的视觉秩序

iOS7引入了全新的视觉层次的概念,这种分层界面有助于营造纵深感,建立层次结构和秩序,并帮助用户理解屏幕元素间的物理关系。

image012

               iOS7界面分层结构图

通过视差动画营造纵深感

在主屏上,由于图标层与背景层的分离,iOS7利用加速感应器检测用户视线角度的变化,控制不同层的位移速度,巧妙营造了视差动画,从而屏幕元素活跃起来,营造了立体纵深感。

下图是iOS7主屏在手机不同倾斜角度的截图。可以看到在不同角度背景层与前面图标的位置关系是不同的。

ios7主屏

                iOS7主屏

大量使用半透明UI元素

半透明效果能够帮助用户尽可能多的了解到被遮挡的内容,并使用户理解层与层之间的物理关系。

ios7控制中心

       iOS7控制中心

  相对于安卓的控制中心界面,采用同样的拉出的方式,iOS7半透明的设计能够让用户了解到控制面板和后面界面的层次关系,表达清晰,而安卓的面板,则更容易迷失。

在iOS6中,时间选择器采用了非常逼真的拟物化效果,模拟了拨轮进行时间设置。IOS7则去除了拨轮的质感和纹理,将其扁平化,通过透视原理和半透明玻璃效果表现了一个扁平化的拨轮。值得注意的一点是,iOS7的玻璃效果处理得非常逼真到位,选择时间的中间状态里,体现出了玻璃的折射效果。这一点在iOS6中并没有见到。

 

ios7时间选择器

 

 

iOS7时间选择器

ios6时间选择器

               iOS6时间选择器

鼓励采用深度层次的信息结构

在信息结构上,iOS7更鼓励采用深度层次来与用户交流,并要求隐喻更加符合物理世界。

iOS7的文件夹摒弃了iOS6的屏幕裂开效果,而是采用了置于主屏之上的毛玻璃效果。这与系统整体的层次关系是相呼应的,在iOS7的层级秩序里,背景层始终是处于最底层的,其他表现层则置于其上。那么文件夹的打开则理应是悬浮于主屏之上,并采用毛玻璃的效果表达其层次关系。

同时,iOS7一致性的应用/文件夹打开动画,也体现出了这种深度层次关系。与iOS6的打开动画不同,iOS7的打开动画是以被点击的应用/文件夹为中心,向四周放大的形式打开,表现出一个非常合理的深度层次关系。而iOS6则无论被点击应用/文件夹位置,均是以屏幕中心点为中心,向四周放大打开。从这一动画方式的改变可以看出,iOS7更注重动画与真实物理世界规则的对应,而不仅是流于形式。

ios6和7文件夹

               iOS7与iOS6的文件夹

   iOS7的日历应用采用了年、月、日3个深度层级的信息结构,这较之iOS6的日历,是一个很大的变化。IOS6的日历应用强调扁平化的信息结构,整个应用只有一个深度层级,月、日的切换通过TAB切换来实现,其他所有操作功能也都在这个一个层级中进行。深度的层级设计能够有效减少每个层级界面中的操作元素,是的界面更干净、整洁,内容元素突出。与这种深度层级配合的转场动画与前面提到的系统打开应用/文件夹的动画一致,均已用户点击出为中心点进行放大,向用户传达出与深度层级相对应的纵深感。

ios6和7日历对比

               iOS7与iOS6的日历

  同样的深度层级结构也运用到了图片应用中,图片的四个层级一次是年度、精选时刻和单图。

ios7图片

               iOS7图片

   通过苹果最新的iOS人机交互指南我们可以看出,苹果在对待所谓“扁平化”设计风格上是有着自己独到的设计理念的。正如苹果官网所说的那样,“人们常常将简约等同于极简主义。但是,真正的简约远不止删除矫饰和去除杂乱那么简单。而是因应你的需要,因地、因时恰到好处地展现每一方面。删繁就简,事事有序,以及确保所做的每一件事总是“行之有效”。当你第一次上手使用,就对它所能做的了然于胸时,那就是简约。”

但好的设计理念,仍需不断打磨,经过千锤百炼的设计来表现。从本次发布的iOS7 beta的很多细节不难看出,本次iOS7的发布是仓促的,许多设计还有很多值得推敲的地方,因此也引来众多吐槽。不过,相信未来,随着新设计风格的不断完善,苹果还会是果粉心目中的那个苹果。

相关 [ios 人机交互 变化] 推荐:

通过iOS 人机交互指南的变化看iOS7的设计理念

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  iOS7在界面上最大的变化就是抛弃了苹果使用了多年的拟物化设计,而转投扁平化设计阵营. 一时间,业界评论褒贬不一,槽点多多亦不乏溢美之词. 我们先暂且不去评判新的图标和整体设计风格的好坏,而是从其背后的设计理念的变化来思考苹果的新设计.    形式追随功能,UI服务内容.   苹果在更新的iOS人机交互指南中最先提到的一点就是Defer to Content(尊重内容).

透过过iOS 人机交互指南的变化看iOS7的设计理念本质

- - 盒子UI
iOS发布也有一段时间了,谈到iOS7在界面,最大的变化就是抛弃了苹果使用了多年的拟物化设计,而转投扁平化设计阵营. 一时间,业界评论褒贬不一,槽点多多亦不乏溢美之词. 我们先暂且不去评判新的图标和整体设计风格的好坏,而是从其背后的设计理念的变化来思考苹果的新设计. 形式追随功能,UI服务内容. 苹果在更新的iOS人机交互指南中最先提到的一点就是Defer to Content(尊重内容).

细节决定成败:你绝对想不到的iOS 5变化

- Hellmester - 178苹果专区 apple.178.COM
iOS 5带来了200多项新功能,但是苹果给出的新特性清单只是大面上的寥寥一部分,还有更多非常细微的地方,只有用放大镜一个像素一个像素地对比才能看出来,而正是这些细节上的变化充分体现了苹果的心思,也说明了人家的成功绝对不是偶然的. 看看下边这些iOS 5、iOS 4的超细节对比. 图标间距:中间两个由38个像素增加到40个像素.

Kinect与人机交互的未来

- Pangolin - 《商业价值》杂志
Kinect或将成为第三次人机交互革命的原点,不仅因为其全新的操作方式,更因为其背后所蕴含的创新精神. 2010年11月初,微软家用视频游戏主机Xbox 360的体感外设Kinect正式公开销售,之后在包含圣诞假期在内的60天内,Kinect共卖出去800万台. “在大多数商店,Kinect确实都已经卖光了.

[IOS]iOS App性能优化

- - 操作系统 - ITeye博客
iOS App的性能关注点. 虽然iPhone的机能越来越好,但是app的功能也越来越复杂,性能从来都是移动开发的核心关注点之一. 我们说一个app性能好,不是简单指感觉运行速度快,而应该是指应用启动快速、UI反馈响应及时、列表滚动操作流畅、内存使用合理,当然更不能随随便便Crash啦. 工程师开发应用时除了在设计上要避免性能“坑”的出现,在实际遇到“坑”时也要能很快定位原因所在.

iOS 5评测

- littlepush - Solidot
Ars Technica的评测认为iOS 5值得升级,当然它也不可避免的存在一些小问题,给用户增添些烦恼. 用户在升级前最好手动备份一下iDevice,确保所有的应用都能转移.

关于iOS 7

- - 曉生
上手使用2天,感觉ios7的方向挺对,有设计的不错的地方,比如系统功能交互的完善和动效细节. 但界面有不够完善之处,比如颜色不够统一,难以理解相机和设置为什么用那么难看的渐变灰色,控制中心太像交互原型图,更主要是功能缺乏分类,但相信这只是beta版的问题,就像ios7运行还不够流畅一样,都还需要时间去完善.

[转]WebKit in iOS 8

- - justinjing的专栏
让我们说说iOS 8 的WebKit吧. WWDC 2014前几天,就有人发现了苹果向WebKit开源项目提交了一些很令人兴奋的代码,暗示了OS X和iOS,特别是iOS上的WebKit架构有所变化. 果不其然,WWDC上公布了iOS的新框架WebKit.framework,正式推出了新的网页浏览控件WKWebView.

苹果语音助手Siri改变人机交互

- wang - Solidot
苹果在2010年4月收购了为iPhone和iPod Touch开发虚拟个人助手的创业公司Siri. 在收购前,Siri从李嘉诚等风投筹集到了2400万美元资金,收购之后,Siri被从App Store下线. 现在我们已经知道Siri去了哪里. 一年半之后,Siri成为了iPhone 4S独享的特色功能,也成为它的一大卖点.

UC 何小鹏:人机交互设计经验谈

- - 极客公园-GeekPark
[核心提示]不断演进的软硬件人与机器的交互设计提出越来越高的要求,作为老牌移动端浏览器厂商的UC又有着怎么样的经验之谈呢. 自从计算机问世以来,人类与它的交互方式经历了一系列的演进过程. 从最早的电子管排布,到最常见的键盘鼠标、触摸板、遥控器,再到目前正处于高速普及阶段的触摸屏、语音、体感识别和可穿戴设备,以及未来的可植入设备.