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

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

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

動(dòng)畫

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

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

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

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

手勢

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

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

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

界面

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

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

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

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

顏色

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

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

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

字體

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

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

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

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

App icon

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

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

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

結(jié)論

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

在這個(gè)層面上，蘋果并沒有強(qiáng)迫你改變 app，但是我們建議你應(yīng)該總是不斷地嘗試與時(shí)俱進(jìn)，并始終把一點(diǎn)牢記于心：用戶至上。

原文 Re-Designing an App for iOS 7