從同質化到個性化:蘋果 App Store 的十年設計發展之路
編者按:作者回顧了蘋果App Store中十款應用軟體十年來圖示的演變,通過分析各款軟體重大更新的變化點,總結出應用軟體行業逐步從同質化走向差異化,各款軟體開始開發出自己的特點,而蘋果釋出的新版本iOS也必將引領新的設計趨勢。
Apple公司最近在官方網站上釋出了一篇簡單的部落格,宣佈了近期歷史上最重要的設計機遇之一。 “我想說,我們想在iPhone上使用原生的第三方應用程式,我們計劃在二月份讓開發人員使用SDK。”史蒂夫喬布斯寫道,在不到一年後的某個安靜的週四早晨,App Store向iPhone使用者開放了超過500個應用程式。
沒有什麼比iPhone應用程式更能改變我們的生活方式,以及與周圍世界的互動方式了。在剛開放時,首批500款應用的開發者有獨特的機會,可以塑造此後數百萬款應用的設計方向和互動方式。
為了慶祝App Store十週年,讓我們來研究一下最初的10款App Store應用程式的視覺演變。
應用程式
在這篇文章中,我專門關注了應用程式的視覺變化,這些應用程式從第一天開始就可以下載,直到今天還在接受更新。雖然iPad上也有很多這樣的應用程式,但這篇文章主要評論強調iPhone版軟體的變化。
iTunes Remote
Apple通過在App Store上釋出一些自己開發的軟體,為其他開發人員樹立了榜樣。Apple建立的兩個應用程式中的第一個是德州撲克(Texas Hold'em),另一個就是Remote,這是一個簡單的實用程式,用於通過Wi-Fi控制Mac或Apple TV的iTunes庫進行播放。雖然德州撲克在2011年從商店下架,但Remote今天仍然存在。
從一開始,Remote的設計就受到iPhone版本的 iPod應用程式(今天的Music)的外觀和感覺很大的影響。事實上,Now Playing的圖示在外觀上與Remote基本相同。Remote 2.0版本是由路易·曼蒂亞 (Louie Mantia)設計的新圖示,這兩個應用程式開始在iOS 6上出現差異化,當時陳舊的Music應用程式被完全重新設計,並配有具有識別度的音量滑塊,可以動態響應iPhone的滑動,而Remote軟體則保持了更多的陳舊外觀,該圖示再次更新以匹配Mac上iTunes 11的樣式。
Remote的第一次主要重新設計來自iOS 7,與Music應用程式的鮮明白色主題形成對比的是,Remote採用了深色的模糊背景,並以專輯封面的顏色著色。2016年,Apple釋出了針對第4代Apple TV的Remote應用程式,這是一個似乎想要取代Remote的合乎邏輯的步驟。不久之後,Remote被重新命名為iTunes Remote,雖然該應用程式繼續可供下載,但一直保持不變,直到今年6月它收到了全新設計,並支援iPhone X更高的顯示屏。
iTunes Remote的更新迴歸到更具視覺保守性的外觀,讓人聯想到iOS 11的Music應用程式,但它放棄了大標題和卡片轉而支援傳統導航。iTunes Remote使用藍色來匹配更新圖示,而不是紅色調。
與iTunes Remote的適度變化相比,Facebook應用程式在過去十年中,被不斷重新設計的頻率越來越高。該應用程式的全面視覺歷史能夠寫一本小書,因此我選擇其中八個最重要的變化。
Facebook在iPhone上的冒險實際上是在App Store存在之前開始的,該服務最初於2007年10月作為iPhone的第一批網路應用程式之一進行提供,除了標誌性的藍色導航欄之外,App Store中的1.0版現在幾乎無法識別為Facebook,即使是圖示也缺少簽名白色“f”。該應用程式的新聞Feed基本上是一個帶有五個圖示的標籤欄上的裝飾檢視,分別為主頁、個人資料、朋友、聊天和收件箱。而2.0版基於相同的概念,在主標題欄下添加了兩層導航。
Facebook 3.0版本於2009年7月首次預覽,並推出了3×3網格圖示,以適應應用程式的氣球狀導航。早期的螢幕截圖顯示了一個完全藍色的平鋪網格,但這個設計從未在應用程式的公共版本中釋出過。
2011年10月,Facebook 4.0成為導航“漢堡選單”式導航的早期採用者。Facebook應用程式的受歡迎程度在接下來的幾年中,加速了無數應用程式和網站中有爭議的設計元素的採用。在第4版之後,Facebook的設計時間表變得更具挑戰性,Facebook應用程式的外觀開始更快地迭代,並且變化通常是逐步推出而不是為主要更新版本保留。
2013年4月,Facebook在iOS應用程式中嘗試了“聊天頭像”,可移動的個人資料照片在點選時擴充套件到聊天視窗。iOS 7的新外觀進行了重新設計,引入了用於導航的標籤欄,標籤欄圖示仍然會定期重新設計並在更新中重新安置。
Facebook的一些設計挑戰來自其運營規模,與許多小型應用程式不同,Facebook必須在大量平臺上為其客戶提供一致的體驗,而不僅僅是Apple。2017年8月的更新嘗試統一iOS,Android和網路上的新聞Feed設計,使其評論風格看起來更像是Messenger對話。
Things
Things最初是開發作為Mac的任務管理工具,但最終在iOS上首先產生1.0版本。該應用程式的開發人員Cultured Code在他們的釋出帖中指出,原始版本僅在一個月內構建,這個日期最初似乎不可能達到。
Things 1.0缺乏與Mac版同步的方法,並且不能使用標記功能,這兩個都是關鍵功能。儘管釋出壓力很大,但該應用程式的基本層次結構至今仍然存在。優秀的Flickr圖片網站中的專輯記錄了應用程式的早期設計階段。Things第一次主要的視覺更新是在2012年8月釋出的,一層清新的色調擺脫了iOS的陳舊外觀,而小巧的圖形裝飾賦予它獨特的個性。
2014年9月的Things 2.5再次更新了應用程式的使用者介面,軟體的外觀更平坦,配色更淡。重新的設計最初計劃用於Things 3,但開發時間比預期的要長,2017年5月釋出的Things 3是應用程式外觀上最重大的變化。實際上,每個圖示和UI元素都被重新繪製,同時保留了底層佈局。在更新的釋出視訊中,Cultured Code特別強調了如何使用動畫為應用程式提供全新的感覺。重新設計在2017年獲得了Cultured Code的Apple設計獎。
OmniFocus
即使在初始階段,App Store也充斥著任務管理應用程式,來自Omni 開發小組的OmniFocus就是其中之一,同Things一樣,OmniFocus軟體從第一天開始就能下載。雖然兩個應用程式都提供了類似的實用程式,但在過去的十年中,每個應用程式都採用了獨特的設計方向。
iPhone版本的OmniFocus最初使用帶有自定義圖示的簡單表格檢視進行導航,2008年獲得了蘋果設計獎。OMNI小組在2010年6月響應iPhone 4的視網膜顯示重新繪製了他們所有的藝術品和應用程式的圖示。應用程式最大的變化之一發生在2011年6月,當時增加了預測模式。導航欄下面的具有光澤的日期選擇器成為UI定義元素,雖然在2013年iOS 7版的重新設計中光澤度在有所下降,新的平面外觀很大程度上依賴於文字色彩的空間意識。
在2015春季的iPhone版更新帶來了較暗的圖示,並且選擇標記具有更柔和的邊緣。自2012以來的每一個圖示都包括復活節彩蛋,即使是長期使用者也可能不知道。放大圖示,你會發現碳纖維紋理實際上是由微小的、重複的Omni logo組成。
OmniFocus的最新主要更新是在過去的5月份釋出的OmniFocus 3.0,雖然許多的變化是工程相關的,但大標題和iPhone X的優化重新整理提升了UI質感。
Evernote
印象筆記(Evernote)的造型故事完美地突出了自2008年以來的許多主要軟體的設計趨勢,Evernote組織工具在App Store中釋出之前,實際上是作為桌面應用程式開始的,並且在iPhone版釋出之前,最近已經更新了其具有識別度的大象徽標。
如同許多早期的iPhone應用程式一樣,Evernote 1.0嚴重依賴於UIKit庫存元素和大而有光澤的圖形。2011年的更新設計重新組織了標籤欄,並按時間順序排列了“所有筆記”檢視的優先順序。當Evernote在2012年增加對iPhone 5更大螢幕的支援時,該應用仍然使用預設的iOS UI元素,導航欄和按鈕自動拾取iOS 6的亞光飾面。
Evernote 5於 2012年11月推出,該應用程式被完全從頭重新設計,是該時代典型的紋理豐富、高度主題設計的教科書級範例。浮雕圖示、仿紙紋理和深度陰影為應用程式提供了深度,該應用程式的圖示降低了老化的光澤外觀,但保留了拉絲金屬。
在一篇公告部落格中,Evernote表示:“我們通常不會進行全面的重新設計,事實上,它每隔幾年才會發生一次。“雖然他們當時並不知道,但是在2013年WWDC上宣佈推出iOS 7時,距離Evernote的重新設計不到一年,同時Evernote 5也贏得了Apple Design獎。
Evernote張開雙臂採用了iOS 7的扁平化設計,每個紋理、陰影和斜角都被替換掉,明亮的從左到右的漸變條紋應用在程式的導航欄,與新的無紋理圖示上使用的顏色相匹配。2017年初的更新使設計更加柔和,包括更柔和的圖示,白色導航欄,帶有微妙陰影的記事卡和深色標籤欄,隨後對排版和標籤欄圖示進行了進一步改進。
eBay
eBay的設計可以說具有這篇文章中10個應用程式中最引人注目的轉變。儘管蘋果公司在WWDC 2008的舞臺上突出了該款軟體,但與今天的精緻體驗相比,原始版本的iPhone版本的eBay是徹頭徹尾粗糙。到2009年11月,整個應用程式已經重新考慮了更加一致的灰色UI。
一年後,eBay 2.0為未來幾年應用程式的組織奠定了基礎。雖然eBay之前曾提供獨立銷售應用程式,但該功能現已融入主要體驗。該應用程式的主螢幕也進行了更新,最終才感覺像真正的原生iOS設計。
2013年的幾次更新為eBay提供了新的色調,同時保持了相同的基本使用者體驗。每一次變化都反映了這個時代迅速發展的軟體設計品味,這個連續的迭代意味著當應用程式重新設計為iOS 7時,eBay的外觀相當平滑。使用熟悉的調色盤和導航層次結構有助於保持使用者的肌肉記憶。
2015年9月,eBay 4.0打破了這種模式。大多數應用程式的功能都放在漢堡包選單下面,只留下三個標籤靠近頂部,即活動、商店、銷售。憑藉鮮明的大量文字化的UI和新圖示進行新版本設計,但這個設計沒有持續很長時間。截至2016年5月,eBay幾乎完全恢復了應用程式的組織,今天的佈局與2010年推出的設計更加相似。
Twitterrific
在App Store釋出之前,Craig Hockenberry和The Iconfactory為iPhone構建了第一個Twitter客戶端。由Apple愛好者社群開發的越獄軟體,在Apple提供官方認可的工具之前,開發人員有幾個月編寫應用程式的經驗。
Twitterrific 1.0從越獄時代借用了一些設計元素,從外行角度看是令人驚訝的精良。 它在2008年贏得了Apple設計獎,Twitterrific也是最早使用黑暗主題的應用程式之一 ,今天這種風格越來越受歡迎。但Twitterrific的設計故事更多地講述了Twitter作為服務的歷史,而不是設計趨勢。Twitterrific的每次更新都反映了Twitter平臺的特性和功能的變化。在早期,這些功能通常由第三方自己開創。
2012年,Twitterrific 5.0將所有導航移動到顯示的頂部,並使用完全自定義的UI元素。類似的佈局一直持續到今天。就像應用程式的設計一樣迷人的是它的圖示。除了作為第一個使用鳥類影象的Twitter應用程式之外,Twitterrific還是為數不多的然保持著現代化的視覺效果的iOS應用程式之一,該應用程式的吉祥物Ollie在向iOS 7過渡的期間幾乎沒有變化,今天看起來仍然像2012年一樣新鮮。
Instapaper
Instapaper是一個專為閱讀而構建的應用程式,它比Chrome更優先考慮內容,因此Instapaper的設計從一開始就自然制服了使用者。事實上,應用程式進行的一些最明顯的視覺變化,源自於iOS本身的改變。IOS 6和7中的導航欄和按鈕樣式都進行了更改,為應用程式提供了兩個“免費”的可以看見的更新。
然而,說該款應用程式沒有發展是一種誤解。Instapaper一開始在App Store上是免費下載,不久之後,便推出了名為Instapaper Pro的付費版本。2011年秋季,由Dribbble聯合創始人Dan Cedarholm設計的新圖示被採用,軟體也進行了讀取體驗和更深層UI元素的重大更新,該圖示後來在WWDC大會的幻燈片上用於展示關於偉大圖示部分。
2013年4月,Betaworks從創始人馬可·阿蒙特(Marco Arment)手中收購了Instapaper,並開始以不同的方式發展這款應用程式。Betaworks指導下的第一次重大更新於2013年9月釋出,這是一個IOS 7版本的更新。Pinterest於2016年8月收購了Instapaper,當時該公司承諾該應用程式將繼續存在。在目前的所有權下,即使在完成支援iPhone X的Super Retina顯示屏的更新後,Instapaper也保持了相當一致的視覺效果。
PCalc
PCalc的故事在App Store推出前十年就已經開始了。開發人員James Thomson於1992年為Mac釋出了原始的應用程式,並且它的發展至今仍在繼續。PCalc從一開始就在IOS上運行了一個完全自定義的介面,提供了越來越多的主題選擇和自定義選項。這裡有太多要點,所以我選擇了幾個里程碑式發展進行說明。
用於iPhone的PCalc的第一個版本是從Mac儀表板小部件移植而來,但它能與經典的iPhone UI很好地匹配。有光澤的按鈕和深藍色LCD面板與應用程式的圖示相適應, 2008年12月,一個名為Twilight的熱門主題,添加了更加詳細的圖形和類似預設iOS計算器應用程式的配色方案。Twilight後來更新了視網膜圖形並支援更大的顯示螢幕, 它仍然是今天應用程式中的一個選項。
為適應IOS 7扁平化設計的轉換,PCalc採用了名為“Samurai”的新預設主題和匹配圖示,應用程式設定中仍然提供以前舊的主題。PCalc的圖示在2016年3月再次更新,自IOS 10.3釋出以來,Apple已允許第三方應用程式動態更改其應用程式圖示,而無需向商店提交新版本。PCalc於2017年5月開始充分利用該功能,推出了各種各樣的備用圖示供使用者選擇,後續更新添加了更多內容。
經過10年的發展,PCalc已經超越了iPhone計算器應用程式的實際限制。最近的更新享受了一些創新的自由與新奇的功能,如AR計算器模式,而支援iPhone X的顯示屏為Samurai主題帶來了圓角。
Yelp
與Facebook一樣,Yelp的iPhone介面多年來發生了重大變化,但由於使用了一致的導航欄著色,因此保持了具有識別度的品牌。由於與Apple Maps的深度整合,該應用程式越來越受歡迎。
2009年8月,Yelp將一個初步的增強現實介面隱藏在iPhone版應用程式中,用於定位您周圍的企業。雖然它當時只是一個新奇事物,但隨著ARKit應用程式的興起,這一功能在今天看來具有先見之明。
2010年1月,一個新的Yelp主頁螢幕以3×3的快速快捷方式滾動,之後Yelp不斷完善相同風格的基本介面,直到整個應用程式在2013年10月重新設計,這次更新後Yelp的外觀更加平坦,更加突出“附近”標籤。
Yelp的最新更新通過顯示與您相關的內容,擴充套件了簡單的基於位置的結果。這種通過綜合處理髮現的方法是一種使用者體驗的設計趨勢,這在iOS 11重新設計的App Store中取得了巨大成功。
圖示發展
並排對比所有10個突出應用程式的圖示迭代,顯示出每款應用選擇的獨特的現代化道路。在過去的十年裡,一些圖示保持了相當的一致性,只是做了一些細微的改進,還有一些則是每隔幾年重新設計一次。按時間順序排列,整個行業的設計趨勢變得明顯。
當App Store推出時,有光澤的圖示統領著這片土地。預設情況下會應用圖示光澤,開發人員必須在Xcode中專門禁用此效果才能將其刪除。隨著iOS應用的成熟,大多數應用最終取消了光澤,採用了非常詳細的定製設計。
眾所周知,iOS 7為一個好圖示重新設定了度量標準。高度紋理和3D渲染的特點通常看起來與蘋果的新圖示不合適,有些與更新的圓角半徑發生衝突。隨著設計師和開發人員逐漸為圖示設計制定新的指導方針和最佳方案,細節和更加剋制的色彩調色盤已經悄悄地迴歸到許多圖示中。
個性化
早期的iPhone應用程式一頭扎進一個未知的世界,除了蘋果公司自己的陳舊的應用程式外,應用程式的外觀和工作方式沒有先入為主的觀念,設計師和開發人員可以完全自由地進行實驗。
儘管如此,許多早期的應用程式看起來和感覺非常相似,因為使用者和開發人員攜手學習最佳的方案,早期反饋和反覆試驗很快就會影響每個應用的發展方式,在幾年內,大多數應用程式找到了自己的方式,並開發出獨特的風格和個性,隨著硬體功能的改進,設計差異逐漸從靜態圖形轉變為動畫和動態介面。
在iOS 7引入的同質化介面指南將設計人員和開發人員送回繪圖板之後,許多應用程式開始通過感受到的體驗選擇來區分自己,而不是觀感。經常使用周到的綜合分析和預測資訊設計來幫助表現出新的和有趣的內容,否則這些內容可能會被忽視。智慧工作流程簡化了常見操作,幫助使用者減少完成任務的時間。超出畫素級別的良好設計的重要性,導致近年來使用者體驗(UX)設計的普及。
下一個10年
在2008年的時候,沒人能準確預測App Store的發展方式。創新源於創新,iPhone使用者的品味和習慣塑造了開發人員選擇的應用程式型別,未來也可以這麼說。即將推出的iPhone和iOS版本肯定會以不可預見的方式改變應用程式格局,明天一個新的設計趨勢將席捲全球,即使在10年後,未來也是令人興奮的。
編譯組出品。編輯:郝鵬程