郎启旭的写字本

iOS 7:纵深和扁平

2013.06.16

一、感受和感受

Designing something requires focus. The first thing we ask is what do we want people to feel?

前天中午升级了 iOS 7,很新鲜很兴奋。

朋友问我,「如果用一个词来形容 iOS 7,你的选择是?」
我沉默,又说「通透」。
朋友追问,「为什么?」
我答不上来,「就是感觉。」

是的,通透,这是我对 iOS 7 下意识的感觉,但并不知道为什么,直到我又看到 iOS 7 官方宣传片中的这张图:

iOS 7 分层界面

我认为这就是 iOS 7 中最基本最隐藏的变化,也是之所以我感觉「通透」的原因——iOS 7 所有的层级(layer)有且只有 3 层:

  • 底层:壁纸
  • 中间层:锁屏信息、桌面图标、文件夹、应用本身、多任务管理
  • 顶层:通知栏、控制中心、对话窗口、Siri

二、层级与纵深

具体地说:

  1. 底层:壁纸、摄像头取景

    底层大多情况下是壁纸。

    为了强化底层和中间层的区分,转动手机,壁纸会动,就像你转动茶杯时水面晃荡。

    不过比较有趣的是 Facetime 的背景,底层并非是壁纸,而是摄像头的实时取景画面。

  2. 中间层:锁屏信息、桌面图标、文件夹、应用本身、多任务管理

    从锁屏到桌面,锁屏信息使用基本图形和文字,没有多余元素,侧滑时从右侧 消失,桌面图标铺满壁纸,动画极其轻量,感受上是同一层。(严格意义上,这只在锁屏壁纸和桌面壁纸使用同一张图片时感受明显,但我认为,锁屏壁纸的变化不属于层的变化。)

    中间层:从锁屏到桌面

    从桌面到文件夹,zoom in & zoom out 的动画切换,还是在一层。

    从应用图标到应用本身,继续 zoom in & zoom out 的动画,感受上还是在同层。

    中间层:从桌面到文件夹到应用

    应用间的切换是同一层间的平移。

    卡片式多任务管理,这是最能说明桌面和应用是同一层的界面。

    中间层:多任务处理

    某些时候,为了强化应用内部是中间层,会通过穿透图层或者虚化图层的方式让底层出现。

    例如拨号界面按下数字键会透出背后的底层壁纸。

    拨号与提醒事项揭示中间层的存在

    应用内部的页面切换使用左右侧滑的动画和手势,使得感受上很稳定,感觉上仍然还处于中间层中。

    总之,桌面、文件夹、应用本身,三者组成了一张细节丰富的「纸」,通过 zoom in & zoom out 动画将用户需要的细节呈现出来,同时可以随时感知自己当前所在位置。

    补充:
    桌面图标和应用本身是同一层的另一例证是,图标的设计框架(grid)和应用本身的设计框架是一致的。

    桌面图标与应用本身的设计框架一致

    图片来源及更多详情:「iOS 7 图标设计来自销售团队」说法的来源是?如何解读?

  3. 顶层:通知栏、控制中心、对话弹窗、Siri

    由手势或系统触发,在需要时出现。

    使用毛玻璃效果,用户当前界面在背后若隐若现,有安全感。

    锁屏收到通知,锁屏界面会毛玻璃化,这是因为通知是顶层内容,所以会覆盖使用毛玻璃覆盖中间层的锁屏。

    顶层的各种例子

    弹出对话框是顶层,此时触发的键盘也是毛玻璃效果。提醒下,iOS 6 中弹窗的输入键盘也是深色调,但没有 iOS 7 中层的概念这么明显。

三、为什么通透?

理顺了这 3 层的关系,我再重复多次滑开锁屏、进入桌面、打开文件夹、进入应用、侧滑、后退的时候,我终于明白为什么这是通透的。

Distinct function layers help establish hierarchy and order.

而如果使用「层」这个纬度去对比同时代的移动操作系统(设计的纬度很多,不一定是「层」,所以这样的对比严格说来是不对等的),你会发现很有趣的是,这些系统在层级上并不「扁平」,层级偏多。一个例子是,视觉上极度「扁平」的 Windows Phone,在页面切换中大量使用瓷砖动画,导致每进入一个新页面从感受上都是进入一个新的层。

四、为什么是这个样子?

We have always thought of design, as being so much more than just the way something looks.
It's the whole thing. The way actually works on so many different levels.
Design defines so much of our experience.
There is a profound and enduring beauty in simplicity, in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation—it’s about bringing order to complexity.

设计,并不仅仅是看上去的样子,而是关乎整体。真正的美,存在于简洁、透明和效率当中。

五、最后

The mobile OS from a whole new perspective.

这是 iOS 7 的 slogan,但至于这个 whole new perspective,见仁见智。你可以单纯的认为这只是一次视觉上的 redesign,或者也可以相信这是为迎接未来更多材料和产品的可能性而做的铺垫,局外人的猜测从来都是虚妄,时间会证明一切。

两天时间,到目前为止,我是很喜欢 iOS 7,缺点和 bug 很多,重启也很多,但我感受到这背后的勇气和诚意。

美或者不美,从来都不是真正的问题。


拓展阅读

视频:iOS 7 官方介绍视频

视频:Intention - Designed by Apple in Carlifornia


原文载于:如何评价 iOS 7?

Comments
Write a Comment