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

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

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

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

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

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

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

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

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

　　耗時(shí)操作的處理

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

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

　　一個(gè)耗時(shí)不確定、鎖定主程序和界面的查詢過程，提供給用戶的等待畫面僅包含一個(gè)進(jìn)度條。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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