iOS 7

iOSgrid

5年來最大的一次版本更新帶來了一個“完全”不一樣的 iOS7,輕量化的視覺風格,更倚重字體、字號以及留白之間關係的現代主義表現手法,更多的手勢操作取代了傳統的點擊反饋,這些無不在驗證着 iOS 寶刀不老、輝煌依舊的未來。作爲一個電子產品愛好者,我不禁想大聲呼喊:“iOS 就是棒!apple 就是老卵!” 然後,按照平時腦殘果粉的劇情,下面就應該逐條逐句的研究、體會、融會貫通、驚豔教主,哦不,現在是爵士的設計理念了不是嗎?

NO! 才不是,正因爲我喜歡這新 iOS,才更要對其中不符合正常邏輯以及美學的地方口誅筆伐!

kick

打蛇打七寸,就拿我最不能忍受的 launcher icon 開刀見紅。
不知道其他人第一眼見到 iOS7 的 launcher icons 時的表情是怎樣,至少我當時那一剎那是一點表情都擠不出來,腦袋 “唰” 的一下全白了,相信比給 Ive 爵士拍攝吹噓新設計有多 purity,有多 simplicity 的攝影棚還要白。“這™是什麼啊?” 就是這麼一個充滿哲學迷思的問題縈繞在我的腦袋和眼底。
好吧,雖然無法相信,但是5分鐘後我還是靠着自己強大的意志力從遊離狀態中“醒”了過來。

先說說配色

iOSicons

上圖是我用提取自 iOS7 的 icon 排列的一張圖表。

icon design 中通過保持一定的色彩延續和跟隨,可以使 set 內各 icon 建立起一定的聯繫並給人以更整體的視覺感受。這一點 iOS7 的 launcher icon 做的非常混亂,可以說完全是隨性的。舉個栗子,上圖這24個 icon 中出現藍色元素的一共有13個,但是它們之間藍色的色值關係卻又是錯綜複雜的:比如 b1 App Store 和 a2 Safari 都是垂直方向的由淺至深、由明至暗的漸變。但通過取色你會發現,b1 是rgb(8,224,251)→ rgb(30,77,239)的漸變;a2 則是 rgb(2,231,255)→ rgb(11,65,241)的漸變。再來看看a4 Weather 和b4 Mail,他們的漸變規則和上面一組相反,垂直方向的由暗至明,a4 是 rgb(27,115,239)→ rgb(124,231,251); b4 是 rgb(30,77,239)→ rgb(8,224,251)。其他的比如 d2 的 Reminds(0,171,251); b5 的 Stocks(45,171,255)…

可能有人會說,“這有什麼關係?我覺得現在這樣更跳脫活潑,連顏色都框的死死的,不覺得僵化麼?” 欸,的確,這不是太大的問題,這只是一個保持一致性的方式,iOS7 沒有選擇這種方式,所以這也是最終呈現的結果顯得雜亂無章的一個隱性的原因。

好,接着再說顏色的選擇。很難理解,眼部功能正常的設計師會在液晶屏環境上採用飽和度如此高的這一系列顏色,下圖是我摘自iOS7 launcher icon 上的色表:

color-palette

嗯… 單這麼拉出來看,這些顏色配在一起很潮很年輕是么?前段時間聽到過有人這麼去“理解”:“人家 nike 的熒光色慢跑鞋、運動背心、護腕等等不是大受歡迎麼?所以,iOS 用高飽和配色沒什麼不對的,這是年輕化的趨勢。

我說:“趨勢你妹。
知其然不知其所以然的2貨才能得出如此的沾沾自喜的結論啊!通過數據分析 nike 發現喜愛戶外跑步的人大多會選擇晚上的時間段,這樣的話在自家的相關產品中加入熒光/反光材料可一定範圍的提高夜間跑步的安全性,以此爲賣點來得到消費者的認同。所以,搞搞清楚,環境和目的是如此不同,這是投放於顯示設備且不是那種什麼奪人眼球目的的無需用戶長時間駐足,而是每天點亮手機解鎖屏幕後就要時時面對的 launcher icon 啊!除了惡意的臆測 Ive 爵士患有眼疾外,我真的無法想象爲何會是這樣的結果。

再談談造型

根據新的HIG,app icon 的尺寸在 iOS7 中將會被調整爲120×120(iPhone),152×152 (iPad)。基於尺寸的調整,我們進一步發現現在的圖標外輪廓不再是原先單純的圓角矩形,介於此,之前在網絡上也引發了一大羣視覺設計師的討論和逆向工程,希望搞清楚新輪廓究竟該如何繪製?參考知乎上的這個討論: iOS 7 的圆角图标是怎样一个图形?
很遺憾,最終還是沒有一個讓人完全信服的結果,最接近的方案也與官方形狀稍有區別。爲什麼會這樣?因爲雖然這種平滑的曲線造型方式(Continuity)在工業設計中被廣泛的使用,但目前爲止主流的平面設計軟件卻沒有一個固定統一的方式可以使其被實現。沒有一個統一簡單的步驟意味着最終呈現的不可預測性,試想我這裏畫的是一個整體造型的圖標(比如類似Evernote FoodSmartr ContactsSyncSpace Free 這樣的。)但由於無法準確得到和 apple 一致的外輪廓造型,最終投放在 launcher 上的效果絕對無法得到保證吧?看一下現在 iOS6一下規範設計的 icon 在 iOS7 上的糟糕效果就明白了。當然,apple 可以在 iOS7 正式發佈後通過 release 一套官方的 icon template 來解決這個問題,這也是目前能想到的最好的解決方案。但是,請想一想,很長一段時間內,至少 iOS6 依然會爲廣大開發者所支持,那這樣的話,同一個 app 很可能就需要製作兩套 app icon 來分別顯示於兩個版本上。這無論如何都和Ive 爵士在 iOS7 宣傳 video 裏着重講的 “Simplicity”背道而馳。

說完外輪廓的事,我們再回過頭來看看新 grid system。
看一下文章題圖的右邊,這就是 apple 在其官網介紹 iOS7 視頻中着重推介的新 icon grid system。再來看一下圖表上的 c1、d1、a2、a5、c5 這幾個 icon。很明顯,他們內圈的圓是完全契合 grid 的。沒錯,很統一。這是 icon design 過程中很重要的一個需要遵循的基礎,apple 在這裏身體力行的遵守了它。所以錯不在統一,而在其源頭也就是這套新的 grid。不知道 apple 是採用何種公式或者方法得出了這個圓,但在我看來它的與最外圈的比例顯得過於大了一些。這樣的結果導致了視覺上會形成一個錯覺 —— 你會發現 Safari、App Store 、itunes 等圖標其外輪廓的四邊有一種微微向內凹陷的感覺,這就是因爲那圈圓面積過大,與外輪廓過於接近的關係。

其他的,請老實告訴我,你真的覺得 Contacts、Game Center、Reminds 這些 icon 的造型是最佳選擇了嗎?請老實問問自己的良心,好嗎?

總之,這次 iOS7 關於 launcher icon 部分的更新讓我覺得無法與整個 OS 的進步相提並論,更無法與 apple 一貫的對於視覺設計嚴苛的高質量要求相一致。前端時間在看“Steve Jobs: The Lost Interview” 中有一段 Jobs 評論對手微軟的話讓我記憶猶新,就讓教主的這段話作爲本文的結束語吧。

讓我難過的並非微軟的成功,我一點不嫉妒他們,他們的成功基本上是靠勤勉換來的。我難過的是他們做的是三流產品,他們的產品沒有靈魂和魅力,太平庸,更讓人難過的是使用者居然毫無察覺。但是,生而為人,就是要追求極致,並且互相分享,這樣人類才能一起進步,學會欣賞更美的東西。微軟不過是另一個麥當勞,這才是我難過的原因,不是因為微軟贏了,而是因為微軟的產品缺少創意。





其他的一些相關的聲音:

2013-6-11 20:01 @leongao 不能。不能因为其他方面的优秀就忘掉或者无视launcher icon的丑陋;同样不能因为由于普通用户的审美没有跟上没发现这些丑恶从而从业者掩耳盗铃的当作它不存在。iOS7的确依然是个好系统,现有版本的一些细节不尽让人叫好,但更有很多地方却显得和苹果的品味格格不入,总而言之,它应该更好的。

2013-6-12 19:00 @hxflyer 看了段iOS7真机视频,我的感觉就像是乔布斯生前花了毕生精力给大家画了一副令人看后欲罢不能的绝色美女高清无码大图,乔布斯死后他的亲密挚友强纳森嗑完药即兴在图上给美女画了个鸡巴!啊不!竟然还画在了脸上!

2013-6-12 00:38 @向若珲 实在是无法忍受那些从各个角度来为这种「丑」进行开脱的人了。丑就是丑,它与设计风格无关、与交互逻辑无关、与你背后的任何理念、原则、人性,以及你未来多么宏大的蓝图都无关,它就是丑,无法接受的丑。你完全可以做得既符合你的理念,又漂亮,你没做到而已。

2013-6-11 17:59 @Livid 距离正式版还有几个月,乐观点想,他们有那么多设计师,重新设计几套也是完全来得及的。这个初始版本实在是让人难受。颜色过曝、平面化设计却又不肯完全放弃纹理和过渡色、还有那个设置图标的齿轮为什么会这么尖利?看着难受啊。

其他國外友人的文章:

What’s Wrong With the iOS 7 Icons? -Ian Storm Taylor
Wrong -Neven Mrgan

Leave a Reply