不必成為創(chuàng )建用戶(hù)界面的藝術(shù)家-大多數用戶(hù)界面設計的原則,與任意一門(mén)基礎藝術(shù)課中所講授的基礎設計的原則相同。構圖、顏色等的基本的設計原則,就象它們應用在紙張或油畫(huà)上一樣,也能很好地在一臺計算機的屏幕上應用。
雖然 visual basic 能通過(guò)簡(jiǎn)單地將控件拖動(dòng)并放置到窗體上而使得創(chuàng )建用戶(hù)界面非常容易,但是,在設計之前稍微計劃一下就能使應用程序的可用性有很大的改觀(guān)??赡茼毾仍诩埳袭?huà)出窗體開(kāi)始設計,決定需要哪些控件,不同元素的相對重要性,以及控件之間的關(guān)系。
構圖:應用程序的觀(guān)感與感覺(jué)
窗體的構圖或布局不僅影響它的美感,而且也極大地影響應用程序的可用性。構圖包括諸如控件的位置、元素的一致性、動(dòng)感、空白空間的使用、以及設計的簡(jiǎn)單性等因素。
控件的位置
在大多數界面設計中,不是所有的元素都一樣重要。仔細地設計是很有必要的,以確保越是重要的元素越要很快地顯現給用戶(hù)。重要的或者頻繁訪(fǎng)問(wèn)的元素應當放在顯著(zhù)的位置上,而不太重要的元素就應當降級到不太顯著(zhù)的位置上。
在大多數語(yǔ)言中我們習慣于在一頁(yè)之中從左到右、自上到下地閱讀。對于計算機屏幕也如此,大多數用戶(hù)的眼睛會(huì )首先注視屏幕的左上部位,所以最重要的元素應當放在屏幕的左上部位。例如,如果窗體上的信息與客戶(hù)有關(guān),則它的名字字段應當顯示在它能最先被看到的地方。而按鈕,如“確定”或“下一個(gè)”,應當放置在屏幕的右下部位;用戶(hù)在未完成對窗體的操作之前,通常不會(huì )訪(fǎng)問(wèn)這些按鈕。
把元素與控件分成組也很重要。盡量把信息按功能或關(guān)系進(jìn)行邏輯地分組。因為他們的功能彼此相關(guān),所以定位數據庫的按鈕應當被形象地分成一組,而不是分散在窗體的四處。對信息也是一樣,名字字段與地址通常分在一組,因為它們聯(lián)系緊密。在許多情況下,可以使用框架控件來(lái)幫助加強控件之間的聯(lián)系。
界面元素的一致性
在用戶(hù)界面設計中,一致性是一種優(yōu)點(diǎn)。一致的外觀(guān)與感覺(jué)可以在應用程序中創(chuàng )造一種和諧,任何東西看上去都那么協(xié)調。如果界面缺乏一致性,則很可能引起混淆,并使應用程序看起來(lái)非?;靵y、沒(méi)有條理、價(jià)值降低,甚至可能引起對應用程序可靠性的懷疑。
為了保持視覺(jué)上的一致性,在開(kāi)始開(kāi)發(fā)應用程序之前應先創(chuàng )建設計策略和類(lèi)型約定。諸如控件的類(lèi)型、控件的尺寸、分組的標準以及字體的選取等設計元素都應該在事先確定??梢詣?chuàng )建設計樣板來(lái)幫助進(jìn)行設計。
在 visual basic 中有大量的控件可供使用,這可能引起有人想使用所有的控件。為了避免這種引誘,選取能很好地適合特定應用程序的控件子集。雖然列表框、組合框、網(wǎng)格以及樹(shù)等控件都可用來(lái)表示信息列表,最好還是盡可能使用一種類(lèi)型。
還有,盡量恰當地使用控件,雖然 textbox 控件可以設置成只讀并用來(lái)顯示文本,但 label 控件通常更適用于該目的。在為控件設置屬性時(shí)請保持一致性,如果在一個(gè)地方為可編輯的文本使用白色背景,除非有很好的理由,否則不要在別的地方又使用灰色。
在應用程序中不同的窗體之間保持一致性對其可用性有非常重要的作用。如果在一個(gè)窗體上使用了灰色背景以及三維效果,而在另一個(gè)窗體上使用白色背景,則這兩個(gè)窗體就顯得毫不相干。選定一種類(lèi)型并在整個(gè)應用程序保持一致,即使這意味著(zhù)要重新設計某些功能。
動(dòng)感:窗體與其功能匹配
動(dòng)感是對象功能的可見(jiàn)線(xiàn)索。雖然對這個(gè)術(shù)語(yǔ)也許還不熟悉,但動(dòng)感的實(shí)例四處可見(jiàn)。自行車(chē)上的把手,手放在它的上面,動(dòng)感會(huì )將把手用手扣緊這件事顯現出來(lái)。按下按鈕、旋轉旋鈕和點(diǎn)亮電燈的開(kāi)關(guān)等都能進(jìn)行動(dòng)感表示— 一看到它們就可以看出其用處。
用戶(hù)界面也使用動(dòng)感。例如,用在命令按鈕上的三維立體效果使得他們看上去象是被按下去的。如果設計平面邊框的命令按鈕的話(huà),就會(huì )失去這種動(dòng)感,因而不能清楚地告訴用戶(hù)它是一個(gè)命令按鈕。在有些情況下,平面的按鈕也許是適合的,比如游戲或者多媒體應用程序;只要在整個(gè)應用程序中保持一致就很好。
文本框也提供了一種動(dòng)感,用戶(hù)可以期望帶有邊框和白色背景的框,框中包含可編輯的文本。顯示不帶邊框的文本框 (borderstyle = 0) 也有可能,這使它看起來(lái)象一個(gè)標簽,并且不能明顯地提示用戶(hù)它是可編輯的。
空白空間的使用
在用戶(hù)界面中使用空白空間有助于突出元素和改善可用性??瞻卓臻g不必非得是白色的-它被認為是窗體控件之間以及控件四周的空白區域。一個(gè)窗體上有太多的控件會(huì )導致界面雜亂無(wú)章,使得尋找一個(gè)字段或者控件非常困難。在設計中需要插入空白空間來(lái)突出設計元素。
各控件之間一致的間隔以及垂直與水平方向元素的對齊也可以使設計更可用。就象雜志中的文本那樣,安排得行列整齊、行距一致,整齊的界面也會(huì )使其容易閱讀。
visual basic 提供了幾個(gè)工具,使得控件的間距、排列和尺寸的調整非常容易。“排列”、“按相同大小制作”、“水平間距”、“垂直間距”和“在窗體中央”等命令都可以在“格式”菜單中找到。
保持界面的簡(jiǎn)明
界面設計最重要的原則也許就是簡(jiǎn)單化。對于應用程序而言,如果界面看上去很難,則可能程序本身也很難。稍稍深入考慮一下便有助于創(chuàng )建看上去(實(shí)際上也是)用起來(lái)都很簡(jiǎn)單的界面。從美學(xué)的角度來(lái)講,整潔、簡(jiǎn)單明了的設計常常更可取。
在界面設計中,一個(gè)普遍易犯的錯誤就是力圖用界面來(lái)模仿真實(shí)世界的對象。例如,想象一下要求創(chuàng )建完整的保險單的應用程序。很自然的反應就是在屏幕上設計完全仿照保險單的界面。這就做會(huì )出現幾個(gè)問(wèn)題:保險單的形狀與尺寸和屏幕上的有很大不同,要非常完善地復制這樣的表格會(huì )將其限制在文本框與復選框中,而對用戶(hù)并沒(méi)有真正的好處。
最好是設計出自己的、也能提供原始保險單打印副本(帶打印預覽)的界面。通過(guò)從原始保險單中創(chuàng )建字段的邏輯組,并使用有標簽的界面或幾個(gè)鏈接的窗體,就可以不要求滾動(dòng)屏幕而顯示所有的信息。也可以使用附加的控件,比如帶有選取預裝入的列表框,這些控件可以減少打字工作量。
也可以取出不常用的函數并把它們移到它們自己的窗體中去,來(lái)簡(jiǎn)化許多應用程序。提供缺省有時(shí)也可以簡(jiǎn)化應用程序;如果十個(gè)用戶(hù)中有九個(gè)選取加粗的文本,就把文本粗體設為缺省值,而不要叫用戶(hù)每次都選取一遍(不要忘記提供一個(gè)選項可以覆蓋該缺省值)。向導也有助于簡(jiǎn)化復雜的或不常用的任務(wù)。
簡(jiǎn)化與否最好的檢驗就是在應用中觀(guān)察應用程序。如果有代表性的用戶(hù)沒(méi)有聯(lián)機幫助就不能立即完成想要完成的任務(wù),那么就需要重新考慮設計了。
使用顏色與圖象
在界面上使用顏色可以增加視覺(jué)上的感染力,但是濫用的現象也時(shí)有發(fā)生。許多顯示器能夠顯示幾百萬(wàn)種顏色,這很容易使人要全部使用它們。如果在開(kāi)始設計時(shí)沒(méi)有仔細地考慮,顏色也會(huì )象其他基本設計原則一樣,出現許多問(wèn)題。
每個(gè)人對顏色的喜愛(ài)有很大的不同,用戶(hù)的品味也會(huì )各不相同。顏色能夠引發(fā)強烈的情感,如果正在設計針對全球讀者的程序,那么某些顏色可能有文化上的重大意義。一般說(shuō)來(lái),最好保守傳統,采用一些柔和的、更中性化的顏色。
當然,預期的讀者以及試圖傳達的語(yǔ)氣與情緒也會(huì )影響對顏色的選取。明亮的紅色、綠色和黃色適用于小孩子使用的應用程序,但是在銀行應用程序中它很難帶來(lái)財務(wù)責任心的印象。
少量明亮色彩可以有效地突出或者吸引人們對重要區域的注意。作為經(jīng)驗之談,應當盡量限制應用程序所用顏色的種類(lèi),而且色調也應該保持一致。如果可能的話(huà),最好堅持標準的 16 色的調色板;在 16 色顯示器上觀(guān)看時(shí),抖動(dòng)會(huì )使得其他一些顏色顯示不出來(lái)。
使用顏色時(shí)另一個(gè)需要考慮的問(wèn)題就是色盲。有一些人不能分辨不同的基色(如紅色與綠色)組合之間的差別。對于有這種情況的人,綠色背景上的紅色文本就會(huì )看不見(jiàn)。
圖象和圖標
圖片與圖標的使用也可以增加應用程序的視覺(jué)上的趣味,但是,細心的設計也是必不可少的。不用文本,圖象就可以形象地傳達信息,但常常不同的人對圖象的理解也不一樣。
帶有表示各種功能的圖標的工具欄,它是一種很有用的界面設備,但如果不能很容易地識別圖標所表示的功能,反而會(huì )事與愿違。在設計工具欄圖標時(shí),應查看一下其它的應用程序以了解已經(jīng)創(chuàng )建了什么樣的標準。例如,許多應用程序用一張角上有卷邊的紙來(lái)表示“新建文件”圖標。也許還有更好的比喻來(lái)表示這一功能,但改用其它的表示方法會(huì )引起用戶(hù)的混淆。
考慮圖象文化上的意義也非常重要。許多程序使用田園風(fēng)格的帶一面旗的郵箱(圖 6.21)來(lái)代表郵件功能。這原本是美國的圖標;其他國家/地區或文化的用戶(hù)也許不把它看作郵箱。
圖 6.21 代表信箱的圖標
在設計自己的圖標與圖象時(shí),應盡量使它們簡(jiǎn)單。具有多種顏色的復雜的圖片,作為 16×16 象素的工具欄圖標,或者在高分辨率的屏幕上顯示時(shí),都不能很好地適應。
選取字體
字體也是用戶(hù)界面的重要部分,因為它們常常給用戶(hù)傳遞重要的信息。需選取在不同的分辨率和不同類(lèi)型的顯示器上都能容易閱讀的字體。最好盡量堅持使用簡(jiǎn)單的無(wú)襯線(xiàn)字體或者襯線(xiàn)字體。通常手寫(xiě)字體或者其他裝飾性字體的打印效果比屏幕上的效果更好,而且字體越小讀起來(lái)越難。
除非計劃按應用程序來(lái)配置字體,否則應當堅持使用標準 windows 字體,如 arial、new times roman 或者 system。如果用戶(hù)的系統沒(méi)有包含指定的字體,系統會(huì )使用替代的字體,其結果可能與設想的完全不一樣。如果正在為國際讀者設計,需要調查在預想的語(yǔ)言里可用什么字體。還有,在為其他語(yǔ)言設計時(shí),需要考慮文本的擴展— 有些語(yǔ)言的文本串可以多占 50% 以上的空間。
還有,在選取字體時(shí),設計的一致性非常重要。大多數情況下,不應當在應用程序中使用兩種以上字體。太多的字體會(huì )使得應用程序看上去象罰款通知單。
各種顯示類(lèi)型的設計
microsoft windows 是與設備無(wú)關(guān)的-基于窗口的應用程序可以在許多不同顯示分辨率與顏色濃度的計算機中運行。同樣,用 visual basic 編寫(xiě)的應用程序也會(huì )在不同類(lèi)型的顯示器上運行,在設計應用程序時(shí)需要考慮到這一點(diǎn)。
設計與分辨率無(wú)關(guān)的窗體
缺省情況下,當改變屏幕分辨率時(shí),microsoft visual basic 不會(huì )改變窗體與控件的尺寸。這就意味著(zhù)在分辨率為 1024 x 768 的屏幕上設計的窗體,在分辨率為 640 x 480 的屏幕中運行時(shí)會(huì )伸出屏幕的邊界之外。如果想創(chuàng )建不管使用什么樣的屏幕分辨率都能有相同比例的窗體和控件,必須在最低的分辨率下設計窗體,或者將改變窗體的代碼添加到程序中去。
避免尺寸問(wèn)題的最簡(jiǎn)單的方法是在 640 x 480 的分辨率下設計窗體。如果更喜歡在高一些的分辨率下工作,仍需要考慮窗體在低一些的分辨率下將如何顯示。實(shí)現這一點(diǎn)的方法是用“form layout”窗口預覽窗體的大小和位置。您也可以使用“resolution guides”觀(guān)察在低分辨率時(shí)屏幕的哪些部分是可見(jiàn)的。要切換到“resolution guides”,可以在“form layout”窗口單擊鼠標右鍵,從彈出菜單上選擇“resolution guides”菜單項。
在運行時(shí),visual basic 根據設計時(shí)的位置來(lái)放置窗體。如果設計時(shí)在 1024 x 768 的分辨率上運行,并把窗體放到屏幕的右下角,則當它在比較低的分辨率下運行時(shí)該窗體可能看不見(jiàn)。為了避免這種情況的發(fā)生,在設計時(shí)可從“form layout”窗口的彈出菜單選擇“startup position”菜單項來(lái)設置窗體的啟動(dòng)位置。同樣,您也可以在運行時(shí)用下面的 form load 事件中的代碼來(lái)設置窗體的位置:
private sub form_load()
me.move 0, 0
end sub
若是設置窗體的 left 與 top 的屬性都為 0 也能有同樣的效果,但 move 方法只要一步就能完成。
visual basic 使用與設備無(wú)關(guān)的度量單位,緹,是用來(lái)計算尺寸與位置。screen 對象的兩個(gè)屬性 twipsperpixelx 與 twipsperpixely 可以用來(lái)確定運行時(shí)的顯示尺寸。應用這些屬性,可以編寫(xiě)代碼來(lái)調整窗體以及控件的尺寸與位置。
private sub setcontrols()
dim x as integer
dim y as integer
x = screen.twipsperpixelx
y = screen.twipsperpixely
select case x, y
case 15, 15
‘ 重新改變控件尺寸及移動(dòng)控件。
txtname.height = 200
txtname.width = 500
txtname.move 200, 200
’ 增加為其它分辨率編寫(xiě)的代碼。
…
end sub
也需要知道在設計時(shí) visual basic 自身窗口的位置。如果在高分辨率下把“工程”窗口放置到屏幕的右邊,那么會(huì )發(fā)現在低分辨率下打開(kāi)工程時(shí),它不再是可訪(fǎng)問(wèn)的了。
設計不同濃度的顏色
在設計應用程序時(shí),也需要考慮運行應用程序計算機可能的顏色顯示能力。有些計算機可以顯示 256 色或更多的顏色,而另一些只能顯示 16 種顏色。如果使用 256 色的調色板來(lái)設計窗體,那么在 16 色上顯示時(shí),抖動(dòng)(模仿無(wú)效顏色的一種方法)會(huì )使窗體上的一些元素消失。
為了避免這種情況,最好把應用程序使用的顏色局限于 windows 標準的 16 顏色。這些顏色由 visual basic 的顏色常數來(lái)表示(如 vbblack、vbblue 和 vbcyan 等等)。如果在應用程序中需要用 16 種以上的顏色,那么對于文本、按鈕以及其他界面元素仍然應當堅持用標準顏色。
可用性設計
任何應用程序的可用性基本上由用戶(hù)決定。界面設計是需多次反復的過(guò)程;在為應用程序設計界面時(shí),第一步就設計出非常完美的界面的情況非常少見(jiàn)。用戶(hù)參與設計過(guò)程越早,化的氣力越少,創(chuàng )建的界面越好、越可用。
什么是好的界面
設計用戶(hù)界面時(shí),開(kāi)始時(shí)最好是先看看 microsoft 或其他公司的一些賣(mài)得很好的應用程序。畢竟,界面很差的應用程序不會(huì )賣(mài)得很好。將會(huì )發(fā)現許多通用的東西,比如:工具欄、狀態(tài)條、工具提示、上下文菜單以及標記對話(huà)框。visual basic 具有把所有這些東西添加到應用程序中的能力,這并不偶然。
也可以憑借自己使用軟件的經(jīng)驗。想一想曾經(jīng)使用過(guò)的一些應用程序,哪些可以工作、哪些不可以、以及如何修改它。但要記住個(gè)人的喜好不等于用戶(hù)的喜好,必需把自己的意見(jiàn)與用戶(hù)的意見(jiàn)一致起來(lái)。
還要注意到大多數成功的應用程序都提供選擇來(lái)適應不同的用戶(hù)的偏愛(ài)。例如,microsoft windows“資源管理器”允許用戶(hù)通過(guò)菜單、鍵盤(pán)命令或者拖放來(lái)復制文件。提供選項會(huì )擴大應用程序的吸引力,至少應該使所有的功能都能被鼠標和鍵盤(pán)所訪(fǎng)問(wèn)。
windows 界面準則
windows 操作系統的主要的優(yōu)點(diǎn)就是為所有的應用程序提供了公用的界面。知道如何使用基于 windows 的應用程序的用戶(hù),很容易學(xué)會(huì )使用其他應用程序。而與已創(chuàng )建的界面準則相差太遠的應用程序不易讓人明了。
菜單就是這方面很好的例子—大多數基于 windows 的應用程序都遵循這樣的標準:“文件”菜單在最左邊,然后是“編輯”、“工具”等可選的菜單,最右邊是“幫助”菜單。如果說(shuō) documents 會(huì )比 file 更好,或者“幫助”菜單要放在最前,這就值得討論一下了。沒(méi)有任何事情阻止您這樣做,但這樣做會(huì )引起用戶(hù)的混淆,降低應用程序的可用性。每當在應用程序與其他程序之間切換時(shí),用戶(hù)都不得不停下來(lái)想一想。
子菜單的位置也很重要。用戶(hù)本期望在“編輯”菜單下找到“復制”、“剪切”與“粘貼”等子菜單,若將它們移到“文件”菜單下會(huì )引起用戶(hù)的混亂。不要偏離已經(jīng)創(chuàng )建的準則太遠,除非有很好的理由這樣做。
可用性的檢測
測試界面可用性的最好方法是在整個(gè)設計過(guò)程中請用戶(hù)參與。不論是正在設計大型的壓縮包應用程序,還是小型的有限使用的應用程序,設計的過(guò)程應當完全相同。使用已創(chuàng )建的設計準則,界面設計應從紙上開(kāi)始。
下一步是創(chuàng )建一個(gè)或者多個(gè)原型,在 visual basic 中設計窗體。還需要增加足夠的代碼來(lái)啟動(dòng)原型:顯示窗體、用示例數據填充列表框等等。然后準備可用性測試。
可用性測試可以是個(gè)不拘形式的過(guò)程:與用戶(hù)一道審查設計;也可以是在已創(chuàng )建的可用性實(shí)驗室中進(jìn)行的正式的過(guò)程。這兩種方法目的是一樣的:從用戶(hù)那兒了解哪兒設計得很好,哪兒還需要改進(jìn)的第一手材料。放開(kāi),讓用戶(hù)與應用程序在一起,然后觀(guān)察它們;這種方式比詢(xún)問(wèn)用戶(hù)更為有效。當用戶(hù)試圖完成一系列任務(wù)時(shí)讓他們表達其思考過(guò)程:“要想打開(kāi)新文檔,所以要在‘文件’菜單中找一找。”記下哪些地方的界面設計沒(méi)有反應他們的思考過(guò)程。與不同類(lèi)型的用戶(hù)一起測試,如果發(fā)現用戶(hù)完成某個(gè)特定的任務(wù)有困難,該任務(wù)可能需要多加關(guān)照。
下一步,復查一下記錄,考慮如何修改該界面使它更加可用。修改界面并再測試。一旦對應用程序可用性滿(mǎn)意,就準備開(kāi)始編碼。在開(kāi)發(fā)的過(guò)程中也需要不時(shí)地測試來(lái)確保對原型的設想是正確的。
功能的可發(fā)現性
可用性測試的關(guān)鍵的概念是可發(fā)現性。如果用戶(hù)不能發(fā)現如何使用某個(gè)功能(或者甚至不知道有此功能存在),則此功能很少有人去使用。例如,windows 3.1 的大多數用戶(hù)都從來(lái)不知道 alt 和 tab 的組合鍵可以用于在打開(kāi)的應用程序之間切換。界面中沒(méi)有任何地方可提供線(xiàn)索來(lái)幫助用戶(hù)發(fā)現這一功能。
為了測試功能的可發(fā)現性,不解釋如何做就要求用戶(hù)完成一個(gè)任務(wù)(例如,使用“窗體模板”創(chuàng )建新文檔)。如果他們不能完成這個(gè)任務(wù),或者嘗試了好多次,則此功能的可發(fā)現性還需要改進(jìn)。
聯(lián)系客服