xuedesign logo

開始設計工作室 Xuedesign Studio

開始設計工作室 xuedesign studio

回顧APP Store 十年設計演進 Part2

AppleAPP 設計UI 設計
*

Elmo Woo
Mar 7, 2019

前情提要

2018年正逢APP Store上線十週年的紀念,前一篇帶你回顧了幾個經典APP,如Facebook、Evernote等等的UI介面與Icon是如何歷經不同時代趨勢,進行自身設計的演化,下篇我將另外頗析另外幾個經典的APP,就讓我們一起看下去...

10 years of the App Store: The design evolution of the earliest apps
原文標題:10 years of the App Store: The design evolution of the earliest apps

eBay

*
歷年eBay UI樣貌

eBay這款線上交易平台,或許在臺灣並不是那麼的熱門,但在國外可是風靡許久,同時它的UI設計可以說是目前介紹的APP中前後轉變最大的一款。

首先是在2008年的WWDC舞台上eBay已被蘋果公司列為重點APP之一當時的介面設計與今時的細緻版面相比陽春許多,主要是以企業代表的黃色系為設計主軸,功能上也僅提供查詢商品資料而已。

到2009年11月,eBay推出1.5版時,整個APP介面則重新設計為了的鐵灰色用戶界面。

隔年,eBay 2.0的推出則奠定了未來eBay APP主要功能架構。他們把金流功能整合進2.0版之中,讓用戶可在APP中進行交易。

而APP的首頁設計也跟著轉變,變得更像一個真正的原生iOS設計。

*
歷年eBay icon演進

來到了2013年,eBay又重新優化了首頁的設計,但大多維持了與2.0版相同的用戶體驗。但每一次設計上的變化,皆反映了當時那個世代益發成熟的UI設計品味。

比如像2013下半年,iOS 7所引領的平面化設計潮流興起時,eBay的外觀就轉換得相當順暢。維持著主色系與導覽層次結構不變,有助於保持用戶的肌肉記憶,但在細節部分則融入更多Flat Design的精神。

2015年9月eBay版本來到了4.0, 又一舉革新之前的介面模式。把大多數選單功能整合進漢堡選單圖示之內,只留下三個主要功能"活動新訊、產品瀏覽及購物車"於頁面頂端。但這樣憑藉鮮明的圖文搭配介面,彷彿部落格的設計則沒有持續很長時間。

隔年2016年的5月,eBay就又恢復之前以商品為主的視覺呈現。直至今日的APP佈局與2010年推出的設計又更加的呼應。

Instapaper

*
歷年Instapaper UI樣貌

Instapaper我之前也嘗試使用一陣子,比較這一類稍後閱讀的APP來說,Instapaper的使用體驗算是相當的不錯。

以它這樣一個專為行動裝置上閱讀而生的APP來說,其優先考慮的功能內容並不用像Chrome那樣多元,因此Instapaper的UI設計從一開始就鮮少有重大的改變。

然而由於iOS本身介面風格的變化,歷年Instapaper最明顯的視覺變化。就是導覽欄和按鈕樣式在iOS 6和7中都進行了變更,整體介面僅保留了兩個按鈕來進行文章排列的變化。

2011年秋季,Instapaper採用由Dribbble聯合創始人Dan Cedarholm設計的新icon。新icon更被收錄在該年度的WWDC會議上展示。

*
歷年Instapaper icon演進

在2013年4月,Betaworks公司從創始人Marco Arment 手中收購 Instapaper。由Betaworks主導下的第一次重大更新於2013年9月發布的iOS 7系統上。

之後Pinterest又於2016年8月收購了 Instapaper,當時Pinterest承諾Instapaper將繼續存在。現今即使在iPhone X的Super Retina螢幕下,Instapaper也保持了相當一致美觀的視覺效果。

Icons的設計演進

*
歷年APP icon演進

比較目前五個介紹過的APP icon可以看出各家呼應時代變化的路徑有所不同。在過去十年中,有些icon保持相當的一致性,只進行了細微的改造,而其他icon每隔幾年就重新設計一次。若按時間順序排列,不同類別行業的設計趨勢就變得一目瞭然。

在App Store剛推出時,icon上方有一圈光澤的樣式占了大多數。這是在App Store上架時的預設icon效果,開發人員必須在Xcode中特地去關閉該效果才能將其刪除。隨著iOS APP的設計成熟,大多數人最終還是放棄了光澤樣式,並採用了更詳細的自定義設計。

而隨著iOS 7引領新的設計風格面世。上個世代常用的高度紋理化和3D渲染元素在Apple的新icon排列上顯得突兀,有些則是與重新制定的圓角半徑尺寸發生衝突。然而隨著設計師和開發人員逐漸熟悉新的icon設計指南規範,才使得icon可以融入更多設計細節。

Icons的設計風格

*
歷年APP icon演進

在早期開發iPhone一個APP彷彿是進入一個未知的世界。除了蘋果公司自己內部開發的APP外,其他設計師或是開發人員完全沒有一套準則可以依循,卻也給予他們在APP icon與UI設計上有更多可能性的產生。

話雖如此,許多早期的APP看起來感覺仍然非常相似,只因為設計和開發人員都還在摸索學習的階段。大多依賴早期的使用者反饋和自我試驗來影響決定每個APP的發展方式

在幾年後,大多APP開發者找到了自己的設計方向,進而開發出獨特的風格和個性。隨著iPhone硬體功能精進,各個APP設計便逐漸從初始的靜態圖形界面,轉變為擁有豐富動畫的動態界面。

在iOS 7推出一套APP界面準則規範後,許多APP開始藉由使用者體驗來達到差異化,而不再只是視覺上作文章。開發者會使用設計良好的動線規劃和訊息呈現來表現出新穎的和有趣的內容,反之使用體驗差的APP就可能得不到使用者青睞。

AI的自動化技術興起程則簡化了常見的操作流程,幫助用戶減少完成操作的時間。這樣有別於視覺設計而轉向注重使用者操作體驗的改變,直接影響了用戶體驗(UX)這項技術討論聲浪越來越響亮。

下一個十年

我們在2008年時,根本無法預料App Store的生態圈會有如此龐大的成長。而iPhone用戶的生活品味和操作習慣,更是直接影響了現代開發人員選擇開方APP的方向命題。我們可以大膽的預測,往後推出的iPhone和iOS版本肯定會以更不可預料的的方式改變整個APP開發未來。

總是會有一個新的設計趨勢席捲全球視野,下一個10年,令人期待又興奮。

原文出處:9to5mac.com