很少有創(chuàng)新的事物能像手機(jī)應(yīng)用一樣在改變我們的生活方式，讓我們與周圍的世界互動(dòng)。最開(kāi)始的那500個(gè)開(kāi)發(fā)者很幸運(yùn)的有機(jī)會(huì)為未來(lái)數(shù)百萬(wàn)個(gè)應(yīng)用程序提供設(shè)計(jì)方向和交互方式，為了慶祝App Store成立10周年，讓我們來(lái)研究一下10個(gè)原創(chuàng)的App Store應(yīng)用程序的界面設(shè)計(jì)演變。
一、應(yīng)用程序
關(guān)于應(yīng)用程序這部分，我們關(guān)注的10款應(yīng)用到今天為止都還能下載的，有些近幾天都還在更新。雖然很多應(yīng)用提供了iPad版，但是這次我們主要研究iphone版的界面設(shè)計(jì)的變化。
1，iTunes Remote
Apple通過(guò)在App Store上發(fā)布一些自己的軟件，為其他開(kāi)發(fā)人員樹立了榜樣。Apple最初創(chuàng)建的應(yīng)用有兩個(gè)：Texas Hold'em（德州撲克游戲）和Remote，Texas Hold'em在2011年下架了。而Remote今天還在，Remote是一個(gè)簡(jiǎn)單實(shí)用的應(yīng)用，通過(guò)Wi-Fi控制Mac或Apple TV的iTunes庫(kù)的播放。
從一開(kāi)始，Remote的設(shè)計(jì)就受到iPhone iPod應(yīng)用程序（今天稱為音樂(lè)）的界面和感覺(jué)的影響很大。事實(shí)上，正在播放的視圖在界面上基本相同。2.0版帶來(lái)了由Louie Mantia設(shè)計(jì)的新圖標(biāo)。這兩個(gè)應(yīng)用程序從iOS 6開(kāi)始，變得不一樣，圖標(biāo)再次更新以匹配Mac上iTunes 11的設(shè)計(jì)風(fēng)格。
Remote 的一次全新設(shè)計(jì)發(fā)生在iOS 7，與音樂(lè)應(yīng)用程序的鮮明白色主題不同，Remote采用了深色的模糊背景。并與專輯封面的顏色融合。2016年，Apple發(fā)布了針對(duì)第4代Apple TV 的Apple TV Remote應(yīng)用程序，這是改變似乎要取代Remote。但不久之后，Remote被重命名為iTunes Remote，該應(yīng)用程序一直保持原來(lái)的界面繼續(xù)可供下載，直到今年6月，Remote才更新了全新設(shè)計(jì)并支持iPhone X。
2，F(xiàn)acebook
與iTunes Remote的更新相比，F(xiàn)acebook在過(guò)去時(shí)間不斷改進(jìn)設(shè)計(jì)，而且修改的頻率越來(lái)越高，算上小修小補(bǔ)，F(xiàn)acebook都可以出書了。我們選了其中比較重大的8個(gè)變化。
Facebook在2017年10月就開(kāi)始在iPhone上使用了，那時(shí)候是作為網(wǎng)頁(yè)版應(yīng)用。如果不顯示頂部的藍(lán)色導(dǎo)航，App Store中Facebook 1.0版幾乎無(wú)法識(shí)別。而且圖標(biāo)是用人物頭像，而不是標(biāo)志性的“f”。底部導(dǎo)航為：主頁(yè)，個(gè)人資料，朋友，聊天和收件箱。2.0版基于相同的設(shè)計(jì)概念，在主標(biāo)題欄下添加了二級(jí)導(dǎo)航。
Facebook 3.0于2009年7月首次亮相，并推出了3×3網(wǎng)格圖標(biāo)，以幫助解決應(yīng)用程序的氣球?qū)Ш絾?wèn)題。早期的屏幕截圖顯示了一個(gè)完全藍(lán)色的平鋪網(wǎng)格，但這個(gè)設(shè)計(jì)從未在應(yīng)用程序的公共版本中發(fā)布。
2011年10月，F(xiàn)acebook 4.0 采用了漢堡包導(dǎo)航。在第4版之后，F(xiàn)acebook的設(shè)計(jì)更新變得更頻繁了。應(yīng)用程序的界面開(kāi)始更快地迭代，并且設(shè)計(jì)的修改通常是逐步推出而不是推倒重來(lái)。
2013年4月，F(xiàn)acebook在iOS應(yīng)用程序中使用“Chat Heads ”，允許用戶一邊爪機(jī)一邊聊天。
Facebook的設(shè)計(jì)挑戰(zhàn)主要來(lái)自其億級(jí)別的用戶基數(shù)。與許多小型應(yīng)用程序不同，F(xiàn)acebook必須在各平臺(tái)上為大量的用戶提供一致的體驗(yàn)，而不僅僅是蘋果的設(shè)備上。2017年8月的更新嘗試統(tǒng)一 iOS，Android和網(wǎng)絡(luò)上的新聞Feed 設(shè)計(jì)，其評(píng)論樣式看起來(lái)更像是Messenger對(duì)話設(shè)計(jì)。
3，Things
Things原來(lái)上Mac上的任務(wù)管理工具，所以有機(jī)會(huì)率先在iOS上出現(xiàn)。開(kāi)發(fā)人員Cultured Code稱，iOS的應(yīng)用只用了1個(gè)月就開(kāi)發(fā)完成，完成了一項(xiàng)不可能的任務(wù)。
Things 1.0 不能與Mac同步，而且不能標(biāo)記。下圖是早期的設(shè)計(jì)草圖。
2012年發(fā)布的2.0版本是比較大的一次更新。背景變得更干凈了。圖標(biāo)也更小巧精致有個(gè)性。
2014年的2.5版本，設(shè)計(jì)變得扁平化，顏色更淺。2017年5月發(fā)布的應(yīng)用是界面上最大的一個(gè)變化。布局差不多，但是圖標(biāo)和ui元素都重新設(shè)計(jì)。設(shè)計(jì)師Cultured Code特別強(qiáng)調(diào)了如何使用動(dòng)畫為應(yīng)用程序提供全新的感覺(jué)。重新設(shè)計(jì)的應(yīng)用獲得了2017年Apple設(shè)計(jì)獎(jiǎng)。
4，OmniFocus
App Store從一開(kāi)始就提供了很多任務(wù)管理類的應(yīng)用，來(lái)自O(shè)mni公司的Things和OmniFocus是兩個(gè)重量級(jí)應(yīng)用。雖然兩個(gè)功能類似，但是兩個(gè)應(yīng)用的界面設(shè)計(jì)發(fā)展軌跡卻各有千秋。
OmniFocus for iPhone最初使用簡(jiǎn)單的桌面視圖和自定義底部導(dǎo)航，贏得了2008年Apple設(shè)計(jì)獎(jiǎng)。Omni Group在2010年6月為iPhone 4 重新設(shè)計(jì)了高清圖標(biāo)。而2011年6月開(kāi)始，界面發(fā)生了重大變化，頭部多了一個(gè)日期選擇。2013年針對(duì)iOS 7的推出，設(shè)計(jì)的界面變得扁平化。新的設(shè)計(jì)依賴顏色來(lái)提升空間感。
2015年春季的app 圖標(biāo)更新使用了黑色的“??”。從2012年開(kāi)始，每個(gè)圖標(biāo)都包含了彩蛋。圖標(biāo)放大，您會(huì)注意到碳纖維紋理實(shí)際上是由微小的重復(fù)Omni徽標(biāo)組成。
5，Evernote
Evernote的發(fā)展代表了很多軟件自2008年以來(lái)的設(shè)計(jì)趨勢(shì)。Evernote原來(lái)是在電腦端出現(xiàn)的，App Store推出之后，Evernote更為識(shí)別性高的大象圖標(biāo)。
像許多早期的iPhone應(yīng)用程序一樣，Evernote 1.0嚴(yán)重依賴于UIKit，大量使用高光效果。2011年重新設(shè)計(jì)了標(biāo)簽欄，按時(shí)間順序排列筆記。Evernote在2012年推出了針對(duì)iPhone 5的新界面，但是仍然使用默認(rèn)的iOS UI元素。
2012年11月，Evernote 5推出了全新的界面設(shè)計(jì)。采用了卡片式的展示方式。浮雕效果，陰影效果的運(yùn)用看上去更有深度。
2013年開(kāi)始，Evernote 全面擁抱扁平化設(shè)計(jì)。每個(gè)紋理，陰影和斜角都消失了。一個(gè)明亮的從左到右的漸變條紋的導(dǎo)航欄設(shè)計(jì)，與新的無(wú)紋理圖標(biāo)上使用的顏色相匹配。2017年開(kāi)始，設(shè)計(jì)又進(jìn)一步極簡(jiǎn)化。白色的頭部導(dǎo)航，黑色的底部標(biāo)簽欄。
6，eBay
eBay的設(shè)計(jì)可以說(shuō)是這篇文章中10個(gè)應(yīng)用程序中最引人注目的轉(zhuǎn)變。在WWDC 2008上，eBay特別的登臺(tái)展示。但與今天的app相比，最初的版本是相當(dāng)?shù)暮?jiǎn)陋。2009年11月，整個(gè)界面的背景換成了灰色。
一年后的2.0版本才是真正的設(shè)計(jì)，也為未來(lái)幾年的設(shè)計(jì)奠定了基礎(chǔ)。
2013年的設(shè)計(jì)像是重新披了一件外衣，而用戶體驗(yàn)跟以前保持一致。
每個(gè)版本的變化都反映了整個(gè)時(shí)代快速變化的設(shè)計(jì)趨勢(shì)，設(shè)計(jì)品味。
2015年9月，eBay 4.0 打破了常規(guī)。大多數(shù)應(yīng)用程序的功能都放在漢堡包菜單下面，只留下頂部的三個(gè)標(biāo)簽：“活動(dòng)，商店，銷售?！比缓筮@個(gè)設(shè)計(jì)很快沒(méi)有繼續(xù)了，2016年，ebay又重新恢復(fù)了原來(lái)的布局方式。如今的布局與2010年相比，又更加類似了。
7，Twitterrific
在App Store宣布之前，Craig Hockenberry和The Iconfactory為iPhone 設(shè)計(jì)了第一個(gè) Twitter客戶端。應(yīng)用是放在越獄市場(chǎng)的。
App Store上的Twitterrific 1.0從越獄版上借鑒了一些設(shè)計(jì)元素。它獲得了2008年的Apple設(shè)計(jì)獎(jiǎng)。Twitterrific也是最早使用如今越來(lái)越流行的深色主題的應(yīng)用程序之一 。但Twitterrific的設(shè)計(jì)故事更多地講述了Twitter作為服務(wù)的歷史，而不是設(shè)計(jì)趨勢(shì)。每次更新都反映了Twitter平臺(tái)的特性和功能的變化。在早期，這些功能通常由第三方自己開(kāi)創(chuàng)的。
2012年，Twitterrific 5.0將所有導(dǎo)航移動(dòng)到頂部，并使用完全自定義的UI元素。類似的布局一直持續(xù)到今天。就像應(yīng)用程序的設(shè)計(jì)一樣迷人，Twitterrific的圖標(biāo)使用了現(xiàn)代化的鳥類圖像，而且從一開(kāi)始到現(xiàn)在，基本上沒(méi)有什么變化。
8，Instapaper
一個(gè)專門為閱讀而設(shè)計(jì)的應(yīng)用應(yīng)該優(yōu)先考慮內(nèi)容而不是瀏覽器，因此Instapaper的設(shè)計(jì)從一開(kāi)始就是非常自然簡(jiǎn)單的。但是，由于iOS本身的變化，應(yīng)用也在外觀上又一些變化。導(dǎo)航欄和按鈕樣式在iOS 6和7中都進(jìn)行了更改。
9，PCalc
PCalc的故事從App Store推出的前10年就開(kāi)始了，開(kāi)發(fā)人員James Thomson 于1992年為Mac 發(fā)布了應(yīng)用程序，并一直延續(xù)至今。PCalc從一開(kāi)始在iOS運(yùn)行就是完全自定義的界面，并且有很多自定義的選項(xiàng)。
用于iPhone的PCalc 的第一個(gè)版本是從Mac儀表盤小部件移植而來(lái)。有光澤的按鈕和深藍(lán)色LCD面板與應(yīng)用程序的圖標(biāo)相匹配。在2008年12月，一個(gè)名為Twilight的熱門主題添加了更加詳細(xì)的圖形和類似于默認(rèn)iOS計(jì)算器的配色方案。Twilight后來(lái)更新了視網(wǎng)膜并支持更大的顯示屏。
2013年，PCalc采用了名為“Samurai”的新默認(rèn)主題和圖標(biāo)，適配iOS 7的扁平設(shè)計(jì)。PCalc的圖標(biāo)在2016年3月再次更新。自iOS 10.3發(fā)布以來(lái)，Apple已允許第三方應(yīng)用程序動(dòng)態(tài)更改其應(yīng)用程序圖標(biāo)，而無(wú)需向商店提交新版本。PCalc于2017年5月開(kāi)始充分利用該功能，推出了各種各樣的備用圖標(biāo)供您選擇。
10，Yelp
與Facebook一樣，Yelp的iPhone界面多年來(lái)發(fā)生了重大變化，但由于使用了一致的導(dǎo)航欄顏色，因此品牌識(shí)別度非常高。由于與Apple Maps的深度集成，該應(yīng)用程序越來(lái)越受歡迎。
2009年8月，Yelp將一個(gè)基本的增強(qiáng)現(xiàn)實(shí)界面隱藏在iPhone應(yīng)用程序中，用于定位您周圍的企業(yè)。雖然它當(dāng)時(shí)只是一個(gè)新奇事物，但鑒于ARKit應(yīng)用程序的興起，這一功能在今天仍然具有先見(jiàn)之明。
2010年1月，Yelp主屏幕推出了 3×3網(wǎng)格快捷菜單。界面在風(fēng)格上不斷完善，直到整個(gè)應(yīng)用程序在2013年10月重新設(shè)計(jì)，界面更加扁平，更加突出“附近”標(biāo)簽。
Yelp的更新通過(guò)顯示與您相關(guān)的附近的內(nèi)容，展示更多基于地理位置的內(nèi)容。
二、圖標(biāo)
比較所有上面列舉的10個(gè)應(yīng)用的圖標(biāo)迭代。在過(guò)去十年中，一些圖標(biāo)保持相當(dāng)一致，只進(jìn)行了細(xì)微的改進(jìn)，其他圖標(biāo)每隔幾年就重新設(shè)計(jì)一次。
在App Store推出時(shí)，高光的圖標(biāo)設(shè)計(jì)占統(tǒng)治地位。隨著設(shè)計(jì)師和開(kāi)發(fā)人員逐漸建立了圖標(biāo)設(shè)計(jì)規(guī)范和多年來(lái)的實(shí)踐經(jīng)驗(yàn)，細(xì)節(jié)和更多色彩的運(yùn)用已經(jīng)悄悄出現(xiàn)在許多圖標(biāo)中。
三、個(gè)性
早期的iPhone應(yīng)用進(jìn)入的是一個(gè)未知的世界，除了蘋果公司自己的小型股票應(yīng)用外，應(yīng)用的界面和交互方式?jīng)]有先入為主的觀念，設(shè)計(jì)師和開(kāi)發(fā)人員可以完全自由地進(jìn)行實(shí)驗(yàn)。
盡管如此，許多早期的應(yīng)用看起來(lái)感覺(jué)非常相似，因?yàn)橛脩艉烷_(kāi)發(fā)者都在互相測(cè)試。早期的反饋和反復(fù)試驗(yàn)很快就會(huì)影響每個(gè)應(yīng)用的發(fā)展方式。然而幾年內(nèi)，大多數(shù)應(yīng)用都找到了自己的方式，并開(kāi)發(fā)出獨(dú)特的風(fēng)格和個(gè)性。隨著硬件功能的改進(jìn)，設(shè)計(jì)差異逐漸從靜態(tài)圖形轉(zhuǎn)變?yōu)閯?dòng)畫和動(dòng)態(tài)界面。
在iOS 7引入的設(shè)計(jì)規(guī)范將設(shè)計(jì)人員和開(kāi)發(fā)人員又重新拉回來(lái)，許多應(yīng)用開(kāi)始通過(guò)感官體驗(yàn)選擇來(lái)區(qū)分自己，而不僅僅是界面設(shè)計(jì)的不一樣。所以用戶體驗(yàn)的重要性導(dǎo)致近年來(lái)用戶體驗(yàn)（UX）設(shè)計(jì)的普及。
四、未來(lái)10年
2008年，誰(shuí)也無(wú)法準(zhǔn)確預(yù)測(cè)App Store會(huì)發(fā)展到如今的繁榮。創(chuàng)新源于創(chuàng)新，iPhone用戶的品味和習(xí)慣塑造了開(kāi)發(fā)人員不斷的創(chuàng)新。
可以說(shuō)，未來(lái)是不可預(yù)測(cè)的，即將推出的iPhone和iOS版本肯定會(huì)以不可預(yù)見(jiàn)的方式改變應(yīng)用的格局。一個(gè)新的設(shè)計(jì)趨勢(shì)明天將席卷全球。即使在10年后，未來(lái)也是令人興奮的。