了解iOS人機介面設計準則 優化產品使用體驗

針對智慧手機橫屏、豎屏應用情境，行動應用終端可以擷取感測器狀態判定裝置方向對應變化顯示內容。Apple

Apple針對iOS應用程式開發者釋出的iOS8人機介面準則(Human Interface Guidelines)，清楚闡釋了App設計應與作業系統的UI要求規範一致，不僅可以提升終端產品用戶一致性的體驗，透過規範良好的設計要求，還可避免開發者做出使用經驗不佳的產品，與iOS系統一樣提供極致操作體驗，除了是每個開發者必讀的參考文件外，也是從事行動產品設計、應用程式開發、系統平台開發必須參照的重要文件。

iOS 8針對操作人機介面進行各項優化與設計改善，不僅成功為新款iPhone、iPad創造優異的市場反饋，也呼應了智慧手機因應大屏化趨勢的系統、軟體人機介面可改善的操作設計方案。

iOS人機介面準則的參考價值

由於篇幅有限，本文不會針對整份Human Interface Guidelines進行完整檢視，僅挑出與行動裝置、智慧手機與手機大屏化設計趨勢相關的設計準則進行討論，需要檢視Human Interface Guidelines完整全文的讀者，均可上Apple Developer Library(https://developer.apple.com/library/)查閱完整內容。

首先，Apple建議行動裝置設計者必須以Deference、Clarity與Depth三大重點著手。Deference是指人機介面設計應該要能讓用戶理解其應用功能與進行互動，並需要能讓用戶專心操作而不分心；Clarity為介面布局與文字，各種大小文字必須均能清晰閱讀、圖示醒目，尤其避免多餘的修飾，才能突出重點，並很好地凸顯產品的設計理念；Depth則是對視覺的層次與高度互動操作，可以賦予人機介面更有趣、直覺的操作體驗(User Experience)，同時可讓用戶在操作過程中持續感到驚喜。

關注核心應用  銜接系統生態系的UI風格設計

不管是建立一個全新行動應用、或是延續舊有設計的產品升級，產品開發者都必須重新檢視整體人機介面布局與設計改善。改善方式可以嘗試去除UI元素，先關注應用的核心功能，先試圖以更直接、強調內容或物件的相關性(relevance)進行畫面布局。

而在Apple系統平台投放的應用產品，則必須儘量依循iOS的系統UI風格或是UI元件，讓終端使用者能有統一的視覺感受與操作體驗，是產品設計最基本的要求。

尤其是在多裝置、多屏顯示尺寸大小差異的產品相容要求下，目前Apple的iOS裝置屏幕解析度，就有一般解析度與Retina視網膜屏幕兩大規格差異，針對手機或平板，又有不同的長寬比例，對設計者而言，在進行產品開發時，必須注意應用軟體投放在不同螢幕設備時，必須維持一致的介面布局與視覺風格。即產品必須能保證UI可適應不同設備、操作模式，才能讓終端使用者在不同情境，均能愉快體驗產品設計。

應更關注內容應用  核心搭配GUI完美呈現

Apple的Human Interface Guidelines也建議，針對行動裝置應用App或服務設計，可以朝以內容為核心(Defer to Content)來整合使用介面與內容布局，反而不要過度強調美觀的使用介面，或是充斥大量操作動畫效果，因為內容才是行動應用的核心。

將設計聚焦內容應用的設計方法很多，Human Interface Guidelines舉天氣的應用內容為例，建議類似天氣的應用內容，可以將天氣圖片以全屏幕顯示呈現，讓終端使用者透過GPS或3G定位，即可直接在操作時，先讓用戶看到當前的天氣狀態，不僅可讓用戶減少大量操作、提升產品體驗外，也可充分利用行動裝置有限屏幕呈現重要內容，再搭配天氣應用的附加功能，如不同時段的氣溫、降雨狀態等參考資料。

扁平化設計風格成主流

在iOS7？8時，即已開始將擬物化的設計去除，取而代之的是更扁平化的設計風格。所謂的扁平化設計，為將UI元素(UI elements)、面板的漸層、陰影美術處理儘量去除，因為這些擬物概念的美術處理，會讓操作介面元素顯得厚重，甚至過度擬物也會導致用戶操作分心，以至於搶去聚焦內容的設計目標。

iOS8的扁平化設計建議，可用半透明底板(如iOS8的控制中心UI效果)處理效果，應用在短暫提示的資訊呈現用途上，可讓操作暫時聚焦在提示內容，跳出提示後，又可回復到原始操作情境與內容上。

另一個設計重點為Provide Clarity，即應時時關注聚焦應用的重點在於內容本身，核心呈現的也是內容。讓內容能更清晰呈現與互動操作的方法，如採行大量留白Use plenty of negative space設計，留白可以讓重要內容與功能變得更醒目，也可營造平靜、安寧視覺感受，並可讓應用產品在介面上能更聚焦與提供高效率操作情境。

另一種手法為以顏色簡化UI(Let color simplify the UI)方法操作，對終端應用來說以主題色彩來進行設計，例如記事本應用中使用黃色，讓重要的區域可以更為醒目，或是在應用中設計統一的視覺風格。

善用系統字體 提高內容可讀性

增加產品內容呈現品質方面，Apple也建議終端開發可透過使用系統字體，來確保內容的易讀性(Ensure legibility by using the system fonts)。iOS的系統字體可自動調整行間距、行高，能讓閱讀應用中的文字更清晰易讀。

另一個重點建議為使用無邊框的按鈕(Embrace borderless buttons)，在預設情境下，導航欄上的按鈕都可以採無邊框設計，無邊框按鈕可搭配顏色或操作指引標題呈現按鈕功能，按鈕被啟動或作用時，按鈕可呈現高亮或淺色狀態，回應用戶操作狀態。

對手機或是平板電腦，可使用的屏幕空間有限時，就必須善用深度，來呈現內容的層次(Use Depth to Communicate)。以iOS8系統UI為例，iOS經常需在不同資料層級間展示內容，用不同深度的層級，表達內容分組與位置，同時也能説明使用者在螢幕上的物件間的交互關係。

如可透過在主螢幕上方的半透明設計背景層，區分目前檢視資料夾資料，並暫時蓋掉其餘部分內容。如備忘錄應用程式，當用戶檢視備忘錄裡的某個紀錄項目時，其他待辦項目可以暫時先收起置於螢幕下緣。

明確的操作層級結構 提升產品使用效率

在iOS8系統附加的應用中，日曆應用有較明顯的操作層級觀念，當用戶切換年、月、日檢視模式時，系統會以互動動畫讓用戶有一種層級切換跳躍的縱深感，用戶在進行滾動年份的視圖切換時，用戶可即時看到今天日期、及其他日曆的任務項目，而當用戶在月份視圖操作情境時，點擊年份視圖按鈕月份，可隨即縮小該年份視圖中的對應位置。

由於所開發的應用，會因為因應多屏尺寸、比例的適應性的品質，直接左右產品使用體驗。因此在iOS應用解析(iOS App Anatomy)，也可善用UIKit framework中定義的系統組件，為終端應用取得更好的多屏相容設計。

UIKit提供的UI元件大致分成Bars、內容視圖、控制按鈕、臨時視圖等。Bars為包含導航資訊、可協助用戶進行瀏覽或啟動特定操作的控制鈕設計；內容視圖為包含應用的內容主體與產品所需的某些操作行為，如滾動、插入、刪除、排序等操作行為；控制按鈕為展示資訊或用戶操作？控制動作；臨時視圖為短暫時間呈現資訊，是給用戶的重要資訊或額外選擇的設計應用。

除了UI元件定義外，UIKit也定義了物件實現的功能，如針對手勢識別、繪圖、協助工具與系統的列印功能支援等。在iOS Human Interface Guidelines中亦針對App的Adaptivity and Layout、Build In Adaptivity App針對不同解析度屏幕的自動布局設計等，或定義不同的顯示環境(display environment)概念，都值得產品開發者或系統建構者深入理解並善用其設計概念方法，師法Apple iDevice設計準則，持續追求產品的極致使用體驗感受。