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

按鈕

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

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

  • 使用動詞作為標(biāo)題赠涮。
  • 首次字母大寫子寓。
  • 保持標(biāo)題的簡短。
  • 只要在必要時才考慮為按鈕增加邊框或背景笋除。
  • 更多實現(xiàn)細(xì)節(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或圖片視圖中呼出編輯選項酱吝。

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

Labels(標(biāo)簽)

Page Control(頁面控制)

頁面控制用于顯示當(dāng)前頁面的所在的位置跋炕。

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

Pickers(選擇器)

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

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

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

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

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

Progress Indictiors(進(jìn)度指示器)

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

活動指示器


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

進(jìn)度條

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

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

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

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

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

Segmented Controls(分段控制器)

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

Slider(滑條)

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

Steppers(步進(jìn)器)

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

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

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

Switches(開關(guān))

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

Textfield(輸入框)

  • 在輸入框顯示提示來傳到目的攻晒。
  • 為敏感數(shù)據(jù)提供安全輸入框
  • 顯示合適的鍵盤類型顾复。參考UITextInputTraits中的UIKeyboardType
  • 使用圖片或按鈕來獲得更加高級的功能。
  • 合適的時候在輸入框右邊顯示清空按鈕鲁捏。
  • 更多實現(xiàn)細(xì)節(jié)可參考UITextField
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末芯砸,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子给梅,更是在濱河造成了極大的恐慌假丧,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件动羽,死亡現(xiàn)場離奇詭異包帚,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)运吓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門渴邦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拘哨,你說我怎么就攤上這事谋梭。” “怎么了倦青?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵瓮床,是天一觀的道長。 經(jīng)常有香客問我产镐,道長隘庄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任癣亚,我火速辦了婚禮丑掺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘述雾。我一直安慰自己吼鱼,他們只是感情好蓬豁,可當(dāng)我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著菇肃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪取募。 梳的紋絲不亂的頭發(fā)上琐谤,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機(jī)與錄音玩敏,去河邊找鬼斗忌。 笑死,一個胖子當(dāng)著我的面吹牛旺聚,可吹牛的內(nèi)容都是我干的织阳。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼砰粹,長吁一口氣:“原來是場噩夢啊……” “哼唧躲!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起碱璃,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤弄痹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后嵌器,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肛真,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年爽航,在試婚紗的時候發(fā)現(xiàn)自己被綠了蚓让。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡讥珍,死狀恐怖历极,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情串述,我是刑警寧澤执解,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站纲酗,受9級特大地震影響衰腌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜觅赊,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一右蕊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吮螺,春花似錦饶囚、人聲如沸帕翻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嘀掸。三九已至,卻和暖如春规惰,著一層夾襖步出監(jiān)牢的瞬間睬塌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工歇万, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留揩晴,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓贪磺,卻偏偏與公主長得像硫兰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子寒锚,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容