文/Howlin Yang

編輯/Illusion@頂尖文案TOPYS

丨丨編按：有不少人對(duì)iOS7 的設(shè)計(jì)很不習(xí)慣，不過也使用這么久了吐槽歸吐槽，但你知道蘋果設(shè)計(jì)團(tuán)隊(duì)背后的真正巧思嗎？ 本文作者Howlin Yang 帶你從他的觀點(diǎn)看iOS7 設(shè)計(jì)在行動(dòng)裝置上的變革，以及思考背后對(duì)未來科技產(chǎn)品的洞見。

又是一篇iOS7 的罵文嗎？ 不是的。 贊美文？ 應(yīng)該也不是。 在Even wu iOS 7的設(shè)計(jì)和David Chen「 扁平化是假議題 」兩篇大作之后，還敢寫這類文章真是找死。
本篇想探討的是，為什么iOS7會(huì)變成這個(gè)樣子，Apple到底看到了什么樣的Vision？
iOS7究竟好不好用？ 看看身邊的朋友吧，通常是哀嚎的多：

「怎么這么丑?。　?(視覺出包)
「按鈕和內(nèi)容全混在一起了！」(易用性不佳)
「媽啦！螢光色，我要瞎了！」(視覺出包)
「這根本是Android 啦」(品牌辨識(shí)度混淆)

更新iOS 7 有這么慘？ 4 歲男孩痛哭流涕

iOS7 用了各種新設(shè)計(jì)，卻造成一場災(zāi)難，酸民罵聲一片，但我是設(shè)計(jì)師，盡管不喜歡，在地上痛哭+ 咒罵+ 打滾完之后，爬起來除了要接受，還得學(xué)習(xí)如何使用iOS7的設(shè)計(jì)語言。
如Tapity這個(gè)Blog寫的：「大家都可以說它很糟，但我決定先研究它兩週後再下定論」
Good!!，這心態(tài)我欣賞。 于是我也催眠自己：「它沒那么糟，它沒那么糟，它沒那么糟….」最后真的發(fā)現(xiàn)， iOS7 想描述的東西并不簡單。 希望不是我的幻覺，在此分享：

Flat Design means more than you think.
什么是扁平化？ 是不是沒有陰影？ 沒有框？ 沒有漸層？ 沒有材質(zhì)？ 就是扁平化？
如果是的話…
巨匠可就樂歪了， Photoshop只要教兩堂就可以結(jié)業(yè)了。 (大誤)
老板也樂翻了，因?yàn)镻PT 也可以做出扁平化設(shè)計(jì)，人人都是設(shè)計(jì)師??！ (攤手)
為什么iOS7 要做這種愚蠢的設(shè)計(jì)？ Apple 不行了嗎？
我想，它是看到了更遠(yuǎn)的未來。
扁平化設(shè)計(jì)，指的不單視覺上，更是資訊架構(gòu)上。 從2010年Mobile First一書，不停強(qiáng)調(diào)的Content First到win8 UI Guideline中，進(jìn)一步禁止了三層以上的樹狀選單及iOS Human Interface Guideline中，一再宣揚(yáng)的幾個(gè)準(zhǔn)則：

1. Landing Page 不重要，要打開app 馬上可以用，別廢話，快上菜。 
As much as possible, avoid displaying a splash screen or other startup experience.
It's best when users can begin using your app immediately.

2. 貴寶號(hào)是啥，Brand Name 為何，公司理念、老板妄想… 阿撒不魯?shù)亩疾恢匾?，重點(diǎn)是使用者。 行銷手段，應(yīng)該低調(diào)的，偷偷的、置入性的、暗示的。 只有貴族懂得低調(diào)奢華，暴發(fā)戶卻會(huì)唯恐人不知。

Incorporate a brand's assets in a refined, unobtrusive way.
People use your app to get things done or be entertained; they don't want to feel as if they're being forced to watch an advertisement. For the best user experience, you want to quietly remind users of the brand identity through your choice of font, color, and imagery.

這一切在都在告訴你，行動(dòng)介面裝置， For users, By users — Made for users, Refined by users.

你的公司不重要，使用者最大。 你想做什么也不重要，重要的是使用者想做什么。

盡管iOS7 沒有明講，但透過介面改造，告訴你就是非得這么做不可，扁平設(shè)計(jì)(flat design) 不適合復(fù)雜、多層次的介面。 我們先回到2009 年，當(dāng)iPhone 上市時(shí)，?？吹嚼习迥弥W(wǎng)頁，就想把內(nèi)容都塞到app 里，那時(shí)候設(shè)計(jì)師還勉強(qiáng)能處理，頂多就是導(dǎo)覽蠢一點(diǎn)，顏色多一點(diǎn)，陰影多幾層，icon 都擬物設(shè)計(jì)，倒也混過去了。

萬一再碰到這種需求，設(shè)計(jì)師真的要哭了，轉(zhuǎn)成扁平化的過程會(huì)相當(dāng)困難。 不再有陰影、不再有漸層，內(nèi)容和按鈕混在一起… 要知道，表現(xiàn)技法都是設(shè)計(jì)師的武器呀，我們宛如被剝得精光，被丟到籠子里徒手博獸。 為什么會(huì)這樣子？

因?yàn)樵O(shè)計(jì)不再只是視覺問題，扁平化設(shè)計(jì)和資訊架構(gòu)牢牢綁緊，要簡單，明快，直覺，打開就可以用，比以前更強(qiáng)調(diào)Right Here, Right Now。

iOS7假定使用者都是明確的目的導(dǎo)向，對(duì)affordance依賴降低，甚至， 不可以有affordance。

什么是affordance？ 有些中文翻作承載性，我喜歡的翻譯是「可預(yù)示性」，表示一個(gè)好的介面，必須要提供足夠的線索，讓人一眼就能看出它是怎么操作的。 例如設(shè)計(jì)按鈕時(shí)，會(huì)把它畫成是漸層的，暗示它是一個(gè)突起的立體物，按下去之后，漸層會(huì)上下反轉(zhuǎn)，表示已經(jīng)被按下去了。

又例如，卷軸上的拖拉條，中間通常會(huì)有三條杠的突起，代表是可以拖拉的，這也是擬物設(shè)計(jì)，用真實(shí)世界的經(jīng)驗(yàn)，推知該介面要怎樣操作。 affordance 連結(jié)了擬物設(shè)計(jì)、圖形介面、以及Don't Let Me Think 等的設(shè)計(jì)準(zhǔn)則。

為什么？ 這在人機(jī)互動(dòng)上并不科學(xué)??！

行動(dòng)介面的設(shè)計(jì)體驗(yàn)有三種：

1.沉浸式，如游戲，進(jìn)入另一個(gè)世界，這個(gè)app 與系統(tǒng)是隔離的，有自己的設(shè)計(jì)準(zhǔn)則。
2.表格式，著重資料類型的app，資料一層層drill down 下去，通常有spring board 的選單頁。
3.擬物，用真實(shí)物件暗示該按鈕的功能，如：齒輪代表設(shè)定、垃圾桶代表刪除等等。

iOS7 改變了后兩者，把擬物減弱，簡化成線條狀，僅提供你最少的線索，著重在內(nèi)容表現(xiàn)，視覺上干擾的東西全沒了，也可以說介面變得毫無個(gè)性。

這代表Apple 諭示的使用情境將會(huì)是：

是的，在穿戴式情境下，F(xiàn)lat Design 不是選項(xiàng)，而是唯一辦法！
擬物設(shè)計(jì)反而造成困擾。 除了穿戴式裝置呢？

這支老影片暗示了Flat Design 與透明螢?zāi)粚⒏淖兪澜纾?/span>

新海誠為野村不動(dòng)產(chǎn)設(shè)計(jì)的動(dòng)畫，里面有很多flat design 的介面風(fēng)格，如04'33″ ：

很遙遠(yuǎn)的未來嗎？ 不，友達(dá)已經(jīng)做到了，跟進(jìn)者還有LG 和Samsung，透明螢?zāi)唤Y(jié)合實(shí)體的展示柜已經(jīng)上市了。 包括我也規(guī)畫過的這一類專案:

甚至是來自電影的暗示：

iphone6的概念機(jī)，請(qǐng)注意到，Apple試著拿掉邊框，事實(shí)上，它們想打造的是一塊可透明也可不透明的「神奇玻璃」：

 Transparent Cell Phone Concept，可看到，材質(zhì)渲染、陰影表現(xiàn)等，在透明材質(zhì)上效果不好，也沒有意義：

以上，為什么iOS7 要做出這么大的改變，應(yīng)該不是老賈死了所以內(nèi)斗，聽說iOS7 的設(shè)計(jì)方向也是他拍板的，更不是Jonathan Ive 吞了LSD (大笑)…

而是Apple看到了未來–「人們會(huì)活在資訊的洪流里，資訊，存在各個(gè)地方、隨時(shí)隨地，虛擬與真實(shí)結(jié)合，以無接軌的方式和人互動(dòng)」

他非得這樣做，只怕，還晚了Android一步呢。 

因此，這些困擾我很久的問題(一堆朋友常問呀問的)，都有合理的解答了。

Q:為什么iOS7不建議多層次的資訊架構(gòu)，卻在介面上保留了多層layer的概念？
A: 彌補(bǔ)affordance 的不足，沒有材質(zhì)陰影，卻更強(qiáng)調(diào)用過場動(dòng)畫帶出資訊

Q:為什么iOS 7是白色底？ 毛玻璃效果？
A 它在模擬透明螢?zāi)恍Ч?盡管有時(shí)候很糟糕…)，手機(jī)不再是手機(jī)，而是一個(gè)透明介面，透過這個(gè)介面，在真實(shí)場景中得到更多資訊。

Q: 為什么顏色那么螢光，我要瞎了！
A: 如果不用這顏色，根本看不見，請(qǐng)想想飛行員用的抬頭顯示儀(HUD)，廠商正千方百計(jì)要把它應(yīng)用在車子上，筆者在規(guī)畫時(shí)也曾碰過透明螢?zāi)坏南拗疲合袷亲钌? 黑色只能到alpha 50%，如果用中明度、低飽和顏色，很容易和背景混在一起，一定得用高明度、高彩度的設(shè)計(jì)。

Q: 字體太細(xì)了，我看不見！
A: 掛在透明螢?zāi)簧?，字體太粗，會(huì)檔住視線…. 請(qǐng)回想公車玻璃上的電腦割字，多半是粗體字，是否檔住了乘客的視野？ 是否惱人？ 廣告是為了由外能清楚看到，如果由內(nèi)往外看呢？

Q: iOS7 我就是不喜歡…
A: 但你還是會(huì)買iPhone 呀，也許iOS 7 不適合現(xiàn)在的硬體，但Apple 需要做實(shí)驗(yàn)…. 就算他把使用者當(dāng)小白老鼠，你也無法抗拒呀。 Apple 目前只在行動(dòng)裝置上嘗試扁平設(shè)計(jì)，我不認(rèn)為它會(huì)擴(kuò)展到Mac 系統(tǒng)，因?yàn)闆]必要。 但它有必要將各種行動(dòng)裝置的介面體驗(yàn)一致化，扁平化就是最大公約數(shù)。

iOS7 做對(duì)了嗎？

方向?qū)α耍褪虑樽鰧?duì)了，是兩回事。 目前來看，Apple 很多地方還沒做好，來自使用者的回饋是最準(zhǔn)的。 Flat design 并不適合設(shè)計(jì)多層次的介面，萬一再加上淺色配色，結(jié)果會(huì)更糟，如iOS7 的app store，把顏色玩死了。 像是一堆糖果紙混在一起，無外框設(shè)計(jì)，無法有效歸類資訊，白色也壓不住各產(chǎn)品，形成零碎的視覺。 icon 圓角與圓角之間的空間更形尷尬。

同為扁平設(shè)計(jì)，Android Market 就比他強(qiáng)：

同為白底設(shè)計(jì)，Acer 也優(yōu)秀得多，就算把陰影漸層等拿掉也是的：

iOS7 設(shè)計(jì)是革命的，卻也是有漏洞的，倒希望許多把iOS UI kit 奉為圭臬的設(shè)計(jì)師，其實(shí)別那么緊張，Apple 也會(huì)犯錯(cuò)，行動(dòng)裝置扁平化是個(gè)全新挑戰(zhàn)，還沒成熟，任何人都來得及作定義，dribble 上還有許多redesign 的好作品，只要看見Apple 的看見，了解其心中的「大蘋果」，即可隨心所欲，也不逾矩了，甚至能做出比它優(yōu)秀的介面呢。

via:posdon