淺議圖形符號(hào)在人機(jī)交互界面中的應(yīng)用

單筱秋（南京藝術(shù)學(xué)院 設(shè)計(jì)學(xué)院，江蘇 南京 210013）

淺議圖形符號(hào)在人機(jī)交互界面中的應(yīng)用

單筱秋（南京藝術(shù)學(xué)院 設(shè)計(jì)學(xué)院，江蘇 南京 210013）

在計(jì)算機(jī)WIMP用戶界面中，圖形符號(hào)代表的是文件、程序、網(wǎng)頁或者命令，是一種信息的符號(hào)化表現(xiàn)。在用戶界面的信息傳遞過程中，圖形符號(hào)可以分為圖像符號(hào)（Icon）、標(biāo)識(shí)符號(hào)（Index）和象征符號(hào)（Symbol）三種表征方式。在界面的視覺表現(xiàn)手法上，模仿實(shí)物紋理的符號(hào)擬物化設(shè)計(jì)曾經(jīng)風(fēng)靡一時(shí)，近年來扁平化設(shè)計(jì)逐漸成為主流，以微軟Metro界面為主的很多新設(shè)計(jì)的用戶界面都采用了扁平化設(shè)計(jì)風(fēng)格。

符號(hào)學(xué)；圖像符號(hào)；標(biāo)識(shí)符號(hào)；象征符號(hào)；WIMP用戶界面；擬物化設(shè)計(jì)；扁平化設(shè)計(jì)

一、符號(hào)學(xué)與符號(hào)表征方式

符號(hào)學(xué)的英文Semiotics來源于古希臘語Semiotikos的拼寫，人們?cè)诤茉绲臅r(shí)候就開始對(duì)符號(hào)進(jìn)行研究，古羅馬時(shí)期的思想家圣·奧勒留·奧古斯丁說過:“符號(hào)是這樣一種東西，它使我們想到這個(gè)事物加諸感覺的印象之外的某種事物……即符號(hào)是一個(gè)能讓我們能想起另一個(gè)事物的事物”。符號(hào)學(xué)早期的創(chuàng)始人之一，美國哲學(xué)家查爾斯·桑德斯·皮爾斯認(rèn)為:“整個(gè)宇宙……哪怕不完全是由符號(hào)構(gòu)成，也是充滿了符號(hào)。”從早期的結(jié)繩記事，到古代部落的圖騰儀式以及象形文字的產(chǎn)生，再到我國先秦時(shí)期以一套符號(hào)系統(tǒng)來描述事物狀態(tài)的上古奇書《易經(jīng)》，這些都是人們用符號(hào)形式交流的表現(xiàn)，就像恩斯特·卡西爾在《符號(hào)形式的哲學(xué)》一書中表示的那樣:人類精神文化中的所有形式都是符號(hào)活動(dòng)的產(chǎn)物。符號(hào)作為記號(hào)、標(biāo)記、信息的載體，是人類對(duì)事物認(rèn)識(shí)的媒介，是實(shí)現(xiàn)信息存儲(chǔ)和記憶的工具，也是表達(dá)思想感情的物質(zhì)手段。[1]

現(xiàn)代符號(hào)學(xué)的研究開始于20世紀(jì)初，發(fā)展于20世紀(jì)60年代左右，正式建立符號(hào)學(xué)的標(biāo)志則是1969年1月在巴黎成立的國際符號(hào)學(xué)協(xié)會(huì)（IASS）?，F(xiàn)代符號(hào)學(xué)研究是一門跨領(lǐng)域?qū)W科，其中包含了哲學(xué)、人類學(xué)、邏輯學(xué)、心理學(xué)等眾多學(xué)科領(lǐng)域。結(jié)構(gòu)主義符號(hào)學(xué)的奠基人，瑞典語言學(xué)家弗迪南·德·索緒爾將單一的符號(hào)（Sign）分解兩個(gè)部分:“能指”（Signifier）與“所指”（Signified）。索緒爾認(rèn)為語言符號(hào)不單是連接事物與名稱，而是連接的概念與發(fā)音，“能指”是符號(hào)的語音，“所指”是符號(hào)的意義，也就是說人們通過語言實(shí)際傳達(dá)出來的聲音叫“能指”，而人們?cè)噲D通過語言發(fā)音傳遞出來的概念叫做“所指”。舉個(gè)例子，英文中“Flower”的發(fā)音就是“能指”，因?yàn)榧s定俗成的習(xí)慣被指稱為“花朵”的概念就是“所指”。被認(rèn)為是美國通才的查爾斯·桑德斯·皮爾斯用建立在邏輯理論關(guān)系基礎(chǔ)上的三元化研究方法，對(duì)索緒爾的語言符號(hào)研究沒有涉及的部分進(jìn)行了補(bǔ)充，皮爾斯將符號(hào)定義為符號(hào)本身、符號(hào)媒介物、符號(hào)解釋三個(gè)部分。在皮爾斯的三元化研究中，還將符號(hào)的表征方式分為圖像符號(hào)（Icon）、指示符號(hào)（Index）和象征符號(hào)（Symbol）三大類別，這一概念的形成，對(duì)以后符號(hào)的研究與應(yīng)用產(chǎn)生了非常深遠(yuǎn)的影響。

二、界面中的符號(hào)化表現(xiàn)

最早期的計(jì)算機(jī)界面是將所有的數(shù)據(jù)預(yù)先設(shè)置成程序或者命令行參數(shù)中，通過鍵盤輸入指令，計(jì)算機(jī)接到指令后出現(xiàn)反饋界面，這稱為命令行界面。圖形用戶界面的概念始于1970年美國施樂（Xerox）公司的帕克研究中心（Palo Alto Research Center，全名為帕洛阿爾托研究中心）完成的第一個(gè)WIMP界面演示，由此計(jì)算機(jī)從命令行界面發(fā)展到了圖形用戶界面。WIMP界面是人機(jī)互動(dòng)領(lǐng)域中最常用的圖形用戶界面，微軟的Windows操作系統(tǒng)、蘋果電腦的Mac OS操作系統(tǒng)、甚至其它以X Window為基礎(chǔ)的操作系統(tǒng)，都采用WIMP界面。WIMP的命名方式是由“視窗”、“圖標(biāo)”、“選單”以及“指標(biāo)”這個(gè)四個(gè)英文單詞的首個(gè)大寫字母所組成的英文縮寫，除此之外WIMP界面還包含了按鈕、工具列和對(duì)話框這三種元件。

在WIMP界面中，圖形符號(hào)代表的是文件、程序、網(wǎng)頁或者命令，表現(xiàn)的是一種信息的圖形符號(hào)化。圖形符號(hào)的三種表征方式即圖像符號(hào)、指示符號(hào)和象征符號(hào)，也同樣適用在用戶界面中。圖像符號(hào)的信息傳遞是建立在與對(duì)象外觀造型相似性的基礎(chǔ)上，通過模擬的方法來表達(dá)，可以直接傳遞信息。例如在汽車駕駛室內(nèi)，可以看到操縱桿、儀表盤、按鈕和開關(guān)等地方有各種圖像符號(hào)，方便駕駛?cè)藛T及時(shí)了解汽車各個(gè)系統(tǒng)的運(yùn)行狀況。在界面設(shè)計(jì)中，圖像符號(hào)體現(xiàn)為直接采用現(xiàn)實(shí)生活中物體的外部形態(tài)來描述該物體所具有的功能，例如常用垃圾桶來表示回收不需要的資料，用文件夾來表示文檔的收集，用工業(yè)齒輪表示系統(tǒng)設(shè)置。在預(yù)報(bào)天氣應(yīng)用程序中，用水滴表示下雨，用太陽表示晴天，用云朵表示多云，等等，這些都是圖像符號(hào)。由于圖像符號(hào)與所要表達(dá)事物之間具有直觀簡(jiǎn)明的關(guān)系，保證了信息傳遞的準(zhǔn)確性和易讀性，受到普通大眾的歡迎，因此圖像符號(hào)廣泛應(yīng)用在計(jì)算機(jī)用戶界面中。

指示符號(hào)與圖像符號(hào)有所不同，它不是對(duì)事物外部造型進(jìn)行簡(jiǎn)單的直接模擬，而是與被表達(dá)信息之間存在著某種內(nèi)在的關(guān)聯(lián)，比如邏輯關(guān)系、因果關(guān)系或者空間關(guān)系等。[2]數(shù)學(xué)符號(hào)就是典型的指示符號(hào)，數(shù)學(xué)符號(hào)的種類繁多，除了比較簡(jiǎn)單的加、減、乘、除等運(yùn)算符號(hào)，還包括關(guān)系符號(hào)、結(jié)合符號(hào)、性質(zhì)符號(hào)等。公共導(dǎo)向系統(tǒng)是我們生活中常見的指示符號(hào)，大寫字母“P”是停車場(chǎng)的指示符號(hào)，水平、垂直或者彎曲的箭頭是行走道路方向的指示符號(hào)，“門”是建筑物出口的指示符號(hào)，等等。在計(jì)算機(jī)用戶界面中沿用了公共導(dǎo)向系統(tǒng)中箭頭對(duì)方向的指示性功能，左右方向的箭頭表示前進(jìn)與后退，上下方向的箭頭表示上一頁或者下一頁，旋轉(zhuǎn)的箭頭表示刷新或者撤回。在播放器的界面中也有很多指示符號(hào)，例如雙豎線表示暫定播放，單箭頭表示開始播放，單箭頭加豎線表示快進(jìn)或者快退?？傊?jì)算機(jī)用戶界面中的指示符號(hào)隨處可見，各種交互控件如搜索欄、狀態(tài)欄、導(dǎo)航欄、工具欄、標(biāo)簽欄上帶有功能性的小按鈕，都屬于指示符號(hào)。

象征符號(hào)是圖形符號(hào)中最抽象的表意符號(hào)，它所傳遞的信息與其外部形態(tài)上并沒有相似之處，也不存在邏輯性的聯(lián)系，而是在特定的文化背景中和長期社會(huì)實(shí)踐中所形成的一種主觀默認(rèn)的關(guān)系和社會(huì)風(fēng)俗習(xí)慣的表達(dá)，所以象征符號(hào)往往表達(dá)的是更深層次的潛在含義。[2]祭祀儀式就是原始部落的人們所營造的一個(gè)由符號(hào)構(gòu)成的精神世界，祭祀儀式中的崇拜圖騰可以認(rèn)為是最早的象征符號(hào)，原始部落的人們認(rèn)為，圖騰是具有某種自然物或者祖先、保護(hù)神等存在的載體，是作為一種主觀臆想的表現(xiàn)形式的存在。在現(xiàn)代社會(huì)中，公司的標(biāo)志、產(chǎn)品的品牌、國家的國旗與國徽、運(yùn)動(dòng)會(huì)的會(huì)徽、會(huì)旗、會(huì)歌、吉祥物等也都屬于象征符號(hào)。在計(jì)算機(jī)用戶界面中，不同公司研發(fā)的系統(tǒng)也會(huì)在界面中使用一些特定的功能性象征符號(hào)，例如蘋果公司的Mac OS系統(tǒng)操作界面中，在界面的左上角工具欄處用黑色蘋果圖標(biāo)表示系統(tǒng)的屬性設(shè)置，微軟公司則會(huì)使用自家公司經(jīng)典的“窗戶”圖標(biāo)作為Windows系統(tǒng)的屬性設(shè)置，這些圖標(biāo)都屬于象征符號(hào)。象征符號(hào)往往含有很強(qiáng)的主觀意味和心理內(nèi)容，傳遞的是社會(huì)中約定俗成的含義。我們?cè)谟脩艚缑嬷惺褂脠D形符號(hào)的時(shí)候，需要注意宗教文化背景和生活習(xí)慣的地域性差異，導(dǎo)致世界上各個(gè)民族對(duì)于符號(hào)元素的不同理解，留意在全球化趨勢(shì)中象征符號(hào)運(yùn)用的差別性。

三、擬物化設(shè)計(jì)與扁平化設(shè)計(jì)

計(jì)算機(jī)用戶界面中的圖形符號(hào)其表現(xiàn)形式可以分為兩種，一種是界面模仿實(shí)物紋理的符號(hào)擬物化（Skeuomorphism）設(shè)計(jì)；另一種是以平面圖形為主的符號(hào)扁平化（Metro Design）設(shè)計(jì)。擬物化設(shè)計(jì)是用一種通用事物的具體形象來表示，視覺上為了盡量還原物品本身的樣子，通過對(duì)真實(shí)物體的色彩、材質(zhì)、質(zhì)感甚至是光感的模擬，進(jìn)行虛擬視覺符號(hào)的再設(shè)計(jì)，一般體現(xiàn)為有厚度和透視感的立體圖形。蘋果公司的創(chuàng)始人史蒂夫·喬布斯就是擬物化設(shè)計(jì)概念的倡導(dǎo)者和領(lǐng)導(dǎo)者，他認(rèn)為擬物化的界面設(shè)計(jì)可以讓用戶立刻就可以知道這些軟件是用來做什么的。早期的蘋果電腦桌面系統(tǒng)中就已經(jīng)開始采用一些擬物化的應(yīng)用圖標(biāo)，1985年，喬布斯離開蘋果公司，導(dǎo)致擬物化設(shè)計(jì)不再作為蘋果公司的設(shè)計(jì)原則，隨后喬布斯創(chuàng)立了自己的科技公司NeXT，在他的帶領(lǐng)下繼續(xù)研發(fā)擬物化設(shè)計(jì)的用戶界面，該公司研發(fā)的NeXT OS用戶界面的優(yōu)化程度和用戶友好程度曾經(jīng)在當(dāng)時(shí)的市場(chǎng)上獨(dú)霸一方，其功能甚至比在14年后微軟發(fā)布的Windows XP還強(qiáng)大。1997年，喬布斯回歸蘋果公司后，在NeXT Software的基礎(chǔ)上，發(fā)布了蘋果公司Mac OS 7系統(tǒng)，值得一提的是喬布斯的歸來使得界面擬物化概念的設(shè)計(jì)重新回到蘋果公司，之后發(fā)布的Mac OS 8則是當(dāng)時(shí)市面上首個(gè)擁有三維圖標(biāo)外觀的用戶界面軟件系統(tǒng)。

因此不難發(fā)現(xiàn)，在喬布斯時(shí)代蘋果產(chǎn)品的用戶界面幾乎全部都是采用擬物化設(shè)計(jì)，其中最具代表性的就是iPhone軟件應(yīng)用界面，Keynote的應(yīng)用圖標(biāo)是一個(gè)講臺(tái)上放著一張演講稿和話筒設(shè)備；備忘錄的應(yīng)用圖標(biāo)看上去就像是一個(gè)真正的便簽本；iBook應(yīng)用看起來和現(xiàn)實(shí)生活中的書架一模一樣，甚至連木頭的質(zhì)感都視覺模擬出來；iMovie則是結(jié)合了舞臺(tái)、幕布、聚光燈、攝像機(jī)還有好萊塢星光大道上的五角星元素組合而成的電影制作應(yīng)用圖標(biāo)，這些無一不是擬物化的符號(hào)設(shè)計(jì)。在擬物化符號(hào)設(shè)計(jì)中，既有對(duì)原物品外形的真實(shí)描述，也有對(duì)該物品所帶來的潛在含義的考慮，例如蘋果系統(tǒng)中瀏覽器Safari的圖標(biāo)就是一個(gè)充滿金屬拉絲感的指南針形象，因?yàn)橹改厢槙?huì)讓人聯(lián)想到航海，于是作為瀏覽器功能的指南針圖標(biāo)仿佛給人傳遞了這樣一個(gè)信息:只要用戶打開瀏覽器，就可以在知識(shí)的海洋里暢游。當(dāng)然，界面擬物化設(shè)計(jì)除了在視覺符號(hào)中添加漸變、投影等效果，還會(huì)加入很多仿真的人機(jī)互動(dòng)，例如當(dāng)用戶點(diǎn)擊界面按鈕的時(shí)候，就會(huì)出現(xiàn)模仿現(xiàn)實(shí)生活中按鈕向下的動(dòng)態(tài)效果；當(dāng)用戶閱讀電子讀物的時(shí)候，界面會(huì)呈現(xiàn)模擬紙張翻閱的動(dòng)態(tài)過程，這些都可以增加界面視覺上的逼真程度，傳達(dá)豐富的人性化情感，讓用戶在使用的時(shí)候感到親切，正如喬布斯所認(rèn)為的那樣:擬物化的界面設(shè)計(jì)可以讓用戶更加輕松的使用。

扁平化設(shè)計(jì)是以平面圖形化設(shè)計(jì)為主，其最早的設(shè)計(jì)靈感來源或許可以追溯到上個(gè)世紀(jì)四五十年代風(fēng)靡一時(shí)的瑞士國際主義平面設(shè)計(jì)風(fēng)格（Swiss Style）以及極簡(jiǎn)主義設(shè)計(jì)風(fēng)格（Minimalist Design）。扁平化設(shè)計(jì)顧名思義就是界面中的圖形符號(hào)都是以二維形式呈現(xiàn)的，沒有任何多余的元素，沒有包括透視、紋理、漸變、陰影、凹凸、立體等額外的視覺裝飾，只是通過對(duì)物體主要特征的模擬，從而讓信息本身作為設(shè)計(jì)的核心被凸顯出來。在扁平化設(shè)計(jì)風(fēng)格的用戶界面中，圖形符號(hào)是用最簡(jiǎn)單抽象的平面圖形表現(xiàn)該物體最明顯的特征，因此圖形符號(hào)強(qiáng)調(diào)的是抽象化和簡(jiǎn)單化。

微軟公司作為扁平化界面用戶體驗(yàn)的開拓者，在2006年的時(shí)候，為了區(qū)別于蘋果公司產(chǎn)品的擬物化界面設(shè)計(jì)，推出的Zune音樂播放器首先采用了扁平化風(fēng)格的界面設(shè)計(jì)，微軟將其命名為Metro界面。Metro Design最早出現(xiàn)在瑞士的公共交通系統(tǒng)中，這種扁平化的導(dǎo)航設(shè)計(jì)隨后廣泛應(yīng)用在全球的交通系統(tǒng)中，后來微軟的設(shè)計(jì)師在乘坐地鐵的時(shí)候發(fā)現(xiàn)了這種設(shè)計(jì)風(fēng)格，并把它用在了界面設(shè)計(jì)中，所以扁平化設(shè)計(jì)又被稱為Metro Design。其后微軟推出的 Windows Phone、 Windows 8 以及Windows RT的Metro界面都可以稱作扁平化設(shè)計(jì)的典范。以微軟手機(jī)為例，界面中通話功能的圖標(biāo)是電話機(jī)的聽筒，拍照功能的圖標(biāo)是一個(gè)簡(jiǎn)單的照相機(jī)的外形，同時(shí)在色彩上以單色圖標(biāo)為主，通過不同的背景色加以區(qū)別圖標(biāo)的具體功能，這樣使得用戶界面變得更加干凈整齊，使用起來簡(jiǎn)單明了，并且可以有效減少用戶的認(rèn)知障礙，帶來更佳的操作體驗(yàn)。近年來很多新設(shè)計(jì)的用戶界面都采用扁平化設(shè)計(jì)風(fēng)格，尤其是蘋果iOS 7操作系統(tǒng)的發(fā)布，宣告蘋果公司徹底放棄了擬物化的界面設(shè)計(jì)，由此扁平化設(shè)計(jì)開始成為界面設(shè)計(jì)的主流風(fēng)格。

[1]吳芳,張曉琳,張靖.中國傳統(tǒng)元素符號(hào)對(duì)平面設(shè)計(jì)的啟發(fā)[J].美術(shù)教育研究,2014(3):109-109.

[2]Tencent CDC.淺析圖標(biāo)的微觀世界-從符號(hào)學(xué)說起[EB/OL].2012-01-05.http://cdc.tencent.com.

J524

A

1008-9675（2017）06-0185-03

2017-07-20

單筱秋（1983-），女，江蘇南通人，南京藝術(shù)學(xué)院設(shè)計(jì)學(xué)院講師。研究方向:視覺傳達(dá)設(shè)計(jì)。

（責(zé)任編輯:王 璇）