HIG iOS 翻譯 Controls|操作

benchen900
30 min readOct 24, 2021

--

Controls 操作
Buttons 按鈕
Color Wells
Context Menus
Edit Menus 編輯選單
Labels 標籤
Page Controls 頁面操作
Pickers 選擇器
Progress Indicators 進度指示器
Refresh Content Controls 重整操作
Segmented Controls
Sliders
Steppers
Switches
Text Fields 文字框

Buttons 按鈕

原文連結

系統提供一系列按鈕樣式,支援廣泛的自訂,同時提供內建互動、無障礙、外觀適應。此外,有多種系統定義按鈕樣式,像是togglepop-uppull-down,支援多種特定使用狀況

開發者指南請參閱 UIButton (UIKit)和Button (SwiftUI)

系統按鈕*¹

系統定義四種按鈕樣式,每一種均有三種尺寸。每一種都不同的視覺層次,幫助你在App中傳達操作的層級

你可以將系統按鈕配置任何樣式和尺寸。預設系統按鈕使用特定尺寸半徑圓角,並使用App色彩。若有需要你可以改變這些配置,除了操作內容排版和活動指示器的屬性。開發者指南請參閱UIButton.Configuration

創建使用者可以立即理解的按鈕 你可以使用Glyph(或Icon)、標題或兩者同時來傳達按鈕的意圖。若Glyph合理使用,則考慮使用現有Glyph或SF Symbol(指南請參閱SF Symbols)。文字請使用簡短標題且精準描述按鈕的意圖。使用title-style capitalization且以動詞為開頭的標題傳達按鈕的操作,舉例,幫助人們將物品加入購物車的按鈕可能寫作“加入購物車”

如果需要提供細節請加入副標題 按鈕的標題下可以加入副標題。由於副標題使用比標題更小的字級,用副標題來傳達與按鈕相關的次要資訊很有效。舉例,你可以在“加入購物車”的副標題顯示購物車內的項目數量。避免用副標題來說明按鈕的作用,包含視圖、標題、圖像的按鈕應提供所有資訊讓人們理解按鈕

當你需要提供操作未完成的回饋,配置顯示活動指示器的按鈕 在按鈕中顯示活動指示器可以保留UI空間,同時清楚傳達延遲的原因。若它確實幫助人們了解,你也可以在活動指示器一旁配置不同標籤的按鈕。舉例,標籤“結帳”可以變成“結帳中”同時看見活動指示器,當人們點擊你配置的按鈕後延後出現,系統顯示活動指示器在原有的之後,或是替代的標籤、隱藏按鈕圖像。開發者指南請參閱showsActivityIndicator

最有可能操作的按鈕使用填滿的外觀 填滿的樣式最為醒目,它幫助人們快速識別最有可能點擊的按鈕。同時,避免使用太多填色按鈕。太多填色按鈕將導致認知疲乏,人們將花時間比較這些相似的選項

使用“Not Size”樣式在多個選項中視覺區別 當你使用兩個或更多相同尺寸的按鈕,使得這些選項成為一致的選擇組合。若你想要再組合中強調特定或最有可能的選項,在該選項使用更醒目的按鈕樣式

系統按鈕也有他所屬的Role,它定義了App中按鈕的語義。按鈕可以是以下Role的其一:

  • 一般 無特殊意涵
  • 首要 此按鈕為預設按鈕,也就是說,這個按鈕是人們最有可能選擇之
  • 取消 按鈕用以取消當前的操作
  • 破壞性 此按鈕的操作將導致資料的損毀

你可以配置額外按鈕Role的外觀。舉例,系統在首要按鈕使用粗體文字,然而破壞性按鈕使用紅色。開發者指南請參閱UIButton.Role (UIKit)和role (SwiftUI)

將人們最可能選擇的按鈕配置首要Role 首要按鈕須回應Return鍵,讓人們快速確認他們的選擇。此外,當按鈕在暫時的狀態中,像是Sheet、編輯視圖或Alert,為它分配首要Role表示當人們選擇Return時視圖將自動關閉

不要將破壞性動作配置於首要Role,儘管它是最可能選擇的操作 由於它的顯眼,有時人們沒有閱讀而直接選擇。在非破壞性的按鈕使用首要Role,避免人們因此遺失資訊

Toggle 按鈕

Toggle按鈕是系統按鈕的其中一種,在兩種相反狀態中切換,如開、關或顯示、隱藏。為區分狀態,Toggle按鈕使用兩種不同的視覺樣式。舉例,Calendar的Toggle按鈕使用兩種背景外觀,在月的檢視畫面中顯示和隱藏當日的活動

注意
Toggle按鈕的功能和Switch類似,但你可以在清單或表格以外使用Toggle按鈕,你不需用標籤來解釋它的意圖

開發者指南請參閱changesSelectionAsPrimaryAction

用Toggle按鈕幫助人們管理內容或視圖的狀態 除了用Toggle按鈕改變狀態,人們預期按鈕指出當前的選擇。若你需要啟用狀態管理以外的操作,使用system button或其他特定按鈕,像是pop-uppull-down按鈕

避免僅僅以顏色來傳達Toggle按鈕的狀態 預設中,Toggle按鈕使用App色彩來表示狀態開啟,而不同的色彩(或灰色)表示關閉。如你自訂Toggle按鈕,確保人們能意會按鈕狀態的差別。舉例,除了使用高對比色彩,你也可以用其他視覺變化,像是背景形狀或是按鈕內容的變化

Pop-Up按鈕

Pop-Up按鈕是系統按鈕的其中一種,顯示多個互斥項目的選單。當人們從Pop-Up按鈕選取其中項目,選單即刻關閉並更新當前選取項目所有的內容

開發者指南請參閱changesSelectionAsPrimaryActionshowsMenuAsPrimaryAction.

用Pop-Up按鈕來顯示互斥選項或狀態的扁平清單 Pop-Up按鈕讓人們選擇內容或環境的狀態。若你提供清單的操作,讓人們選取多個項目或提供次要選單,使用pull-down button取代

提供有用的預設選項 未開啟的Pop-Up按鈕將顯示為當前選擇的項目,但如果人們還未選取任何項目,應顯示你預設的項目。可能的話,將人們最有可能選取的項目作為預設項目

當空間有限而並不需要顯示所有項目時,考慮使用Pop-Up按鈕 雖然segmented control也可以顯示一組互斥選項,它通常需要比Pop-Up按鈕更多空間,因為它會一直顯示著每個項目

Pull-Down按鈕

Pull-Down按鈕是系統按鈕的其中一種,顯示與按鈕直接相關項目或操作的選單。在人們選取完Pull-Down按鈕中的項目,選單即刻關閉並且顯示所選取的操作。人們也可以點擊其他地方來離開選單而無需選取。不像Pop-Up按鈕,Pull-Down按鈕永遠顯示相同內容,不論人們選擇選單中的任何項目

注意
你也可以讓人們以特定手勢或按鈕來打開Pull-Down按鈕。舉例在iOS14或之後,Safari可以透過點擊或長按分頁按鈕來顯示分頁相關的操作,像是新增分頁或關閉所有分頁

開發者指南請參閱showsMenuAsPrimaryAction

與按鈕直接相關的操作請使用Pull-Down按鈕 選單幫助人們理解按鈕的目標或自訂行為,而無需在介面有額外的按鈕,例如:

  • 新增按鈕可以顯示選單讓人們指定他們想新增的項目
  • 分類按鈕可以用選單讓人們選擇特定分類
  • 返回按鈕可以讓人們返回特定頁面

避免將所有視圖的操作放在一個Pull-Down按鈕 視圖的主要操作應易於發現,不應將它放在Pull-Down按鈕中。在Pull-Down按鈕中放入過多操作將使人們難以專注,同事表示人們至少需要點擊兩次來操作

考慮在主界面中不顯眼的位置使用“More”的Pull-Down按鈕 More按鈕幫助你在有限空間中容納多量的項目,但他也同時不容易被發現。雖然人們通常理解More按鈕提供與當前狀態相關的額外功能,省略Glyph無法讓人們預測其中的內容。為了設計有效的More按鈕,衡量尺寸的便利性與可否被發現,找到適用於App的平衡點。透過ellipsis.circle symbol來創建More按鈕(查看SF Symbols以了解更多相關資訊)

當Pull-Down按鈕具破壞性,詢問並確認他們的意願 選單使用紅色文字來提醒操作具有潛在破壞性。當人們選擇破壞性動作,系統將顯示Action Sheet(iOS)或Popover(iPadOS)來確認他們的選擇或是取消動作。由於Action Sheet將出現在和選單不同的位置,可以讓人們避免失手而遺失資料

在Pull-Down按鈕中使用分隔線來區隔項目 創建視覺群組能讓人們快速掃視選單。舉例,Files中的More按鈕使用分隔線讓人們區分檢視和分類相關的內容。使用三個以上的群組會使得選單難以快速理解

如果有幫助的話,在選單物件中顯示Glyph 若你需要上項目的意涵更清楚,你可以在標題後方使用Glyph或圖像。使用SF symbol來提供熟悉的體驗,同時確保Glypgh和文字對其且大小一致

如果能使意義更明確,顯示簡潔的選單標題 一般來說,Pull-Down按鈕的內容與破壞性選單內容合併,提供人們所需語境

如果能使主選單更容易理解及使用,考慮加入次選單 當人們從主選單點選項目時出現次選單。人們選取次選單項目後,次選單即關閉,保留主選單開啟。群組於次選單的項目能夠讓主選單縮減、更容易閱讀,儘管它需要額外互動。如果你需要使用次選單,確保標題或Glyph清楚識別,讓人們無需打開才知曉裡面的內容

Close Buttons 關閉按鈕

關閉按鈕將關閉母視圖。將關閉按鈕顯示於Sheet或資料庫中的獨立視圖頂部末端

Close Buttons

A close button closes its parent view. Display a close button in the top trailing corner of a sheet or a self-contained view in a collection.

開發者指南請參閱UIButton.ButtonType.close

在視圖中提供關閉或完成按鈕,勿同時提供兩者 關閉和完成按鈕街能夠離開視圖,但由於他們不是相反的操作,提供兩者將導致困惑。一般來說,在人們做出更動後使用完成按鈕。你也可以加入取消按鈕,當人們想要捨棄更動並離開時。關閉按鈕不代表他儲存或捨棄更動,因此它僅僅在不可編輯的視圖或人們可以移除的視圖組合中有較好的作用

當視圖無需包含兩個相反操作來離開時,使用關閉按鈕 舉例,Sheet提供兩種相反操作像取消和完成,加入關閉按鈕將導致困惑,因為它無法清楚表示將對內容造成的影響

常用按鈕種類

由於這些按鈕一致的在系統中串連,人們很快就能夠識別這些特定的按鈕種類。舉例,Info按鈕將顯示和當前內容或視圖的細節

如果你創建了和常用按鈕相似的按鈕,確保它符合人們預期所運作 舉例,如果你依照plus.circle SF symbol創建按鈕,人們會認為能夠透過按鈕在當前的視圖中新增物件。相同的,按鈕使用info.circle symbol表示他是顯露資訊的按鈕

在清單或是表格中使用Info按鈕只顯露更多關於橫列的資訊 Info按鈕,當它出現在清單橫列時被稱作detail disclosure button,不會啟用整個表格或清單的瀏覽。如果你需要讓人們深入清單或表格橫列的子視圖,使用disclosure indicator accessory操作,檢視disclosureIndicator(displayed:options:)(清單)或disclosureIndicator(表格)

Color Well

原文連結

點擊時,Color Well顯示系統提供的Color Picker。人們可以使用Color Picker選擇色彩應用於文字、形狀、標註工具和其他元素

Color Picker的分頁介面讓人們從網格或色譜中選擇顏色或透過RGB數值。人們也可以透過滴管吸取放大鏡顯示的螢幕中任何色彩

建議使用系統提供的Color Picker。使用內建Color Picker提供一致性的使用體驗,此外,人們可以使用從任何App中儲存的色彩組合。系統定義的Color Picker也可以在Mac版本的iPad App提供Mac使用者熟悉體驗

開發者指南請參閱UIColorWellUIColorPickerViewController

Context Menus

原文連結

在iOS13或之後,你可以不用在混亂的介面中使用Context Menu來連結螢幕物件相關的額外功能

Context Menu類似Peek*²和Pop*³,但有兩個關鍵不同:

  • Context Menu支援所有iOS13或之後的裝置;Peek和Pop只能在支援3D Touch的裝置中使用
  • Context Menu立即顯示相關指令,Peek和Pop需要上滑來顯示

為了展開Context Menu,人們使用系統定義點擊和長按手勢或3D Touch(3D Touch使Context Menu更快出現)。當Context Menu開啟,它顯示該物件的預覽和指令的清單。人們可以選擇指令或拖曳物件到其他區域、視窗、App

一致性的Context Menu 若在你的App中某些物件提供Context Menu,但其他沒有,他們會不清楚哪些地方可以使用這項功能,可能會認為是App的問題

只提供常用的指令 例如Mail訊息的Context Menu,它合理的包含回覆或移動訊息的指令,但格式化指令並不合理。列出過多指令會使人不知所措

在Context Menu中的每一個指令包含Glyph Glyph將加強對指令的意涵,幫助人們快速了解功能。當你使用SF Symbols,你可以選擇現有Symbol或編輯相關Symbol以創建自訂Symbol來傳達指令。若你的Context Menu包含次選單*⁴,你不需將它加上Symbol,因為系統將自動加上“>”按鈕來提示額外指令

使用次選單管理複雜性 次選單是一種Context Menu,展開第二層相關的指令的選單。次選單以直覺的標題來敘述人們可以預期的內容。簡潔、行動導向的標題也使人們跳過當前狀態不需要的次選單

維持一層的次選單 雖然次選單可以縮短Context Menu並說明人們可以執行的指令,多於一層的次選單會讓使用變得複雜,令人難以瀏覽

在選單頂部顯示最常用的指令 當Context Menu打開,人們將注意到頂部的區域。放置最常用的指令在頂部,幫助人們達到他們的需求

使用分隔線來群組化選單選項 創造視覺群組可以幫助人們快速掃視。例如,你可以將編輯和分享相應的選項分開。通常不需要超過三個群組

避免在Context Menu和編輯選單提供相同選項 當同一選項在兩種選單使用將使人們困惑並且系統將難以偵測意圖。額外指南請參閱Edit Menus

勿提供開啟物件的選項 人們可以直接點擊可預覽的物件來打開,因此基本上不需要提供“開啟”鈕

開發者指南請參閱UIContextMenuInteraction

Edit Menus 編輯選單

原文連結

人們可以在文字欄位、文字視圖、網頁視圖或圖像視圖中點擊或長按來選取物件並開啟編輯選項,如複製和貼上

顯示適合在當前環境的指令 預設選項包含剪下、貼上、選取、全選、刪除指令,任何指令都可以選擇停用。如果沒有物件被選取,選單不應該顯示需要選取物的選項,像是剪下、貼上。同樣的,若已經選取了某樣物件,則不應顯示“選取”選項

必要時調整編輯選項的位置 選單在預設中顯示於插入點或選取物的上下,根據可用的空間,並包含指向相關內容的箭頭。雖然你無法改變選單形狀,而位置是可以配置的,你可以使它免於覆蓋重要內容或部分介面

不要在其他地方使用和編輯選項相同功能的操作 提供多種方式來進行相同操作將使使用者經驗不一致且導致混亂。例如你的App讓人們使用選單來複製物件,不要在其他地方也顯示複製按鈕

允許選擇並複製不可編輯的文本 人們通常希望將靜態內容(圖像標籤、社群媒體狀態)加入電子郵件、筆記或網路搜尋

不要增加編輯選項的按鈕 如果這樣做,嘗試顯示選項的人將最終執行該按鈕

使編輯功能可以還原 選單動作執行前不需要確認。由於某人可能會在動作執行後改變心意,永遠支援還原和重做

使用有用的自訂指令來增加編輯選項 你可以透過增加額外的App特定指令來增加價值。像是標準指令,任何自定指令應對選取的文字或物件執行操作

自訂指令顯示在系統提供指令後 不要在眾所皆知且常用的系統指令間穿插自訂指令

最少化自訂指令的數量 不要顯示太多選項使人們不知所措

保持簡短的指令名稱 指令應該使用動詞或足夠描述動作的動詞片語。使用標題樣式的大小寫,除了文章、對等連接詞、或少於四的字母的介系詞外大寫每個字詞開頭

開發者指南請參閱Text Programming Guide for iOS中的Copy, Cut, and Paste Operations以及UIMenuController

Labels 標籤

原文連結

標籤用來描述螢幕上的介面元素或提供簡短訊息。雖然人們無法編輯標籤,他們有時可以複製。標籤可以顯示任何多寡的靜態文字,但盡量保持簡短

維持標籤清晰易讀 標籤可以是預設或其他樣式。若你調整標籤的樣式或使用自訂字型,確保不會失去易讀性。最好使用動態字型,在使用者更改字型大小時仍然看起來不錯。檢視Dynamic Type。你也可以透過無障礙選項測試你的標籤,例如粗體文字。檢視Accessibility

學習關於文字,檢視String Programming Guide。學習關於創建文字樣式,檢視Attributed String Programming Guide。標籤開發者指南請參閱UILabel

Page Controls 頁面操作

原文連結

Page Control顯示一列的指示圖像,在扁平清單中顯示頁面。滾動的指示器橫列幫助人們在清單中瀏覽;Page Control無法幫助人們在階層或非線性的排列中瀏覽。Page Control可以管理任何數量的頁面,使他們在人們可以建立自訂清單的狀態下特別有用

Page Control可以調整指示器外觀來提供更多關於清單的資訊。舉例,Control以指示器強調當前的頁面,人們可以估量頁面在清單中的相對的位置。當指示器在空間中過多,Control可以收縮兩側的指示器

人們點擊或Scub和Page Control互動(Scrub,觸碰Control拖曳向左或向右)。點擊前端或末端的當前頁面指示器來顯露前一頁或下一頁;在iPadOS,人們也可以使用Pointer將特定指示器為目標。Scrub開啟序列中的頁面,Scrub前端或末端邊緣的Control快速到達最首頁或最末頁

開發者注意
在API中,點擊是抽象的互動,然而Scrub是連續性的互動;相關指南請參閱UIPageControl.InteractionState

考慮除了Page Control之外也提供清單視圖,特別是較長的清單 為了檢視多頁,人們通常滑動來檢視前後頁,然而當頁面冗長時這個過程將變得枯燥無趣。雖然Scrub Page Control比滑動來的快速容易,人們不會將此視為選擇。當你包含清單視圖,你給人們另一種方式來找尋頁面,並且你可以讓他們從新排序清單

點擊或Scurb Page Control將提供不同的視覺回饋。當人們滑動頁面時,人們可以看到滾動頁面的動畫。當人們Scrub,Control立即顯示頁面,沒有動畫過場

不要在Scrub頁面時提供動畫過場 人們可以快速地Scrub,而使用滾動動畫在所有過場將使App延遲並造成令人分心的視覺閃爍。只在點擊時使用動畫滾動

Page Control可以包含半透明、圓角背景,為指示器提供視覺對比。你可以選擇以下背景樣式之一:

  • Automatic 自動 只在人們與Control互動時顯示背景。在Page Control不是首要瀏覽元素時使用此樣式
  • Prominent 醒目 永遠顯示背景。當Page Control是首要瀏覽元素時使用此種樣式
  • Minimal 極簡 不顯示背景。當你只需要顯示當前頁面的清單中的位置而你不需提供視覺回饋,使用此種樣式

開發者指南請參閱backgroundStyle

不要再極簡背景樣式中支援Scurb 在Scrub時極簡樣式不會有任何視覺回饋。如果你想要讓人在App中Scrub頁面,使用自動或是醒目樣式

頁面控制器在螢幕中心下方 為確保人們可以隨時找到Page Control,Page Control應保持置中在螢幕底部

自訂指示器圖像

預設中,Page Control使用一桶提供的Glyph作為指示器,但它也可以顯示獨特圖像,幫助人們便是特殊頁面。例如,Weather使用location.fill symbol來區分現在位置的頁面

如果確實幫助了App,你可以提供自訂圖像作為預設圖像來套用指示器,你也可以為特定頁面補充不同圖像。開發者指南請參閱preferredIndicatorImagesetIndicatorImage(_:forPage:)

確保自訂指示器簡潔清楚 避免複雜的形狀、不使用負空間、文字、Inner Line,因為這些細節會使得Glyph在小尺寸模糊、難以閱讀。考慮使用簡單的SF symbols作為指示器或是設計你自己的Glyph(相關指南請參閱Glyphs

自訂預設的指示器,只在它增加總體Control的意義 舉例,如果每個頁面都有書籤,你可能會使用bookmark.fill symbol作為預設指示器圖像

避免在單一Page Control中使用兩個以上的不同指示器 如果你的頁面中包含一個特殊頁面,像是Weather中的現在位置頁面,你可以藉由獨特的指示器圖像快速找到該頁面。反過來說,Page Control使用多個獨特圖像來標註數個重要頁面將變得難以使用,人們必須記住每個圖像的意涵。一個Page Control顯示兩個以上的指示器圖像會讓畫面變得混亂且隨性,儘管每個圖像都很簡潔

避免將指示器圖像著色 自訂顏色會降低當前頁面指示器的對比度,並且讓Page Control在螢幕上太搶眼。為確保你的Page Control在不同狀態下都異於使用且美觀,讓系統自動為指示器配色

Pickers 選擇器

原文連結

Picker顯示人們可選取的一個以上可滾動的數值清單。日期選擇器支援額外的方式選取數值,像是在行事曆視圖中選取日子,或是進入日期和時間使用數字鍵(相關指南請參閱Date Pickers)。進入資訊透過選擇單一或多方數值,兩種選擇器都容易使用

考慮在中等、長的清單項目使用選擇器 若你需要顯示少量的選項,考慮使用pull-down button而非選擇器。雖然選擇器容易在多個項目中快速滾動,他可能在少量項目的清單增加過多視覺重心。另一方面,如果你需要提供大量項目的項目,考慮使用清單或表格。清單和表格可以調整高度,而表格可包含索引,在清單中鎖定區段更為容易。相關指南請參閱

使用可預期的合理的順序數值 在可滾動的Picker中的部分數值可能會隱藏。最好讓人們可以預期這些數值順序,使他們在清單中快速檢視Tables

使用符合預期且有邏輯順序的數值 當可滾動的清單為固定,選擇器中的許多數值將隱藏。最好的方式是讓人們可以預期隱藏的數值為何,像是依照字母排列的國家,他們可以快速的滑過項目

避免透過切換螢幕來檢視選擇器 選擇器在邊騎區塊附近顯示。選擇器通常顯示在螢幕底部或Popover中

開發者指南請參閱UIPickerView

日期選擇器

透過日期選擇器使用點擊、鍵盤或Pointer裝置來選取特定日期、時間或兩者非常有效率。你可以用以下樣式來顯示日期選擇器:

  • Compact 在Modal視圖中顯示可編輯的日期和時間按鈕
  • Inline 只有時間以輪狀數值顯示按鈕;日期和時間是Inline行事曆視圖
  • Wheels 一組可滾動的輪狀數值,支援透過內建或外接鍵盤輸入
  • Automatic 系統基於當前裝置和日期選擇器模式所決定

日期選擇器有四種模式,每一種是不同的組合和數值

  • 日期 顯示月、日、年
  • 時間 顯示時、分、上下午(可選)
  • 日期和時間 顯示日期、時、分、上下午(可選)
  • 倒數計時 顯示小時、分鐘,最大值為23小時59分鐘。此模式無法用於Inline或Compact樣式

在日期選擇器中顯示實際數值,時間單位的順序取決於使用者的環境

這你有幾個日期選擇器的範例,顯示樣式和模式的不同

Compact
Inline
Wheels

在空間有限時使用Compact日期選擇器 Compact樣式的按鈕依照App色彩強調當前數值。當人們點擊按鈕,日期選擇器開啟Modal,與熟悉的行事曆樣式的編輯器和時間選擇器。透過Modal視圖,人們可以在點擊視圖外面前多次編輯日期、時間來確認選擇

如何在分鐘提供較少的選項 預設中,分鐘清單包含60(0到59)。你可以增加分鐘數值,只要將它均分為60。例如你可能需要將小時四等分(0、15、30、45)

開發者指南請參閱UIDatePicker

Progress Indicators 進度指示器

原文連結

不要讓人們乾瞪著靜態畫面等待App讀取內容或冗長的數據處理。使用Activity Indicator(動態指示器)或Progress Bar(進度條)讓人們知道App沒有停止運作並提示等待時間

同時檢視Loading

Activity Indicators

當進度無法估量時轉動Activity Indicator,例如讀取或同步複雜的內容。在工作完成時消失。Activity Indicator無法互動

Progress Bar勝過Activity Indicator 如果進度可以被預估則使用Progress Bar,讓人們可以估計時間的花費

保持Activity Indicator的轉動 人們將靜止的指示器視作停止的工作。保持轉動讓他們知道工作運作中

如果有幫助的話,在等待工作完成的時間提供有用資訊 在Activity Indicator上方增加標籤以提供更多資訊。避免模糊不清的用語,例如”讀取”或”認證”,因為他們通常沒有幫助

開發者指南請參閱UIActivityIndicatorView

Progress Bars 進度條

Progress Bar包含一條由左至右填滿的軌道以顯示進度。Progress Bar無法互動,雖然它通常伴隨著取消按鈕

準確地回報進度 切勿顯示錯誤的進度,只是為了讓App看起來有在動作。只在可估計的工作使用Progress Bar;除此之外使用Activity Indicator

將Progress Bar用於時間明確的工作 用Progress Bar來顯示工作狀態很棒,特別是當它傳達了還有多少剩餘時間來完成

在Navigation Bar和Toolbar中隱藏為填滿的軌道 預設中Progress Bar的軌道包含填滿及未填滿部分。在Navigation Bar或Toolbar使用時表示頁面的讀取,Progress Bar應隱藏未填滿的部分

如何自訂和你的App相配的Progress Bar Progress Bar的外觀可以調整來它配App的設計。例如你可以指定軌道和填色的配色或圖像

開發者指南請參閱UIProgressView

網路活動指示器*

網路活動指示器不推薦在iOS13和其他無邊框螢幕。在iOS12或更早非無邊框的螢幕,網路活動指示器在Status Bar中轉動表示數據使用中。當網路使用完成時消失。這個指示器看起來像Activity Indicator,也不具互動性

只在網路持續使用幾秒鐘的網路操作使用網路活動指示器 不要在快速網路操作時顯示,因為它可能在有人注意到它或是意識到它的義涵前就消失了

Refresh Content Controls 重整操作

原文連結

通常在Table View,手動啟動重整來立即重新讀取內容,無需等待下一次自動更新內容。Refresh Content Control是一種特別的Activity Indicator,預設隱藏;在視圖向下拉時出現並重整。例如在Mail中,你可以下拉重整來檢查新郵件

顯示自動更新的內容 雖然人們預期以觸發以點來立即重整內容,他們也同樣預期定期的自動重整。不要讓使用者重整每一次更新。透過定期更新來保持最新資料

加入簡短標題,如果有幫助的話 可自行選擇是否在Refresh Content Control加入標題。大多數時非必要,指示器動畫已經表示內容正在讀取。如果你要加入標題,不要用來解釋它正在重整。取而代之,提供關於重整內容的有用資訊。例如在Podcast,使用標題來告訴人們上一次更新的時間

開發者指南請參閱UIRefreshControl

Segmented Controls

原文連結

Segmented Control是一組兩個以上的線性分頁,每個分頁都有獨特功能。在功能中,每個分頁按鈕都相同的寬度。像是按鈕,分頁包含文字和圖像。Segmented Control通常用於顯示不同視圖。例如在地圖中,透過Segmented Control轉換地圖、大眾運輸、衛星模式

提供最少分頁以增進易用性 較寬的分頁按鈕易於點擊。iPhone上,分頁使用五個或更少

保持分頁內容尺寸一致 由於每個分頁有相同寬度,若是內容部分填滿、部分無,則看起來不太好

避免混合文字和圖像的Segmented Control 雖然個別分頁可以顯示文字或圖像,在按鈕混合兩者將導致令人困惑的介面

在自訂Segmented Control中精準地排版內容 如果改變Segmented Control的背景外觀,確保內容依舊看起來不錯且不會出現錯位的情況

開發者指南請參閱UISegmentedControl

Sliders

原文連結

Slider是水平軌道和一個稱作Thumb的調整器,你可以透過手指在最小和對大值間移動,例如螢幕亮度或媒體播放的位置。當Slider數值改變,最小值到Thumb間的軌跡會填滿顏色。Slider左右方的Icon可以自行選擇是否顯示,該Icon表示最大最小的數值

若是有幫助的話則自訂Slider的外觀 Slider的外觀包括軌道顏色、Thumb圖像、左右邊Icon,可以進行調整以搭配App的設計。例如調整Slider的圖像尺寸,可以在左方顯示較小Icon;較大Icon在右

不要使用Slider調整音量 若你需要在App中提供音量控制,使用音量視圖,可自定義、包括音量大小和更改音效輸出設備的控制。關於如何啟動音量視圖,請參閱MPVolumeView

開發者指南請參閱UISlider

Steppers

原文連結

Stepper是用來增加、減少數值的兩段式控制。預設中移兩段按鈕分別為加號和減號符號。如果有需要可以將符號替換為自訂圖像

在Stepper操作時明顯的加減數值 Stepper本身不包含數值,確保人們知道數值在操作Stepper時改變

勿在可能有大量數值改變時使用Stepper Stepper在只需要點幾下的微幅改變很好使用。例如在列印畫面,使用Stepper設定複印數量很合理,因為很少人在此項巨幅調整。另一方面,使用Stepper選擇頁面範圍並不合理,因為即便是合理的頁面數量也需要大量點擊

開發者指南請參閱UIStepper

Switches

原文連結

Switch是調整兩個相反狀態的控制,開和關

考慮提供和App搭配的Switch配色 若可以良好運作,你可以改變Switch在開啟狀態的配色

只在Table橫列使用Switch Switch專用於Table中,就像設定中的選項清單可以開關。如果你需要在Toolbar或Navigation Bar中使用類似功能,則使用按鈕取代,並提供兩個不同的Icon來表示狀態

避免在Switch增加描述的標籤 Switch選項非開即關。提供描述這些狀態是多餘且造成介面混亂

使用Switch管理可用的相關介面元素 Switch通常影響其他畫面上的內容。例如啟用設定中的飛航模式,即關閉其他特定設置,像是行動數據和個人熱點。關閉Wi-Fi將造成網路和其他選項無法使用

開發者指南請參閱UISwitch

Text Fields 文字框

原文連結

文字框是一橫線,固定高度、通常有圓角、當使用者點擊時自帶鍵盤。使用文字框來輸入像是Email的簡短文字

顯示提示來幫助目的傳達 文字框可以包含佔位符,像是“Email”或”密碼”。不要顯示相同文字的標籤和佔位符

適時在文字框右方顯示清除按鈕 當此按鈕使用,點擊以刪除文字框中的內容,無需再點擊刪除鍵

合適時使用安全性文字框 在App要求輸入敏感性資訊時使用安全性文字框,例如密碼

在文字框中使用圖像和按鈕 你可以在文字框左右加入自訂圖像,或是增加系統按鈕,像是“書籤”按鈕。一般來說,在左端使用文字框表示文字目標;右方顯示額外功能,如書籤

開發者指南請參閱UITextField

提示
多行或多樣式的文字輸入請參照Text View

鍵盤

顯示合適的鍵盤種類 iOS提供多種鍵盤種類,每一種都用以不同需求的輸入。為了簡化輸入,在編輯文字時顯示符合該文字的鍵盤。例如在要求Email時,應該顯示Email鍵盤(英文鍵盤)。完整鍵盤清單請參閱UITextInputTraits中的UIKeyboardType

相關指南請參閱Custom Keyboards

*¹ 系統按鈕:System Button
*² 預覽:Peek
*³ 彈出:Pop
*⁴ 次選單:Submenu

下一篇

上一篇

--

--