軟件界面的視覺化設計分析

摘 要：軟件界面的設計要遵循平面設計和交互設計的一般規律，特別要強調軟件用戶的使用體驗。從視覺化設計的角度來說，用戶視覺上的體驗決定了整個軟件應用的接受程度，因此如何做好軟件界面的視覺化設計成為軟件界面設計的重中之重。

關鍵詞：軟件界面設計；視覺化設計；用戶體驗；界面風格

當確定了軟件界面設計的標準之后，按照交互設計所提供用戶詳細情況，進行軟件界面視覺元素的整體設計時，界面的一致性與協調性將是設計者的兩大目標。界面的一致性與協調性可從藝術上和技術上體現，藝術層面主要包括：視覺的版面形式、色彩、動畫（包括二維動畫、三維動畫、視屏）和聽覺的聲音、音樂；技術層面主要包括：層級管理、導航方式、圖標功能、動作步數等。當然，因為軟件系統是一個全方位的立體系統，很難從單一的層面去概括和加以區分，它們往往你中有我、我中有你，相互交叉。視覺上，設計者必須將所有抽象的概念轉換成直觀的、具象的視覺圖形；在技術上，設計者必須將整個系統的導航、功能、動作加以規范，讓使用者有規律可循。顯然，統一的視覺和技術形式有助于協調和記憶，可以減少操作、交互中的困惑與錯誤。

1．軟件界面的版式布局設計

我們知道，版式構成的要素包括文字的字號、字體、字距、行距、對齊方式以及圖片圖形的面積、數量、風格、寓意等，數量非常多組合方式也非常復雜，不同組合方式形成了不同的版面風格。一個軟件的界面與其各種子界面最好采用一種版面風格，不同界面需要有自己的特點，但我們必須對文字和圖片圖形的組合作出一個較為規范的安排，在統一的風格和框架內進行不同的變化。如果不是游戲，我們應該盡量避免和用戶捉迷藏，清晰的版式布局能夠迅速拉緊軟件與用戶的距離，用戶可以直接找出自己需要的操作在版面的那個方位。因此，軟件界面的版式不宜復雜，同時顏色不宜太過鮮艷，應以淺色系為主。當然，一些游戲娛樂軟件的版式布局比較隨意，在藝術性和趣味性方面與其它應用軟件不同，其顏色也可活潑鮮艷，但其版式構成的要素仍然要結構清晰，不能讓用戶產生雜亂的感覺。

2．軟件界面的組織和可視結構設計

用戶界面的組織結構應該要完整、清晰，呈現給用戶的通用操作序列、術語和信息的措辭，界面元素的布局、顏色搭配方案和排版樣式等都要保持一致。具有高度一致的用戶界面可以讓各個部分的信息安排得井然有序，給用戶以清晰感和整體感，有利于用戶對界面運作建立起精確的心理模型，從而降低培訓和支持成本。

界面布局應當體現用戶操作時的一般順序和被使用到的頻繁程度。圖形界面的布局應當符合人們通常閱讀和填寫紙質表單的順序。通常人們的閱讀順序是從左至右、由上而下，而有些國家和民族的主流閱讀習慣有所不同，例如阿拉伯文、希伯萊文是從右向左、由上而下的閱讀順序，因此圖形界面的布局會隨著地域文化的差異進行相應的修改。用戶經常使用的圖形界面元素應當放在突出的位置，讓用戶可以輕松地注意到它們。相反，一些不常用的元素可以放在不顯眼的位置，甚至允許用戶把它們隱藏起來，以便擴大屏幕的可用區域。對于那些需要具備一定條件才可以使用的元素，應當把它們顯示成灰色狀態，當具備了使用條件時才改變成正常狀態。特定的元素應放置在它所要控制數據的鄰近位置，幫助用戶確立元素和數據之間的關系。影響整個對話框的元素應當與那些控制特定數據的元素區分開來，關系緊密相聯的元素應有組織地放置在同一個區域。

3．色彩設計

色彩是抽象的，顏色在本質上不存在什么內在的涵義。但在視覺上，色彩之間存在明顯的區別，并在情感上引起人們的不同反應。保持系統色彩的一致認識非常重要：無論使用有限的色彩還是豐富的色彩進行創作，都必須使每一種顏色各得其所，這對于所有設計師來說都是一種挑戰。色彩的一致性與協調性還須在充分理解色彩情感和色彩屬性的基礎上，根據系統創作的主題思想、企業性質、使用對象等作出判斷，并相應對系統各界面的色彩運用作出選擇和調整，在色彩的色相、色度、明度、冷暖方面與之相適應。

顏色的整體調配對屏幕顯示是一項重要的設計。顏色調配既是一種有效的強化技術，更具有美學價值。使用顏色時應注意如下幾點：

一．限制同時顯示的顏色數。一般同一畫面不宜超過4或5種，可用不同層次及形狀來配合顏色，增加變化。這樣整個界面的層次就會比較清晰，不會因為顏色的繁復影響用戶的操作注意力。

二．畫面中活動對象顏色應鮮明，而非活動對象應暗淡。對象顏色應盡量不同，前景色宜鮮艷一些，背景則應暗淡，利用色彩強弱使用戶的在操作過程中的關注點集中那些合適的操作之上。

三．盡量避免不兼容的顏色放在一起（如黃與藍，紅與綠等），除非有目的的作對比時用。特別是在同一個操作對象內，因為不兼容的顏色會破壞整個對象的協調感，使用戶容易產生厭惡感。

四．若用顏色表示某種信息或對象屬性，要使用戶懂得這種表示，且盡量用常規準則表示。如灰色具有禁止、普通的意思，紅色具有危險、提醒、活躍等指示意義，綠色有正常、通行、友善等指示意義，黃色有陽光、富麗堂皇等指示意義，藍色有智慧、冷靜、深遠等指示意義等。基本上絕大多數人對這些顏色具有共同的情感認同，在利用顏色傳達信息時應嚴格按照這些信息以及對象屬性來設計。

五．中性顏色（如淺灰色）往往是最好的背景顏色。淺色具有跳到你面前的傾向，而黑色使人感到退到了背景之中。比如藍色文字以白色背景容易識別，而在紅色背景下。

4．界面風格的獨特性、完整性的可視化體現

每一個軟件都應有它的固定風格，如何使眾多的界面保持風格的一致性是很重要的。軟件界面設計猶如繪畫不僅有繪畫風格，還要有表現的主題，選擇適合的風格則能很好的表現主題，使用戶能通過界面的風格很快地了解軟件的主題。

4.1 卡通式的風格

在游戲或低齡兒童的學習軟件中，我們常會看到卡通或漫畫式的風格，因為卡通是有趣而能吸引人的，就因為卡通可以得到很多的注意力，所以在作品表現時，信息可以有效快速地傳遞。

使用卡通式的風格，就必須設計許多角色、故事劇情，以及定位每個角色的身份、人格、動作，將這些角色一個一個建立在故事劇情當中。如果設計中使用已存在的角色時〔例如歷史人物、童話角色等〕，就要更加注意，這些角色的性格特征通常已經通過各種媒體被許多觀眾所認定，因此設計者沒有太多空間能改變這些角色的個性特征。所以設計者在使用已存在的角色時，要注意保持角色人格的原有性格特征。

4.2 傳統式的風格

傳統式的風格，像大多計算機程序設計語言類軟件，具有知識性，但是大部分都不是非常有趣。這些傳統的表示方法，通常是忠實地表現內容的原貌，不添加任何夸張渲染的手法。在界面設計中保持了界面的一致性，一致性既包括使用標準的控件，也指使用相同的信息表現方法，如在字體、標簽風格、顏色、術語、顯示錯誤信息等方面確保一致。

4.3 高科技式的風格

以高科技風格表現主題的方式，它的作品大部份圍繞著當代計算機所開發出來的技術，例如使用三維的動畫、虛擬實境的方式，虛擬實境是向用戶提供身臨其境和多感覺通道體驗，甚至使用表現高科技工作環境的圖像，營造出讓人有真實感受的效果。例如：一些游戲和教學軟件現在多采用高科技式的風格，虛擬現實系統具有多種輸出形式，可以處理多種輸人設備的能力，并且能夠進行碰撞檢測、實時交互、視點控制和復雜行為建模等。

目前，虛擬現實技術在軍事仿真、娛樂、游戲、教育、醫學、遙控機器人、虛擬設計、虛擬制造等領域都得到了廣泛的應用，也是未來軟件界面的發展趨勢。

除去以上介紹的幾種界面風格外，還有粉蠟筆式、油畫式、彩色鉛筆式、水彩式的風格、自然式的風格等。在選擇界面風格時要根據軟件的用途、軟件的使用人群來恰當地進行選擇，以便能更好地表現主題和為用戶所接受。

5．整體設計實例分析

視覺設計首先要考慮的就是整體的感覺，即視覺設計的風格。視覺設計的風格是否準確關系著設計的成敗。按照目標導向設計中進行軟件界面設計之前要進行用戶建模的理論來講，一般來講，一種軟件不應該為所有人服務，而應該為特定一類用戶服務。在設計前期進行大量用戶調查，受眾分析后，確定軟件所服務的對象，確定對象用戶的年齡層、知識面、使用習慣等等要素，盡量準確的找到軟件與用戶之間的訴求點。也就是說一個軟件產品的視覺設計需要一個恰當的定位，最終以合適的視覺表現出來。我們不妨以幾種聊天軟件來做個比較，找到一些關于軟件界面中視覺元素的整體設計的規律。

騰訊QQ、MSN、新浪Uctalk是三款國內常見的聊天軟件，其整體布局十分相似，長方豎直并且可放縮的形式已經成為即時通訊類軟件的規范，因為用戶在使用這一類軟件時不會用大部分的注意力來關注，而是在其它工作學習娛樂的同時保持與朋友的聯系，因此界面不可以占據太大區域，也不適合設計成太過奇怪的外形。

騰訊QQ這個軟件大家都很熟悉了，這個在國內擁有最大用戶群的即時通訊軟件擁有一個以藍色為基調的默認界面，色彩鮮艷，圖標的卡通風格明顯。整體上很美觀但是卻不夠簡潔，顯得過于花哨。它的目標用戶是國內最早出現的一批的網絡用戶，年輕化、時尚化是它的一貫訴求。它是國內最早實行允許用戶自己設計皮膚界面的應用軟件之一，通過皮膚管理器可以方便的對皮膚進行預覽、管理，這樣用戶就可以自己設計或安裝自己喜歡的界面風格。

MSN是微軟嵌入在windows系統下的即時通訊軟件，借由windows在全球范圍內的廣泛應用，MSN的國際化趨勢十分明顯。它的整體色調典雅樸實，很少出現十分艷麗的色彩，布局也十分簡潔清晰，和windows的整體風格也非常統一。同時MSN也是面向辦公用戶的，所以它的字體、圖標設計都十分樸素，能夠讓用戶自己設計調整的外觀和風格也比較少，因而顯示其個性化和趣味性不足。

新浪UCtalk是目前越來越流行的語音與視頻聊天軟件的一種，它的目標用戶就是那些不喜歡打字，喜歡直接語言交流的朋友。這一個版本的Uctalk界面十分簡潔，重點十分突出，它沒有更多的其它服務，用戶最容易關注到的是它的調整音量的區域。同時其軟件內部提供了各種信息提示聲音，包括一些語音提示，用戶可以只用耳朵來接受軟件提供的信息反饋。但是整體色彩感覺和圖標設計來講，Uctalk沒有很清晰的風格體現，其功能提供也十分有限。

三款軟件所面對的用戶類型截然不同，在其軟件功能和界面外形大致相同的情況下，利用不同的色彩、圖標、布局等風格體現，使用戶對每款軟件都有獨特的使用感受，也自然會產生各自不同的用戶群。

6．小結

根據目標導向設計理論，在建立了用戶模型之后，在軟件界面設計初期，首先應該確定軟件界面由版式布局、色彩等形成的界面風格。信息化時代里，軟件的數量大，更新的速度也非常快，如果一個軟件沒有自己鮮明的界面風格，則很難給用戶留下深刻的印象。而界面作為一個整體，各種界面元素應保持一致的風格，并且在之后更新的軟件版本中保持下去，這樣才能凸顯軟件獨特的性格。

參考文獻：

[1] Alan Cooper[美] 詹劍鋒 張知非 譯.軟件觀念革命——交互設計精髓[第1版].北京：電子工業出版社，2005年

[2] Alan Cooper[美] Chris Ding 譯.交互設計之路[第2版].北京：電子工業出版社，2006年

[3] 唐納德·A·諾曼[美] 梅瓊 譯.設計心理學[第1版].北京：中信出版社，2003年

[4] 唐納德·A·諾曼[美] 付秋芳 程進三 譯.情感化設計[第3版].北京：電子工業出版社，2006年

王尚，男，1982年生，河南省洛陽市人，洛陽理工學院藝術設計系教師，主要從事互動多媒體設計，影視動漫設計等方向的研究。