軟件工程 用戶界面設(shè)計(jì)

用戶界面（UI，User Interface）是用戶交互以使用軟件的前段應(yīng)用程序視圖。用戶可以通過用戶界面操作和控制軟件和硬件。今天，幾乎所有存在數(shù)字技術(shù)的地方都可以找到用戶界面，從計(jì)算機(jī)、手機(jī)、汽車、音樂播放器、飛機(jī)、輪船等。

用戶界面是軟件的一部分，其中涉及方式旨在提供用戶對(duì)軟件的洞察力。UI 為人機(jī)交互提供了基礎(chǔ)平臺(tái)。

UI 可以是圖形化的、基于文本的、基于音頻的和視頻的，這取決于底層的硬件和軟件組成。UI 可以是硬件或軟件，也可以是兩者的組合。

一個(gè)好的用戶界面應(yīng)該是：

• 吸引人的
• 使用簡(jiǎn)單
• 短時(shí)間內(nèi)響應(yīng)
• 清楚明了
• 在所有界面屏幕上保持一致

UI大致分為兩類:

• 命令行界面（Command Line Interface，CLI）
• 圖形用戶界面（Graphical User Interface，GUI）

命令行界面

在視頻顯示監(jiān)視器出現(xiàn)之前，CLI 一直是與計(jì)算機(jī)交互的絕佳工具。CLI 是許多技術(shù)用戶和程序員的首選。CLI 是軟件可以提供給用戶的最小界面。

CLI 提供了命運(yùn)提示符，用戶可以在此輸入命令并向系統(tǒng)提供信息。用戶需要記住命令的語(yǔ)法及其用法。早起的 CLI 沒有被編程來有效地處理用戶錯(cuò)誤。

命令是對(duì)指令集的基于文本的引用，預(yù)期由系統(tǒng)執(zhí)行。有宏、腳本等方法，方便用戶操作。

與 GUI 相比，CLI 使用更少的計(jì)算機(jī)資源。

CLI 元素

基于文本的命令行界面，可以有以下元素：

• 命令提示符?- 它是基于文本的通知程序，主要顯示用戶工作的上下文。它是由軟件系統(tǒng)生成的。
• 光標(biāo)?- 它是一個(gè)小的水平線或線高的垂直條，表示打字時(shí)字符的位置。光標(biāo)大多處于閃爍狀態(tài)。它隨著用戶寫入或刪除內(nèi)容而移動(dòng)。
• 命令?- 命令是可執(zhí)行的指令。它可能有一個(gè)或多個(gè)參數(shù)。命令執(zhí)行的輸出顯示在屏幕上，。產(chǎn)生輸出時(shí)，命令提示符顯示在下一行。

圖形用戶界面

圖形用戶界面為用戶提供了與系統(tǒng)交互的圖形方式。GUI 可以是硬件和軟件的組合。使用 GUI，用戶解釋軟件。

通常情況下，GUI 比 CLI 消耗更多資源。隨著技術(shù)的進(jìn)步，程序員和設(shè)計(jì)人員可以創(chuàng)建復(fù)雜的 GUI 設(shè)計(jì)，以提高工作效率、準(zhǔn)確性和速度。

GUI 元素

GUI 提供了一組與軟件或硬件交互的組件。

每個(gè)圖形組件都提供了一種使用系統(tǒng)的方法。GUI 系統(tǒng)具有以下的元素，如:

• 窗口?- 顯示應(yīng)用程序內(nèi)容的區(qū)域。如果窗口表示文件結(jié)構(gòu)，則窗口中的內(nèi)容可以以圖標(biāo)或列表的形式顯示。用戶可以更輕松地瀏覽窗口中的文件系統(tǒng)中導(dǎo)航。Windows 可以最小化、調(diào)整大小或最大化到屏幕大小。它們可以移動(dòng)到屏幕上的任何位置。一個(gè)窗口可能包含同一應(yīng)用的另一個(gè)窗口，稱為子窗口。
• 標(biāo)簽?- 如果應(yīng)用程序允許執(zhí)行自身的多個(gè)實(shí)例，它們將作為單獨(dú)的窗口出現(xiàn)在屏幕上。選項(xiàng)卡式文檔界面已經(jīng)出現(xiàn)，可以在同一個(gè)窗口中打開多個(gè)文檔。此界面還有助于查看應(yīng)用程序中的首選項(xiàng)面板。所有現(xiàn)代網(wǎng)絡(luò)瀏覽器都是用此功能。
• 菜單?- 菜單是一組標(biāo)準(zhǔn)命令，組合在一起并放置在應(yīng)用程序窗口內(nèi)的課件位置（通常是頂部）。菜單可以被編程為在鼠標(biāo)點(diǎn)擊時(shí)出現(xiàn)或隱藏。
• 圖標(biāo)?- 圖標(biāo)是代表關(guān)聯(lián)應(yīng)用程序的小圖片。單擊或雙擊這些圖標(biāo)時(shí)，將打開應(yīng)用程序窗口。圖標(biāo)以小圖片的形式顯示系統(tǒng)上安裝的應(yīng)用程序和程序。
• 光標(biāo)?- 鼠標(biāo)、觸摸板、數(shù)字筆等交互設(shè)備在 GUI 中表示為光標(biāo)。屏幕光標(biāo)幾乎實(shí)時(shí)跟隨硬件指令。光標(biāo)在 GUI 系統(tǒng)中稱為指針。它們用于選擇菜單、窗口和其他應(yīng)用程序功能。

特定的應(yīng)用程序的GUI組件

應(yīng)用程序的 GUI 包含一個(gè)或多個(gè)列出的 GUI 元素：

• 應(yīng)用程序窗口?- 大多數(shù)應(yīng)用程序窗口使用操作系統(tǒng)提供的結(jié)構(gòu)，但許多使用他們自己的客戶創(chuàng)建的窗口來包含應(yīng)用程序的內(nèi)容。
• 對(duì)話框?- 它是一個(gè)子窗口，包含給用戶的消息并請(qǐng)求采取一些行動(dòng)。例如：應(yīng)用程序生成一個(gè)對(duì)話以獲取用戶確認(rèn)刪除文件。
  
• 文本框?- 為用戶提供一個(gè)區(qū)域來鍵入和輸入基于文本的數(shù)據(jù)。
• 按鈕?- 它們模擬現(xiàn)實(shí)生活中的按鈕，用于向軟件提交輸入。
  
• 單選按鈕?- 顯示可供選擇的選項(xiàng)。在所有提供的選項(xiàng)中只能選擇一種。
• 復(fù)選框?- 功能類似于列表框當(dāng)一個(gè)選項(xiàng)被選中時(shí)，該框被標(biāo)記為選中?？梢赃x擇由復(fù)選框表示的多個(gè)選項(xiàng)。
• 列表框?- 提供可供選擇的可用項(xiàng)目列表?？梢赃x擇多個(gè)項(xiàng)目。
  

其他令人印象深刻的 GUI 組件包括:

• 滑塊
• 組合框
• 數(shù)據(jù)網(wǎng)格
• 下拉列表

用戶界面設(shè)計(jì)活動(dòng)

有許多活動(dòng)用于設(shè)計(jì)用戶界面。GUI 設(shè)計(jì)和實(shí)現(xiàn)的過程與 SDLC 類似。任何模型都可以用于瀑布模型、迭代模型或螺旋模型之間的 GUI 實(shí)現(xiàn)。

用于 GUI 設(shè)計(jì)和開發(fā)的模型應(yīng)完成這些 GUI 的具體步驟：

• GUI需求搜集?- 設(shè)計(jì)師可能希望擁有 GUI 的所有功能和非功能需求列表。這可以從用戶和他們現(xiàn)有的軟件解決方案中獲取。
• 用戶分析?- 設(shè)計(jì)師研究誰(shuí)將會(huì)使用軟件 GUI。目標(biāo)受眾很重要，因?yàn)樵O(shè)計(jì)細(xì)節(jié)會(huì)根據(jù)用戶的知識(shí)和能力水平發(fā)生變化。如果用戶精通技術(shù)，則可以合并高級(jí)和復(fù)雜的 GUI。對(duì)于新手用戶，包含有關(guān)軟件操作方法的更多信息。
• 任務(wù)分析?- 設(shè)計(jì)師必須分析軟件解決方案要完成的任務(wù)。在 GUI 中，如何完成并不重要。任務(wù)可以采用分層方式表示，將一項(xiàng)主要任務(wù)進(jìn)一步劃分為更小的子任務(wù)。任務(wù)為 GUI 呈現(xiàn)提供目標(biāo)。子任務(wù)之間的信息流決定了軟件中 GUI 內(nèi)容的流向。
• GUI設(shè)計(jì)與實(shí)現(xiàn)?- 設(shè)計(jì)師在獲得有關(guān)需求、任務(wù)和用戶環(huán)境的信息后，設(shè)計(jì) GUI 并將其實(shí)現(xiàn)為代碼，并在后臺(tái)將 GUI 嵌入到工作或虛擬軟件中。然后由開發(fā)人員自行測(cè)試。
• 測(cè)試?- GUI測(cè)試可以通過多種方式完成。組織可以進(jìn)行內(nèi)部檢查，用戶直接參與和發(fā)布測(cè)試版很少。測(cè)試可能包括可用性、兼容性、用戶接受度等。

GUI實(shí)現(xiàn)工具

有多種工具可供設(shè)計(jì)人員通過單擊鼠標(biāo)創(chuàng)建整個(gè) GUI。一些工具可以嵌入到軟件環(huán)境（IDE）中。

GUI 實(shí)現(xiàn)工具提供了強(qiáng)大的 GUI 空間陣列。對(duì)于軟件定制，設(shè)計(jì)人員可以相應(yīng)地更改代碼。

GUI 工具根據(jù)其不同的用途和平臺(tái)有不同的細(xì)分市場(chǎng)。

例子

移動(dòng)GUI、計(jì)算機(jī)GUI、觸摸屏GUI等。這里羅列出一些可以方便地構(gòu)建 GUI 的工具：

• Fluid
• AppInventor（安卓)
• LucidChart
• Wavemaker
• Visual Studio

用戶界面黃金法則

Shneiderman 和 Plaisant 在他們的書（設(shè)計(jì)用戶界面）中描述了以下規(guī)則是 GUI 設(shè)計(jì)的黃金法則：

• 力求一致性?- 在類似情況下，應(yīng)要求采取一致的行動(dòng)順序。在提示、菜單和幫助屏幕中應(yīng)使用相同的術(shù)語(yǔ)。應(yīng)始終使用一致的命令。
• 允許頻繁使用的用戶使用快捷方式?- 用戶減少交互次數(shù)的愿望隨著使用頻率的增加而增加。縮寫、功能鍵、隱藏命令和宏工具對(duì)專家用戶非常有幫助。
• 提供信息反饋?- 對(duì)于每個(gè)操作員操作，都應(yīng)該有一些系統(tǒng)反饋。對(duì)于頻繁和次要的行動(dòng)，反應(yīng)必須適度，而對(duì)于不頻繁和重大的行動(dòng)，反應(yīng)必須更加實(shí)質(zhì)性。
• 設(shè)計(jì)對(duì)話框以產(chǎn)生閉合?- 一系列動(dòng)作應(yīng)組織稱具有開頭、中間和結(jié)尾的組。一組動(dòng)作完成時(shí)的信息反饋給操作員帶來成就感、解脫感、放棄應(yīng)急計(jì)劃和選項(xiàng)的信號(hào)，這表明前進(jìn)的道路已經(jīng)清晰，可以為下一次做準(zhǔn)備。
• 提供簡(jiǎn)單的錯(cuò)誤處理?- 盡可能將系統(tǒng)設(shè)計(jì)為用戶不會(huì)犯嚴(yán)重錯(cuò)誤。如果發(fā)生錯(cuò)誤，系統(tǒng)應(yīng)該能夠檢測(cè)到它并提供簡(jiǎn)單易懂的機(jī)制來處理錯(cuò)誤。
• 允許容易逆轉(zhuǎn)的動(dòng)作?- 此功能可緩解焦慮，因?yàn)橛脩糁厘e(cuò)誤可以撤銷。輕松逆轉(zhuǎn)動(dòng)作鼓勵(lì)探索不熟悉的選項(xiàng)?？赡嫘詥挝豢梢允菃蝹€(gè)動(dòng)作、一個(gè)數(shù)據(jù)條目或一組完整的動(dòng)作。
• 支持內(nèi)部控制點(diǎn)?- 有經(jīng)驗(yàn)的操作員強(qiáng)烈希望感覺他們負(fù)責(zé)系統(tǒng)并且系統(tǒng)響應(yīng)他們的動(dòng)作。設(shè)計(jì)系統(tǒng)使用戶成為行動(dòng)的發(fā)起者而不是響應(yīng)者。
• 減少短期記憶負(fù)荷?- 人類信息處理在短期記憶中的局限性要求顯示保持簡(jiǎn)單，合并多頁(yè)顯示，減少窗口運(yùn)動(dòng)頻率，并為代碼、助記符和動(dòng)作序列分配足夠的訓(xùn)練時(shí)間。