我們繼續上篇的內容

四、聚焦于內容

在iOS7里，強調的不是眼花繚亂的裝飾效果，而是最重要的內容本身。

下面我們來探討這個主題：

1.刪除不必要的內容

偉大的設計更多是減法和加法的組合。

雖然很酷的想法是很重要，但還有更重要的 ———— 殺死那些很酷的想法，以保持應用程序的重點。

1.1.不再強調Chrome

chrome是指您的應用里不是內容本身的一部分，如導航欄和標簽欄。

iOS 7非常不建議使用chrome，有些應用程序甚至會就干脆刪除它。如果想要還原chrome的設計，請考慮以下幾點：

1.1.1.chrome是需要的嗎？

仔細考慮，如果你真的在首頁使用chrome。是把它當做導航？蘋果建議刪除所有chrome符號，從而使用戶單獨瀏覽內容。

左右各一個按鈕的導航模式非常易于理解，而無需使用chrome。

下圖使用chrome作為導航：

1.1.2.使用簡單的背景

相比厚重的紋理，使用簡單、透明的背景更能突出內容，蘋果的毛玻璃效果就是一個非常好的例子。

蘋果試圖在iOS7里面使chrome的顏色和背景相同，用來確保chrome消失。但要記住，這樣做很可能產生相反的效果，因為它會導致chrome在視覺上與內容混合，讓人難以區分。當chrome和內容看起來是一樣的，他們就看起來同樣重要。消滅隱藏的chrome，也就是說，chrome和背景的對比并不總是一件壞事。

請注意狀態欄是與導航欄融合的，這里以一種優雅的方式融合了兩者：

1.1.3.如果可能，隱藏chrome

思考一下，當chrome不在使用狀態時，你可以隱藏它們。Safari就是一個很好的例子，它希望用戶可以強烈的專注于內容，而不是為導航UI而分心。

iOS7的Safari在你下拉頁面時隱藏了chrome（左），當你回到頁面頂部時才再次顯示chrome（右）：

1.2.簡化UI元素

在iOS 7里，你應該質疑每一個背景，紋理，陰影和邊框。這樣做是為了消除任何不必要的裝飾，使用戶可以專注于真正重要的元素。雖然裝飾可能是有用的，但節制使用它會使你的應用在iOS7里更有家的感覺。

手機的界面往往是如此之小，任何額外的視覺重量，如漸變、邊框或逼真的細節都會吸引用戶太多的注意。因此，只有你非常確定時，再使用這些元素。

1.3.無邊框的按鈕

我最初得知蘋果要使用無邊框的按鈕時，第一個反應是：不！然而，事實證明，無邊框按鈕在某些地方表現得的確漂亮，比如導航欄。

在簡化的導航欄背景里，邊框只是擾亂視覺的元素，非常不必要。

許多按鈕和導航依然需要邊框，用來區分可交互元素和不可交互元素，如下圖：

蘋果的按鈕一般使用透明背景表示未選中狀態，簡單的顏色背景表示選定狀態。

你可以嘗試改變一些東西，比如邊框粗細、背景顏色、透明度、圓角半徑，或者為您的按鈕創造一個微妙的陰影和紋理。

1.4.用顏色來表示交互

蘋果用在一些場合用顏色的差異來表示交互，而無需使用按鈕周圍的邊框。當然，如果你的應用中交互元素是非常明確的，則不需要使用顏色來區分。

在下圖中，紅色的Edit和 + 按鈕表示可以交互：

1.5.最小化仿真細節和skeuomorphism（仿實物紋理）

Skeuomorphism是設計師工具箱中的許多工具之一，它不會消失。你只需要探索在這種簡約的環境里如何正確使用它。

2.內容為王

現在你已經不再強調UI，那你怎么強調內容呢？

2.1.使用整個屏幕

避免只有一幀的不必要UI元素，你應該讓你的內容始終處于舞臺中心。

2.2.內容決定屏幕

下面的天氣應用結合毛玻璃效果，創造了十分有感覺的效果，特別是根據內容來決定不同的屏幕：

2.3.增加視覺樂趣

iTunes Radio避開華而不實的UI元素，為內容本身增加點綴：

五、聚焦于交互

應用的設計即將經歷一個方向上根本性轉變。此前，基于絢麗視覺效果的應用可能會脫穎而出，但在iOS 7里，照片般逼真的按鈕將會從屏幕消失。

那么，如何在iOS7里脫穎而出？如何創建一個令人愉快應用？總之，應用設計的新模式將更少談論外觀，而更多的談論使用感受。我認為不再高度強調視覺效果的iOS7將引起交互設計領域的文藝復興。

簡單的視覺效果更容易迅速創建新穎動畫、過渡和互動模式實驗，簡單的縮放和變形比處理紋理和斜面容易至少一千倍。

下圖中，左邊（iOS7）版本相比右邊（iOS7）使用了更簡單的視覺效果：

1. 魔法般的Touch

Touch是神奇的：它讓你以為你操作的是物理對象，而不是移動屏幕周圍的像素。蘋果知道這個事實很好，這就是為什么第一個iphone采用1:1的滾動比例并運用了彈跳效果。

計算機是冰冷的，但如果把計算機當做一個進入物理世界的窗口，用戶可創建友好的、熟悉的和身臨其境的體驗。然而，任何滯后或者頓卡都會立刻打破幻想，結束魔術表演。

iOS7沒有丟棄仿真的細節？沒有，當然沒有。在iOS7里，視覺上的仿真被淡化，而用戶交互和動態物理效果上的仿真被加強。實際上，iOS7內置了一個物理引擎來實現一個目的：創建一個感覺起來更真實的界面。

偉大的設計誕生時將更少使用photoshop，更多使用Xcode和Quartz Composer。這些工具可以讓你去探索應用給人的感受，而不僅僅是外觀。

2.直接操作

直接操縱屏幕上的對象，而不是點擊在一旁的按鈕，滾動手勢、拖動和捏住對象縮放都是直接操作的例子。

iOS7的照片沒有箭頭按鈕用來切換照片，自然的掃動手勢完成了這一任務：

現實感的界面需要用戶操控對象，所以你需要把你的抽象功能整合到物理對象。例如，我的團隊不得不思考，如何在一個時間管理應用里表示時間？最后，我們把時間作為一個時間軸上的物理塊，這增強了它的可視化效果和操作靈活度：

3.物理仿真和動畫

真遺憾蘋果的頁面只是簡單的1：1滾動，而不是我們熱愛的落差慣性和反彈力效果。直接同時操作與物理和動畫，我們的目標是使交互感受真實。

iOS 7的鎖屏將彈起不同的高度：

在未來，那些忽視物理仿真的應用會很快讓人感到陳舊和停滯。UI設計師才剛剛開始探索如何在用戶交互上使用物理仿真，我們這里有一些想法供你參考：

3.1.動態

• 不要聯想數碼動畫，而是思考物理原理。當你在一個物理表面推動一個球，它不會勻速到達終點。相反地，當你推動時它開始加速，而摩擦力讓它減速直至停止。當一個對象從10英尺落下時，反彈力比從2英尺落下更高，你的界面應該具備相同的行為方式。幸運的是，蘋果的新UIKit Dynamics API讓你實現這些動態效果更為容易。

3.2.連續性

• 不要想著把每個屏幕當做一塊完全的石板，而是思考一個Item如何從一個屏幕到達另一個屏幕，利用逼真的動畫來實現這些動作，例如移動、縮放和變形等等。

3.3.反彈力

• 它不只是滾動。這取決于你賦予對象多大的彈性，反彈力可以添加一個有趣的觸摸。

4. 三維

諷刺的是，人們在呼喚“扁平化”的操作系統應該回到過去時，卻忽視iOS7包含了最立體的一切，例如斜面立體效果就讓人眼前一亮。iOS 7的三個主要指導原則之一是深度，深度可以采取一些形式：

4.1.3D效果

蘋果希望你利用三維效果為你的應用增添有趣的視覺體驗，比如用視差效果讓頁面區隔更加明確。

4.2.層次

傾斜你的iPhone ，你會看到桌面圖標實際上并沒有坐在背景上 — 視差效果表明他們正漂浮著，而彈出的控制中心和磨砂玻璃效果使得控制中心位于所有圖標之上。思考一下你的界面層次，并使用3D效果來明確用戶想使用的層次。

毛玻璃提供了一個微妙的層次感效果：

4.3.縮放用戶界面

我認為一些最酷的用戶界面創新將來自這個縮放概念，并把它帶到夢想不到的境界。

縮放界面存在于iOS7里：

5. 手勢和導航

一旦用戶學會適當的手勢，可以在交互時更加有趣和便捷。

下圖為掃動完成：

然而，一些功能可能無法很好地用手勢來完成，不自然的手勢很難記住并且沒有使用樂趣。另外，如果不是每天使用的話，用戶可能會忘記不熟悉的手勢。實驗各種手勢讓用戶的手指變得敏感，但請不要隨意設計過于自由的手勢控制界面。

iOS7引入了一個新的模式：回掃（swipe to go back）。你可以點擊后退按鈕，但回掃明顯輕松了許多，尤其是在iPhone 5甚至以后更大的屏幕上。

下圖為回掃：

雖然手勢的設計是為了讓用戶使用更加方便，但鍵盤操作也應該保留，用戶有權利選擇多種操作方式。

6. 個性

開發者請站出來，您的iOS7應用必須有一個獨特的和令人愉快的個性。美觀當然很重要，但應用的個性同樣至關重要！

為了增強應用的個性，可以思考以下幾點：

6.1.音頻

• 音頻是一個巨大的的待開發領地，里面有一些先驅者如Tapbots，誰的應用里包括細微的點擊和蜂鳴聲？

6.2.語言

• 誰會想每天面對枯燥的文本？詼諧或幽默的語言是散發出個性的最佳途徑之一。

6.3.圖標

• 用戶對您應用的印象往往來源于圖標。由于它生活在用戶的主屏幕上，價值如此巨大的圖標應得到精心設計，圖標應該體現出應用的個性。

個性真的可以包含在所有的設計細節里，讓您的應用變得偉大。從完善每一個像素、優化每一次互動、融合每一次體貼設計，再到賞心悅目的動畫、詼諧的信息，這些都能讓您的應用變得更加完美。

六、在App世界留下你的印記

“不要說謊， iOS7已經讓我很興奮的工作了，里面有非常酷的東西（至少我這么認為） 。” 　　  ---- Mark Jardine，Tweetbot的設計師

在這幾年的應用設計里，iOS7的風格可能最激動人心。Marco Arment指出，App Store將再一次成為開發者的沃土。這種激進的設計轉變意味著，未來幾年將在各類排名前列的應用中看到新設計理念，這些應用將深度尊重蘋果的新設計原則，創造出用戶前所未見的獨特UI界面。

而好消息在于，你可以創建這些應用程序！雖然這并不容易，是的，競爭會很激烈。但是，現在學會蘋果新設計理念的你，比以往擁有更多的機會創造一個偉大的應用。來吧，在App世界里留下你的印記！

/* 

譯者的廢話：

完成下面這個挑戰后，這一章的學習算是完成了，相信您和我一樣對iOS7有了一個全新的認識。

在iOS7正式推出的半年內，我就收集到了三十幾本iOS7的相關書籍（更別說那些更多我手上沒有的），可見老外的手腳之快和對新技術的熱愛程度。Raywenderlich上有許多許多經典的文章，《iOS7 by Tutorials》這本書就是Raywenderlich團隊的精華合集，強烈推薦購買！而我會抽時間繼續該系列的翻譯。

如果您對我的譯文感興趣，想繼續瀏覽后續的其他iOS譯文，可以關注我的新浪微博：@葛布林大帝

共同學習，共同提高

----（博客園）葛布林大帝

*/

七、最后的挑戰

挑戰：重新設計這個程序！

下圖iOS 6上的一個應用，它的形狀非常差，需要你的幫助。你的挑戰是運用你已經了解的設計知識（如對比、重復、對齊、接近、排版和蘋果的新設計理念）來拯救這個應用，使它重新適配iOS7。

你有很多方式來開始，你可以使用Xcode、Photoshop，或者干脆用一張紙和一些彩色鉛筆。在你開始你的新設計之前，嘗試找出原設計的所有問題，這里有一些提示：

•你是否注意到有對齊的任何問題？

•是否相關的概念組合在一起？

•是否方便操作？

•如果刪掉一些裝飾，這個應用看起來會像什么？

下面我提供了一個解決方案，但要注意的設計的本質是完全主觀的，有多種設計方案。

示例：