譯者注:

本次主要翻譯了iOS Human Interface Guideline的Part 4-UI Element的後半部分,包括控制元件(Controls)和臨時檢視(Temporary Views)。本次翻譯與截至2013年10月20日的蘋果官方文件相匹配。
如您在閱讀中發現任何疏漏,懇切地希望您提出寶貴的意見和建議,感謝。

重要:這是一份針對API或其它相關技術開發而準備的預備文件。儘管文件在專業精確程度上已經過多次審查,它仍不是最終版本。文件僅供已註冊蘋果開發者計劃的開發者使用。蘋果提供這份文件的目的,是幫助開發者根據文件來規劃自身應用的開發技術與介面設計。這些資訊將可能發生變化,您的應用也應當根據最新的作業系統與最終文件進行相應的調整。該文件可能會由於API與相關技術的發展而更新版本。

 

控制元件(Controls)

活動指示器(Activity Indicator)

活動指示器表明任務或程式正在進行中,如下圖所示。
QQ截圖20131016154609

API提示:想要了解如何在程式碼中定義活動指示器,可以參考UIActivityIndicatorView Class Reference.

活動指示器:

  • 當任務進行和載入時旋轉,任務完成後自動消失
  • 不支援使用者互動行為

在工具欄或主檢視中使用活動指示器來告知使用者任務或載入正在進行中,但並不提示該過程何時會結束。

不要使用靜止的活動指示器。使用者會以為該程式停滯了。

用活動指示器來讓使用者知道程式仍在進行中。有些時候,告訴使用者程式沒有停止比告訴他們何時完成更加重要。

可以的話,最好可以設計一個與應用的風格協調的活動指示器。

新增聯絡人按鈕(Contact Add Button)

新增聯絡人按鈕讓使用者將現有聯絡人新增到文字框或者其它文字檢視中。

2

API提示:想要了解如何在程式碼中國定義新增聯絡人按鈕,參考Buttons.

新增聯絡人按鈕:

  • 展示聯絡人列表
  • 幫助使用者將一個聯絡人新增到當前聯絡人按鈕所在的檢視中

使用新增聯絡人按鈕讓使用者在不需要使用鍵盤的情況下就可以方便地訪問到聯絡人。舉個例子,在新建郵件的介面中,使用者可以點選該按鈕來新增收件人,而不需要用鍵盤輸入收件人的名字。

由於新增聯絡人按鈕屬於鍵盤輸入聯絡人方法的替代品,我們不推薦在不支援鍵盤輸入的介面中使用新增聯絡人按鈕。

日期時間選擇器(Date Picker)

日期時間選擇器展示關於日期和時間的元件,比如小時,分鐘,天,以及年。

3

API提示:想要了解如何在程式碼中定義日期選擇器,請參考 Date Pickers.

日期時間選擇器:

  • 最多可以展示4個獨立的滑輪,每一個滑輪表示一個不同的值,比如月份或小時等
  • 在每個滑輪的中央使用深色字型來表示當前選中的值
  • 日期時間選擇器的大小與iPhone鍵盤的大小相同,並且不可更改
  • 包括四種模式,每一種模式代表了一組不同的值:

· 日期和時間。日期和時間模式(預設模式)包含日期、小時、和分鐘,以及一個可選的AM/PM值。

· 時間。時間模式包括小時和分鐘,以及可選的AM/PM值。

· 日期。日期模式包括月份,天以及年三個值。

· 倒數計時器。倒數計時器模式展示了小時和分鐘值。你可以精確地設定總共的倒數計時間,倒數計時的最大值為23小時59分鐘。

使用日期時間選擇器來讓使用者選擇時間,而不是讓使用者自己輸入一個包含了日期、時間等多個部分的時間值。

儘量地讓使用者在當前內容中使用日期選擇器。最好避免使用者在使用日期選擇器的時候要進入另外一個介面。在iPad上,日期時間選擇器可能會出現在一個浮層中,或者嵌入在當前內容裡。

有必要的時候,改變分鐘滑輪的單位刻度。在預設情況下,分鐘滑輪包含從0到59共60個值,如果你要展示一個顆粒度較大的時間,你可以讓分鐘滑輪的單位刻度變大,只要這個刻度可以整除60。比如說你可能會設定每15分鐘為一個刻度,此時分鐘滑輪就有4個值,0、15、30、45。

詳情展開按鈕(Detail Disclosure Button)

詳情展開按鈕展示了與該項相關的更多詳細資訊與功能描述。

5

API提示:想要了解如何在程式碼中定義詳情展開按鈕,可以參考 UITableViewCell Class Reference 和 Buttons.

詳情展開按鈕以一個單獨的檢視展示特定專案的更多詳情資訊與功能。

當詳情展開按鈕在表格行中出現時,點選表格行的其它區域不會啟用此按鈕,只會選中該行,或者觸發app中其它自定義的行為。

一般來說,你會在一個表格檢視中使用詳情展開按鈕來讓使用者知道更多關於這個列表項的資訊。當然你也可以將這個按鈕用在其它型別的檢視中來為使用者展示更多與特定專案相關的資訊和功能。

資訊按鈕(Info Button)

資訊按鈕展示了app的配置資訊,有時候它會出現在當前檢視的背面。

5

API提示:想要了解如何在程式碼中定義資訊按鈕,可以參考Buttons.

iOS包含了兩種資訊按鈕樣式:適用於淺色內容上的深色按鈕,以及適用於深色內容上的淺色按鈕。

使用資訊按鈕來顯示app的配置資訊或選項。你可以根據自己app的UI風格來選擇最為協調的資訊按鈕樣式。

標籤(Label)

標籤用於放置靜態文字。

6

API提示:想要了解如何在程式碼中定義標籤,可以參考UILabel Class Reference.

標籤可以:

  • 展示任意數量的靜態文字
  • 禁止除了複製文字外的任何使用者互動行為

你可以使用標籤來命名或解釋你的部分UI,又或者用它來給使用者提供一些簡單的資訊。標籤最適合拿來展示相對簡單的文字資訊。

保證你的標籤清晰易讀。最好支援動態文字(Dynamic Type),並使用 UIFont 中的preferredFontForTextStyle來獲得標籤中的展示文字。如果你要用自定義字型的話,請慎重選擇字型種類,不要以犧牲清晰度為代價來換取花哨的顏色和字型效果。(想要了解關於app中字型使用的指南,可以參考 Color and Typography;想要了解更多動態文字的內容,可以參考 Text Programming Guide for iOS 裡面 的 Text Styles 部分。)

網路活動指示器(Network Activity Indicator)

網路活動指示器在狀態列中出現,表示網路活動正在進行。

7

API提示:你可以在程式碼中使用 UIApplication Method networkActivityIndicatorVisible 來控制該活動指示器的可見性。

網路活動指示器:

  • 出現在狀態列中,當網路活動正在進行時它會旋轉,在活動停止時它則消失
  • 不支援使用者互動行為

當你的app正在連結網路,而這個連線過程將會持續好幾秒的時候,你可以通過網路活動指示器來給使用者以反饋。如果程式所需時間很短,則不需要用到它,因為很可能在使用者注意到它之前,它就消失了。

頁面控制元件(Page Control)

頁面控制元件告訴使用者當前共開啟了多少個檢視,還有他們正處在其中哪一個。

8

API提示:想要了解如何在程式碼中定義頁面控制元件,可以參考 Page Controls.

頁面控制元件:

  • 包含一系列圓點,圓點的個數代表了當前開啟的檢視數量(從左到右,這些圓點代表了檢視開啟的先後順序)。
  • 預設情況下,使用不透明點來標識當前開啟的檢視,使用半透明點來表示所有其它檢視。
  • 不支援使用者訪問不連續的檢視
  • 當檢視數量超過頁面寬度可承載的氛圍時,點的大小和間距並不會因此變小,如果需要顯示的點超過一定數量,系統會把它截斷。

當你的app中所有的檢視都屬於同級的時候,你可以使頁面控制元件。

當你的app結構存在資訊層級,請不要使用頁面控制元件。因為頁面控制元件不能讓使用者跟蹤自己的訪問路徑,回到上一級。

將頁面控制元件垂直居中放置於當前開啟檢視的底邊與螢幕底邊之間,這樣可以保證它的可見性而又不會對內容造成干擾。避免展示太多的點,一般來說,iPhone豎屏方向最多可以容納差不多20個點。

選擇器(Picker)

選擇器展示了一組值,使用者可以從中選擇一個。

9

API提示:想要了解如何在程式碼中定義選擇器,請參考UIPickerView Class Reference.

選擇器:

  • 是日期時間選擇器的通用模式
  • 包括一個或多個滑輪,每個滑輪含有一組值
  • 當前選中的值在中間,以深色標識
  • 不可以自定義大小(選擇器的大小與iPhone的鍵盤相同)

使用選擇器可以讓使用者更容易從一系列不同的值中間進行選擇。

一般來說,當使用者對整組值都比較熟悉的時候,可以使用選擇器。由於當滑輪靜止的時候,大部分的數值會被隱藏,最好是在使用者對所有數值均有預期的情況下才使用選擇器。當你需要展示一大組使用者並不熟悉的選項,此種選擇器可能不太適合。

儘可能讓讓使用者在當前檢視中使用選擇器。不要讓他們在使用選擇器時還要進入其它的檢視。

如果你需要展示的備選項數量很多,考慮使用表格檢視(Table View)而不是選擇器。因為表格檢視的高度較大,內容滾動起來會更快。

進度檢視(Progress View)

進度檢視展示了任務或程式的進度(下圖是iOS預設郵件App的工具欄)。

10

API提示:想要了解更多如何在程式碼中定義進度檢視,參考UIProgressView Class Reference.

進度檢視:

  • 是一條軌跡,隨著程式的進行從左向右進行填充
  • 不支援使用者互動行為

iOS定義了兩種進度檢視樣式:

  • 預設(Default).預設樣式適合用在app的主要內容區中。
  • 進度條(Bar).此樣式比預設樣式細,適合用在工具欄中。

當一個任務存在明確的程式,可以使用進度條來給與使用者反饋,尤其是告訴使用者這個任務大約需要多少時間才能完成。

可以的話,請根據你的app的風格來設計進度條的外觀。你可以自定義進度條的底色以及軌跡顏色,也可以直接使用圖片。

重新整理控制元件(Refresh Control)

重新整理控制元件執行使用者觸發的內容重新整理——一個典型的例子,它常在表格中出現(下圖展示的是iOS預設的郵件app的mailbox列表頁)。

11

API提示:想要了解如何在程式碼中定義重新整理控制元件,請參考 UIRefreshControl Class Reference.

重新整理控制元件:

  • 看起來類似活動指示器
  • 可以出現在標題中
  • 預設狀態下不可見,當使用者在表格上緣往下拖拽以重新整理內容時才出現

就算你使用了重新整理控制元件,也不要因此就不支援內容自動重新整理。儘管使用者喜歡在執行重新整理操作時內容立刻重新整理,他們也同樣會喜歡內容自動重新整理。如果過於一來使用者自己執行所有重新整理操作的話,那些不會自動重新整理的使用者就會疑惑,為何你app中的資料永遠都不更新。一般來說,重新整理控制元件給了使用者多一個選擇,讓他們可以立刻獲得最新的內容,但同時,你也不能奢望使用者會主動獲取所有的更新資訊。

只有在必要的時候才加短標題。特別需要注意的是,不要使用短標題來描述重新整理控制元件怎麼使用。

圓角矩形按鈕(Rounded Rectangle Button)

iOS 7已經不再使用圓角矩形按鈕,而是使用了新的系統按鈕——型別為UIButtonTypeSystem的UI按鈕(UIButton).使用指南可參考 System Button.

分段控制元件(Segmented Control)

分段控制元件是一組分段的線性集合,每一個分段的作用類似按鈕,點選之後將切換到相應的檢視。

12

API提示:想要了解如何在程式碼中定義分段控制元件,請參考 Segmented Controls.

分段控制元件:

  • 由兩個或以上的分段組成,每一個分段的寬度相同,與分段的數量成比例(分段數量越多,則寬度越小);
  • 可以包含文字或者圖片

使用分段控制元件來提供密切相關而又互斥的選項。

保證每個分段都容易點選。為了保證每個分段的大小有至少44×44畫素,請控制分段的數量。在iPhone上,1個分段控制元件最多包含5個分段。

儘可能地保持每個分段中的文字長度一致。因為每個分段都是等寬的,當文字長度差異很大時看上去會很不協調。

不要在同一個分段控制元件中混用文字和圖片。每一個分段都僅可支援純文字或純圖片。避免在同一個分段控制元件中,一些分段裡使用純文字,另一些分段裡使用純圖。

如果你自定義了分段控制元件的外觀,請在必要時調整分段控制元件中文字的對齊方式。如果你給分段控制元件新增了自定義底圖,請確保控制元件裡自動居中的文字依然清晰美觀。你可以通過bar metrics APIs 來調整分段控制元件內文字的對齊方式(想要了解如何定義bar metrics,可以參考UISegmentedControl 中關於自定義API外觀(appearance-customization APIs)的描述)。

滑塊(Slider)

滑塊允許使用者在一個限定範圍內調整某個數值或程式(下圖展示的是iOS設定中亮度設定的滑塊,滑塊的左邊和右邊均為自定義圖形)。

13

API提示:想要了解如何在程式碼中定義滑塊,請參考 Sliders.

  • 由一條水平的軌跡和一個Thumb(滑塊中支援使用者水平拖拽的圓形控制元件)組成
  • 左邊和右邊支援使用自定義圖片來表述相對的最小值與最大值的含義
  • 填充軌道左邊緣最小值之間到Thumb之間的部分

使用滑塊來讓使用者精準地選擇自己想要的值,或者控制當前的程式。

如果合適的話,自定義滑塊的外觀。比如,你可以:

  • 定義Thumb的外觀,讓使用者一看就知道滑塊當前的狀態
  • 在軌跡的左右兩端使用自定義圖片來告訴使用者滑塊的最小值和最大值所代表的含義。比如說,一個圖調整圖片尺寸的滑塊可以在最小值的左邊放一張小圖,在最大值的右邊放一張大圖。
  • 根據Thumb所在的位置和當前滑塊的狀態來為滑塊的軌跡定義不同的顏色

步進器(Stepper)

步進器可以以常數為幅度來增減當前數值。

14

API提示:想要了解如何在程式碼中定義步進器,請參考 Steppers.

步進器:

  • 是一個兩段控制元件,其中一段預設顯示減號,另一端預設顯示加號
  • 支援自定義圖片
  • 不展示使用者更改的值

當使用者想要對數值進行小幅度調整時,可以使用步進器

當使用者需要大幅度調整數值的時候,不要使用步進器。使用者可能會在印表機裡使用步進器來確定列印份數,因為這個值的變化幅度通常並不大;而當使用者需要選擇列印的頁碼範圍時,使用步進器就會讓操作變得繁瑣,因為使用者很可能要點很多下才能選定頁數。

確保步進器所調整的值明顯可見。步進器自身不展示任何數值,所以你需要保證讓使用者知道他們正在調整哪一個數值。

開關按鈕(Switch)

一個開關按鈕展示了兩個互斥的選項或狀態。

15

API提示:想要了解如何在程式碼中定義開關,參考 Switches.

開關按鈕:

  • 顯示了一個項存在二元狀態
  • 僅在表格檢視中可用

在表格中使用開關按鈕來讓使用者從某一項的兩個互斥狀態中指定一個,比如是/否(Yes/No),開/關(On/Off)。

你可以使用開關按鈕來控制檢視中的其它UI元素。根據使用者的選擇,新的列表項可能出現或者消失,或從啟用狀態變為不啟用狀態。

系統按鈕(System Button)

系統按鈕執行app中定義的行為。

16

API提示:在iOS 7中,UIButtonTypeRoundedRect已經被重新定義為 UIButtonTypeSystem. 如果在iOS 6中使用了圓角矩形按鈕,在連線到iOS 7的時候會自動替換為新的系統按鈕。想要了解如何在程式碼中定義系統按鈕,參考 Buttons.

系統按鈕:

  • 預設狀態下不含邊界,也不含背景圖
  • 可以是圖示或者文字標題
  • 支援自定義樣式,如描邊或者加背景圖(想要自定義按鈕外觀,可以使用 UIButtonTypeCustom 型別的按鈕,並且提供背景圖片)

使用系統按鈕來執行某個動作。當你為系統按鈕命名時,請遵循以下方法:

  • 使用動詞或動詞短語來描述按鈕所代表的動作。這種命名方法告訴使用者這個按鈕是可互動的,也提示了使用者點選之後會執行什麼操作
  • 使用標題式大寫(title-style capitalization,每個單詞的首字母均大寫)。除了冠詞,並列連詞以及少於4個字母的介詞外,標題中每個單詞的首字母均大寫。
  • 標題不要太長。太長的標題會被截斷,讓使用者難以理解其含義。

17

合適的話,為內容區域內的系統按鈕描邊或者加入背景。大多數情況下,你可以通過定義一個清晰的按鈕名稱、選擇一個不一樣的標題顏色或提供上下文情景提示來讓使用者知道這是一個按鈕而非普通文字。但在某些特定的內容區域內,為按鈕描邊或者新增背景顏色,讓使用者迅速地把注意力放到按鈕上,也是必要的。

以iPhone為例,給數字按鍵新增圓形邊框強化了使用者撥電話號碼時的心理模型,而結束(End)和隱藏(Hide)按鈕的背景色讓使用者擁有了更大的點選範圍。

文字框(Text Field)

文字框支援使用者輸入單行的文字。

18

API提示:想要了解如何在程式碼中定義文字框,以及在文字框中支援圖片和按鈕,請參考 Text Fields.

文字框:

  • 高度固定,包含圓角
  • 當使用者點選它時,自動喚起輸入鍵盤
  • 可以包含系統提供的按鈕,如書籤按鈕(Bookmarks)
  • 可以展示多種文字樣式(瞭解更多請參考 UITextView)

使用文字框來獲取使用者輸入的少量資訊。

你可以自定義一個文字框,幫助使用者更好地理解如何使用它。舉個例子,你可以在文字框的左側或者右側加入自定義圖形,或者加入系統按鈕,如書籤按鈕等。一般來說,文字框的左側用於表述文字框的含義,而右側用於展示附加的功能,如書籤。

合適的話,在文字框右側加入清除按鈕。輕擊清除按鈕變可清空當前框內輸入的全部內容,無論你原本打算在這個按鈕上面展示什麼其它圖片。

如果可以幫助使用者理解的話,可以在文字框中加入提示文字。當文字框裡沒有任何其它提示文字時,會展示佔位符文字(placeholder text),如名字、地址等。

根據輸入內容的型別來指定不同的鍵盤型別。舉例來說,你希望使用者能更方便地輸入網址、密碼或者電話號碼。iOS提供了各種不同的鍵盤型別,以便使用者輸入不同型別的文字。想要了解可用鍵盤型別,可以參考 UITextInputTraits Protocol Reference中的UIKeyboardType.想要了解如何在管理你的應用中的鍵盤,請參考iOS App Programming Guide中的Managing the Keyboard部分。但請注意,由於鍵盤的佈局以及輸入方法是由使用者的系統語言設定決定的,這是你不能控制的。

 

臨時檢視(Temporary Views)

警告框(Alert)

警告框用於告知使用者一些會影響到他們使用app或裝置的重要資訊。

19

API提示:想要了解如何在程式碼中定義警告,參考UIAlertView Class Reference.

警告框:

  • 必須包含標題,有時候會包含正文文字
  • 包含一個或多個按鈕

一般來說,警告框警告出現的頻率較低,也正因為如此,警告的出現通常會讓使用者額外重視。請嚴格控制你的app中警告的個數,並且保證每一個警告都能提供重要的資訊,或者有用的選項。

避免出現不必要的警告框。一般來說,在以下情景中,是不需要用到警告框的:

20

當你在設計警告文案的時候,瞭解以下這些定義非常有用:

  • 標題式大寫(Title-style capitalization)指的是除了冠詞,並列連詞以及少於4個字母且不處在第一個單詞位置上的介詞外,標題中每個單詞的首字母均大寫。
  • 句子式大寫(Sentence-style capitalization)指的是第一個字母大寫,其餘除了專有名詞和專有形容詞外的字母均小寫

簡明扼要地描述當前情景,並告訴使用者他們可以做什麼。理想情況下,警告框中的文字應該給與使用者足夠的情景和上下文聯想,讓他們可以清楚地知道為什麼警告會出現,同時幫助他們判斷自己應該點哪個按鈕。

保證標題足夠簡短,最好在一行之內。過長的標題讓使用者很難快速理解它的意思,還可能會被截斷。

21

如果可以的話,使用句子片段而非完整的句子。一個簡潔清晰的狀態描述往往比一個完整的句子更容易理解。

儘可能的精煉你的標題文字,讓警告框即使沒有下面的正文資訊也能完全讓使用者理解。舉個例子,當你使用一個問題,或者兩個短句來作為警告框標題的話,很可能你並不需要新增文字資訊。

不用刻意避免在警告框中使用消極負面的文案。使用者們理解大多數警告框是為了告訴他們發生的問題,或者對他們目前的狀態作出警告。因此消極但清晰直接的文案優於積極但晦澀間接的文案。

儘可能地避免使用”你”,”你的”,”我”,”我的”這類字眼。有時候,這些直接指向的字眼容易引起歧義,有時候甚至會被誤認為是一種冒犯。

適當地使用大寫和標點符號,尤其是在以下這些場景中:

22

如果你必須為警告框新增正文文字,請使用一個完整的短句。可能的話,儘量保證句子在1到2行之間。如果句子太長,使用者會需要滾動才能看完,這樣的體驗很糟。使用句子式大寫,並在句末加上適當的標點符號。

23

 避免在文字中詳細描述“該按哪個按鈕”而導致文字過長。理想情況下,表意明確的警告文案和邏輯清晰的按鈕文案已經足以讓使用者正確判斷自己該按哪個按鈕了。但如果你一定要在文案中描述這些內容,請遵循以下原則:

  • 確定使用輕擊(tap)來描述這個選擇操作,不要用觸控(touch)、點選(click)或者選擇(choose)這類字眼。
  • 不要用引號,但保證大寫

確保警告框在豎屏和橫屏中均顯示正常。橫屏模式下警告框的高度會受到限制,其大小與豎屏下可能會有區別。我們推薦您限定好警告框的最大高度,保證在豎屏和橫屏模式下文字均能不需要滾動便可完整地顯示。

一般情況下,使用兩個按鈕的警告框。兩個按鈕的警告框是最為常見和有用的,因為它最便於使用者在兩個按鈕中做選擇。單按鈕警告框不那麼有用,因為它通常只是起到告知的作用,並未給予使用者控制當前狀態的能力。多於兩個按鈕的警告框太過複雜,應該儘可能地避免使用。如果你在警告框中設計了太多按鈕,它也許會導致警告框被強制滾動,這也是一個非常糟糕的體驗。

提示:如果你需要在警告框中給與使用者超過2個選項,可以考慮使用操作列表來代替警告框。

25

正確地放置按鈕。理想情況下,最容易點選也最不容易點錯的按鈕符合兩個條件:它代表了使用者最可能會選擇的操作,即使使用者一時不注意誤點了它,也不會造成嚴重問題。尤其是:

  • 如果這個按鈕不會造成損害性結果,又是使用者最有可能會選擇的操作,那麼它應該放在右邊,取消按鈕則應該放在左邊
  • 如果這個按鈕會造成損害性後果,又是使用者最有可能會選擇的操作,那麼它應該被放在左邊,取消按鈕應該放在右邊

提示:一般來說,當警告框出現的時候,按Home鍵將會從該app裡切回主螢幕,此時Home鍵的效果類似於取消按鈕——當使用者回到app中的時候,警告框將消失,操作也不會被執行。

為按鈕設計簡短而邏輯清晰的文案。好的按鈕文案一般只有1到2個單詞,描述使用者點選按鈕後的結果。設計文案時可以遵循以下指南:

  • 跟其它所有按鈕一樣,使用標題式大寫,而且不需要標點符號
  • 儘可能的使用與警告文案直接相關的動詞或動詞片語,如”取消(Cancel)”,”允許(Allow)”和”回覆(Reply)”等。
  • 當沒有更好的選擇的時候,可以使用”OK”.避免使用”是(Yes)”或”否(No)”。
  • 避免使用”你”,“你的”,“我”,“我的”這類字眼。含有這些字眼的文案可能會指代不清,還有可能造成冒犯。

操作列表(Action Sheet)

操作列表展示了與使用者觸發的操作直接相關的一系列選項。

26

API提示:想要了解如何在程式碼中定義操作列表,可以參考Action Sheets.

操作列表:

  • 由使用者某個操作行為觸發
  • 包含兩個或以上的按鈕

使用操作列表來:

提供完成一項任務的不同方法。操作列表提供一系列在當前情景下可以完成當前任務的操作,而這樣的形式不會永久佔用頁面UI的空間。

在使用者完成一項可能有風險的操作前獲得使用者的確認。操作列表讓使用者有機會停下來充分考慮當前操作可能導致的危險結果,併為他們提供了一些其它的選項,尤其是在以下這些情景下:

27

無論在哪種裝置中,使用紅色文字來表示可能存在破壞性的操作。在操作列表的頂部使用文字顏色為紅色的按鈕,因為越靠近列表頂部的操作越容易引起使用者注意。在iPhone裡,潛在風險的操作離列表底部越遠,使用者在關注Home鍵的時候就越不容易誤點它。

28

避免讓使用者滾動操作列表。如果你的操作列表中存在過多按鈕,使用者必須要滾動才能看完所有操作。這樣的體驗是可能讓使用者不安,因為他們要花更多的時間來充分理解每個選項的區別。此外,使用者在滾動的過程中將很有可能誤點其它按鈕。

模態檢視(Modal View)

模態檢視是一個以模態形式展現的檢視,它為當前任務或當前工作流程提供獨立的、自包含的(self-contained)功能。

29

API提示:想要了解如何在場景中定義模態檢視,請參考UIViewController Class Reference.

模態檢視:

  • 佔據整個螢幕,在iPad中,它也可能佔據整個父檢視(parent view)的區域
  • 包含完成當前任務所需的文字和控制元件
  • 通常也會包含一個完成任務的按鈕(點選後即可完成任務,當前模態檢視也會消失),和一個取消按鈕(點選後即放棄當前任務,同時當前模態檢視消失)

當需要使用者完成與你的app中的基礎功能相關的、獨立的任務的時候,可以使用模態檢視。模態檢視尤其適用於那些所需元素並非常駐在app主要UI中、又包含多個步驟的子任務。

在iPad上,根據當前任務的種類和你的app的整體視覺風格來選擇適當的模態檢視。你可以使用以下定義的任何一種模態檢視樣式:

30

在iPad上,不要讓模態檢視覆蓋在彈出層之上。除了警告框外,沒有任何元素應該覆蓋在彈出層上面。除非極其少有的情況下,使用者在彈出層內進行的操作結果必須要以模態檢視的形式展現,即便是這個時候,也請先將彈出層關閉,再出現模態檢視。

在iPhone上,確保你的模態檢視看起來與你的app的整體視覺風格相協調。舉個例子,如果一個模態檢視中含有導航條和取消或完成任務的按鈕,這裡的導航條樣式應該與你的app中導航條一樣。

無論是哪種裝置,合適的話,在模態檢視裡加入可以說明任務內容的標題。你可能還需要在模態檢視裡加入一些補充文字,來清楚地闡明任務內容,並提供一些任務指南。

無論是哪種裝置,選擇一個適當的過渡動畫來展示模態檢視。使用與你的app一致的過渡動畫,讓使用者可以準確地理解當前頁面內容的轉變與模態檢視的出現。關於這一點,你可以指定以下任意一種過渡動畫:

  • 垂直出現(Vertical).模態檢視從底部邊緣滑入螢幕,也同樣從螢幕底部滑出(預設模式)。
  • 彈出(Flip).當前檢視從右往左水平滑動,露出模態檢視。從視覺上看,模態檢視好像原來就處於當前檢視的下面,當前檢視移開時,它便出現了。離開模態檢視時,原先的父檢視從左邊滑回螢幕右邊。

如果你要改變當前的過渡動畫樣式,請確保這種改變對於使用者而言是有用而且有意義的。使用者很容易便能感知到這些改變,還會認為這些改變存在特別的意義。最好能設計出一種符合邏輯並始終保持一致的過渡方式,讓使用者容易感知並且記憶。在沒有充分理由支援的情況下,最好不要改變這些預設的過渡方式。

翻譯原文下載:iOS  Human Interface Guidelines
中文翻譯PDF下載:ios人機介面指南(UI元素(下))ISUX原創翻譯

感謝你的閱讀,本文由 騰訊ISUX 版權所有,轉載時請註明出處