現(xiàn)代軟件界面設(shè)計(jì)的歷史及藝術(shù)特性

張萍 曾丹

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

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

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

軟件開(kāi)發(fā)可分為兩大部分：編碼設(shè)計(jì)與UI設(shè)計(jì)。以上介紹的是編碼設(shè)計(jì)，這是大家所熟悉，但UI設(shè)計(jì)對(duì)大部分人來(lái)說(shuō)都是個(gè)陌生的概念，直到目前為止，做UI設(shè)計(jì)的人仍被貶稱(chēng)為“美工”。UI的本意是用戶界面，用戶界面設(shè)計(jì)是人機(jī)交互（Human-Computer Interaction，HCI）領(lǐng)域的一個(gè)子學(xué)科。人機(jī)交互是一門(mén)研究、規(guī)劃和設(shè)計(jì)如何讓人與計(jì)算機(jī)協(xié)同工作，以最高效的方式滿足人的需求的學(xué)科。具體來(lái)說(shuō)，用戶界面是指計(jì)算機(jī)及其軟件中人們可以看到，聽(tīng)到，觸摸到，與其交談，或者進(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年開(kāi)始出現(xiàn)了命令行用戶界面（Command-line User Interface,CUI），用戶通過(guò)鍵盤(pán)輸入命令字符串，計(jì)算機(jī)處理之后將結(jié)果顯示在監(jiān)視器上，這一技術(shù)一直沿用至今；目前應(yīng)用最為廣泛的是圖形用戶界面（Graphical User Interface,GUI），圖形用戶界面被定義為一種采用了四種基本組件（窗口、圖標(biāo)、菜單和鼠標(biāo)指針）的人機(jī)交互形式，也稱(chēng)為WIMP界面。過(guò)去由于計(jì)算機(jī)硬件的限制，編碼設(shè)計(jì)成為軟件開(kāi)發(fā)的代名詞，美觀親和的圖形化界面與合理易用的交互方式都沒(méi)有得到充分的重視，實(shí)際上這個(gè)時(shí)期的軟件應(yīng)叫做軟件程序，而不是軟件產(chǎn)品。當(dāng)圖形用戶界面技術(shù)逐漸成熟并廣泛應(yīng)用之后，軟件界面設(shè)計(jì)才得到重視。在面向過(guò)程編程階段以及面向?qū)ο缶幊屉A段的初期，軟件界面設(shè)計(jì)一般還只是程序員個(gè)人的事情，只有大型的軟件公司才有經(jīng)濟(jì)實(shí)力聘用專(zhuān)門(mén)的藝術(shù)設(shè)計(jì)人員參與到軟件界面的美化，但UI設(shè)計(jì)仍然屬于從屬地位。從二十世紀(jì)末至今，得益于基于插件、組件軟件體系結(jié)構(gòu)的確立，有相當(dāng)一部分程序員及藝術(shù)設(shè)計(jì)人員從軟件開(kāi)發(fā)流程中脫離出來(lái)，專(zhuān)注于軟件用戶界面的研究與開(kāi)發(fā)，形成了一個(gè)獨(dú)立的新興行業(yè)。目前國(guó)內(nèi)外流行的“界面換膚”工具非常多，如SkinMagic、SkinFeature、Skin++、AppFace、SkinCrafter、ActiveSkin等等，這些換膚產(chǎn)品的出現(xiàn)一方面使軟件的界面更加符合用戶的心理及視覺(jué)需求，另一方面也使程序員可以致力于軟件功能的研究開(kāi)發(fā)上，提高了軟件生產(chǎn)效率。

軟件界面設(shè)計(jì)是軟件設(shè)計(jì)中一個(gè)重要的組成部分，一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與電腦的距離。界面設(shè)計(jì)不是單純的美術(shù)繪畫(huà)，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶服務(wù)，是純粹的、科學(xué)性的藝術(shù)設(shè)計(jì)與程序設(shè)計(jì)。軟件界面設(shè)計(jì)行業(yè)的確立以及界面設(shè)計(jì)研究的開(kāi)展，標(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)。和諧的畫(huà)面色彩，形象的三維圖案，得體的文字將營(yíng)造出一個(gè)簡(jiǎn)便、舒適的使用環(huán)境。為了達(dá)到這一目標(biāo)，色彩的使用應(yīng)遵循一定的原則：

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

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

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

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

三、軟件界面的布局

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

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

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

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

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

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

四、軟件界面的交互性

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

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

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

參考文獻(xiàn)

1.肖錕.從軟件開(kāi)發(fā)的歷史探討其發(fā)展趨勢(shì)[J]. 電腦開(kāi)發(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ì)國(guó)際會(huì)議論文集[C],2005:714-718.

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

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

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

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

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

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