互聯(lián)網(wǎng)背景下用戶界面圖標(biāo)品牌化視覺設(shè)計(jì)研究

姜春媛

摘要：文章通過對(duì)當(dāng)下互聯(lián)網(wǎng)背景下用戶界面圖標(biāo)設(shè)計(jì)背景與未來設(shè)計(jì)趨勢(shì)分析，根據(jù)現(xiàn)時(shí)用戶對(duì)圖標(biāo)設(shè)計(jì)的需求和要求，以及市場競爭優(yōu)勝劣汰的規(guī)律，結(jié)合具體實(shí)例和設(shè)計(jì)原理，提出圖標(biāo)品牌化視覺設(shè)計(jì)的方式方法，希望能對(duì)當(dāng)下圖標(biāo)設(shè)計(jì)有一定的參考價(jià)值。

關(guān)鍵詞：互聯(lián)網(wǎng)；界面圈標(biāo)；品牌化；視覺設(shè)計(jì)

檢索：www.artdesign.org.cn

中圖分類號(hào)：J0-03 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1008-2832（2016）04-0047-03

用戶界面即User Interface（簡稱UI）。UI設(shè)計(jì)是指對(duì)軟件界面人機(jī)交互操作邏輯、界面圖標(biāo)設(shè)計(jì)、界面版式等整體設(shè)計(jì)。優(yōu)秀的界面設(shè)計(jì)是具有個(gè)性和品位，又不乏簡練、自由和舒適。而用戶圖標(biāo)設(shè)計(jì)是區(qū)別于他企，使企業(yè)品牌形象凸顯個(gè)性的最佳手段之一。

界面圖標(biāo)是既以整體形象產(chǎn)出體現(xiàn)用戶品牌形象，又以單獨(dú)形象出現(xiàn)吸引觀者眼球的一種特殊的信息傳達(dá)媒介，這種媒介以橫向的、縱向的、二維的、三維的、四維的、靜態(tài)的、動(dòng)態(tài)的形式被廣泛應(yīng)用于手機(jī)、電腦、網(wǎng)絡(luò)、系統(tǒng)以及其他軟件等用戶平臺(tái)。

一、當(dāng)下用戶界面圖標(biāo)設(shè)計(jì)背景與未來設(shè)計(jì)趨勢(shì)分析

（一）當(dāng)下用戶界面圖標(biāo)設(shè)計(jì)背景分析

這是一個(gè)被互聯(lián)網(wǎng)統(tǒng)治的時(shí)代。隨著經(jīng)濟(jì)、科技的快速發(fā)展，計(jì)算機(jī)、手機(jī)、導(dǎo)航儀、Ipad等用戶設(shè)備種類層出不窮，人們隨時(shí)隨地都會(huì)利用身邊設(shè)備，通過互聯(lián)網(wǎng)解決所有感興趣的問題。據(jù)有關(guān)資料顯示，2013年1-6月，我國互聯(lián)網(wǎng)用戶為1.8億，移動(dòng)互聯(lián)網(wǎng)用戶8.04億（其中包括手機(jī)網(wǎng)民4.64億人）如此大的用戶需要利用互聯(lián)網(wǎng)調(diào)查資料，需要利用互聯(lián)網(wǎng)建立關(guān)系網(wǎng)，需要利用互聯(lián)網(wǎng)打發(fā)時(shí)間……

這是一個(gè)被客戶端用戶高要求的時(shí)代。隨著用戶文化水平的提高，對(duì)物質(zhì)和精神需求提出了更高的要求，人們對(duì)界面圖標(biāo)設(shè)計(jì)的美感、品位和技術(shù)表現(xiàn)力等要求也越來越高。他們希望圖標(biāo)能讓他們精神愉悅，他們希望圖標(biāo)能讓他們壓力得以緩解，他們希望圖標(biāo)能讓他們精神生活需求得到滿足……

這是一個(gè)被市場競爭牽制的時(shí)代。根據(jù)市場需求，合理改變圖標(biāo)視覺形象和技術(shù)表現(xiàn)力，以最優(yōu)秀的品牌形象，使企業(yè)立于雙贏（打敗競爭企業(yè)，贏得市場效益）局面。在界面圖標(biāo)設(shè)計(jì)方面，首屈一指的當(dāng)屬微軟和蘋果。微軟和蘋果都是隨著時(shí)間推移和時(shí)代需求進(jìn)行了數(shù)次變化。正是這種緊跟市場需求，懂得與時(shí)俱進(jìn)的策略，才使其品牌形象深入人心。

（二）未來用戶界面圖標(biāo)設(shè)計(jì)趨勢(shì)分析

1.圖形、色彩元素隱含意義更簡練直接

圖標(biāo)通過圖形、色彩等表象元素的重組再設(shè)計(jì)必然趨于極簡主義。從當(dāng)前電子產(chǎn)品界面圖標(biāo)的設(shè)計(jì)動(dòng)態(tài)來看，圖標(biāo)設(shè)計(jì)風(fēng)格正向更加簡練和直接趨近，設(shè)計(jì)風(fēng)格會(huì)更加的國際化。從功能和審美等方面來說，更具易識(shí)別性的極簡風(fēng)格更迎合現(xiàn)在乃至將來市場需求。

2.點(diǎn)擊轉(zhuǎn)換鏈接形式美輪美奐

點(diǎn)擊、轉(zhuǎn)換、鏈接后的效果會(huì)隨著市場消費(fèi)人群的需求更加的美輪美奐。未來的圖標(biāo)設(shè)計(jì)會(huì)通過聲音、技術(shù)使其更具時(shí)空化和動(dòng)態(tài)化，圖標(biāo)個(gè)性充分得以彰顯，從而更加地吸引觀者注意。

3.圖標(biāo)質(zhì)感表現(xiàn)更趨于趣味性

未來圖標(biāo)設(shè)計(jì)會(huì)以質(zhì)感表現(xiàn)為企業(yè)競爭的必要手段之一。通過點(diǎn)、線、面、體、色彩、透視、陰影和技術(shù)等設(shè)計(jì)元素為圖標(biāo)賦予通透性、可觸摸性和仿真性等質(zhì)感效果，制造一種虛擬虛幻空間，增強(qiáng)圖標(biāo)趣味性，吸引點(diǎn)擊量。

二、打造用戶界面圖標(biāo)品牌化視覺設(shè)計(jì)基本原則

（一）文化性原則

圖標(biāo)設(shè)計(jì)要依據(jù)企業(yè)文化、品牌文化、商品文化進(jìn)行設(shè)計(jì)，這是圖標(biāo)品牌化體現(xiàn)最根本的要求，也是企業(yè)、產(chǎn)品賦予圖標(biāo)最本質(zhì)的精神層面的支持。沒有文化內(nèi)涵的圖標(biāo)設(shè)計(jì)，是不會(huì)吸引用戶眼球的；沒有文化內(nèi)涵的圖標(biāo)設(shè)計(jì)，是不會(huì)將品牌價(jià)值向至高至上推進(jìn)和轉(zhuǎn)化的。

（二）識(shí)別性原則

圖標(biāo)設(shè)計(jì)要利用有限的空間，在第一時(shí)間向用戶表達(dá)業(yè)務(wù)內(nèi)容和圖標(biāo)設(shè)計(jì)理念。所以圖標(biāo)設(shè)計(jì)要通過簡單直接的語言符號(hào)向大眾傳達(dá)信息。圖標(biāo)不能隱含意思太多、語言含糊不清、傳播意圖不明確、意義混淆等，這樣的圖標(biāo)設(shè)計(jì)會(huì)讓人疲勞和厭倦，從而轉(zhuǎn)移目標(biāo)。

（三）醒目性原則

現(xiàn)在的圖標(biāo)設(shè)計(jì)市場競爭異常激烈，各大媒體企業(yè)想盡一切辦法讓自己的圖標(biāo)形象擠進(jìn)大眾的眼球。如何使圖標(biāo)在現(xiàn)在乃至未來媒介上具有醒目性，是值得設(shè)計(jì)者深思的問題。也許閾限的使用，會(huì)解決這個(gè)問題，但是在大家都注意到要通過圖形閾限、色彩閾限、文字閾限等手段解決問題時(shí)，競爭是不是又要改變策略？

（四）差異性原則

差異性原則，是使設(shè)計(jì)區(qū)別于其他，使大眾記憶深刻的一種必要手段。在進(jìn)行界面圖標(biāo)設(shè)計(jì)時(shí)，要利用圖形、色彩、肌理、效果等元素，使圖標(biāo)具有區(qū)別其他，使觀者記憶深刻的屬性。圖標(biāo)具備了這個(gè)屬性，勢(shì)必具備了吸引用戶興趣的個(gè)性，從而達(dá)到了企業(yè)客戶策劃營銷的目的。

（五）嚴(yán)謹(jǐn)性原則

嚴(yán)謹(jǐn)性原則不僅體現(xiàn)在比例尺寸上，還要體現(xiàn)在圖標(biāo)圖像設(shè)計(jì)細(xì)節(jié)上。在設(shè)計(jì)圖標(biāo)和使用圖標(biāo)過程中，要本著實(shí)用和適用原則，嚴(yán)格把握?qǐng)D標(biāo)設(shè)計(jì)和使用的科學(xué)性和規(guī)律性，不能肆意改變其比例和色值關(guān)系。

（六）導(dǎo)航性原則

圖標(biāo)在界面中起到空間鏈接和指示導(dǎo)航的功用。所以一級(jí)圖標(biāo)、二級(jí)圖標(biāo)等階梯圖標(biāo)之間鏈接要自然，要一氣呵成；方向指引要明確，定位要準(zhǔn)確。

（七）協(xié)調(diào)化原則

圖標(biāo)設(shè)計(jì)要與所處環(huán)境相協(xié)調(diào)。無論是手機(jī)、還是電腦，界面最初始的背景都是藍(lán)色，所以，在對(duì)圖標(biāo)設(shè)計(jì)時(shí)可以先以藍(lán)色背景為襯托，根據(jù)色彩原理，使圖標(biāo)與用戶背景相協(xié)調(diào)。另外，通過技術(shù)和藝術(shù)手段設(shè)定幾種備選方案，方案中設(shè)定圖標(biāo)可以根據(jù)用戶背景色彩自行變色，自動(dòng)使圖標(biāo)改變與背景色對(duì)比相對(duì)明顯且又相對(duì)和諧的色值。

（八）原創(chuàng)性原則

圖標(biāo)作為企業(yè)向市場推出新產(chǎn)品第一道形象門臉，要與眾不同。界面圖標(biāo)設(shè)計(jì)項(xiàng)目應(yīng)嚴(yán)格建立在5W標(biāo)準(zhǔn)中“Who”的文化背景調(diào)查研究基礎(chǔ)上，精準(zhǔn)定位，設(shè)計(jì)出能反映公司文化、品牌形象的不可替代、獨(dú)一無二的作品。

三、用戶圖標(biāo)品牌化視覺設(shè)計(jì)屬性分析

（一）圖標(biāo)承載的品牌文化分析

圖標(biāo)作為企業(yè)品牌標(biāo)志，不僅僅要具有審美和功能意義，還應(yīng)承擔(dān)傳承國家和企業(yè)文化義務(wù)。設(shè)計(jì)師應(yīng)該積極利用契機(jī)，有計(jì)劃、有目的、有針對(duì)性地將企業(yè)文化、國家文化植入圖標(biāo)設(shè)計(jì)中，使得圖標(biāo)更具文化品味和精神內(nèi)涵。

（二）國標(biāo)的比例尺寸分析

界面圖標(biāo)設(shè)計(jì)要簡練概括。無論電腦、手機(jī)、還是其他什么設(shè)備，界面上圖標(biāo)紛雜，針對(duì)如此多的圖標(biāo)，比例尺寸都應(yīng)根據(jù)設(shè)備特點(diǎn)形成統(tǒng)一的規(guī)格，一般為16×16、22×22、32×32、48×48、64×64、128×128、256×256，其中32×32作為常見。圖標(biāo)的比例基本都以1：1為主，造型多以圓形和方形為主。

圖標(biāo)因所需承載的設(shè)備尺寸和性能不能，圖標(biāo)呈現(xiàn)的效果也不同。設(shè)計(jì)人員要多方面全方位考慮已經(jīng)存在或?qū)⒁l(fā)生的因素，以提高圖標(biāo)在各種設(shè)備上的顯示效果。

（三）圖標(biāo)的色彩表達(dá)分析

色彩是設(shè)計(jì)中最重要的一個(gè)要素，是最具沖擊力、最具敏感度的視覺元素。這因?yàn)樯实挠行б暰噙h(yuǎn)遠(yuǎn)高于圖形和文字，還有色彩產(chǎn)生的情感體驗(yàn)比圖形和文字更容易激起觀者的聯(lián)想和情緒波動(dòng)。色彩本身有明度、純度、色相、色溫等屬性。各大屬性要依據(jù)色彩原理和產(chǎn)品本身訴求要求科學(xué)搭配，有機(jī)統(tǒng)一利用，才能使界面圖標(biāo)視覺效果和美觀程度達(dá)到美學(xué)要求和用戶要求。巧妙利用色彩閾限，提高市場競爭力，使得圖標(biāo)在競爭激烈的互聯(lián)網(wǎng)背景下，提高其視覺沖擊力，吸引用戶注意，從而提高點(diǎn)擊率。

（四）圖標(biāo)的造型特征分析

造型具象的圖標(biāo)具有易識(shí)性，通過人物、動(dòng)物、植物或器皿等客觀事物的自然形態(tài)，直接闡述品牌圖標(biāo)所要表達(dá)或所要傳達(dá)的信息和含義。具象圖標(biāo)以其直觀的語言形式使人能在第一時(shí)間了解圖標(biāo)業(yè)務(wù)內(nèi)容。但是，如果失去了技術(shù)性和藝術(shù)性，也會(huì)使人在第一時(shí)間失去點(diǎn)擊興趣。

造型抽象的圖標(biāo)具有象征性，即通過點(diǎn)、線、面、體等幾何圖形，標(biāo)新立異，組合形成具有理性思維和秩序感的圖標(biāo)，這些圖標(biāo)可以引發(fā)人們思考和聯(lián)想，也能大大的吸引觀者眼球的。抽象圖標(biāo)是建立在設(shè)計(jì)者對(duì)生活對(duì)事物高度概括的基礎(chǔ)上的，這種來源于生活而高于生活的設(shè)計(jì)形式，會(huì)使人產(chǎn)生高大上的精神享受，進(jìn)而提升圖標(biāo)品牌文化品位。

還有的圖標(biāo)造型以文字和數(shù)字形式表現(xiàn)出來。以本族化文字作為圖標(biāo)主體圖形，會(huì)使圖標(biāo)具有可親近性和直接性。文字圖標(biāo)可以將文字圖形化，或字母化，或象形化，會(huì)使圖標(biāo)更讓人依賴、親近和信服。數(shù)字式圖標(biāo)具有數(shù)據(jù)可靠性。以數(shù)字為主體的圖標(biāo)設(shè)計(jì)，從心理學(xué)的角度上講，會(huì)增強(qiáng)觀者對(duì)品牌圖標(biāo)、對(duì)企業(yè)機(jī)構(gòu)的信賴程度。

四、用戶界面圖標(biāo)品牌化視覺設(shè)計(jì)表達(dá)

（一）圖標(biāo)設(shè)計(jì)項(xiàng)目前期調(diào)研

圖標(biāo)設(shè)計(jì)前期調(diào)研需要幾個(gè)關(guān)鍵點(diǎn)即“Who”（客戶企業(yè)）理念、產(chǎn)品基本信息、產(chǎn)品網(wǎng)絡(luò)營銷方式、客戶企業(yè)文化、客戶目標(biāo)市場、客戶目標(biāo)消費(fèi)群。

1.“Who”（客戶企業(yè)）理念

企業(yè)理念是企業(yè)發(fā)展的核心，是視覺圖標(biāo)設(shè)計(jì)的指導(dǎo)思想。所以在圖標(biāo)設(shè)計(jì)之初，要對(duì)了解企業(yè)目標(biāo)、經(jīng)營方針、制度法則、企業(yè)精神等作以詳實(shí)調(diào)查、研究和分析。

2.產(chǎn)品基本信息

無論是網(wǎng)絡(luò)商城（例如天貓、淘寶、京東等）、網(wǎng)絡(luò)財(cái)經(jīng)類（新浪財(cái)經(jīng)、東方財(cái)富等）還是網(wǎng)絡(luò)游戲類（4399，7K7K等）產(chǎn)品，都有其獨(dú)具一格的產(chǎn)品特色，只有充分了解產(chǎn)品信息，才能使圖標(biāo)設(shè)計(jì)具有點(diǎn)睛之筆的靈魂。

3.產(chǎn)品網(wǎng)絡(luò)營銷方式

現(xiàn)在網(wǎng)絡(luò)營銷已經(jīng)越來越受到大、中、小、微型企業(yè)的重視。各個(gè)企業(yè)在競爭異常激烈的形勢(shì)下，紛紛根據(jù)自身的優(yōu)勢(shì)，選擇產(chǎn)品ul策略進(jìn)行市場營銷，以獲得市場最大化收益。

4.客戶文化

了解客戶文化，是使圖標(biāo)在視覺設(shè)計(jì)上得到很好詮釋的基礎(chǔ)?？蛻粑幕ㄆ髽I(yè)領(lǐng)導(dǎo)價(jià)值觀、審美傾向、管理水平、工作風(fēng)格等等內(nèi)容，隨著時(shí)間的推移逐漸積累而成的具有獨(dú)特風(fēng)格特征的精神層面的東西，恰恰是指導(dǎo)圖標(biāo)設(shè)計(jì)鶴立雞群的策略之一。

5.客戶目標(biāo)市場

市場政策、競爭對(duì)手、市場發(fā)展趨勢(shì)等信息對(duì)于圖標(biāo)設(shè)計(jì)定位的準(zhǔn)確性把握有著至關(guān)重要的引導(dǎo)意義。市場對(duì)于設(shè)計(jì)的宏觀管理政策或要求、競爭方圖標(biāo)設(shè)計(jì)市場效應(yīng)、市場整體設(shè)計(jì)趨勢(shì)等等信息，對(duì)于圖標(biāo)設(shè)計(jì)在信息傳播途徑、力度以及準(zhǔn)確性把握等方面都有正確的引導(dǎo)作用。

6.客戶目標(biāo)消費(fèi)群

設(shè)計(jì)者要針對(duì)企業(yè)在市場細(xì)分后確定的固定消費(fèi)群體年齡、民族、性別、文化素養(yǎng)等信息進(jìn)行調(diào)查研究和分析，根據(jù)調(diào)查數(shù)據(jù)，合理選擇圖標(biāo)設(shè)計(jì)方式、樣式、手段或者效果。

（二）品牌化設(shè)計(jì)定位

依據(jù)調(diào)查分析結(jié)論，進(jìn)行多方位、多方向的創(chuàng)意，選擇最恰當(dāng)?shù)钠放茽I銷方式、精準(zhǔn)的品牌調(diào)性對(duì)于企業(yè)發(fā)展至關(guān)重要。要從企業(yè)文化、企業(yè)標(biāo)準(zhǔn)色彩、產(chǎn)地、銷售地等元素著手，精準(zhǔn)定位，使設(shè)計(jì)風(fēng)格系統(tǒng)化、品牌化。

1.企業(yè)文化定位

依據(jù)企業(yè)文化特征定性品牌化設(shè)計(jì)風(fēng)格。通過具象或抽象的設(shè)計(jì)元素以設(shè)計(jì)重組的形式概括企業(yè)文化包括企業(yè)經(jīng)營哲學(xué)、價(jià)值觀念、企業(yè)精神、企業(yè)道德等內(nèi)容，這也是圖標(biāo)品牌化設(shè)計(jì)定位的一種可行方式。

2.交互技術(shù)定位

以往界面圖標(biāo)的鏈接技術(shù)只停留在將圖標(biāo)以應(yīng)用編寫程序的方法簡單給予技術(shù)性的功能屬性鏈接轉(zhuǎn)換階段。圖標(biāo)設(shè)計(jì)者和技術(shù)人員相互交流不緊密，使得每一環(huán)節(jié)都相互脫節(jié)，特別是藝術(shù)與技術(shù)的脫節(jié)，相互之間沒有聯(lián)系或聯(lián)系不大。

3.消費(fèi)者定位

圖標(biāo)設(shè)計(jì)以企業(yè)指定產(chǎn)品潛在的消費(fèi)群體進(jìn)行定位，展開設(shè)～fo研究指定消費(fèi)者心理，尋求能夠滿足消費(fèi)者需求、聚焦消費(fèi)者視線、吸引消費(fèi)者點(diǎn)擊瀏覽的設(shè)計(jì)風(fēng)格。

4.產(chǎn)品定位

如果以產(chǎn)品調(diào)性指導(dǎo)下其外在形式表現(xiàn)作為品牌化設(shè)計(jì)定位的話，應(yīng)根據(jù)《專利法》等文件規(guī)定，結(jié)合產(chǎn)品形狀、圖案、色彩、材質(zhì)等元素，使設(shè)計(jì)風(fēng)格一體化、一致化，以此提升品牌及產(chǎn)品競爭力。

（三）提案

1.多角度提交初案

可以企業(yè)文化定位、交互技術(shù)定位、消費(fèi)者定位、產(chǎn)品定位等多角度、多方向提交初案創(chuàng)意，從中選擇一至三個(gè)自己認(rèn)為相對(duì)優(yōu)秀的方案向企業(yè)方推薦，于企業(yè)客戶方交流，聽取客戶建議和意見，讓客戶參與到整個(gè)設(shè)計(jì)項(xiàng)目中來。

2.嚴(yán)謹(jǐn)正確提交正稿

通常設(shè)計(jì)項(xiàng)目是以競標(biāo)或委托設(shè)計(jì)來完成提交初案，初稿經(jīng)過競標(biāo)審核或委托設(shè)計(jì)確定方向后，設(shè)計(jì)就進(jìn)入正稿階段。

正稿需用Photoshop等制圖軟件對(duì)圖標(biāo)進(jìn)行繪制，比例、色值分配要嚴(yán)謹(jǐn)，要充分考慮到圖標(biāo)使用在媒介上的效果。為減免失敗幾率，設(shè)計(jì)者可以預(yù)先在電腦或其他媒介界面上模擬推演，以檢驗(yàn)圖標(biāo)從二位空間上到三維空間上是否符合設(shè)計(jì)初衷。

3.深化與完善正式稿件

正式稿件的提案要經(jīng)過反復(fù)研究和評(píng)稿，看看設(shè)計(jì)創(chuàng)意是否能在一定時(shí)間內(nèi)把握客戶的想法和要求付諸實(shí)施，是否準(zhǔn)確表達(dá)客戶營銷策略和文化精神等。

當(dāng)大體創(chuàng)意思路與方案經(jīng)過設(shè)計(jì)者與企業(yè)客戶相互溝通、體會(huì)和研討而確定時(shí)，設(shè)計(jì)者還要對(duì)設(shè)計(jì)方案圖標(biāo)圖形比例設(shè)定、色彩工藝、交互技術(shù)等細(xì)節(jié)進(jìn)行深化和完善。