iOS交互設計基礎之控件(二)

1、活動指示器

活動指示器表明進程或任務正在進行中

注:微博清空緩存

(1)當任務加載和進行時旋轉(zhuǎn),任務完成后自動消失(針對系統(tǒng)默認樣式)

(2)不支持用戶交互行為

注:Pinterest添加賬戶

2、日期時間選擇器

日期時間選擇器展示關(guān)于日期和時間的組件

(1)最多可以展示四個獨立的滑輪,每一個滑輪列表標識一個不同的值

(2)日期選擇器的大小與與iPhone鍵盤的大小相同,并且不可該更

(3)包括四種模式,每種模式包含一組不同的值

日期和時間:日期、小時、分鐘

時間:小時和分鐘以及可選的上午/下午

日期:年、月、日

倒計時:小時、分鐘,可以精確的設定總共的倒計時時間

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

網(wǎng)絡活動指示器在狀態(tài)欄中出現(xiàn),標識網(wǎng)絡活動正在進行。例如:當重新進入app,系統(tǒng)進行自動刷新時,顯示正在進行網(wǎng)絡活動

4、頁面控件

頁面控件告訴用戶打開了多少個視圖以及他們正處在哪一個視圖當中

注:微信圖片瀏覽

(1)不支持用戶訪問不連續(xù)的視圖(不能直接跳轉(zhuǎn)至相鄰視圖以外的視圖)

注:掌盟

(2)默認情況下,不支持視圖之間的導航

注:天氣

(3)頁面控件是為所有視圖平等的場景設計的

注:豆瓣閱讀

(4)避免顯示太多點,超過10個很難讓用戶一目了然

注:下廚房

總結(jié):頁面控件多用來展示平行層級的內(nèi)容信息,在有限的屏幕控件內(nèi)延展可以展示的內(nèi)容數(shù)量,左右滑動切換,也很適合用戶單手操作瀏覽信息

5、選擇器

選擇器包含了一組值,用戶可以從中選擇一個相應的值

(1)選擇器是日期時間選擇器的通用模式

(2)不可以自定義大小(跟iPhone鍵盤相同)

(3)當你需要展示的備選數(shù)量很多時,可以考慮使用表格視圖

總結(jié):選擇器多用在選擇地區(qū)、年齡、性別等編輯操作中,用來選擇一系列同一類別下的子項

6、刷新控件

刷新控件執(zhí)行用戶觸發(fā)的內(nèi)容刷新

注:下廚房
注:知乎

(1)刷新控件可以出現(xiàn)在標題中

(2)使用了刷新控件,同時也應支持自動刷新,刷新控件給用戶多一個選擇

(3)可以根據(jù)產(chǎn)品風格設計相應的刷新控件樣式

7、分段控件

分段控件是一組分段的線性組合,每一個分段的作用類似按鈕,點擊之后切換到相應的視圖

(1)有兩個或以上的分段組成,每一個分段的寬度相同

(2)可以包含文字或圖片

(3)一個分段控件最多包含五個分段

(4)不要在一個分段中混用文字或圖片

注意:Android中類似的控件為固定選項卡以及滾動選項卡,可以左滑或右滑在不同的視圖之間進行切換,并且可以擴展更多的分類視圖,更加便于用戶操作。iOS中也大量采用這種交互方式,在視圖之間可以左滑右滑切換視圖,用戶操作上更加地便捷

注:網(wǎng)易云音樂
注:NEXT
注:36氪
注:QQ空間
注:知乎

8、滑塊

滑塊允許用戶在一個限定范圍內(nèi)調(diào)整某個數(shù)值或進程

總結(jié):滑塊多用來控制音量、控制進度、控制大小(字體)、控制亮度等,例如在線閱讀書籍、在線播放視頻等沉浸式體驗中

9、開關(guān)按鈕

開關(guān)按鈕展示了兩個互斥的選項或狀態(tài)

(1)開關(guān)按鈕僅在表格視圖中可用

另:開關(guān)的操作方式隱喻了電燈開關(guān),兩種操作分別對應兩種不同的功效

10、系統(tǒng)按鈕

系統(tǒng)按鈕執(zhí)行app中定義的行為

(1)默認狀態(tài)下不含邊界,也不含背景圖

(2)可以是圖標或者文字標題

(3)支持自定義樣式,如描邊或者加背景圖

注意:按鈕的幾種狀態(tài):正常狀態(tài)、選中狀態(tài)、禁用狀態(tài),每種狀態(tài)所對應的按鈕樣式

11、文本框

(1)根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤

(2)輸入框中增加幫助用戶理解的提示文字

(4)合適的情境下,在文本框右側(cè)加入清除按鈕

注意:文本框與文本視圖(下一篇中會提到)的區(qū)別,文本框只能輸入單行文本,例如通常用來填寫用戶名、密碼、手機號等等,適合增加清除按鈕

本篇是“iOS交互設計基礎”第二篇,后面會更新最后一篇關(guān)于視圖的介紹

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,285評論 2 376

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

  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,859評論 22 665
  • 4.3 控件 4.3.1 活動指示器 活動指示器表明任務或進程正在進行中,如下圖所示。 想要了解如何在代碼中定義活...
    小蝦仔閱讀 1,207評論 0 6
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,158評論 4 61
  • 認清我們是誰 產(chǎn)品分析 競品分析 市場分析 知道我們要做什么 設置業(yè)務目標 怎么考量 數(shù)據(jù)運營 具體怎么做 產(chǎn)品運...
    Jim花閱讀 175評論 0 0
  • 夜深風驟起,點點落窗促。輾轉(zhuǎn)難眠憂思堵,不知心何處。 晨起倚窗顧,水深不適路。當值無奈踏征途,悲念命無福。
    冠李戴閱讀 259評論 0 0