界面元素

界面元素（interface element）是指可滿足互動需求的軟體或系統界面所包含的滿足用戶互動要求的一系列元素。

基本介紹

• 中文名：界面元素
• 外文名：interface element
• 套用領域：計算機等
• 套用軟體：photoshop等
• 作用：滿足各類互動需求
• 特點：簡潔，高效

元素簡介

界面元素不管是在軟體開發，人機互動等方面都是必不可少的。人機界面的開發是用選定的界面支持系統所能支持的界面元素來構造系統的人機界面。在設計階段，要根據人機互動的需求分析，選擇可滿足互動需求的界面元素，並策劃如何用這些元素構成人機界面。下面列舉了在當前流行的視窗系統和GUI中常見界面元素。

分類

視窗

螢幕上得以獨立顯示，操作的區域稱為視窗。這些區域可由系統或不同應用程式使用。視窗可以打開、關閉、移動或改變大小等。

對話框

用來收集用戶的輸入信息或向用戶提供反饋的區域。輸入信息包括由用戶選擇yes或no的選擇鈕、輸入檔案名稱的正文框，或其他設定各種參數的輸出入框。輸出包括各種提示，可選項及錯誤訊息等。

選單

顯示一組操作或命令的清單，每一選單項可以是文字或圖符。選單可用移動游標或滑鼠鍵來選取。其分為固定或活動(如彈出型或下拉型)選單。

滾動條

用以移動視窗區域中顯示位置的指示條。

圖形

是系統或用戶定義的對象的符號圖形表示，諸如檔案、資料夾、光碟機等。

此外，包括各種控制板(Panel)、剪輯板(Clipboard)、游標按鈕等元素。但是各種視窗系統，GUI和可視化編程環境所支持的界面元素並不完全相同。對應的界面元素的具體功能也有或多或少的差異。

下面將具體列舉幾個軟體或系統的界面元素進行進一步說明。

UI Kit界面

這一章的目的，是讓你逐漸學會使用基本的UI Kit用戶界面組件來構建程式。而更高級的組件會在第10章涉及。這些基本組件包括下列元素。

視窗、視圖和視圖控制器

視窗和視圖是最基本的類，創建任何類型的用戶界面都要用到。視窗表示螢幕上的一塊幾何區域，而視圖類則用其自身的功能將這片空白填滿。更小型的UI組件，如導航欄、按鈕和文本框等，都是附著在視圖類之上的，而一個視圖則連結到一個視窗。

視圖控制器是一種控制器類，對視圖進行封裝與控制。控制器對視圖進行管理，控制視圖如何在螢幕上呈現。這為視圖增添了額外的功能，比如內建的對旋轉螢幕、轉場（transition）以及其他螢幕事件的支持。

文本視圖（text view）

文本視圖是專門用於呈現編輯器視窗、對文字進行查看或編輯的視圖類。記事本應用程式就是一個很好的簡單文本視圖的例子。文本視圖在UI Kit中很不起眼，被掩蓋於大量更惹眼的類的絢麗光芒之下，很少被使用，但是對於熟悉UI Kit來講卻是一個良好的開端。

導航欄（navigation bar）和控制器

iPhone的UI對待不同螢幕畫面的方式，就像書裡面的"頁"一樣。導航欄經常被用來作為一種視覺上的提醒，讓用戶可以"翻回"到前一個視圖，它可以提供一些按鈕來修改當前螢幕頁面上的元素，也可以用來顯示多個控制項，如分段控制項和工具列等。幾乎在所有預裝的iPhone應用程式中都可以見到導航欄。

導航控制器則可以管理多個視圖控制器之間的切換，管理方式是在一個視圖棧中壓入和彈出視圖控制器，而一切關於導航欄變化的工作則交給了視圖控制器。每個視圖控制器都有一組自己的導航欄屬性，當該視圖成為活動視圖時，會由導航控制器將這些屬性顯示出來。

轉場（transition）

為了與蘋果公司用戶友好的界面精神保持一致，視窗轉場效果也被引入到iPhone中，這樣當應用程式在畫面之間進行切換時，用戶看到的效果就像翻書一樣。在實現這種從一個視圖到另一個視圖之間的視覺轉換時，使用了動畫效果，而不是簡單地閃動到下一幅畫面。

警告視圖（alert view）和操作表單（action sheet）

在iPhone上對應於警告式彈出視窗的，是警告視圖和操作表單。這些視圖是模態視窗，可以在某個操作需要用戶注意時，彈出或者滑動到螢幕的最前端。在預置的iPhone應用程式中經常可以見到它們，一般是在用戶收到一個提醒時（比如文字短訊息）或者試圖刪除某些項目（如語音郵件）時出現。你可以編程令操作表單向用戶顯示一個問題，並提供幾個按鈕用作不同的回應。在一個應用程式中需要即刻給予關注的部分，這些功能頗有效用。

表格視圖和控制器

表格視圖是一種列表，你可以用它來顯示檔案、訊息或者其他類型的成組信息。它常用來在一種類似列表的形式中選擇一個或多個項目。表格對象非常靈活，開發者可以定義表格單元的外觀與行為。你可以對表格進行裁剪，來顯示各種不同的內容，比如簡單的列表、分組的偏好設定以及名片盒式的分段列表。本章會涵蓋簡單表格，更高級的表格使用方式可以在第10章中學到。

表格視圖控制器管理表格視圖對象，並能夠為表格視圖集成對添加的視圖控制器的支持。表格視圖控制器提供了對螢幕旋轉以及其他事件的自動處理，而且你可以像對其他視圖控制器一樣，將表格視圖控制器壓入導航棧中，這樣就可以輕鬆地對其實現導航功能。表格視圖控制器還可以作為數據源，將信息傳遞給表格來顯示。

狀態欄操控

狀態欄是出現在iPhone螢幕頂端的一個小工具列，可以顯示時間、電池電量以及信號強度等信息。你可以定製狀態欄的風格、透明度以及其他屬性。

應用程式徽章（application badge）

有些應用程式需要通知用戶一些緊急的信息，它們具有在iPhone的主螢幕（springboard）上顯示徽章的能力。這會警示用戶，你的應用程式需要得到關注，存在未讀訊息或者其他新信息有待查看。一些通過EDGE或者3G網路遞送訊息的應用程式，大量地使用這種功能。

應用程式服務

當應用程式退出活動狀態、恢復活動或者終止運行時，會有不同的方法收到通知，好讓應用程式來立刻進行清理或者保存狀態。這些通知被傳送到應用程式的代理，代理就可以做出回響，進行清理工作或保存重要信息。

ios界面元素

ios界面元素分為：條欄、內容視圖、控制項、臨時視圖

條欄

1、狀態欄 status bar

狀態欄用來顯示設備的信息、時間、網路等重要信息。默認是白底黑字與黑底白字。

#狀態欄是透明背景

#位置總是處於頂部

注意事項：1、狀態欄可以在整個app中採用一個樣式，也可以單獨為某個視圖設計樣式。2、狀態欄背後不要放其他內容，不要有滾動內容，防止干擾用戶閱讀狀態欄信息。3、儘量不要隱藏狀態欄，除非特殊情況，例如全螢幕看視頻可以隱藏狀態欄，但是保證輕點螢幕時可以重新恢復狀態欄。

2、導航欄 navigation bar

導航欄主要作用是在不同的層級的信息結構之間導航，有時候可以管理螢幕內容。

導航欄上面可以放標題或者控制項。

3、工具列 Toolbar

包含了對頁面或者視圖中對象進行操作的控制項。

4、標籤欄 tab bar

標籤欄賦予了用戶在不同任務、視圖和模態的切換的能力。

5、搜尋欄 search bar

搜尋欄可以接受用戶輸入的文本，並把它作為一次性搜素輸入。

內容視圖

我們可以把視圖是用來承載頁面信息的一個容器，iOS 系統為我們提供一些比較優秀的視圖模式。在視圖部分主要列舉幾種比較常用的視圖模式。

1、精選視圖 collection view

可以管理項目的有序集合，比如相冊。

2、圖像視圖 image view

可以理解為裝載圖像的容器，用來定義圖像是否可以拉伸、縮放、位置的調整等。

3、地圖視圖 map view

可以呈現地理數據，並支持地圖app的大部分功能。

4、滾動視圖 scroll view

該視圖的作用是可以讓用戶瀏覽比視圖更大區域的內容。例如放大圖片後，用滑動或者拖拽查看。

5、表格視圖 table view

以不同的行來顯示信息。該視圖提供了控制項讓用戶添加、刪除或者多選，查看某行的更多信息。

6、文本視圖 text view

可以容納並顯示多行文本。並且支持編輯文本。

7、web 視圖

該視圖可以顯示富Html 內容。比如ios內置的郵件功能。

控制項

1、活動指示器 activity indicator

表示某個任務或進程正在進行中。任務進行時旋轉，任務完成時小時，不允許用戶與之互動。

2、日期選擇器 date picker

3、標籤 label

用於顯示靜態文本。

4、網路活動指示器 network activity indicator

出現在狀態欄，表示網路活動正在進行。

5、頁碼控制項 page control

表示打開了多少視圖以及當前視圖是哪一個。不允許用戶不按照順序訪問視圖。

6、選擇器 picker

用來顯示一組數值，用戶可以從中選擇一個。

7、進度視圖 progress view

用於展示已知持續時間的任務或者進度。

8、刷新控制項 refresh control

用於執行用戶發起的刷新，通常用在表格視圖中。

9、分段控制項 segmented control

每一個分段控制項相當於一個顯示不同視圖的按鈕

10、滑塊 slider

允許用戶在一定範圍里調整數值或進度。

11、步進器 stepper

以常數量來增加或者減少某個數值。支持自定義圖像。

12、開關 switch 表現兩種互斥的狀態，只用於表格視圖。

13、系統按鈕 system button

支持自定義樣式，可以包含圖片或者文字。默認情況下沒有框線和背景。

14、文本框 text field

支持用戶輸入單行文本。可以在文本框左側或者右側顯示自定義圖像，或者添加系統按鈕，例如書籤按鈕。還可以在文本框的右側顯示清楚按鈕。

臨時視圖

1、警告框 alert

包含一條必要的標題和可選信息。

包含一個或多個按鈕。 雙按鈕的情況下，按鈕排布規則：1、操作不會造成嚴重後果，而且是用戶最有可能的操作，我們把它放在右邊，取消按鈕放在左邊。2、如果按鈕具有破環性，則放在左邊，取消按鈕在右邊。

2、操作選單 action sheet

顯示用戶所發起操作的相關選項。用紅色的字來顯示具有破壞的選項按鈕。

3、模態視圖 modal view

以模態的形式展現的視圖，為當前任務或者情景提供功能。通常包含一個完成按鈕，一個取消按鈕。比如評論功能，點擊評論的圖示進入模態視圖，彈出鍵盤、文本視圖、完成和取消按鈕。

RC界面元素

視窗停靠

視窗停靠功能與 Visual Studio 圖形用戶界面使用的視窗停靠。

控制項條

控制項條現在稱為窗格並從派生。CBasePane Class在 MFC 中，早期版本控制項條基類是CControlBar。

應用程式主框架視窗由CFrameWndEx Class或CMDIFrameWndEx 類通常表示。 主框架調用停靠站點。 窗格可以具有父級的三種類型之一：停靠站點、停靠或欄微型框視窗。

窗格中有兩種類型：不可重新調整和可調整大小。 使用拆分或滑塊，可調整大小中，如狀態欄和工具列)，它可以調整大小。 可重新調整的窗格中窗體容器 (一窗格可以停靠到其他窗格，創建在它們之間進行拆分。) 但是，可調整大小的欄停靠窗格不能附加 (停靠)。

如果應用程式使用不可重新調整的窗格，請從CPane Class派生它們。如果應用程式使用可重新調整的窗格，請從CDockablePane Class派生它們

停靠站點

停靠站點 (或主框架視窗) 擁有所有窗格和要框"應用程式。 停靠站點包含一個成員。CDockingManager此成員保留屬於固定站點所有窗格的列表。 列表排序，以便創建在站點的停靠窗格外邊緣在列表的開始位置。 當框架重新停靠站點內循環時，該列表對包含停靠網站的當前範圍矩形調整每個窗格布局。 您可以調用AdjustDockingLayout或RecalcLayout，則您必須調整停靠布局時，而框架重定向此調用向停靠管理器。

條停靠

每個主框架視窗可以沿其邊界的Dock 條。 停靠欄是屬於CDockSite Class的窗格。 停靠條可以接受從CPane派生的對象，如工具列。 若要創建一條停靠，在主框架視窗初始化時，請調用EnableDocking。 若要啟用自動隱藏條，請調用EnableAutoHideBars。EnableAutoHideBars創建對象，並在CAutoHideDockSite每個停靠條旁邊確定它們。

每個停靠欄分為停靠行。 停靠行已被CDockingPanesRow Class表示。 每個行包含停靠工具列列表。 如果用戶停靠工具列移動或從一行的工具列為另一種。同一個停靠欄中，框架或創建新行並相應地調整停靠條，或者在現有行確定工具列。

微型框視窗

浮動窗格位於微型框視窗。 微型框視窗。表示兩類：只能包含一窗格) 可以包含多窗格) 中的CMDITabInfo Class() 和CMultiPaneFrameWnd Class(。浮動代碼中的一個窗格，調用CBasePane::FloatPane。 在浮動窗格之後，框架會自動創建要框視窗中，該視窗浮動窗格微型框變為的父級。 在浮動窗格停靠時，框架將重置其父，並且，浮動窗格變成條停靠工具列 (對於) 或停靠站點 (為大小可調的窗格。)

窗格分隔設定

分隔設定窗格 (也稱為滑塊或拆分器)。CPaneDivider Class表示。 當用戶窗格停靠時，框架創建窗格分隔設定，而不管窗格是停靠在停靠站點或在另一個窗格。 如果窗格停靠到停靠窗格的調用站點時，默認窗格分隔線。 默認窗格分隔對所有停靠在停靠窗格布局運行站點。 停靠管理器保持默認窗格的列表和窗格的列表。 停靠管理器運行所有停靠窗格布局。

容器

所有可調整大小中，當容器中停靠，彼此進行維護。 容器通過CPaneContainer Class表示。 每個容器包含指向其左窗格、右、子窗格左側容器、正確的子容器和拆分。和部件之間。(不引用實際端，而標識樹結構所始於的分支。)這樣就可以生成和拆分窗格樹並實現可以一起調整窗格的複雜的布局。CPaneContainer類維護容器樹；位於此樹中還維護窗格兩個列表和滑塊。 容器通常窗格管理器嵌入具有多個窗格的默認和滑塊微型框視窗。

自動隱藏控制項條

默認情況下，每個CDockablePane都支持自動隱藏功能。 當用戶單擊CDockablePane控制項上的標題時固定按鈕切換窗格，框架自動隱藏模式。 若要處理單擊框架創建，並與CMFCAutoHideBar ClassCMFCAutoHideButton ClassCMFCAutoHideBar對象。 框架上CAutoHideDockSite將新的CMFCAutoHideBar。 框架還將CMFCAutoHideButton附加到工具列。CDockingManager Class維護CDockablePane。

選項卡式控制項條Outlook

CMFCBaseTabCtrl Class一個選項卡式視窗的基本功能。可拆的選項卡中。 為了使用CMFCBaseTabCtrl對象，初始化在的應用程式CBaseTabbedPane 類。CBaseTabbedPane從CDockablePane派生並維護指向CMFCBaseTabCtrl對象的指針。CBaseTabbedPane允許用戶調整停靠和選項卡式控制項條。 使用CDockablePane::AttachToTabWnd動態創建停靠和選項卡式控制項條。

Outlook 欄控制項基於選項卡式欄也。CMFCOutlookBar 類從CBaseTabbedPane派生。 有關如何使用 Outlook 欄的更多信息，請參見CMFCOutlookBar 類。

界面元素設計

界面元素設計是為了滿足軟體專業化和標準化的需求而產生的對軟體的使用界面進行美化、最佳化和規範化的設計分支。具體包括軟體啟動封面設計、軟體框架設計、按鈕設計、面板設計、選單設計、標籤設計、圖示設計、滾動條及狀態欄設計、安裝過程設計和包裝及商品化。而基於網路化的軟體界面設計可以忽略軟體啟動、安裝過程設計和包裝及商品化等過程的界面元素設計。針對設計過程中應注意的關鍵問題，確定所需的界面元素。

軟體啟動封面設計

應使軟體啟動封面最終為高清晰度的圖像，如軟體啟動封面需在不同的平台、作業系統上使用將考慮轉換不同的格式，並且對選用的色彩不宜超過256色，最好為216色安全色①。軟體啟動封面大小多為主流顯示器解析度的1/6大。如果是系列軟體將考慮整體設計的統一和延續性。在上面應該醒目地標註製作或支持的公司標誌、產品商標、軟體名稱、版本號、網址、著作權聲明、序列號等信息，以樹立軟體形象，方便使用者或購買者在軟體啟動的時候得到提示。插圖宜使用具有獨立著作權的、象徵性強的、識別性高的、視覺傳達效果好的圖形，若使用攝影也應該進行數位處理，以形成該軟體的個性化特徵。

軟體框架

軟體的框架設計較為複雜，因為涉及軟體的使用功能，應該對該軟體產品的程式和使用比較了解，這就需要設計師有一定的軟體跟進經驗，快速地學習軟體產品，並且和軟體產品的程式設計師及程式使用對象進行共同溝通，以設計出友好的、獨特的、符合程式開發原則的軟體框架。

軟體框架設計應該簡潔明快，儘量少用無謂的裝飾，應該考慮節省螢幕空間，各種解析度的大小，縮放時的狀態和原則，並且為將來設計的按鈕、選單、標籤、滾動條及狀態欄預留位置。根據人的視覺注意的分布程度，習慣上將比較重要的信息集中於左下至右上的敏感區域顯示。所以，在整體界面的色彩組合合理搭配後，將軟體商標放在人們首先注意到的左上方，主選單應放在左邊或上邊，滾動條放在右邊，狀態欄放在下邊，以符合視覺流程和用戶使用心理。

軟體按鈕

軟體按鈕設計應該具有互動性，即應該有多種狀態效果，最好能達到：點擊時狀態；滑鼠放在上面，但處於未點擊的狀態；點擊前滑鼠未放在上面時的狀態；點擊後滑鼠未放在上面時的狀態；不能點擊時狀態；獨立自動變化的狀態。按鈕應具備簡潔的圖示效果，應能夠讓使用者產生功能關聯反應，群組內按鈕應該風格統一，功能差異大的按鈕應該有所區別。

選單

選單設計一般有選中狀態和未選中狀態，左邊應為名稱，右邊應為快捷鍵，如果有下級選單應該有下級箭頭符號，不同功能區間應該用線條分割完成，相同或相近功能的選單用橫線隔開放在同一位置。

選單通常採用“常用 主要一次要 工具 幫助”的順序排列，符合流行的Windows風格。下拉選單要根據選單選項的含義進行分組，並按照一定的規則進行排列，用橫線隔開。如果選單選項較多，應該採用加長選單的長度而降低深度的原則排列，選單深度一般要求最多控制在3層以內。對常用的選單要有快捷命令方式。與操作無關的選單要用禁止的方式加以處理，最好採用動態載入方式，即只有需要的選單才顯示。選單前的圖示不宜太大，最好與字的高度保持一致。主選單數目不應太多，最好為單排布置。主選單的寬頻要接近，字數不應多於4個，每個選單字數最好能相同

圖示

圖示設計色彩不宜超過64位色①，且邊緣非常平滑大小為16 X16，32X32兩種，圖示設計是方寸藝術，應著重考慮視覺衝擊力，它需要在很小的範圍表現出軟體的內涵，所以很多圖示設計師在設計圖示時使用簡單的顏色，利用眼睛對色彩和網點的空間混合效果，做出了許多精彩圖示。

滾動條及狀態欄

滾動條主要是為了對區域性空間的固定大小中內容量的變換進行設計，應該有上下箭頭、滾動標等，有些還有翻頁標，如果需要的話。滾動條的長度要根據顯示信息的長度或寬度來計算變換，以利於用戶了解顯示信息的位置和百分比。滾動條的寬度比狀態條的略窄。

狀態欄則是為了對軟體當前狀態的顯示和提示。狀態欄要能顯示用戶需要的信息、常用的有目的的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應該顯示進度條和進度提示等狀態。狀態條的高度以能放置五號字為宜。

軟體面板

軟體面板設計應具有縮放功能，面板應該對功能區間劃分清晰，應該和對話框、彈出框等風格匹配，儘量節省空間，切換方便。

警告框和窗體

對於不同的套用需求，可能會涉及軟體套用引導性的界面元素，如警告框、彈出窗體等。

警告框通常是以對話框的形式出現，所含一種或多種表現形式：一個標題、一段信息、一個圖示、一個或多個按鈕，需注意在貫穿軟體中的警告框的格式必須達到一致性。從提醒用戶的信息內容的角度分以下多種。

(1)訊息：可向用戶提供某種信息。例如，某操作沒有準備完成，又或沒有錯誤發生。

(2)確認：向用戶提出一個問題，希望用戶對某個操作進行確認，或者進行可能的選擇。

(3)警告：向用戶詢問某個操作是否是有意的。因為該操作可能造成數據丟失。備忘錄軟體常用這個對話框來確認是否要刪除一條備忘錄記錄，因為用戶還可以選擇在PC機上保留備份（這樣就不會造成數據丟失）。但是，系統也會在用戶選擇刪除一個軟體時，出現此警告框，因為一旦進行了該刪除操作之後，該軟體將完全不復存在。

(4)錯誤：框提醒用戶，上一次的操作在執行過程中出現了錯誤。一個窗體通常被用來作為一個或者多個用戶界面元素的容器，可以包含按鈕、列表、表格、控制項、圖示等元素。它同樣可以擁有與之相對應的選單條。從一個對話框到列表、表格數據的容器，都可以被當作窗體。窗體可以很小，也可以大到填滿整個掌上設備的顯示屏。