藝術符號學視角下的移動學習客戶端GUI設計*

沈 暉

?

藝術符號學視角下的移動學習客戶端GUI設計*

沈 暉

（南通大學現代教育技術中心，江蘇南通 226019）

目前，移動學習客戶端的設計尚處在解決有無的層次上，著眼點基本停留在技術設計、平臺架構上，明顯暴露出在人文關懷和藝術美化方面的欠缺。文章基于藝術符號學的視角，從版式、色彩、圖標、文字四個方面討論了移動學習客戶端GUI的設計，并結合相關案例探索問題解決的策略，以期為理想的移動學習客戶端GUI設計提供新的思路。

藝術符號；移動學習；客戶端；GUI設計

引言

隨著移動4G以及互聯網技術的迅猛發(fā)展，移動終端和APP逐漸成為了人們工作、學習的主要介質。“移動學習客戶端”作為學習者與移動設備的直接媒介，對移動學習的推廣和發(fā)展具有重要意義。而設計出一套便于學習者準確、快速、有效接受與認知的移動學習客戶端GUI（Graphical User Interface），就成了“移動學習客戶端”成功與否的標志之一。

移動學習以其“Anyone、Anytime、Anywhere、Anystyle”的4A自由學習方式，滿足了人們在信息爆炸時代的學習需求；同時，“移動學習為教育帶來了學習方式、學習內容、學習場所、學習文化的變革”，是高校學習者必不可少的學習方式[1]。縱觀近十年來移動學習的相關研究，主要集中在移動學習的概念、理論、技術、學習平臺開發(fā)、課程資源開發(fā)等方面。在平臺設計開發(fā)研究中，整體還是偏向于走“重技術、輕藝術”的路子，而站在藝術學角度的研究尚少。隨著經濟、科技的不斷發(fā)展，藝術成為了現代人生活、學習中不可或缺的精神食糧，人們對藝術審美、藝術傳達情感的需求越來越強烈。因此，基于藝術符號學的視角來研究移動學習客戶端GUI設計，有利于移動學習的推廣和發(fā)展，并對“信息技術支撐下的視覺素養(yǎng)培養(yǎng)和新型視覺教育資源開發(fā)”有著重要的推動意義和實踐意義[2]。

一 移動學習客戶端藝術化設計的理論依據

20世紀初，瑞士語言學家索緒爾和美國哲學家皮爾士最早提出符號學理論，認為符號學是研究符號系統(tǒng)的學問。根據此理論，又延生出“符號是代表或表現其它事物的東西，它可以被某人所理解或解釋并對某人具有一定意義”[3]等觀點。可見，符號作為一種傳播手段，承載著信息傳播的功能。

藝術符號是符號系統(tǒng)的高級層面，它不僅是一種表現，更是一種創(chuàng)造和解釋。藝術符號學理論由美國哲學家、美學家蘇珊·朗格在20世紀50年代創(chuàng)立[4]，她注重藝術符號的內涵，表達并強調藝術符號的意味特征，將藝術符號歸結為難以名狀的“生命形式”，認為藝術中的符號都有自己的定義，是人類情感符號的創(chuàng)造[5]。受傳統(tǒng)思維模式的影響，藝術形式長期以來一直被視為作品內容的附庸。因此，理解和把握藝術形式，將有利于調整只強調內容而忽視形式的理論偏差。符號要被感知，必須通過載體，本研究中藝術符號的載體就是GUI。

二 情感與審美——移動學習客戶端學習資源的建設

GUI是指用圖形方式顯示計算機操作用戶界面，也稱圖形用戶界面。GUI設計是一種集計算機科學、美學、心理學等多學科為一體的人機系統(tǒng)工程，強調將人—機—環(huán)境三者作為一個系統(tǒng)的總體。目前，移動學習客戶端“缺乏教學設計、內容缺少趣味性和吸引力”[6]成為了移動學習進一步發(fā)展的瓶頸。移動學習有效性的實現依賴于藝術符號對GUI設計的指導，移動學習信息的傳播則依賴于藝術符號的存在和應用。

1 傳遞情感交流

蘇珊·朗格認為，“藝術符號在設計作品中就是情感的意象，情感依附于生命的存在，所以情感特征反映了生命體的特征，情感形式表現了生命過程的形式。”[7]藝術符號學視角下的GUI設計是以一種客觀的符號將一個主觀的事件或活動表現出來，即以獨特的形象將主觀經驗對象化，而“情感正是在這一過程中投射、外化為動態(tài)的情感形式與藝術作品直接融合在一起的”[8]。GUI設計中的情感釋放能給學習者帶來愉快的學習體驗，調動他們的學習積極性和主動性，并拓展學習活動的深度和廣度。

2 培養(yǎng)審美素養(yǎng)

藝術符號的抒情是一種審美表現，需要有意識地予以控制和組織，使之有序化。本研究的GUI設計依據學習者的審美需求，對設計對象進行組織和安排，賦予新的表現形式，融匯成一種美的知覺。視覺審美能力在信息時代非常重要，審美交互能觸發(fā)學習者的探索欲望和創(chuàng)造激情，并營造出一種寓學習于審美之中、以審美促進認知與創(chuàng)造的學習氛圍。

3 建設學習資源

隨著移動學習的不斷推廣，學習者逐漸掌握了獲取知識的權力，并通過利用新技術自主享受學習資源，故學習資源的建設成為了教育發(fā)展的重中之重。不重視學習資源的開發(fā)建設，不僅會造成教學投資上的浪費，還將直接影響教育改革的質量[9]。先進的移動學習客戶端對學習資源質量的依賴性更大。基于藝術符號學的移動學習客戶端GUI設計，利用現代信息技術手段，開啟教育資源的新視角，賦予教育資源新特質[10]，必將推動高質量學習資源的開發(fā)與建設。

三 有“意味”的形式——移動學習客戶端GUI設計

蘇珊·朗格認為藝術符號能夠創(chuàng)造有“意味”的設計形式。藝術符號學視角下的移動學習客戶端GUI設計，既要尋找一種最恰當的表現形式去實現移動學習的交互，還要兼顧視覺表達的藝術性。當移動學習客戶端和學習者的環(huán)境發(fā)生聯系并具有個體性的意義和價值時，學習將變得更加有吸引力，學習者才能對移動學習的交互認知更加持久、深入，學習效果的提升也才會更加明顯。

1 版式設計

版式設計是學習者對移動學習客戶端的一個整體認識，它的整體元素布局直接決定了學習者學習的邏輯性和交互性，對提高學習效率和實現交互功能有積極的意義。

（1）移動學習客戶端GUI版式設計的視覺傳達要素

①點：在版式設計中，任何一個獨立存在的文字、圖標、圖片、按鈕等都可起到點的作用。

②線：根據版式設計的需要，點的屬性會轉化成直線或者曲線的屬性。

③面：當很多點密集在一起成片時，即成為面。

④留白：在版式設計中，留白并不等同于“空白”，它是為了其它元素的存在而起透氣、放松的協(xié)調作用，避免版面過滿、過實。

（2）移動學習客戶端GUI版式

①比例與適度。“隨著知識爆炸時代的到來，學習者學會如何學習和學會找到有用的資源成為教育的首要目標。”[11]有關心理學研究表明，“人的視線在一個既定的平面內分布的注意力不均衡，注意力集中依次分布在版面的左上、左下和右上部。”[12]如在網易云課堂APP界面中（如圖1所示），將標題置于頁面的正上方居中位置顯得醒目大氣；考慮到用戶使用手機的習慣和方式，將登錄方式的圖標置于頁面底部方便滑動——這些有序的且符合學習者視覺、心理和生理感受的布局，使學習信息的主次關系一目了然，可減輕學習者的瀏覽壓力，有助于提高學習效率。

②對稱與平衡。對稱與平衡可以看作是對設計內容主次、輕重的權衡。如在網易公開課APP界面中（如圖2所示），對稱不僅指絕對對稱，也可指一定范圍的相對對稱；平衡則是符合大部分學習者視覺心理需求的一種舒適、穩(wěn)定的設計呈現。

③節(jié)奏和韻律。重復的節(jié)奏給人以一種合乎秩序的、和諧統(tǒng)一的感受；而在這一重復節(jié)奏中所產生的韻律變化，能夠使學習者產生不同的心理感受，打破學習中的沉悶感。因此，通過重復的節(jié)奏及由重復帶來的韻律變化，可以給人帶來美的享受。

④扁平化。移動學習客戶端界面的扁平化設計強調去繁為簡，注重核心信息的突出。如在App Midia-iso界面中（如圖3所示），設計者通過色彩和形態(tài)的節(jié)奏韻律變化，結合扁平化的設計風格，使界面既簡潔美觀，又富有變化，值得設計者學習和借鑒。

2 色彩設計

色彩是視覺符號的靈魂，直接影響事物的表現效果。移動學習客戶端GUI的色彩設計影響著學習者的第一印象，它的用色是沉穩(wěn)協(xié)調還是醒目跳躍等還會直接影響學習者的學習興趣。

（1）移動學習客戶端GUI色彩設計的視覺傳達要素

①背景色：背景色作為主體，在界面中所占的比重較大，構成了界面的主要色調。在設定主題色時要根據學習內容進行合理的選擇；當主題色確定之后，還要選擇相搭配的各種輔助色，并注意主次、輕重分明，以起到渲染主題的作用。

②文本色：這里的文本主要指菜單文字、導航文字、說明性文字等用來表達信息內容的文字形式。文本色與背景色要拉開對比，才能在界面里更容易被識別。

③圖標色：圖標是GUI中的重要內容，可以具象地表現信息，容易激起學習者的關注。圖標色的設計與背景色、文本色等元素既要相互呼應，又要醒目突出，以發(fā)揮均衡穩(wěn)定的作用。

（2）移動學習客戶端GUI色彩設計路徑

色彩設計要遵循一定的配色原則，可以參考24色相色環(huán)。互補色的對比度最強，可以通過處理主色與次色的色塊大小、降低色彩的飽和度、添加一組中間色等來緩和強烈的對比效果。對比色配色時，可以插入一些中性色來中和主色與次色的關系，以產生相對和諧的效果。鄰近色色彩較為近似，冷暖色組明顯，色調容易和諧，感情特性穩(wěn)定平和。綜合整個色環(huán)的色彩關系，可知漸變的色彩讓人感覺很舒緩、很放松，同時也讓人感覺豐富并避免沖突。

色彩作為符號語言，具有象征和聯想的功能，不同的顏色能夠傳遞不同的情感和氣息。因此在運用色彩的時候，不僅要充分考慮設計對象，還要根據學習內容來進行恰當的色彩規(guī)劃。

3 圖標設計

“圖標就是具有指代意義的圖形符號，這是一種高度濃縮的圖形，能夠快速傳達信息，且便于記憶。”[13]格式塔心理學派指出，當大量的視覺信息元素進入人們的視野時，人們會把形狀、大小、肌理、顏色、方向上近似的視覺元素歸納為一類，進而簡化對視覺信息的識別。移動學習客戶端GUI的圖標設計是一個將信息圖形化的過程，需體現情感傳遞和信息訴求的功能，因此既要增加美觀的表現形式，又要保證信息的真實準確性。

（1）移動學習客戶端GUI圖標設計的視覺傳達要素

①程序圖標：是移動學習應用程序在客戶端主界面的圖標，是在主屏幕展現應用的方式，是學習者對應用程序的第一印象。

②操作工具圖標：所指示的內容包括移動學習的交互功能和步驟，如在線閱讀、群聊、論壇、郵件發(fā)布、在線視頻、在線音頻、信息發(fā)布、評價等。

③導航圖標：是客戶端界面的方位標識，能指引學習者進入應用程序的不同區(qū)域。

④狀態(tài)圖標：顯示移動學習程序中某些特定的狀態(tài)，用于表達各種應用的提醒。

（2）移動學習客戶端GUI圖標設計路徑

①表意性。GUI圖標設計應該以一種直觀的方式向學習者傳達信息，使學習者不需要任何文字釋義，就能明確感受圖標的具體含義，并很好地完成識別認知。

②藝術性。GUI圖標設計應該具有美的表現形式，為信息的傳達增添美感，并通過這種美感使信息在繁雜的信息中脫穎而出，達到吸引學習者關注的效果。如在360手機桌面主題設計大賽一等獎作品的界面截圖中（如圖4所示），該作品的圖標設計就契合主題的“禪”意，以清新脫俗、略帶立體感的藝術形式呈現，錯落有致充滿韻律，可使用戶浮躁的心慢慢沉靜下來。

③整體性。圖標的設計除了代表的含義、功能，還要配合整個系統(tǒng)的規(guī)范性。在一套完整的圖標設計系統(tǒng)中，顏色的選區(qū)、顏色的布局、樣式的大小都必須達到規(guī)范和均衡，將圖標的整體風格營造為一個自然和諧的界面環(huán)境。如在2012 OPPO手機主題設計大賽獲獎作品的界面截圖中（如圖5所示），該作品通過線描圖形的方式來進行圖標設計，配以規(guī)整的網格線背景，使界面呈現出整齊統(tǒng)一的系統(tǒng)化風格。

4 文字設計

文字的主要功能是通過閱讀來區(qū)分信息的重要程度，是強調信息要素和信息溝通的有效手段。移動學習客戶端GUI的文字設計應當注重學習者在接受信息時的情感體驗，使學習者遠離由數據、文字等組成的單一枯燥的信息，而代之以一種愉快的心情去接受、理解信息。

（1）移動學習客戶端GUI文字設計的視覺傳達要素

①主題文字：主要指移動學習客戶端移動學習應用程序的菜單文字。

②內容文本文字：指移動學習程序中各個操作工具所涵蓋的學習內容、說明性文字等，篇幅相對較多，是文字信息的主要呈現區(qū)域。

③特殊文字：顯示/提醒/確認畫面、播放/進度畫面中還有一些特殊應用程序的文字。

（2）移動學習客戶端GUI文字設計路徑

①簡潔性。由于移動學習客戶端GUI文字設計的最終目的還是為了學習，因此，文字設計不宜太花哨，應以便于閱讀為前提。

②統(tǒng)一性。移動學習客戶端GUI文字設計中最多不能超過三種文字，太多類型的文字出現在同一個版面會顯得雜亂無章。如在網易公開課App界面文字設計的界面截圖中（如圖6所示），通過變化文字的字號大小、粗細、長短，設置合適的字間距、行間距等，實現了文字層次明確、界面具有秩序感和統(tǒng)一性的效果。

③審美性。文字作為藝術符號，本身具有獨特的藝術氣質。通過編排、設計不同的文字形式，可以實現文字的藝術性。如在優(yōu)課優(yōu)信APP標題文字設計的界面截圖中（如圖7所示），通過將文字筆畫局部圖形化的方式，使文字與背景形態(tài)成呼應之勢，從而產生了一種和諧的動態(tài)美感，充滿了活力氣息。

隨著科技的進步、信息傳遞方式的多樣化，移動學習客戶端GUI設計將不再是簡單的陳述排列，而應該建立在傳統(tǒng)的審美經驗基礎之上，力求不斷創(chuàng)新，用藝術符號所具有的獨特象征優(yōu)勢和情感表達力去設計界面的整體風格。

四 結論

移動學習客戶端GUI設計的價值在于促進學習，是功能化與實用性的結合。基于藝術符號學的移動學習客戶端GUI設計不僅力求向學習者提供一個交互性強的操作環(huán)境，而且還從用戶的情感、視覺審美等方面進行全盤考慮，力圖將優(yōu)質的學習資源推送給學習者。藝術符號的情感化、審美化與功能性、實用性從來就不是對立的，給理性的設計賦予情感的內涵表達和藝術審美的外延伸展，是設計的更高層面。從藝術符號學的視角來研究移動學習客戶端GUI設計，對于學習認知和學習效果的影響深遠，也為移動學習資源的建設提供了一種新的思路。

[1][11](美)阿蘭·柯林斯,理查德·哈爾弗森著.陳家剛,程佳銘譯.技術時代重新思考教育:數字革命與美國的學校教育[M].上海:華東師范大學出版社,2013:7.

[2][10]張舒予.視覺文化研究與教育技術創(chuàng)新[J].中國電化教育,2006,(4):10-15.

[3](德)馬克斯·本澤,伊麗莎白·瓦爾特著.徐恒醇編譯.廣義符號學及其在設計中的運用[M].北京:中國社會科學出版社,1992:36-39.

[4](美)蘇珊·朗格著.劉大基,傅志強,周發(fā)祥譯.情感與形式[M].中國社會科學出版社,1986:42.

[5]馮鋼.藝術符號學[M].上海:東華大學出版社:2013.9:31.

[6]王建華,李晶,張瓏.移動學習理論與實踐[M].北京:科學出版社,2009:68.

[7]王妍慧.藝術與夢——蘇珊·朗格符號美學的心理學根源探析[J].中國海洋大學學報(社會科學版),2009,(3):80-82.

[8]郭慧麗.蘇珊·朗格藝術形式美學思想[D].石家莊:河北師范大學,2007:24-25.

[9]張舒予,朱靜秋.信息技術支撐下的視覺素養(yǎng)培養(yǎng)(上)[J].電化教育研究,2005,(3):12-16.

[12]馬建華.版式設計中的視覺流程[J].包裝工程,2008,(6):191-193.

[13](美)阿歷克斯·伍·懷特著.黃文麗,文學武譯.平面設計原理[M].上海:上海人民美術出版社,2005:51.

編輯：小米

The Design of M-learning Client GUI on the View of Art Semiotics Theory

SHEN Hui

At present, the design of mobile learning client still stays on the technical design and the platform architecture, so it clearly exposes the lack of humanistic care and artistic beautification. Based on art semiotics theory, this paper discussed the design of mobile learning GUI client from the four aspects of layout, logo, color, text and combined with related cases to explore the corresponding solution strategy, which could provide new thought to the ideal mobile client GUI design.

artsymbol; M-learning; client; GUI design

G40-057

A

1009—8097（2015）11—0100—06

10.3969/j.issn.1009-8097.2015.11.015

本文為江蘇省現代教育技術研究2014年度重點課題“基于藝術符號學的移動學習客戶端設計研究”（項目編號：2014-R-29510）的階段性研究成果。

沈暉，實驗師，碩士，研究方向為視覺傳達設計研究，郵箱為sh1982nt@ntu.edu.cn。

2015年5月21日