好奇+空閑讓我得以斷斷續(xù)續(xù)的開始寫作這篇文字,。我找到了一篇對比iOS6~7的文章。翻看著對比圖,，似乎有了一些認識,。
7對比6最先讓人印象深刻的，應該是新的配色了,。但我反倒覺得配色其實是iOS7設計中的一個閉環(huán)部分,，用來修補其他變化之處的一筆點睛，所以我想先說說除了配色外的部分,。

交互控件

從靜態(tài)界面里看無非一下幾點：

• 刪掉幾乎所有材質屬性
• 取消利用漸變表現(xiàn)物體的突出體積
• 大量減少使用陰影塑造層級的手法

都是做減法,，這減法到底是怎么做的？

iOS7敢于去掉這些特質的原因只有一個：塑造一種干凈,，清晰的界面,。我們熟悉的iOS6是使用物體的體積，光影來暗喻界面的“how it works”,，但iOS7覺得那不夠干凈而清晰,。

怎樣塑造干凈和清晰？

人的視覺總會對突出的元素更加敏感,。這原本應該是一種原始的自我防衛(wèi)機制,，但這種敏感如果在用戶閱讀UI界面時則會干擾視覺，于是為了消除視覺干擾,，扁平的感念也就由此產(chǎn)生,。但UI設計并不是平面設計，UI需要暗示用戶如何使用,，并且需要容易記憶,，輕松學習。一味的將視覺元素拍扁會導致交互元素不夠突出,，用戶打開界面茫然失措的場景,。而iOS7是如何調這個矛盾的呢？

原因大概有4點：

• 強化界面的黑白對比度
• 使用統(tǒng)一的主題色來暗示可交互元素
• 用分割線暗示層級關系
• 用灰度來暗示前后關系

如下圖在灰度模式下,，iOS7在交互狀態(tài)下的對比度有了非常大的提升。選中項更加明確清晰,。

1.png

iOS7中把材質貼圖都丟進了垃圾桶,，取而代之的是高明度的灰色。目的其實就是增加交互性元素的視覺對比度,。

![Uploading 3_797719.png . . .]

2.png

這組對比更加明顯,，雖然iOS6使用了凹陷的物理質感，但iOS7中由線條轉為填充的視覺對比更加強烈,，讓人一眼就能看出,，哪一項是選中項,。

3.png

ps.這里我感覺也存在一個隱患，就是如果用戶是不熟悉iOS的新用戶,，他還沒有建立起主顏色及對應交互操作的認知的時候,，或許會比較茫然。

對這個問題似乎蘋果也考慮到了,，在設置里有一個輔助功能-視覺,，有很多對iOS設計中或許會存在的一些極端情況問題做了一些修補措施。比如下面這個叫 按鈕形狀 的選項,。打開后是下面這種樣式（是有點丑）,。

FullSizeRender.jpg

FullSizeRender 2.jpg

粗看時我以為是簡單的墊了一層黑色的alpha。但其實是另一種灰度的模糊層（猜測是light）,。

梳理一下：

• 強化對比度,，讓系統(tǒng)在視覺上更容易閱讀。文字圖形清晰銳利,。
• 使用統(tǒng)一的交互用色元素代替原本用光影效果提示可操作控件,，視覺效果更輕，缺點也很明確,，在沒建立成主色與點擊的映射時,，用戶容易茫然。

界面分割

界面設計并不僅僅是交互元素,，還包括內容元素的分割問題,。如何在一個純平的界面里表現(xiàn)出層級感呢？

答案是分割線與灰度的結合。

分割線

iOS7中大量的運用了1px分割線,。這個元素到底代表著什么呢,？

4.png

從設置界面中能看出，在iOS6的時期,，頁面左右留出一部分的間距,。但在7中完全拿掉了。從兩者背景色與區(qū)塊的對比度上也能看出,，7相比6更淡了,。這是什么考量？我猜測是為了降低區(qū)塊的分割感,，因為分割感過強會導致區(qū)塊中的內容部分閱讀上存在干擾,。于是索性就只保留垂直方向的區(qū)塊分割，并且降低對比度增加內容元素的可讀性,。但是我嘗試著將iOS7樣式中的1px分割線去掉,，發(fā)現(xiàn)視覺效果降低了很多，區(qū)塊的分割一下子不明顯了,，所以這里的1px分割線是再一次彌補背景對比度下降的問題,。

在iOS7中1px分割線也暗示條目放在背景上微微的陰影關系。導航欄處使用了一種更深的分割線,，暗示導航欄的高度更高,。從下面的鍵盤界面的對比中也可以看出，鍵盤按鈕下有很淺的線暗示凸起關系,。

9.png

色塊分割

在iOS7中,，還有這樣一個視覺規(guī)則，當深淺色塊同時出現(xiàn)時,，淺色永遠在上,，暗色在下。這很符合物理世界的規(guī)律,。比如上述中的設置界面與鍵盤,。上述音樂界面里，音樂的進度條等等,。

模糊與景深

當界面里有2種以上層級關系的時候該如何表現(xiàn)呢,？定義更多不同灰度的色塊么？過多的灰度會降低視覺對比度,，造成一種不清晰不明快的感受,。這顯然是不希望出現(xiàn)的。于是,，終于輪到iOS中最風騷樣式的介紹了,。

模糊是日常生活里常見的效果，比如近處的物體清晰,，遠處的則模糊,。比如攝影作品中常常通過模糊背景來表現(xiàn)空間和景深。而iOS7正是通過這個我們已經(jīng)熟知的物理特性來表現(xiàn)UI層級的,。那這么做有哪些好處呢,？一來是拋棄老舊的，以陰影為主的層級表現(xiàn)手法,。尋找一種更現(xiàn)代的縱深感（google的MD說到底還是用陰影創(chuàng)造z軸）二來將導航和工具欄都采用這種材質,，會讓用戶有種內容區(qū)域延生的感覺，沒有了原來厚重的凸起,，讓內容元素竟可能的占滿整個屏幕（直觀的感受就是,，升級了7之后，有種手機屏幕好像變大了的錯覺~）
ps.模糊在iOS8之后開放了api,，蘋果給出了3種毛玻璃樣式可供設計師使用,。

8.png

通知中心的黑色模糊為第一種，Dark主題,。上面的“沒有通知”字樣其實是第二種模糊樣式：light主題,。第三種則為大家非常熟悉的導航與工具欄上的白色模糊，此為“extra light主題”

每一種ui樣式或者風格都需要一種能站得住腳的隱喻,，比如MD使用的是“量子紙”作主要物象,，配合真實世界中的層疊，位移,，延展彰顯風格,。那iOS7中引入的俗稱“毛玻璃”的這種特性到底在隱喻著什么呢？其實或許蘋果從來沒有想過這個模糊層是不是所謂的“毛玻璃”,，比如iOS7中多處使用了亮暗兩種不同風格的模糊搭配使用,，這是物理世界中的玻璃所不具備的特性。所以我猜測,，蘋果或許根本就不想隱喻任何東西,。模糊層擁有蘋果需要的一切特質：透氣，輕薄,，可以表現(xiàn)層級關系,。那就夠了。它不需要向物理世界的任何物象致敬,。只是當時看到這種效果讓我想到生活中的一種場景,。

b0574a6fc759.jpg

或許有些設計師朋友發(fā)現(xiàn)自己在做設計稿時使用的“高斯模糊”樣式怎么和開發(fā)做出的不一樣呢？這里牽扯到蘋果的模糊層在視覺上到底是怎么實現(xiàn)的,。其實蘋果并不似單純的將一塊圖層后的圖像做了（大約是20px）模糊,，而且使用了“overlay”的圖層疊加效果。這個特性一開始很困擾我，因為overlay的疊加會增加下層圖像的明度和飽和度,。蘋果是想用這種疊加效果彌補模糊帶來的色彩與圖像細節(jié)的損失（不要小看這點,，win7時微軟就做了模糊效果，但是沒想到使用這種疊加效果）,。三種模糊中“l(fā)ight”模式飽和度和明度的提升最明顯,。飽和度過高會非常刺眼和分散用戶的注意力，所以可以發(fā)現(xiàn),，其實在系統(tǒng)中蘋果自己很少使用“l(fā)ight”這個模式的模糊,，取而代之，使用最普遍的是“extra light”,。

模糊在iOS7里隨處可見,，但蘋果將其統(tǒng)一在3種深淺里其實是為了約束使用者的使用場景，避免濫用模糊的情況,?！癳xtra light”主題是其中最普適的模糊效果，為什么這么說,？因為它有一下幾個特點,。第一，由于界面的主色一般情況下是淺色的,，灰白色居多,，EL主題可以很好的與內容結合。而“dark”在與白色內容結合的時候割裂感稍強,，“l(fā)ight”是最不適合大面積使用的,，原因上面提到過，主要就是會過度增加飽和度和明度,，形成非常刺眼炫目的效果,。但小面積點綴使用，有時會有點精效果,。

景深也是一處有趣的嘗試,。最明顯的地方是鎖屏和主屏處，壁紙隨傾斜角度位移的效果,。

主屏的層次分為4個

• 背景圖層
• icon層
• 通知中心層
• 控制中心層

屏幕快照 2016-01-30 下午1.24.28.png

其中”控制中心“與”通知中心“都是用模糊來表現(xiàn)層級,，icon層底部dock欄同樣適用模糊層分割。但由于幾乎去掉了icon層的陰影（icon文字依然有少量陰影）背景圖層與icon層就黏在一起了~怎樣能不用陰影也能體現(xiàn)空間呢,？（jony簡直是對陰影深惡痛絕啊??）iOS7的視差景深其實算不上技術上的創(chuàng)新,，只是將背景圖部分放大，當檢測到手機傾斜的時候對應上相應的位移就好了,，只要icon層與背景層位移量有差距,，自然也就能感知出微弱的層級效果了,。

說到底就是讓兩種看似黏合的圖層在運動時出現(xiàn)位移差，自然也就出現(xiàn)了景深感,。同樣的技巧稍加改變就有了天氣應用中的效果,，如下圖。

10.png

從圖中可以發(fā)現(xiàn),，側滑時，天氣內容（云朵啦之類的）并沒有向左移動,，而是右側出現(xiàn)刪除按鈕,。在操作時會感覺文字與刪除按鈕是一個圖層，而天氣內容又是另一個圖層,，再一次用視差塑造了景深。

調色盤

從上面啰里啰嗦的描述中，大致可以看出主導這次改革的jony ive個人,，更傾向于干凈清晰的用戶界面,，討厭復雜的陰影，圓角,，材質,。可以從當年的iOS7系統(tǒng)介紹視頻里一窺jony的思路,。

“一直以來,，我們一直都堅信設計遠遠不止關乎于外觀，而是更應該注重設計在不同層面發(fā)揮的作用,。我認為,，意味深長且歷久彌新的美，蘊含于簡約之中,，清晰之中,，高效之中。真正的簡約遠不止刪繁就簡,而是在紛繁里建立秩序,?！薄猨ony ive

iOS就像一位紳士，脫去了雍容華貴的西服,，換掉高檔的皮鞋,。這時候他急需另一套搭配，如果只穿白色襯衣,，顯得太平淡了,，或許再打一只亮色的領帶便忽然會顯得年輕和活躍起來。而7的調色盤基本就是這樣的思路,。
灰白展現(xiàn)內容,，亮色點綴交互,。

11.png

上圖是iOS的建議配色。很多設計師朋友在項目中往往很少用這套官方的顏色,，但自定義的時候卻又發(fā)現(xiàn)使用上有諸多問題,。
在灰度模式下，可以看出,，看似鮮艷奪目的配色,，實際的黑白對比度同樣很高，這里的重點在于,，雖然蘋果沒有限定主色需要在某一個范疇內,，但由于主色是提示可交互元素的一個重要依據(jù)（上文提到），同時也是用來表示當前頁面所處的位置或狀態(tài),。所以主色的選擇并不是隨意的,。需要保證一定的深度來提示可點擊狀態(tài)。需要較高的飽和度來強化視覺分量,，達到易于查找易于理解的作用,。
色彩是讓扁平化UI同樣具有可操作性的一個重要指標，它是整個iOS7扁平化設計的閉環(huán),，做好主色的選擇,，可用性將大增。

ps.從iOS7提供的配色中,，大致能感覺到,，配色上較傾向于冷色。

iOS7在視覺上刪繁就簡,，在交互的提示上強化再三,。目的還是塑造一個更加現(xiàn)代的UI樣式。對層級,，對內容分割的另類探索是我寫作這篇文字中感觸最深的一部分,。模糊，景深等元素的設計可以說極具創(chuàng)意,?？梢哉f蘋果確實教化了大眾的視覺。如今反觀iOS6,，很多細節(jié)確實顯得過度而浮夸,。那種設計就像一枚視覺糖果一般，含在嘴里時覺得不以為然,，漱了漱口后再吃就覺得甜膩的難受