軟件用戶界面設(shè)計(jì) 分析問題 傳授方法 林銳博士http

1、軟件用戶界面設(shè)計(jì)—— 分析問題—— 傳授方法 林 銳 博士http://www.chinaspis.com linrui@chinaspis.com,,上 海 漫 索 計(jì) 算 機(jī) 科 技 有 限 公 司,,參考書： 《Web軟件用戶界面設(shè)計(jì)指南》，林銳 等，電子工業(yè)出版社，2005,目錄,1. 咨詢流程 2. 軟件用戶界面設(shè)計(jì)的重要性3. 現(xiàn)狀、問題和原因4. 用戶眼中的好軟件5. 軟件用戶界面設(shè)計(jì)的

2、要素5.1 界面適合于展現(xiàn)功能5.2 界面適合于用戶群體5.3 容易理解5.4 及時(shí)反饋操作信息5.5 防錯和出錯處理5.6 一致性和個性化5.7 最少步驟、最高效率5.8 合理的布局5.9 合理的色彩5.10 國際化,1. 咨詢流程,1.1 流程圖,持續(xù)提升企業(yè)的軟件用戶界面設(shè)計(jì)能力,1. 調(diào)研,2. 用戶界面診斷,3. 界面設(shè)計(jì)培訓(xùn),4. 集體練習(xí),5. 總結(jié)與改進(jìn),,,1. 咨詢流程,1.2 步驟第1步 調(diào)研

3、。咨詢師訪談公司領(lǐng)導(dǎo)、界面設(shè)計(jì)人員、軟件開發(fā)和測試人員，以及閱讀產(chǎn)品開發(fā)的相關(guān)資料（例如需求文檔、設(shè)計(jì)文檔），了解用戶界面設(shè)計(jì)的能力現(xiàn)狀。 第2步 用戶界面診斷。咨詢師對公司實(shí)際軟件產(chǎn)品的用戶界面進(jìn)行診斷，找出不合理的設(shè)計(jì)，記錄案例。第3步 設(shè)計(jì)方法培訓(xùn)。咨詢師講解軟件用戶界面設(shè)計(jì)方法，同步進(jìn)行案例分析（從第2步獲得）。幫助學(xué)員了解并掌握軟件用戶界面的10個設(shè)計(jì)要素。第4步 集體練習(xí)。軟件產(chǎn)品的所有相關(guān)人員在學(xué)習(xí)用戶界面設(shè)計(jì)方法之

4、后，進(jìn)行集體練習(xí)：根據(jù)“檢查表”診斷軟件用戶界面，發(fā)掘問題，闡述觀點(diǎn)；給出改進(jìn)建議第5步 總結(jié)與改進(jìn)。咨詢師總結(jié)所有的“問題和建議”，相關(guān)人員有計(jì)劃地改進(jìn)軟件用戶界面。,2. 軟件用戶界面設(shè)計(jì)的重要性,2.1 發(fā)展趨勢軟件用戶界面的發(fā)展經(jīng)歷了從簡單到復(fù)雜、從低級到高級的過程，用戶界面在軟件系統(tǒng)中的價(jià)值比重越來越高。 如果編程之道是完美的，那么操作系統(tǒng)就是完美的；如果操作系統(tǒng)是完美的，那么編譯程序就是完

5、美的；如果編譯程序是完美的，那么應(yīng)用程序就是完美的。于是，用戶滿意之極，和諧應(yīng)運(yùn)而生。 ——《編程之道》開篇語 2.2 開發(fā)競爭得益于互聯(lián)網(wǎng)的發(fā)展和普及，軟件開發(fā)的技術(shù)門檻在不斷下降，大部分軟件企業(yè)的技術(shù)手段也趨向于雷同，“軟件設(shè)計(jì)”變得越來越重要。當(dāng)大家都掌握了相似的技

6、術(shù)和需求信息后，企業(yè)之間的開發(fā)競爭“比的就是設(shè)計(jì)”。 軟件用戶界面設(shè)計(jì)要綜合考慮“易用性設(shè)計(jì)”、“藝術(shù)設(shè)計(jì)”和“技術(shù)實(shí)現(xiàn)”，很有挑戰(zhàn)性。 2.3 用戶挑剔用戶界面在很大程度上影響著軟件的命運(yùn)，因?yàn)閺V大用戶對軟件的評價(jià)主要來源于他們操作用戶界面的感受。同類軟件越多，選擇余地越大，購買者對軟件用戶界面就越挑剔。尤其是互聯(lián)網(wǎng)的軟件和服務(wù)（免費(fèi)或收費(fèi)）。,3. 現(xiàn)狀、問題和原因,3.1 不容樂觀的現(xiàn)狀盡管國內(nèi)有很多技術(shù)出色、聰明過人的

7、軟件工程師，但是不少人開發(fā)出來的軟件產(chǎn)品卻既難用又難看，客戶很不滿意。導(dǎo)致經(jīng)常要修改軟件的用戶界面，造成極大的生產(chǎn)力浪費(fèi)。到處是用戶界面設(shè)計(jì)缺陷：不可原諒的過失?。ㄐ⊥岛蜕窀傅墓适拢┙缑娲朕o含糊，甚至有錯別字。連簡單的消息框都設(shè)計(jì)不好，可能存在文不對題的語病。界面布局混亂，缺乏邏輯，凡是能放的東西都堆集上去，讓用戶不知從何下手。沒有防錯處理，不對用戶輸入的數(shù)據(jù)進(jìn)行檢驗(yàn)，不根據(jù)用戶的權(quán)限自動隱藏或者禁用某些功能。執(zhí)行破壞性的操作

8、之前，不提醒用戶確認(rèn)?？傊?，如果用戶執(zhí)行了錯誤的操作，那他活該。 不提供進(jìn)度條、動畫來反映正在進(jìn)行的比較耗時(shí)間的過程，對于重要的操作也不返回結(jié)果，讓用戶干著急。我們見到的用戶界面缺陷不勝枚舉…… 失敗的案例某企業(yè)的電子政務(wù)軟件某銀行的網(wǎng)上支付軟件,3. 現(xiàn)狀、問題和原因,3.2 問題和原因之一：教育缺陷國內(nèi)絕大多數(shù)大學(xué)的計(jì)算機(jī)學(xué)科沒有開設(shè)軟件用戶界面設(shè)計(jì)的課程，也沒有開設(shè)相關(guān)的如人機(jī)工程學(xué)、美學(xué)、心理學(xué)等課程。理工科人士天性

9、喜歡鉆研技術(shù)，不太關(guān)心用戶需要什么。由于學(xué)生們接受的教育幾乎全是科學(xué)與技術(shù)，他們不知道怎樣才能設(shè)計(jì)易用、美觀的用戶界面，很多人甚至想都沒有想過。當(dāng)他們畢業(yè)后真正參與軟件產(chǎn)品開發(fā)時(shí)，只好憑著個人的經(jīng)驗(yàn)與感覺設(shè)計(jì)軟件的用戶界面，這樣產(chǎn)生的界面往往得不到大眾用戶的認(rèn)可。最近幾年，國內(nèi)計(jì)算機(jī)相關(guān)專業(yè)的畢業(yè)生太多了，呈現(xiàn)“供大于求”的局面，很多畢業(yè)生難以找到合適的工作，剛畢業(yè)的普通程序員的工資低到僅供糊口的地步。另一方面，大部分軟件公司都需要

10、招聘軟件用戶界面設(shè)計(jì)師，可是招聘不到人 。建議：任何人，只要在工作中發(fā)現(xiàn)了自己的知識缺陷，他都應(yīng)該及時(shí)學(xué)習(xí)，彌補(bǔ)不足。同時(shí)，企業(yè)應(yīng)當(dāng)設(shè)法邀請軟件用戶界面設(shè)計(jì)專家給員工們培訓(xùn)，努力在最短的時(shí)間內(nèi)有效地提升員工們的用戶界面設(shè)計(jì)能力。,3. 現(xiàn)狀、問題和原因,3.3 問題和原因之二：服務(wù)對象錯位開發(fā)人員在設(shè)計(jì)用戶界面方面不僅存在先天的教育缺陷，更加糟糕的是還常常犯“錯位”的毛病。他以為只要自己感覺用戶界面漂亮、使用起來方便，那么用戶也一

11、定會滿意。俗話說“王婆賣瓜，自賣自夸”。當(dāng)開發(fā)人員向用戶展示軟件時(shí)，常會得意地講：“這個軟件非常好用，我操作給你看，……是很好用吧！蠻漂亮的吧！”用戶出于禮貌可能會不斷地點(diǎn)頭，但點(diǎn)頭并不表示贊同。用戶總不好意思說他還沒有看明白怎么回事，請開發(fā)人員慢慢地再演示一遍吧？總不能在別人面前顯得自己很遲鈍吧！漫索公司軟件人員在開發(fā)“集成化項(xiàng)目管理系統(tǒng)”的錯位感受（林銳經(jīng)歷）。,3. 現(xiàn)狀、問題和原因,3.4 問題和原因之三：混淆網(wǎng)站與Web

12、軟件的用戶界面Web軟件和網(wǎng)站的運(yùn)行環(huán)境和技術(shù)幾乎完全相同，但是兩者的用途和特征很不相同。網(wǎng)站主要用于瀏覽信息，面向大眾用戶，主頁面的內(nèi)容隨時(shí)會更新，不存在統(tǒng)一的網(wǎng)站用戶界面格式。因此“個性化”和“不斷變化”是網(wǎng)站的用戶界面的特征。Web軟件本質(zhì)是軟件，只不過它在Web環(huán)境下運(yùn)行、以頁面的方式展示功能而已。軟件用于處理有固定流程（邏輯）的業(yè)務(wù)，而不是僅僅讓人們?yōu)g覽信息用的。軟件用戶界面的設(shè)計(jì)要素有合適性、可理解、一致性、出錯處理、

13、及時(shí)反饋信息、最少操作步驟、合理的布局和色彩等等，所以軟件與網(wǎng)站的用戶界面的特征是有很大差異的。不少企業(yè)都有自己的網(wǎng)站，也有不少基于Web的管理系統(tǒng)，例如人力資源管理系統(tǒng)、辦公自動化系統(tǒng)、ERP系統(tǒng)等等。開發(fā)人員看慣了網(wǎng)站，不知不覺地把網(wǎng)站的用戶界面風(fēng)格套用到Web軟件上。結(jié)果Web軟件的用戶界面上到處是花花綠綠的超級鏈接和閃動的圖片，讓人不知如何下手。網(wǎng)站并不關(guān)心業(yè)務(wù)流程，幾乎沒有出錯處理，倘若Web軟件也沒有業(yè)務(wù)流程、沒有出錯處

14、理的話，試問誰樂意用這樣的Web軟件？,3. 現(xiàn)狀、問題和原因,3.5 誰來設(shè)計(jì)軟件的用戶界面毫無疑問，應(yīng)當(dāng)由用戶界面設(shè)計(jì)師來設(shè)計(jì)應(yīng)用軟件的用戶界面。問題是目前國內(nèi)大學(xué)沒有用戶界面設(shè)計(jì)這樣的專業(yè)，軟件行業(yè)還沒有形成“用戶界面設(shè)計(jì)師”這樣的職業(yè)。職業(yè)化的用戶界面設(shè)計(jì)通曉“易用性設(shè)計(jì)”、“藝術(shù)設(shè)計(jì)”和“技術(shù)實(shí)現(xiàn)”，很難尋覓此人才。所以在目前，所謂“用戶界面設(shè)計(jì)師”還只是一種“角色”而不是“職業(yè)”。如果軟件企業(yè)里沒有專職的用戶界面設(shè)計(jì)

15、師，那么請軟件開發(fā)工程師和美工人員共同設(shè)計(jì)用戶界面。建議如下：相比較而言，讓軟件開發(fā)人員學(xué)會用戶界面設(shè)計(jì)，要比美工人員學(xué)會軟件開發(fā)容易得多。對軟件開發(fā)工程師進(jìn)行用戶界面設(shè)計(jì)的培訓(xùn)，然后讓軟件開發(fā)工程師負(fù)責(zé)應(yīng)用軟件用戶界面的設(shè)計(jì)和實(shí)現(xiàn)，請美工人員做錦上添花的美化工作。 很多人有疑慮，讓軟件開發(fā)工程師從事用戶界面設(shè)計(jì)，他們能做好嗎？回答是肯定的，只要軟件工程師不自我封閉，追求上進(jìn)，那么他肯定能夠?qū)W會用戶界面設(shè)計(jì)，絕對比他原先做的用戶

16、界面好。軟件工程師的智商都不低，只要他不懶惰，勤于學(xué)習(xí)、實(shí)踐和思考，那么他就能夠成為某些領(lǐng)域的行家乃至專家。 論據(jù)：我從來沒有學(xué)過美工，也沒有人指導(dǎo)我如何設(shè)計(jì)軟件用戶界面。通過自學(xué)和實(shí)踐之后，我自己可以總結(jié)用戶界面設(shè)計(jì)方法論，編寫著作，還給很多企業(yè)提供咨詢和培訓(xùn)。,4. 用戶眼中的好軟件,4.1 “好”的軟件意味著“實(shí)用、易用、美觀”如果軟件的功能不實(shí)用（不能為用戶解決問題），那么不管該軟件是否易用和美觀，用戶一般都不愿意購買該軟

17、件，除非用戶沒有選擇余地。如果兩個軟件的功能和價(jià)格都相似，那么用戶會挑選更加易用的那個軟件。如果兩個軟件的功能、價(jià)格、易用性都差不多，那么用戶會選擇更加美觀的那個軟件。4.2 誰來評價(jià)“好或差”用戶才真正有資格說軟件“好或壞”。如果用戶對軟件很不滿意，開發(fā)人員不要有逆反情緒：從哪里找來的笨蛋用戶！ 其實(shí)不是用戶笨，是自己開發(fā)的軟件太笨了。當(dāng)用戶真的感到軟件很好用時(shí)，一股溫暖的感覺油然而生，于是就用“界面友好”來表揚(yáng)這個軟件。

18、軟件行業(yè)很少發(fā)生那么感動人的場景：用戶熱切地握著開發(fā)人員的手，連聲稱贊“你們開發(fā)的軟件真是好用、真是漂亮啊”?？墒俏覀兛吹降拇蠖嗍窍喾吹膱鼍埃河脩魸M腹牢騷，開發(fā)人員垂頭喪氣。,4. 用戶眼中的好軟件,4.3 應(yīng)當(dāng)站在用戶的立場看待軟件很多公司都在宣揚(yáng)“以人為本”，可笑的是人力資源部往往最不懂得“以人為本”，能夠不“與人為敵”已經(jīng)不錯了。開發(fā)機(jī)構(gòu)宣揚(yáng)“以客戶為中心”，但是卻撇開客戶只顧忙碌地開發(fā)軟件，做出客戶不會用的東西。很多軟件開

19、發(fā)人員不能夠一次性地完成某些開發(fā)任務(wù)，主要原因不是技術(shù)水平低下，而是他們沒有真正理解用戶的需求，也沒有站在用戶角度看待軟件。如果用戶不滿意軟件的功能和界面，那么開發(fā)人員將被迫重新開發(fā)。重新開發(fā)的代價(jià)顯然要比修改Bug大得多。如果軟件企業(yè)能夠真正重視并且下功夫提升“需求分析”和“用戶界面設(shè)計(jì)”的能力，通常會顯著地提升軟件生產(chǎn)率和客戶的滿意度。,5. 軟件用戶界面設(shè)計(jì)要素,5.1 界面適合于展現(xiàn)功能，并且符合市場需求軟件的功能需要通過用

20、戶界面來展現(xiàn)。毫無疑問，用戶界面一定要適合于軟件的功能，這是最基本的要求。如果用戶無法通過這個界面來使用軟件，“易用性”根本就無從談起。例如，對于一個三維建模軟件而言，如果用戶不能使用鼠標(biāo)對模型進(jìn)行旋轉(zhuǎn)、移動、縮放等操作，那么這個用戶界面就不適合該軟件的功能。如果不改進(jìn)用戶界面的話，即使軟件的內(nèi)核功能很強(qiáng)（如算法很先進(jìn)），這個軟件也很難賣得出去。 “用戶界面適合于展現(xiàn)功能”是首要的設(shè)計(jì)原則，它提醒設(shè)計(jì)者不要片面追求界面外觀漂亮而導(dǎo)致

21、華而不實(shí)。開發(fā)團(tuán)隊(duì)要分析產(chǎn)品的核心價(jià)值：“最吸引客戶的屬性；最賺錢的屬性”。要把主要精力用在對經(jīng)濟(jì)效益貢獻(xiàn)最大的地方，使“投入－產(chǎn)出”最大。普遍存在的“80－20”的現(xiàn)象注意，免費(fèi)軟件的“吸引客戶的屬性”和“最賺錢的屬性”可能不是同一回事情。產(chǎn)品的所有功能和界面對用戶而言都是必要的?？梢藻\上添花，但是不能畫蛇添足（否則得不償失）。,5. 軟件用戶界面設(shè)計(jì)要素,圖5-1(a) 。搜索不是上網(wǎng)助手的功能，對上網(wǎng)助手沒有幫助，反而可

22、能是用戶跳離本軟件的頁面。但是搜索卻是本公司真正賺錢的功能。所以要把“搜索”放在最現(xiàn)眼的界面頂部。,圖5-1(b) ?！懊赓M(fèi)看美女看笑話”不屬于上網(wǎng)助手的功能需求，這個低俗廣告將分散用戶的注意力，降低軟件品牌 。但是低俗廣告卻是互聯(lián)網(wǎng)免費(fèi)軟件主要收入來源，所以被迫將低俗廣告放在上網(wǎng)助手中。,示例分析,5. 軟件用戶界面設(shè)計(jì)要素,5.2 界面適合于用戶群體一個軟件產(chǎn)品可能有許多類型的用戶，例如有些用戶對計(jì)算機(jī)比較外行，有一些用戶可能是計(jì)

23、算機(jī)的行家。在設(shè)計(jì)用戶界面時(shí)應(yīng)當(dāng)盡可能多地了解不同類型用戶的使用習(xí)慣和水平，努力使不同類型用戶在操作軟件的時(shí)候感覺不到困難和麻煩。（理想境界）如果不能使所有類型的用戶都感到滿意，那么重點(diǎn)滿足以下類型的用戶：“主流用戶”，“有影響力的用戶”“主流用戶”是指占最大比例的那種類型的用戶。主流用戶可能不是水平最高的用戶，他們對界面的評價(jià)影響軟件產(chǎn)品的命運(yùn)。 我曾經(jīng)為杭州某工廠開發(fā)“生產(chǎn)管理軟件”，采用了很好的B/S技術(shù)構(gòu)架，界面也很美觀。

24、但是工人不適應(yīng)B/S軟件界面，無法有效地進(jìn)行生產(chǎn)管理，最后報(bào)廢這個軟件。“有影響力的用戶”可能不是主流用戶，但是他們會影響其它用戶對軟件的印象。例如互聯(lián)網(wǎng)論壇版主、作家、傳媒人士等。努力提升用戶群體對軟件產(chǎn)品的好感，杜絕欺騙消費(fèi)者。由于互聯(lián)網(wǎng)的欺詐、惡意競爭的行為盛多，導(dǎo)致廣大網(wǎng)民對互聯(lián)網(wǎng)軟件和服務(wù)有很深的懷疑和恐懼。示例：網(wǎng)民被騙使用“收費(fèi)的免費(fèi)電子郵箱”，從而對該企業(yè)討厭之極。從此無論該企業(yè)推出什么軟件和服務(wù)，用戶不再相信。

25、要有效地收集用戶的使用反饋。,5. 軟件用戶界面設(shè)計(jì)要素,5.3 界面容易被用戶理解如果用戶很難理解界面的意圖，那么他使用起來肯定很費(fèi)勁。所以“容易理解”是“容易使用”的前提條件。注意事項(xiàng)：用戶界面中的所有元素都不能出現(xiàn)錯誤文字，也沒有令人費(fèi)解（例如二義性、邏輯混亂）的文字。用戶界面設(shè)計(jì)人員絕對不能對界面上的文字馬馬虎虎，措詞必須“正確、準(zhǔn)確”。圖標(biāo)按鈕的含義一定要直觀明了，最好給圖標(biāo)加文字說明，防止用戶誤解。所有的界面元素

26、應(yīng)當(dāng)提供充分而必要的提示，例如當(dāng)鼠標(biāo)移動到工具條上的某個圖標(biāo)按鈕時(shí)，應(yīng)當(dāng)在該圖標(biāo)旁邊出現(xiàn)功能提示。界面結(jié)構(gòu)能夠清晰地反映工作流程，以便用戶按部就班地操作。文字信息和界面布局盡量和用戶群體的使用習(xí)慣相匹配。對于復(fù)雜的用戶界面而言，最好提供界面“向?qū)А?，及時(shí)讓用戶知道自己在界面結(jié)構(gòu)中所處的位置。例如對于基于Web的應(yīng)用軟件，應(yīng)該在界面上顯示“當(dāng)前位置”，否則用戶很容易在眾多的頁面中迷失方向。,5. 軟件用戶界面設(shè)計(jì)要素,圖5-3(a)

27、 。實(shí)名搜索是3721公司的盛名之作，這個搜索的界面有什么不妥嗎？,圖5-3(b) ?！暗刂贰眱勺肿屓速M(fèi)解，讓人搞不清楚是住址，還是http網(wǎng)址？搜索一個名字行不行？“試一試，瀏覽器地址欄中也可以直接搜索”這句話有點(diǎn)多余（建議換一種提示方式），用戶不知道究竟從哪里搜索。 如果從地址欄搜索，那么會跳離上網(wǎng)助手的頁面，可能放跑了用戶。,示例分析,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-3 . 由于“性感雞”和其它廣告太醒目了，喧賓

28、奪主，使得下面的“功能排列”不被注意，或者潛意識地以為“功能排列”的所有條目都是宣傳廣告。我到處找“上網(wǎng)助手”的完整的功能樹，希望能夠直接操作下級功能菜單，竟然沒有看到“功能排列”這個區(qū)域。另外， “下載上網(wǎng)助手”和“助手工具下載”在語義上重疊，初級用戶搞不明白要下載哪個東西。,5. 軟件用戶界面設(shè)計(jì)要素,5.4 一致性和個性化“用戶界面風(fēng)格一致”的最大好處就是能夠減少用戶的記憶量、減少出錯幾率，并且迅速積累操作經(jīng)驗(yàn)。所以熟悉Wor

29、d軟件的人基本上不用翻閱手冊就能使用PowerPoint軟件，可謂“無師自通”。 軟件的用戶界面中同類的界面元素應(yīng)當(dāng)有相同的視感和相同的操作方式。例如命令按鈕是最常見的界面元素，所有命令按鈕的形狀、色彩以及對鼠標(biāo)的響應(yīng)方式都是一致的同一類型軟件的用戶界面應(yīng)當(dāng)有一定程度的相似性。例如Microsoft公司的Office家族里有Word、Excel、PowerPoint、Outlook等軟件，這些軟件提供的“復(fù)制、剪切、粘貼”功能的操作

30、方式都是相同的。 通用軟件產(chǎn)品的界面設(shè)計(jì)很注重一致性。設(shè)計(jì)者必須密切注意在相同應(yīng)用領(lǐng)域中最流行的軟件的界面，必須尊重用戶使用這些軟件的習(xí)慣。例如DOS和Windows下的軟件習(xí)慣于設(shè)置F1鍵為幫助熱鍵，如果某個設(shè)計(jì)者別出心裁地讓F1鍵成為軟件終止的熱鍵，那么在用戶渴望得到幫助而伸手擊F1鍵的一剎那，他的工作就此完蛋。相信這個用戶會被這另類的F1氣瘋了。 目前流行的軟件開發(fā)工具如Visual C++、Visual Basic、Delp

31、hi、Java Builder、Power Builder等，都能夠快速地開發(fā)出非常相似的圖形用戶界面。在Internet/Intranet領(lǐng)域，瀏覽器幾乎成了唯一的客戶端軟件，因?yàn)镮nternet用戶希望用完全一致的瀏覽方式來完成千變?nèi)f化的任務(wù)。,5. 軟件用戶界面設(shè)計(jì)要素,5.4 一致性和個性化用戶界面的“個性化”與“一致性”之間存在微妙的矛盾關(guān)系：對于一些非常注重安全性的商業(yè)軟件（如銀行軟件）而言，用戶界面的“一致性”要比“個

32、性化”重要得多，因?yàn)橐恢碌挠脩艚缑婵梢詼p少用戶出錯的幾率。例如，國內(nèi)所有銀行的自動取款機(jī)的用戶界面都是非常相似的，誰也不會設(shè)計(jì)一些新花樣玩玩。而對于非嚴(yán)格系統(tǒng)的應(yīng)用軟件而言，有個性化的界面自然比泯然于眾的界面更具有吸引力。尤其是娛樂領(lǐng)域的軟件，用戶更加喜歡有個性的甚至是顛覆傳統(tǒng)的用戶界面。設(shè)計(jì)人員應(yīng)當(dāng)根據(jù)軟件的需求以及廣大用戶的喜好，在使用戶界面具備必要的“一致性”的前提下，突出該軟件的“個性”。不僅讓用戶使用起來方便，而且對軟件留

33、下深刻的印象。,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-4（a） . 上網(wǎng)助手的“首頁”以及每個Tab頁面的“功能介紹”頁面，其內(nèi)容和布局都比較亂，用戶摸不清楚界面的規(guī)律，增加了記憶難度，降低使用效率。本圖中， （1）右側(cè)“熱門功能推薦”，在邏輯上不是“IE修復(fù)的范疇”，應(yīng)當(dāng)放在其它合適的地方，避免擾亂用戶的思路。（2）左側(cè)的介紹不完整，少了4項(xiàng)功能的介紹，不一致。,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-4（b） . IE 的

34、Toolbar按鈕一般不會有下拉菜單（與流行軟件的界面元素不一致）。如果要下拉菜單的話，應(yīng)該加“下拉”標(biāo)記?！扒謇怼焙汀靶迯?fù)”含有立即執(zhí)行、并且會改動用戶計(jì)算機(jī)設(shè)置的含義，用戶擔(dān)心點(diǎn)擊“清理”和“修復(fù)”按鈕將出現(xiàn)不期望的操作。要設(shè)法消除用戶的畏懼和疑慮，讓用戶明白有下拉菜單。,5. 軟件用戶界面設(shè)計(jì)要素,5.5 及時(shí)反饋操作信息當(dāng)用戶進(jìn)行某項(xiàng)操作后，如果過了一會兒（幾秒鐘）用戶界面一點(diǎn)反應(yīng)都沒有，這將使用戶感到迷茫和不安，因?yàn)樗恢?/p>

35、是自己操作錯了還是軟件死機(jī)了。及時(shí)反饋信息很重要，至少要讓用戶心里有數(shù)，知道該任務(wù)處理得怎么樣了，有什么樣的結(jié)果。例如下載一個文件，界面上應(yīng)當(dāng)顯示“百分比”或相關(guān)數(shù)字來表示下載的進(jìn)度，否則人們不知道要等待多少時(shí)間。如果某些事務(wù)處理不能提供進(jìn)度等數(shù)據(jù)，那么至少要給出提示信息如“正在處理，請等待…”。最好是提供合適的動畫，讓用戶明白軟件正在干活、沒有死機(jī)。,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-5 . 專業(yè)軟件一般都要提供反饋操作

36、信息的窗口區(qū)域。,5. 軟件用戶界面設(shè)計(jì)要素,5.6 防錯和出錯處理用戶在使用軟件的過程中，不可避免地會出現(xiàn)一些錯誤的操作。倘若用戶不小心輸入了錯誤的數(shù)據(jù)、或者錯誤地刪除了有用的數(shù)據(jù)，而軟件傻乎乎地、將錯就錯地執(zhí)行了，那么用戶肯定很惱火，以后就不敢放心地使用軟件。在設(shè)計(jì)用戶界面時(shí)必須考慮防錯處理，目的是讓用戶不必為避免犯錯誤而提心吊膽、小心翼翼地操作。常見的防錯處理措施有：對輸入數(shù)據(jù)進(jìn)行校驗(yàn)。如果用戶輸入錯誤的數(shù)據(jù)，軟件應(yīng)當(dāng)識別

37、錯誤并且提示用戶改正數(shù)據(jù)。對于Web頁面，開發(fā)人員一般要編寫JavaScript程序來進(jìn)行數(shù)據(jù)校驗(yàn)。對于在某些情況下不應(yīng)該使用的菜單項(xiàng)和命令按鈕，應(yīng)當(dāng)將其“失效”（變成灰色，可見但不可操作）或者“隱藏”。例如對于某些軟件，不同的用戶有不同的操作權(quán)限。如果低權(quán)限的用戶登錄到系統(tǒng)，那些僅供高級權(quán)限用戶使用的功能應(yīng)當(dāng)被隱藏，或者將其“失效”。執(zhí)行破壞性的操作之前，應(yīng)當(dāng)獲得用戶的確認(rèn)。例如用戶刪除一個文件時(shí)，應(yīng)當(dāng)彈出對話框：“真的要刪除該文

38、件嗎”，當(dāng)用戶確認(rèn)后才真正刪除文件。盡量提供Undo功能，用戶可以撤銷剛才的操作。如果發(fā)生意外或錯誤，應(yīng)當(dāng)及時(shí)給出告警消息和錯誤消息，提醒用戶做出正確的處理。軟件人員經(jīng)常編寫出“劣質(zhì)”的消息框，例如措詞生硬、幼稚、蹩腳，甚至有文字、語法錯誤；消息文本、圖形標(biāo)志和命令按鈕在語義上不一致。讓人哀嘆！,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-6 . 軟件人員經(jīng)常編寫出“劣質(zhì)”的消息框，例如措詞生硬、幼稚、蹩腳，甚至有文字、語法錯誤

39、；消息文本、圖形標(biāo)志和命令按鈕在語義上不一致。,,,,,,好的,差的,,,5. 軟件用戶界面設(shè)計(jì)要素,5.7 最少步驟、最高效率設(shè)計(jì)用戶界面時(shí)應(yīng)當(dāng)盡可能地替用戶著想，用戶應(yīng)當(dāng)用最少的操作步驟完成某項(xiàng)操作任務(wù)，獲得最高的使用效率。（手機(jī)充值，超級女聲）盡管減少一個操作步驟而完成任務(wù)所節(jié)約的時(shí)間微乎其微（可能只有幾秒鐘），但是用戶的感覺反差卻很強(qiáng)烈。假設(shè)有兩個功能相似的免費(fèi)Web email軟件A和B，倘若在收、發(fā)email的時(shí)候A比B

40、節(jié)省一個操作步驟，有可能導(dǎo)致大量的B用戶抱怨B很笨，從而轉(zhuǎn)用A。所以業(yè)界流傳“多1個步驟，流失10%的用戶”。界面設(shè)計(jì)師要深入分析軟件的業(yè)務(wù)流程、用戶使用習(xí)慣，才能設(shè)計(jì)出最少的操作步驟。例如我們在使用字處理軟件時(shí)，“新建”、“打開”或“保存”文件是最常用的菜單功能。為了提高操作效率，軟件設(shè)計(jì)師把最常用的功能用圖標(biāo)按鈕的形式擺放在工具條（toolbar）上，這樣用戶直接點(diǎn)擊圖標(biāo)按鈕就可以執(zhí)“新建”、“打開”或“保存”，只需要一個操作步

41、驟，顯然大部分用戶喜歡用圖標(biāo)按鈕的方式。,5. 軟件用戶界面設(shè)計(jì)要素,示例分析,圖5-7(a) . Tab頁風(fēng)格的菜單結(jié)構(gòu)在技術(shù)上和視感上都比較流行，但是多了操作步驟。建議在首頁顯示“完整展開的功能樹”，讓用戶可以直接操作次級菜單，一步到位。,圖5-7(b) .不顯眼的菜單排列，常被用戶忽視。至少要讓菜單排列和廣告互換位置。,5. 軟件用戶界面設(shè)計(jì)要素,5.8 合理的布局首先，界面的總體布局應(yīng)當(dāng)有一定的邏輯性，最好能夠與工作流程吻合。

42、界面設(shè)計(jì)人員只有仔細(xì)地分析軟件的需求，才能提取對界面布局有價(jià)值的信息。其次，窗口（或頁面）上的界面元素的布局應(yīng)當(dāng)整齊清爽。界面元素應(yīng)當(dāng)在水平或者垂直方向?qū)R，行、列的間距保持一致。窗體的尺寸要合適，界面元素不應(yīng)放得太滿，邊界處需要留有一定的空間，也不可過于寬松，顯得零亂。界面元素需要一致的對齊方式，以避免參差不齊的視覺效果。同類的界面元素盡量保持大小一致，起碼要保證高度或?qū)挾鹊囊恢拢ɡ缑畎粹o）。邏輯相關(guān)的元素要就近放置，便于用

43、戶操作。要善于利用窗體和界面元素的空白，以及分割用的線條。,5. 軟件用戶界面設(shè)計(jì)要素,5.9 合理的色彩相比于布局，設(shè)計(jì)合理的色彩就困難多了，因?yàn)樯实慕M合千變?nèi)f化，并且人們對顏色的喜好也極不相同。例如，人們對黑色的理解差異很大。一般規(guī)律：如果不是為了顯示真實(shí)感的圖形和圖像，那么應(yīng)當(dāng)限制一幀屏幕的色彩數(shù)目，因?yàn)槿藗冊谟^察屏幕的時(shí)候很難同時(shí)記住多種色彩。應(yīng)當(dāng)根據(jù)對象的重要性來選擇顏色，重要的對象應(yīng)當(dāng)用醒目的色彩表示。使用顏

44、色的時(shí)候應(yīng)當(dāng)保持一致性，例如錯誤提示信息用紅色表示，正常信息用綠色表示，那么切勿亂用紅色和綠色。在表達(dá)信息時(shí)，不要過分依賴顏色，因?yàn)橛行┯脩艨赡苌せ蛏酢?圖5-9 ”危險(xiǎn)，有風(fēng)險(xiǎn)，未知，基本安全” 的顏色，有什么講究嗎？“黃色”看不清楚。另外，文字不完整，在數(shù)字后面加“個”，前后項(xiàng)留合適的間隔。,5. 軟件用戶界面設(shè)計(jì)要素,5.10 國際化軟件的國際化是大勢所趨（特別是上海、北京等地的軟件開發(fā)商）。為了能夠更好地適應(yīng)國內(nèi)和國際

45、市場，在設(shè)計(jì)用戶界面的時(shí)候應(yīng)當(dāng)充分考慮語言和文化的差異。盡可能使用標(biāo)準(zhǔn)的圖解方式和國際通行的語言，要求簡單易懂，易于翻譯，方便不同母語的用戶。翻譯文字要地道，要符合本地習(xí)慣，不能硬翻譯，否則太不專業(yè)。MSN Messenger在發(fā)送文件的時(shí)候，出現(xiàn)如下圖所示的提示“傳輸：2407 KB 還未完成”。明顯是漢語中的病句，居然出現(xiàn)在微軟的產(chǎn)品中，顯然是硬翻譯英文Messenger的結(jié)果。正確的翻譯應(yīng)該是“文件正在傳輸，剩余2407 KB”