智權報總覽 > 產業與經濟           
 
淺談Apple的使用者經驗與人機介面的設計原則(下)
Apple的iOS7的人機介面的視覺設計註1
葉雪美╱經濟部智慧財產局專利一組專利高級審查官╱台科大專利研究所兼任助理教授
2014.05.06
北美智權報105期中,介紹Apple公司的使用者經驗與人機介面的設計原則。本篇則介紹Apple的iOS7全新行動作業系統的視覺設計,讓讀者能瞭解Apple公司如何以使用者觀點及使用者經驗來開發人機介面設計。

2013年Apple公司在全球軟體開發者年會,推出由該公司資深設計副總裁Jonathan Paul Ive(簡稱Ive)負責的iOS7版本的人機介面,Ive是將Apple產品變成全球時尚精品的設計精靈。在最新版的iOS7人機互動介面指南中可看出,Ive將「簡約」及「形隨機能(Form follow function)」的設計理念帶入軟體層面的人機介面設計,將介面中多餘的陰影與亮光效果刪除使得人機介面與圖像設計趨於平面化,運用大量的手勢操作使得操作更直覺更方便,網格座標的設計系統(grid systems)與精確的色彩配置讓人機介面呈現出精緻、簡潔、乾淨且直覺的介面外觀。

iOS7是以使用者的心智模式與喜好為基礎,強化控制中心(Control Center)、多工處理及Air Drop等功能,開發出得更簡單、更易於理解且讓人樂於使用的人機介面。以下簡單介紹iOS7人機介面的特色與視覺設計。

一、簡約而不簡單的設計原則

Ive常說「簡約並不是簡單(或是極簡, Simplicity isn’t simple),簡約常常被人們誤認為是簡單。但真正的簡約,不只是移除雜亂或拿掉多餘的裝飾單,而是考量使用者的需要,在正確的地方、正確的時間,提供適合的內容」簡言之,就是要在功能複雜的系統中建立秩序,讓事情能順利完成,讓使用者第一次使用某項功能,便能知道該如何執行操作,這才真正的簡約(註2)。

iOS7全新的系統架構,捨棄圖形的漸層、陰影效果、華麗的設計元素與明顯的裝飾,移除不必要的工作列與按鈕,加強螢幕畫面的細節部分,加入半透明的設計,使得整個介面的呈現更簡潔、更清新、更俐落(如圖1所示)。簡約又低調的介面讓使用者能一目了然,目光能聚焦於重要的事物與內容,主要介面中的應用程式環境與操作畫面明亮顯眼,能引導使用者無需學習,可憑其經驗與感知直覺的操作與使用。

圖1  iOS7的主畫面、計算機與遊戲的介面

二、人性化的設計與強化服務內容

一個優良的產品設計應自然的與所應用的科技連結,使用者無需去適應它,人機介面的設計亦然。iOS7的人機互動更加生動,其中的動畫也具有電影的深度層次效果,讓使用體驗變得更有趣更自在。

iOS7全新的多工作業,只要點擊兩下「Home」按鈕,就會呈現出介面與圖像上下層並列的畫面,切換應用程式的介面也加入預覽功能,如果使用者想要關閉多工作業畫面的軟體,只要在畫面中將該介面中向上滑動即可關閉(如圖2所示),讓操作更人性化。

圖2  iOS7的多工作業介面的設計與操作

全新介面設計讓整個作業系統的顏色更豐富更加鮮豔(如圖3左側所示),在開機畫面中加入動態桌面(wallpaper),只要在觸控螢幕上任意的往右滑動就能出現解鎖畫面,解鎖操作更人性化(如圖3中央所示)。

另外,在主畫面中增加通知中心(從螢幕上方滑出)與控制中心(從螢幕下方向上滑出),也在控制介面中加入了亮度調整、音樂控制鈕、手電筒、鬧鐘、計算機與相機等快捷按鈕(如圖3右側所示),強化服務內容也方便使用。

圖3 iOS7鮮豔之圖像設計、解鎖介面與控制中心

三、半透明且層次分明的視覺呈現

iOS7的檔案資料與圖像是置於半透明的毛玻璃主螢幕上,點開的資料則是懸浮於主螢幕上。iOS7採用毛玻璃的效果表達其層次關係,在層級秩序中,背景層始終是置於最底層,其他應用程式以置於主螢幕前方的方式呈現(如圖4所示),半透明的設計與獨立具功能性的圖形層次,讓使用者能清楚地看到這種深度層次的視覺效果。

http://images.apple.com/tw/ios/ios7-basics/images/ios_weather.jpg
圖4  iOS7的半透明的層次結構與呈現效果

在應用程式或檔案資料的開啟,也是以這種深度層次的效果呈現,以點擊的應用程式或檔案資料為中心,動畫向四周放大展開,呈現出一個合理的深度層次視覺印象。

iOS7更注重動畫與真實世界規則的對應關係,而不流於形式,半透明的設計能夠讓使用者瞭解到控制台和後面介面的層次關係(如圖5所示),整個畫面表現的更生動。

http://images.apple.com/tw/ios/ios7-basics/images/ios_close_tabs.jpg
圖5 iOS7的控制中心、網址標籤與多工的介面

四、注重細節的平面化設計

在iOS6中,許多應用程式採用逼真的實物情境效果,在介面中經常採用陰影與強光效果(highlight)的設計。然而,iOS7則刪除了陰影、強光與華麗的虛擬情境,將其平面化(如圖6所示),例如:備忘錄的介面,iOS6採用虛擬記事本紙張設計的逼真情境;iOS7不再使用逼真的虛擬設計,而是極簡潔、乾淨的畫面與淡色調的分行線(如圖7所示),又將操作元素的顏色淡化,避免干擾使用的內容。

圖6  iOS7與iOS6指南針介面設計之比對

圖7  iOS7與iOS6的備忘錄介面設計之比對

iOS 7的時鐘介面亦採用白色背景的平面化設計,時鐘圖形像可以完整顯示時間,其中的時針分針秒針也會跟著轉動,在時鐘圖形上輕壓一下,就會轉換成數字顯示(如圖8左側與中央所示)。下方的世界時鐘、鬧鐘、碼錶與計時器的四項功能圖像也都淡化,避免干擾使用的內容。

圖8  iOS7與iOS6的時鐘介面設計之比對

五、美學的整體性與一致性

在iOS7系統中,對於每項設計的細節都極為要求,貫徹了Ive嚴謹的設計態度。iOS7在主畫面、應用程式與介面的安排整齊有序,應用程式畫面具有優良的視覺設計(visual design),畫面上保持簡單且細緻的圖像與圖形,提高應用程式的可用性,使得應用程式在螢幕上看起來是令人愉悅的,即使要長時間的觀看與使用也不覺得厭煩。

iOS7以精準的網格座標系統重新設計圖像(Icons),精雕細琢每一個圖像與字體的細緻度,並採用鮮豔且亮麗的配色計畫,使得各個圖像容易識別,將各個造形元素搭配結合,創造出畫面上和諧的整體關係。

例如:iCloud的雲端服務的平面化設計(如圖9所示),從主畫面到功能切換選單都呈現出一種簡潔、清新的視覺印象,其中的郵件、聯絡資訊、行事曆、備忘錄、提醒事項以及尋找我的iPhone等應用程式的圖像也都重新設計,重視微小細節的處理更能顯出iOS7在美學的整體性與一致性。

圖9  iOS7的圖像設計與iCloud的主畫面與功能切換選單

伍、結語

Apple公司一向注重創意與設計,深知產品除了實用功能、精緻且吸引人們的外觀設計之外,還要有易於理解、簡易上手與輕鬆使用的人機介面,這次將iOS7作業系統交由Ive負責,Ive將其在產品設計中重視「使用者經驗」、「簡約」與「細節處理」的設計理念帶入iOS7作業系統與視覺設計,iOS7以使用者心智與喜好為基礎,強化的服務內容,在介面的視覺設計中刪除過多華而不實的裝飾、使用精準的網格設計系統、活潑、亮麗且精確的色彩配置,讓人機介面更簡約、更精緻、更容易瞭解與輕鬆使用。

Apple公司在美國、歐盟、日本及韓國都申請設計專利來保護電腦圖像與使用者介面。2010年及2011年在美國,Apple公司相繼對我國廠商HTC提起專利侵權訴訴訟,2012年11月兩家公司達成和解,和解協議中達成未來10年Apple公司會分享該公司現有的與未來得到的專利且適用於全球,不過,從美國加州北區聯邦法院法官Lucy Kuo命令公開的交互授權協議書內容可得知,其中所涵蓋的專利並不包含Apple公司的設計專利。在Apple公司與Samsung公司的專利侵權訴訟(11-CV-01846)中,2013年11月,法官Lucy Kuo下令要兩家公司試著進行和解,Apple公司的首席專利顧問B. J. Watrous在加州北區聯邦法院表示,和解談判中包含必需獲得授權許可以及禁止Samsung抄襲Apple的設計的反抄襲(anti-cloning)條款(註3)。由此可得知,Apple公司非常重視產品外觀與人機介面創新的無形資產的價值,有時更甚於技術研發的發明專利,這個觀念是國內企業與專利業界無法理解與想像的。

2013年1月1日我國實施新修正的專利法,其中新的設計專利制度開放電腦圖像與圖形化使用者介面(通稱為人機介面)的設計保護。除了一般消費性電子產品、保健與醫療設備、生產及檢測裝置等實體產品會使用人機介面之外,還有電子商務、雲端資料中心與雲端運算與服務相關產業(註4)也都使用網路平台與人機介面。無論是實體產品、電子商務、雲端運算與服務等產業所提供的硬體設備與軟體服務都需要建置服務平台與人機介面,其中與使用者直接接觸的人機介面的設計不僅要強化服務內容、更要注重介面內容與視覺設計是否能符合使用者的心智模式、經驗與喜好,而這一部分正是Apple公司的人機介面的設計原則所著重的,本文中試著將這些設計原則予以圖解說明、希望能對國內資訊與IT產業在人機介面的開發與設計上能有所助益。

 

附註:

  1. 本章節中iOS7的介面圖形係源自Apple公司的官方網站http://www.apple.com/tw/ios/, 最近流覽日期03/18/2014。 iOS6的介面圖形則源自Apple公司的官方網站中的“iOSHuman Interface Guidelines”(2013-05-01)。
  2. 參酌Shane Richmond, Head of Technology (Editorial), 「Jonathan Ive interview: simplicity isn’t simple」,23 May 2012, http://www.telegraph.co.uk/technology/apple/9283706/Jonathan-Ive-interview-simplicity-isnt-simple.htm,。
  3. 參閱 “Apple insists on anti-cloning provision in Samsung settlement Apple disputes a Samsung assertion that any potential deal between the two smartphone rivals lacked such a provision.”http://www.cnet.com/news/apple-insists-on-anti-cloning-provision-in-samsung-settlement/, 最近瀏覽日期03/08/2014。
  4. 這幾年,Google、Microsoft、Facebook及Amazon等企業紛紛搭配自有軟體與硬體技術的整合,建構雲端資料中心(Data Center),提昇服務的能量及擴大資訊服務的市場,Google甚至在我國彰化成立亞洲雲端資料中心。

 

作者: 葉雪美(Sherry H.M. Yeh)
現任: 經濟部智慧財產局專利一組 專利高級審查官
台灣科技大學 專利所 兼任助理教授
學歷: 世新大學法律研究所法學碩士
國立成功大學工業設計系學士
經歷: 中央標準局新式樣專利主任審查員(75-76)
中央標準局專利審查委員(80-89)
著作: 《美國設計專利侵害認定相關問題研究-兼論我國新式樣專利侵害認定問題》,2004。
《設計專利申請實務-台灣及美國專利申請策略》,元照出版公司,2008。

 


Facebook 按讚馬上加入北美智權報粉絲團