胡瑩瑩

摘 要：文字形態(tài)是文字個(gè)性及文字圖符化信息展示的主要內(nèi)容，圖符信息又構(gòu)成了網(wǎng)絡(luò)媒體界面設(shè)計(jì)信息傳播的核心部分，如何將兩者嫻熟地應(yīng)用其中，從而推動(dòng)文字形態(tài)在此領(lǐng)域更好的應(yīng)用。文章通過(guò)從“文字形態(tài)”到“圖符信息”設(shè)計(jì)應(yīng)用的深度剖析，從中歸納出網(wǎng)絡(luò)媒體界面設(shè)計(jì)根據(jù)表現(xiàn)主題進(jìn)行創(chuàng)意設(shè)計(jì)的關(guān)鍵、應(yīng)用方法和表現(xiàn)方式，并通過(guò)實(shí)例映證隨著科技的不斷進(jìn)步，網(wǎng)絡(luò)媒體界面設(shè)計(jì)未來(lái)的發(fā)展空間與方向，得出將文字形態(tài)與圖符信息做到內(nèi)容和形式的和諧統(tǒng)一，并配合新技術(shù)的互動(dòng)表現(xiàn)方式將是網(wǎng)絡(luò)媒體界面設(shè)計(jì)發(fā)展的主旋律。

關(guān)鍵詞：文字形態(tài)；圖符信息；設(shè)計(jì)融合；網(wǎng)絡(luò)媒體；界面設(shè)計(jì)

檢 索：www.artdesign.org.cn

中圖分類號(hào)：J0 文獻(xiàn)標(biāo)志碼： A 文章編號(hào)：1008-2832（2014）09-0045-03

Fusion Application of Character Form and Graphical Information in User Interface Design

Hu Ying-ying

（Arts College of Wuchang university of Technology， Wuhan 430223， China）

Abstract ：The character form is the major content of the characters individuality and the characters graphical show， the graphical information is the core of informations dissemination of the network media user interface design， adept application these two in it， to promote the better applications of the character form in this domain. This article through deeply analyzing the application of the design from character form to graphical information， generalizing the key and application method and techniques of expression in creative design of network media user interface based on the theme of expression. By the living examples to confirm the development space and direction of the network media user interface design in future along with the progress of science and technology. The developments main melody of the network media user interface design is letting character form and graphical information are unified harmoniously in content and form， and cooperating with the new technologys interactive techniques of expression.

Key words ：character form； graphical information； fusion design； network media； user interface design

Internet ：www.artdesign.org.cn

從信息傳播的角度，網(wǎng)絡(luò)媒體是依托于Internet，以計(jì)算機(jī)、電視、移動(dòng)終端為載體，以文字、圖形、聲音、多媒體為表現(xiàn)形式的數(shù)字化傳播媒介①。依據(jù)網(wǎng)絡(luò)媒體產(chǎn)品的內(nèi)容表現(xiàn)形式來(lái)看，網(wǎng)絡(luò)媒體界面設(shè)計(jì)所面臨的最大的問(wèn)題就是“字”與“圖”的設(shè)計(jì)創(chuàng)意和融合協(xié)調(diào)的問(wèn)題，網(wǎng)絡(luò)媒體界面設(shè)計(jì)作品的優(yōu)劣與視覺(jué)信息效果傳播的強(qiáng)弱也主要取決于設(shè)計(jì)者對(duì)“文字”與“圖符”的把握能力。本文從“文字形態(tài)”到“圖符信息”設(shè)計(jì)融合這一角度入手，從中梳理出設(shè)計(jì)規(guī)律，找到一種可供網(wǎng)絡(luò)媒體界面選擇的文字信息傳遞設(shè)計(jì)方法。

一、“文字形態(tài)”與“圖符信息”融合的關(guān)鍵是形式與內(nèi)容的高度統(tǒng)一

從“文字形態(tài)”到“圖符信息”設(shè)計(jì)融合的形成條件和過(guò)程來(lái)看，首先需要理解“文字形態(tài)”的圖符化含義。中華文字的起源可追溯到史前時(shí)代的刻畫符號(hào)和陶文，其中甲骨文是我們“古文字”的主要代表，甲骨文的象形程度高，其大部分是象形字或會(huì)意字②。所形成的圖符往往能以相對(duì)固定的形式存在，會(huì)以文字圖像、語(yǔ)言聲音等方式被記錄和傳播。人們可以通過(guò)相對(duì)穩(wěn)定的圖符獲取信息，實(shí)現(xiàn)溝通與交流。如下列舉漢字、英文字母、阿拉伯?dāng)?shù)字三類有代表性的“文字形態(tài)”與“圖符信息”設(shè)計(jì)融合的網(wǎng)絡(luò)媒體界面設(shè)計(jì)案例，論證了兩者的融合在網(wǎng)絡(luò)媒體界面設(shè)計(jì)的應(yīng)用關(guān)鍵是形式與內(nèi)容的高度統(tǒng)一。

從實(shí)例來(lái)說(shuō)明，如圖1（漢字）、圖2（英文字母）、圖3（阿拉伯?dāng)?shù)字），這3組圖例均截取網(wǎng)絡(luò)媒體界面設(shè)計(jì)實(shí)例局部，他們之間的共同點(diǎn)就是界面中的字體設(shè)計(jì)是通過(guò)字體形態(tài)變化，將字形筆劃進(jìn)行圖形和符號(hào)化創(chuàng)作，使之更具信息內(nèi)涵和信息傳遞功能，并通過(guò)組合和動(dòng)態(tài)交互形式充分體現(xiàn)出文字形態(tài)的視覺(jué)信息效果。我們說(shuō)網(wǎng)絡(luò)媒體界面設(shè)計(jì)的基本功能就是信息傳播，而“文字圖符化”在網(wǎng)絡(luò)媒體界面設(shè)計(jì)領(lǐng)域起到重要的作用。endprint

例如圖1，網(wǎng)頁(yè)設(shè)計(jì)中LOGO設(shè)計(jì)其漢字的外型結(jié)構(gòu)采用中國(guó)古典園林建筑的斗拱構(gòu)件，其構(gòu)件單體又以中華書法筆劃組成的基礎(chǔ)元素。由其文字形態(tài)表現(xiàn)出來(lái)的圖符信息傳遞了清晰的建筑行業(yè)特性的界面設(shè)計(jì)的信息內(nèi)容，其文字形態(tài)與圖符信息所達(dá)到的融合效果對(duì)界面設(shè)計(jì)主題展示起到了重要作用。

圖2是網(wǎng)頁(yè)設(shè)計(jì)，圖3是手機(jī)界面設(shè)計(jì)，均屬于網(wǎng)絡(luò)媒體界面范疇，其界面分別是由英文字母及阿拉伯?dāng)?shù)字為主要設(shè)計(jì)元素，前者是網(wǎng)頁(yè)“You Are We”英文YAW的立體縮寫，傳遞了網(wǎng)頁(yè)主題文字信息，重要的是通過(guò)文字形態(tài)的設(shè)計(jì)創(chuàng)造構(gòu)成了一個(gè)全新的視覺(jué)圖形信息導(dǎo)航，并通過(guò)設(shè)計(jì)融合反映出視覺(jué)信息傳遞的基本要求。可貴的是這個(gè)融合形態(tài)不再是平面信息，而是可以360度觀看的立體多維信息。

圖3實(shí)例在數(shù)字字符的表面穿插或附著了代表不同天氣溫度特征的圖符，當(dāng)天氣溫度是23度時(shí)用綠葉和枝條纏繞組成數(shù)字，體現(xiàn)了溫度適宜的圖像特征，當(dāng)天氣溫度是3度時(shí)，在數(shù)字字符上覆蓋一層厚厚的白雪體現(xiàn)著冬天的寒冷，這需要在文字形態(tài)設(shè)計(jì)上考慮視覺(jué)圖形和文字信息如何巧妙地融合，從實(shí)例看出組成文字的形象富有氣候特征，色彩豐富且信息明確，同時(shí)借用動(dòng)態(tài)切換的形式展示出更直觀的視覺(jué)感官體驗(yàn)效果。

網(wǎng)絡(luò)媒體界面設(shè)計(jì)需要文字形態(tài)具有獨(dú)特的視覺(jué)個(gè)性，同時(shí)文字圖形信息又不能脫離應(yīng)用的內(nèi)容要求，做到內(nèi)容和形式的統(tǒng)一，通過(guò)對(duì)文字進(jìn)行形態(tài)構(gòu)建設(shè)計(jì)是解決視覺(jué)圖形緊扣界面設(shè)計(jì)內(nèi)容要求的最為有效的方法，所以將兩者通過(guò)設(shè)計(jì)融合手段是網(wǎng)絡(luò)媒體界面設(shè)計(jì)的必然路徑。

“文字形態(tài)”的圖符信息化含義從本質(zhì)上理解就是將文字的每一個(gè)基礎(chǔ)筆劃設(shè)計(jì)成一個(gè)獨(dú)立單元，構(gòu)成字型的原始信息元素，再進(jìn)行圖符化構(gòu)建。瑞士人厄斯特·凱勒認(rèn)為設(shè)計(jì)的問(wèn)題就是形式與內(nèi)容的高度統(tǒng)一，而字體圖形就是最客觀、明確、有效的圖形傳達(dá)語(yǔ)言③字體作為圖符信息表現(xiàn)是網(wǎng)絡(luò)媒體界面設(shè)計(jì)最重要的構(gòu)成元素，能向目標(biāo)人群傳遞明確的信息，且簡(jiǎn)要生動(dòng)，達(dá)到界面設(shè)計(jì)圖符與文字的高度和諧。如上3個(gè)“文字形態(tài)”的圖符案例說(shuō)明了文字在界面設(shè)計(jì)領(lǐng)域的作用與價(jià)值，這個(gè)價(jià)值需同視覺(jué)圖符信息應(yīng)用形成一體并融合到界面設(shè)計(jì)系統(tǒng)中才能做到設(shè)計(jì)價(jià)值的最大化。

二、圖文融合的網(wǎng)絡(luò)媒體界面設(shè)計(jì)應(yīng)用方法

圖文融合是“文字形態(tài)”和“圖符信息”兩者在網(wǎng)絡(luò)媒體界面設(shè)計(jì)中的相互作用的體現(xiàn)，并由此產(chǎn)生的視覺(jué)融合現(xiàn)象，其著力點(diǎn)在于視覺(jué)形態(tài)的表現(xiàn)力上。這里所談到的“形態(tài)”是兩者獨(dú)立信息的融合體，“文字形態(tài)”是可以通過(guò)設(shè)計(jì)構(gòu)建發(fā)展為“圖符信息”的?！皥D符信息”也可由設(shè)計(jì)造型與結(jié)構(gòu)特性帶來(lái)，在一定范圍內(nèi)也能傳遞明確的信息主題。對(duì)網(wǎng)絡(luò)媒體界面設(shè)計(jì)項(xiàng)目而言，只有讓兩者有效結(jié)合產(chǎn)生融合效果，才能做出優(yōu)秀用戶體驗(yàn)的界面設(shè)計(jì)。故而，我們說(shuō)這個(gè)主題信息傳遞是可通過(guò)設(shè)計(jì)融合直接作用于界面視覺(jué)信息設(shè)計(jì)中，圖文融合對(duì)網(wǎng)絡(luò)媒體界面信息設(shè)計(jì)的方法可從下列三個(gè)方面來(lái)論述：

（一）對(duì)文字信息設(shè)計(jì)形態(tài)的把握

根據(jù)“文字形態(tài)”和“圖符信息”融合的設(shè)計(jì)原則，做到內(nèi)容與形式的統(tǒng)一，表述的每個(gè)網(wǎng)絡(luò)媒體界面設(shè)計(jì)的整體形態(tài)和設(shè)計(jì)圖形應(yīng)是高度一致的，向外傳遞的信息也應(yīng)該是明確簡(jiǎn)潔的，只有這樣才能在界面的信息識(shí)別度起到功效。 圖4案例的視覺(jué)圖形外型就是左上角界面主體的LOGO，是由主頁(yè)力求宣傳展示的成功案例拼合而成，文字信息設(shè)計(jì)在整體效果上起到了重要作用，作為一個(gè)成功的企業(yè)導(dǎo)航界面既向用戶傳達(dá)了公司的經(jīng)營(yíng)范疇和成功案例又凸顯了企業(yè)的宣傳LOGO符號(hào)，此案例將圖符信息和文字形態(tài)構(gòu)成了整體一致的融合形態(tài)，做到了內(nèi)容與形式的和諧統(tǒng)一。

（二）掌握全新、全面的設(shè)計(jì)方法和技術(shù)手段

我們說(shuō)網(wǎng)絡(luò)媒體產(chǎn)品是以計(jì)算機(jī)、電視、移動(dòng)終端為載體，這類終端產(chǎn)品具備藝術(shù)設(shè)計(jì)、信息技術(shù)、大眾傳播和社會(huì)服務(wù)四種特性④。在藝術(shù)設(shè)計(jì)與現(xiàn)代科技相適應(yīng)的今天，科技在發(fā)展，人們使用的各種智能終端產(chǎn)品需求也日益多樣化，人們的感官和體驗(yàn)已不僅局限于平面視覺(jué)體驗(yàn)，如信息傳播技術(shù)、自動(dòng)化控制技術(shù)、圖像轉(zhuǎn)換技術(shù)、物聯(lián)網(wǎng)技術(shù)等都是更好用戶體驗(yàn)的必要技術(shù)支撐。所以當(dāng)我們?cè)谠O(shè)計(jì)初期就應(yīng)該對(duì)設(shè)計(jì)方法和技術(shù)手段進(jìn)行分析與思考，找到最新的表現(xiàn)形式和最適合的技術(shù)手段的融合方法。從上面幾個(gè)案例分析我們能領(lǐng)會(huì)到不同的文字形態(tài)設(shè)計(jì)和視覺(jué)要求對(duì)不同技術(shù)要求也是不同的，圖1是使用平面繪圖軟件設(shè)計(jì)，圖2是三維繪圖設(shè)計(jì)制作，圖3和圖4是通過(guò)繪圖軟件和軟件開發(fā)系統(tǒng)結(jié)合的產(chǎn)物。

因此“文字形態(tài)”的圖形信息量是需要通過(guò)創(chuàng)新設(shè)計(jì)激發(fā)出來(lái)，而設(shè)計(jì)方法和技術(shù)手段是激發(fā)“文字形態(tài)”的重要手段，圖符信息量要更好地表現(xiàn)設(shè)計(jì)主題，設(shè)計(jì)師需要具有與時(shí)俱進(jìn)的各種繪圖和開發(fā)技術(shù)應(yīng)用的綜合經(jīng)驗(yàn)，這是優(yōu)秀網(wǎng)絡(luò)媒體界面設(shè)計(jì)創(chuàng)作的必要條件。

（三）交互藝術(shù)體驗(yàn)?zāi)芴嵘W(wǎng)絡(luò)媒體界面設(shè)計(jì)的設(shè)計(jì)深度

交互藝術(shù)認(rèn)為人們作為用戶扮演的角度是多重的、可變的，并把用戶看成是設(shè)計(jì)中不可缺少的一部分，強(qiáng)調(diào)受眾的積極性、主動(dòng)性和能動(dòng)性，用戶參與到設(shè)計(jì)中并通過(guò)互動(dòng)操作使作品本身發(fā)生可逆或不可逆的變化，從而產(chǎn)生實(shí)時(shí)的、可變的藝術(shù)效果⑤ 。我們說(shuō)的交互式藝術(shù)“形態(tài)”是可以應(yīng)用到各種網(wǎng)絡(luò)媒體終端產(chǎn)品界面中，如手機(jī)、電腦、Pad、電視等多類網(wǎng)絡(luò)媒體終端產(chǎn)品，其終端產(chǎn)品都具有展現(xiàn)大容量信息資源的條件。依據(jù)各類網(wǎng)絡(luò)媒體界面設(shè)計(jì)的不同需求，“文字形態(tài)”交互式體驗(yàn)應(yīng)用可通過(guò)多種現(xiàn)代科技創(chuàng)新成果和技術(shù)支持來(lái)實(shí)現(xiàn)，文字圖符信息的激活最直接的路徑就是創(chuàng)新設(shè)計(jì)，并結(jié)合動(dòng)態(tài)人機(jī)交互式深度體驗(yàn)設(shè)計(jì)，與用戶產(chǎn)生互動(dòng)，在這樣的設(shè)計(jì)創(chuàng)意環(huán)境中的“文字形態(tài)”本質(zhì)上就有別于普通藝術(shù)設(shè)計(jì)對(duì)文字的要求，對(duì)文字設(shè)計(jì)的靜態(tài)和動(dòng)態(tài)交互式應(yīng)用也就自然將網(wǎng)絡(luò)媒體界面設(shè)計(jì)提升到一個(gè)新的高度。endprint

三、網(wǎng)絡(luò)媒體界面設(shè)計(jì)的文字及圖符的互動(dòng)表現(xiàn)方式

網(wǎng)絡(luò)媒體界面設(shè)計(jì)項(xiàng)目中，文字應(yīng)用形態(tài)表現(xiàn)首要條件并不是文字字體本身設(shè)計(jì)多么的花哨，而是給人感官上的整體用戶體驗(yàn)，其中互動(dòng)體驗(yàn)在網(wǎng)絡(luò)媒體界面設(shè)計(jì)的應(yīng)用極其出彩，如下通過(guò)文字在網(wǎng)絡(luò)媒體界面作為圖形的融合應(yīng)用的實(shí)例，從多維感官的用戶體驗(yàn)角度入手，闡述互動(dòng)體驗(yàn)在網(wǎng)絡(luò)媒體界面設(shè)計(jì)上的四種表現(xiàn)方式。

（一）圖像觸控交互表現(xiàn)方式

圖像觸控交互，即圖形與影像的交互式觸發(fā)。圖五是以文字作為網(wǎng)頁(yè)主體，同時(shí)也是網(wǎng)站的LOGO圖符，用戶通過(guò)鼠標(biāo)滑過(guò)、點(diǎn)擊文字后形成不規(guī)則的文字碎片化的圖形動(dòng)態(tài)交互表現(xiàn)，模擬物理力學(xué)不同的動(dòng)作和力度將文字圖符的局部形狀打散成意想不到的碎片化圖形效果，碎片在空間中同時(shí)也有前后關(guān)系，讓用戶有一種游戲參與感的用戶體驗(yàn)，從而對(duì)網(wǎng)頁(yè)主題的文字字符記憶深刻，此案例就是通過(guò)交互式觸碰對(duì)字體產(chǎn)生的新的視覺(jué)圖形造型模式。圖6則是鼠標(biāo)移動(dòng)在界面區(qū)域時(shí)觸發(fā)經(jīng)過(guò)時(shí)的版塊影像即開始播放，動(dòng)態(tài)影像的交互方式更加耳目一新，給人以深刻的印象。兩事例文字與圖形的整體視覺(jué)效果統(tǒng)一，主題深刻、文字信息量與交互動(dòng)態(tài)展示融合和諧。

（二）綜合信息交互表現(xiàn)方式

綜合信息交互包括用戶參與改變網(wǎng)絡(luò)媒體界面中圖形和字符的明暗、顏色和屬性等互動(dòng)性的交互操作方式。圖7是以多個(gè)文字聚散構(gòu)成的圖形作為網(wǎng)頁(yè)的動(dòng)態(tài)交互背景存在，用戶可以參與改變背景右上角的字符飛出的頻率、大小、顏色等交互式體驗(yàn)，此案例是文字形態(tài)與視覺(jué)圖符又一動(dòng)態(tài)交互式應(yīng)用的生動(dòng)展現(xiàn)，此界面不僅能通過(guò)用戶不同力的大小，干預(yù)字符在空中自然翻滾飛出的軌跡，沒(méi)有任何輔助圖形，只通過(guò)文字在空中的聚散構(gòu)成交互式動(dòng)態(tài)背景圖形信息，并能讓用戶自由選擇變換黑白背景、字符顏色、字符信息等綜合信息，通過(guò)改變局部字符的綜合信息，由變化的字符元素構(gòu)成了豐富多彩的圖像變化，讓用戶參與在動(dòng)態(tài)的交互式的界面中，獲得獨(dú)特的參與性體驗(yàn)的信息傳達(dá)的效果，感官體驗(yàn)上非常獨(dú)特。

（三）無(wú)形感官體驗(yàn)的交互表現(xiàn)方式

此方式是展示動(dòng)態(tài)式交互界面不可或缺的無(wú)形感官交互體驗(yàn)，它涵蓋除視覺(jué)感官外的所有無(wú)形體驗(yàn)，如聽(tīng)覺(jué)、觸覺(jué)、味覺(jué)等感官體驗(yàn)。

視聽(tīng)感官是在滿足視覺(jué)感官的同時(shí)，滿足聽(tīng)覺(jué)感官的視聽(tīng)體驗(yàn)。不僅能通過(guò)音效烘托界面主題，而且有些音效在某些特定界面起到功能性作用。界面中點(diǎn)擊按鈕反饋發(fā)出的音效就是最原始的聽(tīng)覺(jué)交互方式，還有網(wǎng)頁(yè)的背景音樂(lè)，雖然音效是無(wú)形的但在烘托界面主題方面起到了很大的作用。圖8即是通過(guò)點(diǎn)擊界面中的耳機(jī)圖符，示意用戶點(diǎn)擊按鈕以了解空中飛舞的字符的閱讀發(fā)音，配合字符背景在界面的文字識(shí)別上起到了發(fā)音指導(dǎo)的功能，這樣功能性的音效交互方式在一些英文學(xué)習(xí)網(wǎng)站也比比皆是。所以音效表現(xiàn)是當(dāng)今主流視覺(jué)感觀網(wǎng)絡(luò)媒體界面最主要的補(bǔ)充形式。

科學(xué)技術(shù)在不斷進(jìn)步，人們的體驗(yàn)需求也會(huì)提升，在滿足視覺(jué)和聽(tīng)覺(jué)交互的用戶體驗(yàn)的同時(shí)，現(xiàn)階段觸覺(jué)和味覺(jué)感官交互裝置的研究已初見(jiàn)端倪，增強(qiáng)交互體驗(yàn)的三維虛擬現(xiàn)實(shí)技術(shù)也日益成熟，這些都已為未來(lái)交互式全方位感官體驗(yàn)的開發(fā)提出了重要研究方向，并為網(wǎng)絡(luò)媒體界面設(shè)計(jì)的動(dòng)態(tài)交互表現(xiàn)提供全息的感官體驗(yàn)。

項(xiàng)目來(lái)源：湖北省教育廳科研計(jì)劃項(xiàng)目，項(xiàng)目編號(hào)：B2014133.

注釋：

①?gòu)堛戃?著.數(shù)字媒體導(dǎo)論[M].北京：人民郵電出版社，2013：100-101.

②劉方義.主編.字體設(shè)計(jì)[M].南京：江蘇美術(shù)出版社，2013：4-5.

③王汀.編著.版面構(gòu)成[M].廣州：廣東人民出版社，2000：3-4.

④張銘芮.著.數(shù)字媒體導(dǎo)論[M].北京：人民郵電出版社，2013：97-98.

⑤李四達(dá).編著.交互設(shè)計(jì)概論[M].北京：清華大學(xué)出版社，2009：231-232.endprint