原文地址：http://isnofate.com/human_interface_guidelines_for_ios7_ui_elements_controls/
活動指示器 (Activity Indicator)
活動指示器表示任務或進程正在進行中 (如下圖和文字標籤一起使用).
API NOTE 想了解如何在代碼中定義活動指示器, 請參考 UIActivityIndicatorView Class Reference.
活動指示器是:
- 當任務進行和加載時旋轉, 任務完成後自動消失
- 用戶無法與之交互
在工具欄或主視圖中使用活動指示器來告知用戶任務或加載正在進行中, 但並不提示該過程何時會結束.
不要展示靜止的活動指示器. 會讓用戶產生進程停滯的錯覺.
活動指示器是用來讓用戶知道任務或進程仍在正常運轉. 有些時候, 告訴用戶進程沒有停滯比告訴他們何時完成更加重要.
可自定義一個與當前頁面風格協調的活動指示器. 可以的話, 調整活動指示器的尺寸和顏色以便與當前頁面背景協調.
添加聯繫人按鈕 (Contact Add Button)
添加聯繫人按鈕讓用戶將現有聯繫人添加到文本框或者其它文字視圖中.
API NOTE 想了解如何在代碼中定義添加聯繫人按鈕, 請參考 Buttons.
添加聯繫人按鈕是:
- 用來展示聯繫人列表
- 幫助用戶將聯繫人添加到當前 (聯繫人按鈕所在的) 視圖中
使用添加聯繫人按鈕讓用戶在不需要使用鍵盤的情況下就可以方便地訪問到聯繫人. 舉個例子, 在新建郵件的界面中, 用戶可以點擊該按鈕來添加收件人, 而不需要用鍵盤輸入收件人的名字.
由於添加聯繫人按鈕屬於鍵盤輸入聯繫人方法的替代品, 不推薦在不支持鍵盤輸入的界面中使用添加聯繫人按鈕.
日期選擇器 (Date Picker)
日期選擇器展示關於日期和時間的組件, 比如小時, 分鐘, 天, 以及年.
API NOTE 想了解如何在代碼中定義日期選擇器, 請參考 Date Pickers.
日期選擇器是:
- 最多可以展示4個獨立的滾輪, 每一個滾輪表示一個不同的值, 比如月份或小時等
- 當前選中的值在中間, 以深色字體標識
- 尺寸不可更改 (日期選擇器的尺寸與 iPhone 鍵盤相同)
- 包括四種模式, 每種模式由一組不同的值組合而成:
- 日期和時間. 日期和時間模式 (默認模式) 包含日期, 小時,和分鐘, 以及一個可選的 AM/PM 值.
- 時間. 時間模式包括小時和分鐘, 以及可選的 AM/PM 值.
- 日期. 日期模式包括月份, 天以及年.
- 倒計時器. 倒計時器模式展示了小時和分鐘. 你可以精確地設定倒計時長, 倒計時的最大值爲 23 小時 59 分鐘.
使用日期選擇器來讓用戶選擇時間, 以代替讓用戶自己輸入包含了日期、時間等多個部分的時間值.
儘量把日期選擇器嵌入在當前內容中. 最好避免用戶在使用日期選擇器的時候要進入另外一個界面. 在iPad上, 日期選擇器可能會出現在一個浮層中, 或者嵌入在當前內容裏.
如果合適的話, 可以改變分鐘滑輪的單位刻度. 在默認情況下, 分鐘滑輪包含從0到59共60個值, 如果選擇粒度沒必要這麼精細, 你可以讓分鐘滑輪的單位刻度變大, 只要這個刻度可以整除60. 比如說你可能會設定每15分鐘爲一個刻度, 此時分鐘滑輪就有0, 15, 30, 45這四個值.
詳情展開按鈕 (Detail Disclosure Button)
詳情展開按鈕展示了與該項相關的更多詳細信息與功能描述.
API NOTE 想了解如何在代碼中定義詳情展開按鈕, 請參考 UITableViewCell Class Reference 和 Buttons.
詳情展開按鈕以一個單獨的視圖展示特定項目的更多詳情信息與功能.
當詳情展開按鈕在表格行中出現時, 點擊表格行的其它區域不會激活此按鈕, 只會選中該行, 或者觸發應用特定的行爲.
一般來說, 你會在一個表格視圖中使用詳情展開按鈕來讓用戶知道更多關於這個列表項的信息. 當然你也可以將這個按鈕用在其它類型的視圖中來爲用戶展示更多與特定項目相關的信息和功能.
信息按鈕 (Info Button)
信息按鈕展示了應用的配置信息, 有時候它會出現在當前視圖的背面.
API NOTE 想要了解如何在代碼中定義信息按鈕, 請參考 Buttons.
iOS 包含了兩種信息按鈕樣式: 適用於淺色內容上的深色按鈕, 以及適用於深色內容上的淺色按鈕.
使用信息按鈕來顯示應用的配置信息或選項. 你可以根據自己應用的 UI 風格來選擇最爲協調的信息按鈕樣式.
標籤 (Label)
標籤用於放置靜態文本.
API NOTE 想了解如何在代碼中定義標籤, 請參考 UILabel Class Reference.
標籤是:
- 展示任意數量的靜態文本
- 文本可能會被用戶複製, 除此之外一切交互行爲都是不允許的
使用標籤去命名或描述你的界面的某個部分, 或者爲用戶提供簡短的信息提示. 標籤最好顯示相對少量的文字.
儘量做到讓你的標籤清晰可辨. 顯示在一個標籤裏的內容, 最好是支持動態類型和使用 UIFont 的方法preferredFontForTextStyle 來獲取文本. 如果你選擇使用自定義字體, 不要爲了使用花式的字體或亮麗的色彩而犧牲可讀性. (關於應用中使用文字的指南, 請參考 Color and Typography; 想了解更多關於動態類型, 請參考 Text Programming Guide for iOS 中的 Text Styles.)
網絡活動指示器 (Network Activity Indicator)
網絡活動指示器在狀態欄中出現, 表示網絡活動正在進行.
API NOTE 你可以在代碼中使用 UIApplication 的方法 networkActivityIndicatorVisible 來控制該活動指示器的可見性.
網絡活動指示器是:
- 出現在狀態欄中, 當網絡活動正在進行時它會旋轉, 在活動停止時它則消失
- 不支持用戶交互行爲
當你的應用正在鏈接網絡, 而這個連接過程將會持續好幾秒的時候, 你可以通過網絡活動指示器來給用戶以反饋. 如果進程所需時間很短, 則不需要用到它, 因爲很可能在用戶注意到它之前, 它就消失了.
頁面控件 (Page Control)
頁面控件告訴用戶當前共打開了多少個視圖, 以及當前正處於那一頁. (下圖是天氣應用中的頁面控件)
API NOTE 想了解如何在代碼中定義頁面控件, 請參考 Page Controls.
頁面控件是:
- 包含一系列圓點, 圓點的個數代表了當前打開的視圖數量 (從左到右, 這些圓點代表了視圖打開的先後順序).
- 默認情況下, 使用不透明點來標識當前打開的視圖, 使用半透明點來表示所有其它視圖.
- 不允許用戶訪問不連續的視圖
- 當顯示視圖數量過多時, 點的間距並不會因此減少 (如果需要顯示的點超過頁面所限時, 則會被截斷.)
- 不適用默認的視圖之間導航方式; 僅只支持頁對頁 (view-to-view) 的導航方式且要隨時更新控件的當前狀態.
頁面控件最重要的功能是讓用戶瞭解有多少個開啓的視圖並且幫助他們選擇特定視圖，頁面控件是專爲這種任何一個視圖都與其他視圖處於同一級的應用設計的。
不要使用頁面控件來顯示有層級的視圖或其他複雜佈局. 頁面控件無法顯示視圖之間的關聯關係, 也不能指示每個視圖與每個點的對應關係, 所以它不能幫助用戶導航到一個特定的視圖.
避免顯示過多的點. 超過10個點就會讓用戶難以一掃而知, 而如果有超過20個視圖, 逐個訪問是十分低效的方式. 如果你的應用中用戶需要訪問超過20個視圖，可以嘗試用帶有更多信息說明及允許不連續訪問的佈局方式顯示這些視圖.
將頁面控件垂直居中放置於當前開啓的視圖底部邊緣與屏幕底邊之間. 這個位置即可以保證它的可見性又不會阻礙用戶.
選擇器 (Picker)
選擇器展示了一組值, 用戶可以從中選擇一個.
API NOTE 想了解如何在代碼中定義選擇器, 請參考 UIPickerView Class Reference.
選擇器是:
- 一個簡化版的日期選擇器 (想了解更多關於日期選擇器的信息, 請參考 Date Picker)
- 包括一個或多個滑輪, 每個滑輪含有一組值
- 當前選中的值在中間, 以深色字體標識
- 尺寸不可更改 (選擇器的尺寸與 iPhone 鍵盤相同)
使用選擇器可以讓用戶更容易從一系列不同的值中間進行選擇.
一般來說, 當用戶對整組值都比較熟悉的時候, 可以使用選擇器. 由於當滑輪靜止的時候, 大部分的數值會被隱藏, 最好是在用戶對所有數值均有預期的情況下才使用選擇器. 當你需要展示一大組用戶並不熟悉的選項, 此種選擇器可能不太適合.
儘可能讓讓用戶在當前視圖中使用選擇器. 不要讓他們在使用選擇器時還要進入其它的視圖.
如果你需要展示的備選項數量很多, 考慮使用表格視圖 (Table View) 而不是選擇器. 因爲表格視圖的高度較大, 內容滾動起來會更快.
進程視圖 (Progress View)
進程視圖展示了時間可預計的任務或進程的進度 (下圖是郵件應用的工具欄).
API NOTE 想了解更多如何在代碼中定義進度視圖, 參考 UIProgressView Class Reference.
進程視圖是:
- 是一條軌跡, 隨着進程的進行從左向右進行填充
- 不支持用戶交互行爲
iOS 定義了兩種進度視圖樣式:
- 默認 (Default). 默認樣式包含未填充的軌跡, 適合獨立放置在主要內容區中.
- 進度條 (Bar). 進度條樣式不包含未填充的軌跡, 因爲其需要與欄組合使用, 例如導航欄或工具欄.
當一個任務存在明確的進程, 可以使用進度條來給與用戶反饋, 尤其是告訴用戶這個任務大約需要多少時間才能完成.
可以的話, 請根據你應用的風格來設計進度條的外觀. 進度條的軌跡和填充都可以自定義顏色, 也可以直接使用圖片.
刷新控件 (Refresh Control)
刷新控件執行用戶發起的內容刷新操作——它常在表格中出現 (下圖是郵件應用的收件箱列表頁).
API NOTE 想了解如何在代碼中定義刷新控件, 請參考 UIRefreshControl Class Reference.
刷新控件是:
- 看起來類似活動指示器
- 可以顯示一個標題
- 默認狀態下不可見, 只有當用戶發起刷新操作時 (在表格上緣往下拖拽時) 纔出現
刷新控件可以讓用戶用一種一致的方式立即更新表單或者其他視圖的內容, 無需等待自動更新.
就算你使用了刷新控件, 也不要因此就不支持內容自動刷新. 儘管用戶喜歡在執行刷新操作時內容立刻刷新, 他們也同樣會喜歡內容自動刷新. 如果過於一來用戶自己執行所有刷新操作的話, 那些不會自動刷新的用戶就會疑惑, 爲何你應用中的數據永遠都不更新. 一般來說, 刷新控件給了用戶多一個選擇, 讓他們可以立刻獲得最新的內容, 但同時, 你也不能奢望用戶會主動獲取所有的更新信息.
只有在必要的時候才加短標題. 特別需要注意的是, 不要使用短標題來描述刷新控件怎麼使用.
圓角矩形按鈕 (Rounded Rectangle Button)
iOS7 已經不再使用圓角矩形按鈕, 而是使用了新的系統按鈕——類型爲 UIButtonTypeSystem 的 UIButton. 使用指南可參考 UIButtonSystem Button.
分段控件(Segmented Control)
分段控件是一組分段的線性集合, 每一個分段的作用類似按鈕, 點擊之後將切換到相應的視圖.
API NOTE 想了解如何在代碼中定義分段控件, 請參考 Segmented Controls.
分段控件是:
- 由兩個或以上的分段組成, 每一個分段的寬度相同, 與分段的數量成比例 (分段數量越多, 則寬度越小);
- 可以包含文字或者圖片
使用分段控件來提供密切相關而又互斥的選項.
保證每個分段都容易點擊. 爲了保證每個分段的大小有至少44×44像素, 請控制分段的數量. 在iPhone上, 1個分段控件最多包含5個分段.
儘可能地保持每個分段中的文字長度一致. 因爲每個分段都是等寬的, 當文本長度差異很大時看上去會很不協調.
不要在同一個分段控件中混用文字和圖片. 每一個分段都僅可支持純文字或純圖片. 避免在同一個分段控件中, 一些分段裏使用純文字, 另一些分段裏使用純圖.
如果你自定義了分段控件的外觀, 請在必要時調整分段控件中文本的對齊方式. 如果你給分段控件添加了自定義底圖, 請確保控件裏自動居中的文本依然清晰美觀. 你可以通過 bar metrics APIs 來調整分段控件內文本的對齊方式 (想了解更多關於如何定義 bar metrics, 可以參考 UISegmentedControl 中關於自定義API外觀(appearance-customization APIs)的描述).
滑動器 (Slider)
滑動器允許用戶在一個限定範圍內調整某個數值或進程(下圖展示的是 iOS 設置中亮度設置的滑動器, 滑動器的左邊和右邊均爲自定義圖形).
API NOTE 想了解如何在代碼中定義滑動器, 請參考 Sliders.
滑動器是:
- 由一條水平的軌跡和一個滑塊 (滑動器中支持用戶水平拖拽的圓形控件) 組成
- 左邊和右邊支持使用自定義圖片來表述相對的最小值與最大值的含義
- 填充軌道左邊緣最小值之間到滑塊之間的部分
使用滑動器來讓用戶精準地選擇自己想要的值, 或者控制當前的進程.
如果合適的話, 自定義滑動器的外觀. 比如, 你可以:
- 定義滑塊的外觀, 讓用戶一看就知道滑動器當前的狀態
- 在軌跡的左右兩端使用自定義圖片來告訴用戶滑動器的最小值和最大值所代表的含義. 比如說, 一個圖調整圖片尺寸的滑動器可以在最小值的左邊放一張小圖, 在最大值的右邊放一張大圖.
- 根據滑塊所在的位置和當前滑動器的狀態來爲滑動器的軌跡定義不同的顏色
不要將滑動器用作控制音量. 如果需要用到音量滑動器, 可以用 MPVolumeView 類中自帶的系統默認音量滑動器. 注意, 如果當前處於活動狀態的音頻輸出設備不支持音量控件, 音量滑塊將被恰當的設備名稱取代。
步進器 (Stepper)
步進器可以以常數爲幅度來增減當前數值.
API NOTE 想了解如何在代碼中定義步進器, 請參考 Steppers.
步進器是:
- 一個兩段控件, 其中一段默認顯示減號, 另一端默認顯示加號
- 支持自定義圖片
- 不展示用戶更改的值
當用戶想要對數值進行小幅度調整時, 可以使用步進器
當用戶需要大幅度調整數值的時候, 不要使用步進器. 用戶可能會在打印機裏使用步進器來確定打印份數, 因爲這個值的變化幅度通常並不大; 而當用戶需要選擇打印的頁碼範圍時, 使用步進器就會讓操作變得繁瑣, 因爲用戶很可能要點很多下才能選定頁數.
確保步進器所調整的值明顯可見. 步進器自身不展示任何數值, 所以你需要保證讓用戶知道他們正在調整哪一個數值.
開關 (Switch)
開關展示了兩個互斥的選項或狀態.
| On | Off |
 |
 |
API NOTE 想了解如何在代碼中定義開關, 請參考 Switches.
開關是:
- 顯示了一個項存在二元狀態
- 僅在表格視圖中可用
在表格中使用開關按鈕來讓用戶從某一項的兩個互斥狀態中指定一個, 比如是/否(Yes/No), 開/關(On/Off).
你可以使用開關按鈕來控制視圖中的其它 UI 元素. 根據用戶的選擇, 新的列表項可能出現或者消失, 或從激活狀態變爲不激活狀態.
系統按鈕 (System Button)
系統按鈕執行應用中特定的行爲.
API NOTE 在 iOS7 中, UIButtonTypeRoundedRect 已經被重新定義爲 UIButtonTypeSystem. 如果在 iOS6 中使用了圓角矩形按鈕, 在連接到iOS 7的時候會自動替換爲新的系統按鈕. 想了解如何在代碼中定義系統按鈕, 請參考 Buttons.
系統按鈕是:
- 默認狀態下不含邊框, 也不含背景圖
- 可以是圖標或者文字標題
- 支持自定義樣式, 如描邊或者加背景圖 (想自定義按鈕外觀, 可以使用 UIButtonTypeCustom 類型的按鈕, 並且提供背景圖片)
使用系統按鈕來執行某個動作. 當你爲系統按鈕命名時, 請遵循以下方法:
- 使用動詞或動詞短語來描述按鈕所代表的動作. 這種命名方法告訴用戶這個按鈕是可交互的, 也提示了用戶點擊之後會執行什麼操作
- 使用標題式大寫(title-style capitalization). 除了冠詞, 並列連詞以及少於4個字母的介詞外, 標題中每個單詞的首字母均大寫.
- 標題不要太長. 太長的標題會被截斷, 讓用戶難以理解其含義.
- 合適的話, 爲內容區域內的系統按鈕描邊或者加入背景. 大多數情況下, 你可以通過定義一個清晰的按鈕名稱、選擇一個不一樣的標題顏色或提供上下文情景提示來讓用戶知道這是一個按鈕而非普通文本. 但在某些特定的內容區域內, 爲按鈕描邊或者添加背景顏色, 讓用戶迅速地把注意力放到按鈕上, 也是必要的.
以
iPhone 爲例, 給數字按鍵添加圓形邊框迎合了用戶撥電話的心智模型, 而撥打按鈕的背景色更受到用戶矚目從而容易被使用.
文本框 (Text Field)
文本框支持用戶輸入單行的文本.
API NOTE 想了解如何在代碼中定義文本框, 以及在文本框中支持圖片和按鈕, 請參考 Text Fields.
文本框是:
- 高度固定, 包含圓角
- 當用戶點擊它時, 自動喚起輸入鍵盤
- 可以包含系統提供的按鈕, 如書籤按鈕
- 可以展示多種文字樣式 (瞭解更多, 請參考 UITextView)
使用文本框來獲取用戶輸入的少量信息.
你可以自定義一個文本框, 幫助用戶更好地理解如何使用它. 舉個例子, 你可以在文本框的左側或者右側加入自定義圖形, 或者加入系統按鈕, 如書籤按鈕等. 一般來說, 文本框的左側用於表述文本框的含義, 而右側用於展示附加的功能, 如書籤.
合適的話, 在文本框右側加入清除按鈕. 輕擊清除按鈕變可清空當前框內輸入的全部內容, 無論你原本打算在這個按鈕上面展示什麼其它圖片.
如果可以幫助用戶理解的話, 可以在文本框中加入提示文字. 當文本框裏沒有任何其它提示文字時, 會展示佔位符文本(placeholder text), 如名字、地址等.
根據輸入內容的類型來指定不同的鍵盤類型. 舉例來說, 你希望用戶能更方便地輸入網址、密碼或者電話號碼. iOS提供了各種不同的鍵盤類型, 以便用戶輸入不同類型的文本. 想了解可用鍵盤類型, 請參考UITextInputTraits Protocol Reference 中的 UIKeyboardType. 想了解如何在管理你的應用中的鍵盤, 請參考 iOS App Programming Guide 中的 Managing the Keyboard 部分. 但請注意, 由於鍵盤的佈局以及輸入方法是由用戶的系統語言設置決定的, 這是你不能控制的.