超贊的IOS 8人機界面指南(1)：UI設計基礎

 

　　今天這篇長文讓人激動到手發抖，騰訊譯者糖箔糊的心血譯作，整篇2萬多字，源自官方超詳細的IOS 8人機界面指南，非常用心的作品，文字到位，邏輯清晰，保證任何一個細節讀起來都能明白曉暢，趁著IOS 8 剛剛發布，趕緊提前學起來，千萬記得收藏呦!

　　小技巧：Word 2013會自動檢測目錄，閱讀模式下學習非常方便!

　　1.1 為iOS而設計（Designing for iOS）

　　iOS 的革新關鍵詞如下：

　　遵從 ：UI能夠更好地幫助用戶理解內容並與之互動，但卻不會分散用戶對內容本身的注意力。

　　清晰 ：各種大小的文字應該易讀，圖標應該醒目，去除多余的修飾，突出重點，很好地突顯了設計理念。

　　深度 ：視覺的層次和生動的交互動作會賦予UI新的活力，不但幫助用戶更好理解新UI的操作並讓用戶在使用過程中感到驚喜。

　　無論你是重新設計一個現有的應用或是重新開發一個，請嘗試下列方法：

　　首先，去除了UI元素，讓應用的核心功能呈現得更加直接並強調其相關性。

　　其次，直接使用iOS的系統主題讓其成為應用的UI，這樣能給用戶統一的視覺感受。

　　最後，保證你設計的UI可以適應各種設備和不同操作模式，這樣用戶可以在不同場景下舒適地享用你的應用。

　　在整個設計過程中，時刻准備著推翻先例，假設問題，並以重點內容和功能(為目標)來驅動每個細節設計。

　　1.1.1 以內容為核心（Defer to Content）

　　雖然明快美觀的UI和流暢的動態效果是iOS體驗的亮點，但內容始終是iOS的核心。

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

　　充分利用整個屏幕

　　天氣應用是最好的例子：漂亮的天氣圖片充滿全屏，呈現用戶所在地當前天氣情況這最重要的信息，同時也留出空間呈現了每個時段的氣溫數據。

　　盡量減少視覺修飾和擬物化設計的使用

　　 UI面板、漸變和陰影有時會讓UI元素顯得很厚重，致使搶了內容的風頭。應該以內容為核心，讓UI成為內容的支撐。

　　嘗試使用半透明底板

　　半透明的控件——比如控制中心——關聯了使用場景，幫助用戶看到更多可用的內容，並可以起到短暫的提示作用。在iOS中，透明的控件只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙一樣——它並沒有遮擋屏幕剩余的部分。

　　1.1.2 保證清晰度（Provide Clarity）

　　保證清晰度是另一個方法，以確保你的應用中內容始終是核心。以下是幾種方法，讓最重要的內容和功能清晰，易於交互。

　　使用大量留白

　　留白讓重要內容和功能顯得更加醒目。此外，留白可以傳達一種平靜和安寧的視覺感受，它可以使一個應用看起來更加聚焦和高效。

　　讓顏色簡化UI

　　一個主題色——比如在記事本中使用的黃色——讓重要區域更加醒目並巧妙地表示交互性。這同時也給了一個應用一個統一的視覺主題。內置應用使用家族化的系統顏色，無論在深色和淺色背景上看起來都干淨，純粹。

　　通過使用系統字體確保易讀性

　　iOS的系統字體自動調整行間距和行的高度，使閱讀時文本清晰易讀，無論何種大小的字號都表現良好。無論你是使用系統或是自定義字體，務必使用動態型，這樣你的應用可以在用戶選擇不同字號時做出應對。

　　使用無邊框的按鈕

　　默認情況下，所有bar上的按鈕都是無邊框的。在內容區域，無邊框按鈕以文案、顏色以及操作指引標題來表明按鈕功能。當按鈕被激活時，該按鈕呈現高亮的淺色狀態來作為操作響應。

　　1.1.3 用深度來體現層次（Use Depth to Communicate）

　　iOS經常在不同的層級上展現內容，用以表達分組和位置，並幫助用戶了解在屏幕上的對象之間的關系。

　　通過使用一個在主屏幕上方的半透明背景浮層來區分文件夾和其余部分的內容。

　　備忘錄以不同的層級展示，如插圖所示。用戶在使用備忘錄裡的某個條目時，其他的條目被收起在屏幕下方(譯者按：其實這個視覺提示使用起來很隱晦)。

　　日歷有較深的層級，當他們在翻閱年、月、日的時候，以及增強的交互動畫給用戶一種層級縱深感(循序切換的層次，從年到月到日)。在滾動年份視圖時，用戶可以即時看到今天的日期以及其他日歷任務。當用戶處於月份視圖時，點擊年份視圖按鈕，月份會縮小至年份視圖中的所處位置。

　　今天的日期依然處於高亮狀態，年份出現在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪裡進來並且知道如何返回。

　　類似的過渡動畫出現在用戶選擇一個日期時：月份視圖從所選位置分開，將當前的周日期推向屏幕頂端並翻轉出以小時為單位的當天時間視圖。這些動畫加強了日歷上年月日之間的關系的感知度。

　　1.2 iOS應用解析（iOS App Anatomy）

　　幾乎所有的iOS 應用都應用了UIKit framework中定義的組件。了解這些組件的名字，作用和構成能夠幫助你設計應用過程中做出更好的決定。

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

　　Bars ： 包含了導航信息，告訴用戶他們所在的位置並包含了一些能幫助用戶浏覽或啟動某些操作的控制按鈕。

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

　　控制按鈕： 展示信息或者控制動作。

　　臨時視圖： 短時間出現，給用戶重要信息或者額外的選擇或者其他功能。

　　除了定義UI組件，UIKit也定義對象實現的功能，例如手勢識別、繪圖、輔助功能和打印支持。

　　從編程的角度來說，UI組件被認為是不同類別的視圖，因為他們從UIView得到繼承。視圖能繪制屏幕內容