移動界面圖標的符號化設計案例研究

成藻

摘 要：界面設計是人機交互研究的重要方向，移動應用的界面是界面設計的特殊形式。由于移動設備的便攜性、不固定性以及無線網絡的低帶寬、高延遲等諸多限制，移動界面設計又具有自己的特點。

關鍵詞：界面；符號化設計

[本文系2016江蘇省高校哲學社會科學研究基金指導項目“符號學背景下的數字界面設計教學研究”成果，項目編號為2016SJD760023]

應用界面到底是什么，它到底有什么用途這是UI設計師在工作前首先需要認識的。界面屬于產品的視覺錨點。可以算品牌的一部分——不僅在視覺上需要有吸引力、與眾不同，理想狀況下甚至要能詮釋應用的核心本質。

“LOGO”這個詞在當今頻頻被提及，應用界面中的圖標卻與其不完全等同。兩者均與品牌相關聯，都受到很多限制。一個重要區別是：LOGO是代表品牌的一個可縮放矢量圖塊；而圖標則放置在屏幕內，根據柵格系統進行個性化定制并輸出，還需要使用特定的尺寸與背景。兩者的實現方式與功能，以及優劣評判標準都不盡相同。

作為符號化案例的圖標及界面設計有必要從符號學原理對其進行溯源，符號分為：圖像型符號、指示性符號、象征性符號。

“食茶”作為一個以傳統文化定位，以傳播茶文化為主要功能的APP，選用了扭曲的茶葉拼接成“器、茶、泡、品、史”五個模塊的界面形象。在這個案例中，文字的質地是茶，內容是反映茶文化內涵的漢字“器、茶、泡、品、史”，用實物象征茶文化的文字，屬于象征性符號。（圖1）

這組案例要分為兩個部分來看，第一：用矢量圖標繪制的地鐵、停車場、紅綠燈、加油站、建筑物等形象來指代實際生活中的地鐵、停車場、紅綠燈、加油站、建筑物等目標物，屬于圖像性符號；第二：用繪制出的圖標來指導人們的出行行為，又屬于指示性符號。（圖2）

這一組天氣應用的圖標設計也需要分為兩個部分：第一，點線面以及紅、藍、黑、白色構成了晴、云、雨、霧等天氣現象，這種表現方式符合長久以來大眾媒體對于天氣的表現，人們也已經認可這類對天氣的表現方式，屬于象征性符號；第二，用繪制出來的天氣圖標來預報之后的天氣，并指導人們的生活出行，又屬于指示性符號。（圖3）

手機APP Music Caffee的界面設計是用俯視角度拍攝的咖啡杯，以及構成音符形狀的咖啡泡沫圖像作為應用的主界面。這個表現方式屬于圖像性符號：咖啡沫→飲咖啡→休閑放松的行為；音符→聽音樂→休閑放松的行為。用喝咖啡搭配聽音樂，二者屬于鄰近行為，又屬于修辭上的移位。（圖4）

“I LOVE NY”和杭州城市圖標這兩個案例已經不單純屬于界面圖標了，但因為他們的符號化設計非常經典，我們仍有必要將其拿出來分析和學習。

“I NY”這個標識要分三層意義來解讀：① 是英文單詞LOVE（愛）的象征圖形；②NY是英文單詞NEW YORK（紐約）的縮寫和象征符號；③“INY”這組文字搭配圖形的標識現在成為紐約市城標。（圖5）

需要了解的背景是該標志于1977年由梅頓·戈拉瑟創作，用作美國紐約州的旅游廣告詞和標志，后又被應用為紐約市的城標，除了紅色的心形圖案外，所有文字采用黑色圓形的Slab serif字體。至今這一標志已被印在全世界各地的各種產品上，已經超越了廣告范疇，成為一種流行圖案并取得了巨大的商業價值。這個標志也形成了它特有的與人文、社會習俗相關的認知，因此屬于象征性符號范疇。

杭州城市圖標也需要分三個層次來解讀：1.馬頭墻建筑符號象征杭州的地方文化，作為浙江省首府，杭州地處江浙皖三省交界，歷史上的杭州就有徽派建筑為它的主要建筑代表，用徽派建筑特有的馬頭墻形象來替換文字筆畫屬于替換性修辭；2.杭州的“杭”字為文字的圖形化處理，屬于文字象征符號；3.古典園林形象作為圖像性符號來指代杭州的城市定位為古典文化濃郁的園林型城市。

手機端的輸入法表情包用夸張變形的人類面孔來指代不同的表情和情緒，1.用表情包象征面部表情和情緒；2.用表情包來指示人的情緒并替代文字。其中固定表情包的正圓形、帶凹凸感的黃色臉上的眼睛、嘴巴、眼淚、嘴唇等表現方式已經成為互聯網媒介上一種通用的圖像語言，形成了社會共識，被大眾認可。（圖6）

“talk more”圖標用藍色的‘（上下引號）替換了文字talk more中的字母a和e，‘（上下引號）對聊天、對話行為的象征意義使得這個設計看起來意味深長。（圖7）

這組手機桌面圖標系統包含30個圖標，全部用水墨暈染方式表現一些常用工具，其中：天氣用水墨方式表現大眾認可的天氣圖標——云朵，來指代天氣預報的功能；用黑體字及圓幼字體“星期四”和“23”來指代日歷的功能；正三角形狀指代視屏播放功能；游戲手柄指代游戲的功能；音符指代音樂播放功能；“淘”指代手機淘寶；大眾點評的跨腿的小人形象來指代大眾點評網；兩個有眼睛的對話氣泡指代的微信；小企鵝指代QQ……種種經典軟件的經典形象，早已成為網民共同認知的典型形象，符合大眾認可，形成約定俗成的社會共識，屬于典型的象征符號語言。（圖8）

Clubbing and nightlife的引導頁設計以城市為主題，第一幅用月光下的倫敦橋圖像指代倫敦的城市主題；第二幅用月光下的巴黎鐵塔象征巴黎的城市主題，都屬于用部分指代整體的修辭手法，也屬于象征性符號的使用。（圖9）

通過以上九組案例的解讀，我們可以總結出設計 師在設計過程中主要注意的五個方面：

1.可擴展性

由于在整個平臺的多個地方都有展現，且尺寸不同，因此保持其清晰度與獨特性非常重要。圖標需要保持美觀。將小小的屏幕塞滿的過于復雜的圖標會面臨可擴展性不佳的情況。

在應用圖標的構思設計階段，設計師應將很大一部分精力放在這里，思考設計能否進行良好的擴展。

2.可辨識度

確保圖標準確呈現應用的功能。應用圖標的設計需要精巧地編織記憶與關聯，讓功能與情感相通。嘗試刪掉所有細節，只保留原本的概念。

3.一致性

在加強視覺表現力上，讓圖標與界面保持一致非常重要。需要考慮到與應用圖標的交互，以及與該應用進行交互，兩者的體驗需要保持一致。讓用戶對應用留下統一的形象，將會提升產品的可用性和滿意度。簡單來說，確保應用圖標與實質、功能和設計一致將會帶來巨大的成功。

保持界面與圖標色彩協調，并使用相似與一致的符號語言。通過圖標的象征意義與應用功能直接關聯能強化應用與圖標之間的聯系。

4.唯一性

由于常要與其他圖標競爭用戶的注意力，使用獨特的設計會很有效。設計師可以嘗試完全不同的方向。可以嘗試不同的色彩方案，找出新的象征色系。

5.盡量使用圖形化設計方案。

文字與圖片是各自分離的具象化工具，將它們結合用在圖標上通常會導致用戶出現難以解決的混亂。有人提出 “Facebook在應用圖標中包含了f”。但在這個案例中，“f”進行了柵格化和圖形化處理，已經不是單純的文字了，它形成了具有其特定辨識度的圖像語言。

在應用市場上有很多乏味而不能達意的圖標樣例。圖標就是應用與用戶之間最本質的聯系，是用戶在應用市場瀏覽時第一眼看到的東西，也是他們在每次使用應用時都會想到的東西。因此應用圖標設計不是單純的創意設計，而是整個產品開發流程中的一個工作環節。

參考文獻：

[1]胡飛.設計符號與產品語意[M].北京：中國建筑工業出版社，2014.

[2]羅蘭巴特.符號學美學[M].沈陽：遼寧人民出版社，2010.

[3]陳浩，高筠.語意的傳達：產品設計符號理論與方法[M].北京：中國建筑工業出版社，2009.

作者單位：

金陵科技學院endprint