移動(dòng)界面圖標(biāo)的符號(hào)化設(shè)計(jì)案例研究

成藻

摘 要：界面設(shè)計(jì)是人機(jī)交互研究的重要方向，移動(dòng)應(yīng)用的界面是界面設(shè)計(jì)的特殊形式。由于移動(dòng)設(shè)備的便攜性、不固定性以及無(wú)線網(wǎng)絡(luò)的低帶寬、高延遲等諸多限制，移動(dòng)界面設(shè)計(jì)又具有自己的特點(diǎn)。

關(guān)鍵詞：界面；符號(hào)化設(shè)計(jì)

[本文系2016江蘇省高校哲學(xué)社會(huì)科學(xué)研究基金指導(dǎo)項(xiàng)目“符號(hào)學(xué)背景下的數(shù)字界面設(shè)計(jì)教學(xué)研究”成果，項(xiàng)目編號(hào)為2016SJD760023]

應(yīng)用界面到底是什么，它到底有什么用途這是UI設(shè)計(jì)師在工作前首先需要認(rèn)識(shí)的。界面屬于產(chǎn)品的視覺(jué)錨點(diǎn)?？梢运闫放频囊徊糠帧粌H在視覺(jué)上需要有吸引力、與眾不同，理想狀況下甚至要能詮釋應(yīng)用的核心本質(zhì)。

“LOGO”這個(gè)詞在當(dāng)今頻頻被提及，應(yīng)用界面中的圖標(biāo)卻與其不完全等同。兩者均與品牌相關(guān)聯(lián)，都受到很多限制。一個(gè)重要區(qū)別是：LOGO是代表品牌的一個(gè)可縮放矢量圖塊；而圖標(biāo)則放置在屏幕內(nèi)，根據(jù)柵格系統(tǒng)進(jìn)行個(gè)性化定制并輸出，還需要使用特定的尺寸與背景。兩者的實(shí)現(xiàn)方式與功能，以及優(yōu)劣評(píng)判標(biāo)準(zhǔn)都不盡相同。

作為符號(hào)化案例的圖標(biāo)及界面設(shè)計(jì)有必要從符號(hào)學(xué)原理對(duì)其進(jìn)行溯源，符號(hào)分為：圖像型符號(hào)、指示性符號(hào)、象征性符號(hào)。

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

這組案例要分為兩個(gè)部分來(lái)看，第一：用矢量圖標(biāo)繪制的地鐵、停車場(chǎng)、紅綠燈、加油站、建筑物等形象來(lái)指代實(shí)際生活中的地鐵、停車場(chǎng)、紅綠燈、加油站、建筑物等目標(biāo)物，屬于圖像性符號(hào)；第二：用繪制出的圖標(biāo)來(lái)指導(dǎo)人們的出行行為，又屬于指示性符號(hào)。（圖2）

這一組天氣應(yīng)用的圖標(biāo)設(shè)計(jì)也需要分為兩個(gè)部分：第一，點(diǎn)線面以及紅、藍(lán)、黑、白色構(gòu)成了晴、云、雨、霧等天氣現(xiàn)象，這種表現(xiàn)方式符合長(zhǎng)久以來(lái)大眾媒體對(duì)于天氣的表現(xiàn)，人們也已經(jīng)認(rèn)可這類對(duì)天氣的表現(xiàn)方式，屬于象征性符號(hào)；第二，用繪制出來(lái)的天氣圖標(biāo)來(lái)預(yù)報(bào)之后的天氣，并指導(dǎo)人們的生活出行，又屬于指示性符號(hào)。（圖3）

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

“I LOVE NY”和杭州城市圖標(biāo)這兩個(gè)案例已經(jīng)不單純屬于界面圖標(biāo)了，但因?yàn)樗麄兊姆?hào)化設(shè)計(jì)非常經(jīng)典，我們?nèi)杂斜匾獙⑵淠贸鰜?lái)分析和學(xué)習(xí)。

“I NY”這個(gè)標(biāo)識(shí)要分三層意義來(lái)解讀：① 是英文單詞LOVE（愛(ài)）的象征圖形；②NY是英文單詞NEW YORK（紐約）的縮寫和象征符號(hào)；③“INY”這組文字搭配圖形的標(biāo)識(shí)現(xiàn)在成為紐約市城標(biāo)。（圖5）

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

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

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

“talk more”圖標(biāo)用藍(lán)色的‘（上下引號(hào)）替換了文字talk more中的字母a和e，‘（上下引號(hào)）對(duì)聊天、對(duì)話行為的象征意義使得這個(gè)設(shè)計(jì)看起來(lái)意味深長(zhǎng)。（圖7）

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

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

通過(guò)以上九組案例的解讀，我們可以總結(jié)出設(shè)計(jì) 師在設(shè)計(jì)過(guò)程中主要注意的五個(gè)方面：

1.可擴(kuò)展性

由于在整個(gè)平臺(tái)的多個(gè)地方都有展現(xiàn)，且尺寸不同，因此保持其清晰度與獨(dú)特性非常重要。圖標(biāo)需要保持美觀。將小小的屏幕塞滿的過(guò)于復(fù)雜的圖標(biāo)會(huì)面臨可擴(kuò)展性不佳的情況。

在應(yīng)用圖標(biāo)的構(gòu)思設(shè)計(jì)階段，設(shè)計(jì)師應(yīng)將很大一部分精力放在這里，思考設(shè)計(jì)能否進(jìn)行良好的擴(kuò)展。

2.可辨識(shí)度

確保圖標(biāo)準(zhǔn)確呈現(xiàn)應(yīng)用的功能。應(yīng)用圖標(biāo)的設(shè)計(jì)需要精巧地編織記憶與關(guān)聯(lián)，讓功能與情感相通。嘗試刪掉所有細(xì)節(jié)，只保留原本的概念。

3.一致性

在加強(qiáng)視覺(jué)表現(xiàn)力上，讓圖標(biāo)與界面保持一致非常重要。需要考慮到與應(yīng)用圖標(biāo)的交互，以及與該應(yīng)用進(jìn)行交互，兩者的體驗(yàn)需要保持一致。讓用戶對(duì)應(yīng)用留下統(tǒng)一的形象，將會(huì)提升產(chǎn)品的可用性和滿意度。簡(jiǎn)單來(lái)說(shuō)，確保應(yīng)用圖標(biāo)與實(shí)質(zhì)、功能和設(shè)計(jì)一致將會(huì)帶來(lái)巨大的成功。

保持界面與圖標(biāo)色彩協(xié)調(diào)，并使用相似與一致的符號(hào)語(yǔ)言。通過(guò)圖標(biāo)的象征意義與應(yīng)用功能直接關(guān)聯(lián)能強(qiáng)化應(yīng)用與圖標(biāo)之間的聯(lián)系。

4.唯一性

由于常要與其他圖標(biāo)競(jìng)爭(zhēng)用戶的注意力，使用獨(dú)特的設(shè)計(jì)會(huì)很有效。設(shè)計(jì)師可以嘗試完全不同的方向?？梢試L試不同的色彩方案，找出新的象征色系。

5.盡量使用圖形化設(shè)計(jì)方案。

文字與圖片是各自分離的具象化工具，將它們結(jié)合用在圖標(biāo)上通常會(huì)導(dǎo)致用戶出現(xiàn)難以解決的混亂。有人提出 “Facebook在應(yīng)用圖標(biāo)中包含了f”。但在這個(gè)案例中，“f”進(jìn)行了柵格化和圖形化處理，已經(jīng)不是單純的文字了，它形成了具有其特定辨識(shí)度的圖像語(yǔ)言。

在應(yīng)用市場(chǎng)上有很多乏味而不能達(dá)意的圖標(biāo)樣例。圖標(biāo)就是應(yīng)用與用戶之間最本質(zhì)的聯(lián)系，是用戶在應(yīng)用市場(chǎng)瀏覽時(shí)第一眼看到的東西，也是他們?cè)诿看问褂脩?yīng)用時(shí)都會(huì)想到的東西。因此應(yīng)用圖標(biāo)設(shè)計(jì)不是單純的創(chuàng)意設(shè)計(jì)，而是整個(gè)產(chǎn)品開(kāi)發(fā)流程中的一個(gè)工作環(huán)節(jié)。

參考文獻(xiàn)：

[1]胡飛.設(shè)計(jì)符號(hào)與產(chǎn)品語(yǔ)意[M].北京：中國(guó)建筑工業(yè)出版社，2014.

[2]羅蘭巴特.符號(hào)學(xué)美學(xué)[M].沈陽(yáng)：遼寧人民出版社，2010.

[3]陳浩，高筠.語(yǔ)意的傳達(dá)：產(chǎn)品設(shè)計(jì)符號(hào)理論與方法[M].北京：中國(guó)建筑工業(yè)出版社，2009.

作者單位：

金陵科技學(xué)院endprint