淺談視覺設計的準確性

作者：奇遇? （出自UCDChina.com） 在我們的生活中，只要你睜開眼睛就能看到各種各樣的視覺。不同的視覺能給你不同的視覺暗示，同樣能給你不同的心理感受。視覺這個話題太泛了，大自然中無所不在，我們接下來主要談談在軟件設計中視覺表達的準確性。 一、找對你的感覺。
???????? 視覺設計首先要考慮的就是整體的感覺，即視覺設計的風格。視覺設計的風格是否準確關系著設計的成敗。一個大家閨秀你不能把她打扮的象個×××，當然這是對人的感覺；那么一個產品的視覺設計也同樣需要一個對的定位，最終以合適的視覺表現出來。我們不妨以幾種聊天軟件來做個的比較，從中窺視一點設計定位的視覺意味。看下面一組圖：

（從左至右為圖一、圖二、圖三） 圖一： QQ的視覺定位是以青少年為主的，所以它的視覺設計才采用了比較明亮活潑的色彩。
圖二、圖三：msn和TM的視覺定位是以辦公室工作人員為定位，所以它的視覺使用比較穩定和平靜的色彩。 令我感到失望的是，新版的TM2008給我的第一感覺象QQ,不知道這是否違背了原來的視覺定位？現在的TM2008讓我感覺不如直接用QQ算了！我還是覺的原來TM更適合辦公室使用，我不喜歡在辦公室用QQ，所以我個人排斥了TM2008。TM2008如下圖：

——圖四
通過上面的圖四我們可以看出，設計中竟然還有很多原本屬于QQ的視覺元素，我個人不認為這是個成功的定位。 二、視覺結構和層級關系。
頁面表現的層級關系和結構是用視覺的形式表現出來的，比如包含關系及業務的先后順序的表現。讓用戶通過視覺就能夠直接的明白應該先看什么，后看什么，元素時間是什么關系等等。就地取材，讓我們來看下面的兩張圖：

——圖五
wordpress博客的后臺管理界面，我們可以看到清晰的從屬關系：管理–>文章–>文章內的修改區域。
——圖六
圖六中，vista系統的界面：三個區域的層級關系一目了然 ，“1”區域要高出“2”區域，“2”區域要比“3”區域的顏色深，這樣整體的從屬關系就很明顯：

——圖七 當然我只是說明層級關系需要視覺表達，其中有很多的細節因素就不再次贅述了。 二、是什么就是什么，圖形達意盡量明確。
視覺元素在軟件中都代表著一定的含義，什么樣子代表什么都有其特定的視覺暗示，如果不是游戲，我們應該盡量避免和用戶捉迷藏。例如應該用頁簽來表現的從屬關系，我們不應該簡單的做幾個鏈接，這樣會表達不清楚各部分關系。除此類的布局因素之外，圖標的表達是軟件視覺中的一大塊，好的圖形表達可以幫助用戶直觀感受功能，縮短操作時間，提高效率；不過表達不好可就麻煩了，用戶可能要歪著腦袋想半天！

——圖八
在圖八中，箭頭所指之處為刷新圖標，上面那個刷新圖為原來圖標，下面的刷新圖標是我做個假設。對于一個新手，下面那張圖的刷新圖標和后退圖標顯得太象了，意思區別不是太明確，會造成誤解。就準確性而言，上面那個刷新圖標更讓我容易接受。我承認我這樣假設有點扣小節，我的本意是為了說明圖形表達準確性。 三、明確你的視覺狀態
在軟件里，軟件視覺的狀態主要用來表現對用戶的行為反饋，在計算機pc環境里的軟件，主要針對鼠標和鍵盤操作，理想狀態是：用戶的每個操作行為都應該有相應的視覺反饋，比如有沒有選中，操作有沒有成功等。僅按鼠標操作的狀態分就有默認、鼠標指向、鼠標按下、鼠標點擊四種狀態，準確的反饋可以讓用戶流暢的感覺自己的操作；關于鼠標和鍵盤的狀態，大家在操作系統的時候注意一下，就可以看到各種操作的對應關系，而我們平時是不太注意的，因為它默默的達到了設計的目的。站在是否可用的角度分有：可用狀態、不可用狀態.

——圖九，本圖為兩種不同狀態的視覺比較，不可用狀態的灰色讓我不再去點擊。
狀態的準確性可以可以避免用戶誤用不可用的操作而產生麻煩和浪費時間，這種情況我們可以通過一個視覺反饋軌跡圖來看看操作的情況。

——圖十
圖十是我在為一個產品做用戶測試的時候，所得到的反饋圖：在沒有選擇文件的時候，移動文件是不可用的，視覺處理的時候卻是可以點擊的，再加上視覺順序的不合理，大多數的用戶總是直接點擊“移動文件”，犯下錯誤之后才去選擇文件，途中的虛線部分表示犯錯之后又才去選擇文件，重新來過。 四、請用準確的視覺來輔助信息反饋
信息反饋一般有一下五種情況：成功、失敗、詢問、警告、錯誤\異常，我們用來對應的視覺輔助圖要力求表現每種情況的準確含義，比如我見過有的軟件用一個驚訝的表情來表示警告，但往往被誤以為是詢問或者出現了異常。一般的視覺表現如下圖：

——圖十一
圖十一是我們在做gui設計時做的，基本按照通用的符號。 當然，為了增加趣味性，我們可以允許任意表現形式或表情的存在，前提是你的表達要準確，不要有歧義，否則使用者的第一反映可能不是你要表現的，由于理解的歧義所帶來的損失和挫折感會讓用戶感到厭惡。通過搜索找到一些圖，組合起來對比一下：

——圖十二
圖十二中的第一張是我搜索到的錯誤表現圖，想必大家都見過，如果你犯錯的時候出現了，你會想到什么？第三張圖的淘氣鬼臉圖，我以為我成功了；第四張圖的表現讓我以為是在警告。只有第二張圖讓我意識到我失敗了，并且有趣味性。可見趣味性和準確性并不矛盾，我們在設計趣味性的同時，別忽略設計的準確性。

轉載于:https://blog.51cto.com/jenny/47542

總結

以上是生活随笔為你收集整理的浅谈视觉设计的准确性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。