大圖對比:iOS 7跟iOS 6有啥區別?
iOS 7釋出了,簡單的線條,刺眼的留白,鮮豔的顏色,少了很多裝飾的應用圖示……但從設計的角度上來說,手勢沒變、區別也很小,最大的變化就是審美變了,從一個為小白使用者設計的介面趨向於成熟使用者的調調,下面對比iOS 6來說幾點它的顯著UI風格變化。
目前整個設計的趨勢是讓UI少一些修飾,之前的蘋果推崇擬物化設計,讓使用者一目瞭然那個東西是幹什麼的。此次iOS 7的設計卻讓整個調調發生了變化,總的來說,手勢沒變、區別也很小,最大的變化就是審美變了。
1. 顏色和邊界
iOS 7的顏色和邊界在這個應用上有很明顯的區別。iOS 7捨棄了邊界,依靠色彩來體現互動、資訊的分隔;相應地控制也變成了隱形的,基於標籤或者圖示以及主題顏色(每個應用都有不同,聯絡人用藍色、 音樂用紅色、 筆記用黃色)的控制。另外細長的字型並不是所有人都看得慣,但是事實就是之前iOS 6那個邊框就這樣被移開了。
2. 扁平化
嚴格來說iOS 7不是完全扁平化的,介面還有微妙的陰影、燈光效果、漸變以及視差效果。一句話,它當然變平了,但不是純粹二維的。
扁平化的直接目的是要強調內容而非介質,所以相對於iOS6,iOS 7上應用重點在內容上強調了它的美學和概念特性,功能和資訊裝飾則只出現在必要的地方。所以以下面的應用為例,桌面應用沒有很明顯的強調該應用的功能、控制感,重點只關注 “做事情” 的清單。
新介面的發光非常明顯,頂部的導航按鈕就像網際網路上的“<”符號一樣直觀。
下面是接電話的介面
之前的凸凹變化、握柄、壓花、陰影、內發光、硬按鈕邊界等設計元素佔去了60%的螢幕空間。新版本則直接讓你看到來電者的大照片,旁邊有幾個選項(字元)掛在旁邊可供你選擇。
3. 明亮度
1)iOS 7比iOS 6要光亮多了,介面也看起來更開闊,透氣的空格無處不在,整體的介面風格也更加均勻。下圖是iOS 6的一系列應用拼圖。
2)下圖是iOS 7的一系列應用拼圖,可以發現它在儘可能的情況下趨向相同的螢幕風格。
3)下面是把兩張大圖拼在一起的效果。
如果減少顏色的複雜性,就可以看得更明顯。等於是iOS 6幾個不同的視覺風格在iOS 7上已經變成了兩個主要的主題:紙張般的、明亮的風格佔據75%;剩下的就是暗色的實用風格。
4. 主螢幕
目前爭論最多的似乎是主螢幕,特別是它的新圖示,主螢幕更多的是一個桌面啟動器,你會經常訪問,但不會一直盯著它。 iOS 7的主螢幕比iOS 6要明亮、簡單,圖示間的間距也有了變化,單個圖示的畫素也看起來更大了,下面的文字標籤也變大了,最下面一排應用圖示墊了一層淺淺的“磨砂板” 設計。
總的來說,犧牲了邊界,換取了圖示的易讀性,更加突出圖示的內容。
但是設計上有些小問題(拐角的半徑、 內容的強調形式、梯度的不一致、背景的反差以及那幾個被人詬病的圖示,比如Note和Reminder, 就設計地過於抽象和空洞了)。這些完全是主觀上的問題,蘋果應該可以解決。我們也相信蘋果在正式版本釋出的時候會做一些小改變的。
小結——設計重心迴歸內容
從本質上來說,iOS 7捨棄了人工製品的花哨,迴歸到了設計的本質,致力於追求簡單,達到直擊內容的目的。之前的光澤感、斜邊緣、陰影和邊界將一去不復返。視覺上不再是讓精緻的圖示要讓我們集中、緊張,吸引我們的全部注意力,而是儘可能地放鬆,去關注應用圖示所關注的內容。
如果說以前的設計是為小白使用者而存在的,現在的就是為了成熟的移動使用者設計的, 更加註重感情和直覺,而不是那些精緻的邊框。iOS 7現在希望達到的目的是:“你用著裝置想的更多的而是這個裝置、這個應用怎麼提高我的生活?讓使用者把注意力轉移到任務、內容上面,而不是被過度追捧的設計哲學” 對我廣大使用者來說,現在唯一的問題只剩下:“iOS 7想長大,想成熟,但是使用者們願不願意呢?”
英文來源:mattgemmell
相關文章
- 一圖告訴你 iOS 6 和 iOS 7 的區別iOS
- iOS 6 和 iOS 7 的真實區別iOS
- 安卓測試跟ios 測試有什麼區別?安卓iOS
- iPhone 7和6s有什麼區別?蘋果7和6s對比影片iPhone蘋果
- OPPO R7與美圖M6區別對比評測
- iPhone 7和7 Plus有什麼區別? 蘋果7與7 Plus區別對比評測iPhone蘋果
- OPPO R7Plus和美圖M6區別對比評測
- 九個角度分析對比 Android、iOS開發區別AndroidiOS
- 美圖M6和V4s真機區別對比圖賞 6有什麼不同?
- 魅族PRO6和榮耀7區別對比評測
- 美圖M6與魅族PRO 6區別對比評測
- Onavo:iOS6地圖比Google Maps節省7倍資料量iOS地圖Go
- 小米Note2對比三星Note7:外觀區別有點大
- vivo X7和iphone 6s區別對比評測iPhone
- vivo X6和vivo X7區別對比評測
- 360N7對比N6 Pro的區別對比 60N7和360N6 Pro哪個好?
- 魅藍6與魅藍5區別對比 魅藍6和魅藍5有什麼區別?
- 魅藍6與魅藍6T區別對比 魅藍6T和魅藍6有什麼區別?
- iOS 針對有中文的url圖片iOS
- 華為暢享6和小辣椒X7區別對比評測
- vivo X7和魅族MX6區別對比評測
- vivo X7與魅族PRO6區別對比評測
- vivo x6plus和vivo x7區別對比評測
- require和import有啥區別?UIImport
- 魅族PRO6和OPPO R7 Plus區別對比評測
- 魅族MX6和榮耀7區別對比評測 誰更好用?
- vivo X7與魅族MX6區別對比評測 6哪個好?
- 一加手機3和美圖M6區別對比評測
- 美圖M6與魅族Pro 5區別對比評測
- Python 中 "is" 與 "==" 有啥區別?Python
- 全面對比 Redis 和 Memcached 的 6 點區別Redis
- iostream.h和iostream 區別iOS
- vivo X7 Plus和vivo X6S Plus區別對比評測
- 魅族pro6和三星 note7區別對比評測
- vivox7plus和金立m6plus區別對比評測
- 三星 C7和魅族pro6區別對比評測
- 華為watch gt運動版和活力版有啥區別?華為watchgt運動版和活動版區別對比
- Flyme6和iOS10對比:這6個功能Flyme6更好用iOS