從新推出的 WWDC 2013 應用能看出 iOS 7 的設計風格轉變方向嗎?


下載鏈接: WWDC for iPhone, iPod touch, and iPad on the iTunes App Store


2013.06.11 更新
iOS 7 正式公布了,回頭來回顧這篇答案很有意思,直接看一下哪些猜對了哪些猜錯了:

猜錯了:

  • 基調:改視覺不改交互,這是 iOS 7 的基調。
  • Tab Bar:提供兩種配色的 Tab Bar,WWDC 的白色和 App Store 的黑色

猜對了:

  • 圖標:大膽推斷 iOS 7 中大部分圖標會改成 WWDC 這種純色漸變加基本圖形的樣式
  • 界面視覺:使用灰白配色,放棄高光,減弱漸變幅度,少用陰影
  • 微質感:iOS 7 不會是 Windows 8 那種極致扁平,還是會有陰影漸變高光這些手法,更收斂更節制
  • 手勢:全局引入側滑後退手勢動作

以下為原文。

————
睡不著,正好睡前下了 WWDC 的應用,試著整理一下,拋磚引玉。

1. 圖標的變化

  • 放棄使用了一貫的高光遮罩
  • 只有漸變和 logo 基本圖形,元素更為簡潔

挑選了 iOS 幾個有代表性的圖標做對比,可以看到 WWDC 沒有了標誌性的高光遮罩,沒有「擬物」,沒有陰影,只有基本圖形和漸變色。

挑選了 iOS 幾個有代表性的圖標做對比,可以看到 WWDC 沒有了標誌性的高光遮罩,沒有「擬物」,沒有陰影,只有基本圖形和漸變色。

2. Tab Bar 的變化

  • 傳統的黑色背景色變為白色
  • 沒有導航欄背景的高光漸變
  • 沒有陰影
  • 選中狀態沒有圓角背景

Tab Bar 對比:從上往下,依次為歷次 Tab Bar 樣式,最下為 WWDC。

Tab Bar 對比:從上往下,依次為歷次 Tab Bar 樣式,最下為 WWDC。
關於 Tab Bar,可以翻閱@鄭紫陽 的回答,更多細節對比:http://www.zhihu.com/question/21152707/answer/17358011

3. 導航欄的變化
提醒:這部分不太有說服力,看了下 WWDC 2012 的應用設計,已經很接近 2013 這個風格了。抱歉,沒做好功課,大家看看就好。

  • 傳統的普藍漸變背景色變為白色
  • 按鈕的漸變減弱,且漸變方向變為徑向漸變
  • 導航欄標題字體顏色從「白色」變為「黑色」(不嚴謹說法)

4. 對比案例:日曆和 WWDC
下面選擇目前系統中的日曆(控制項元素和 WWDC 有可比性)作為對比,詳細說明。

Table View 對比:注意導航欄背景、導航欄按鈕,列表小標題的變化。

Table View 對比:注意導航欄背景、導航欄按鈕,列表小標題的變化。

注意圓點標籤顏色、背景顏色,單元格樣式的變化。

注意圓點標籤顏色、背景顏色,單元格樣式的變化。

空頁面對比變化:基本圖形,沒有質感紋理,陰影減弱。

空頁面對比變化:基本圖形,沒有質感紋理,陰影減弱。

5. 所以?
從 WWDC 這個應用,我的結論是:

  • 基調:改視覺不改交互,這是 iOS 7 的基調
  • 圖標:大膽推斷 iOS 7 中大部分圖標會改成 WWDC 這種純色漸變加基本圖形的樣式
  • Tab Bar:提供兩種配色的 Tab Bar,WWDC 的白色和 App Store 的黑色
  • 界面視覺:使用灰白配色,放棄高光,減弱漸變幅度,少用陰影
  • 微質感:iOS 7 不會是 Windows 8 那種極致扁平,還是會有陰影漸變高光這些手法,更收斂更節制

所以,WWDC logo 原來是想告訴大家,我們也要換圖標!圖標變化才是 iOS 7 最大的亮點嗎?哭。

所以,WWDC logo 原來是想告訴大家,我們也要換圖標!圖標變化才是 iOS 7 最大的亮點嗎?哭。
開個玩笑,希望不止如此,不過很有意思,評論里有人說 MIUI V5 引領潮流了。 XD

6. 最後
這是不是 iOS 7 的趨勢?
是的,這是 iOS 7 的設計語言,而且 iOS 7 就是這個樣子,不會讓你驚嘆。
想想從去年 App Store 的界面更新,到今年3月 Podcast 新設計,再到最近 iTunes 的持續變化吧。

那設計上還有沒有驚喜?
改視覺時不改交互。交互層面上不會有太多改動了,主要是視覺上的優化。我自己感覺手勢動作算是最有可能引入的新特性,比如全局引入側滑後退手勢。不過能不能在發布前將所有系統應用都更新可能都是問題。

記得 3 月份和@Hynuza 在試玩新版 Path 時,閑扯時說 iOS 需要迎合消費者做一次視覺更新。短短几個月之內,Flat UI 成了業內裝腔必備辭彙,大家紛紛也在猜測 iOS 7 可能會發生的變革。其實也能理解,iOS 雖然石破天驚,但畢竟已經 5 歲多了,iOS 再好也抵不過人們喜新厭舊。

「It』s very easy to be different, but very difficult to be better」,這是 Jonathan Ive 說的。

所以,你覺得 iOS 7 會讓你看到「很不一樣」而驚呼?還是讓用戶不知不覺雖然改了視覺但操作邏輯還是一致的順暢升級?

以上。如有不符,純屬瞎扯。


能看出。但希望不僅如此。

2012 年蘋果也為 WWDC 做了一款 app(http://itunes.apple.com/us/app/wwdc-2012/id525464038?mt=8),
當時 cultofmac 便猜測,這會不會是 iOS 6 的設計風格預覽呢?

事實證明,是的。

左為 WWDC 2011 app,右為 WWDC 2012 app。iOS 5 和 iOS 6 的設計風格區別,你們感受一下。


但 2013 年的 WWDC app 與 WWDC 2012 相對比,並沒有如此令人交口稱讚的設計風格改進。
可看截圖:http://itunes.apple.com/us/app/wwdc-2012/id525464038?mt=8

猜有兩種可能:

  1. Jony Ive 老師在玩保密,隨後便有驚喜;
  2. 朋友你想多了,iOS 7 就只是這樣。

希望是前者。

Reference: Apple"s Official WWDC 2012 App Could Be Your First Glimpse At iOS 6"s New iPhone Look


我認爲 iOS 7 會不會更平很不重要。可能會,可能不會,但蘋果做得最好的軟體跟視覺風格幾乎沒有關係,跟好不好用有關。

那個軟體是用來做幻燈片的 Keynote (for Mac)。

iOS 上我還沒有看到哪個蘋果自家的軟體達到了 Keynote for Mac 的高度。或許 GarageBand for iPad 有點接近。

GarageBand 超級擬物,Keynote for Mac 完全不擬物,但不妨礙它們成爲各自領域中最好用的工具。


一起感受下,圖標看起來是種"十有八九我就長這樣"的趕腳了。

一起感受下,圖標看起來是種"十有八九我就長這樣"的趕腳了。
海報Logo後面的色彩現在看起來就是內置App的色彩似的,不是神馬iWatch之類的...

界面部分,我比較在意的是交互部分
就像Passbook那樣,整體交互和iOS其他內置App是非常不一樣的感覺,而這部分似乎無法從今天發布的WWDC的App看出來。

以上猜測。


最後吐個槽

Schedule的投影方向錯誤實在是不應該。

Schedule的投影方向錯誤實在是不應該。


我就說一下圖標,我個人感覺應該就是去掉原有的的高光遮罩和紋理,背景漸變+ logo 基本圖形,這種扁平化的風格。
圖標的基本形態如下圖所示:

為此其他主要應用也要跟隨期風格,如下圖所示:

為此其他主要應用也要跟隨期風格,如下圖所示:

圖片素材來自於:

圖片素材來自於:The future of iOS design?


皇帝不急,我也不是設計師,我沒看出有什麼區別,可能我是木眼睛吧。

但是得票最高的那個回答里,我發現了一個新的小問題,那就是所謂的設計師,有一些人瘋狂的進入了一個偏執的,碎片化的,盲目追求所謂設計感,質感的誤區,糾纏在像我這樣的普通用戶毫無察覺的細枝末節上,並且不斷的以此為榮,樂此不彼。

我一點也沒覺得如果脫離了整體風格,換個圖標會帶給用戶多大的愉悅,也不覺得所謂的換個風格,用戶就會有驚喜。

套用那誰的話,儀式感不要那麼強烈可以嗎。


扁平化設計理念佔據了蘋果設計的大腦,估計又被吐槽死


據上述分析,ios 7 交互不變,變得大多是視覺方面的。
起初,擬物圖標風格是ios的到來而掀起的設計風,作為風尚先驅者,令許多設計師們爭相模仿,並且進入了一種極致的、超寫實的擬物偏執,追求越有質感越引以為自豪的階段,大大提升了美工的技術能力。後來,隨著android和wp的崛起,metro UI風格進入人們的視線,作為普通用戶看到整體界面換了個風格,簡潔的大色塊帶來新的視覺感受,無疑又成功得吸引了一批metro風擁護者。隨之,UI風格百家爭鳴,視覺設計師們爭相討論著到底是擬物風吸引人還是扁平化風格更吸引人,更有人說蘋果公司現在已經沒有吸引力了,ios 7的視覺風格竟然也跟風走扁平風格了。
但是,我認為,不管果粉們對ios7視覺跟風如何失望,但設計必然會有一定的趨勢和規律,據平面設計史的發展長河可以看出,設計一直遵循著這樣的規律,從複雜的工藝技術到現在的簡單的電腦美術,從維多利亞時期的複雜設計到包豪斯的簡潔設計,這是一種發展與進步,不以主觀的偏好來斷言這樣的改革不好。因此,即時是在UI設計界,我相信同樣會不斷發生這樣的歷史推動與革新。只是果粉們看到的是一向走風尚前言的品牌一下子淪為追逐大潮的平庸之輩,對蘋果的期望越大失望也就越大,果粉們吐槽ios7的糟爛也在情理之中。


回頭看最新更新的開發者手冊就好了
裡面會提及相關UI標準的
We"ll be back soon 《=這是iOS Dev Center
目前是維護狀態 相信過段時間就會開放


MIUI真的引領潮流了


不把程序的後退鍵挪到屏幕下方就談不上人性化,都已經4寸屏幕了,談別的都是浮雲


推薦閱讀:

TAG:iOS | iOS 7 | WWDC 2013 | iOS Design |