網(wǎng)絡(luò)上每年都會有大量設(shè)計趨勢分析，但是很多時候只是分析了一些表層，并沒有深入。趨勢，幾乎每一年都在變，如何透過現(xiàn)象看本質(zhì)？我覺得方法之一是可以嘗試把時間線拉長，從一個更高的維度來看待趨勢演變，并通過對自身產(chǎn)品的品牌定位來分析是否需要跟隨趨勢去設(shè)計。

蘋果公司的設(shè)計一直是設(shè)計領(lǐng)域的風向標，本文是通過回顧 App Store 里最經(jīng)典的10款應(yīng)用的設(shè)計演變，來橫向看待設(shè)計趨勢變化之路。

一篇簡短的博客帖子在 Apple 官網(wǎng)上發(fā)布后，標志著近段歷史上最重要的設(shè)計機會之一來臨了。史蒂夫喬布斯在這篇博文中寫道，「我想說的是：我們希望在 iPhone 上有原生的第三方應(yīng)用，并計劃在二月份讓開發(fā)人員拿到 SDK」。短短不到一年，在一個安靜的周四上午，App Store 向 iPhone 用戶開放了超過500個應(yīng)用。

幾乎沒有什么現(xiàn)代創(chuàng)新比 iPhone 應(yīng)用更能改變我們的生活和與周圍世界的互動方式。在發(fā)布會上發(fā)布的首批500個應(yīng)用的開發(fā)者們有了一個特殊的機會，可以塑造自那以后創(chuàng)建的數(shù)百萬個應(yīng)用的設(shè)計方向和交互策略。

為了慶祝 App Store 成立10周年，讓我們一起來研究下10個原創(chuàng) App Store 應(yīng)用的視覺演變。

一、應(yīng)用

就本文而言，我所聚焦的點是在于應(yīng)用的顯著視覺變化上，這些應(yīng)用在第一天就可以下載，直到今天仍在保持更新。雖然其中許多應(yīng)用也有 iPad 版本，但本文主要講的是 iPhone 版本上的一些變化。

1. iTunes Remote

Apple 通過在 App Store 上發(fā)布一些自己的軟件，為其他開發(fā)人員樹立了標桿。最初開發(fā)的兩個應(yīng)用是 Texas Hold'em 和 Remote，這是一個簡單的應(yīng)用，用于通過 Wi-Fi 控制 Mac 或 Apple TV 的 iTunes庫的播放。2011年，Texas Hold'em 應(yīng)用下架了，但是 Remote 仍然在保持更新。

從一開始，Remote 的設(shè)計就很受 iPhone 版 iPod 應(yīng)用（現(xiàn)在叫做 Music）的外觀和感覺的影響。事實上，和現(xiàn)在的播放圖標在外觀上本質(zhì)上是相同的。2.0版帶來了由 Louie Mantia 重新設(shè)計的圖標。這兩個應(yīng)用開始在 iOS 6 上出現(xiàn)了分歧，當時音樂應(yīng)用完全重新設(shè)計并設(shè)置了一個音量滑塊，可以動態(tài)響應(yīng)你在 iPhone 上的移動操作。Remote 保持了更保守的外觀，圖標也再次更新以匹配 Mac 上 iTunes 11 的風格。

Remote 的第一次重大改版是在 iOS 7 上完成的。與音樂應(yīng)用的純白色主題形成對比的是 Remote 的深色模糊背景，并以專輯作品的顏色來配色。2016年，Apple 發(fā)布了針對第4代 Apple TV 的 Apple TV Remote 應(yīng)用，這是一個合乎邏輯的迭代，似乎取代了 Remote。不久之后，Remote 被重命名為 iTunes Remote。雖然這款應(yīng)用仍然能下載，但此后很長時間，它幾乎都沒有更新。直到今年6月，才做了一次全新設(shè)計并對 iPhone X 做了適配。

iTunes Remote 的這次更新重新回歸到更具保守的視覺外觀，讓人聯(lián)想到 iOS 11 音樂應(yīng)用，但放棄了大標題和卡片的設(shè)計，轉(zhuǎn)而支持傳統(tǒng)導(dǎo)航。iTunes Remote 使用藍色來匹配更新的圖標，而不再是原來的深色色系。

2. Facebook

與 iTunes Remote 的溫和變化形成鮮明對比的是，F(xiàn)acebook 應(yīng)用在過去十年中不斷進行重新設(shè)計，而且頻率越來越高。如果想要完全展現(xiàn) Facebook 的視覺更新歷史可能會寫滿一整本書，所以我在這里僅選取了8個最重要的更新。

Facebook 在 iPhone 上的更新實際上在 App Store 存在之前就已經(jīng)開始了。這款應(yīng)用最初是作為 iPhone 2007年10月推出的首批網(wǎng)絡(luò)應(yīng)用之一。除了標志性的藍色導(dǎo)航條外，App Store 中的1.0版本現(xiàn)在幾乎認不出 Facebook 了。即使是圖標也缺少白色標志性簽名「f」。應(yīng)用的消息流本質(zhì)上是一個帶有五個標簽欄并裝飾好的表格視圖：主頁，個人資料，朋友，聊天和收件箱。2.0版本也是基于同樣的理念，只是在主標題欄下新增了兩層導(dǎo)航。

Facebook 在2009年7月的3.0版本中，第一次引入了一個3×3網(wǎng)格圖標來幫助解決應(yīng)用不斷膨脹的導(dǎo)航。早期的截圖顯示了這種圖標，但是這個設(shè)計從來沒有在公開版本中發(fā)布過。

2011年10月，F(xiàn)acebook 4.0率先采用了導(dǎo)航「漢堡菜單」。在接下來的幾年里，這款應(yīng)用的普及加速了各種應(yīng)用和網(wǎng)站在設(shè)計元素上的創(chuàng)新。在第4.0版之后，F(xiàn)acebook 的設(shè)計時間表變得更加具有挑戰(zhàn)性。Facebook 的外觀開始迭代得更快，并且經(jīng)常是逐步推出，而不是一次性在主版本中全面鋪開。

2013年4月，F(xiàn)acebook 在 iOS 應(yīng)用中嘗試了「Chat Heads（譯者注：浮動聊天頭像）」，頭像可以單獨彈出并能移動，在點擊時能直接打開聊天窗口（譯者注：youtube上有一段視頻是介紹這個功能的，感興趣的可以看看https://9to5mac.com/2013/04/16/facebook-for-ios-to-gain-chatheads-ipad-app-redesign-today-brichter-working-on-home/）。iOS 7 的新風格要求重新設(shè)計導(dǎo)航欄。標簽欄圖標在更新之間仍有規(guī)律地重新定位和設(shè)計。

Facebook 的一些設(shè)計挑戰(zhàn)來自其運營規(guī)模。 與許多小應(yīng)用不同，F(xiàn)acebook 必須在大量平臺上為其客戶提供一致的體驗，而不僅僅是在 iOS 上。 2017年8月的更新，是在嘗試統(tǒng)一 iOS，Android 和 Web 上的信息流設(shè)計，其評論風格看起來也更像是 Messenger 對話。

3. Things

Things 一開始是作為一個 mac端的任務(wù)管理工具開發(fā)的，但是最后的1.0版本卻是在 iOS 上發(fā)布的。開發(fā)這款應(yīng)用的作者 Culture Code 在發(fā)布會上指出，最初的版本在一個月時間內(nèi)完成——是在一個聽起來似乎不可能完成的時間內(nèi)完成的。

1.0版本與 Mac 版本兩個關(guān)鍵問題是沒有辦法同步并且不能使用標簽。盡管開始有壓力，但這款應(yīng)用的基本架構(gòu)一直延續(xù)到今天。一款優(yōu)秀的 Flickr 相冊記錄了應(yīng)用的早期設(shè)計階段。第一次主要的更新是在2012年8月2.0版本的發(fā)布，有了一個全新的外觀和一些個性的圖標設(shè)計。

2014年9月，Things 2.5 版本再次更新了 UI，使其外觀更加扁平，配色更淺。最初計劃對 Things 3 版本進行重新設(shè)計，但開發(fā)花費的時間比預(yù)期的要長。2017年5月發(fā)布的 Things 3 是這款應(yīng)用迄今為止最重大的一次改版。幾乎每個圖標和 UI 元素都被重新設(shè)計，僅保留了底層布局。在更新的發(fā)布視頻中，Cultured Code 特別強調(diào)了如何使用動畫為應(yīng)用提供全新的感覺。在2017年，重新設(shè)計的 Things 獲得了蘋果設(shè)計大獎。

4. OmniFocus

即使在它的初期，App Store 也已經(jīng)有非常多的任務(wù)管理應(yīng)用。 來自 The Omni Group 公司的 Things 和 OmniFocus 兩款應(yīng)用從 App Store 上線第一天就有了。 雖然這兩款應(yīng)用提供類似的功能，但在過去的十年中，它們都有各自獨特的設(shè)計方向。

OmniFocus 的 iPhone 版最初采用簡單的表格視圖和自定義圖標導(dǎo)航，獲得了2008年的蘋果設(shè)計大獎。2010年6月，為了支持 iPhone4 的視網(wǎng)膜屏幕，Omni 集團重新設(shè)計了界面和應(yīng)用圖標。這款應(yīng)用最大的變化之一是在2011年6月增加了預(yù)測模式。導(dǎo)航條下方光滑的日期選擇器成為了一個定義用戶界面的元素，直到2013年為了 iOS7 而重新設(shè)計并放棄了光澤質(zhì)感。新的扁平界面很大程度上依賴于文本顏色來感知層級關(guān)系。

2015年春季的更新給 Thines 的 iPhone 版本換上了一個深色的應(yīng)用圖標，圖標中的圖形拐角也變得更加柔和。自2012年以來，每個圖標都包含一個彩蛋，即使是老用戶也可能不知道。把圖標放大，才會注意到原來圖標中的紋理實際上是由微小重復(fù)的 Omni 標志組成的。

最近一次重大更新是在5月份發(fā)布的 OmniFocus 3.0。雖然許多更改都與功能邏輯相關(guān)，但大標題和對 iPhone X 的優(yōu)化仍然使得 UI 煥然一新。

5. Evernote

Evernote 的風格迭代完美地展現(xiàn)了2008年以來的許多主要軟件的設(shè)計趨勢。在 App Store 推出之前，這款筆記記錄和組織工具最初是作為桌面應(yīng)用開發(fā)的，在 iPhone 上發(fā)布之前，它已經(jīng)用上了其標志性的大象 logo。

與許多早期的 iPhone 應(yīng)用一樣，Evernote 1.0 非常依賴于 iPhone 的 UIKit 和寫實的圖標。2011年的版本重新設(shè)計了標簽欄，并將按時間順序?qū)Α杆泄P記」視圖進行了優(yōu)化。當 Evernote 在2012年增加對 iPhone 5 更大屏幕的支持時，應(yīng)用仍然使用默認的 iOS UI 元素。導(dǎo)航條和按鈕自動讀取 iOS 6的 UI 組件。

2012年11月，Evernote 5發(fā)布。這款應(yīng)用從頭開始重新設(shè)計，是那個時代典型的紋理豐富、主題鮮明的設(shè)計范例。浮雕圖標，紙張紋理和陰影賦予了應(yīng)用的空間感。應(yīng)用的圖標去掉了過時的光澤質(zhì)感，但保留了金屬光澤。

在一篇博文中，Evernote 說：「我們通常不會進行全盤的重新設(shè)計。事實上，至少每隔幾年才會發(fā)生一次。」雖然他們當時并不知道，僅在一年后的2013年 WWDC 上發(fā)布了 iOS7 時，Evernote 就在重新設(shè)計了。之后的 Evernote 5 也獲得了蘋果設(shè)計大獎。

Evernote 完全擁抱 iOS 7 的設(shè)計趨勢。每個紋理、陰影和斜角都被替換。一個亮色的從左到右的漸變條在應(yīng)用在導(dǎo)航條上，與新的文本圖標上使用的顏色相匹配。2017年早些時候的一次更新使設(shè)計更加柔和，有了一個更柔和的圖標、淺色導(dǎo)航條、帶有微妙陰影的便簽卡和一個黑色的標簽條。字體和標簽欄圖標也同步進行了更新。

6. eBay

eBay 的設(shè)計可以說是這篇文章10個應(yīng)用中最引人注目的一個。 盡管蘋果公司在 WWDC 2008大會上強調(diào)了它，但與今天的精致體驗相比，原始版本的 eBay for iPhone 是做的非常粗糙的。 到2009年11月，整個應(yīng)用已經(jīng)重新考慮了更加一致的灰色用戶界面。

一年后的 eBay 2.0 為未來幾年如何設(shè)計這款應(yīng)用奠定了基礎(chǔ)。盡管 eBay 此前曾推出過一款獨立的銷售應(yīng)用，但現(xiàn)在這一功能已經(jīng)融入了主流體驗。這款應(yīng)用的主界面也得到了更新，最終讓人覺得它是一個真正的 iOS 設(shè)計。

在2013年的幾次更新中，eBay 在保持基本用戶體驗的同時，也創(chuàng)造了新的用戶體驗。每一個變化都反映了這個時代快速發(fā)展的軟件設(shè)計品味。這一持續(xù)不斷的迭代意味著，在為 iOS 7 重新設(shè)計該應(yīng)用時，eBay 的面貌發(fā)生了相當平穩(wěn)的轉(zhuǎn)變。使用熟悉的配色和導(dǎo)航層次結(jié)構(gòu)有助于保存用戶的記憶。

2015年9月，eBay 4.0 打破了固有設(shè)計模式。應(yīng)用的大部分功能都放在漢堡菜單里，在最上面只剩下三個標簽：「活動、購物、銷售」，但這個設(shè)計沒有持續(xù)太長時間。到2016年5月，eBay 幾乎完全恢復(fù)了應(yīng)用的組織結(jié)構(gòu)，如今的布局與2010年推出的設(shè)計更接近了。

7. Twitterrific

在 App Store 發(fā)布之前，Craig Hockenberry 和 The Iconfactory 就已經(jīng)為 iPhone 構(gòu)建了第一個 Twitter 客戶端。 得益于蘋果發(fā)燒友社區(qū)開發(fā)的越獄軟件，開發(fā)者們在蘋果提供官方工具的時候就已經(jīng)有了幾個月的應(yīng)用編寫經(jīng)驗。

Twitterrific 1.0 從越獄版本借鑒了不少設(shè)計元素，從普通用戶看來，它非常光彩照人。它在2008年獲得了蘋果設(shè)計獎，Twitterrific 也是首批使用深色主題的應(yīng)用之一，這種風格在今天看來也很受歡迎。但 Twitterrific 的設(shè)計迭代更多地反映了 Twitter 作為一種服務(wù)的歷史，而并非設(shè)計趨勢，每次更新都反映了 Twitter 平臺的特性和功能的變化。在早期，這些特征通常是需要第三方自己去創(chuàng)新的。

2012年，Twitterrific 5.0 將所有導(dǎo)航都移動到界面頂部，并使用完全定制的 UI元素，類似的布局一直延續(xù)到今天。就像這款應(yīng)用的設(shè)計一樣吸引人的是它的圖標。除了是第一個使用鳥類圖標的 Twitter 應(yīng)用之外，Twitterrific 也是為數(shù)不多的幾個 iOS 應(yīng)用之一，這些應(yīng)用在保留了豐富細節(jié)圖標的同時看起來也更現(xiàn)代。這款應(yīng)用的吉祥物奧利（Ollie）在升級到 iOS 7 的過程中幾乎沒怎么變過，現(xiàn)在看起來還是和2012年一樣新鮮。

8. Instapaper

一款專為閱讀而設(shè)計的應(yīng)用將內(nèi)容置于 chrome 之上，因此 Instapaper 的設(shè)計從一開始就很自然地受到限制。事實上，一些最明顯的視覺變化來自 iOS 本身的改變。iOS 6 和7都改變了導(dǎo)航條和按鈕樣式，給了應(yīng)用兩個「免費」的視覺更新。

當然，要說這款應(yīng)用沒有進化，也是不大準確的。Instapaper 最初是在應(yīng)用商店作為免費下載開始的。不久之后，一個名為 Instapaper Pro 的付費版本發(fā)布了。2011年秋季推出了由 Dribbble 聯(lián)合創(chuàng)始人 Dan Cedarholm 設(shè)計的一個新圖標，大大改善了閱讀體驗和更深層次的 UI元素。這個圖標后來出現(xiàn)在 WWDC 的一個關(guān)于偉大圖片的 PPT 上。

2013年4月，Betaworks 從創(chuàng)始人 Marco Arment 手中收購 Instapaper，讓這款應(yīng)用走上了一條不同的道路。 Betaworks 指導(dǎo)下的第一次重大更新于2013年9月發(fā)布，恰逢 iOS 7 更新。 Pinterest 于2016年8月收購了 Instapaper，當時該公司承諾這款應(yīng)用將繼續(xù)更新。 在目前的所有權(quán)下，即使在支持 iPhone X 的超級視網(wǎng)膜屏的更新后，Instapaper 也保持了相當一致的視覺效果。

9. PCalc

PCalc 的故事開始于應(yīng)用商店推出前的十多年。開發(fā)者 James Thomson 在1992年發(fā)布了 Mac 的初始版本，它的發(fā)展一直延續(xù)到今天。PCalc 從一開始就在 iOS 上推出了一個完全定制的界面，提供了越來越多的主題選擇和定制選項。這里有太多能強調(diào)的地方，所以我打算只選擇幾個里程碑來說明。

iPhone 的第一個 PCalc 版本是從 Mac dashboard 的一個小部件移植過來的，但是與經(jīng)典的 iPhone UI 能很好地結(jié)合在了一起。帶高光的按鈕和深藍色的 LCD 面板與應(yīng)用的圖標相匹配。2008年12月，一個名為 Twilight 的熱門主題被添加進了 PCalc 中，有點類似于 iOS 默認的計算器應(yīng)用。直到現(xiàn)在，它仍然是應(yīng)用程序中的一個選項。

PCalc 采用了名為「Samurai」的新默認主題和匹配圖標，適應(yīng)了 iOS 7 的扁平風格。 應(yīng)用程序設(shè)置中仍然提供一些比較經(jīng)典的主題。 PCalc 的圖標在2016年3月再次更新。自 iOS 10.3 發(fā)布以來，Apple 已允許第三方應(yīng)用程序動態(tài)更改其應(yīng)用程序圖標，而無需向商店提交新版本。 PCalc 于2017年5月開始充分利用該功能，推出了各種各樣的備用圖標供您選擇， 在后續(xù)更新中也添加了更多內(nèi)容。

經(jīng)過10年的發(fā)展，PCalc 已經(jīng)突破了 iPhone 計算器應(yīng)用的實際限制，最近的更新已經(jīng)享受到了一些具有創(chuàng)新性的自由，比如 AR 計算器模式。支持 iPhone X 的展示給 Samurai 主題增添了圓角。

10. Yelp

和 Facebook 一樣，Yelp 的 iPhone 版本界面多年來也發(fā)生了很大的變化，但由于使用了一致的導(dǎo)航欄顏色，它的品牌標識仍然可以辨認。由于與蘋果地圖的深度融合，這款應(yīng)用越來越受歡迎。

2009年8月，Yelp 將一個基本的增強現(xiàn)實界面應(yīng)用在 iPhone 版本中，用于定位周圍的企業(yè)。 雖然它當時只是一個新奇的東西，但鑒于 ARKit 應(yīng)用程序的興起，這一功能在今天看來是具有先見之明的。

2010年1月，在新的 Yelp 主頁上推出了9宮格形式的快捷圖標。同樣的基本界面在風格上得到了完善，直到整個應(yīng)用在2013年10月進行了重新設(shè)計，使得外觀更扁平，也更突出「附近」標簽。

Yelp 的最新更新通過顯示與你相關(guān)的內(nèi)容，豐富了簡單基于位置的結(jié)果。 這種通過綜合處理信息發(fā)現(xiàn)的方法是用戶體驗設(shè)計的趨勢，在 iOS 11 重新設(shè)計的 App Store 中取得了巨大成功。

二、圖標

對比所有10個重點提到的應(yīng)用圖標迭代，揭示了各自選擇的獨特的現(xiàn)代化路徑。在過去的十年里，一些圖標保持了相當?shù)囊恢滦裕挥形⑿〉母淖儯硪恍﹦t每隔幾年重新設(shè)計一次。從時間線上來看，全行業(yè)都在緊跟設(shè)計趨勢變得愈發(fā)明顯。

在 App Store 剛推出時，有光澤質(zhì)感的圖標統(tǒng)治著這片土地。圖標在默認情況下就應(yīng)用了光澤，開發(fā)人員必須在 Xcode 中專門禁用該效果才能將其刪除。 隨著 iOS 應(yīng)用的成熟，大多數(shù)應(yīng)用最終去掉了光澤并采用了非常明確的個性化設(shè)計。

眾所周知，iOS 7 重新定義了一個好圖標的標準。與蘋果的新圖標集一起，高質(zhì)感和 3D渲染的作品通常看起來不太合適，有些與更新后的圓角半徑發(fā)生了沖突。隨著設(shè)計師和開發(fā)人員逐漸為圖標設(shè)計制定新的規(guī)范，細節(jié)和更加克制的顏色慢慢地回到了許多圖標中。

三、個性

早期的 iPhone 應(yīng)用一頭扎進一個未知的世界。 除了蘋果公司自己的內(nèi)置應(yīng)用外，應(yīng)用的外觀和工作方式?jīng)]有既定的規(guī)范，設(shè)計師和開發(fā)人員可以完全自由地進行實驗。

盡管如此，當用戶和開發(fā)人員手把手地學(xué)習最佳實踐時，許多早期的應(yīng)用看上去和感覺上都非常相似。早期的反饋、嘗試和錯誤迅速塑造了每個應(yīng)用的發(fā)展過程。幾年之內(nèi)，大多數(shù)應(yīng)用程序都找到了自己的定位，并發(fā)展出了獨特的風格和個性。隨著硬件性能的提高，設(shè)計差異化逐漸從靜態(tài)圖形轉(zhuǎn)向動態(tài)圖形和動態(tài)界面。

在 iOS 7 引入的同質(zhì)化界面指導(dǎo)原則讓設(shè)計師和開發(fā)人員從頭開始設(shè)計，許多應(yīng)用開始重視用戶體驗，而不僅是視覺。周到的信息綜合處理和預(yù)測性信息設(shè)計通常被用來幫助展示新的和有趣的內(nèi)容，否則這些內(nèi)容可能會被忽視。智能工作流簡化了常見的操作，幫助減少完成任務(wù)的時間。優(yōu)秀設(shè)計的重要性超越了視覺層面，這導(dǎo)致了近年來用戶體驗設(shè)計的盛行。

四、下一個10年

在2008年，那時還無法準確預(yù)測 App Store 的發(fā)展方式。改革源于創(chuàng)新，iPhone 用戶的品味和習慣塑造了開發(fā)者選擇開發(fā)的應(yīng)用類型。同樣的道理也適用于未來，即將發(fā)布的 iphone 和 iOS 新版本肯定會以不可預(yù)見的方式改變應(yīng)用的格局。一種新的設(shè)計趨勢明天可能席卷全球。即使是在10年后，未來仍然是令人興奮的。

原文鏈接：《10 years of the App Store: The design evolution of the earliest apps》??Michael Steeber

歡迎關(guān)注譯者的微信公眾號：「?彩云譯設(shè)計」

圖片素材作者：Al Shostko

「2018年的設(shè)計趨勢」

• 《2018年過半，為你總結(jié)了這13個主要的設(shè)計趨勢》
• 《我們觀察到，2018年網(wǎng)頁文本字體的設(shè)計趨勢有這7種》
• 《2018年?Behance 上最值得關(guān)注的20個設(shè)計趨勢》