俗話說：“人靠衣裝，佛靠金裝”，應(yīng)用程序的界面是提供給使用者的第一印象，直接影響到應(yīng)用程序的用戶體驗(yàn)。因此，有效、合理的界面能夠?yàn)槌绦蛟錾簧佟?/span>LabVIEW提供了豐富的界面控件供開發(fā)者選擇，有經(jīng)驗(yàn)的程序員往往能夠利用這些控件做出令人稱贊的界面效果。

在《LabVIEW Development Guidelines》（下載）和《The LabVIEW Style book》（介紹）書中都有專門的章節(jié)來論述LabVIEW程序界面設(shè)計(jì)規(guī)范和方法。本文主要從應(yīng)用應(yīng)用開發(fā)的角度描述一些通用的界面設(shè)計(jì)的方法。

1.1       控件的分類和排列

在LabVIEW中，控件通常被籠統(tǒng)地分為控制型控件（Control）和顯示型控件（Indicator）。而對(duì)某一個(gè)具體的應(yīng)用而言，更需要把Control和Indicator進(jìn)行細(xì)分，使得具有同樣功能的控件排放在一起，甚至組成若干個(gè)Group組。

LabVIEW提供了一系列工具供程序員排列和分布控件的位置以及調(diào)整控件的大小，如圖 1所示。圖(a)是排列對(duì)齊工具，其中的圖標(biāo)可以很清楚地知道各個(gè)按鈕的作用。使用Ctrl+Shift+A可以重復(fù)上一次的排列方式。圖(b)是位置分布工具，可以快速地分布各個(gè)控件之間的位置。圖(c)是大小調(diào)整工具，可以快速地調(diào)整多個(gè)不同控件的大?。ㄗ⒁猓翰糠挚丶拇笮∈遣辉试S被調(diào)整的）。圖(d)是組合和疊放次序工具，Group表示把當(dāng)前選擇的控件組合起來形成一個(gè)整體；Ungroup與Group相反，表示分散已經(jīng)整合起來的各個(gè)控件；Lock表示鎖定當(dāng)前選擇的控件，此時(shí)控件將無法被編輯（包括移動(dòng)控件的位置，調(diào)整控件的大小等）；Unlock是解鎖指令；Move Forward、Move Backward、Move to Front和Move to Back表示修改當(dāng)前選擇控件的排放次序。

圖 1 控件排列和分布工具

圖 2是某個(gè)測(cè)試界面的控件擺放實(shí)例，盡管這些控件都是Indicator控件，但是仍然根據(jù)顯示功能和內(nèi)容的不同將控件進(jìn)行了分類。如果將其中的信息不經(jīng)過任何分類而直接擺放在一起，則沒有很好的條理性和層次性。

圖 2 控件擺放實(shí)例

在實(shí)際應(yīng)用中，需要首先將Control和Indicator分開擺放；然后在Control和Indicator內(nèi)部對(duì)控件按照功能進(jìn)行分類，不同的類別之間以顯著的標(biāo)志進(jìn)行區(qū)分；最后要合理安排控件的位置和分布，確保整個(gè)界面勻稱和整潔。

1.2       顏色的使用

顏色在程序中的應(yīng)用有多種功能，除了能夠確保界面的豐富和完善之外，還能夠重點(diǎn)區(qū)分不同控件的功能，強(qiáng)調(diào)某些控件的作用和位置。LabVIEW提供了傳統(tǒng)的取色工具和著色工具，如圖 3所示。取色工具是獲取LabVIEW開發(fā)環(huán)境中某個(gè)點(diǎn)的顏色值（包括前景色和背景色），并將獲取的顏色設(shè)置為當(dāng)前的顏色。著色工具是將當(dāng)前的顏色值（包括前景色和背景色）設(shè)置到某個(gè)控件上。

圖 3 取色工具和著色工具

【小技巧】

(1)     在使用著色工具時(shí)，按住Ctrl鍵可以將工具暫時(shí)切換成取色工具，釋放Ctrl鍵后將返回著色工具。

(2)     在使用著色工具時(shí)，使用“空格”鍵可以快速地在前景色和背景色之間切換。

在著色工具中，右上角的“T”表示透明色，可以使用鼠標(biāo)單擊該圖標(biāo)設(shè)定當(dāng)前的顏色為透明色，如圖 4所示。此外，LabVIEW還提供了一系列預(yù)定義的標(biāo)準(zhǔn)顏色供程序員選擇，其中System的第一個(gè)顏色是Windows的標(biāo)準(zhǔn)界面顏色。

圖 4 著色工具面板

LabVIEW允許設(shè)置一個(gè)VI窗口的透明色，在VI Property對(duì)話框中選擇Windows Appearance頁，單擊Customize…按鈕將彈出如圖 5所示的對(duì)話框。勾選“Windows runs transparently”選項(xiàng)，并設(shè)置透明度（0%~100%）。

圖 5 Customize Windows Appearance對(duì)話框

1.3       LabVIEW控件

在LabVIEW中有3種不同外觀的控件可供選擇，分別是：Modern、System和Classic。其中Modern控件是NI專門為LabVIEW設(shè)計(jì)的具有3D效果的控件，它能夠確保在不同的操作系統(tǒng)下顯示始終是一樣的；而System是采用系統(tǒng)控件，它的外觀與操作系統(tǒng)有關(guān)，不同的操作系統(tǒng)下控件的顯示外觀有所不同。大多數(shù)的程序員似乎更愿意選擇System控件，理由是它可以讓程序看起來不那么LabVIEW化。但是LabVIEW并不允許程序員任意自定義System控件的外觀，這同時(shí)也限制了System控件的使用。

LabVIEW允許程序員在現(xiàn)有控件的基礎(chǔ)上重新定義控件的外觀（Type Def.和Strict Type Def.技術(shù)）。圖 6是使用控件自定義方法重新設(shè)計(jì)的Tank控件，程序員可以修改控件的各種顯示表達(dá)方式，但是卻不能修改控件的功能（可以使用XControl技術(shù)）。

圖 6 Tank控件

1.4       插入圖片和裝飾

程序中必要的圖片不僅能夠給用戶直觀的視覺感受，還能夠描述程序的作用（當(dāng)然，不能使用過量的圖片）。最簡單的插入圖片的方式是：將準(zhǔn)備好的圖片直接拖入到VI的前面板中或者使用Ctrl +C/V粘貼到前面板中。當(dāng)然，還可以使用Picture控件將圖片動(dòng)態(tài)地載入到Picture控件中。

此外，LabVIEW還提供了一種自定義程序背景圖的方式。新建一個(gè)VI，在VI的垂直滾動(dòng)條或水平滾動(dòng)條上右擊將彈出如圖 7所示的快捷菜單。

圖 7 VI前面板快捷菜單

選擇Properties，將彈出如圖 8所示的Pane Properties對(duì)話框。在左下方的Background區(qū)域中內(nèi)置了部分的圖片供程序員選擇，也可以使用Browse…按鈕導(dǎo)入外部自定義的圖片。

【注意】

如果需要導(dǎo)入不規(guī)則的圖片，可以將圖片的部分背景色設(shè)置為透明并保存為png的格式。

圖 8 Pane Properties對(duì)話框

在Controls>>Modern>>Decorations和Controls>>System中有一些裝飾用控件，如圖 9所示，程序員可以使用這些裝飾控件為應(yīng)用程序增色。圖 10就是采用System控件中的System Recessed Frame和System Label控件設(shè)計(jì)的控件組合。

圖 9 裝飾控件選板

圖 10 裝飾控件實(shí)例

1.5       界面分隔和自定義窗口大小

控件的顯示效果與監(jiān)視器是密切相關(guān)的，因此在程序設(shè)計(jì)時(shí)需要考慮目標(biāo)監(jiān)視器的顏色、分辨率等因素，并明確運(yùn)行該應(yīng)用程序所需要的最低硬件要求。在很多的論壇中經(jīng)常會(huì)看到問題：如何才能確保應(yīng)用程序的界面在更高的分辨率上運(yùn)行時(shí)不會(huì)變形？這實(shí)際上是一個(gè)界面設(shè)計(jì)問題，而思考如何解決它卻是應(yīng)該從程序設(shè)計(jì)時(shí)就開始，而不是等到程序設(shè)計(jì)完成后再探討解決方案。LabVIEW中并沒有提供一種有效的方式或工具來解決這個(gè)問題，但是我個(gè)人認(rèn)為這與LabVIEW無關(guān)，更應(yīng)該把它歸納為通用的程序設(shè)計(jì)問題，解決它需要比較良好的界面設(shè)計(jì)、布局和分配作為前提。

事實(shí)上，程序往往會(huì)規(guī)定一個(gè)最低的運(yùn)行分辨率，在此分辨率以上的顯示器上程序界面應(yīng)該能夠正確地被顯示出來。而在LabVIEW中，控件往往在高分辨率的顯示器上被拉大或者留有部分的空白，這使得整個(gè)界面完全扭曲了程序員最初的設(shè)計(jì)。

為了能夠更加清晰問題的本質(zhì)和尋求解決問題的方案，有必要對(duì)LabVIEW的前面板界面進(jìn)行確認(rèn)和分析。如圖 11所示，一個(gè)VI的窗口由幾個(gè)部分組成：整個(gè)紅色的區(qū)域稱為一個(gè)窗口（Windows），而藍(lán)色的區(qū)域稱為一個(gè)面板（Panel）。從圖中可以看出，窗口中的標(biāo)題欄、菜單欄和工具欄并不屬于面板。

圖 11 VI窗口區(qū)域定義

LabVIEW允許程序員將面板（Panel）劃分為若干個(gè)獨(dú)立的窗格（Pane）。使用Controls>>Modern>>Containers選板中的Horizontal Splitter Bar和Vertical Splitter Bar可以將VI的面板進(jìn)行任意的劃分，如圖 12所示。

圖 12 Containers選板

劃分之后的VI前面板如圖 13所示，可以看出圖中的Panel（藍(lán)色區(qū)域）已經(jīng)被劃分為了5個(gè)窗格Pane，每一個(gè)綠色區(qū)域都被稱為一個(gè)Pane。當(dāng)Panel上只有一個(gè)Pane時(shí)，Panel與Pane會(huì)重合。因此，窗口（Windows）包含整個(gè)界面，而1個(gè)窗口只有1個(gè)面板（Panel），該面板能夠被劃分為若干個(gè)獨(dú)立的窗格（Pane）。每個(gè)Pane都包含其特有的屬性和滾動(dòng)條，而Pane之間使用Splitter進(jìn)行分隔。

圖 13 劃分之后的VI窗口定義

在Splitter上右擊可以設(shè)置Splitter的相關(guān)屬性，如圖 14所示。Locked屬性可以設(shè)置Splitter是否被鎖定，被鎖定的Splitter的位置將無法被移動(dòng)。與控件類似，LabVIEW提供了3種Splitter樣式：Modern、System和Classic。程序員可以使用著色工具設(shè)置Modern和Classic Splitter的顏色，使用手型工具調(diào)整Splitter的位置以及使用選擇工具調(diào)整Splitter的大小。

圖 14 Splitter右鍵快捷菜單

現(xiàn)在再回頭看本小節(jié)開頭提到的分辨率問題，從常識(shí)上判斷，當(dāng)程序從低分辨率界面向高分辨率界面轉(zhuǎn)移時(shí)，可以有如下的解決方案：

1、  界面上的控件變大；

2、  界面控件的位置重新分布，以平衡空白位；

3、  界面控件的相對(duì)位置不動(dòng)，留出適當(dāng)?shù)目瞻孜弧?/font>

在實(shí)際操作中，上述的3種方式似乎很難實(shí)現(xiàn)以滿足界面大小變化帶來的自適應(yīng)問題。比如第3種方式看似簡單，卻同樣存在著疑問：應(yīng)該在哪里留出空白位，是現(xiàn)有控件的左邊？右邊？上邊？還是下邊？打開一些標(biāo)準(zhǔn)的Windows界面程序，不難看出，往往程序中結(jié)合使用了上面的3種方式。部分的控件位置和大小不變，留出適當(dāng)?shù)目瞻孜唤o其它的控件，如Listbox、Graph、Tree等。因此這類控件顯示的信息較多，并且外觀單一，改變它們的大小對(duì)整個(gè)界面的布局不會(huì)產(chǎn)生影響。

因此，在程序開始設(shè)計(jì)的初級(jí)階段就有必要設(shè)計(jì)界面的大致控件布局和分布，以明確界面在不同分辨率下的調(diào)整方式。如果界面控件過多，則可以通過其它的方式進(jìn)行規(guī)避（比如對(duì)話框等），確保界面的大小調(diào)整不會(huì)影響到控件布局的變化。

【應(yīng)用（下載）】

圖 15 劃分Panel

其次，在狀態(tài)欄的四個(gè)區(qū)域中分別加入一個(gè)String型Indicator，并且勾選Indicator的右鍵快捷菜單選項(xiàng)：Fit Control to Pane，也就是說當(dāng)Pane變化的時(shí)候String的大小也隨之發(fā)生改變以確保String控件能夠填充整個(gè)Pane，如圖 16所示。

圖 16 在狀態(tài)欄中加入Indicator控件

單擊窗口的最大化按鈕，可以看出整個(gè)狀態(tài)欄的高度變大而最右側(cè)子狀態(tài)欄的寬度變大，如圖 17所示。

圖 17 最大化之后的狀態(tài)欄

事實(shí)上，當(dāng)窗口（或者Pane）大小發(fā)生變化時(shí)往往不希望狀態(tài)欄的高度發(fā)生改變，而只需要改變其中某一個(gè)Pane的長度就可以了。單擊“還原”按鈕，使窗口回到圖 16所示的狀態(tài)。在底部的藍(lán)色Splitter上右擊，選擇快捷菜單中的Splitter Stick Bottom選項(xiàng)，如圖 18所示。該選項(xiàng)表示在Splitter變化時(shí)始終保持底部的相對(duì)位置不變。

圖 18 Splitter右鍵快捷菜單

再次最大化窗口，此時(shí)狀態(tài)欄的高度將保持不變，而最右側(cè)的子狀態(tài)欄的寬度將變大，如圖 19所示。

圖 19 最大化之后的狀態(tài)欄

如果希望在VI窗口改變時(shí)，修改第2個(gè)子狀態(tài)欄的寬度，而其它的子狀態(tài)欄寬度保持不變，應(yīng)該如何設(shè)置呢？單擊“還原”按鈕，使窗口回到圖 16所示的狀態(tài)。如圖 20所示，單擊圖中所示的紅色Splitter，勾選Splitter Sticks Right，此時(shí)再次改變窗口的大小將會(huì)改變第2個(gè)子狀態(tài)欄的寬度。

圖 20 設(shè)置Splitter屬性

同理，設(shè)計(jì)工具欄如所示。圖中使用的按鈕都是LabVIEW自帶的按鈕樣式，需要使用Type Def.自定義控件加以替換。程序?qū)⒐ぞ邫诜譃?/span>2個(gè)部分：操作按鈕部分和幫助部分。而對(duì)比圖 19可以看出，將最上層的Splitter顏色設(shè)置為與Pane的底色一致，這樣可以隱藏Splitter。

圖 21 設(shè)置Splitter屬性

LabVIEW運(yùn)行對(duì)每一個(gè)Pane設(shè)置不同的背景色，確保Pane的獨(dú)立性。如圖 22所示，在界面上放置不同的控件以豐富界面顯示效果，勾選Tab控件和Graph控件的右鍵快捷屬性：Fit Control to Pane。因?yàn)?/span>Graph控件大小的改變對(duì)整個(gè)界面的布局沒有影響，因此將界面的Splitter屬性設(shè)置為當(dāng)Pane變化時(shí)修改Graph的大小就可以了。

圖 22 VI前面板

如前所述，對(duì)任一個(gè)程序而言都有一個(gè)最低的分辨率要求，同時(shí)也存在著一個(gè)最小的界面要求，確保在最小的界面上能夠?qū)⑺锌丶暾@示出來。調(diào)整整個(gè)VI前面板窗口的大小，確保所有的控件均能夠完整顯示。按下Ctrl+I鍵打開VI Properties屬性面板，選擇Windows Size頁，如圖 23所示。單擊“Set to Current Panel Size”，單擊OK按鈕。

圖 23 Windows Size屬性頁

再次改變VI的前面板大小，可以看出整個(gè)界面的布局并不受Panel大小的影響，能夠正常顯示。因此，界面的分辨率自適應(yīng)問題的解決并不是一蹴而就的，而是需要在程序界面設(shè)計(jì)階段就加以考慮和布局的。

Ø  在程序可接受的最低分辨率的顯示器上開發(fā)；

Ø  劃分Panel的區(qū)域，并且明確各個(gè)區(qū)域的功能；

Ø  盡量至少選擇一種大小可伸縮的控件（ListBox、Tab、Multicolumn Listbox、Table、Tree、Chart、Graph、Picture、Sub Panel等）；

Ø  盡可能地使用Splitter劃分不同的區(qū)域，對(duì)部分Splitter而言可以將其背景色設(shè)置為與Pane的背景色一致以隱藏Splitter；

Ø  設(shè)置Splitter的屬性，明確Splitter的變化方式；

Ø  設(shè)置Pane的屬性（顏色、是否顯示滾動(dòng)條等）；

Ø  設(shè)置Panel的最小顯示大??；

Ø  結(jié)合Type Def.和Strict Type Def.控件，完善控件的擺放和顯示效果；

1.6       程序中字體的使用

LabVIEW會(huì)自動(dòng)調(diào)用系統(tǒng)中已經(jīng)安裝的字體，因此不同的計(jì)算機(jī)上運(yùn)行的LabVIEW程序會(huì)因?yàn)榘惭b的字體庫不同而不同。圖 24列出了LabVIEW可以選擇的部分字體樣式（如顏色、加粗、斜體等），可以使用< Ctrl > + < = >和< Ctrl > + < - >快捷鍵增加和減小當(dāng)前選擇項(xiàng)的字體大小。

圖 24 LabVIEW中的字體

如果字體前面加“@”則表示將文字逆時(shí)針旋轉(zhuǎn)90°，圖 25展示了這兩種字體的顯示差別。

圖 25 宋體和@宋體

為了避免不同的操作系統(tǒng)給字體顯示帶來的影響，LabVIEW提供了Application Font、System Font和Dialog Font三種預(yù)定義的字體。它們并不表示某一種確定的字體，對(duì)不同的操作系統(tǒng)所表示的含義不同，這樣可以避免某一種字體缺失導(dǎo)致的應(yīng)用程序界面無法正確顯示的問題。此外，LabVIEW也提供了一種方式來人為地指定三種預(yù)定義的字體代表的具體含義。選擇菜單欄的Tools>>Options菜單項(xiàng)，選擇Fonts頁，如圖 26所示。單擊“Font Style…”按鈕，可以顯式地指定Application Font、System Font和Dialog Font所代表的字體名稱和大小。

圖 26 Options_Fonts屬性設(shè)置

在默認(rèn)下，LabVIEW會(huì)自動(dòng)設(shè)置界面的字體為Application Font、System Font和Dialog Font，因?yàn)檫@可以避免應(yīng)用程序移植所導(dǎo)致的字體缺失。但是同時(shí)也會(huì)帶來分辨率的問題，因?yàn)椴煌南到y(tǒng)所表示的字體樣式和大小都不相同，因此不同分辨率的監(jiān)視器顯示界面的字體時(shí)會(huì)發(fā)生“變形”。

為了解決這二者的矛盾以及帶來的顯示問題，可以將目標(biāo)計(jì)算機(jī)上的Application Font、System Font和Dialog Font字體與開發(fā)計(jì)算機(jī)上的字體保持一致。

1、  盡量使用通用的字體顯示。如中文使用宋體，英文使用Tahoma，字號(hào)使用13號(hào)。

2、  確保目標(biāo)計(jì)算機(jī)上的LabVIEW Runtime將Application Font、System Font和Dialog Font字體與開發(fā)計(jì)算機(jī)上的字體所代表的含義保持一致。

第1點(diǎn)需要在程序設(shè)計(jì)時(shí)注意，而第2點(diǎn)可以通過程序自動(dòng)指定。如前所述，LabVIEW允許手動(dòng)指定預(yù)定義字體的實(shí)際含義，這這些設(shè)置被保存在LabVIEW安裝目錄下的<…\National Instruments\LabVIEW 8.X\LabVIEW.ini>文件中。使用記事本打開LabVIEW.ini文件，找到如下的三行，如圖 27所示。也就是說LabVIEW通過這3行來決定Application Font、System Font和Dialog Font字體表示的具體含義。

appFont="Tahoma" 13

dialogFont="Tahoma" 13

systemFont="Tahoma" 13

圖 27 LabVIEW.ini

在生成任意一個(gè)exe時(shí)，LabVIEW會(huì)在exe文件的相同目錄中自動(dòng)生成一個(gè)與exe同名的ini文件。只需要在該ini文件中加入上述3行代碼，則LabVIEW Runtime會(huì)自動(dòng)調(diào)用相應(yīng)的字體，而不會(huì)調(diào)用系統(tǒng)的默認(rèn)字體。例如使用LabVIEW生成一個(gè)名為“計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng).exe”的獨(dú)立應(yīng)用程序，同時(shí)也會(huì)在相同目錄下生成一個(gè)名為“計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng).ini”的文件（如果沒有生成，則運(yùn)行一次“計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng).exe”應(yīng)用程序）。打開該ini文件，找到“[計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng)]”Section文字，如圖 28所示（如果沒有則手動(dòng)鍵入）。在“[計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng)]”Section下方加入上述3行代碼即可。

圖 28 計(jì)算機(jī)自動(dòng)測(cè)試系統(tǒng).ini

如果在程序開發(fā)中確實(shí)需要使用某種特殊的字體，而為了防止目標(biāo)計(jì)算機(jī)上沒有該字體，需要將所使用的字體同時(shí)發(fā)布到Installer文件中。在安裝時(shí)直接將字體拷貝到目標(biāo)計(jì)算機(jī)的<C:\Windows\Fonts>文件夾中即可。

1.7       小結(jié)

在大多數(shù)情況下，程序員并不是簡單地?fù)?dān)任著Coding的工作，一個(gè)應(yīng)用程序的設(shè)計(jì)需要各種各樣的人通力協(xié)作完成。而對(duì)于測(cè)試測(cè)量工程師而言，需要盡量地完善開發(fā)的應(yīng)用程序，使之無論從界面上、功能上還是底層代碼上都充滿著“美感”。從這個(gè)角度說，程序員更像是一個(gè)藝術(shù)家，需要將感性和理性邏輯完美地結(jié)合起來。

測(cè)試測(cè)量應(yīng)用程序在運(yùn)行時(shí)會(huì)涉及到對(duì)UUT、測(cè)試儀器等各種硬件之間的相互通訊，因此其錯(cuò)誤處理、邏輯控制等似乎顯示更加充滿變數(shù)而不可控。因此，這更加需要程序員關(guān)注細(xì)節(jié)，完善用戶體驗(yàn)，確保應(yīng)用程序的運(yùn)行。如對(duì)Numeric值需要設(shè)置范圍、顯示精度、顯示方式等等，避免用戶的誤操作。在程序的使用過程中，如果發(fā)生了錯(cuò)誤而導(dǎo)致程序崩潰或假死，有些程序員會(huì)埋怨用戶：為什么亂點(diǎn)呢？為什么不按要求有順序地點(diǎn)擊按鈕呢？在數(shù)據(jù)采集過程中，為什么還要單擊這個(gè)控件呢？這是不正確的，對(duì)于這種情況始終是設(shè)計(jì)者的錯(cuò)誤，而與用戶無關(guān)。設(shè)計(jì)者在程序設(shè)計(jì)和撰寫的階段就應(yīng)該在程序中加入相應(yīng)的防誤操作機(jī)制，而不應(yīng)該將錯(cuò)誤歸結(jié)為用戶的不當(dāng)使用。