淺析視覺界面設計原理

聶 伊 張敏言

（西安工程大學，陜西 西安 710048）

交互產品將行為和用戶聯系在一起發生在視覺上，通常是通過產品界面的表現來實現的。視覺界面設計者工作的重點在于設計在組織上的運用，以及如何來利用視覺暗示和啟示將行為信息傳達給用戶。設計師必須掌握交互設計原則和界面習慣用法的基本知識，這些對于塑造產品的行為都很重要[1]。

1 設計視覺界面設計的要素

視覺界面設計可以對產品的吸引力和效力產生很大的影響。要創造出有效且吸引人的用戶界面，設計師必須掌握一些基本的視覺要素，如顏色、版面、形式和構成，還必須了解如何運用這些要素來有效地傳遞行為和信息。

1.1 文本

文本在任何用戶界面中都是及其重要的一個組成部分，文字可以傳遞大量細微信息，但是我們必須要小心仔細才能夠正確恰當地使用好文字。

人們主要通過文字的形狀來辨識文字，形狀差異越顯著，文字也就越容易辨識。在報紙、雜志等印刷品中，正文字體主要采用宋體。宋體是有襯線字體，特點是橫細豎粗，棱角分明。與之相對，顯示器上的字體一般都是黑體。黑體基本上沒有橫豎粗細的變化，也沒有襯線裝飾。與印刷品相比，顯示器的分辨率要低得多，如果在這種輸出媒介上使用宋體的話，文字的襯線反而會妨礙閱讀。不但沒有棱角分明的美感，還很容易導致眼睛疲勞。也就是說，顯示器的分辨率低，不足以顯示有襯線字體。因此顯示器上的字體一般都采用毛邊較少的黑體[2]。

辨識文字和閱讀文字有所不同，閱讀中我們有意識地掃描個別字詞，之后按照上下文來理解它們的含義。界面應該盡量少用文本，從而減少閱讀量，這樣才能保證幾面導航的順利進行。我們應該避免只依賴文字進行講解，因為閱讀文字速度很慢，而且會破壞用戶對應用的浸入式體驗。使用太多的文字是一種“說而不秀”的方法，這與移動應用的優勢相違背[1]。少用文字原則并不意味著用文字是錯的，或者說文字總是越少越好。它指的是在你想吸引用戶進一步體驗的時候，應該首先考慮減少文字，增加交互。

1.2 顏色

顏色作為界面視覺語言的一部分，向用戶傳達信息。對于多數應用程序，顏色的使用要吝惜，并且應該與視覺語言的其他元素結合，如符號、圖標、文本，以及在界面上維持的控件關系。

當顏色太多時，我們的大腦不得不花費額外的時間記住每種顏色的意義，這樣便降低了我們的處理速度。互補色在顏色處理中是指那些相反的顏色，當這些顏色被高飽和并且放置在一起時，就會制造出視覺假象。并且非常難以正確辨別，也非常難以讓人聚精會神。高飽和的顏色看起來會顯得鮮艷，從而吸引過多的注意力。在較小的地方適當地運用飽和始終的顏色可以有效地吸引用戶的注意力，但這種用法應該保守使用。如果圖形顏色與背景顏色只是顏色不同，而在飽和度和亮度上沒有差別，則很難辨認。圖形和背景除了色調不同外，飽和度和亮度也應有區別。

1.3 圖標

圖標最大的特點就是可以通過使用不同顏色和形狀的圖像來幫助用戶直觀地了解信息的種類和操作內容。與單純的文字界面相比，圖標的另一個特點是可以使界面的整體效果張弛有度。

軟件中的圖標有兩大用途：一是作為信息傳遞的標志；二是作為指導用戶操作的控件。但是，圖形界面也存在缺點，只使用圖標很難傳遞準確的信息。即便是人們經常使用的軟件的工具欄，其中有些圖標按鈕也會使用戶感到困惑。而且，如果消息框中只使用圖標也無法傳遞詳細的信息。因此，一般情況下，圖標還需要文字信息的輔助。

2 設計視覺界面設計的原則

設計師需要關注如何用界面的視覺結構匹配用戶的心理模型或者產品的行為，也必須關注如何將程序的狀態傳達給用戶（如文檔的編輯狀態），還要關注圍繞著用戶感知功能方面（布局、視覺層次及圖形背景問題等）的認知性問題。

2.1 運用視覺屬性將元素分組，創造出清晰的層次結構

比如顏色、形狀和位置來區分層次結構中的每個層次。最為重要的元素應放在其他元素的上方或者向外突出一些。需要突出的元素最好用飽和顏色來渲染，次重要的元素用欠飽和顏色渲染。與背景的顏色及其值的對比也不要太強烈，尺寸要小一些或者向內縮進。不飽和及中性顏色則可以用在不重要的元素上。

2.2 圖像的運用要適當緊湊、一致，并且要適當考慮使用環境

視覺元素也應該是緊湊而通用的視覺語言的一部分，這意味著相似的元素應該采用相同的視覺屬性，在一致的位置擺放信息和控件。不同頁面上提供的相同功能的控件和數據顯示應該擺放在每一頁上的相同的位置，而且他們還應該有相同的顏色、字體和陰影等。這樣的一致性能讓用戶很快地找到和識別它們。除了具備功能價值，圖標在傳遞品牌屬性上還有重要的作用。無論采用什么樣的風格，風格都必須一致。

2.3 避免視覺噪聲和混亂

界面上的視覺噪聲一般是由過多的視覺元素造成的，這些多余的視覺元素將人們的注意力從那些直接傳達功能和行為主要對象上轉移到他處。這些視覺噪聲包括過分的裝飾、不必要元素、過度使用標尺、視覺上厚重的用于隔離控件的元素或者過分的使用視覺屬性（包括顏色、紋理和對比）等。混亂的界面試圖在一個有限的空間中提供過多的功能，結果會導致這些空間在視覺上相互干擾。視覺上過分裝飾、混亂或者過多的屏幕都會加重用戶的認知負荷，產生信息焦慮的情緒，這將影響用戶的速度、理解能力和任務的完成。

2.4 保持簡單，使用最小的視覺風格

一般來說，界面應該使用簡單的幾何形狀和最小的輪廓。如果一個程序長時間占據使用者的注意力，應該考慮弱化視覺表現上的顏色和紋理。顏色的數量要嚴格限制，并且應該以較為不飽和的顏色或者中性顏色為主，可以適當加入一些高對比作為強調重要信息的顏色，那樣會讓控制組織得更緊湊。

用戶可能長時間盯著相同的工具欄和菜單，會得到一些純粹因為熟悉而產生的位置感。優秀的視覺界面和任何優秀的視覺設計一樣，在視覺上應該是高效率的，它們有一個共同的特點，即讓最少的視覺和功能元素發揮最大效能。這樣，設計師可以自由地用更少的像素做更多的事情。

2.5 消除視覺附加工作

設計原則的主要目的之一就是優化用戶的產品體驗。對于生產工具和其他非娛樂導向的產品而言，這意味著將工作負荷降至最低。軟件經常包括一些不必要的具有繁重工作量的交互，對于用戶來說，這些是附加工作[1]。

視覺附加工作是用戶不得不分析的視覺信息，比如在列表中找到某個條目、判斷從哪個位置開始閱讀屏幕，或者決定哪些元素是可以點擊的，哪些元素僅僅是裝飾性的。有時設計師過分依賴視覺隱喻，因此添加了各種附加工作，這些視覺隱喻能讓人們容易理解程序元素和行為之間的關系，但了解了這些基本情況之后，隱喻的管理成了完全的附加工作。另外一種視覺附加工作的根源是過度使用了風格化的圖形和界面元素，而實際上，視覺風格的運用首先是要支持清晰的信息通信和界面行為。

2.6 避免歧義

避免顯示有歧義的信息，并通過測試確認所有用戶對信息的理解是一致的。當無法消除歧義時，要么依靠標準或者慣例，要么告知用戶用你期望的方式去理解歧義之處[3]。

3 優雅的視覺界面設計

視覺界面的設計對品牌形象、用戶體驗及本能反應等方面都有一定的支持作用。優秀設計的經典要素之一即形式簡約：以簡御繁。對于界面設計，就是用最少的操作與學習成本來完成任務。簡約同樣適用于行為，在視覺設計中給與用戶簡單的工具，即運用最少的視覺區別來明確傳達想要表達的意思。

視覺界面設計師所關心的是尋找最適合的表現方式來傳達他們設計的交互產品的行為。設計師應該用一種容易理解、有用、支持企業品牌和目標的方式來表現產品的行為和信息。用戶界面的設計不應該輕視美學方面的考慮，而是要在一定的功能框架下來最大化地考慮如何優雅地向用戶展示應用的視覺設計。

［1］Alan Cooper，Robert Reimann，David Cronin.About Face3 交互設計精髓[M].劉松濤，等，譯.北京：電子工業出版社，2014，9：115-118，170-172，218-239.

［2］古賀直樹.好設計不簡單UI 設計師必須了解的那些事[M].張君艷，譯.北京：人民郵電出版社，2014，8：22-28.

［3］Jeff Johnson.認知與設計：理解UI 設計準則[M].2 版.張一寧，王軍鋒，譯.北京：人民郵電出版社，2014，8：11-12.