我和LabVIEW——一個NI工程師十年的編46用戶界面設(shè)計 3 - 界面元素的關(guān)聯(lián).doc

用戶界面設(shè)計 3 - 界面元素的關(guān)聯(lián) 圖1：兩個菜單 上圖左邊是 LabVIEW 中的一個菜單。右邊那個是我自己對它的“改進(jìn)”。大家覺得那個好一些？ 顯然用戶更喜歡組織清晰合理的那個菜單。當(dāng)一個界面上的元素比較多，找到自己想要的信息就要花上一小點(diǎn)時間。用戶常常是一眼就看到了一個與自己想要的信息有一點(diǎn)關(guān)聯(lián)的某個元素，他這時候會期望這個元素就有一定的提示信息，幫他加速找到自己想要的東西。因此，我們要在界面上，告訴用戶哪些元素是相關(guān)的，或不相關(guān)的。 有很多手段可以把界面的元素之間的關(guān)聯(lián)顯示給用戶，比如通過元素的排布、邊框、空白、顏色、字體等等方式。 我們總是在相關(guān)內(nèi)容的附近去找想要的信息，所以邏輯上相關(guān)的控件或項(xiàng)目，應(yīng)當(dāng)在屏幕空間上相對臨近。比如剛剛看到的菜單，Save, Save As, Save All，等等與保存相關(guān)的條目應(yīng)當(dāng)排在一塊。 僅僅把相關(guān)內(nèi)用擺在一起還不夠，看看下面這個圖片。 圖2：小朋友的名字 這是我在網(wǎng)上看到的一個經(jīng)典笑話：老師發(fā)作業(yè)本的時候，念小朋友們寫在本子上的名字：“黃肚皮”，“魚是蟲”。但是沒人答應(yīng)，最后有兩個小朋友沒拿到本子，他們的名字分別是“黃月坡”和“魯?shù)啊?。小朋友們雖然把界面元素按照順序排列了，但卻沒有合理的組合它們。 我們上面看到的菜單，有二十多個條目，單純的把他們排在一起還是不利于用戶查看?？梢园阉鼈儼垂δ芊殖蓭讉€不同的區(qū)域，比如保存文件與Project的操作在功能上相對獨(dú)立一些，就可以用分隔線，幫它們的項(xiàng)目劃分開。對于面板上的控件，功能相關(guān)的幾個控件可以通過被邊框圍住、使用分割線、采用不同的間隙等等方法，讓用戶直觀的感覺到他們在功能上的緊密關(guān)聯(lián)。 還有一種表示控件間關(guān)聯(lián)性的方法值得多敘述幾句，就是利用不同的顏色。球場上的兩組隊(duì)員，開始分列于球場兩端，很容易區(qū)分他們是哪一伙的。而一旦比賽開始，這種空間上的提示就不存在了，這時大家主要靠隊(duì)員衣服的顏色來區(qū)分它們屬于哪支隊(duì)伍。在界面設(shè)計上當(dāng)然也可以使用這種方式，為不同功能的控件設(shè)置不同的顏色。 需要注意的是，顏色只能作為輔助方式，前幾種方法不適用的時候，才需要用顏色來表示關(guān)聯(lián)。顏色與前面提到的幾種方式不同：大多數(shù)人喜歡排列整齊，布局合理的界面，但喜歡界面顏色豐富的人就不那么多了。相反，顏色艷麗、對比度高的界面會使人視覺疲勞，讓人覺得反感。圖3：LabVIEW 顏色配置 LabVIEW 配置顏色的面板上分了幾類不同的顏色區(qū)域。設(shè)計系統(tǒng)風(fēng)格的時候，需要使用系統(tǒng)顏色。其他情況下，盡量使用柔和顏色，避免使用靚麗鮮艷的顏色。還要考慮到色盲、色弱的發(fā)病率也是蠻高的，界面設(shè)計時要照顧到這些用戶。 所以，界面內(nèi)容不多時，就盡量不要使用顏色了。只有當(dāng)界面上信息量特別大的時候，顏色才會派上用場。需要使用圖片的情況就不用說了，除此之外信息量較大的情況是有大量文字的時候。需要把不同的文字區(qū)分開來的時候，比如標(biāo)注所有拼寫錯誤的單詞等等，就可以利用顏色來區(qū)分。當(dāng)然，這時候也可以利用字體，字號等的不同來達(dá)到同樣的目的。 界面設(shè)計中的很多原則