UI設(shè)計中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計的異同

張竹莉

摘要：隨著科技的發(fā)展，人們需要更簡單地使用更強(qiáng)大的功能時，介于產(chǎn)品終端與用戶之間的UI設(shè)計的重要性也就日益明顯。UI中的視覺設(shè)計與其它平面設(shè)計分支聯(lián)系緊密卻也各有不同。本文從 UI設(shè)計中圖標(biāo)設(shè)計與標(biāo)志設(shè)計兩點(diǎn)切入，通過對標(biāo)志設(shè)計和圖標(biāo)設(shè)計的橫向?qū)Ρ?，揭示兩者之間的聯(lián)系與區(qū)別，甚至延伸至整個 UI設(shè)計與其它平面設(shè)計分支的差異，正確看待各種設(shè)計實(shí)踐類型，把握不同設(shè)計類型之間的要求。

關(guān)鍵詞：UI設(shè)計；圖標(biāo)設(shè)計；標(biāo)志設(shè)計

一、研究對象

（一）研究對象的界定

本文的研究對象為當(dāng)代標(biāo)志設(shè)計與UI設(shè)計中的圖標(biāo)設(shè)計的聯(lián)系與區(qū)別，以及以后的發(fā)展趨勢。

（二）概念解析

UI設(shè)計（user interface）：字面意思為用戶界面設(shè)計?！敖缑妗奔慈藱C(jī)交互界面。廣義的用戶界面是指用戶和系統(tǒng)進(jìn)行交互的方法合集：從用戶的角度出發(fā)，滿足用戶和計算機(jī)之間的人機(jī)交互。

圖標(biāo)（icon）：廣義上是指所有有指示作用的標(biāo)志，狹義上時指計算機(jī)顯示屏，等電子設(shè)備上引導(dǎo)用戶進(jìn)行各種操作的圖像。UI設(shè)計中的圖標(biāo)按照功能分為啟動圖標(biāo)和功能性圖標(biāo)。啟動圖標(biāo)為應(yīng)用在手機(jī)主頁面和啟動窗口或電腦桌面上的圖標(biāo)，也會出現(xiàn)在應(yīng)用商店里面。功能圖標(biāo)是應(yīng)用程序中指示各種交互功能和步驟。幫助用戶實(shí)現(xiàn)操作。隨著IT產(chǎn)品的不斷普及，圖標(biāo)的作用在UI設(shè)計中越來越重大。

標(biāo)志設(shè)計：具有象征意義的視覺符號。標(biāo)志從原始社會單純記錄信息，到現(xiàn)代社會商家利用標(biāo)志進(jìn)行商品識別，提升企業(yè)形象等?，F(xiàn)代標(biāo)志是經(jīng)濟(jì)時代的產(chǎn)物。在企業(yè)形象傳遞過程中，是應(yīng)用最廣泛是最關(guān)鍵的元素。

二、研究背景

互聯(lián)網(wǎng)產(chǎn)品的設(shè)計包括功能和可用性。在計算機(jī)發(fā)展初始，更多側(cè)重于功能，人機(jī)交互就顯的不是那么重要。隨著科學(xué)技術(shù)的發(fā)展，當(dāng)互聯(lián)網(wǎng)產(chǎn)品的使用者越來越多的由普羅大眾構(gòu)成的時候。人們需要更簡單地使用更強(qiáng)大的功能時，介于產(chǎn)品終端與用戶之間的UI設(shè)計的重要性也就日益明顯。

UI設(shè)計包括用戶研究、交互設(shè)計、視覺設(shè)計三個方面。UI中的視覺設(shè)計與其它平面設(shè)計分支聯(lián)系緊密卻也各有不同。UI設(shè)計與傳統(tǒng)平面設(shè)計同為發(fā)現(xiàn)問題，解決問題，作為企業(yè)與用戶溝通的橋梁。在國內(nèi)目前UI設(shè)計發(fā)展不充分的情況下，一部分人將UI設(shè)計與傳統(tǒng)的平面設(shè)計一概而論；另外一部分則過度將UI設(shè)計神秘化。

通過對兩者的對比了解兩種設(shè)計，甚至延伸至整個 UI設(shè)計與其它平面設(shè)計分支的差異，更為深入地了解幾種設(shè)計類型的聯(lián)系與差異，正確看待各種設(shè)計實(shí)踐類型，把握不同設(shè)計類型之間的要求。

三、UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計的聯(lián)系

（一）UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計“源流”相同，標(biāo)志以形象符號的方式，形成人類長期的一種視覺化的傳達(dá)工具，在我們的生活的各個方面。如今，人們更是進(jìn)入了“讀圖時代”，UI中的圖標(biāo)設(shè)計同樣以形象符號的方式在互聯(lián)網(wǎng)中展現(xiàn)，兩者所使用的表現(xiàn)方法一致。UI中的圖標(biāo)設(shè)計可以看作是標(biāo)志設(shè)計在互聯(lián)網(wǎng)的“演變”。將以形象符號作為視覺化傳達(dá)的方式推向高潮。

（二）UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計具有相同的功能。這個兩種設(shè)計存在的根本點(diǎn)。

1.具有識別功能。圖標(biāo)設(shè)計和標(biāo)志設(shè)計，最基本的功能都是能夠準(zhǔn)確傳達(dá)信息。通過標(biāo)志，人們能夠在品類繁多的商品中區(qū)分來自不同的品牌。而圖標(biāo)的意義也在于在眾多的app中得以脫穎而出。

2.具有相同的傳播功能。無論是標(biāo)志設(shè)計還是UI中的圖標(biāo)設(shè)計，都是通過傳播達(dá)到客戶認(rèn)可。好的設(shè)計可以在人們心中留下美好而又深刻的印象，促進(jìn)人們對于產(chǎn)品，企業(yè)的認(rèn)可。

3.具有相同的審美功能。一個圖標(biāo)或標(biāo)志在設(shè)計上是否具有美感，會直接影響產(chǎn)品或公司的形象。一個設(shè)計美觀的標(biāo)志，常常是人們對于產(chǎn)品或企業(yè)的第一印象。對于越來越注重“顏值”、淘汰率更高的互聯(lián)網(wǎng)產(chǎn)品尤甚。

4.同樣具有延展功能。一個標(biāo)志或圖標(biāo)都不會孤立的展示在大眾面前，它需要配合不同的元素在各種環(huán)境中展示。

四、UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計的區(qū)別

設(shè)計具有兩個基本屬性：一是功能，即存在的價值；二是存在的形態(tài)。UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計雖然同源流，但出于不同媒介，必然導(dǎo)致存在形態(tài)的差異。

（一）UI中的圖標(biāo)設(shè)計更為“以人為本”。用戶研究是UI設(shè)計開始的第一步，并始終貫穿。這種設(shè)計手段將逐漸成為流行，并影響到各行各業(yè)。

（二）交互性不同?；ヂ?lián)網(wǎng)技術(shù)的發(fā)展使人的認(rèn)知由傳統(tǒng)的讀、寫轉(zhuǎn)變?yōu)榈揭曈X、聽覺、嗅覺、觸覺共同作用的認(rèn)知方式，更加全面地了解事物。圖標(biāo)設(shè)計需要充分滿足用戶的全方位視聽交互體驗。

（三）復(fù)雜程度不同。圖標(biāo)設(shè)計也經(jīng)由復(fù)雜到簡單的過程。iphone4將擬物化圖標(biāo)設(shè)計推向高潮，但隨之而來的 windows8界面中的扁平化風(fēng)格和ios7，打開了扁平化的大門。拋棄諸如陰影、透視等的裝飾效果，以最為簡單直白的方式傳達(dá)所要表達(dá)的東西。設(shè)計從形式回歸內(nèi)容。究其原因在于，各類互聯(lián)網(wǎng)產(chǎn)品，所包涵的信息量越來越大，扁平化圖標(biāo)能夠減少用戶在交互中的障礙，讓用戶去接受更多的內(nèi)容。相比之下，標(biāo)志設(shè)計的復(fù)雜程度則遠(yuǎn)遠(yuǎn)高于圖標(biāo)設(shè)計，涵蓋的內(nèi)容也遠(yuǎn)遠(yuǎn)多于圖標(biāo)。

（四）圖文關(guān)系不同。標(biāo)志設(shè)計相對于圖標(biāo)設(shè)計，圖文關(guān)系更復(fù)雜。標(biāo)志設(shè)計中文字設(shè)計甚至于圖形設(shè)計更重要，在標(biāo)志傳播中起到更大的作用，這是由兩者的使用載體不同所決定的。

五、UI中的圖標(biāo)設(shè)計應(yīng)與標(biāo)志設(shè)計相互融合

（一）首先標(biāo)志設(shè)計應(yīng)從圖標(biāo)設(shè)計上吸取優(yōu)點(diǎn)，在互聯(lián)網(wǎng)時代中獲得新的改變?；仡櫄v史，標(biāo)志設(shè)計也經(jīng)歷由復(fù)雜到簡單的過程?；ヂ?lián)網(wǎng)技術(shù)的發(fā)展，新的媒介的產(chǎn)生，標(biāo)志設(shè)計也必須適應(yīng)新時代的變化需要。首先，標(biāo)志設(shè)計應(yīng)該從二維空間的束縛中解脫，向多維空間發(fā)展。其次，標(biāo)志設(shè)計中圖形應(yīng)該由理性，抽象向個性，感官化轉(zhuǎn)變。設(shè)計的變化發(fā)展要符合人精神追求的不斷變化，只有越來越富有人情的設(shè)計激發(fā)人們的興趣。

（二）UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計源流相同，價值相同。同可作為品牌對外展示的“面”。如果能正確區(qū)分圖標(biāo)設(shè)計與UI設(shè)計在不同媒介上的優(yōu)劣，并合理使用。兩者相結(jié)合一定能夠打造出全方位的文化傳播。

六、結(jié)語

從UI中的圖標(biāo)設(shè)計與標(biāo)志設(shè)計兩者之間的橫向?qū)Ρ葋砜矗瑑烧哂新?lián)系，同時又有區(qū)別。到了科學(xué)技術(shù)日臻成熟的今天，UI中的圖標(biāo)設(shè)計越來越脫離標(biāo)志設(shè)計，自成一類設(shè)計分支。正確把握標(biāo)志設(shè)計與UI中的圖標(biāo)設(shè)計的聯(lián)系與區(qū)別，并且能夠做到融會貫通，正確完成具體的設(shè)計實(shí)施。由此對應(yīng)UI設(shè)計與傳統(tǒng)平面設(shè)計。在新時代，對傳統(tǒng)平面設(shè)計做出改變和突破，適應(yīng)時代的需求，以無限的變化適應(yīng)不同時代的要求。才能真正做到發(fā)現(xiàn)問題、解決問題。這才是設(shè)計之本質(zhì)。

【參考文獻(xiàn)】

[1]牧婧.當(dāng)今標(biāo)志設(shè)計的發(fā)展趨向及方法探究[D].清華大學(xué)，2007.

[2]周煜嘯，羅仕鑒，陳根才.基于設(shè)計符號學(xué)的圖標(biāo)設(shè)計[J].計算機(jī)輔助設(shè)計與圖形學(xué)學(xué)報，2012（10）.