《ios界面元素》

對(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)視圖御板,彈出鍵盤锥忿、文本視圖、完成和取消按鈕怠肋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末敬鬓,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子笙各,更是在濱河造成了極大的恐慌钉答,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件杈抢,死亡現(xiàn)場(chǎng)離奇詭異希痴,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)春感,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門砌创,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鲫懒,你說我怎么就攤上這事嫩实。” “怎么了窥岩?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵甲献,是天一觀的道長。 經(jīng)常有香客問我颂翼,道長晃洒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任朦乏,我火速辦了婚禮球及,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呻疹。我一直安慰自己吃引,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布刽锤。 她就那樣靜靜地躺著镊尺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪并思。 梳的紋絲不亂的頭發(fā)上庐氮,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音宋彼,去河邊找鬼弄砍。 笑死颅筋,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的输枯。 我是一名探鬼主播议泵,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼桃熄!你這毒婦竟也來了先口?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤瞳收,失蹤者是張志新(化名)和其女友劉穎碉京,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體螟深,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谐宙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了界弧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凡蜻。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖垢箕,靈堂內(nèi)的尸體忽然破棺而出划栓,到底是詐尸還是另有隱情,我是刑警寧澤条获,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布忠荞,位于F島的核電站,受9級(jí)特大地震影響帅掘,放射性物質(zhì)發(fā)生泄漏委煤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一修档、第九天 我趴在偏房一處隱蔽的房頂上張望碧绞。 院中可真熱鬧,春花似錦萍悴、人聲如沸头遭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至袜香,卻和暖如春撕予,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜈首。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國打工实抡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留欠母,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓吆寨,卻偏偏與公主長得像赏淌,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子啄清,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

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