開創新局必先檢視過往
今年正逢APP Store上線十週年的紀念，這十年間智慧手機搭配APP的運用，大大改變你我周遭的生活與工作模式，我們已經非常習慣用APP來和朋友傳訊息、查資料、遠端工作、餐廳訂位、線上購物等日常活動，數位網路已無時無刻與我們的生活緊密結合，WIFI甚至是空氣、陽光、水之外的第四樣生命維持必須物，當然面對使用手機習慣如此大的轉變，APP的操作介面也有不小的演進，透過9to5mac這篇文章帶你回顧幾個經典APP的UI介面與Icon是如何歷經不同時代趨勢，進行自身設計的演化，就讓我們一起看下去...
iTunes Remote
首先談到的 Remote 是一款元老級的音樂播放軟體，可以透過WIFI連線遠端遙控 Mac 或 Apple TV 裡的 iTunes資料庫來播放音樂。打從一開始, Remote 1.0 的介面設計就深受 iPod 上的音樂播放 app (現在改名稱為 Music )影響很大，事實上若仔細比較兩者的操作介面根本完全相同。但在 Remote 2.0 (2010) 時由 Louie Mantia 操刀為 icon 注入新的風貌。而這兩個 app 介面設計也開始在 iOS 6 上產生分歧, Remote 開始在UI細節上下足了功夫，不但在按鈕上增添了細緻的金屬質感，可以配合手機的移動產生不同視角的光源反射，但播放控制列維持原樣沒有變動。之後的 Remote 3.0 icon (2012) 則是配合 iTunes 11 的新風格做了背景光源發散的細節調整。
進入了 iOS7 (2013)時代的 Remote 4.0版首次迎來了介面設計上的重大變化。與攣生兄弟 Music app 主推的白色明亮主題風格相異, Remote 的視覺主題則採用暗黑色系, 讓專輯背景融入高斯模糊效果，並會配合其專輯圖片顏色調整歌曲名稱列的色彩。來到2016 年, 蘋果公司推出第四代 Apple TV，並在其內建了了新一代的 Apple TV Remote APP, 意圖是想取代過往的 Remote。但隔沒多久 Remote 也重新改名為 iTunes Remote 發佈。雖然該 app 可持續在 store 上下載，但再也沒傳聞下一版本的開發進度了。直到2018年6月蘋果公司配合旗下的 iPhone X 為 iTunes Remote 重新設計了icon 及操作介面。
這次 iTunes Remote 的更新回歸到較為保守的外觀，放棄了大區塊的歌曲名稱和專輯圖片顯示，轉而採用傳統的導覽方式，讓人想起當年 iOS 11 上的音樂app樣式。新版的iTunes Remote icon 則簡化一整片藍色來匹配新的 Flat 風格。
與 iTunes Remote 的設計演化相比，Facebook 在過去十年中不斷重新設計介面的次數頻繁許多。要說起Facebook的UI設計演變用完整篇文章篇幅也說不完，所以下面將列舉其中幾個重要的變化來說明。
Facebook 在 iPhone 上的挑戰遠從 App Store 面世之前就開始了。該服務最早於2007年10月就作為 iPhone 內建的網路APP之一。但除了經典的藍色企業色之外，1.0版(2008/06)的 icon 幾乎看不出來是 Facebook，也缺少著名的白色“f”。該 APP 的UI設計邏輯就是由畫面下方的導覽列來切換五項主要功能：主頁，個人資料，朋友，聊天和收件匣。三個月後推出的2.0版(2008/09)保持相同的設計概念，只在上方主標題列下新加了兩層頁籤導覽。
Facebook 3.0 則於2009年7月發布，並推出了九宮格式的選單陳列，來提升 app 的功能切換效率。由早期的螢幕截圖也顯示了一個完全藍色的平舖網格，但這項設計從未在APP的正式版本中出現。
2011年10月，Facebook 4.0版(2012)首度採用“ 漢堡選單 (hamburger menu) ” 最為選單icon樣式。隨著 Facebook 越來越受廣大使用者喜愛，直接影響了接下來的幾年中無數 APP 與網站中相爭採用這項有爭議的設計樣式。而在第4版之後，Facebook 的設計更新時程也變得更為積極。APP 的UI外觀開始快速地迭代，並且通常是小幅度的更新而不是常見的大改版。
2013年4月，Facebook 在iOS APP 中嘗試了啟用“ 聊天頭像 ”功能，讓畫面上可移動的個人資料照片在點擊時展開為聊天視窗。並且因應 iOS 7(2013)的新介面風格，Facebook UI 也需要進行重新設計，重新加回了下方用於切換功能的標籤列。而標籤列中的圖標外型也不定時會重新設計。
細數 Facebook 的一些設計挑戰是來自其龐大的運營規模。與許多小型 APP 應用程式不同的是，Facebook 必須在不同的平台上為其使用者提供一致的操作體驗。在2017年8月的更新版本中嘗試統一 iOS，Android 和網頁版本上的動態牆設計，讓其留言框樣式看起來更像另一通訊軟體 "Messenger" 的對話樣式。
Evernote
Evernote的介面設計演變完美地點出了自2008年以來許多主流APP的設計趨勢。這項為廣大民眾提供線上筆記服務最早是由桌面應用程式起家，決定在App Store上架之前，公司嘗試更改LOGO識別為大象符號並且沿用至今。
像許多早期的iPhone apps一樣，Evernote 1.0版介面大量採用公版的UIKit設計元素及帶點反光樣式的icon。在2011年則重新更改了主頁及下方標籤列設計，主頁顯示設計以最新的文章排列為主。當iPhone 5在2012年推出加大的螢幕規格時，Evernote也順勢改變程式介面為流行的iOS UI樣式，去除下方的導覽列及按鈕，連同icon設計也是那時流行的iOS 6的霧面光澤風格。
2012年11月，Evernote推出了5.0版，大幅翻新舊有的介面設計，將上方功能列的LOGO改為浮雕樣式，並增加仿紙紋理與陰影來增添視覺層次。而APP的icon則去除了舊式的反光外觀，但象頭依舊保留了拉絲金屬質感。介面設計的革新讓他們在隔年的WWDC大會上得到Apple Design獎項的殊榮。
隨著 iOS7(2013) 的問世，Evernote也隨即展開下一版本的開發，他們大幅採用 iOS7 所帶來的創新Flast扁平化設計風格，之前的紋理，陰影和斜角樣式皆被替換掉。上方的導覽列改由一個明亮的從左到右漸層色，並搭配新的扁平化LOGO樣式。
隨著扁平化設計持續影響設計界趨勢下，2017年的Evernote讓版面設計更加的簡潔，上方導覽列不但去除了頗具代表性的綠色，連同LOGO也消失無蹤，但可注意到文章的卡片設計上有微妙的陰影來強調立體感，在隔年(2018)的版面設計也針對排版和卡片內容呈現做了更進一步改良。
未完待續 To be continued...
原文網址：9to5mac.com