蘋果在介紹 iOS 7 的時候，并沒有使用“扁平”這樣詞，而是強調它的“深度（depth）”。我們可以從下面的動態效果中清晰地看到 iOS 7 中的深層次效果。有人可能很想知道，蘋果是如何做到的？使用網頁設計的技術能否達到這樣的效果呢？

首先要解釋一下，這種深層次的效果稱之為“視差效果”。這是 2D 和 2.5D 游戲主要使用的效果，也就是在各個對象之間添加距離感，從而讓人產生視差。多年來，這些效果在網頁設計中也經常被用到。

那么，怎樣才能打造出讓人乍看還以為是 3D 的效果呢？如果你安裝有 iOS 7 測試版，你可能會注意到，在觀看 2D 渲染（比如一個視頻）時，這種效果特別吸引人。

視差效果很好理解。望向窗外，物體以不同的相對速度運動著，拉開不同的距離。靠得越近的物體看起來運動的速度越快，越遠的就讓人感覺運動得越慢。

在 iOS 7 主屏幕中，具有兩個層次，一個是屏幕表面，另一個是背景圖片。如果你仔細觀察上面的動態效果，你會看到圖標相對于屏幕表面來說是靜止的。要實現這種效果，只需相對于圖標移動背景圖片。留意到了嗎，在 iOS 7，當我們將 iPhone 從右向左傾斜，背景圖片（壁紙）往右邊移動，反之從左向右傾斜 iPhone 將看到壁紙往左邊移動。

圖一：我們正對著 iPhone 屏幕

圖二：將 iPhone 向左邊傾斜


圖三：傾斜形成的角度


圖四：得出一個結論，傾斜的角度越大，背景圖片移動的幅度越大。

一家專業的網頁設計網站詳細解釋了如何在網頁設計中實現這樣的視差效果，有興趣的網頁設計師可以點擊進入了解相關代碼。對代碼一竅不通的讀者可以在平板或者手機瀏覽器打開此鏈接，欣賞用網頁設計做出來的 iOS 7 主屏幕視差效果（背景圖片可移動）。