網絡上每年都會有大量設計趨勢分析,但是很多時候只是分析了一些表層,并沒有深入。趨勢,幾乎每一年都在變,如何透過現象看本質?我覺得方法之一是可以嘗試把時間線拉長,從一個更高的維度來看待趨勢演變,并通過對自身產品的品牌定位來分析是否需要跟隨趨勢去設計。
蘋果公司的設計一直是設計領域的風向標,本文是通過回顧 App Store 里最經典的10款應用的設計演變,來橫向看待設計趨勢變化之路。
一篇簡短的博客帖子在 Apple 官網上發布后,標志著近段歷史上最重要的設計機會之一來臨了。史蒂夫喬布斯在這篇博文中寫道,「我想說的是:我們希望在 iPhone 上有原生的第三方應用,并計劃在二月份讓開發人員拿到 SDK」。短短不到一年,在一個安靜的周四上午,App Store 向 iPhone 用戶開放了超過500個應用。
幾乎沒有什么現代創新比 iPhone 應用更能改變我們的生活和與周圍世界的互動方式。在發布會上發布的首批500個應用的開發者們有了一個特殊的機會,可以塑造自那以后創建的數百萬個應用的設計方向和交互策略。
為了慶祝 App Store 成立10周年,讓我們一起來研究下10個原創 App Store 應用的視覺演變。
一、應用
就本文而言,我所聚焦的點是在于應用的顯著視覺變化上,這些應用在第一天就可以下載,直到今天仍在保持更新。雖然其中許多應用也有 iPad 版本,但本文主要講的是 iPhone 版本上的一些變化。
1. iTunes Remote
Apple 通過在 App Store 上發布一些自己的軟件,為其他開發人員樹立了標桿。最初開發的兩個應用是 Texas Hold'em 和 Remote,這是一個簡單的應用,用于通過 Wi-Fi 控制 Mac 或 Apple TV 的 iTunes庫的播放。2011年,Texas Hold'em 應用下架了,但是 Remote 仍然在保持更新。
從一開始,Remote 的設計就很受 iPhone 版 iPod 應用(現在叫做 Music)的外觀和感覺的影響。事實上,和現在的播放圖標在外觀上本質上是相同的。2.0版帶來了由 Louie Mantia 重新設計的圖標。這兩個應用開始在 iOS 6 上出現了分歧,當時音樂應用完全重新設計并設置了一個音量滑塊,可以動態響應你在 iPhone 上的移動操作。Remote 保持了更保守的外觀,圖標也再次更新以匹配 Mac 上 iTunes 11 的風格。
Remote 的第一次重大改版是在 iOS 7 上完成的。與音樂應用的純白色主題形成對比的是 Remote 的深色模糊背景,并以專輯作品的顏色來配色。2016年,Apple 發布了針對第4代 Apple TV 的 Apple TV Remote 應用,這是一個合乎邏輯的迭代,似乎取代了 Remote。不久之后,Remote 被重命名為 iTunes Remote。雖然這款應用仍然能下載,但此后很長時間,它幾乎都沒有更新。直到今年6月,才做了一次全新設計并對 iPhone X 做了適配。
iTunes Remote 的這次更新重新回歸到更具保守的視覺外觀,讓人聯想到 iOS 11 音樂應用,但放棄了大標題和卡片的設計,轉而支持傳統導航。iTunes Remote 使用藍色來匹配更新的圖標,而不再是原來的深色色系。
2. Facebook
與 iTunes Remote 的溫和變化形成鮮明對比的是,Facebook 應用在過去十年中不斷進行重新設計,而且頻率越來越高。如果想要完全展現 Facebook 的視覺更新歷史可能會寫滿一整本書,所以我在這里僅選取了8個最重要的更新。
Facebook 在 iPhone 上的更新實際上在 App Store 存在之前就已經開始了。這款應用最初是作為 iPhone 2007年10月推出的首批網絡應用之一。除了標志性的藍色導航條外,App Store 中的1.0版本現在幾乎認不出 Facebook 了。即使是圖標也缺少白色標志性簽名「f」。應用的消息流本質上是一個帶有五個標簽欄并裝飾好的表格視圖:主頁,個人資料,朋友,聊天和收件箱。2.0版本也是基于同樣的理念,只是在主標題欄下新增了兩層導航。
Facebook 在2009年7月的3.0版本中,第一次引入了一個3×3網格圖標來幫助解決應用不斷膨脹的導航。早期的截圖顯示了這種圖標,但是這個設計從來沒有在公開版本中發布過。
2011年10月,Facebook 4.0率先采用了導航「漢堡菜單」。在接下來的幾年里,這款應用的普及加速了各種應用和網站在設計元素上的創新。在第4.0版之后,Facebook 的設計時間表變得更加具有挑戰性。Facebook 的外觀開始迭代得更快,并且經常是逐步推出,而不是一次性在主版本中全面鋪開。
2013年4月,Facebook 在 iOS 應用中嘗試了「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 的新風格要求重新設計導航欄。標簽欄圖標在更新之間仍有規律地重新定位和設計。
Facebook 的一些設計挑戰來自其運營規模。 與許多小應用不同,Facebook 必須在大量平臺上為其客戶提供一致的體驗,而不僅僅是在 iOS 上。 2017年8月的更新,是在嘗試統一 iOS,Android 和 Web 上的信息流設計,其評論風格看起來也更像是 Messenger 對話。
3. Things
Things 一開始是作為一個 mac端的任務管理工具開發的,但是最后的1.0版本卻是在 iOS 上發布的。開發這款應用的作者 Culture Code 在發布會上指出,最初的版本在一個月時間內完成——是在一個聽起來似乎不可能完成的時間內完成的。
1.0版本與 Mac 版本兩個關鍵問題是沒有辦法同步并且不能使用標簽。盡管開始有壓力,但這款應用的基本架構一直延續到今天。一款優秀的 Flickr 相冊記錄了應用的早期設計階段。第一次主要的更新是在2012年8月2.0版本的發布,有了一個全新的外觀和一些個性的圖標設計。
2014年9月,Things 2.5 版本再次更新了 UI,使其外觀更加扁平,配色更淺。最初計劃對 Things 3 版本進行重新設計,但開發花費的時間比預期的要長。2017年5月發布的 Things 3 是這款應用迄今為止最重大的一次改版。幾乎每個圖標和 UI 元素都被重新設計,僅保留了底層布局。在更新的發布視頻中,Cultured Code 特別強調了如何使用動畫為應用提供全新的感覺。在2017年,重新設計的 Things 獲得了蘋果設計大獎。
4. OmniFocus
即使在它的初期,App Store 也已經有非常多的任務管理應用。 來自 The Omni Group 公司的 Things 和 OmniFocus 兩款應用從 App Store 上線第一天就有了。 雖然這兩款應用提供類似的功能,但在過去的十年中,它們都有各自獨特的設計方向。
OmniFocus 的 iPhone 版最初采用簡單的表格視圖和自定義圖標導航,獲得了2008年的蘋果設計大獎。2010年6月,為了支持 iPhone4 的視網膜屏幕,Omni 集團重新設計了界面和應用圖標。這款應用最大的變化之一是在2011年6月增加了預測模式。導航條下方光滑的日期選擇器成為了一個定義用戶界面的元素,直到2013年為了 iOS7 而重新設計并放棄了光澤質感。新的扁平界面很大程度上依賴于文本顏色來感知層級關系。
2015年春季的更新給 Thines 的 iPhone 版本換上了一個深色的應用圖標,圖標中的圖形拐角也變得更加柔和。自2012年以來,每個圖標都包含一個彩蛋,即使是老用戶也可能不知道。把圖標放大,才會注意到原來圖標中的紋理實際上是由微小重復的 Omni 標志組成的。
最近一次重大更新是在5月份發布的 OmniFocus 3.0。雖然許多更改都與功能邏輯相關,但大標題和對 iPhone X 的優化仍然使得 UI 煥然一新。
5. Evernote
Evernote 的風格迭代完美地展現了2008年以來的許多主要軟件的設計趨勢。在 App Store 推出之前,這款筆記記錄和組織工具最初是作為桌面應用開發的,在 iPhone 上發布之前,它已經用上了其標志性的大象 logo。
與許多早期的 iPhone 應用一樣,Evernote 1.0 非常依賴于 iPhone 的 UIKit 和寫實的圖標。2011年的版本重新設計了標簽欄,并將按時間順序對「所有筆記」視圖進行了優化。當 Evernote 在2012年增加對 iPhone 5 更大屏幕的支持時,應用仍然使用默認的 iOS UI 元素。導航條和按鈕自動讀取 iOS 6的 UI 組件。
2012年11月,Evernote 5發布。這款應用從頭開始重新設計,是那個時代典型的紋理豐富、主題鮮明的設計范例。浮雕圖標,紙張紋理和陰影賦予了應用的空間感。應用的圖標去掉了過時的光澤質感,但保留了金屬光澤。
在一篇博文中,Evernote 說:「我們通常不會進行全盤的重新設計。事實上,至少每隔幾年才會發生一次。」雖然他們當時并不知道,僅在一年后的2013年 WWDC 上發布了 iOS7 時,Evernote 就在重新設計了。之后的 Evernote 5 也獲得了蘋果設計大獎。
Evernote 完全擁抱 iOS 7 的設計趨勢。每個紋理、陰影和斜角都被替換。一個亮色的從左到右的漸變條在應用在導航條上,與新的文本圖標上使用的顏色相匹配。2017年早些時候的一次更新使設計更加柔和,有了一個更柔和的圖標、淺色導航條、帶有微妙陰影的便簽卡和一個黑色的標簽條。字體和標簽欄圖標也同步進行了更新。
6. eBay
eBay 的設計可以說是這篇文章10個應用中最引人注目的一個。 盡管蘋果公司在 WWDC 2008大會上強調了它,但與今天的精致體驗相比,原始版本的 eBay for iPhone 是做的非常粗糙的。 到2009年11月,整個應用已經重新考慮了更加一致的灰色用戶界面。
一年后的 eBay 2.0 為未來幾年如何設計這款應用奠定了基礎。盡管 eBay 此前曾推出過一款獨立的銷售應用,但現在這一功能已經融入了主流體驗。這款應用的主界面也得到了更新,最終讓人覺得它是一個真正的 iOS 設計。
在2013年的幾次更新中,eBay 在保持基本用戶體驗的同時,也創造了新的用戶體驗。每一個變化都反映了這個時代快速發展的軟件設計品味。這一持續不斷的迭代意味著,在為 iOS 7 重新設計該應用時,eBay 的面貌發生了相當平穩的轉變。使用熟悉的配色和導航層次結構有助于保存用戶的記憶。
2015年9月,eBay 4.0 打破了固有設計模式。應用的大部分功能都放在漢堡菜單里,在最上面只剩下三個標簽:「活動、購物、銷售」,但這個設計沒有持續太長時間。到2016年5月,eBay 幾乎完全恢復了應用的組織結構,如今的布局與2010年推出的設計更接近了。
7. Twitterrific
在 App Store 發布之前,Craig Hockenberry 和 The Iconfactory 就已經為 iPhone 構建了第一個 Twitter 客戶端。 得益于蘋果發燒友社區開發的越獄軟件,開發者們在蘋果提供官方工具的時候就已經有了幾個月的應用編寫經驗。
Twitterrific 1.0 從越獄版本借鑒了不少設計元素,從普通用戶看來,它非常光彩照人。它在2008年獲得了蘋果設計獎,Twitterrific 也是首批使用深色主題的應用之一,這種風格在今天看來也很受歡迎。但 Twitterrific 的設計迭代更多地反映了 Twitter 作為一種服務的歷史,而并非設計趨勢,每次更新都反映了 Twitter 平臺的特性和功能的變化。在早期,這些特征通常是需要第三方自己去創新的。
2012年,Twitterrific 5.0 將所有導航都移動到界面頂部,并使用完全定制的 UI元素,類似的布局一直延續到今天。就像這款應用的設計一樣吸引人的是它的圖標。除了是第一個使用鳥類圖標的 Twitter 應用之外,Twitterrific 也是為數不多的幾個 iOS 應用之一,這些應用在保留了豐富細節圖標的同時看起來也更現代。這款應用的吉祥物奧利(Ollie)在升級到 iOS 7 的過程中幾乎沒怎么變過,現在看起來還是和2012年一樣新鮮。
8. Instapaper
一款專為閱讀而設計的應用將內容置于 chrome 之上,因此 Instapaper 的設計從一開始就很自然地受到限制。事實上,一些最明顯的視覺變化來自 iOS 本身的改變。iOS 6 和7都改變了導航條和按鈕樣式,給了應用兩個「免費」的視覺更新。
當然,要說這款應用沒有進化,也是不大準確的。Instapaper 最初是在應用商店作為免費下載開始的。不久之后,一個名為 Instapaper Pro 的付費版本發布了。2011年秋季推出了由 Dribbble 聯合創始人 Dan Cedarholm 設計的一個新圖標,大大改善了閱讀體驗和更深層次的 UI元素。這個圖標后來出現在 WWDC 的一個關于偉大圖片的 PPT 上。
2013年4月,Betaworks 從創始人 Marco Arment 手中收購 Instapaper,讓這款應用走上了一條不同的道路。 Betaworks 指導下的第一次重大更新于2013年9月發布,恰逢 iOS 7 更新。 Pinterest 于2016年8月收購了 Instapaper,當時該公司承諾這款應用將繼續更新。 在目前的所有權下,即使在支持 iPhone X 的超級視網膜屏的更新后,Instapaper 也保持了相當一致的視覺效果。
9. PCalc
PCalc 的故事開始于應用商店推出前的十多年。開發者 James Thomson 在1992年發布了 Mac 的初始版本,它的發展一直延續到今天。PCalc 從一開始就在 iOS 上推出了一個完全定制的界面,提供了越來越多的主題選擇和定制選項。這里有太多能強調的地方,所以我打算只選擇幾個里程碑來說明。
iPhone 的第一個 PCalc 版本是從 Mac dashboard 的一個小部件移植過來的,但是與經典的 iPhone UI 能很好地結合在了一起。帶高光的按鈕和深藍色的 LCD 面板與應用的圖標相匹配。2008年12月,一個名為 Twilight 的熱門主題被添加進了 PCalc 中,有點類似于 iOS 默認的計算器應用。直到現在,它仍然是應用程序中的一個選項。
PCalc 采用了名為「Samurai」的新默認主題和匹配圖標,適應了 iOS 7 的扁平風格。 應用程序設置中仍然提供一些比較經典的主題。 PCalc 的圖標在2016年3月再次更新。自 iOS 10.3 發布以來,Apple 已允許第三方應用程序動態更改其應用程序圖標,而無需向商店提交新版本。 PCalc 于2017年5月開始充分利用該功能,推出了各種各樣的備用圖標供您選擇, 在后續更新中也添加了更多內容。
經過10年的發展,PCalc 已經突破了 iPhone 計算器應用的實際限制,最近的更新已經享受到了一些具有創新性的自由,比如 AR 計算器模式。支持 iPhone X 的展示給 Samurai 主題增添了圓角。
10. Yelp
和 Facebook 一樣,Yelp 的 iPhone 版本界面多年來也發生了很大的變化,但由于使用了一致的導航欄顏色,它的品牌標識仍然可以辨認。由于與蘋果地圖的深度融合,這款應用越來越受歡迎。
2009年8月,Yelp 將一個基本的增強現實界面應用在 iPhone 版本中,用于定位周圍的企業。 雖然它當時只是一個新奇的東西,但鑒于 ARKit 應用程序的興起,這一功能在今天看來是具有先見之明的。
2010年1月,在新的 Yelp 主頁上推出了9宮格形式的快捷圖標。同樣的基本界面在風格上得到了完善,直到整個應用在2013年10月進行了重新設計,使得外觀更扁平,也更突出「附近」標簽。
Yelp 的最新更新通過顯示與你相關的內容,豐富了簡單基于位置的結果。 這種通過綜合處理信息發現的方法是用戶體驗設計的趨勢,在 iOS 11 重新設計的 App Store 中取得了巨大成功。
二、圖標
對比所有10個重點提到的應用圖標迭代,揭示了各自選擇的獨特的現代化路徑。在過去的十年里,一些圖標保持了相當的一致性,只有微小的改變,而另一些則每隔幾年重新設計一次。從時間線上來看,全行業都在緊跟設計趨勢變得愈發明顯。
在 App Store 剛推出時,有光澤質感的圖標統治著這片土地。圖標在默認情況下就應用了光澤,開發人員必須在 Xcode 中專門禁用該效果才能將其刪除。 隨著 iOS 應用的成熟,大多數應用最終去掉了光澤并采用了非常明確的個性化設計。
眾所周知,iOS 7 重新定義了一個好圖標的標準。與蘋果的新圖標集一起,高質感和 3D渲染的作品通常看起來不太合適,有些與更新后的圓角半徑發生了沖突。隨著設計師和開發人員逐漸為圖標設計制定新的規范,細節和更加克制的顏色慢慢地回到了許多圖標中。
三、個性
早期的 iPhone 應用一頭扎進一個未知的世界。 除了蘋果公司自己的內置應用外,應用的外觀和工作方式沒有既定的規范,設計師和開發人員可以完全自由地進行實驗。
盡管如此,當用戶和開發人員手把手地學習最佳實踐時,許多早期的應用看上去和感覺上都非常相似。早期的反饋、嘗試和錯誤迅速塑造了每個應用的發展過程。幾年之內,大多數應用程序都找到了自己的定位,并發展出了獨特的風格和個性。隨著硬件性能的提高,設計差異化逐漸從靜態圖形轉向動態圖形和動態界面。
在 iOS 7 引入的同質化界面指導原則讓設計師和開發人員從頭開始設計,許多應用開始重視用戶體驗,而不僅是視覺。周到的信息綜合處理和預測性信息設計通常被用來幫助展示新的和有趣的內容,否則這些內容可能會被忽視。智能工作流簡化了常見的操作,幫助減少完成任務的時間。優秀設計的重要性超越了視覺層面,這導致了近年來用戶體驗設計的盛行。
四、下一個10年
在2008年,那時還無法準確預測 App Store 的發展方式。改革源于創新,iPhone 用戶的品味和習慣塑造了開發者選擇開發的應用類型。同樣的道理也適用于未來,即將發布的 iphone 和 iOS 新版本肯定會以不可預見的方式改變應用的格局。一種新的設計趨勢明天可能席卷全球。即使是在10年后,未來仍然是令人興奮的。
原文鏈接:《10 years of the App Store: The design evolution of the earliest apps》??Michael Steeber
歡迎關注譯者的微信公眾號:「?彩云譯設計」
圖片素材作者:Al Shostko
「2018年的設計趨勢」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 7 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓