精簡版 | iOS人機交互指南——控件(按鈕、輸入框等)

按鈕

按鈕用于實現(xiàn)特定的動作,可以有定制化的北京,可以包含標題或圖標。系統(tǒng)提供了一些預設的按鈕來滿足大部分的使用場景,更多實現(xiàn)細節(jié)可參考UIButton

系統(tǒng)自動的按鈕

  • 使用動詞作為標題。
  • 首次字母大寫。
  • 保持標題的簡短。
  • 只要在必要時才考慮為按鈕增加邊框或背景。
  • 更多實現(xiàn)細節(jié)可參考UIButton中的UIButtonTypeSystem。

Detail Disclosure Button(詳情按鈕)


來自Apple官網(wǎng)
來自Apple官網(wǎng)

Info Buttons(信息按鈕):此部分省去
Add Contract Buttons(添加聯(lián)系人按鈕):此部分省去。

Edit Menus

來自Apple官網(wǎng)
來自Apple官網(wǎng)

用戶可以通過長按或雙擊在文本輸入框、text view、web view或圖片視圖中呼出編輯選項。

  • 為當前內(nèi)容顯示合適的操作。
  • 讓用戶通過標準手勢呼出編輯選項。
  • 如果有必要的話,調(diào)整菜單的位置。
  • 不要在實現(xiàn)類似編輯菜單的功能。
  • 允許不可編輯的內(nèi)容可被選中和拷貝。
  • 不要在按鈕上添加編輯選項。
  • 允許編輯操作可回退。
  • 通過定制的操作來擴展編輯選項。
  • 在系統(tǒng)自帶的選項后面再顯示定制的操作。
  • 盡量縮減定制操作的數(shù)量。
  • 保持定制的操作的名稱盡可能簡短。
  • 更多實現(xiàn)細節(jié)可參考Text Programming Guide for iOS中的Copy,Cut,and Paste OperationUIMenuController。

Labels(標簽)

Page Control(頁面控制)

頁面控制用于顯示當前頁面的所在的位置。

  • 不要在用層級關系的頁面上使用頁面控制。
  • 不要展示太多頁面。
  • 在屏幕下方居中顯示頁面控制元素。
  • 更多實現(xiàn)細節(jié)參考UIPageControl

Pickers(選擇器)

來自Apple官網(wǎng)
來自Apple官網(wǎng)

選擇器可以包括一行或多行不同的數(shù)據(jù)。

  • 使用可被預知、符合邏輯和有序化的數(shù)據(jù)。
  • 避免切換屏幕來現(xiàn)實選擇器。
  • 對于大量數(shù)據(jù)的展示,使用表格來代替。
  • 更多實現(xiàn)細節(jié)可參考UIPickerView

日期選擇器
一個日期選擇器有四種模式:日期模式、時間模式、日期時間模式和倒計時模式。

  • 當需要顯示分鐘時,顯示盡可能少的選項。
  • 更多實現(xiàn)細節(jié)參考UIDatePicker

Progress Indictiors(進度指示器)

使用活動指示器和進度條來讓用戶知道目前的狀態(tài)和還需要等待多久。可參考Loading

活動指示器


來自Apple官網(wǎng)
來自Apple官網(wǎng)
  • 如果活動可被量化,使用進度條代替活動指示器。
  • 保證loading圖標在動。
  • 如有必要,在等待任務結束過程中可提供有用的提示信息。
  • 更多實現(xiàn)細節(jié)參考UIActivityIndicatorView

進度條

  • 總是正確的反應當前的進度。
  • 使用進度條來顯示那些可定義時間的任務。
  • 隱藏導航欄或工具欄上空的部分。
  • 可考慮根據(jù)自己應用的需要定制化進度條的樣式。
  • 更多實現(xiàn)細節(jié)可參考UIProgressView

網(wǎng)絡活動指示器

Refresh Content Controls(刷新內(nèi)容控件)

一個刷新控件是一個特殊類型的活動指示器,默認情況下是隱藏的,只有當下拉列表加載內(nèi)容是才可見。

  • 實現(xiàn)自動更新內(nèi)容。
  • 有必要時可顯示簡短的標題。
  • 更多實現(xiàn)細節(jié)參考UIRefreshControl

Segmented Controls(分段控制器)

來自Apple官網(wǎng)
來自Apple官網(wǎng)
  • 限制分段的數(shù)量。
  • 盡量保持分段大小一致。
  • 避免文本和圖片同時使用。
  • 在自定義的分段控制器中確保位置合適。
  • 更多實現(xiàn)細節(jié)參考UISegmentedControl

Slider(滑條)

  • 有必要的話可定制滑條的樣式。
  • 不要使用滑條來調(diào)整輸出的音量。取而代之的使用MPVolumeView
  • 更多實現(xiàn)細節(jié)可參考UISlider

Steppers(步進器)

來自Apple官網(wǎng)
來自Apple官網(wǎng)

步進器是一個兩部分的控制器用來增加或減少數(shù)量。

  • 確保用戶清楚使用步進器來調(diào)整哪個數(shù)值。
  • 不要使用步進器來來進行大數(shù)據(jù)的變更。
  • 更多實現(xiàn)細節(jié)可參考UIStepper

Switches(開關)

  • 考慮調(diào)整開關的外觀來適應你的應用風格。
  • 只在表格中使用開關。
  • 避免在開關上增加標簽描述。
  • 考慮使用開關來管理可被使用的界面元素。
  • 更多實現(xiàn)細節(jié)可參考UISwitch

Textfield(輸入框)

  • 在輸入框顯示提示來傳到目的。
  • 為敏感數(shù)據(jù)提供安全輸入框
  • 顯示合適的鍵盤類型。參考UITextInputTraits中的UIKeyboardType
  • 使用圖片或按鈕來獲得更加高級的功能。
  • 合適的時候在輸入框右邊顯示清空按鈕。
  • 更多實現(xiàn)細節(jié)可參考UITextField
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容