對(duì)于設(shè)計(jì)師來(lái)說(shuō)，那個(gè)歷史性的時(shí)刻來(lái)得很不經(jīng)意——2007年，一篇簡(jiǎn)單的博客文章被發(fā)布在蘋果網(wǎng)站上。史蒂夫·喬布斯寫道「我們希望iPhone能擁有屬于本地第三方應(yīng)用程序，我們計(jì)劃在2月份之前，讓開發(fā)者手中擁有SDK(Software Development Kit)。」 

不到一年后，2008年的一個(gè)安靜的周四早上，超過(guò)500個(gè)應(yīng)用軟件整裝待發(fā)，App Store正式開放。 

iPhone應(yīng)用程序深刻地改變了我們的生活方式，建立了人與世界全新的互動(dòng)方式。而第一批500個(gè)應(yīng)用程序的制作者們則擁有了十分難得的機(jī)會(huì)，來(lái)塑造自那以后數(shù)百萬(wàn)個(gè)應(yīng)用程序的設(shè)計(jì)方向和交互方法。

為慶祝App Store建立的十周年，讓我們來(lái)看看這十年中，來(lái)自第一批500個(gè)軟件中3款首發(fā)于App Store的應(yīng)用視覺進(jìn)化，也來(lái)聊聊這十年對(duì)App軟件來(lái)說(shuō)究竟改變了什么。

一、臉書 Facebook 

Facebook應(yīng)用在過(guò)去10年中不斷地重新設(shè)計(jì)，頻率越來(lái)越高。如果要把這款應(yīng)用的視覺設(shè)計(jì)變更歷史整理出來(lái)，那將會(huì)填滿一本書，所以這里只列舉選擇了幾個(gè)相對(duì)重要的變化。

Facebook在iPhone上的嘗試實(shí)際開始于App Store誕生之前。在2007年10月，它首先是作為一個(gè)適應(yīng)iPhone的網(wǎng)頁(yè)應(yīng)用提供服務(wù)的。在App Store開放后，F(xiàn)acebook 1.0版除了標(biāo)志性的藍(lán)色導(dǎo)航欄之外，幾乎無(wú)法讓人識(shí)別出來(lái)，甚至圖標(biāo)也沒(méi)有那個(gè)標(biāo)志性的白色“f”。 

該應(yīng)用程序的信息流界面實(shí)際上是一個(gè)修飾過(guò)的table view表視圖，底部導(dǎo)航欄包括五個(gè)圖標(biāo)：主頁(yè)、個(gè)人資料、朋友、聊天和收件箱。2.0版本基本未做大變動(dòng)，只是在主標(biāo)題欄下面增加了兩層導(dǎo)航。Facebook 3.0(下圖)于2009年7月首次上線，并引入了3×3圖標(biāo)網(wǎng)格，以幫助解決越發(fā)繁重的導(dǎo)航問(wèn)題。 

2011年10月，F(xiàn)acebook 4.0率先采用了“漢堡圖標(biāo)”(即小而無(wú)框的圖標(biāo))用于導(dǎo)航。在接下來(lái)的幾年里，F(xiàn)acebook的流行加速了無(wú)數(shù)應(yīng)用和網(wǎng)站對(duì)“漢堡圖標(biāo)”這一有爭(zhēng)議的設(shè)計(jì)元素的接受。在4.0版本之后，F(xiàn)acebook的視覺設(shè)計(jì)變化開始明顯加快了迭代。

2013年4月，F(xiàn)acebook增加了浮動(dòng)的聊天界面——當(dāng)點(diǎn)擊時(shí)，個(gè)人資料會(huì)擴(kuò)展到聊天窗口。同時(shí)為了適應(yīng)iOS 7，導(dǎo)航標(biāo)簽欄被重新引入。 

值得注意的是，由于用戶規(guī)模逐漸擴(kuò)大，F(xiàn)acebook必須考慮如何在大量平臺(tái)上為客戶提供一致的體驗(yàn)。2017年8月的更新中，F(xiàn)acebook就試圖統(tǒng)一iOS、Android和web上的信息流界面設(shè)計(jì)。

二、印象筆記 Evernote 

印象筆記自2008年起的交互設(shè)計(jì)演變極具代表性，完美地顯示了許多主要的軟件設(shè)計(jì)趨勢(shì)。這個(gè)最近更新了LOGO的筆記工具在App Store發(fā)布之前就作為桌面應(yīng)用程序流行。

像許多早期的iPhone應(yīng)用一樣，印象筆記1.0版非常依賴于堆砌UIKit元素和大而有光澤的圖標(biāo)。2011年的界面迭代重新組織了底部導(dǎo)航欄，并將按時(shí)間順序排列的“所有筆記”界面優(yōu)先為主界面。當(dāng)印象筆記在2012年開始對(duì)iPhone 5更大顯示屏提供支持時(shí)，它的主界面仍然使用默認(rèn)的iOS交互元素，比如導(dǎo)航條和按鈕自動(dòng)拾取了iOS 6的啞光飾面。 

2012年11月，印象筆記5.0版發(fā)布。這次更新幾乎是全面重新設(shè)計(jì)，是紋理豐富、主題突出的教科書范例。浮雕圖像、人造紙張紋理和深陰影帶來(lái)了強(qiáng)烈的層次感。該應(yīng)用的圖標(biāo)去掉了過(guò)時(shí)的弧度光澤，但保留了拉絲金屬風(fēng)格。 

那時(shí)印象筆記官方曾經(jīng)表示：“我們并不會(huì)頻繁地全面更新。事實(shí)上，這種情況每隔幾年才發(fā)生一次。“他們當(dāng)時(shí)并不知道，不到一年后，當(dāng)iOS 7在WWDC 2013上發(fā)布時(shí)，印象筆記就已經(jīng)不得不需要重新設(shè)計(jì)了。也就是那場(chǎng)發(fā)布會(huì)后，印象筆記5.0版也獲得了蘋果設(shè)計(jì)獎(jiǎng)。

印象筆記很快適應(yīng)了iOS 7的扁平化。每個(gè)紋理、陰影和斜面都被替換了。一條明亮的、漸變的、貫穿頁(yè)面的導(dǎo)航欄，與新的扁平化圖標(biāo)上使用的顏色相匹配。而到了2017年初，新版本則調(diào)暗了這個(gè)顏色，使用飽和度更低的圖標(biāo)、白色導(dǎo)航欄、帶有細(xì)微陰影的記事卡和深色標(biāo)簽欄來(lái)降低設(shè)計(jì)的強(qiáng)度。隨后的更新中，繼續(xù)對(duì)排版和標(biāo)簽欄圖標(biāo)進(jìn)行了進(jìn)一步的改進(jìn)。 

印象筆記適配 iOS7.0的首版

三、易趣 ebay 

這十年中，易趣的設(shè)計(jì)經(jīng)歷了可以說(shuō)是最具戲劇性的轉(zhuǎn)變。在WWDC 2008大會(huì)上，蘋果曾經(jīng)高度贊揚(yáng)過(guò)當(dāng)時(shí)易趣的UI設(shè)計(jì)，然而如果和今天的易趣相比，2008年的它也顯得十分粗糙。直到2009年11月，整個(gè)應(yīng)用程序還徘徊在黃色與灰色的統(tǒng)一界面中。 

2013年的幾次更新讓易趣的界面更加簡(jiǎn)潔明亮，但功能模塊的變化不大。這幾次的界面視覺更新都反映了這個(gè)時(shí)代快速發(fā)展的界面設(shè)計(jì)風(fēng)潮。在面對(duì)iOS 7的大調(diào)整時(shí)，這種持續(xù)不斷的視覺迭代也讓易趣的外觀轉(zhuǎn)變顯得相當(dāng)順利。在不斷更新中保留熟悉的配色和導(dǎo)航層次也有助于用戶保留使用習(xí)慣。

2015年9月，易趣 4.0版本發(fā)布。大部分功能都放在左上角的漢堡菜單下，只在頂部留下三個(gè)標(biāo)簽:“活動(dòng)、購(gòu)物、折扣”。然而這份略顯死板、高文本占比的UI并沒(méi)有沿用太久。到2016年5月，易趣幾乎完全放棄了上個(gè)版本的頁(yè)面結(jié)構(gòu)，如下圖一般恢復(fù)了之前的設(shè)計(jì)。直到今天，易趣的布局與2010年的設(shè)計(jì)依然保持一定程度的相似。 

四、十年中，圖標(biāo)設(shè)計(jì)的變化

比較這些應(yīng)用程序的圖標(biāo)迭代，不難發(fā)現(xiàn)每個(gè)軟件都以自己的方式在適應(yīng)時(shí)代的潮流。一些軟件的圖標(biāo)在過(guò)去的十年中保持了相當(dāng)?shù)囊恢滦?，只做了一些?xì)微的改進(jìn)，而另一些則每隔幾年就重新設(shè)計(jì)一次。按照時(shí)間順序排列之后瀏覽，整個(gè)行業(yè)的設(shè)計(jì)趨勢(shì)變得顯而易見。

全面來(lái)看，當(dāng)十年前App Store剛推出時(shí)，呈現(xiàn)玻璃質(zhì)感的閃亮圖標(biāo)方興未艾。用于開發(fā)應(yīng)用的官方XCode后臺(tái)中，曾一度默認(rèn)給圖標(biāo)設(shè)置一定光澤。如果不想要光澤效果，開發(fā)者還必須在Xcode中特別設(shè)置禁用。而隨著iOS應(yīng)用程序的成熟和UI審美趨勢(shì)的發(fā)展，光澤圖標(biāo)統(tǒng)治的時(shí)代已經(jīng)一去不返。 

10個(gè)App的圖標(biāo)迭代史

iOS 7以曾經(jīng)推出所謂“好圖標(biāo)”的度量標(biāo)準(zhǔn)而聞名。高度紋理化和3D渲染的設(shè)計(jì)通常與蘋果官方應(yīng)用的新圖標(biāo)設(shè)計(jì)風(fēng)格格格不入，細(xì)致、嚴(yán)格的圖標(biāo)規(guī)范尺寸也帶來(lái)了挑戰(zhàn)——比如圖標(biāo)的圓角并不是與以往一致的四分之一圓。 

隨著設(shè)計(jì)者和開發(fā)人員不斷更新指導(dǎo)方針和積極地投入設(shè)計(jì)實(shí)踐，豐富的細(xì)節(jié)和更為克制的色彩選擇已經(jīng)慢慢成為新的趨勢(shì)。

五、十年中，應(yīng)用設(shè)計(jì)思路的變化

對(duì)于早期的iPhone應(yīng)用程序制作者們來(lái)說(shuō)，他們那時(shí)仿佛勇敢地闖入了一片未知的荒地。除了蘋果自己的預(yù)置軟件之外，對(duì)于應(yīng)用程序的外觀或工作方式都沒(méi)有預(yù)設(shè)的概念和參考，設(shè)計(jì)師和開發(fā)者只能自由地進(jìn)行實(shí)驗(yàn)。

早期的反饋和反復(fù)試驗(yàn)很快決定了每個(gè)應(yīng)用程序的發(fā)展之路。幾年內(nèi)，大多數(shù)應(yīng)用找到了自己的方式，并發(fā)展出獨(dú)特的風(fēng)格和個(gè)性。隨著技術(shù)帶來(lái)的硬件迭代，設(shè)計(jì)的差異化體現(xiàn)逐漸從靜態(tài)圖形轉(zhuǎn)向動(dòng)畫和動(dòng)態(tài)界面。 

在iOS 7引入的統(tǒng)一界面指南帶給設(shè)計(jì)者和開發(fā)人員一系列條條框框之后，這些制作者們開始嘗試站在使用者的角度，營(yíng)造有區(qū)別性的用戶體驗(yàn)來(lái)與其他軟件區(qū)隔開。為了更快地吸引、凝聚用戶的注意力，深思熟慮的策劃和預(yù)測(cè)性的信息設(shè)計(jì)經(jīng)常被用來(lái)幫助展示新的有趣的內(nèi)容。用戶體驗(yàn)( UX )理論也在近年愈發(fā)流行。

六、未來(lái)10年的發(fā)展 

2008年，誰(shuí)也不能真正地看明App Store的發(fā)展。新的創(chuàng)新總歸源于舊的創(chuàng)新，iPhone用戶的品味和習(xí)慣決定了開發(fā)者們要制作怎樣的應(yīng)用軟件。

再向前看也是如此。即將推出的iPhone和iOS版本肯定會(huì)以意想不到的方式改變應(yīng)用軟件的生存環(huán)境?；蛟S，一種新的設(shè)計(jì)趨勢(shì)明天就會(huì)席卷全球。即使在10年后，對(duì)于“未來(lái)”二字，我們也只能說(shuō)——它始終是令人興奮的。