為 iOS 7 重新設(shè)計 App

在 WWDC 上看到 iOS 7 系統(tǒng)的發(fā)布后，我們重新審視了自己的應用 Grocery List，并且意識到：iOS 7 對于開發(fā)者來說是一個全新的開始，就像七年前 iPhone 首次發(fā)布一樣?，F(xiàn)在僅僅簡單地改變設(shè)計是不夠的，我們不得不重新思考并重構(gòu)整個 app，從而讓它適合 iOS 7 全新的環(huán)境。我們也的確是這么做的。

根據(jù)用戶的反饋和我們自己的使用情況，我們意識到，雖然不能改變 app 基本的操作，但是應該對軟件的操作流程進行一些優(yōu)化。比如在舊版本中，添加產(chǎn)品的數(shù)量和單位是一個多步驟的操作過程，需要在多個 controller 之間進行導航。在 Grocery List 2 中，用戶不用離開當前屏幕就能在恰當?shù)奈恢迷O(shè)置數(shù)值。

在實現(xiàn)這個目標的過程中，遇到了一些我們覺得值得分享的問題。我們將會從動畫和手勢開始講起，然后是界面、色彩以及字體等問題。接下來，為了吸引用戶打開 app，我們將不得不思考如何針對 iOS 7 重新設(shè)計 app 的圖標。最后，我們將分享在我們看來，蘋果這次更新的意義何在。

動畫

現(xiàn)在隨著更新?lián)Q代，移動設(shè)備的性能正變得越來越強大。與此同時，由于可以實時計算物品的物理屬性，動畫效果也變得愈加真實。在 iOS 7 中，我們不需要在界面中使用陰影和漸變這些效果了，而是應該更關(guān)注用戶的感覺、手勢以及交互的影響。憑借 iOS 7，你可以創(chuàng)建一個新世界而不是模仿舊有的世界。

新 SDK 可以讓你簡單地創(chuàng)建并使用自定義的動畫效果。在 iOS 7 之前，開發(fā)者需要做大量額外的工作才能改變 view controller 之間的轉(zhuǎn)場效果。iOS 7 可以讓你簡單地添加自己的動畫，以幫助用戶在不同屏幕之間切換的同時還不會丟失關(guān)注焦點。

在 Grocery List 中，我們在顯示一個 modal view controller 時使用了輕度定制的轉(zhuǎn)場動畫。但是大部分的動畫和轉(zhuǎn)場效果都是使用系統(tǒng)默認的。我們本可以使用新的 API 來給 Grocery List 2 添加更多自定義的動畫，但其實蘋果提供的默認轉(zhuǎn)場動畫對于大多數(shù)情況來說已經(jīng)是個不錯的解決方案了，這也是為什么我們 app 中的不同 view controller 之間的轉(zhuǎn)場效果和蘋果官方的 app 是一樣的。正如前邊提到的那樣，我們 app 的部分操作流程已經(jīng)明顯地發(fā)生了改變。所以，我們將會使用自定義動畫從而更好地保持用戶的關(guān)注焦點。

大多數(shù)用戶對于 iOS 7 上默認的動畫的感覺，是既新鮮又自然，你不需要做很多工作就可以使用這些動畫來取悅用戶。但是在合適的地方添加一些自定義動畫將會提高整個 app 的用戶體驗。只是請小心不要使用過度。

手勢

在擁有了數(shù)年的觸屏設(shè)備的經(jīng)驗后，蘋果發(fā)現(xiàn)大量使用手勢對于用戶來說正變得愈加自然。所以在 iOS 7 中，對手勢的廣泛使用比以前有了更多的可能性。比如在 table view cell 上滑動來顯示隱藏的菜單，或者從左向右滑動來返回先前的 view controller，這些手勢操作我們已經(jīng)非常熟悉了，以至于如果一款應用不支持這些手勢的話，我們馬上就會非常想念它們。在合適的地方，這些直接的手勢操作可以幫助用戶更高效地完成任務而不會失去關(guān)注焦點。

在 Grocery List 中，我們并沒有使用任何自定義手勢，但是為了在下個版本中改進用戶的操作流程，我們支持在 cell 上進行左右兩個方向的滑動來分別展示產(chǎn)品的不同選項。你可以簡單地從屏幕的右邊緣向左滑動來快速訪問菜單以進行列表或者模版的相關(guān)設(shè)置，而不用在導航欄一層層地返回。

按鈕和鏈接對于用戶來說是可見的，也是可識別的，但手勢不是。如果你打算用手勢來實現(xiàn)某個功能，很好！但是如果 app 中那些依賴手勢的功能沒有一個等效的可見的控件，那要為用戶提供一個好的方法來發(fā)現(xiàn)這些手勢。一個好的用戶界面通常應當是不言自明的。如果你需要一個類似使用說明一樣的界面或者視頻來描述 app 中的基本功能，那這里面很可能就有問題了。

界面

在正式發(fā)布前，大家對于 iOS 7 最大的爭論莫過于扁平化和擬物化（skeuomorphic）這兩種設(shè)計風格間的區(qū)別。iOS 7 完全摒棄了設(shè)計上對真實世界的依賴，但最大程度地保留了為大眾所熟知的交互模式。新的纖細的工具欄圖標可以幫助內(nèi)容脫穎而出，但是別忘了，這樣做的后果是這些圖標本身變地不容易識別而且語義不明。尤其是當圖標的下方?jīng)]有說明其行為的文字標簽時，情況更是如此。

我們發(fā)現(xiàn)爭論的重點并不完全在于是設(shè)計上是應該再造還是移除所有實物的外觀，而是說哪種設(shè)計可以更好地突顯內(nèi)容。如果在導航欄中增加細微的陰影可以突出內(nèi)容的話，那也沒必要一定不使用陰影。最重要的事情還是在需要的時候增加對比度，并且以一種方便用戶使用的方式來展示你的內(nèi)容。

Grocery List 在設(shè)計上非常依賴于真實世界的物品。比如以黑板為背景，類似紙張上的單元格，所有框架都是有光澤的木質(zhì)效果。這種設(shè)計看起來很好看，但是在這個狹小的空間內(nèi)如何放置用戶交互的控件也會是個不小的挑戰(zhàn)，增加新功能時也同樣要考慮這個問題。在 iOS 7 這種更輕量的設(shè)計中，我們不必像之前那樣關(guān)注如何更逼真地擬物化，而是可以把關(guān)注點放在如何提升交互，以便用戶達成自己的目標。Grocery List 2 一定會使用這個新的設(shè)計語言，同時也會保持自己的風格。

在 iOS 7 的設(shè)備上使用幾周后，明顯感覺到現(xiàn)在的交互變得比之前版本更方便。新的動畫、手勢以及減少對擬物化元素的使用讓用戶更好地關(guān)注內(nèi)容。

顏色

iOS 6 和 iOS 7 的主要區(qū)別之一是色彩整體給人的感覺。外觀的顏色從暗色轉(zhuǎn)變?yōu)楦r亮的色彩。iOS 7 使用了更為生機勃勃和高飽和度的顏色，以支持頻繁使用的半透明設(shè)計和背景模糊設(shè)計。

考慮到 Grocery List 對擬物化設(shè)計的依賴，所以不可能過分調(diào)整用色。顏色是由我們想要模仿的材質(zhì)所決定的。盡管我們喜歡 iOS 7 中更加友好的外觀，像大多數(shù)內(nèi)置的 app 一樣大體上是白色，但是 Grocery List 2 這個 app 的外觀將主要由符合「采購（Grocery）」這一主題的配色方案來決定。我們不希望我們的 app 看起來就僅僅是另外一個 iOS 7 風格的 app，而是希望創(chuàng)造獨一無二的外觀。

色彩可以影響用戶對 app 的感覺。不要讓你的 app 像內(nèi)置的應用一樣滿是白色。相反要創(chuàng)造你自己獨一無二的個性顏色。得益于 iOS 7 全新的設(shè)計風格剛和對擬物化使用的節(jié)制，你可以用各種出挑的色彩來表達你的 app 希望傳遞給用戶的訊息。

字體

從 iOS 7 中對文本系統(tǒng)框架的重構(gòu)這一點上就可以看出來，蘋果認識到了字體的重要性。Lable 和 text field 現(xiàn)在直接使用 core text 提供的所有排版相關(guān)的功能，這里面就包括字體。連字（Ligature），文字裝飾符（swoosh）等功能在新的框架下都可以簡單地來實現(xiàn)。通過獲取 text style 中的字體對象，你的 app 可以根據(jù)用戶選擇的字體大小來展示內(nèi)容。想了解更詳細的內(nèi)容，可以看看這篇非常棒的關(guān)于 iOS 7 中的字體的文章。

由于「實際」按鈕的缺失以及文本周圍描邊的減少，文字本身獲得了更多關(guān)注。由于在之前 iOS 7 的 beta 版本中大量使用 Helvetica Neue 的纖細體而受到排版專家的批評，蘋果最終又換回了可讀性更強的標準體。

在 Grocery List 中，我們使用 slab-serif 字體以配合擬物化風格。當 app 運行在 iOS 7 的設(shè)備上時，我們發(fā)現(xiàn)這個字體不是一個最佳選擇。所以我們決定使用定制的 sans-serif 字體，這款字體可以更好地契合 app 整體的外觀。

內(nèi)容是 app 的基礎(chǔ)，提升文字的可讀性非常重要，而可讀性的關(guān)鍵在于字體。雖然蘋果默認的 Helvetica Neue 字體適合大部分情景，但自定義字體也是值得考慮的——尤其是當你的 app 需要呈現(xiàn)大量文本的時候。

App icon

蘋果并不僅僅改變了 icon 的大小和輪廓，還改變了視覺氛圍。App icon 不再使用光澤效果，并且大多數(shù)內(nèi)置程序的 icon 是和網(wǎng)格對齊的。另外，icon 變得更簡單了，移除了仿現(xiàn)實主義的效果，并且大多數(shù)只是在多彩的背景上展示簡單的概念圖標。這是從照相寫實主義（photorealistic）風格的插圖到闡述 icon 的本義——圖示（Iconographic）的一次轉(zhuǎn)變。

從一個有著黑板背景和木質(zhì)紋理的擬物化的 app icon，轉(zhuǎn)變?yōu)橐粋€更加簡潔的多彩的有著清晰符號的 icon，Grocery List 并不是真的完全適合新的主屏幕。下個版本中，我們把 icon 簡化為一個購物籃符號，并選擇一個背景色，這個背景色同樣可以用作 app 的主色。這樣的多種方法組合使用可以讓 icon 更時尚和流行。

在 iOS 7 中，icon 會自動會縮放到新的尺寸，導致圖像變模糊。由于 iOS 7 中使用了弧度超級大的圓角來遮蓋你的 icon，陰影和高光效果看起來會非常奇怪。如果你不打算讓你的 app 適配 iOS 7 的風格，那么至少更新一下你的 icon 的尺寸。

結(jié)論

雖然 iOS 7 給人整體的感覺是既新鮮又精致，但是很多概念都是保留下來的，比如從第一個版本就一直存在的導航功能，在列表和表格中查看數(shù)據(jù)，接收推送通知等等，用戶對這類操作已經(jīng)非常熟悉了，所以顏色和字體的更改以及移除擬物化設(shè)計元素等一系列的改變并沒有打斷用戶所熟知的這一套操作流程。

在這個層面上，蘋果并沒有強迫你改變 app，但是我們建議你應該總是不斷地嘗試與時俱進，并始終把一點牢記于心：用戶至上。