軟體使用者介面設計

上一頁
下一頁

使用者介面是軟體的前端應用程式檢視，使用者透過它與軟體進行互動。使用者可以透過使用者介面操作和控制軟體以及硬體。如今，使用者介面幾乎存在於任何使用數字技術的地方，從電腦、手機、汽車、音樂播放器、飛機、船舶等等。

使用者介面是軟體的一部分，其設計方式旨在為使用者提供對軟體的洞察。UI 為人機互動提供了基礎平臺。

UI 可以是圖形化的、基於文字的、基於音訊影片的，具體取決於底層硬體和軟體的組合。UI 可以是硬體或軟體，也可以是兩者的組合。

如果軟體的使用者介面：

  • 吸引人
  • 易於使用
  • 響應速度快
  • 易於理解
  • 在所有介面螢幕上保持一致

UI 主要分為兩類：

  • 命令列介面
  • 圖形使用者介面

命令列介面 (CLI)

在影片顯示器出現之前，CLI 一直是與計算機互動的強大工具。CLI 是許多技術使用者和程式設計師的首選。CLI 是軟體可以提供給使用者的最低限度的介面。

CLI 提供一個命令提示符，使用者在其中輸入命令並將其饋送到系統。使用者需要記住命令的語法及其用法。早期的 CLI 並沒有被程式設計為有效地處理使用者錯誤。

命令是指一組指令的基於文字的引用，這些指令預計將由系統執行。宏、指令碼等方法使使用者操作起來更加容易。

與 GUI 相比，CLI 使用的計算機資源更少。

CLI 元素

Command Line Interface (CLI)

基於文字的命令列介面可以包含以下元素：

  • 命令提示符 - 它是一個基於文字的通知器，通常顯示使用者正在工作的上下文。它由軟體系統生成。

  • 游標 - 它是一條細小的水平線或一條與行等高的垂直條，用於表示打字時字元的位置。游標通常處於閃爍狀態。當用戶鍵入或刪除內容時，它會移動。

  • 命令 - 命令是一條可執行的指令。它可以有一個或多個引數。命令執行後的輸出在螢幕上內聯顯示。當生成輸出時，命令提示符將顯示在下一行。

圖形使用者介面

圖形使用者介面為使用者提供了與系統互動的圖形化方式。GUI 可以是硬體和軟體的組合。使用 GUI，使用者可以解釋軟體。

通常，GUI 比 CLI 消耗更多的資源。隨著技術的進步，程式設計師和設計師建立了更復雜的 GUI 設計，這些設計以更高的效率、準確性和速度執行。

GUI 元素

GUI 提供了一組用於與軟體或硬體互動的元件。

每個圖形元件都提供了一種與系統互動的方式。GUI 系統具有以下元素：

Graphical User Interface

  • 視窗 - 用於顯示應用程式內容的區域。如果視窗表示檔案結構，則視窗中的內容可以以圖示或列表的形式顯示。使用者在資源管理器視窗中瀏覽檔案系統更加容易。視窗可以最小化、調整大小或最大化到螢幕大小。它們可以移動到螢幕上的任何位置。一個視窗可以包含同一應用程式的另一個視窗，稱為子視窗。

  • 選項卡 - 如果應用程式允許執行其自身的多個例項，它們將在螢幕上顯示為單獨的視窗。選項卡式文件介面已出現，用於在同一視窗中開啟多個文件。此介面還有助於在應用程式中檢視首選項面板。所有現代網路瀏覽器都使用此功能。

  • 選單 - 選單是一組標準命令的陣列，它們被組合在一起並放置在應用程式視窗的可見位置（通常是頂部）。可以對選單進行程式設計，使其在滑鼠單擊時顯示或隱藏。

  • 圖示 - 圖示是表示關聯應用程式的小圖片。當單擊或雙擊這些圖示時，應用程式視窗將開啟。圖示以小圖片的形式顯示系統上安裝的應用程式和程式。

  • 游標 - 滑鼠、觸控板、數位筆等互動裝置在 GUI 中表示為游標。螢幕上的游標幾乎即時地遵循來自硬體的指令。在 GUI 系統中，游標也稱為指標。它們用於選擇選單、視窗和其他應用程式功能。

特定於應用程式的 GUI 元件

應用程式的 GUI 包含一個或多個列出的 GUI 元素。

  • 應用程式視窗 - 大多數應用程式視窗使用作業系統提供的構造，但許多應用程式使用自己建立的自定義視窗來包含應用程式的內容。

  • 對話方塊 - 它是一個子視窗，其中包含供使用者檢視的訊息以及請求採取某些操作。例如：應用程式生成一個對話方塊，以獲取使用者確認以刪除檔案。

    Dialogue Box

  • 文字框 - 為使用者提供一個區域來鍵入和輸入基於文字的資料。

  • 按鈕 - 它們模擬現實生活中的按鈕，用於將輸入提交到軟體。

    Radio-button

  • 單選按鈕 - 顯示可供選擇的選項。在所有提供的選項中，只能選擇一個。

  • 複選框 - 功能類似於列表框。當選擇一個選項時，該框將標記為已選中。可以選中由複選框表示的多個選項。

  • 列表框 - 提供可供選擇的專案列表。可以選中多個專案。

    List-box

其他令人印象深刻的 GUI 元件包括：

  • 滑塊
  • 組合框
  • 資料網格
  • 下拉列表

使用者介面設計活動

為設計使用者介面執行了許多活動。GUI 設計和實現的過程類似於 SDLC。在瀑布模型、迭代模型或螺旋模型中，任何模型都可以用於 GUI 實現。

用於 GUI 設計和開發的模型應滿足以下 GUI 特定步驟。

GUI Process

  • GUI 需求收集 - 設計師可能希望列出 GUI 的所有功能和非功能需求。這可以從使用者及其現有的軟體解決方案中獲取。

  • 使用者分析 - 設計師研究誰將使用軟體 GUI。目標受眾很重要，因為設計細節會根據使用者的知識和能力水平而改變。如果使用者是技術嫻熟的，則可以加入高階和複雜的 GUI。對於新手使用者，會包含更多關於軟體使用方法的資訊。

  • 任務分析 - 設計師必須分析軟體解決方案要完成哪些任務。在 GUI 中，如何完成並不重要。任務可以以分層的方式表示，首先確定一個主要任務，然後將其進一步劃分為更小的子任務。任務為 GUI 展示提供目標。子任務之間資訊流決定了軟體中 GUI 內容的流程。

  • GUI 設計與實現 - 設計師在掌握了需求、任務和使用者環境的資訊後，設計 GUI 並將其轉換為程式碼，並將 GUI 嵌入到後臺的工作或虛擬軟體中。然後由開發人員進行自測。

  • 測試 - GUI 測試可以透過多種方式進行。組織可以進行內部檢查、使用者直接參與以及釋出測試版等。測試可能包括可用性、相容性、使用者驗收等。

GUI 實現工具

有幾種工具可供設計師使用，透過這些工具，他們可以一鍵建立整個 GUI。某些工具可以嵌入到軟體環境（IDE）中。

GUI 實現工具提供了強大的 GUI 控制元件陣列。為了進行軟體自定義，設計師可以相應地更改程式碼。

根據不同的用途和平臺，GUI 工具有不同的細分市場。

示例

移動 GUI、計算機 GUI、觸控式螢幕 GUI 等。以下是一些構建 GUI 的常用工具列表：

  • FLUID
  • AppInventor（Android）
  • LucidChart
  • Wavemaker
  • Visual Studio

使用者介面黃金法則

以下規則被認為是 GUI 設計的黃金法則，由 Shneiderman 和 Plaisant 在他們的著作（Designing the User Interface）中描述。

  • 力求一致性 - 在類似的情況下，應需要一致的操作序列。在提示、選單和幫助螢幕中應使用相同的術語。在整個過程中應使用一致的命令。

  • 允許高階使用者使用快捷方式 - 使用者減少互動次數的願望會隨著使用頻率的增加而增加。縮寫、功能鍵、隱藏命令和宏功能對專家使用者非常有幫助。

  • 提供資訊反饋 - 對於每個操作員操作，都應該有一些系統反饋。對於頻繁和次要的操作，響應必須適度，而對於不頻繁和主要的操作，響應必須更充分。

  • 設計對話以產生閉環 - 操作序列應組織成具有開始、中間和結束的組。在完成一組操作後提供的資訊反饋讓操作員獲得成就感、解脫感，並向他們發出訊號，讓他們從腦海中刪除應急計劃和選項，這表明前進的道路是清晰的，可以為下一組操作做好準備。

  • 提供簡單的錯誤處理 - 儘可能設計系統，以便使用者不會犯嚴重的錯誤。如果發生錯誤，系統應該能夠檢測到它並提供簡單易懂的錯誤處理機制。

  • 允許輕鬆撤消操作 - 此功能可以緩解焦慮，因為使用者知道錯誤可以撤消。輕鬆撤消操作鼓勵探索不熟悉的選項。可撤消的單位可以是單個操作、資料輸入或一組完整的操作。

  • 支援內部控制點 - 經驗豐富的操作員強烈希望感覺到他們掌握了系統，並且系統響應了他們的操作。設計系統使使用者成為操作的發起者，而不是響應者。

  • 減少短期記憶負荷 - 人類在短期記憶中處理資訊的能力有限，因此需要使顯示保持簡單，合併多頁顯示，減少視窗移動頻率，併為程式碼、助記符和操作序列分配足夠的訓練時間。

列印頁面

上一頁
下一頁
廣告