沈 暉

?

藝術(shù)符號學(xué)視角下的移動學(xué)習(xí)客戶端GUI設(shè)計*

沈 暉

（南通大學(xué)現(xiàn)代教育技術(shù)中心，江蘇南通 226019）

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

藝術(shù)符號；移動學(xué)習(xí)；客戶端；GUI設(shè)計

引言

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

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

一 移動學(xué)習(xí)客戶端藝術(shù)化設(shè)計的理論依據(jù)

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

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

二 情感與審美——移動學(xué)習(xí)客戶端學(xué)習(xí)資源的建設(shè)

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

1 傳遞情感交流

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

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

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

3 建設(shè)學(xué)習(xí)資源

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

三 有“意味”的形式——移動學(xué)習(xí)客戶端GUI設(shè)計

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

1 版式設(shè)計

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

（1）移動學(xué)習(xí)客戶端GUI版式設(shè)計的視覺傳達要素

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

②線：根據(jù)版式設(shè)計的需要，點的屬性會轉(zhuǎn)化成直線或者曲線的屬性。

③面：當(dāng)很多點密集在一起成片時，即成為面。

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

（2）移動學(xué)習(xí)客戶端GUI版式

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

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

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

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

2 色彩設(shè)計

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

（1）移動學(xué)習(xí)客戶端GUI色彩設(shè)計的視覺傳達要素

①背景色：背景色作為主體，在界面中所占的比重較大，構(gòu)成了界面的主要色調(diào)。在設(shè)定主題色時要根據(jù)學(xué)習(xí)內(nèi)容進行合理的選擇；當(dāng)主題色確定之后，還要選擇相搭配的各種輔助色，并注意主次、輕重分明，以起到渲染主題的作用。

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

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

（2）移動學(xué)習(xí)客戶端GUI色彩設(shè)計路徑

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

色彩作為符號語言，具有象征和聯(lián)想的功能，不同的顏色能夠傳遞不同的情感和氣息。因此在運用色彩的時候，不僅要充分考慮設(shè)計對象，還要根據(jù)學(xué)習(xí)內(nèi)容來進行恰當(dāng)?shù)纳室?guī)劃。

3 圖標設(shè)計

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

（1）移動學(xué)習(xí)客戶端GUI圖標設(shè)計的視覺傳達要素

①程序圖標：是移動學(xué)習(xí)應(yīng)用程序在客戶端主界面的圖標，是在主屏幕展現(xiàn)應(yīng)用的方式，是學(xué)習(xí)者對應(yīng)用程序的第一印象。

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

③導(dǎo)航圖標：是客戶端界面的方位標識，能指引學(xué)習(xí)者進入應(yīng)用程序的不同區(qū)域。

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

（2）移動學(xué)習(xí)客戶端GUI圖標設(shè)計路徑

①表意性。GUI圖標設(shè)計應(yīng)該以一種直觀的方式向?qū)W習(xí)者傳達信息，使學(xué)習(xí)者不需要任何文字釋義，就能明確感受圖標的具體含義，并很好地完成識別認知。

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

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

4 文字設(shè)計

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

（1）移動學(xué)習(xí)客戶端GUI文字設(shè)計的視覺傳達要素

①主題文字：主要指移動學(xué)習(xí)客戶端移動學(xué)習(xí)應(yīng)用程序的菜單文字。

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

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

（2）移動學(xué)習(xí)客戶端GUI文字設(shè)計路徑

①簡潔性。由于移動學(xué)習(xí)客戶端GUI文字設(shè)計的最終目的還是為了學(xué)習(xí)，因此，文字設(shè)計不宜太花哨，應(yīng)以便于閱讀為前提。

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

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

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

四 結(jié)論

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

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

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

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

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

[5]馮鋼.藝術(shù)符號學(xué)[M].上海:東華大學(xué)出版社:2013.9:31.

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

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

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

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

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

[13](美)阿歷克斯·伍·懷特著.黃文麗,文學(xué)武譯.平面設(shè)計原理[M].上海:上海人民美術(shù)出版社,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

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

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

2015年5月21日