在我們的生活中，只要你睜開眼睛就能看到各種各樣的視覺。不同的視覺能給你不同的視覺暗示，同樣能給你不同的心理感受。視覺這個(gè)話題太泛了，大自然中無(wú)所不在，我們接下來(lái)主要談?wù)勗谲浖O(shè)計(jì)中視覺表達(dá)的準(zhǔn)確性。

一、找對(duì)你的感覺。

視覺設(shè)計(jì)首先要考慮的就是整體的感覺，即視覺設(shè)計(jì)的風(fēng)格。視覺設(shè)計(jì)的風(fēng)格是否準(zhǔn)確關(guān)系著設(shè)計(jì)的成敗。一個(gè)大家閨秀你不能把她打扮的象個(gè)婊子，當(dāng)然這是對(duì)人的感覺；那么一個(gè)產(chǎn)品的視覺設(shè)計(jì)也同樣需要一個(gè)對(duì)的定位，最終以合適的視覺表現(xiàn)出來(lái)。我們不妨以幾種聊天軟件來(lái)做個(gè)的比較，從中窺視一點(diǎn)設(shè)計(jì)定位的視覺意味?？聪旅嬉唤M圖：

從左至右為圖一、圖二、圖三

圖一： QQ的視覺定位是以青少年為主的，所以它的視覺設(shè)計(jì)才采用了比較明亮活潑的色彩。

圖二、圖三：msn和TM的視覺定位是以辦公室工作人員為定位，所以它的視覺使用比較穩(wěn)定和平靜的色彩。

令我感到失望的是，新版的TM2008給我的第一感覺象QQ,不知道這是否違背了原來(lái)的視覺定位？現(xiàn)在的TM2008讓我感覺不如直接用QQ算了！我還是覺的原來(lái)TM更適合辦公室使用，我不喜歡在辦公室用QQ，所以我個(gè)人排斥了TM2008。TM2008如下圖：

圖四

通過上面的圖四我們可以看出，設(shè)計(jì)中竟然還有很多原本屬于QQ的視覺元素，我個(gè)人不認(rèn)為這是個(gè)成功的定位。

二、視覺結(jié)構(gòu)和層級(jí)關(guān)系。

頁(yè)面表現(xiàn)的層級(jí)關(guān)系和結(jié)構(gòu)是用視覺的形式表現(xiàn)出來(lái)的，比如包含關(guān)系及業(yè)務(wù)的先后順序的表現(xiàn)。讓用戶通過視覺就能夠直接的明白應(yīng)該先看什么，后看什么，元素時(shí)間是什么關(guān)系等等。就地取材，讓我們來(lái)看下面的兩張圖：

圖五

wordpress博客的后臺(tái)管理界面，我們可以看到清晰的從屬關(guān)系：管理–>文章–>文章內(nèi)的修改區(qū)域。

圖六

圖六中，vista系統(tǒng)的界面：三個(gè)區(qū)域的層級(jí)關(guān)系一目了然 ，“1”區(qū)域要高出“2”區(qū)域，“2”區(qū)域要比“3”區(qū)域的顏色深，這樣整體的從屬關(guān)系就很明顯：

圖七

當(dāng)然我只是說(shuō)明層級(jí)關(guān)系需要視覺表達(dá)，其中有很多的細(xì)節(jié)因素就不再次贅述了。

三、是什么就是什么，圖形達(dá)意盡量明確。

視覺元素在軟件中都代表著一定的含義，什么樣子代表什么都有其特定的視覺暗示，如果不是游戲，我們應(yīng)該盡量避免和用戶捉迷藏。例如應(yīng)該用頁(yè)簽來(lái)表現(xiàn)的從屬關(guān)系，我們不應(yīng)該簡(jiǎn)單的做幾個(gè)鏈接，這樣會(huì)表達(dá)不清楚各部分關(guān)系。除此類的布局因素之外，圖標(biāo)的表達(dá)是軟件視覺中的一大塊，好的圖形表達(dá)可以幫助用戶直觀感受功能，縮短操作時(shí)間，提高效率；不過表達(dá)不好可就麻煩了，用戶可能要歪著腦袋想半天！

圖八

在圖八中，箭頭所指之處為刷新圖標(biāo)，上面那個(gè)刷新圖為原來(lái)圖標(biāo)，下面的刷新圖標(biāo)是我做個(gè)假設(shè)。對(duì)于一個(gè)新手，下面那張圖的刷新圖標(biāo)和后退圖標(biāo)顯得太象了，意思區(qū)別不是太明確，會(huì)造成誤解。就準(zhǔn)確性而言，上面那個(gè)刷新圖標(biāo)更讓我容易接受。我承認(rèn)我這樣假設(shè)有點(diǎn)扣小節(jié)，我的本意是為了說(shuō)明圖形表達(dá)準(zhǔn)確性。

四、明確你的視覺狀態(tài)

在軟件里，軟件視覺的狀態(tài)主要用來(lái)表現(xiàn)對(duì)用戶的行為反饋，在計(jì)算機(jī)pc環(huán)境里的軟件，主要針對(duì)鼠標(biāo)和鍵盤操作，理想狀態(tài)是：用戶的每個(gè)操作行為都應(yīng)該有相應(yīng)的視覺反饋，比如有沒有選中，操作有沒有成功等。僅按鼠標(biāo)操作的狀態(tài)分就有默認(rèn)、鼠標(biāo)指向、鼠標(biāo)按下、鼠標(biāo)點(diǎn)擊四種狀態(tài)，準(zhǔn)確的反饋可以讓用戶流暢的感覺自己的操作；關(guān)于鼠標(biāo)和鍵盤的狀態(tài)，大家在操作系統(tǒng)的時(shí)候注意一下，就可以看到各種操作的對(duì)應(yīng)關(guān)系，而我們平時(shí)是不太注意的，因?yàn)樗倪_(dá)到了設(shè)計(jì)的目的。站在是否可用的角度分有：可用狀態(tài)、不可用狀態(tài).。

圖九

圖九為兩種不同狀態(tài)的視覺比較，不可用狀態(tài)的灰色讓我不再去點(diǎn)擊。
狀態(tài)的準(zhǔn)確性可以可以避免用戶誤用不可用的操作而產(chǎn)生麻煩和浪費(fèi)時(shí)間，這種情況我們可以通過一個(gè)視覺反饋軌跡圖來(lái)看看操作的情況。

圖十

圖十是我在為一個(gè)產(chǎn)品做用戶測(cè)試的時(shí)候，所得到的反饋圖：在沒有選擇文件的時(shí)候，移動(dòng)文件是不可用的，視覺處理的時(shí)候卻是可以點(diǎn)擊的，再加上視覺順序的不合理，大多數(shù)的用戶總是直接點(diǎn)擊“移動(dòng)文件”，犯下錯(cuò)誤之后才去選擇文件，途中的虛線部分表示犯錯(cuò)之后又才去選擇文件，重新來(lái)過。

五、請(qǐng)用準(zhǔn)確的視覺來(lái)輔助信息反饋

信息反饋一般有一下五種情況：成功、失敗、詢問、警告、錯(cuò)誤異常，我們用來(lái)對(duì)應(yīng)的視覺輔助圖要力求表現(xiàn)每種情況的準(zhǔn)確含義，比如我見過有的軟件用一個(gè)驚訝的表情來(lái)表示警告，但往往被誤以為是詢問或者出現(xiàn)了異常。一般的視覺表現(xiàn)如下圖：

圖十一

圖十一是我們?cè)谧鰃ui設(shè)計(jì)時(shí)做的，基本按照通用的符號(hào)。

當(dāng)然，為了增加趣味性，我們可以允許任意表現(xiàn)形式或表情的存在，前提是你的表達(dá)要準(zhǔn)確，不要有歧義，否則使用者的第一反映可能不是你要表現(xiàn)的，由于理解的歧義所帶來(lái)的損失和挫折感會(huì)讓用戶感到厭惡。通過搜索找到一些圖，組合起來(lái)對(duì)比一下：

圖十二

圖十二中的第一張是我搜索到的錯(cuò)誤表現(xiàn)圖，想必大家都見過，如果你犯錯(cuò)的時(shí)候出現(xiàn)了，你會(huì)想到什么？第三張圖的淘氣鬼臉圖，我以為我成功了；第四張圖的表現(xiàn)讓我以為是在警告。只有第二張圖讓我意識(shí)到我失敗了，并且有趣味性?？梢娙の缎院蜏?zhǔn)確性并不矛盾，我們?cè)谠O(shè)計(jì)趣味性的同時(shí)，別忽略設(shè)計(jì)的準(zhǔn)確性。