界面元素

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

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

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

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

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

是系統或用户定義的對象的符號圖形表示，諸如文件、文件夾、光驅等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#狀態欄是透明背景

#位置總是處於頂部

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用於顯示靜態文本。

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

包含一條必要的標題和可選信息。 ^[2] 

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

2、操作菜單 action sheet

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

3、模態視圖 modal view

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

窗口停靠功能與 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。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）消息：可向用户提供某種信息。例如，某操作沒有準備完成，又或沒有錯誤發生。

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

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

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