| PS:最近在考慮類似的內(nèi)容，程序員在幾乎完全重畫的界面類中，支持我們自定義的SKIN效果，制作了SKIN生成工具，甚至直接支持的控件透明，變形等，花了不少力氣，效果也終于滿意起來，本文是在考慮界面的時(shí)候曾閱讀過的幾篇文章之一，網(wǎng)上幾個(gè)轉(zhuǎn)載的地方排版不方便閱讀，我重新排版了一下保存，另外網(wǎng)絡(luò)上轉(zhuǎn)載的也都沒圖片，所以這也沒有了。 設(shè)計(jì)“好看”的用戶界面 （王詠剛 2003 年10 月） 1、問題引入： 兩周前，我的一個(gè)朋友小W 找我聊天，跟我說了件煩心事兒：他們公司開發(fā)的一套行業(yè)軟件在競標(biāo)時(shí)敗給了競爭對(duì)手；當(dāng)時(shí)，用戶給出的理由是，小W 他們的軟件界面粗糙、簡陋，看上去遠(yuǎn)不如競爭對(duì)手的界面那么專業(yè)。當(dāng)然，小W 和我都明白，對(duì)于競標(biāo)失敗而言，這個(gè)理由并不充分——在行業(yè)軟件市場上，大多數(shù)競標(biāo)失敗都有著更深的背景原因，比如客戶關(guān)系的好壞；但在公開場合里，軟件性能、售后服務(wù)、用戶界面等更為冠冕堂皇的理由卻總能成為客戶拒絕你的最好托詞。為了不在今后的競標(biāo)中被客戶和競爭對(duì)手輕易抓住把柄，小W 下決心改進(jìn)他們的軟件界面。 經(jīng)過研究，小W 和同事們發(fā)現(xiàn)，他們公司開發(fā)的所有軟件幾乎都存在用戶界面粗制濫造的通病。程序員們經(jīng)常隨心所欲地設(shè)計(jì)窗口、擺放控件，圖標(biāo)、字體和顏色的使用也沒有統(tǒng)一的標(biāo)準(zhǔn)，由此開發(fā)出來的軟件盡管在功能和性能上都表現(xiàn)得非常出色，但界面大多簡陋不堪，一眼看上去就像是土法燒制的陶盆兒陶罐兒——單獨(dú)擺在桌上還不覺得怎樣，一旦和官窯里燒出的上等瓷器擺在一起，立馬就會(huì)相形見絀，慘不忍睹。 為了改變現(xiàn)狀，小W 他們的第一反應(yīng)是請(qǐng)專業(yè)的美工來主持界面設(shè)計(jì)工作。小W 說：“好看不好看的問題當(dāng)然屬于藝術(shù)范疇。程序員們都是工程師，沒有半點(diǎn)兒藝術(shù)頭腦，再怎么折騰也是白搭。所以，我們一定要請(qǐng)專職的平面設(shè)計(jì)師來設(shè)計(jì)界面，程序員只要按照設(shè)計(jì)師的思路編程實(shí)現(xiàn)就行了。” 這個(gè)主意聽上去不錯(cuò)，小W 也的確從廣告公司請(qǐng)來了一位平面設(shè)計(jì)師。“當(dāng)然，像麥肯、奧美那樣的大廣告公司我們也請(qǐng)不起。我們請(qǐng)的那人是專做平面設(shè)計(jì)的，身價(jià)不高，在行里卻也小有名氣——當(dāng)然，比我們這些外行強(qiáng)多了。”“那么后來呢？”我喝著咖啡不懷好意地問，那情形就像是電影《綠茶》里姜文在向趙薇刨根問底。“后來？要是后來一切都OK 了，我還找你干什么？” 小W 把一肚子苦水倒在我面前。原來，平面設(shè)計(jì)師來到小W 的公司以后，工作還算努力，也畫出了許多漂亮的界面設(shè)計(jì)稿，但程序員們就是沒法把這些設(shè)計(jì)變成現(xiàn)實(shí)：要么是設(shè)計(jì)出的界面像游戲軟件的界面一樣動(dòng)感十足，讓人難以接受（用戶方的領(lǐng)導(dǎo)絕不會(huì)容忍下屬們對(duì)著游戲畫面優(yōu)哉游哉地完成日常工作）；要么是設(shè)計(jì)出的界面與軟件的功能自相矛盾，必備的功能沒法融入到界面之中（比如，為了保證美觀，設(shè)計(jì)師限制了子窗口的大小，結(jié)果好幾個(gè)控件就找不到立錐之地了）；要么是界面設(shè)計(jì)得過于前衛(wèi)，根本就無法用現(xiàn)有的窗體或控件技術(shù)實(shí)現(xiàn)..光是這些技術(shù)問題還不算什么，最要命的是，設(shè)計(jì)師經(jīng)常對(duì)程序員們指手劃腳，總是說“你們不懂，這是藝術(shù)規(guī)律”。結(jié)果，藝術(shù)規(guī)律敗給了嚴(yán)酷的現(xiàn)實(shí)：當(dāng)平面設(shè)計(jì)師給出的方案一次又 一次被程序員們否決，大多數(shù)程序員開始消極怠工了，幾乎所有人都放下了手頭的工作，一邊搖頭一邊嘟噥：“界面都定不下來，還編什么程序？”。 “你說，我該怎么辦呢？”小W 痛苦地問。 “你說呢？”我幸災(zāi)樂禍，一臉壞笑。 2、一些題外話： 像其他軟件開發(fā)環(huán)節(jié)一樣，用戶界面設(shè)計(jì)也可以借助一些現(xiàn)成的工具。 有一次，我們要為客戶準(zhǔn)備一個(gè)產(chǎn)品方案。方案里的好幾個(gè)軟件模塊我們從來就沒有真正實(shí)現(xiàn)過（這種“空手套白狼”的做法在行業(yè)軟件市場里相當(dāng)普遍）。為了讓我們的方案更有說服力，售前工程師們干脆用制圖軟件Visio里的用戶界面繪制功能，把尚未問世的軟件模塊畫得有模有樣，窗體、菜單、按鈕、工具欄、對(duì)話框等界面元素也都一應(yīng)俱全。在方案里集成了這些界面圖片以后，半數(shù)以上的用戶就不會(huì)懷疑這套系統(tǒng)的真實(shí)性了——毫無疑問，這也是一種界面設(shè)計(jì)工作，盡管其中有些招搖撞騙的味道。應(yīng)當(dāng)說，要描述和展現(xiàn)用戶界面設(shè)計(jì)方案，最直觀的方法就是把界面的樣子畫出來。在程序員看來，白板或稿紙上的一張界面示意圖往往就能說明所有問題。不過，當(dāng)我們需要在不同的開發(fā)環(huán)境中交換設(shè)計(jì)方案，或是要管理和檢索界面設(shè)計(jì)文檔的時(shí)候，圖片信息就不如格式化的文本信息那樣方便了。為此，人們陸續(xù)設(shè)計(jì)出了許多“用戶界面描述語言”。利用這些語言，我們可以像編寫程序那樣“編寫”用戶界面。比如說，Delphi 中用來描述窗體特性的*.dfm 文件，其中的文本內(nèi)容就是一種相當(dāng)不錯(cuò)的用戶界面描述語言。與其他描述性語言類似的是，用戶界面描述語言也有標(biāo)準(zhǔn)化和XML 化的傾向。迄今為止，人們已經(jīng)提出了AAIML、AUIML、XIML、XUL、UIML 等一系列基于XML標(biāo)準(zhǔn)的用戶界面描述語言①。W3C 正在制訂的XForms 標(biāo)準(zhǔn)②也是XML 家族的一員，它很可能成為未來設(shè)計(jì)和開發(fā)Web 用戶界面的核心技術(shù)之一。 有關(guān)用戶界面描述語言的研究和探索工作的確有助于用戶界面設(shè)計(jì)的標(biāo)準(zhǔn)化。如果有哪一種用戶界面描述語言真能成為業(yè)界公認(rèn)的標(biāo)準(zhǔn)，并進(jìn)一步促使所有可視化開發(fā)工具在描述用戶界面時(shí)都使用統(tǒng)一的數(shù)據(jù)格式，那我們?cè)陂_發(fā)過程中，也許就能把Visual Basic .NET 的窗體設(shè)計(jì)直接粘貼到VisualAge、Kylix 或是C#Builder 的開發(fā)環(huán)境里——這對(duì)于需要在不同環(huán)境下開發(fā)軟件的程序員來說，當(dāng)然是夢(mèng)寐以求的一件事了。 3、案例分析： 在本文的案例中，我的朋友小W 為了軟件界面好看不好看的問題而苦惱萬分。他所選擇的解決方案——聘請(qǐng)專職的平面設(shè)計(jì)師——看上去不無道理，但實(shí)踐起來卻困難重重。我個(gè)人認(rèn)為，這里面最主要的原因是：除了游戲等少數(shù)需要炫耀外觀的軟件之外，大多數(shù)軟件的界面設(shè)計(jì)其實(shí)并不等同于通常意義上的平面設(shè)計(jì)。舉例來說，一個(gè)沒有編程經(jīng)驗(yàn)，又不了解用戶需求的平面設(shè)計(jì)師，他可以給出漂亮的圖標(biāo)或配色方案，但他多半說不出下拉列表框和組合框在用途上的差異，他也不一定知道菜單項(xiàng)和工具欄按鈕該如何排列才符合用戶的使用習(xí)慣，至于像“預(yù)覽對(duì)話框該選擇有模式對(duì)話框還是無模式對(duì)話框”或“哪些控件需要使用上下文菜單”等更為專業(yè)的問題，他恐怕就更加束手無策了。最重要的是，沒有軟件開發(fā)經(jīng)驗(yàn)的平面設(shè)計(jì)師和普通的程序員之間很少有可以互通的專業(yè)語言：設(shè)計(jì)師們難以理解配置管理、螺旋模型等軟件工程術(shù)語，程序員們也不大明白矛盾空間、非對(duì)稱平衡等設(shè)計(jì)專業(yè)名詞。應(yīng)該說，小W 的公司里程序員和設(shè)計(jì)師之間的齟齬恰恰起因于缺乏共同語言的兩類人難于相互交流。 那么，是不是應(yīng)該有一個(gè)“用戶界面設(shè)計(jì)師”的職業(yè)，專門負(fù)責(zé)軟件用戶界面的研究與開發(fā)呢？沒錯(cuò)，國外許多規(guī)模較大的軟件公司都為項(xiàng)目組配備了專職的用戶界面設(shè)計(jì)師，微軟公司還在其微軟解決方案框架（MSF）中明確指出項(xiàng)目組必須設(shè)置用戶體驗(yàn)角色（User Experience Role）以增強(qiáng)軟件的可用性③。不同公司對(duì)該職位的稱謂和定位可能不盡相同，但大多數(shù)公司都要求這些專職的用戶界面設(shè)計(jì)師兼具軟件原型開發(fā)、用戶需求管理和圖形界面設(shè)計(jì)等三方面的能力。這里面的道理非常簡單：首先，如果設(shè)計(jì)師對(duì)軟件開發(fā)一無所知，程序員們?cè)缤頃?huì)把他轟出項(xiàng)目組；其次，如果設(shè)計(jì)師不能理解用戶需求，那他和一個(gè)只知道顯擺前衛(wèi)的行為藝術(shù)者就沒什么分別；最后，如果設(shè)計(jì)師沒有平面設(shè)計(jì)的根基，那他豈不連最后一點(diǎn)存在的價(jià)值都沒有了嗎？下面是我最近從網(wǎng)上摘錄的，美國一家軟件公司招聘用戶界面設(shè)計(jì)師時(shí)對(duì)應(yīng)聘者水平的要求： .. 擁有計(jì)算機(jī)科學(xué)或相關(guān)專業(yè)的學(xué)士學(xué)位； .. 熟悉用戶界面設(shè)計(jì)的基本原則； .. 善于將業(yè)務(wù)規(guī)則、用戶操作和功能需求轉(zhuǎn)化為軟件特性； .. 至少在一個(gè)項(xiàng)目中有過用例分析和UML 建模的經(jīng)驗(yàn)； .. 能夠使用Java Swing 設(shè)計(jì)用戶界面； .. 能用JSP 設(shè)計(jì)Web 應(yīng)用程序的界面； .. 能夠使用腳本語言快速開發(fā)軟件原型； .. 能熟練使用Photoshop、Illustrator 和Dreamweaver 軟 件； .. 對(duì)用戶界面的美學(xué)特征和可用性有較強(qiáng)的判斷和甄別能力； .. 善于在團(tuán)隊(duì)中工作； .. 優(yōu)秀的口頭和書面表達(dá)能力。 怎么樣？這個(gè)要求蠻高的吧？這更加形象地說明，要設(shè)計(jì)出最漂亮、最優(yōu)秀、最出類拔萃的用戶界面，軟件開發(fā)、需求管理和平面設(shè)計(jì)這三樣技術(shù)缺一不可。“打住，打??！”小W 已經(jīng)怒火中燒了，“你這不是逗我玩嗎？要請(qǐng)這么一個(gè)界面設(shè)計(jì)師得花多少錢哪？我們公司可沒這個(gè)實(shí)力！” 沒錯(cuò)，大多數(shù)中小型軟件公司沒能力聘請(qǐng)專職的界面設(shè)計(jì)師。不過別忘了，我上面說的是理想情況。聘請(qǐng)專職的界面設(shè)計(jì)師固然可以開發(fā)出最漂亮的軟件界面，但沒有界面設(shè)計(jì)師的參與也不意味著只能破罐子破摔。我們的目的是把界面設(shè)計(jì)得盡量好看，但“好看”有多重標(biāo)準(zhǔn)，不同的行業(yè)，不同的市場，對(duì)“好看”的要求也不盡一致。如果你要開發(fā)的是游戲軟件或藝術(shù)網(wǎng)站，那你恐怕就只有雇傭最出色的藝術(shù)家來繪制用戶界面了。但是，如果要開發(fā)的只是普通的行業(yè)軟件，你根本沒必要把軟件界面打造得像MSN Explorer 一樣異彩紛呈。對(duì)于小W 他們的軟件來說，只要保證用戶界面簡潔、大方，易于操作，與流行的軟件風(fēng)格保持一致，用戶就不會(huì)再有什么意見了。“要做到這一點(diǎn)，”我斬釘截鐵地說，“根本用不著什么界面設(shè)計(jì)大師，你們公司的普通程序員就完全可以勝任。當(dāng)然，得讓他們掌握一些用戶界面設(shè)計(jì)的基本準(zhǔn)則。”經(jīng)不住小W 的軟磨硬泡，我拿起紙筆，搜腸刮肚，好容易寫出了下面這些我認(rèn)為重要和值得推薦的界面設(shè)計(jì)準(zhǔn)則： 根本大法： 在用戶界面好看不好看的問題上，“東施效顰”的做法通常比“推陳出新”更為有效。這很容易理解，一個(gè)在窗口布局、色彩搭配、字體風(fēng)格等方面處處模仿微軟Windows 的程序員雖然很少能享受到藝術(shù)創(chuàng)新的快感，但他開發(fā)出的軟件卻總是有著和Office 或IE 一樣“好看”的界面。軟件已經(jīng)發(fā)展了這么多年，每一類軟件都有其流行的界面風(fēng)格和設(shè)計(jì)慣例。既然不是界面設(shè)計(jì)大師，就不要滿腦子標(biāo)新立異，老老實(shí)實(shí)地照貓畫虎總不會(huì)有錯(cuò)。 主窗體布局： 主窗體（或稱主窗口）是圖形用戶界面的核心。主窗體中有菜單、工具欄、對(duì)話框、客戶區(qū)、狀態(tài)欄等各式各樣的界面元素。對(duì)普通程序員來說，安排這些界面元素的規(guī)則只有一條：如果在流行的商業(yè)軟件（特別是微軟的軟件）中找不出你使用的布局方式，那么千萬別猶豫，趕快否定自己的設(shè)計(jì)吧。 例如，我曾見過這樣一個(gè)軟件界面（見圖 1）： 圖 1 數(shù)據(jù)視圖的簡單堆積 在圖 1 所示的界面中，程序員把三個(gè)數(shù)據(jù)視圖（兩個(gè)表格和一個(gè)多行編輯框）排列在主窗體右邊的客戶區(qū)里。主窗體和三個(gè)數(shù)據(jù)視圖都有各自的滾動(dòng)條和可視區(qū)域。這種簡單堆積數(shù)據(jù)視圖的做法，只能造成一種后果，那就是一眼看過去到處都是滾動(dòng)條，每個(gè)區(qū)域都可以滾動(dòng)。新上手的用戶根本想不清楚該用哪個(gè)滾動(dòng)條來尋找自己需要的數(shù)據(jù)。從實(shí)現(xiàn)層面講，這種做法也需要程序員小心地維護(hù)所有視圖的大小和相對(duì)關(guān)系，以避免主窗體的大小變化引起客戶區(qū)的混亂。相比之下，把數(shù)據(jù)視圖放在不同的子窗體或?qū)傩皂撝械淖龇ň蜁?huì)讓窗體布局更為簡明有序。 控件排列： 整齊，一定要整齊，任何不整齊的用戶界面都不是好界面。窗口和對(duì)話框中的所有控件都必須整齊排列。實(shí)際上，幾乎所有現(xiàn)代可視化開發(fā)環(huán)境都為我們提供了調(diào)整控件大小、對(duì)齊控件以及等距離均勻排列控件的工具。不知道為什么，很多程序員就是不愿意使用這些功能，他們寧可相信自己的眼睛也不相信開發(fā)環(huán)境中的自動(dòng)化工具。當(dāng)然，除了隨意擺放控件位置、隨意設(shè)定控件大小的極端做法以外，我還見過另一種極端。有一家很有名的軟件公司為了規(guī)范項(xiàng)目組的界面設(shè)計(jì)風(fēng)格，居然在其開發(fā)制度中規(guī)定：界面中每一組控件都必須用GroupBox 包圍起來。結(jié)果，那家公司開發(fā)出的軟件大多都有像圖 2 一樣的界面： 圖 2 濫用GroupBox 的界面 據(jù)說，該公司這樣做的目的是為了使控件的排列更加整齊。但看過圖 2 就可以知道，無論控件排列得多整齊，對(duì)話框中層層嵌套的線框總會(huì)在視覺上給人留下雜亂無章的感覺。顯然，這是一個(gè)自作主張、畫蛇添足的典型案例。 窗體留白： 如果窗體邊緣或窗體中的某個(gè)區(qū)域有大量空白，那你就應(yīng)該重新考慮窗體的大小和控件的排列方式。很多程序員喜歡在窗體（特別是對(duì)話框）的四邊留下大量空白。這種“寬邊”窗體事實(shí)上很不招人喜歡。仔細(xì)看一下Office 等商業(yè)軟件中每個(gè)對(duì)話框的邊緣設(shè)計(jì)，邊緣緊湊、線條簡潔才是今天的主流風(fēng)格。一些懶惰的程序員習(xí)慣于簡單地從上到下或從左到右擺放控件，而不顧及這種做法會(huì)在窗體中留下多少空白區(qū)域。圖 3 中所示的對(duì)話框簡單地把控件由上至下排列，結(jié)果在右上角留下大量的空白，一眼看上去整個(gè)對(duì)話框有向左傾斜的趨勢（這種左重右輕的錯(cuò)覺在平面設(shè)計(jì)中可以被歸入視覺心理學(xué)的研究范疇）。 圖 3 右上角留白的對(duì)話框 重新排列控件，或是調(diào)整窗體及控件的大小就可以解決窗體留白的問題。對(duì)于無法在設(shè)計(jì)時(shí)準(zhǔn)確調(diào)整窗體大小的界面（比如一些由程序自動(dòng)生成的界面），如果實(shí)在沒辦法擠掉空白，那也不妨把所有空白都整齊地保留在窗體的最右邊或者最下邊，這可以盡量保證窗體的整潔。 主菜單： 把菜單項(xiàng)按邏輯關(guān)系組合在一起。菜單的層數(shù)不要超過兩層。合理安排菜單項(xiàng)對(duì)于軟件的最終用戶來說非常重要。很多用戶（包括我在內(nèi)）使用新的軟件時(shí)，都是依靠菜單而不是聯(lián)機(jī)幫助來熟悉每一項(xiàng)軟件功能的。一般來說，菜單的編排都有業(yè)界的標(biāo)準(zhǔn)或慣例，如果你非要把“復(fù)制”和“粘貼”功能放在“工具”菜單里，那我只能說你是成心為用戶設(shè)置障礙了。此外，菜單的層次有助于在邏輯上劃分軟件功能，但層次過多的菜單只會(huì)讓用戶叫苦不迭。 圖 4 獨(dú)特的菜單設(shè)計(jì)風(fēng)格 例如，圖 4 是我見過的一個(gè)菜單設(shè)計(jì)方案。程序員在每個(gè)菜單項(xiàng)的左右兩邊都加上了“【”和“】”符號(hào)。據(jù)說這樣做是為了讓菜單更清晰、更醒目。我并不認(rèn)為這樣做有什么不好，關(guān)鍵是程序員忘了給菜單項(xiàng)加上助記字符（帶下劃線的字母），用戶沒法用“Alt”加字母鍵這樣的鍵盤組合來選擇菜單項(xiàng)了，這對(duì)那些用慣了鍵盤的用戶來說可不是什么好消息。 工具欄： 確保工具欄中所有按鈕都可以對(duì)應(yīng)到主菜單中的某個(gè)菜單項(xiàng)。這個(gè)原則的重要性在于，如果在主菜單找不到工具欄里提供的某項(xiàng)功能，用戶就只能用鼠標(biāo)來觸發(fā)該功能了。萬一用戶的鼠標(biāo)出了故障，或是碰到了因?yàn)樽非蟛僮魉俣榷詰冁I盤的用戶（在某些網(wǎng)絡(luò)游戲里，只用鍵盤不用鼠標(biāo)的高手通常都被歸入“鍵宗”一派），你的軟件就得挨罵了。 順便提一句，我見過有人把工具欄按鈕設(shè)計(jì)成圖 5 中的樣子： 圖 5 “漢字”工具欄 這種“漢字”工具欄的設(shè)計(jì)純屬糟蹋工具欄的名聲。如果你找不到合適的圖標(biāo)，那就干脆別用工具欄算了；如果你一定要用漢字來注明按鈕的功能，那為什么不用更規(guī)范的做法——ToolTip 提示呢？ 圖標(biāo)： 沒學(xué)過美術(shù)就不要自己畫圖標(biāo)。只要不侵權(quán)，使用別人的勞動(dòng)成果既能省力，又不會(huì)出差錯(cuò)。用戶界面中的許多元素，比如菜單、工具欄、樹形圖、列表框都可以配上圖標(biāo)。現(xiàn)在網(wǎng)上有很多免費(fèi)的圖標(biāo)庫可供下載，那些無處不在的老面孔（比如磁盤、打印機(jī)、望遠(yuǎn)鏡這樣的圖標(biāo)）更不會(huì)引發(fā)什么版權(quán)糾紛。因此，在圖標(biāo)的使用上，程序員應(yīng)當(dāng)異常堅(jiān)決地執(zhí)行“拿來主義”。不過，使用圖標(biāo)要有統(tǒng)一的風(fēng)格，千萬別混用不同風(fēng)格、不同類型的圖標(biāo)。比方說，圖 6 中的工具欄一共只有10 個(gè)圖標(biāo)，卻混雜了線條圖、立體圖、卡通圖等三種風(fēng)格，設(shè)計(jì)這種“大雜燴”界面的程序員的確缺少了一點(diǎn)專業(yè)精神。 圖 6 混用不同風(fēng)格圖標(biāo)的例子 上下文菜單： 這里的上下文菜單是指點(diǎn)擊鼠標(biāo)右鍵后彈出的菜單。上下文菜單的內(nèi)容一般和鼠標(biāo)點(diǎn)擊的對(duì)象相關(guān)。設(shè)計(jì)上下文菜單的注意事項(xiàng)和設(shè)計(jì)工具欄類似：把最常用的、與特定對(duì)象相關(guān)的操作放在上下文菜單中，同時(shí)，確保這些操作也可以通過主菜單實(shí)現(xiàn)。出于懶惰或其他原因，很多程序員愛犯這樣的錯(cuò)誤：只在上下文菜單中提供與特定對(duì)象相關(guān)的操作，主菜單和工具欄都不再重復(fù)提供這些功能。這么做的后果是，如果用戶不知道鼠標(biāo)右鍵可以打開上下文菜單，那就永遠(yuǎn)也找不到這些功能了。很顯然，上下文菜單只是用戶操作方式的一種，在用上下文菜單為鼠標(biāo)操作開辟綠色通道的同時(shí)，我們也應(yīng)當(dāng)利用主菜單為鍵盤操作提供方便。 字體： 只使用最常見的，或是用戶點(diǎn)名要用的字體。也許是因?yàn)槎鄶?shù)開發(fā)環(huán)境都可以用所見即所得的方式輕易調(diào)整字體的緣故吧，在各種界面要素中，字體似乎是程序員最喜歡發(fā)揮想象力的一個(gè)領(lǐng)域——我經(jīng)常在一些充斥著初號(hào)大字和“彩云”、“琥珀”等變形字體，滿眼是傾斜、旋轉(zhuǎn)、閃爍等花樣文字的界面跟前頭暈?zāi)垦?。依我說，既然不是專業(yè)的平面設(shè)計(jì)師，我們程序員還是別在這方面賣弄為好。最穩(wěn)妥的方法是：只使用“宋體”、“黑體”等常見字體，只使用Windows 系統(tǒng)默認(rèn)的字號(hào)大小。盡量少用斜體、下劃線等修飾手段。當(dāng)然，用戶決定一切。當(dāng)用戶在字體方面有特殊需求（比如為了醒目起見加大某些文字的字號(hào)）時(shí)，我們當(dāng)然應(yīng)該照辦不誤了。使用字體時(shí)的另一個(gè)常見錯(cuò)誤是字體和容納該字體的控件大小不匹配，像圖 7 所示，輸入框的大小和框內(nèi)的字號(hào)相比差距過大——這種界面明顯是程序員隨心所欲、不負(fù)責(zé)任的產(chǎn)物。 圖 7 控件和字體不匹配的例子 色彩搭配： 色彩搭配是一門很深?yuàn)W的學(xué)問。如果你不準(zhǔn)備深入學(xué)習(xí)相關(guān)的理論知識(shí)，那最好別在界面中使用和系統(tǒng)配色方案差別太大的色彩。WIN32 API 用COLOR_BACKGROUND 、COLOR_BTNTEXT 等宏定義來表示系統(tǒng)缺省配色方案中的每一種色彩，用戶可以通過改變Windows 外觀來改變這些色彩組合。嚴(yán)格按照系統(tǒng)配色方案的要求使用這些色彩，可以保證界面中的色彩組合既符合Windows 風(fēng)格的要求，又能在Windows 外觀改變時(shí)與其他程序的色彩搭配保持一致。如果你一定要用鮮艷的顏色（比如紅色）來提醒用戶某件重要的事情，那么記住，這些顏色用得越少越好——如果不經(jīng)專業(yè)技法處理，大面積的紅色、綠色、紫色或者橙色都很容易讓人產(chǎn)生視覺疲勞以及眩暈、惡心等不適癥狀。 錯(cuò)誤信息： 籠統(tǒng)或技術(shù)性太強(qiáng)的錯(cuò)誤信息只會(huì)讓用戶深陷泥潭。大多數(shù)軟件的用戶都不是精通計(jì)算機(jī)的專業(yè)人士。如果普通用戶看到圖 8 中的這條錯(cuò)誤信息，他會(huì)作何感想呢？ 圖 8 技術(shù)性過強(qiáng)的錯(cuò)誤信息 在普通用戶當(dāng)中，沒有誰會(huì)知道DBCC 這個(gè)命令要在哪里運(yùn)行，更不會(huì)有人知道什么是“分配頁”，什么是“段ID”。向用戶報(bào)告這樣的錯(cuò)誤信息還不如立即終止執(zhí)行的做法干凈利落。當(dāng)然，完全忽略技術(shù)信息又不利于專業(yè)人士對(duì)系統(tǒng)故障的診斷。常見的做法是把技術(shù)信息記錄在系統(tǒng)日志里，界面上只告訴用戶“系統(tǒng)出現(xiàn)故障，請(qǐng)聯(lián)系..”。圖 9中把友善的提示語和專業(yè)的技術(shù)信息結(jié)合在一起的做法也非常值得推薦： 圖 9 改進(jìn)后的錯(cuò)誤信息 分辨率： 用戶的顯示器可能在不同的分辨率下工作，你的軟件界面必須能適應(yīng)分辨率的變化。我知道有不少程序員開發(fā)的軟件都只能在某種特定的分辨率（比如1024×768）條件下保持界面的美觀。許多程序員為了省事，干脆就按用戶通常使用的分辨率大小，把窗體中所有控件擺放到合適的位置。在大多數(shù)情況下，這種軟件的用戶界面非常整潔，可一旦用戶改變分辨率，窗體中的控件就立即東倒西歪，有的甚至無影無蹤了。順便問一句，測試軟件時(shí)，你做過分辨率方面的實(shí)驗(yàn)嗎？你的軟件界面（GUI 或Web 頁面）能在Sony W 系列筆記本的超寬屏幕（1280×768）上靚麗如初嗎？要是移植到聯(lián)想天璣掌上電腦的袖珍顯示屏（320×240）上呢？從技術(shù)上講，適應(yīng)不同的分辨率，不過是要在響應(yīng)每個(gè)窗體的WM_SIZE 消息時(shí)，調(diào)整好相關(guān)窗體的大小。應(yīng)該說，這項(xiàng)工作并不十分困難，任何聰明、勤快的程序員都可以做得到。 4、補(bǔ)充說明： 本文講的是用戶界面好看不好看的問題。按說，這些涉及心理感受的事情并沒有絕對(duì)的對(duì)與錯(cuò)之分。我寫的這幾條準(zhǔn)則既不全面，又不深刻，更談不上循循善誘、誨人不倦。你完全可以說我批評(píng)的某種設(shè)計(jì)方案其實(shí)非常出色，因?yàn)槟鞘悄衬持髁x設(shè)計(jì)風(fēng)格的杰出代表。但我們不要忘了，軟件不是頹廢派詩歌，不是解構(gòu)主義文本，更不是哪個(gè)無病呻吟的家伙自娛自樂的工具，軟件要滿足用戶的需求，迎合用戶的口味，要讓用戶在掏腰包的同時(shí)心滿意足、氣定神閑，別動(dòng)不動(dòng)就吹胡子瞪眼——說到底，只有廣大用戶才是評(píng)價(jià)用戶界面好看與否的最終權(quán)威。正因?yàn)槿绱?，微軟、IBM、惠普、蘋果、Oracle 這些大企業(yè)才要不惜代價(jià)建造所謂的可用性實(shí)驗(yàn)室，或是用統(tǒng)計(jì)學(xué)的方法跟蹤、調(diào)查、實(shí)驗(yàn)、分析用戶的操作習(xí)慣和審美取向，簡單說這是要花大價(jià)錢搞清楚用戶到底有多少高雅情操抑或低級(jí)趣味，這種做法當(dāng)然最正確、最有效、最符合科學(xué)規(guī)律，也最能解決我們?cè)诮缑嬖O(shè)計(jì)中碰到的各種問題。所以，還是那句話，如果我們自己沒能力開展類似的研究，那不妨惟主流軟件和主流企業(yè)馬首是瞻——這么做實(shí)際上是借大公司的研究經(jīng)費(fèi)和研究成果為己用，往小了說這叫鑿壁偷光，往大了講這叫海納百川，你又何樂而不為呢？ 5、總結(jié)一下： .. 程序員一樣可以設(shè)計(jì)出好看的用戶界面。 .. 最關(guān)鍵的是模仿和學(xué)習(xí)，最好能讓自己設(shè)計(jì)的界面和主流軟件一樣好看。 |
聯(lián)系客服
