| 注册

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

泛艺学苑 > UI设计 > 交互设计 >  2017-12-29 11:54:50 浏览

分享

iOS7在UI界面设想上最年夜的变革就是丢弃了苹果利用了多年的拟物化设想,而转投扁平化设想阵营。一工夫,业界批评批驳纷歧,槽点多多亦不乏溢美之词。我们先临时不去评判新的图标和团体设想气势派头的黑白,而是从其背后的设想理念的变革来考虑苹果的新设想。

情势跟随功用,UI效劳内容

苹果在更新的iOS人机交互指南中开始提到的一点就是Defer to Content(尊敬内容)。不管UI怎样变革,内容一直是体验的中心,UI永久是效劳于内容而不能影响内容的表示。这不禁让人想起louis sullivan(易斯·沙里文)昔时的那句”Form follows the function”(情势跟随功用),苹果的此次改动实践上是对设想根源的从头认知。

从iOS7详细的设想表示来看,以下几点对其设想理念做出了很好的解释。

夸大充实操纵屏幕空间

iOS7夸大让内容天然地延长至全部屏幕,而不利用过剩的视觉元素将内容与操纵区、信息辨别开。一个最较着的例子就是顶部形态栏融入内容,不再用线条朋分开,利用户在视觉上觉得内容空间变年夜。

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

(图:iOS7的气候和备忘录)

为了使屏幕主体内容愈加凸起,更多地显现给用户,须要时会躲藏UI元素,将屏幕空间让给内容。iOS7在许多原生使用中都是用了主动躲藏高低形态栏和导航栏的设想。舆图使用中以至连最顶真个形态栏也一并躲藏了。

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

(图:iOS7舆图使用)

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

(图:iOS7的safari)

弱化控件视觉结果,以免滋扰内容

这一点是iOS7最较着的变革,也就是所谓的扁平化设想气势派头。新的设想去除iOS6体系控件的纹理和质感表示,非须要时不再利用拟物化办法来表达。最较着的例子是体系按钮控件,不再利用拟物化的按钮边框及高光、暗影,取而代之的是简化的图标元素和操纵内容。

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

(图:iOS7和iOS6备忘录)

iOS6的按钮被唆使箭头和笔墨所代替,而为了表达元素的可操纵性,iOS7界说了枢纽色这一观点。在统一个app中,利用区分于内容的分歧的同一用色来表达可操纵元素。在备忘录中,利用的是黄色;而在体系设置中,则同一利用了蓝色作为枢纽色。

团体视觉结果上的变革,日历的例子最为较着,能够看到iOS7与iOS6两种判然不同气势派头的日历表达方法,iOS7的日历,内容愈加凸起,操纵元素被弱化;而iOS6的日历,极具操控感,屏幕上每一个内容元素和操纵元素都是可交互的。

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

(图:iOS7和iOS6日历)

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

我们晓得,在设想中使用留黑能够使得要表示的主体内容和功用愈加凸起。在iOS人机交互指南中,是如许形貌留黑的:空缺能够向用户通报安好和安定的觉得,让app显得更专注,更有用率。

iOS7的日历是一个留黑使用的典范例子,空缺空间的利用使得iOS7的日历内容愈加凸起,其实不在有iOS6日历的拥堵和紧急感。

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

(图:iOS7日历)

构建全新的条理空间,成立新的视觉次序

iOS7引入了全新的视觉条理的观点,这类分层界面有助于营建纵深感,成立条理构造和次序,并协助用户了解屏幕元素间的物理干系。

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

(图:iOS7界面分层构造图)

经由过程视差动画营建纵深感

在主屏上,因为图标层与布景层的别离,iOS7操纵加快感到器检测用户视野角度的变革,掌握差别层的位移速率,奇妙营建了视差动画,从而屏幕元素活泼起来,营建了平面纵深感。

下图是iOS7主屏在手机差别倾斜角度的截图。能够看到在差别角度布景层与前面图标的地位干系是差别的。

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

(图:iOS7主屏)

年夜量利用半通明UI元素

半通明结果可以协助用户尽量多的理解到被遮挡的内容,并利用户了解层与层之间的物理干系。

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

(图:iOS7掌握中间)

绝对于安卓的掌握中间界面,接纳一样的拉出的方法,iOS7半通明的设想可以让用户理解到掌握面板和前面界面的条理干系,表达明晰,而安卓的面板,则更简单丢失。

在iOS6中,工夫挑选器接纳了十分传神的拟物化结果,模仿了拨轮停止工夫设置。IOS7则去除拨轮的质感和纹理,将其扁平化,经由过程透视道理和半通明玻璃结果表示了一个扁平化的拨轮。值得留意的一点是,iOS7的玻璃结果处置得十分传神到位,挑选工夫的中心形态里,表现出了玻璃的折射结果。这一点在iOS6中并没有见到。

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

(图:iOS7工夫挑选器)

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

(图:iOS6工夫挑选器)

鼓舞接纳深度条理的信息构造

在信息构造上,iOS7更鼓舞接纳深度条理来与用户交换,并请求隐喻愈加契合物理天下。

iOS7的文件夹摒弃了iOS6的屏幕裂开结果,而是接纳了置于主屏之上的毛玻璃结果。这与体系团体的条理干系是相照应的,在iOS7的层级次序里,布景层一直是处于最底层的,其他表示层则置于其上。那末文件夹的翻开则理应是悬浮于主屏之上,并接纳毛玻璃的结果表达其条理干系。

同时,iOS7分歧性的使用/文件夹翻开动画,也表现出了这类深度条理干系。与iOS6的翻开动画差别,iOS7的翻开动画是以被点击的使用/文件夹为中间,向周围放年夜的情势翻开,表示出一个十分公道的深度条理干系。而iOS6则不管被点击使用/文件夹地位,均是以屏幕中间点为中间,向周围放年夜翻开。从这一动画方法的改动能够看出,iOS7更重视动画与实在物理天下划定规矩的对应,而不只是流于情势。

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

(图:iOS7与iOS6的文件夹)

iOS7的日历使用接纳了年、月、日3个深度层级的信息构造,这较之iOS6的日历,是一个很年夜的变革。IOS6的日历使用夸大扁平化的信息构造,全部使用只要一个深度层级,月、日的切换经由过程TAB切换来完成,其他全部操纵功用也都在这个一个层级中停止。深度的层级设想可以有用削减每一个层级界面中的操纵元素,是的界面更洁净、整齐,内容元素凸起。与这类深度层级共同的转场动画与前面提到的体系翻开使用/文件夹的动画分歧,均已用户点击出为中间点停止放年夜,向用户转达出与深度层级绝对应的纵深感。

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

(图:iOS7与iOS6的日历)

一样的深度层级构造也使用到了图片使用中,图片的四个层级一次是年度、精选时辰和单图。

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

(图:iOS7图片)

经由过程苹果最新的iOS人机交互指南我们能够看出,苹果在看待所谓”扁平化”设想气势派头上是有着本人独到的设想理念的。正如苹果官网所说的那样,”人们经常将繁复同等于极简主义。可是,真实的繁复远不止删除卖弄和去除混乱那末简朴。而是因应你的需求,因地、因时恰如其分地展示每一方面。删繁就简,事事有序,以及确保所做的每一件事老是”卓有成效”。当你第一次上手利用,就对它所能做的了然于胸时,那就是繁复。”

但好的设想理念,仍需不竭打磨,颠末精益求精的设想来表示。从本次公布的iOS7 beta的许多细节不好看出,本次iOS7的公布是仓皇的,很多设想另有许多值得琢磨的处所,因而也引来浩瀚吐槽。不外,信赖将来,跟着新设想气势派头的不竭完美,苹果还会是果粉心目中的谁人苹果。

原文链接

分享到
 
 

咨询中心

泛艺学苑微信扫一扫
微信扫一扫

400-693-8808

加入官方微博

>