2023學(xué)年完整公開課版界面元素

界面元素界面元素界面元素（interfaceelement）是指可滿足交互需求的軟件或系統(tǒng)界面所包含的滿足用戶交互要求的一系列元素。界面元素不管是在軟件開發(fā)，人機(jī)交互等方面都是必不可少的。人機(jī)界面的開發(fā)是用選定的界面支持系統(tǒng)所能支持的界面元素來構(gòu)造系統(tǒng)的人機(jī)界面。在設(shè)計(jì)階段，要根據(jù)人機(jī)交互的需求分析，選擇可滿足交互需求的界面元素，并策劃如何用這些元素構(gòu)成人機(jī)界面。下面列舉了在當(dāng)前流行的窗口系統(tǒng)和GUI中常見界面元素。界面元素窗口屏幕上得以獨(dú)立顯示，操作的區(qū)域稱為窗口。這些區(qū)域可由系統(tǒng)或不同應(yīng)用程序使用。窗口可以打開、關(guān)閉、移動(dòng)或改變大小等。對(duì)話框用來收集用戶的輸入信息或向用戶提供反饋的區(qū)域。輸入信息包括由用戶選擇yes或no的選擇鈕、輸入文件名的正文框，或其他設(shè)置各種參數(shù)的輸出入框。輸出包括各種提示，可選項(xiàng)及錯(cuò)誤消息等。菜單顯示一組操作或命令的清單，每一菜單項(xiàng)可以是文字或圖符。菜單可用移動(dòng)光標(biāo)或鼠標(biāo)鍵來選取。其分為固定或活動(dòng)(如彈出型或下拉型)菜單。界面元素滾動(dòng)條用以移動(dòng)窗口區(qū)域中顯示位置的指示條。圖形是系統(tǒng)或用戶定義的對(duì)象的符號(hào)圖形表示，諸如文件、文件夾、光驅(qū)等。此外，包括各種控制板(Panel)、剪輯板(Clipboard)、光標(biāo)按鈕等元素。但是各種窗口系統(tǒng)，GUI和可視化編程環(huán)境所支持的界面元素并不完全相同。對(duì)應(yīng)的界面元素的具體功能也有或多或少的差異。下面將具體列舉幾個(gè)軟件或系統(tǒng)的界面元素進(jìn)行進(jìn)一步說明。界面元素UIKit界面窗口、視圖和視圖控制器窗口和視圖是最基本的類，創(chuàng)建任何類型的用戶界面都要用到。窗口表示屏幕上的一塊幾何區(qū)域，而視圖類則用其自身的功能將這片空白填滿。更小型的UI組件，如導(dǎo)航欄、按鈕和文本框等，都是附著在視圖類之上的，而一個(gè)視圖則鏈接到一個(gè)窗口。視圖控制器是一種控制器類，對(duì)視圖進(jìn)行封裝與控制。控制器對(duì)視圖進(jìn)行管理，控制視圖如何在屏幕上呈現(xiàn)。這為視圖增添了額外的功能，比如內(nèi)建的對(duì)旋轉(zhuǎn)屏幕、轉(zhuǎn)場(chǎng)（transition）以及其他屏幕事件的支持。文本視圖（textview）文本視圖是專門用于呈現(xiàn)編輯器窗口、對(duì)文字進(jìn)行查看或編輯的視圖類。記事本應(yīng)用程序就是一個(gè)很好的簡(jiǎn)單文本視圖的例子。文本視圖在UIKit中很不起眼，被掩蓋于大量更惹眼的類的絢麗光芒之下，很少被使用，但是對(duì)于熟悉UIKit來講卻是一個(gè)良好的開端。界面元素導(dǎo)航欄（navigationbar）和控制器iPhone的UI對(duì)待不同屏幕畫面的方式，就像書里面的"頁(yè)"一樣。導(dǎo)航欄經(jīng)常被用來作為一種視覺上的提醒，讓用戶可以"翻回"到前一個(gè)視圖，它可以提供一些按鈕來修改當(dāng)前屏幕頁(yè)面上的元素，也可以用來顯示多個(gè)控件，如分段控件和工具欄等。幾乎在所有預(yù)裝的iPhone應(yīng)用程序中都可以見到導(dǎo)航欄。導(dǎo)航控制器則可以管理多個(gè)視圖控制器之間的切換，管理方式是在一個(gè)視圖棧中壓入和彈出視圖控制器，而一切關(guān)于導(dǎo)航欄變化的工作則交給了視圖控制器。每個(gè)視圖控制器都有一組自己的導(dǎo)航欄屬性，當(dāng)該視圖成為活動(dòng)視圖時(shí)，會(huì)由導(dǎo)航控制器將這些屬性顯示出來。轉(zhuǎn)場(chǎng)（transition）為了與蘋果公司用戶友好的界面精神保持一致，窗口轉(zhuǎn)場(chǎng)效果也被引入到iPhone中，這樣當(dāng)應(yīng)用程序在畫面之間進(jìn)行切換時(shí)，用戶看到的效果就像翻書一樣。在實(shí)現(xiàn)這種從一個(gè)視圖到另一個(gè)視圖之間的視覺轉(zhuǎn)換時(shí)，使用了動(dòng)畫效果，而不是簡(jiǎn)單地閃動(dòng)到下一幅畫面。界面元素警告視圖（alertview）和操作表單（actionsheet）在iPhone上對(duì)應(yīng)于警告式彈出窗口的，是警告視圖和操作表單。這些視圖是模態(tài)窗口，可以在某個(gè)操作需要用戶注意時(shí)，彈出或者滑動(dòng)到屏幕的最前端。在預(yù)置的iPhone應(yīng)用程序中經(jīng)?？梢砸姷剿鼈?，一般是在用戶收到一個(gè)提醒時(shí)（比如文字短消息）或者試圖刪除某些項(xiàng)目（如語(yǔ)音郵件）時(shí)出現(xiàn)。你可以編程令操作表單向用戶顯示一個(gè)問題，并提供幾個(gè)按鈕用作不同的回應(yīng)。在一個(gè)應(yīng)用程序中需要即刻給予關(guān)注的部分，這些功能頗有效用。表格視圖和控制器表格視圖是一種列表，你可以用它來顯示文件、消息或者其他類型的成組信息。它常用來在一種類似列表的形式中選擇一個(gè)或多個(gè)項(xiàng)目。表格對(duì)象非常靈活，開發(fā)者可以定義表格單元的外觀與行為。你可以對(duì)表格進(jìn)行裁剪，來顯示各種不同的內(nèi)容，比如簡(jiǎn)單的列表、分組的偏好設(shè)置以及名片盒式的分段列。表格視圖控制器管理表格視圖對(duì)象，并能夠?yàn)楸砀褚晥D集成對(duì)添加的視圖控制器的支持。表格視圖控制器提供了對(duì)屏幕旋轉(zhuǎn)以及其他事件的自動(dòng)處理，而且你可以像對(duì)其他視圖控制器一樣，將表格視圖控制器壓入導(dǎo)航棧中，這樣就可以輕松地對(duì)其實(shí)現(xiàn)導(dǎo)航功能。表格視圖控制器還可以作為數(shù)據(jù)源，將信息傳遞給表格來顯示。界面元素狀態(tài)欄操控狀態(tài)欄是出現(xiàn)在iPhone屏幕頂端的一個(gè)小工具欄，可以顯示時(shí)間、電池電量以及信號(hào)強(qiáng)度等信息。你可以定制狀態(tài)欄的風(fēng)格、透明度以及其他屬性。應(yīng)用程序徽章（applicationbadge）有些應(yīng)用程序需要通知用戶一些緊急的信息，它們具有在iPhone的主屏幕（springboard）上顯示徽章的能力。這會(huì)警示用戶，你的應(yīng)用程序需要得到關(guān)注，存在未讀消息或者其他新信息有待查看。一些通過EDGE或者3G網(wǎng)絡(luò)遞送消息的應(yīng)用程序，大量地使用這種功能。應(yīng)用程序服務(wù)當(dāng)應(yīng)用程序退出活動(dòng)狀態(tài)、恢復(fù)活動(dòng)或者終止運(yùn)行時(shí)，會(huì)有不同的方法收到通知，好讓應(yīng)用程序來立刻進(jìn)行清理或者保存狀態(tài)。這些通知被發(fā)送到應(yīng)用程序的代理，代理就可以做出響應(yīng)，進(jìn)行清理工作或保存重要信息。界面元素ios界面元素ios界面元素分為：條欄內(nèi)容視圖控件臨時(shí)視圖界面元素1、狀態(tài)欄statusbar狀態(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)航欄navigationbar導(dǎo)航欄主要作用是在不同的層級(jí)的信息結(jié)構(gòu)之間導(dǎo)航，有時(shí)候可以管理屏幕內(nèi)容。條欄界面元素導(dǎo)航欄上面可以放標(biāo)題或者控件。3、工具欄Toolbar包含了對(duì)頁(yè)面或者視圖中對(duì)象進(jìn)行操作的控件。4、標(biāo)簽欄tabbar標(biāo)簽欄賦予了用戶在不同任務(wù)、視圖和模態(tài)的切換的能力。5、搜索欄searchbar搜索欄可以接受用戶輸入的文本，并把它作為一次性搜素輸入。內(nèi)容視圖我們可以把視圖是用來承載頁(yè)面信息的一個(gè)容器，iOS系統(tǒng)為我們提供一些比較優(yōu)秀的視圖模式。在視圖部分主要列舉幾種比較常用的視圖模式。界面元素1、精選視圖collectionview可以管理項(xiàng)目的有序集合，比如相冊(cè)。2、圖像視圖imageview可以理解為裝載圖像的容器，用來定義圖像是否可以拉伸、縮放、位置的調(diào)整等。3、地圖視圖mapview可以呈現(xiàn)地理數(shù)據(jù)，并支持地圖app的大部分功能。4、滾動(dòng)視圖scrollview該視圖的作用是可以讓用戶瀏覽比視圖更大區(qū)域的內(nèi)容。例如放大圖片后，用滑動(dòng)或者拖拽查看。5、表格視圖tableview以不同的行來顯示信息。該視圖提供了控件讓用戶添加、刪除或者多選，查看某行的更多信息。界面元素控件6、文本視圖textview可以容納并顯示多行文本。并且支持編輯文本。7、web視圖該視圖可以顯示富Html內(nèi)容。比如ios內(nèi)置的郵件功能。1、活動(dòng)指示器activityindicator表示某個(gè)任務(wù)或進(jìn)程正在進(jìn)行中。任務(wù)進(jìn)行時(shí)旋轉(zhuǎn)，任務(wù)完成時(shí)小時(shí)，不允許用戶與之交互。2、日期選擇器datepicker3、標(biāo)簽label用于顯示靜態(tài)文本。4、網(wǎng)絡(luò)活動(dòng)指示器

networkactivityindicator界面元素出現(xiàn)在狀態(tài)欄，表示網(wǎng)絡(luò)活動(dòng)正在進(jìn)行。5、頁(yè)碼控件pagecontrol表示打開了多少視圖以及當(dāng)前視圖是哪一個(gè)。不允許用戶不按照順序訪問視圖。6、選擇器picker用來顯示一組數(shù)值，用戶可以從中選擇一個(gè)。7、進(jìn)度視圖progressview用于展示已知持續(xù)時(shí)間的任務(wù)或者進(jìn)度。8、刷新控件refreshcontrol用于執(zhí)行用戶發(fā)起的刷新，通常用在表格視圖中。9、分段控件segmentedcontrol每一個(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)按鈕systembutton支持自定義樣式，可以包含圖片或者文字。默認(rèn)情況下沒有邊框和背景。14、文本框textfield支持用戶輸入單行文本。可以在文本框左側(cè)或者右側(cè)顯示自定義圖像，或者添加系統(tǒng)按鈕，例如書簽按鈕。還可以在文本框的右側(cè)顯示清楚按鈕。界面元素1、警告框alert包含一條必要的標(biāo)題和可選信息。包含一個(gè)或多個(gè)按鈕。雙按鈕的情況下，按鈕排布規(guī)則：1、操作不會(huì)造成嚴(yán)重后果，而且是用戶最有可能的操作，我們把它放在右邊，取消按鈕放在