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

最近在研究ios系统的交互,正好看到此文,受益匪浅,分享一下。

原文地址:http://cdc.tencent.com/?p=7777

ios7在界面上最大的变化就是摒弃了苹果使用多年的拟物化设计,而转投扁平化设计阵营。我们先暂且不去评判新的图标和整体设计风格的好坏,而是从其背后的设计理念的变化来思考苹果的新设计。

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

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

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

强调充分利用屏幕空间

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

ios7的天气和备忘录

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

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

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

ios7和ios6的备忘录

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

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

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

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

ios7和ios6的日历

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

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

ios7界面分层结构图

通过视差动画营造纵深感

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

例如ios7主屏,在手机不同倾斜角度时,可以看到在不同角度背景层与前面图标的位置关系是不同的。

ios7主屏

大量使用半透明的UI元素

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

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

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

ios7时间选择器

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,932评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,554评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 145,894评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,442评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,347评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,899评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,325评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,980评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,196评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,163评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,085评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,826评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,389评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,501评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,753评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,171评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,616评论 2 339

推荐阅读更多精彩内容