對(duì)于設(shè)計(jì)師來說旭从,閱讀ios規(guī)范的時(shí)候更多的是關(guān)注界面層面的內(nèi)容错维,對(duì)于系統(tǒng)自帶的內(nèi)容關(guān)注較少。交互設(shè)計(jì)師同時(shí)要關(guān)注ios的交互手勢(shì)吧趣、導(dǎo)航邏輯法竞、控件使用規(guī)范等,但是所謂的“用戶行為”的承載頁面最終是界面强挫,所以充分的了解界面元素是非常必要的岔霸。
本文內(nèi)容來源ios規(guī)范,搬用內(nèi)容纠拔、總結(jié)知識(shí)秉剑。
ios界面元素分為:條欄、內(nèi)容視圖稠诲、控件侦鹏、臨時(shí)視圖
一、條欄
1臀叙、狀態(tài)欄 status bar
狀態(tài)欄用來顯示設(shè)備的信息略水、時(shí)間、網(wǎng)絡(luò)等重要信息劝萤。默認(rèn)是白底黑字與黑底白字渊涝。
#狀態(tài)欄是透明背景
#位置總是處于頂部
注意事項(xiàng):1、狀態(tài)欄可以在整個(gè)app中采用一個(gè)樣式,也可以單獨(dú)為某個(gè)視圖設(shè)計(jì)樣式跨释。2胸私、狀態(tài)欄背后不要放其他內(nèi)容,不要有滾動(dòng)內(nèi)容鳖谈,防止干擾用戶閱讀狀態(tài)欄信息岁疼。3、盡量不要隱藏狀態(tài)欄缆娃,除非特殊情況捷绒,例如全屏看視頻可以隱藏狀態(tài)欄,但是保證輕點(diǎn)屏幕時(shí)可以重新恢復(fù)狀態(tài)欄贯要。
2暖侨、導(dǎo)航欄 navigation bar
導(dǎo)航欄主要作用是在不同的層級(jí)的信息結(jié)構(gòu)之間導(dǎo)航,有時(shí)候可以管理屏幕內(nèi)容崇渗。
導(dǎo)航欄上面可以放標(biāo)題或者控件字逗。
3、工具欄 Toolbar
包含了對(duì)頁面或者視圖中對(duì)象進(jìn)行操作的控件显押。
4扳肛、標(biāo)簽欄 tab bar
標(biāo)簽欄賦予了用戶在不同任務(wù)傻挂、視圖和模態(tài)的切換的能力乘碑。
5、搜索欄 search bar
搜索欄可以接受用戶輸入的文本金拒,并把它作為一次性搜素輸入兽肤。
二、內(nèi)容視圖
我們可以把視圖是用來承載頁面信息的一個(gè)容器绪抛,iOS 系統(tǒng)為我們提供一些比較優(yōu)秀的視圖模式资铡。在視圖部分主要列舉幾種比較常用的視圖模式。
1幢码、精選視圖 collection view
可以管理項(xiàng)目的有序集合笤休,比如相冊(cè)。
2症副、圖像視圖 image view
可以理解為裝載圖像的容器店雅,用來定義圖像是否可以拉伸、縮放贞铣、位置的調(diào)整等闹啦。
3、地圖視圖 map view?
可以呈現(xiàn)地理數(shù)據(jù)辕坝,并支持地圖app的大部分功能窍奋。
4、滾動(dòng)視圖 scroll view
該視圖的作用是可以讓用戶瀏覽比視圖更大區(qū)域的內(nèi)容。例如放大圖片后琳袄,用滑動(dòng)或者拖拽查看江场。
5、表格視圖 table view
以不同的行來顯示信息窖逗。該視圖提供了控件讓用戶添加扛稽、刪除或者多選,查看某行的更多信息滑负。
6在张、文本視圖 text view
可以容納并顯示多行文本。并且支持編輯文本矮慕。
7帮匾、web 視圖
該視圖可以顯示富Html 內(nèi)容。比如ios內(nèi)置的郵件功能痴鳄。
三瘟斜、控件
1、活動(dòng)指示器 activity indicator
表示某個(gè)任務(wù)或進(jìn)程正在進(jìn)行中痪寻。任務(wù)進(jìn)行時(shí)旋轉(zhuǎn)螺句,任務(wù)完成時(shí)小時(shí),不允許用戶與之交互橡类。
2蛇尚、日期選擇器 date picker
3、標(biāo)簽 label
用于顯示靜態(tài)文本顾画。
4取劫、網(wǎng)絡(luò)活動(dòng)指示器 network activity indicator
出現(xiàn)在狀態(tài)欄,表示網(wǎng)絡(luò)活動(dòng)正在進(jìn)行研侣。
5谱邪、頁碼控件 page control
表示打開了多少視圖以及當(dāng)前視圖是哪一個(gè)。不允許用戶不按照順序訪問視圖庶诡。
6惦银、選擇器 picker
用來顯示一組數(shù)值,用戶可以從中選擇一個(gè)末誓。
7扯俱、進(jìn)度視圖 progress view
用于展示已知持續(xù)時(shí)間的任務(wù)或者進(jìn)度。
8基显、刷新控件 refresh control
用于執(zhí)行用戶發(fā)起的刷新蘸吓,通常用在表格視圖中。
9撩幽、分段控件 segmented control
每一個(gè)分段控件相當(dāng)于一個(gè)顯示不同視圖的按鈕
10库继、滑塊 slider
允許用戶在一定范圍里調(diào)整數(shù)值或進(jìn)度箩艺。
11、步進(jìn)器 stepper
以常數(shù)量來增加或者減少某個(gè)數(shù)值宪萄。支持自定義圖像艺谆。
12、開關(guān) switch 表現(xiàn)兩種互斥的狀態(tài)拜英,只用于表格視圖静汤。
13、系統(tǒng)按鈕 system button
支持自定義樣式居凶,可以包含圖片或者文字虫给。默認(rèn)情況下沒有邊框和背景。
14侠碧、文本框 text field
支持用戶輸入單行文本抹估。可以在文本框左側(cè)或者右側(cè)顯示自定義圖像弄兜,或者添加系統(tǒng)按鈕药蜻,例如書簽按鈕。還可以在文本框的右側(cè)顯示清楚按鈕替饿。
四语泽、臨時(shí)視圖
1、警告框 alert
包含一條必要的標(biāo)題和可選信息视卢。
包含一個(gè)或多個(gè)按鈕踱卵。 雙按鈕的情況下,按鈕排布規(guī)則:1腾夯、操作不會(huì)造成嚴(yán)重后果颊埃,而且是用戶最有可能的操作蔬充,我們把它放在右邊蝶俱,取消按鈕放在左邊。2饥漫、如果按鈕具有破環(huán)性榨呆,則放在左邊,取消按鈕在右邊庸队。
2积蜻、操作菜單 action sheet
顯示用戶所發(fā)起操作的相關(guān)選項(xiàng)。用紅色的字來顯示具有破壞的選項(xiàng)按鈕彻消。
3竿拆、模態(tài)視圖 modal view
以模態(tài)的形式展現(xiàn)的視圖,為當(dāng)前任務(wù)或者情景提供功能宾尚。通常包含一個(gè)完成按鈕丙笋,一個(gè)取消按鈕谢澈。比如評(píng)論功能,點(diǎn)擊評(píng)論的圖標(biāo)進(jìn)入模態(tài)視圖御板,彈出鍵盤锥忿、文本視圖、完成和取消按鈕怠肋。