張萍 曾丹

摘要：簡要評述了軟件界面開發(fā)的發(fā)展歷史，提出了軟件界面設(shè)計(jì)行業(yè)的確立標(biāo)志著軟件界面設(shè)計(jì)實(shí)現(xiàn)了由功能目的型向藝術(shù)設(shè)計(jì)型轉(zhuǎn)變的觀點(diǎn)。從美學(xué)、認(rèn)知心理學(xué)的角度探討了軟件界面配色及布局時(shí)應(yīng)遵循的一般原則。同時(shí)，分析了軟件界面“交互性”中換膚以及智能布局兩個(gè)重要的發(fā)展方向。

關(guān)鍵詞：軟件界面配色布局交互性

界面設(shè)計(jì)是為了滿足軟件專業(yè)化、標(biāo)準(zhǔn)化的需求而產(chǎn)生的對軟件的使用界面進(jìn)行美化、優(yōu)化、規(guī)范化的設(shè)計(jì)分支。具體包括軟件啟動封面設(shè)計(jì)，軟件框架設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動條及狀態(tài)欄設(shè)計(jì)，安裝過程設(shè)計(jì)等。軟件用戶除期望所用的軟件擁有強(qiáng)大的功能外，更期望應(yīng)用軟件能盡可能地為他們提供一個(gè)輕松、愉快、友好的操作環(huán)境，因此，界面設(shè)計(jì)已成為軟件設(shè)計(jì)中至關(guān)重要的一環(huán)。

一、軟件界面設(shè)計(jì)的發(fā)展歷史

1945年，馮?諾依曼提出二進(jìn)制方案，建立多級存儲結(jié)構(gòu)和并行計(jì)算原理，確立20世紀(jì)計(jì)算機(jī)的基本數(shù)學(xué)構(gòu)型，宣告計(jì)算機(jī)時(shí)代的來臨，軟件開發(fā)的歷史也從此正式開始。軟件開發(fā)的過程就是人們使用各種計(jì)算機(jī)語言將人們關(guān)心的現(xiàn)實(shí)世界映射到計(jì)算機(jī)世界的過程。實(shí)質(zhì)上就是程序員們對客觀世界問題域的認(rèn)識在二進(jìn)制代碼世界內(nèi)的重現(xiàn)過程[1,2]。從這一層面上來說，軟件開發(fā)的歷史大概可以分為三個(gè)階段：面向機(jī)器（MO）階段，面向過程（PO）階段和面向?qū)ο螅∣O）階段。

軟件開發(fā)可分為兩大部分：編碼設(shè)計(jì)與UI設(shè)計(jì)。以上介紹的是編碼設(shè)計(jì)，這是大家所熟悉，但UI設(shè)計(jì)對大部分人來說都是個(gè)陌生的概念，直到目前為止，做UI設(shè)計(jì)的人仍被貶稱為“美工”。UI的本意是用戶界面，用戶界面設(shè)計(jì)是人機(jī)交互（Human-Computer Interaction，HCI）領(lǐng)域的一個(gè)子學(xué)科。人機(jī)交互是一門研究、規(guī)劃和設(shè)計(jì)如何讓人與計(jì)算機(jī)協(xié)同工作，以最高效的方式滿足人的需求的學(xué)科。具體來說，用戶界面是指計(jì)算機(jī)及其軟件中人們可以看到，聽到，觸摸到，與其交談，或者進(jìn)行理解或指揮的那一部分。用戶界面由兩個(gè)基本部分組成：輸入和輸出。輸入是指一個(gè)人如何將他的需求或愿望告訴計(jì)算機(jī)。輸出是指計(jì)算機(jī)如何將它的計(jì)算結(jié)果和需要傳達(dá)給用戶。

用戶界面設(shè)計(jì)與編碼設(shè)計(jì)一樣，一直朝著貼近人的思維模式，貼近現(xiàn)實(shí)世界的方向發(fā)展，其發(fā)展歷程大概也可以分為三個(gè)階段， 從1945計(jì)算機(jī)的誕生到1968年，這是批處理界面（Batch interface）階段，批處理界面是非交互式用戶界面，事先用戶指定了處理工作的所有細(xì)節(jié)，批處理全部完成之后才能得到結(jié)果；1969年開始出現(xiàn)了命令行用戶界面（Command-line User Interface,CUI），用戶通過鍵盤輸入命令字符串，計(jì)算機(jī)處理之后將結(jié)果顯示在監(jiān)視器上，這一技術(shù)一直沿用至今；目前應(yīng)用最為廣泛的是圖形用戶界面（Graphical User Interface,GUI），圖形用戶界面被定義為一種采用了四種基本組件（窗口、圖標(biāo)、菜單和鼠標(biāo)指針）的人機(jī)交互形式，也稱為WIMP界面。過去由于計(jì)算機(jī)硬件的限制，編碼設(shè)計(jì)成為軟件開發(fā)的代名詞，美觀親和的圖形化界面與合理易用的交互方式都沒有得到充分的重視，實(shí)際上這個(gè)時(shí)期的軟件應(yīng)叫做軟件程序，而不是軟件產(chǎn)品。當(dāng)圖形用戶界面技術(shù)逐漸成熟并廣泛應(yīng)用之后，軟件界面設(shè)計(jì)才得到重視。在面向過程編程階段以及面向?qū)ο缶幊屉A段的初期，軟件界面設(shè)計(jì)一般還只是程序員個(gè)人的事情，只有大型的軟件公司才有經(jīng)濟(jì)實(shí)力聘用專門的藝術(shù)設(shè)計(jì)人員參與到軟件界面的美化，但UI設(shè)計(jì)仍然屬于從屬地位。從二十世紀(jì)末至今，得益于基于插件、組件軟件體系結(jié)構(gòu)的確立，有相當(dāng)一部分程序員及藝術(shù)設(shè)計(jì)人員從軟件開發(fā)流程中脫離出來，專注于軟件用戶界面的研究與開發(fā)，形成了一個(gè)獨(dú)立的新興行業(yè)。目前國內(nèi)外流行的“界面換膚”工具非常多，如SkinMagic、SkinFeature、Skin++、AppFace、SkinCrafter、ActiveSkin等等，這些換膚產(chǎn)品的出現(xiàn)一方面使軟件的界面更加符合用戶的心理及視覺需求，另一方面也使程序員可以致力于軟件功能的研究開發(fā)上，提高了軟件生產(chǎn)效率。

軟件界面設(shè)計(jì)是軟件設(shè)計(jì)中一個(gè)重要的組成部分，一個(gè)友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離。界面設(shè)計(jì)不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶服務(wù)，是純粹的、科學(xué)性的藝術(shù)設(shè)計(jì)與程序設(shè)計(jì)。軟件界面設(shè)計(jì)行業(yè)的確立以及界面設(shè)計(jì)研究的開展，標(biāo)志著軟件界面設(shè)計(jì)實(shí)現(xiàn)了由功能目的型向藝術(shù)設(shè)計(jì)型的巨大飛躍。

軟件界面設(shè)計(jì)雖然帶有強(qiáng)烈的個(gè)人色彩，是設(shè)計(jì)人員與用戶之間思維交流的具體體現(xiàn)，但有些基本的設(shè)計(jì)原則還是相通的。

二、軟件界面的色彩

美觀漂亮是軟件界面設(shè)計(jì)者不懈追求的目標(biāo)。和諧的畫面色彩，形象的三維圖案，得體的文字將營造出一個(gè)簡便、舒適的使用環(huán)境。為了達(dá)到這一目標(biāo)，色彩的使用應(yīng)遵循一定的原則：

（１）顏色種類應(yīng)適中。軟件界面設(shè)計(jì)過程中顏色的種類不能過多也不能過少，過多的顏色使人感覺界面凌亂，沒有重點(diǎn)；過少的顏色又使界面顯得單調(diào)。一個(gè)軟件到底需要多少種顏色合適目前沒有一個(gè)確定的標(biāo)準(zhǔn)，依賴于界面設(shè)計(jì)人員的審美能力。

（２）配色方案應(yīng)符合用戶的心理特征。以人為本的用戶原則貫穿于軟件開發(fā)的始末。配色也是如此，應(yīng)該針對軟件類型以及用戶工作環(huán)境選擇恰當(dāng)?shù)纳{(diào)和配色方案。因?yàn)椴煌纳示哂胁煌母星樘卣?，會對人產(chǎn)生不同的影響。如：黃色代表安全，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫；用戶群體為知識分子的軟件界面應(yīng)以冷靜的顏色為主，如咖啡色，深藍(lán)色等，而青少年使用的軟件界面應(yīng)配上鮮艷活潑的色彩較為合適，如紅、黃、藍(lán)等。

（３）界面配色應(yīng)具獨(dú)特性。色彩形象的獨(dú)特性，即“個(gè)性”，體現(xiàn)出創(chuàng)新與開拓的精神，不僅加強(qiáng)了軟件的識別性、記憶性以及商業(yè)競爭力，同時(shí)也給用戶一種優(yōu)越感和歸屬感。因此，在進(jìn)行軟件界面設(shè)計(jì)時(shí)千萬要避免“跟風(fēng)”，在充分了解軟件和用戶特性的基礎(chǔ)上，膽大心細(xì)設(shè)計(jì)出獨(dú)具魅力的軟件界面。

（４）界面配色應(yīng)具統(tǒng)一性。同一類型的窗口應(yīng)使用同一種配色方案，應(yīng)避免過分地求異。因?yàn)椴煌视胁煌ㄩL，會直接或間接影響人的情緒、精神和心理活動。有些色彩使人振奮，有些色彩便人悲哀，不同的顏色對人們生理上的刺激是不同的，所以界面設(shè)計(jì)的色調(diào)應(yīng)該是統(tǒng)一的，協(xié)調(diào)的。當(dāng)然，統(tǒng)一并不代表只能有一種顏色，我們可以通過調(diào)整明度、飽和度、小面積使用對比色的方法豐富畫面效果。

三、軟件界面的布局

界面布局就是要將大量的信息（文本、圖像、圖形、圖標(biāo)和控件等）合理地安排在軟件界面上，即在有限的屏幕空間上有結(jié)構(gòu)、合理、科學(xué)地編排一定量信息。試驗(yàn)結(jié)果(Mayhew，1992年)表明，屏幕總體覆蓋度不應(yīng)該超過40％，而分組覆蓋度不應(yīng)該超過62％。界面不能太擁擠，也不能太松散，設(shè)計(jì)時(shí)應(yīng)遵循一定的美學(xué)原理。

（１）簡潔原則。在提供足夠信息量的同時(shí)界面設(shè)計(jì)應(yīng)盡量的簡潔明了，不能給用戶帶來過多的視覺和記憶負(fù)擔(dān)。例如，圖標(biāo)的概念模型要與用戶的認(rèn)知心理相匹配；文本的措辭應(yīng)盡量完整、短小、易于理解；注重存儲于用戶頭腦中同類軟件知識的應(yīng)用；多采用工具欄的自定義，菜單的多級展開方法等。

（２）順序原則。一般來說，人眼習(xí)慣于左右、上下的搜尋掃描運(yùn)動與順時(shí)針方向運(yùn)動。界面布局的順序，也是從左上角開始的。菜單欄及每個(gè)主菜單的下拉菜單的安排，工具欄中工具圖標(biāo)的布局應(yīng)符合人的視覺特點(diǎn)，提高視覺認(rèn)讀效率與準(zhǔn)確度。

（３）規(guī)范原則。屏幕上所有對象，如窗口、按鈕、菜單等處理應(yīng)一致化，使對象的動作可預(yù)期；命令、對話框的顯示以及提示行的位置在一個(gè)應(yīng)用系統(tǒng)中應(yīng)盡量的統(tǒng)一規(guī)范。

（４）平衡原則。注意屏幕上下、左右平衡。局部不能擁擠，過分擁擠會產(chǎn)生視覺疲勞。增加界面平衡的方法有：控制空白區(qū)間與文字區(qū)間的使用比例，減少過度花俏的強(qiáng)調(diào)方式； 將所有的內(nèi)容區(qū)塊置于一個(gè)完整方塊中，使之有整體感。

（５）對比原則。大小差別小時(shí)給人的感覺較沉著溫和，大小差別大時(shí)給人的感覺較鮮明而具有震撼力；明與暗的對比可以突出圖形或文字的地位；粗與細(xì)的對比可以給人一種輕快的樂感。

四、軟件界面的交互性

軟件界面設(shè)計(jì)發(fā)展至今，形成了許多其自身的特色，其中交互性就是一個(gè)重要的方面。此處的交互性并不是傳統(tǒng)意義上的概念，它指的是整個(gè)軟件界面隨用戶的喜好及習(xí)慣不斷調(diào)整，不斷優(yōu)化的智能響應(yīng)方法。

軟件的用戶往往不是一類固定的人群，例如常用的office，Photoshop等，其應(yīng)用范圍之廣以至于軟件界面設(shè)計(jì)人員已經(jīng)沒有辦法去迎合所有用戶的視覺及心理需求。即便是用戶相對固定的專業(yè)軟件，隨著社會的發(fā)展，用戶心境的變遷，其一成不變的軟件界面也會給人一種灰色、憂郁的沉悶感。因此，只有為軟件準(zhǔn)備好一系列漂亮的“衣服”，當(dāng)出現(xiàn)在不同場合時(shí)才可以換上比較適合的一件。例如，軟件界面設(shè)計(jì)人員為某一軟件設(shè)計(jì)了許多的界面，有深色系的、淺色系的、古樸素雅的、鮮艷活潑的等等，用戶可以選擇最貼近于其心理特征的界面，也可以偶爾換成其它界面，體驗(yàn)一把另類的激情。換膚工具是軟件界面交互性功能的重要發(fā)展。

軟件界面的交互性還體現(xiàn)在界面布局方面。屏幕空間非常有限，如何最為科學(xué)地利用屏幕空間一直是界面設(shè)計(jì)中的熱點(diǎn)、難題。浮動工具欄，自動隱藏等技術(shù)在一定程度上緩解了這一矛盾，但仍然未能很好地解決這一難題。對于界面布局，最理想的狀態(tài)為界面上全是用戶所需的，沒有任何多余的內(nèi)容。例如，作者在使用各類軟件時(shí)，文件的保存和打印偏好于使用快捷鍵，此時(shí)工具欄上的這兩個(gè)按鈕顯而易見是“多余”的，但對于偏好于使用工具欄按鈕的用戶來說，這兩個(gè)按鈕不僅不是多余的，而且是必需的。因此軟件還需要具有自學(xué)能力，可以根據(jù)用戶的習(xí)慣來改變界面的布局，不斷地統(tǒng)計(jì)出菜單、按鈕、命令等交互元素的使用頻度，將最為常用的元素調(diào)整到最為顯眼，最容易觸及的地方。因此，智能化方法的引入是軟件界面交互性功能的另一個(gè)重要發(fā)展。

參考文獻(xiàn)

1.肖錕.從軟件開發(fā)的歷史探討其發(fā)展趨勢[J]. 電腦開發(fā)與應(yīng)用,2005,(11):59

2.楊芙清,梅宏,呂建等.淺論軟件技術(shù)發(fā)展[J].電子學(xué)報(bào),2002,30(12A):1901-1903.

3.任建軍.計(jì)算機(jī)軟件界面設(shè)計(jì)中的美學(xué)原則[A]. 2005年工業(yè)設(shè)計(jì)國際會議論文集[C],2005:714-718.

4.陳傳文,余靜貴.計(jì)算機(jī)軟件界面設(shè)計(jì)中的心理學(xué)分析[A]. 2005年工業(yè)設(shè)計(jì)國際會議論文集[C], 2005:752-755.

5.許文娟.淺析軟件界面設(shè)計(jì)中的色彩運(yùn)用[J].電腦知識與技術(shù),2008,4(4):890-891.

6.陳汗青,呂杰鋒.數(shù)碼設(shè)計(jì)藝術(shù)[M].北京:人民美術(shù)出版社,2004.

7.汪海波.用戶為中心的軟件界面的設(shè)計(jì)分析、建模與設(shè)計(jì)分析[D].濟(jì)南:山東大學(xué),2008.

（作者單位：張萍，安陽師范學(xué)院；曾丹，湖南大眾傳媒職業(yè)技術(shù)學(xué)院）

責(zé)任編輯：李薇薇