進化或是被淘汰——iOS app 設計師的暑假作業

蘋果發表 iOS 7 至今已經過了一個月,各位設計師們想好如何調整、翻新,甚至重新打造自己的 app 了嗎?
評論
評論

蘋果發表 iOS 7 至今已經過了一個月,各位設計師們想好如何調整、翻新,甚至重新打造自己的 app 了嗎?

設計師 Max Rudberg 藉由他們自己正在開發的新 app 以及為 Filibaba 修改旗下數款 app 的經驗,將每一處細節重新審視一番,於部落格寫了一篇文章 〈 How you should look in iOS 7 〉 提供大家參考 1

他告訴大家,首先要做的就是 先剝去細節 ,最重要的還是 app 中每個元件的核心,從字型、圖像到 UI 等元素都要顧到。

Icon 未必需要大改

icon 設計 大概是 iOS 7 最具爭議性的部份之一 。Max Rudberg 觀察到,iOS 7 內建的 app 其圓角 icon 幾乎沒有什麼妝點,沒有反光效果、沒有立體效果,所以他把自家 app 做了一點修改,去掉陰影、icon 周圍的立體感和稍微複雜的裝飾(凹槽、水滴等),保留了 app 最重要的蔬果元素,但他並未將番茄和胡蘿蔔「打扁」。


圖片來源:How you should look in iOS 7

轉場效果

iOS 7 打開 app 後的轉場效果不同於 iOS 6,使用者於 iOS 6 開啟 app 時,啟動畫面是從中心開始出現,iOS 7 則是採 zoom in 的方式,因此 Max Rudberg 認為,如果將 icon 的底色設計得跟 app 啟動後第一張靜止的圖片相同,那麼在開啟 app 的轉換過程中會感覺更加順暢。

這個部分比較不容易用文字表達,可能要親自使用過 iOS 7 的人會比較清楚,或是參考蘋果的 iOS 7 介紹影片(2 分 19 秒處):

扁平化的按鈕

雖然說大家很常用「扁平化」形容 iOS 7 的轉變,但 Max Rudberg 並不覺得有必要將 app 去掉全部的個性並且變得完全扁平化。以按鈕來說,也不用靠著強烈的漸層或陰影來告訴大家這是個按鈕。事實上,iOS 7 的導覽列上已經沒有按鈕,只剩文字或符號了,如要看起來夠顯眼,在顏色的挑選上就變得很重要。

只用圖示也行

如同前面說的,iOS 7 的 app 不再需要有按鈕的形狀或框線,憑著文字和符號本身就足以讓使用者明白那是可以點擊的。換言之,無論是文字或符號,必須更加審慎地去處理,以免使用者混淆。


圖片來源:How you should look in iOS 7

使用一點淡淡的陰影

iOS 7 不再使用陰影(home screen 上的 app icon 與 app 名稱底下都沒有陰影了),所以我們不必用太誇張的陰影就可以讓元件脫穎而出。


圖片來源:How you should look in iOS 7

還是可以使用紋理

如同 Max Rudberg 提過的,設計師不必直接抹去 app 的個性,紋理或材質還是可以使用,只是一定要恰到好處,可以感受的到,卻又不容易被看見。(這點我想 國內團隊開發的 POP 可以做為參考)

避免用蝕刻或陰影去裝飾文字

以 Max Rudberg 的 Veggie Meals 為例,他是用漸層的方式去凸顯照片下方的文字,使之清晰可見。這樣的手法我們在 Facebook app 也可以看得到。


圖片來源:How you should look in iOS 7

善用視網膜螢幕的優點

蘋果推出視網膜螢幕(Retina Display)已經有三年了,iOS 7 開始全面改為針對這樣的高解析度螢幕做設計,有些細微的調整都只有 1px 程度,甚至大膽使用髮絲般細的分隔線。

真實一點

不要再假裝螢幕是有圓角的了,讓導覽列變回矩形並與狀態列融合在一起吧,iOS 7 會讓內容延伸到導覽列與狀態列的下方(而不是消失),而且有時候你其實不需要導覽列,所以就放膽地讓整個畫面合而為一吧,或是某個畫面有導覽列,另一個不放也沒關係。

全螢幕

讓一些像是照片或圖片的元素觸及螢幕的邊緣吧,請明白 iPhone 已經有硬體的邊框了。

對比

iOS 7 到處都是對比,例如內建的指南針 app,請考慮元件與背景間的對比關係。

無需擬物的時候就別強求

Apple 自製的「Find My Friends」是絕佳的反例,「找朋友」用不到皮革與逢線的擬物介面。然而當我們有需求的時候,比如說 Filibaba 這個 app 有一個蛋形計時器,使用者知道這東西跟現實世界的東西功能相同,自然明白如何使用。(我們在這邊先不細談擬物介面的設計問題。)


圖片來源:How you should look in iOS 7

圖片來源:amazon

不僅 Max Rudberg,另一位作品得過 Apple Design Award 的 Jeremy Olsen 亦寫了一篇文章 〈 Responding to iOS 7 〉2 分享。

他說自己當初也被新版 iOS 7 嚇得目瞪口呆。


來源:Hossam Hassan

儘管一開始他對新設計充滿恐懼,卻也不希望自己太快去評斷,所以決定給自己一點時間去試試看。過一陣子之後,他發現自己其實還喜歡的,考量到蘋果只花了幾個月就弄出一套作業系統,而他們開發者要花上一年才能推出一款 app,所以放過蘋果讓他們喘口氣吧。


Jeremy Olsen 團隊重新設計的「Hours」(來源:Responding to iOS 7

進化,或者被淘汰

當然,iOS 7 的設計有人喜歡,有人不愛。但我們還是得認清一個事實——越是遵守 蘋果人機介面互動指南、越是運用蘋果力推的開發技術、越是貼近蘋果設計理念的 app,往往最有機會在 App Store 上獲得蘋果的推薦,這背後代表的意義就是下載數——和收入,這點即便是放在 Android 或 Windows 平台也是一樣的。(好吧,後者可能會跪求厲害的 app 幫忙開發 Windows Phone 版本) 繼續堅守過去的風格只會讓自己的 app 顯得過時,因此我很期待像 Tweetbot 這樣設計精良、精神卻與 iOS 7 相去甚遠的 app 會做出什麼樣的改變。

擁抱 iOS 7 的設計哲學,但關鍵還是在於創新

Jeremy Olsen 指出,要贏得蘋果的目光不能只靠套用預設介面,或是一味模仿蘋果自己的 app。如果只是弄個像 iOS 內建行事曆介面的 app 鐵定會令人覺得無趣。蘋果很清楚多樣化的風格正是 App Store 的強項,他們不會希望這一點因 iOS 7 而改變。因此,開發者必須用獨特的方式去呈現出蘋果的設計原則,以成為這個平台上最卓越的 app,這點我們可以從每年的 APple Design Award 觀察出來,例如今年的得獎作品之一 Evernote 與 Yahoo! 天氣 app,他們在介面設計上與 iOS 預設的 app 風格幾乎完全不同,依舊獲得蘋果官方的賞識 ,Yahoo! 天氣 app 還直接被蘋果「參考」了 XD

其實,目前已經有幾款 app 或許可以為我們帶來啟發,例如前蘋果員工、「下拉更新」手勢發明人,對於畫面捲動流暢度特別有一套的 Loren Brichter3,他的 Letterpress 與追求設計的音樂串流服務 Rdio,他們的 app 不追求擬物,也不是只把介面整個打扁而已。前者在設計之初即掌握了潮流,並且創造了獨特的遊戲風格,也因為這個 app 在上個月 WWDC 獲頒自己的第二座 Apple Design Award(前一次是 2009 年名滿天下的 Tweetie);後者的設計雖然還有一些 UI 上的環節待改善,但同樣擁有自己的特色,而且使用者的滿意度相當高,五月改版後恰巧變得頗貼近 iOS 7 的設計。


左為 Letterpress,右為 Rdio。

除此之外,網路上現在還有「iOS 7 App Redesigns」這樣的部落格 4,展示一些設計師對於知名 app 如 Facebook、Skype、WhatsApp、Instagram、Tumblr、Vine 等等在 iOS 7 應該長什麼樣子的想法。


圖片來源:iOS 7 App Redesigns

無論您喜歡 iOS 7 也好,厭惡也罷,曾任職於 GowallaInstagram,現在在 Facebook5 的比利時藉設計師 Tim Van Damme 在 Twitter 上說過:

Doesn't matter whether you love or hate the iOS redesign. You're a designer, your job is to make sure your app feels native.

不管你喜不喜歡重新設計的 iOS(指 iOS 7),你都是個設計師,你的任務就是確保 app 尚青、尚天然 讓人有渾然天成的感覺。

http://twitter.com/maxvoltar/status/344171740987015170
然而,不喜歡 iOS 7 的設計師們別難過,正式版推出前都還有機會,最近釋出的 iOS 7 beta 3 就出現了一個頗為驚人的變化——蘋果竟然 將系統字型從 Helvatica Neue Light 換成 Helvetica Neue(regular)。Tumblr 共同創辦人、知名獨立開發者 Marco Arment 以過去蘋果內部討論曾引用自己的文章為例 6,認為現在大家要做的就是持續發出噪音 7,否則等到正式版推出,那才真的太遲了。

Jeremy Olsen 說他已經跟幾位蘋果內部的人聊過,他們很清楚 iOS 7 是未完成品,需要大家將感想回饋給他們。Jeremy Olsen 甚至說大家有什麼想法可以 寄 E-mail 給他,他再代為轉交。

所以,如果你不喜歡新版的「分享」圖示或是令人誤解的解鎖畫面,趕快反應吧。


(Phill Ryu 是知名代辦事項 app「Clear」設計師)

最後,各位 app 設計師,請把握「暑假」的時間,思考如何讓自己的 app 與 iOS 7 更加契合,秋天一到,或許就是您豐收的時候。(記得預留送審時間,iOS 6 正式版是去年台灣時間 9 月 20 日推出)


  1. How you should look in iOS 7
  2. Responding to iOS 7
  3. 工程背景的 Loren Britcher 過去在蘋果任職於行動圖形與影像團隊,負責 driver 層級,即軟硬體溝通介面之間較高階的部分如 OpenGL 和 Core Animation,以及處理硬體和圖像表現的一些問題,並且花了很多工作以外的時間去鑽研 Cover Flow、Page Curl 和相機鏡頭開啟的動畫效果,因此非常清楚技術上的種種限制。Loren Britcher 也是少數同時擅長撰寫程式與設計 UI 的開發者,他前一陣子  被 Mike Matas 找去加入 Facebook 的團隊
  4. iOS 7 App Redesigns
  5. 這裡有個小故事,Tim Van Damme 不願意去 Facebook 工作(Gowalla 2011 年時被 Facebook 收購)而改加入 Instagram(他參與了 Instagram 後來的介面改版設計),後來結果大家都知道,四個多月之後 Facebook 也買下 Instagram,這回 Tim Van Damme 沒跑掉 XD
  6. A Thicker Hope
  7. Effecting Change From The Outside

一站串聯智造全環節,Intelligent Asia系列展12/15-18南港雙館登場

年度最大智慧製造實體展覽會「Intelligent Asia 亞洲工業 4.0 暨智慧製造系列展」結合七大工業展,匯集一千多家參展商、超過四千個攤位,展出從製造端到應用端所需之軟硬體設備與整合系統,提供業者改善製程及提升產品附加價值的轉型升級策略。 
評論
評論

隨著國內疫苗覆蓋率逐漸上升,台灣在亞洲地區疫情相對穩定,頻獲轉單效益,在晶片及零組件供應鏈緊繃之下,報價及毛利表現上揚,從而提升廠商投資及擴產的意願。

為提供國內製造業者一站式採購及交流平台,年度最大智慧製造實體展覽會「Intelligent Asia 亞洲工業 4.0 暨智慧製造系列展」將於 12/15-12/18 日在台北南港展覽館一、二館隆重登場!結合「台北國際自動化工業大展」、「台灣機器人與智慧自動化展」、「台北國際物流暨物聯網展」、「台北國際冷鏈科技展」、「台北國際模具暨智慧成型設備展」、「台灣 3D 列印暨積層製造設備展」、「台灣國際雷射展」等七大工業展,匯集一千多家參展商、超過四千個攤位,展出從製造端到應用端所需之軟硬體設備與整合系統,提供業者改善製程及提升產品附加價值的轉型升級策略。

智慧製造全環節 從設計、生產到出貨一展打通

今年系列展以「智慧製造全環節」為主軸,展示從生產至配送的完整流程。3D列印展參展商如揚明光學(3504)、馬路、實威(8416)、元力智庫、三帝瑪、天馬科技、通業技研、三緯、新光合纖(1409)、溢井等,提供研究及開發不可或缺的精密積層製造與掃描機台,同時滿足自造者的設備及耗材需求;模具展集結鉝太、科盛、台灣中澤、梧濟、徠通、台灣日立金屬、海納川、和勤精機(1586)等參展商,展出「T 零量產」概念下的先進模具製造、智慧成型周邊軟硬體及材料應用;自動化展及機器人展指標性參展商如上銀(2049)、Panasonic、三菱、盟立(2464)、ABB、台達電(2308)、所羅門(2359)、廣運(6125)、達明等,因應數位化、遠端化需求提升,提供與時俱進的關鍵零組件與解決方案,並透過串聯整廠設備系統達到監控與虛實整合;服務型機器人專區以緯創(3231)、祥儀、微星(2377)為領頭羊展示無接觸智慧服務,超前部屬人機協作未來生態系;在產品的最後一哩路,由物流展與冷鏈科技展的參展商如和泰豐田、台朔重工、台灣大福、馬來西亞商和樂、中光電、邰利、海柔、海康、研華(2395)、冷研等,展出無人搬運、智慧倉儲、智慧零售及冷鏈配送實際應用案例,解決業者空間、人力仰賴、分揀效率等痛點,進而降低固定開銷;廣泛運用於日常生活及製程各環節的雷射應用,有雷射展參展商和和機械、慶鴻機電、維佳科技、宏惠光電、台灣三軸、台灣創浦,以及台灣板金經營協會專區等參展商為本屆亮點,大秀雷射三大優勢:精微、快速、自動化,提供優於傳統方案的高端技術轉型思維。

展覽同期搭配逾百場專業論壇及研討會活動,「2021國際論壇-製造業變局下的新競爭力」邀請上銀、佳世達、永進、旭榮等傑出業者,針對全球政經貿易多變情勢下的企業投資經營策略做深入探討;「智動化技術人才媒合活動」匯集所羅門、盟立、廣運、士林電機、上銀、新漢、均豪、新代等二十間參展商開出四百多個職缺的現場一對一洽談機會,加速人才交流達到企業與求職者雙贏;模具展與 3D 列印展三大主辦公協會打造「智慧成型論壇」接力發表智慧成型熱門議題,包括:模具產業導入智慧感測技術、透過數位分身實踐 T 零量產、創新射出及成型技術案例、高速 3D 列印醫療應用、表面處理與複合材料等,可降低國內業者導入智慧成型技術門檻,促進知識交流與跨域合作機會。

今年另一大亮點活動「智慧物流論壇」由物流展及冷鏈科技展四大主辦單位攜手主辦,為期四天主題涵蓋:淨零碳排與永續思維、全球供應鏈布局、企業資安防駭、智慧機器人配送、冷鏈與制冷技術、 AI/AIoT/IoT 應用、 5G 混合實境、元宇宙領袖見解、電商未來趨勢等,期望業者可透過國際視野突破傳統觀點,共同提升國內產業競爭力。

Photo Credit:展昭展覽

為使全球參觀者不受距離限制地參與本次展會,並將實體展覽效益延伸到線上,主辦單位展昭公司特別規劃「Intelligent Asia Online線上展覽館」,收納系列展所有參展商與精選展出產品,並搭配一對一即時通訊洽談及視訊功能,提供海外參觀者虛實整合的沉浸式觀展體驗,進一步達到國際交流目的。

參觀預登現已開放,建議事先完成登記以利參觀。展覽現場將依「中央流行疫情指揮中心」防疫規定實施相關配套措施,若有任何變動及調整,將於官方網站公告。

更多展覽資訊請見:www.chanchao.com.tw/IntelligentAsia

本文章內容由「展昭展覽」提供,經關鍵評論網媒體集團廣編企劃編審。