大圖對比:iOS 7跟iOS 6有啥區別?

Web開發者發表於2013-06-17

  iOS 7釋出了,簡單的線條,刺眼的留白,鮮豔的顏色,少了很多裝飾的應用圖示……但從設計的角度上來說,手勢沒變、區別也很小,最大的變化就是審美變了,從一個為小白使用者設計的介面趨向於成熟使用者的調調,下面對比iOS 6來說幾點它的顯著UI風格變化。

  目前整個設計的趨勢是讓UI少一些修飾,之前的蘋果推崇擬物化設計,讓使用者一目瞭然那個東西是幹什麼的。此次iOS 7的設計卻讓整個調調發生了變化,總的來說,手勢沒變、區別也很小,最大的變化就是審美變了。

 1. 顏色和邊界

i7 1

  iOS 7的顏色和邊界在這個應用上有很明顯的區別。iOS 7捨棄了邊界,依靠色彩來體現互動、資訊的分隔;相應地控制也變成了隱形的,基於標籤或者圖示以及主題顏色(每個應用都有不同,聯絡人用藍色、 音樂用紅色、 筆記用黃色)的控制。另外細長的字型並不是所有人都看得慣,但是事實就是之前iOS 6那個邊框就這樣被移開了。

 2. 扁平化

flat

  嚴格來說iOS 7不是完全扁平化的,介面還有微妙的陰影、燈光效果、漸變以及視差效果。一句話,它當然變平了,但不是純粹二維的。

  扁平化的直接目的是要強調內容而非介質,所以相對於iOS6,iOS 7上應用重點在內容上強調了它的美學和概念特性,功能和資訊裝飾則只出現在必要的地方。所以以下面的應用為例,桌面應用沒有很明顯的強調該應用的功能、控制感,重點只關注 “做事情” 的清單。

  新介面的發光非常明顯,頂部的導航按鈕就像網際網路上的“<”符號一樣直觀。

  下面是接電話的介面

i73

  之前的凸凹變化、握柄、壓花、陰影、內發光、硬按鈕邊界等設計元素佔去了60%的螢幕空間。新版本則直接讓你看到來電者的大照片,旁邊有幾個選項(字元)掛在旁邊可供你選擇。

 3. 明亮度

  1)iOS 7比iOS 6要光亮多了,介面也看起來更開闊,透氣的空格無處不在,整體的介面風格也更加均勻。下圖是iOS 6的一系列應用拼圖。

ios 7

  2)下圖是iOS 7的一系列應用拼圖,可以發現它在儘可能的情況下趨向相同的螢幕風格。

i75

  3)下面是把兩張大圖拼在一起的效果。

i78

  如果減少顏色的複雜性,就可以看得更明顯。等於是iOS 6幾個不同的視覺風格在iOS 7上已經變成了兩個主要的主題:紙張般的、明亮的風格佔據75%;剩下的就是暗色的實用風格。

i79

 4. 主螢幕

i710

  目前爭論最多的似乎是主螢幕,特別是它的新圖示,主螢幕更多的是一個桌面啟動器,你會經常訪問,但不會一直盯著它。 iOS 7的主螢幕比iOS 6要明亮、簡單,圖示間的間距也有了變化,單個圖示的畫素也看起來更大了,下面的文字標籤也變大了,最下面一排應用圖示墊了一層淺淺的“磨砂板” 設計。
總的來說,犧牲了邊界,換取了圖示的易讀性,更加突出圖示的內容。

  但是設計上有些小問題(拐角的半徑、 內容的強調形式、梯度的不一致、背景的反差以及那幾個被人詬病的圖示,比如Note和Reminder, 就設計地過於抽象和空洞了)。這些完全是主觀上的問題,蘋果應該可以解決。我們也相信蘋果在正式版本釋出的時候會做一些小改變的。

 小結——設計重心迴歸內容

  從本質上來說,iOS 7捨棄了人工製品的花哨,迴歸到了設計的本質,致力於追求簡單,達到直擊內容的目的。之前的光澤感、斜邊緣、陰影和邊界將一去不復返。視覺上不再是讓精緻的圖示要讓我們集中、緊張,吸引我們的全部注意力,而是儘可能地放鬆,去關注應用圖示所關注的內容。

  如果說以前的設計是為小白使用者而存在的,現在的就是為了成熟的移動使用者設計的, 更加註重感情和直覺,而不是那些精緻的邊框。iOS 7現在希望達到的目的是:“你用著裝置想的更多的而是這個裝置、這個應用怎麼提高我的生活?讓使用者把注意力轉移到任務、內容上面,而不是被過度追捧的設計哲學”  對我廣大使用者來說,現在唯一的問題只剩下:“iOS 7想長大,想成熟,但是使用者們願不願意呢?”

  英文來源:mattgemmell

相關文章