VB編程基礎教程19–界面設計的基礎

       不必成為創(chuàng)建用戶界面的藝術家－大多數(shù)用戶界面設計的原則，與任意一門基礎藝術課中所講授的基礎設計的原則相同。構圖、顏色等的基本的設計原則，就象它們應用在紙張或油畫上一樣，也能很好地在一臺計算機的屏幕上應用。
雖然 visual basic 能通過簡單地將控件拖動并放置到窗體上而使得創(chuàng)建用戶界面非常容易，但是，在設計之前稍微計劃一下就能使應用程序的可用性有很大的改觀。可能須先在紙上畫出窗體開始設計，決定需要哪些控件，不同元素的相對重要性，以及控件之間的關系。
構圖：應用程序的觀感與感覺
      窗體的構圖或布局不僅影響它的美感，而且也極大地影響應用程序的可用性。構圖包括諸如控件的位置、元素的一致性、動感、空白空間的使用、以及設計的簡單性等因素。
控件的位置
     在大多數(shù)界面設計中，不是所有的元素都一樣重要。仔細地設計是很有必要的，以確保越是重要的元素越要很快地顯現(xiàn)給用戶。重要的或者頻繁訪問的元素應當放在顯著的位置上，而不太重要的元素就應當降級到不太顯著的位置上。
在大多數(shù)語言中我們習慣于在一頁之中從左到右、自上到下地閱讀。對于計算機屏幕也如此，大多數(shù)用戶的眼睛會首先注視屏幕的左上部位，所以最重要的元素應當放在屏幕的左上部位。例如，如果窗體上的信息與客戶有關，則它的名字字段應當顯示在它能最先被看到的地方。而按鈕，如“確定”或“下一個”，應當放置在屏幕的右下部位；用戶在未完成對窗體的操作之前，通常不會訪問這些按鈕。
把元素與控件分成組也很重要。盡量把信息按功能或關系進行邏輯地分組。因為他們的功能彼此相關，所以定位數(shù)據(jù)庫的按鈕應當被形象地分成一組，而不是分散在窗體的四處。對信息也是一樣，名字字段與地址通常分在一組，因為它們聯(lián)系緊密。在許多情況下，可以使用框架控件來幫助加強控件之間的聯(lián)系。
界面元素的一致性
      在用戶界面設計中，一致性是一種優(yōu)點。一致的外觀與感覺可以在應用程序中創(chuàng)造一種和諧，任何東西看上去都那么協(xié)調。如果界面缺乏一致性，則很可能引起混淆，并使應用程序看起來非常混亂、沒有條理、價值降低，甚至可能引起對應用程序可靠性的懷疑。
為了保持視覺上的一致性，在開始開發(fā)應用程序之前應先創(chuàng)建設計策略和類型約定。諸如控件的類型、控件的尺寸、分組的標準以及字體的選取等設計元素都應該在事先確定。可以創(chuàng)建設計樣板來幫助進行設計。
在 visual basic 中有大量的控件可供使用，這可能引起有人想使用所有的控件。為了避免這種引誘，選取能很好地適合特定應用程序的控件子集。雖然列表框、組合框、網格以及樹等控件都可用來表示信息列表，最好還是盡可能使用一種類型。
還有，盡量恰當?shù)厥褂每丶?，雖然 textbox 控件可以設置成只讀并用來顯示文本，但 label 控件通常更適用于該目的。在為控件設置屬性時請保持一致性，如果在一個地方為可編輯的文本使用白色背景，除非有很好的理由，否則不要在別的地方又使用灰色。
在應用程序中不同的窗體之間保持一致性對其可用性有非常重要的作用。如果在一個窗體上使用了灰色背景以及三維效果，而在另一個窗體上使用白色背景，則這兩個窗體就顯得毫不相干。選定一種類型并在整個應用程序保持一致，即使這意味著要重新設計某些功能。
動感：窗體與其功能匹配
         動感是對象功能的可見線索。雖然對這個術語也許還不熟悉，但動感的實例四處可見。自行車上的把手，手放在它的上面，動感會將把手用手扣緊這件事顯現(xiàn)出來。按下按鈕、旋轉旋鈕和點亮電燈的開關等都能進行動感表示— 一看到它們就可以看出其用處。
用戶界面也使用動感。例如，用在命令按鈕上的三維立體效果使得他們看上去象是被按下去的。如果設計平面邊框的命令按鈕的話，就會失去這種動感，因而不能清楚地告訴用戶它是一個命令按鈕。在有些情況下，平面的按鈕也許是適合的，比如游戲或者多媒體應用程序；只要在整個應用程序中保持一致就很好。
文本框也提供了一種動感，用戶可以期望帶有邊框和白色背景的框，框中包含可編輯的文本。顯示不帶邊框的文本框 (borderstyle = 0) 也有可能，這使它看起來象一個標簽，并且不能明顯地提示用戶它是可編輯的。
空白空間的使用
       在用戶界面中使用空白空間有助于突出元素和改善可用性?？瞻卓臻g不必非得是白色的－它被認為是窗體控件之間以及控件四周的空白區(qū)域。一個窗體上有太多的控件會導致界面雜亂無章，使得尋找一個字段或者控件非常困難。在設計中需要插入空白空間來突出設計元素。
      各控件之間一致的間隔以及垂直與水平方向元素的對齊也可以使設計更可用。就象雜志中的文本那樣，安排得行列整齊、行距一致，整齊的界面也會使其容易閱讀。
      visual basic 提供了幾個工具，使得控件的間距、排列和尺寸的調整非常容易。“排列”、“按相同大小制作”、“水平間距”、“垂直間距”和“在窗體中央”等命令都可以在“格式”菜單中找到。
保持界面的簡明
       界面設計最重要的原則也許就是簡單化。對于應用程序而言，如果界面看上去很難，則可能程序本身也很難。稍稍深入考慮一下便有助于創(chuàng)建看上去（實際上也是）用起來都很簡單的界面。從美學的角度來講，整潔、簡單明了的設計常常更可取。
在界面設計中，一個普遍易犯的錯誤就是力圖用界面來模仿真實世界的對象。例如，想象一下要求創(chuàng)建完整的保險單的應用程序。很自然的反應就是在屏幕上設計完全仿照保險單的界面。這就做會出現(xiàn)幾個問題：保險單的形狀與尺寸和屏幕上的有很大不同，要非常完善地復制這樣的表格會將其限制在文本框與復選框中，而對用戶并沒有真正的好處。
最好是設計出自己的、也能提供原始保險單打印副本（帶打印預覽）的界面。通過從原始保險單中創(chuàng)建字段的邏輯組，并使用有標簽的界面或幾個鏈接的窗體，就可以不要求滾動屏幕而顯示所有的信息。也可以使用附加的控件，比如帶有選取預裝入的列表框，這些控件可以減少打字工作量。
        也可以取出不常用的函數(shù)并把它們移到它們自己的窗體中去，來簡化許多應用程序。提供缺省有時也可以簡化應用程序；如果十個用戶中有九個選取加粗的文本，就把文本粗體設為缺省值，而不要叫用戶每次都選取一遍（不要忘記提供一個選項可以覆蓋該缺省值）。向導也有助于簡化復雜的或不常用的任務。
簡化與否最好的檢驗就是在應用中觀察應用程序。如果有代表性的用戶沒有聯(lián)機幫助就不能立即完成想要完成的任務，那么就需要重新考慮設計了。
使用顏色與圖象
       在界面上使用顏色可以增加視覺上的感染力，但是濫用的現(xiàn)象也時有發(fā)生。許多顯示器能夠顯示幾百萬種顏色，這很容易使人要全部使用它們。如果在開始設計時沒有仔細地考慮，顏色也會象其他基本設計原則一樣，出現(xiàn)許多問題。
每個人對顏色的喜愛有很大的不同，用戶的品味也會各不相同。顏色能夠引發(fā)強烈的情感，如果正在設計針對全球讀者的程序，那么某些顏色可能有文化上的重大意義。一般說來，最好保守傳統(tǒng)，采用一些柔和的、更中性化的顏色。
當然，預期的讀者以及試圖傳達的語氣與情緒也會影響對顏色的選取。明亮的紅色、綠色和黃色適用于小孩子使用的應用程序，但是在銀行應用程序中它很難帶來財務責任心的印象。
少量明亮色彩可以有效地突出或者吸引人們對重要區(qū)域的注意。作為經驗之談，應當盡量限制應用程序所用顏色的種類，而且色調也應該保持一致。如果可能的話，最好堅持標準的 16 色的調色板；在 16 色顯示器上觀看時，抖動會使得其他一些顏色顯示不出來。
使用顏色時另一個需要考慮的問題就是色盲。有一些人不能分辨不同的基色（如紅色與綠色）組合之間的差別。對于有這種情況的人，綠色背景上的紅色文本就會看不見。
圖象和圖標
        圖片與圖標的使用也可以增加應用程序的視覺上的趣味，但是，細心的設計也是必不可少的。不用文本，圖象就可以形象地傳達信息，但常常不同的人對圖象的理解也不一樣。
帶有表示各種功能的圖標的工具欄，它是一種很有用的界面設備，但如果不能很容易地識別圖標所表示的功能，反而會事與愿違。在設計工具欄圖標時，應查看一下其它的應用程序以了解已經創(chuàng)建了什么樣的標準。例如，許多應用程序用一張角上有卷邊的紙來表示“新建文件”圖標。也許還有更好的比喻來表示這一功能，但改用其它的表示方法會引起用戶的混淆。
考慮圖象文化上的意義也非常重要。許多程序使用田園風格的帶一面旗的郵箱（圖 6.21）來代表郵件功能。這原本是美國的圖標；其他國家/地區(qū)或文化的用戶也許不把它看作郵箱。
圖 6.21 代表信箱的圖標

         在設計自己的圖標與圖象時，應盡量使它們簡單。具有多種顏色的復雜的圖片，作為 16×16 象素的工具欄圖標，或者在高分辨率的屏幕上顯示時，都不能很好地適應。
選取字體
        字體也是用戶界面的重要部分，因為它們常常給用戶傳遞重要的信息。需選取在不同的分辨率和不同類型的顯示器上都能容易閱讀的字體。最好盡量堅持使用簡單的無襯線字體或者襯線字體。通常手寫字體或者其他裝飾性字體的打印效果比屏幕上的效果更好，而且字體越小讀起來越難。
除非計劃按應用程序來配置字體，否則應當堅持使用標準 windows 字體，如 arial、new times roman 或者 system。如果用戶的系統(tǒng)沒有包含指定的字體，系統(tǒng)會使用替代的字體，其結果可能與設想的完全不一樣。如果正在為國際讀者設計，需要調查在預想的語言里可用什么字體。還有，在為其他語言設計時，需要考慮文本的擴展— 有些語言的文本串可以多占 50％ 以上的空間。
還有，在選取字體時，設計的一致性非常重要。大多數(shù)情況下，不應當在應用程序中使用兩種以上字體。太多的字體會使得應用程序看上去象罰款通知單。



各種顯示類型的設計

        microsoft windows 是與設備無關的－基于窗口的應用程序可以在許多不同顯示分辨率與顏色濃度的計算機中運行。同樣，用 visual basic 編寫的應用程序也會在不同類型的顯示器上運行，在設計應用程序時需要考慮到這一點。
設計與分辨率無關的窗體
缺省情況下，當改變屏幕分辨率時，microsoft visual basic 不會改變窗體與控件的尺寸。這就意味著在分辨率為 1024 x 768 的屏幕上設計的窗體，在分辨率為 640 x 480 的屏幕中運行時會伸出屏幕的邊界之外。如果想創(chuàng)建不管使用什么樣的屏幕分辨率都能有相同比例的窗體和控件，必須在最低的分辨率下設計窗體，或者將改變窗體的代碼添加到程序中去。
避免尺寸問題的最簡單的方法是在 640 x 480 的分辨率下設計窗體。如果更喜歡在高一些的分辨率下工作，仍需要考慮窗體在低一些的分辨率下將如何顯示。實現(xiàn)這一點的方法是用“form layout”窗口預覽窗體的大小和位置。您也可以使用“resolution guides”觀察在低分辨率時屏幕的哪些部分是可見的。要切換到“resolution guides”，可以在“form layout”窗口單擊鼠標右鍵，從彈出菜單上選擇“resolution guides”菜單項。
         在運行時，visual basic 根據(jù)設計時的位置來放置窗體。如果設計時在 1024 x 768 的分辨率上運行，并把窗體放到屏幕的右下角，則當它在比較低的分辨率下運行時該窗體可能看不見。為了避免這種情況的發(fā)生，在設計時可從“form layout”窗口的彈出菜單選擇“startup position”菜單項來設置窗體的啟動位置。同樣，您也可以在運行時用下面的 form load 事件中的代碼來設置窗體的位置：
private sub form_load()
   me.move 0, 0
end sub
若是設置窗體的 left 與 top 的屬性都為 0 也能有同樣的效果，但 move 方法只要一步就能完成。
visual basic 使用與設備無關的度量單位，緹，是用來計算尺寸與位置。screen 對象的兩個屬性 twipsperpixelx 與 twipsperpixely 可以用來確定運行時的顯示尺寸。應用這些屬性，可以編寫代碼來調整窗體以及控件的尺寸與位置。
private sub setcontrols()
   dim x as integer
   dim y as integer
   x = screen.twipsperpixelx
   y = screen.twipsperpixely
   select case x, y
      case 15, 15
         ‘   重新改變控件尺寸及移動控件。
         txtname.height = 200
         txtname.width = 500
         txtname.move 200, 200
      ’   增加為其它分辨率編寫的代碼。
      …
end sub
       也需要知道在設計時 visual basic 自身窗口的位置。如果在高分辨率下把“工程”窗口放置到屏幕的右邊，那么會發(fā)現(xiàn)在低分辨率下打開工程時，它不再是可訪問的了。
設計不同濃度的顏色
         在設計應用程序時，也需要考慮運行應用程序計算機可能的顏色顯示能力。有些計算機可以顯示 256 色或更多的顏色，而另一些只能顯示 16 種顏色。如果使用 256 色的調色板來設計窗體，那么在 16 色上顯示時，抖動（模仿無效顏色的一種方法）會使窗體上的一些元素消失。
          為了避免這種情況，最好把應用程序使用的顏色局限于 windows 標準的 16 顏色。這些顏色由 visual basic 的顏色常數(shù)來表示（如 vbblack、vbblue 和 vbcyan 等等）。如果在應用程序中需要用 16 種以上的顏色，那么對于文本、按鈕以及其他界面元素仍然應當堅持用標準顏色。



可用性設計

        任何應用程序的可用性基本上由用戶決定。界面設計是需多次反復的過程；在為應用程序設計界面時，第一步就設計出非常完美的界面的情況非常少見。用戶參與設計過程越早，化的氣力越少，創(chuàng)建的界面越好、越可用。
什么是好的界面
        設計用戶界面時，開始時最好是先看看 microsoft 或其他公司的一些賣得很好的應用程序。畢竟，界面很差的應用程序不會賣得很好。將會發(fā)現(xiàn)許多通用的東西，比如：工具欄、狀態(tài)條、工具提示、上下文菜單以及標記對話框。visual basic 具有把所有這些東西添加到應用程序中的能力，這并不偶然。
          也可以憑借自己使用軟件的經驗。想一想曾經使用過的一些應用程序，哪些可以工作、哪些不可以、以及如何修改它。但要記住個人的喜好不等于用戶的喜好，必需把自己的意見與用戶的意見一致起來。
還要注意到大多數(shù)成功的應用程序都提供選擇來適應不同的用戶的偏愛。例如，microsoft windows“資源管理器”允許用戶通過菜單、鍵盤命令或者拖放來復制文件。提供選項會擴大應用程序的吸引力，至少應該使所有的功能都能被鼠標和鍵盤所訪問。
windows 界面準則
        windows 操作系統(tǒng)的主要的優(yōu)點就是為所有的應用程序提供了公用的界面。知道如何使用基于 windows 的應用程序的用戶，很容易學會使用其他應用程序。而與已創(chuàng)建的界面準則相差太遠的應用程序不易讓人明了。
菜單就是這方面很好的例子—大多數(shù)基于 windows 的應用程序都遵循這樣的標準：“文件”菜單在最左邊，然后是“編輯”、“工具”等可選的菜單，最右邊是“幫助”菜單。如果說 documents 會比 file 更好，或者“幫助”菜單要放在最前，這就值得討論一下了。沒有任何事情阻止您這樣做，但這樣做會引起用戶的混淆，降低應用程序的可用性。每當在應用程序與其他程序之間切換時，用戶都不得不停下來想一想。
          子菜單的位置也很重要。用戶本期望在“編輯”菜單下找到“復制”、“剪切”與“粘貼”等子菜單，若將它們移到“文件”菜單下會引起用戶的混亂。不要偏離已經創(chuàng)建的準則太遠，除非有很好的理由這樣做。
可用性的檢測
          測試界面可用性的最好方法是在整個設計過程中請用戶參與。不論是正在設計大型的壓縮包應用程序，還是小型的有限使用的應用程序，設計的過程應當完全相同。使用已創(chuàng)建的設計準則，界面設計應從紙上開始。
下一步是創(chuàng)建一個或者多個原型，在 visual basic 中設計窗體。還需要增加足夠的代碼來啟動原型：顯示窗體、用示例數(shù)據(jù)填充列表框等等。然后準備可用性測試。
          可用性測試可以是個不拘形式的過程：與用戶一道審查設計；也可以是在已創(chuàng)建的可用性實驗室中進行的正式的過程。這兩種方法目的是一樣的：從用戶那兒了解哪兒設計得很好，哪兒還需要改進的第一手材料。放開，讓用戶與應用程序在一起，然后觀察它們；這種方式比詢問用戶更為有效。當用戶試圖完成一系列任務時讓他們表達其思考過程：“要想打開新文檔，所以要在‘文件’菜單中找一找。”記下哪些地方的界面設計沒有反應他們的思考過程。與不同類型的用戶一起測試，如果發(fā)現(xiàn)用戶完成某個特定的任務有困難，該任務可能需要多加關照。
         下一步，復查一下記錄，考慮如何修改該界面使它更加可用。修改界面并再測試。一旦對應用程序可用性滿意，就準備開始編碼。在開發(fā)的過程中也需要不時地測試來確保對原型的設想是正確的。
功能的可發(fā)現(xiàn)性
           可用性測試的關鍵的概念是可發(fā)現(xiàn)性。如果用戶不能發(fā)現(xiàn)如何使用某個功能（或者甚至不知道有此功能存在），則此功能很少有人去使用。例如，windows 3.1 的大多數(shù)用戶都從來不知道 alt 和 tab 的組合鍵可以用于在打開的應用程序之間切換。界面中沒有任何地方可提供線索來幫助用戶發(fā)現(xiàn)這一功能。
為了測試功能的可發(fā)現(xiàn)性，不解釋如何做就要求用戶完成一個任務（例如，使用“窗體模板”創(chuàng)建新文檔）。如果他們不能完成這個任務，或者嘗試了好多次，則此功能的可發(fā)現(xiàn)性還需要改進。