文字形態與圖符信息在網絡媒體界面設計的融合應用

胡瑩瑩

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

關鍵詞：文字形態；圖符信息；設計融合；網絡媒體；界面設計

檢 索：www.artdesign.org.cn

中圖分類號：J0 文獻標志碼： A 文章編號：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

從信息傳播的角度，網絡媒體是依托于Internet，以計算機、電視、移動終端為載體，以文字、圖形、聲音、多媒體為表現形式的數字化傳播媒介①。依據網絡媒體產品的內容表現形式來看，網絡媒體界面設計所面臨的最大的問題就是“字”與“圖”的設計創意和融合協調的問題，網絡媒體界面設計作品的優劣與視覺信息效果傳播的強弱也主要取決于設計者對“文字”與“圖符”的把握能力。本文從“文字形態”到“圖符信息”設計融合這一角度入手，從中梳理出設計規律，找到一種可供網絡媒體界面選擇的文字信息傳遞設計方法。

一、“文字形態”與“圖符信息”融合的關鍵是形式與內容的高度統一

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

從實例來說明，如圖1（漢字）、圖2（英文字母）、圖3（阿拉伯數字），這3組圖例均截取網絡媒體界面設計實例局部，他們之間的共同點就是界面中的字體設計是通過字體形態變化，將字形筆劃進行圖形和符號化創作，使之更具信息內涵和信息傳遞功能，并通過組合和動態交互形式充分體現出文字形態的視覺信息效果。我們說網絡媒體界面設計的基本功能就是信息傳播，而“文字圖符化”在網絡媒體界面設計領域起到重要的作用。endprint

例如圖1，網頁設計中LOGO設計其漢字的外型結構采用中國古典園林建筑的斗拱構件，其構件單體又以中華書法筆劃組成的基礎元素。由其文字形態表現出來的圖符信息傳遞了清晰的建筑行業特性的界面設計的信息內容，其文字形態與圖符信息所達到的融合效果對界面設計主題展示起到了重要作用。

圖2是網頁設計，圖3是手機界面設計，均屬于網絡媒體界面范疇，其界面分別是由英文字母及阿拉伯數字為主要設計元素，前者是網頁“You Are We”英文YAW的立體縮寫，傳遞了網頁主題文字信息，重要的是通過文字形態的設計創造構成了一個全新的視覺圖形信息導航，并通過設計融合反映出視覺信息傳遞的基本要求。可貴的是這個融合形態不再是平面信息，而是可以360度觀看的立體多維信息。

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

網絡媒體界面設計需要文字形態具有獨特的視覺個性，同時文字圖形信息又不能脫離應用的內容要求，做到內容和形式的統一，通過對文字進行形態構建設計是解決視覺圖形緊扣界面設計內容要求的最為有效的方法，所以將兩者通過設計融合手段是網絡媒體界面設計的必然路徑。

“文字形態”的圖符信息化含義從本質上理解就是將文字的每一個基礎筆劃設計成一個獨立單元，構成字型的原始信息元素，再進行圖符化構建。瑞士人厄斯特·凱勒認為設計的問題就是形式與內容的高度統一，而字體圖形就是最客觀、明確、有效的圖形傳達語言③字體作為圖符信息表現是網絡媒體界面設計最重要的構成元素，能向目標人群傳遞明確的信息，且簡要生動，達到界面設計圖符與文字的高度和諧。如上3個“文字形態”的圖符案例說明了文字在界面設計領域的作用與價值，這個價值需同視覺圖符信息應用形成一體并融合到界面設計系統中才能做到設計價值的最大化。

二、圖文融合的網絡媒體界面設計應用方法

圖文融合是“文字形態”和“圖符信息”兩者在網絡媒體界面設計中的相互作用的體現，并由此產生的視覺融合現象，其著力點在于視覺形態的表現力上。這里所談到的“形態”是兩者獨立信息的融合體，“文字形態”是可以通過設計構建發展為“圖符信息”的。“圖符信息”也可由設計造型與結構特性帶來，在一定范圍內也能傳遞明確的信息主題。對網絡媒體界面設計項目而言，只有讓兩者有效結合產生融合效果，才能做出優秀用戶體驗的界面設計。故而，我們說這個主題信息傳遞是可通過設計融合直接作用于界面視覺信息設計中，圖文融合對網絡媒體界面信息設計的方法可從下列三個方面來論述：

（一）對文字信息設計形態的把握

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

（二）掌握全新、全面的設計方法和技術手段

我們說網絡媒體產品是以計算機、電視、移動終端為載體，這類終端產品具備藝術設計、信息技術、大眾傳播和社會服務四種特性④。在藝術設計與現代科技相適應的今天，科技在發展，人們使用的各種智能終端產品需求也日益多樣化，人們的感官和體驗已不僅局限于平面視覺體驗，如信息傳播技術、自動化控制技術、圖像轉換技術、物聯網技術等都是更好用戶體驗的必要技術支撐。所以當我們在設計初期就應該對設計方法和技術手段進行分析與思考，找到最新的表現形式和最適合的技術手段的融合方法。從上面幾個案例分析我們能領會到不同的文字形態設計和視覺要求對不同技術要求也是不同的，圖1是使用平面繪圖軟件設計，圖2是三維繪圖設計制作，圖3和圖4是通過繪圖軟件和軟件開發系統結合的產物。

因此“文字形態”的圖形信息量是需要通過創新設計激發出來，而設計方法和技術手段是激發“文字形態”的重要手段，圖符信息量要更好地表現設計主題，設計師需要具有與時俱進的各種繪圖和開發技術應用的綜合經驗，這是優秀網絡媒體界面設計創作的必要條件。

（三）交互藝術體驗能提升網絡媒體界面設計的設計深度

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

三、網絡媒體界面設計的文字及圖符的互動表現方式

網絡媒體界面設計項目中，文字應用形態表現首要條件并不是文字字體本身設計多么的花哨，而是給人感官上的整體用戶體驗，其中互動體驗在網絡媒體界面設計的應用極其出彩，如下通過文字在網絡媒體界面作為圖形的融合應用的實例，從多維感官的用戶體驗角度入手，闡述互動體驗在網絡媒體界面設計上的四種表現方式。

（一）圖像觸控交互表現方式

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

（二）綜合信息交互表現方式

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

（三）無形感官體驗的交互表現方式

此方式是展示動態式交互界面不可或缺的無形感官交互體驗，它涵蓋除視覺感官外的所有無形體驗，如聽覺、觸覺、味覺等感官體驗。

視聽感官是在滿足視覺感官的同時，滿足聽覺感官的視聽體驗。不僅能通過音效烘托界面主題，而且有些音效在某些特定界面起到功能性作用。界面中點擊按鈕反饋發出的音效就是最原始的聽覺交互方式，還有網頁的背景音樂，雖然音效是無形的但在烘托界面主題方面起到了很大的作用。圖8即是通過點擊界面中的耳機圖符，示意用戶點擊按鈕以了解空中飛舞的字符的閱讀發音，配合字符背景在界面的文字識別上起到了發音指導的功能，這樣功能性的音效交互方式在一些英文學習網站也比比皆是。所以音效表現是當今主流視覺感觀網絡媒體界面最主要的補充形式。

科學技術在不斷進步，人們的體驗需求也會提升，在滿足視覺和聽覺交互的用戶體驗的同時，現階段觸覺和味覺感官交互裝置的研究已初見端倪，增強交互體驗的三維虛擬現實技術也日益成熟，這些都已為未來交互式全方位感官體驗的開發提出了重要研究方向，并為網絡媒體界面設計的動態交互表現提供全息的感官體驗。

項目來源：湖北省教育廳科研計劃項目，項目編號：B2014133.

注釋：

①張銘芮.著.數字媒體導論[M].北京：人民郵電出版社，2013：100-101.

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

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

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

⑤李四達.編著.交互設計概論[M].北京：清華大學出版社，2009：231-232.endprint