5.IOS界面元素使用
- 欄
（1）StatusBar（狀態(tài)欄）
用于顯示設(shè)備的基礎(chǔ)信息，三種樣式，ipad只有一種黑色樣式。
可隱藏：
???a.隱藏后你的用戶只能退出應(yīng)用才能看到狀態(tài)欄信息。
???b.需要全屏體驗(yàn)的時(shí)候可以隱藏，輕觸屏幕可以顯示。
???c.狀態(tài)欄時(shí)很重要的設(shè)備信息呈現(xiàn)區(qū)塊，非必要情況下不要隱藏狀態(tài)欄。
（2）NavigationBar（導(dǎo)航欄）
導(dǎo)航欄用于在層級(jí)結(jié)構(gòu)的信息中導(dǎo)航，也可以用來管理屏幕信息。
布局：
???a.通常居中顯示當(dāng)前屏幕內(nèi)容的標(biāo)題。
???b.左邊為反悔上一層的按鈕，文字通常是上一層或者前一層的標(biāo)題，如果太長(zhǎng)可以用“返回”取代。
樣式：
???a.如果你使用默認(rèn)控件，導(dǎo)航欄會(huì)自動(dòng)為控件添加“描邊效果”
???b.導(dǎo)航欄有默認(rèn)字體，默認(rèn)情況下，導(dǎo)航欄會(huì)按照系統(tǒng)的標(biāo)準(zhǔn)大小顯示字體。
???c.你也可以自己設(shè)計(jì)自己的按鈕圖標(biāo)樣式等。
方向變化：
???a.系統(tǒng)自動(dòng)伸展。
???b.元素位置處于相對(duì)比例位置。
分段導(dǎo)航：使用分段返回按鈕會(huì)導(dǎo)致很多問題。把你的層級(jí)扁平化。
（3）Toolbar（工具欄）
工具欄放著當(dāng)前情景狀態(tài)下屏幕物體的控件。
位置：通常在底部，iPad有可能在頂部。
色彩表現(xiàn)：色彩可定制，透明度可定制。
圖標(biāo)表現(xiàn)樣式：平整風(fēng)格。
屏幕翻轉(zhuǎn)：高度不變寬度拉伸，圖標(biāo)位置相對(duì)比例不變。
Toolbar內(nèi)容跟隨屏幕內(nèi)容切換。
（4）Tabbar（標(biāo)簽欄）
標(biāo)簽欄幫助用戶更好理解產(chǎn)品信息結(jié)構(gòu)，可以讓用戶在應(yīng)用的大多數(shù)位置進(jìn)入到不同的標(biāo)簽。
???a.標(biāo)簽數(shù)量一般不超過5個(gè)，建議使用文字加圖標(biāo)，除非你的圖標(biāo)已經(jīng)做到了極致傳神。
???b.確實(shí)超過5個(gè)，可以用更多來顯示。
???c.屏幕翻轉(zhuǎn)，高度和透明度固定。
???d.色彩表現(xiàn)，透明度可定制，色彩可定制。
???e.標(biāo)簽內(nèi)容提示，此處要注意IOS系統(tǒng)的推送圖標(biāo)為白邊紅底白色文字
???f.更多的標(biāo)簽樣式—側(cè)邊欄，動(dòng)態(tài)標(biāo)簽，做務(wù)實(shí)的交互設(shè)計(jì)。
- 警告、操作、模態(tài)視圖
（1）警告
警告給予用戶影響他們使用應(yīng)用程序（或設(shè)備）的重要信息。
警告通常是用戶不希望出現(xiàn)的東西，因?yàn)橥ǔ?huì)告訴用戶出現(xiàn)了問題或者要求用戶采取行為來改變當(dāng)前的情況。
顯示位置：居中
如果警告是嵌入在用戶行為的流程中，還需要考慮：
a.讓用戶判斷是否繼續(xù)，并提供相應(yīng)的選擇，如 “刪除” “取消”
b.僅僅是提示用戶，“知道了”
就是說，警告不但要告知用戶警告的內(nèi)容，還有就是要為用戶提供警告后的選擇。
（2）操作列表
操作列表給了用戶和他們當(dāng)前正在進(jìn)行的工作有關(guān)的額外的選項(xiàng)。例如：通常我們點(diǎn)擊上傳照片的時(shí)候，會(huì)彈出一個(gè)操作列表讓我們選擇是來自相冊(cè)還是直接調(diào)用相機(jī)。
操作列表顯示的是與用戶點(diǎn)擊應(yīng)用程序工具欄按鍵開始的任務(wù)相關(guān)的選頃的集合。操作列表適用以下情況：
???a.提供可以完成任務(wù)的不同選擇。例如：我們點(diǎn)擊聯(lián)系人后，會(huì)彈出 呼叫聯(lián)系人手機(jī)/座機(jī)的選項(xiàng)。
???b.操作列表的好處在于可以簡(jiǎn)化前一步顯示的內(nèi)容，讓用戶的邏輯更為清楚 。
???c.完成一個(gè)潛在危險(xiǎn)任務(wù)的時(shí)候可以得到確認(rèn)，規(guī)避用戶風(fēng)險(xiǎn)，例如使用iPhone圖片瀏覽器刪除圖片，操作列表彈出提示用戶下一步的確認(rèn)選擇。
樣式：操作列表始終是從屏幕底部彈出，覆蓋在當(dāng)前頁(yè)面之上，兩端固定在屏幕邊緣。
（3）模態(tài)視圖
模態(tài)視圖：就是當(dāng)前窗口不關(guān)閉,你就不能進(jìn)行其他操作。
模態(tài)規(guī)圖也可以提供一個(gè)執(zhí)行跟用戶工作流程直接相關(guān)的子任務(wù)的途徑（進(jìn)入后需相對(duì)封閉完成子任務(wù)）。 模態(tài)視圖針對(duì)的是一個(gè)視圖界面，而不是某個(gè)控件。通常都是從底部滑出。
模態(tài)規(guī)圖通常應(yīng)該顯示一個(gè)標(biāo)題，用于定義它的任務(wù)。如果必要，還可以在規(guī)圖中的其它位置顯示文字，以更充分的描述任務(wù)或提供一些引尋，例如：
???a.當(dāng)用戶想撰寫文字信息時(shí)，郵件應(yīng)用程序會(huì)提供一個(gè)模態(tài)規(guī)圖，這種模態(tài)規(guī)圖的尋航欄顯示了一個(gè)不應(yīng)用程序?qū)ず綑谙嗤谋尘?，在?biāo)題中還有新信息的文字提示。
???b.所以模態(tài)視圖中，我們可以使用任何一種控件來完成任務(wù)，例如：你可以包含文本域，按鈕和表格視圖。
???c.模態(tài)視圖躲用于相對(duì)封閉的視圖環(huán)境，讓用戶專心完成一種任務(wù)。
- 表格、文本、網(wǎng)頁(yè)視圖
（1）表格視圖
表格視圖通過多行單列的表格顯示數(shù)據(jù)。行可分為節(jié)或組，每行可以包含一些文字，圖片和控件。用戶可以在行間或者分組之間滑動(dòng)或拖移進(jìn)行滾動(dòng)。
（2）文本視圖
文本視圖是一個(gè)能夠顯示多行文本的區(qū)域，當(dāng)內(nèi)容太多內(nèi)容超出其適應(yīng)范圍時(shí)，支持滾動(dòng)。
（3）網(wǎng)頁(yè)視圖
網(wǎng)頁(yè)視圖是基于web內(nèi)容的展現(xiàn)：
除了顯示網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)規(guī)圖提供了一些在打開的頁(yè)面中支持尋航的元素。雖然你可以提供網(wǎng)頁(yè)尋航的功能，但是最好避免造成的應(yīng)用程序看起來像一個(gè)微型瀏覽器。
如果你有一個(gè)網(wǎng)頁(yè)或者基于網(wǎng)絡(luò)的應(yīng)用程序，你可以選擇使用網(wǎng)頁(yè)視圖來實(shí)現(xiàn)一個(gè)簡(jiǎn)潔的iPhone應(yīng)用程序，因?yàn)榫W(wǎng)頁(yè)規(guī)圖可以為它提供封裝。
- 應(yīng)用程序控件
（1）活動(dòng)指示器（Activity indicators）
用途：
顯示一項(xiàng)任務(wù)的進(jìn)度。
不明持續(xù)時(shí)間的進(jìn)程。
對(duì)于可以展現(xiàn)明確時(shí)間和進(jìn)度的控件請(qǐng)留意后面的（進(jìn)度視圖）。
顯示方式：
在狀態(tài)欄活動(dòng)的是指有網(wǎng)絡(luò)活動(dòng)。
在工具欄活動(dòng)的，是指應(yīng)用程序當(dāng)前任務(wù)超過2秒以上顯示。
（2）日期時(shí)間選擇器（Date and Time Pickers）
???a.一個(gè)日期時(shí)間選擇器最多可以有四個(gè)獨(dú)立旋轉(zhuǎn)的輪子
???b.出了系統(tǒng)默認(rèn)的時(shí)間外，你可以對(duì)時(shí)間進(jìn)行你要的設(shè)定，例如分鐘可以設(shè)置為“0,10,20,30....”
???c.使用日期時(shí)間選擇器，使用戶避免了輸入由多個(gè)部分組成的值，用戶也清楚的知道自己應(yīng)該做什么（輪子是不是之前我們學(xué)到的暗喻方式？-轉(zhuǎn)動(dòng)）。
（3）詳情顯示按鈕（Detail Disclosure Buttons）
詳情顯示按鈕提供了額外或者更多的細(xì)節(jié)信息，通常在表格或者空間局促的位置出現(xiàn)。
（4）信息按鈕（Info Buttons）
信息按鈕適用于界面簡(jiǎn)潔的工具類應(yīng)用。
（5）文字標(biāo)簽（Label）
文字標(biāo)簽是指不同大小的靜態(tài)文本，注意：
???a.文本標(biāo)簽的色彩，大小，對(duì)齊方式等都是可以定制的
???b.文本標(biāo)簽一般用于顯示相對(duì)簡(jiǎn)短較少的文本
（6）頁(yè)面指示器（Page Indicators）
頁(yè)面指示器可以使用戶清楚的預(yù)覽到自己當(dāng)前頁(yè)面所處的位置
???a.如果你的頁(yè)面實(shí)在太多，最好不要超過20個(gè)，否則過于密集
???b.如果只有一個(gè)頁(yè)面，則可以不顯示，當(dāng)然如果特別想秀自己的交互設(shè)計(jì)，也可以把它顯示出來
（7）選取器（Pickers）
選取器多用于被選擇值固定，可以設(shè)定的情況下，減少用戶輸入的繁瑣。記得要在選取器上方安置一個(gè)“完成”按鈕，否則會(huì)坑死用戶的。
（8）進(jìn)度視圖（Progress Views）
一個(gè)進(jìn)度視圖顯示了一個(gè)任務(wù)的進(jìn)展，或者有一個(gè)已知持續(xù)時(shí)間的過程的進(jìn)度。如果你需要顯示一個(gè)未知時(shí)間的任務(wù)進(jìn)度，請(qǐng)使用活動(dòng)指示器。
任務(wù)進(jìn)度條符合“反饋”的交互設(shè)計(jì)體驗(yàn)，在得到最終結(jié)果之前，給予用戶直接明確的信息，讓用戶可以決定下一步動(dòng)作（等待還是取消）。
（9）圓角矩形按鈕（Rounded Rectangle Buttons）
圓角矩形按鈕是一個(gè)多功能的按鈕，你可以在一個(gè)規(guī)圖中用它來執(zhí)行的一個(gè)操作。
在個(gè)人的聯(lián)系人視圖的底部，你可以看很多這種按鈕的例子：文字信息按鈕，添加到收藏夾按鈕都是圓角矩形按鈕：
注意，圓角矩形按鈕：
標(biāo)題如果是英文，首個(gè)字母要大寫。避免按鈕文字太長(zhǎng)被截?cái)?，?dǎo)致用戶不好理解。
（10）搜索欄（Search Bars）
默認(rèn)情況下，搜索圖標(biāo)位于左側(cè)，此外有一些可選元素：
???a.占位文本符，用于提示輸入內(nèi)容或者搜索工具名稱等（上圖灰色文字，還有可能是 通過百度搜索...）
???b.書簽按鈕（用戶以前搜藏的搜索內(nèi)容）
???c.清除按鈕（長(zhǎng)按清除輸入文字）
???d.標(biāo)題描述，顯示與搜索欄上方
（11）分段控件（Segmented Controls）
???a.分段控制按鈕不要過多，否則會(huì)減低體驗(yàn)感和增加操作復(fù)雜性
???b.被點(diǎn)擊區(qū)域最小應(yīng)為44*44
???c.分段控制內(nèi)可以包含圖標(biāo)或文字，但不能同時(shí)包含否則丑的嚇?biāo)廊耍。。?/p>
???d.不要在一個(gè)分段控制里面混排圖片和文字，還是丑的嚇?biāo)廊恕?/p>
???e.每個(gè)分段控制的寬度比例建議一致
（12）滑塊（Sliders）
滑塊允許用戶在范圍內(nèi)調(diào)整數(shù)值或進(jìn)程，拖動(dòng)滑塊時(shí)，滑塊對(duì)應(yīng)的值同步更新，滑塊一般用于：
你想讓用戶對(duì)他們所調(diào)整的內(nèi)容精確控制：值/進(jìn)程。
滑塊的四個(gè)組成部分：左側(cè)圖標(biāo)、右側(cè)圖標(biāo)、操作按鈕、軌道。
（13）文本框（Text Fields）
文本框是個(gè)原形矩形組成，用來接收用戶的輸入。
???a.當(dāng)用戶輕敲文本框的時(shí)候，鍵盤就會(huì)出現(xiàn)。
???b.當(dāng)用戶輕敲鍵盤上的返回鍵時(shí)，文本框用應(yīng)用程序指定的方式來處理輸入。
???c.文本框可以包含一行輸入。
???d.文本框右側(cè)可以包含一個(gè)清楚按鍵。
???e.輸入文本的內(nèi)容可以定制大小，色彩，對(duì)齊方式。
- 創(chuàng)建自定義圖標(biāo)和圖像
圖標(biāo)和系統(tǒng)圖像。
