超實用的IOS 9人機介面指南（1）：UI設計基礎

 　　1.1 為iOS而設計（Designing for iOS）

　　iOS 表現了以下三大設計原則：

　　遵從(Deference)：UI應該有助於使用者更好地理解內容並與之互動，並且不會分散使用者對內容本身的注意力。

　　清晰(Clarity)：各種尺寸的文字清晰易讀;表徵圖應該精確醒目，去除多餘的修飾，突出重點，以功能驅動設計。

　　深度(Depth)：視覺的層次感和生動的互動動畫會賦予UI新的活力，有助於使用者更好地理解並讓使用者在使用過程中感到愉悅。

　　無論你是重新設計現有的應用，還是重新開發一個新應用，請基於下列方法進行設計考慮：

　　首先，去除掉UI元素讓應用的核心功能突顯出來，並明確之間的相關性。

　　然後，使用iOS的主題來定義UI並進行使用者體驗設計。完善細節設計，以及適當合理的修飾。

　　最後，保證你設計的UI可以適配各種裝置和各種操作模式，使得使用者在不同情境下都可以享受你的應用。

　　在整個設計過程中，時刻準備著推翻先例，質疑各種假設，並以內容和功能視為重點來驅動每個細節的設計。

　　1.1.1 設計跟隨內容 (Defer to Content)

　　儘管清新美觀的UI和流暢的動態效果都是iOS體驗的亮點，但內容始終是iOS的核心。

　　這裡有一些方法可以確保你的設計既可以提升功能體驗，又可以關注內容本身。

　　充分利用整個螢幕。系統天氣應用是這個方法的絕佳範例：用漂亮的全屏天氣圖片呈現現在的天氣，直觀地向使用者傳遞了最重要的資訊，同時也留出空間呈現了每個時段的天氣資料。

　　重新考慮(盡量減少)擬物化設計的使用。遮罩、漸層和陰影有時會讓UI元素顯得很厚重，導致影響到了對內容的關注。相反，應該以內容為核心，讓使用者介面成為內容的支撐。

　　用半透明UI元素樣式來暗示背後的內容。半透明的控制項元素(比如控制中心)可以提供了內容相關的使用情境，協助使用者看到更多可用的內容，並可以起到短暫的提示作用。在iOS中，半透明的控制項元素只讓它遮擋住的地方變得模糊——看上去像矇著一層米紙——它並沒有遮擋螢幕剩餘的部分。

　　1.1.2 保證清晰 （Provide Clarity）

　　確保你的應用始終是以內容為核心的另一個方法是保證清晰度。這裡有幾種方法可以讓最重要的內容和功能清晰可見，且易於互動。

　　使用大量留白。留白可以使重要的內容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受，它可以使一個應用看起來更加聚焦和高效。

　　讓顏色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的資訊並巧妙地用樣式暗示可互動性。同時，也讓應用有了一致的視覺主題。內建的應用使用了同系列的系統色彩，這樣一來，無論在深色或淺色背景上看起來都很乾淨，純粹。

　　通過使用系統字型確保易讀性。iOS的系統字型(San Francisco)使用動態類型(Dynamic Type)來自動調整字間距和行間距，使文本在任何尺寸大小下都清晰易讀。無論你是使用系統字型還是自訂字型，一定要採用動態類型，這樣一來當使用者選擇不同字型尺寸時，你的應用才可以及時做出響應。

　　使用無邊框的按鈕。預設情況下，所有的欄(bar)上的按鈕都是無邊框的。在內容地區，通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可互動性。當它被啟用時，按鈕可以顯示較窄的邊框或淺色背景作為操作響應。

　　1.1.3 用深度層次來進行交流 （Use Depth to Communicate）

　　iOS經常在不同的視圖層級上展現內容，用以表達階層和位置，這樣可以協助使用者瞭解螢幕上對象之間的關係。

　　對於支援3D觸控的裝置，輕壓(Peek)、重壓(Pop)，以及快捷操作(Quick Actions)能讓使用者在不離開當前介面的情景下預覽其他重要內容。

　　通過使用一個在主畫面上方的半透明背景浮層，這樣檔案夾就能清楚地把內容和螢幕上其他內容區分開來。

　　如圖所示，備忘錄(Reminders)以不同的層級展示內容條目。使用者在使用備忘錄裡的某個條目時，其他條目會被集中收合在螢幕下方。

　　日曆具有較深的層級，當使用者在翻閱年、月、日時，增強轉場動畫效果給使用者一種層級縱深感。在滾動年份視圖時，使用者可以即時看到今天的日期以及其他日曆任務。

　　當使用者選擇了某個月份，年份視圖會局部放大該月份，過渡到月份視圖。今天的日期依然處於高亮狀態，年份會顯示在返回按鈕處，這樣使用者可以清楚地知道他們在哪兒，他們從哪裡進來以及如何返回。

　　類似的過渡動畫也出現在使用者選擇某個日期時：月份視圖從所選位置分開，將所在的周日期推向內容區頂端並顯示以小時為單位的當天時間軸視圖。這些互動動畫增強了年、月、日之間的層級關係以及使用者的感知。

　　1.2 iOS應用解析 （iOS App Anatomy）

　　幾乎所有的iOS應用都應用了UIKit framework中定義的組件。瞭解這些基本組件的名稱、作用和功能可以協助你在應用的介面設計過程中做出更好的決策。

　　UIKit提供的UI組件可以大致分為以下4種類型：

　　欄(Bars)：包含了上下文資訊來指引使用者他們所在的位置，以及控制項來協助使用者導航或執行操作。

　　內容視圖(Content Views)：包含了應用的具體內容以及某些操作行為，比如滾動、插入、刪除、排序等等。

　　控制項(Controls)：用於執行操作或展示資訊。

　　臨時視圖(Temporary Views)：短暫出現給予使用者重要訊息或提供更多的選擇和功能。

　　UIKit除了定義UI組件元素，還定義對象如何?功能，例如手勢識別、繪圖、協助工具功能和列印支援。

　　從編程的角度來看，UI組件元素其實是視圖的子類，因為它們繼承了UIView。視圖能繪製螢幕內容並知道使用者何時在其範圍內觸屏。視圖的所有類型有：控制項(比如按鈕和滑塊)、內容視圖(比如集合視圖和表格視圖)，以及臨時視圖(如警告提示和動作菜單)。

　　要在應用中管理一組或者一系列的視圖，通常需要使用視圖控制器。它能協調視圖的內容顯示，實現與使用者互動的功能並能在不同螢幕內容之間切換。比如，“設定”使用了一個導航控制器來展示其視圖層級。

　　這裡有一個關於視圖與視圖控制器如何結合并呈現iOS應用的UI的例子，如圖。

　　儘管開發人員認為真正起到作用的是視圖和視圖控制器，但一般使用者感知到的iOS應用是不同螢幕內容的集合。從這個角度來看，在應用裡，螢幕內容一般對應於一個獨特的視覺狀態或者模式。

　　註：一個iOS應用程式套件組合含一個視窗。但是，不同於電腦程式中的視窗，iOS視窗沒有可見的部分並且不能在螢幕上被移動到另一個位置。很多iOS應用程式只有一個視窗;可以支援外部顯示裝置器的應用程式可以有不止一個視窗。

　　在iOS Human Interface Guidelines中，螢幕(screen)這個詞和大部分使用者理解的一樣。作為一個開發人員，你也許需要閱讀一下其他與UIscreen相關的章節，這樣你可以更好的瞭解如何關聯外部螢幕。