摘要：一個好的用戶界面設(shè)計應(yīng)當(dāng)是以用戶為中心，使產(chǎn)品達到簡單使用和愉悅使用的設(shè)計。人們的心智模型往往比現(xiàn)實簡單，這一點很容易理解，用戶總希望用了我們的軟件以后，業(yè)務(wù)流程能更簡單、更直觀、更高效，這當(dāng)然也是我們所希望達到的目標(biāo)。

　　在如今的IT時段，信息極其豐富，各種軟件令人眼花繚亂，隨之而來的是人—機之間的界面交互設(shè)計成為任何產(chǎn)品服務(wù)的重要方面。

　　大家通常的理解是，軟件是由程序員或者設(shè)計者創(chuàng)造的，軟件的外在表現(xiàn)或者說人機界面隱藏了軟件真正運行的細節(jié)，二者可以迥然不同。我們把前者稱為軟件的表現(xiàn)模型，后者稱為軟件的實現(xiàn)模型，而把用戶預(yù)期的軟件使用方式稱為用戶心智模型。例如，操作系統(tǒng)能使網(wǎng)絡(luò)文件服務(wù)器看起來與本地文件一樣，但這種模型并沒有展現(xiàn)出實際的物理磁盤可能遠在千里之外的事實。經(jīng)典的人機交互理論認(rèn)為，軟件的表現(xiàn)模型(UI)越接近于用戶的心智模型，用戶就越感覺到軟件容易理解、上手、使用，而如果軟件的表現(xiàn)模型遠離用戶心智模型、偏向于實現(xiàn)模型，則會嚴(yán)重影響用戶學(xué)習(xí)、上手和使用該軟件的能力。這一過程可以表示為如圖1。

　　一個好的用戶界面設(shè)計應(yīng)當(dāng)是以用戶為中心，使產(chǎn)品達到簡單使用和愉悅使用的設(shè)計。人們的心智模型往往比現(xiàn)實簡單，這一點很容易理解，用戶總希望用了我們的軟件以后，業(yè)務(wù)流程能更簡單、更直觀、更高效，這當(dāng)然也是我們所希望達到的目標(biāo)。因此，達成人機交互至高境界的一項重要任務(wù)就是深入研究用戶，包括用戶的知識水平、角色、權(quán)限關(guān)系、工作流程、異常處理、與外部環(huán)境的關(guān)系等，進行行業(yè)知識調(diào)查、用戶訪談、場景預(yù)演等，如有隱性需求、隱含制約(比如潛規(guī)則、不宜公開的數(shù)據(jù))，還需深入基層進一步調(diào)研，總之，需要掌握軟件使用者的方方面面，因為他們都關(guān)系到開發(fā)出來的軟件能否順利實施和深入人心，能否皆大歡喜。調(diào)研最后得出詳盡的需求調(diào)研報告、用例圖、業(yè)務(wù)流程圖、數(shù)據(jù)流圖、數(shù)據(jù)字典等書面文檔。

　　筆者在5年多的安防行業(yè)UI設(shè)計經(jīng)歷中，遇到過不少內(nèi)容簡潔、操作簡便的界面，也不乏外觀酷炫但操作繁雜的界面，這些設(shè)計都會在最終用戶那里得到不同的反饋。關(guān)于“交互設(shè)計”的書籍、雜志很多、內(nèi)容涵蓋也很廣，不分層次也不知道重點，?？吹醚刍潄y。界面問題大部分都一眼能看出來并糾正掉，在此，筆者結(jié)合所在單位的界面類開發(fā)實踐總結(jié)出，最常被開發(fā)人員忽略、習(xí)以為常從而被用戶批評、投訴的問題主要集中于以下幾點。

　　功能的鏈接、跳轉(zhuǎn)與局部重復(fù)

　　當(dāng)幾個功能模塊存在功能的交叉、調(diào)用、鏈接等關(guān)系時，操作復(fù)雜程度和出現(xiàn)理解錯誤的概率將成幾何級增加。例如，告警聯(lián)動的設(shè)置，如果按照聯(lián)動類型來分組，跟以設(shè)備列表為基礎(chǔ)設(shè)計出來的頁面操作方式就完全不同(圖2)。

　　然而兩種入口得到的頁面具有重疊設(shè)置，用戶是否知道隱藏的功能重疊?如果不能通過簡單聯(lián)想知道這一點，勢必產(chǎn)生疑惑，最后造成理解困難、操作失誤、反饋、投訴。這個就是單一入口的原則。提倡獨立頁面式的設(shè)置入口，盡量不跟其他功能產(chǎn)生交叉。

　　當(dāng)需要從其他頁面入口操作這一功能時，最好的情況是改造后者，讓它可以遠程打開、跳轉(zhuǎn)并且定位到/選中所需的執(zhí)行位置，總之，給用戶的感覺一定是在同一個頁面操作(見圖3)。

　　耗時操作的處理

　　用戶在等待結(jié)果輸出的過程中隨意操作，導(dǎo)致程序異常反應(yīng)。當(dāng)然，我們無法徹底避免這種程序異常，然而常?？梢砸龑?dǎo)用戶在耗時操作進行中耐心等待。

　　比如，一個耗時達到10s~30s、中間過程不鎖死的登陸過程給用戶進度條反饋，每獲取到一些信息、一些進度都告知用戶，登陸的快慢和進度讓用戶一看便知(如圖4)。

　　一個耗時不確定、鎖定主程序和界面的查詢過程，提供給用戶的等待畫面僅包含一個進度條。

　　包含多個子查詢的執(zhí)行過程，如支持中斷操作，則等待畫面應(yīng)提供中斷操作的入口，如關(guān)閉按鈕。每一個子查詢執(zhí)行完畢，應(yīng)及時給用戶進行反饋，顯示實時的進度和查詢記錄。

　　執(zhí)行完畢，還可以告知用戶具體的執(zhí)行結(jié)果、匯總，如“查詢到xxx條記錄”、“無記錄”，“xxx條記錄保存成功，xxx條記錄保存失敗，失敗的原因是xxx”。

　　一般來說，耗時6s以內(nèi)用等待光標(biāo)或動畫;耗時更多，則需要給出執(zhí)行進度，并提供終止操作的入口。但如果耗時特別長，超過30s，則有必要考慮進行后臺操作，并反饋執(zhí)行進度，避免界面長時間停留影響用戶體驗和工作效率，這種情況在類似文件下載時常常使用。執(zhí)行過程中有任何錯誤、警告，應(yīng)立即告知用戶。

　　大量數(shù)據(jù)的呈現(xiàn)

　　當(dāng)記錄集很大時，記錄的呈現(xiàn)方式對用戶的友好程度很關(guān)鍵，用戶如何從大堆無序、無規(guī)律的數(shù)據(jù)集中找到自己感興趣的一組?

　　當(dāng)所有數(shù)據(jù)可以在1~2頁呈現(xiàn)完畢，可以簡單地使用數(shù)據(jù)列表加滾動條，如果想更加友好，需要設(shè)置按照若干列的分組和排序，以及特殊行、特殊字段的著色。

　　但以展示圖像為主要目的的記錄集應(yīng)用，則適合用分頁加導(dǎo)航按鈕的方式，犧牲瀏覽速度、換取更大的單圖像視野，以及一些結(jié)合圖像/文字為一體的卡片式視圖(如圖5)，具有文字信息和圖像信息折中的顯示效果，具體用到的時候需要權(quán)衡利弊，切不可照搬照抄。

　　此應(yīng)用場景的首要考慮因素即是用戶更關(guān)心數(shù)據(jù)還是圖像，以及初次瀏覽時希望圖像的視野和清晰度多大，初次獲取的數(shù)據(jù)信息有多少、是否有結(jié)構(gòu)性、數(shù)據(jù)跟圖像是否緊密相關(guān)，抑或是二者同樣重要。當(dāng)用戶更關(guān)心圖像本身、希望獲得高清晰度、數(shù)據(jù)信息無結(jié)構(gòu)時，用圖像列表式和圖像導(dǎo)航式呈現(xiàn)效果最佳;當(dāng)用戶初次訪問只需要獲得圖像概貌、數(shù)據(jù)信息很重要且具有結(jié)構(gòu)性時，用卡片列表式效果最好;而當(dāng)用戶極其關(guān)系數(shù)據(jù)記錄、圖像可以后續(xù)呈現(xiàn)(一般僅作證據(jù))時，必須使用數(shù)據(jù)列表。

　　行業(yè)軟件的一大特點是配置項多、繁雜，然而隨時、隨處都可以進行配置會給用戶帶來極大的困擾：剛剛進行的配置項是否跟其他配置有關(guān)聯(lián)?什么時候配置生效?

　　如圖8紅色橢圓圈住的部分，用戶常常會問：拖動滾動條改變云臺控制速度后，能保存么?啥時候保存生效?上述問題的關(guān)鍵在于，此處是一個視頻瀏覽類業(yè)務(wù)頁面，本不該出現(xiàn)設(shè)置、配置入口，此處突然出現(xiàn)可以保存的設(shè)置，用戶就會感覺突兀。

　　重復(fù)的配置參數(shù)輸入常常來源于程序的智能化程度不夠，本能夠通過某種手段自動獲取參數(shù)、卻沒有設(shè)計并實現(xiàn)，變成依賴用戶反復(fù)手工輸入，并容易出錯。如某公司的電視墻參數(shù)配置頁面需要輸入如圖9的參數(shù)。

　　如此眾多的輸入?yún)?shù)，用戶拿到手后勢必一頭霧水，他得反復(fù)向其他人索要創(chuàng)建電視墻的參數(shù)，盡管有時候因為安全性問題有必要用手工輸入，可大多數(shù)的情況下全手工輸入都不是必須的，可以改進的。上述配置頁面經(jīng)過后續(xù)的不斷改進，絕大多數(shù)參數(shù)，如解碼器的名稱、ID、IP等不易理解的參數(shù)都已不再需要手工輸入，能通過選擇解碼器列表、獲取并自動填寫參數(shù)，這些參數(shù)后來被證明無關(guān)系統(tǒng)安全性，用戶體驗的改進非常直觀、和諧(圖10)。

　　同一項配置出現(xiàn)在不同的地方、不同的入口，也需要給用戶足夠的提示和說明，包括保存配置后的效果、反向配置的入口等，如果本次配置后有“下次不再顯示”類似的效果，則必須提示、告訴用戶如何才能恢復(fù)此配置，否則，這樣的功能將是入門用戶的噩夢。

　　類似“下次不再提示”的設(shè)計，用戶一旦勾選，下次如何才能再出現(xiàn)這個提示對話框?事實證明，用戶對這種“不再提示”的疑惑是實實在在的，也確有如此反饋，而且次次需要提供咨詢，其實只需在程序里面稍加文字說明即可解決。

　　還有一個界面易用性問題與參數(shù)配置有關(guān)，即是：配置類頁面和業(yè)務(wù)類頁面一體化的設(shè)計。比如，地圖功能頁面，在同一個頁面中既能進行地圖的配置，如地圖元素的添加、圖層配置、換地圖文件，也能進行地圖實戰(zhàn)業(yè)務(wù)，如地圖中設(shè)備狀態(tài)呈現(xiàn)、畫軌跡、設(shè)備告警等?？梢悦鞔_的一點是，配置/業(yè)務(wù)一體化設(shè)計的頁面，操作起來比二者獨立的頁面復(fù)雜性更高，更容易出現(xiàn)誤操作、不明確操作導(dǎo)致的程序異?，F(xiàn)象：任何一個操作過后，用戶所在的操作模式到底是配置/編輯模式、還是瀏覽/業(yè)務(wù)模式?這就需要非常復(fù)雜、繁瑣和面面俱到的程序判斷/流程控制，要有信息提示及時告訴用戶處在哪種操作模式。處理稍有不慎，就會導(dǎo)致用戶處在一個不知所措的狀態(tài)，或者操作了一個不屬于該模式、本無權(quán)限操作的功能，導(dǎo)致意想不到的結(jié)果和用戶不滿。

　　對此，提倡的做法是配置類頁面和業(yè)務(wù)類頁面分開設(shè)計，前者專門處理配置類操作，后者專門處理業(yè)務(wù)類操作，最終用戶就一目了然，不再糾結(jié)當(dāng)前所處的操作模式、編輯/瀏覽狀態(tài)和操作權(quán)限，同時也給程序員帶來了功能模塊隔離、單一、容易控制的好處。

　　是否改變用戶操作習(xí)慣

　　首先，設(shè)計人員應(yīng)盡可能多的保留用戶原有的業(yè)務(wù)模式和操作習(xí)慣，做好調(diào)研工作。需要設(shè)計創(chuàng)新性操作時，預(yù)估是否能給用戶帶來額外的益處，能否抵消用戶學(xué)習(xí)新操作帶來的成本開銷?

　　要了解這個問題，需要首先弄清楚目標(biāo)用戶在沒有使用我們提供的系統(tǒng)時，到底是怎么工作的，存在什么問題，是怎么解決的?

　　圖11表示的是一個根據(jù)視頻抓拍圖片、然后進行信息錄入的頁面，本設(shè)計相對于用戶原有系統(tǒng)的改變在于視頻清晰度更高、幾個操作區(qū)域布局改變、抓取圖像的局部放大操作不同。之所以有兩個大小不同的圖片收集區(qū)域，是考慮到用戶會一次性連續(xù)抓取多張現(xiàn)場圖像，然后從中選取若干張效果好、清晰、位置符合預(yù)期的圖像作為證據(jù)，移動到右邊的信息錄入?yún)^(qū)域。這其中就存在下方區(qū)域的小圖像需要做局部放大顯示的問題，原系統(tǒng)中局部放大的輸出圖像存放的控件顯示區(qū)域小，需要反復(fù)、多次進行局部放大才能看清楚目標(biāo)車輛的全貌。

　　新軟件的改進，可以在屏幕左上部更大幅區(qū)域輸出局部放大后的圖像，達到一次放大就看到車輛全貌的目標(biāo)，最終，得到用戶的滿意和認(rèn)可，也改進了用戶的操作體驗和工作效率。這就是一個成功改變用戶舊有操作習(xí)慣的案例。

　　而不成功的改變用戶操作習(xí)慣常常是由于不符合用戶工作流/業(yè)務(wù)規(guī)則、降低工作效率等原因造成的，一個常見的開發(fā)弊病是一個新設(shè)計的流程需要跨越操作多個功能頁面，這在定制型業(yè)務(wù)設(shè)計中尤其突出。如，治安警情管理，包括警情的錄入、調(diào)度、指揮、預(yù)案等方面，可能同時需要兼顧實時視頻、錄像、圖像、警員、警車、地圖、機構(gòu)、交通布控、預(yù)案、指揮調(diào)度等很多方面，如果把這些內(nèi)容簡單拼湊、堆疊，用戶操作起來不是更輕松了，而是繁瑣、無序、茫然，根本無法提高工作效率，甚至無法開始工作。一個功能復(fù)雜、綜合的良好系統(tǒng)一定是分角色、分權(quán)限、結(jié)合具體場景的設(shè)計，切合具體的用戶業(yè)務(wù)流程。

　　主要的方面講完了，作為建議和錦上添花的一點，如果讓用戶能在界面任何操作中立即獲取到針對性的幫助信息，則會大大提高用戶滿意度，這方面的典型案例當(dāng)數(shù)Windows操作系統(tǒng)，在任何功能按下F1都能得到解決問題的咨詢建議。

　　其中的“什么是…”鏈接就可以讓用戶隨時得到解決當(dāng)前問題的幫助信息，按下F1、或者窗體右上角的“?”按鈕也可以彈出，十分貼心。如果無法做到針對性的幫助，也可以設(shè)計一套集中式的幫助系統(tǒng)，至少要支持幫助目錄、按詞搜索，好用的幫助系統(tǒng)是一個優(yōu)秀軟件的必備要素。