04 music youtube pc app設計(App Stroe的10年設計進化之路)

时间:2024-04-28 03:24:37 编辑: 来源:

出現了分歧,當時音樂應用完全重新設計并設置了一個音量滑塊,可以動態響應你在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使用藍色來匹配更新的圖標,而不是再是原來的深色色系。

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上有一段視頻是介紹這個功能的,感興趣的可以看看(買粉絲s://9to5mac.買粉絲/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對話。

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獲得了蘋果設計大獎。

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煥然一新。

Evernote

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

與許多早期的iPhone應用一樣,Evernote 1.0非常依賴于iPhone的UIKit和寫實的圖標。2011年的版本重新設計了標簽欄,并將按時間順序對“所有筆記”視圖進行了優化。當Evernote在2012年增加對iPhone 5更大屏幕的支持時,應用仍然使用默認的iOS UI元素。導航條和按鈕自動讀取ios6的UI組件。

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

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

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

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年推出的設計更接近了。

Twitterrific

在App Store發布之前,Craig Hockenberry和The I買粉絲nfactory就已經為iPhone構建了第一個Twitter客戶端。 得益于蘋果發燒友社區開發的越獄軟件,開發者們在蘋果提供官方工具的時候就已經有了幾個月的應用編寫。

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

Instapaper

一款專為閱讀而設計的應用將內容置于chrome之上,因此Instapaper的設計從一開始就很自然地受到限制。事實上,一些最明顯的視覺變化來自iOS本身的改變。iOS 6和7都改變了導航條和按鈕樣式,給了應用兩個“免費”的視覺更新。

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

2013年4月,Betaworks從創始人Mar買粉絲 Arment手中收購Instapaper,讓這款應用走上了一條不同的道路。 Betaworks指導下的第一次重大更新于2013年9月發布,恰逢iOS 7更新。 Pinterest于2016年8月收購了Instapaper,當時該公司承諾這款應用將繼續更新。 在目前的所有權下,即使在支持iPhone X的超級視網膜屏的更新后,Instapaper也保持了相當一致的視覺效果。

PCalc

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

<

搜索关键词: