譚利

【摘 要】界面圖標(biāo)是圖形化界面中最直觀的視覺(jué)形態(tài)語(yǔ)言，是界面中最重要的組成元素，它的出現(xiàn)對(duì)社會(huì)的信息化發(fā)展起著重要的推動(dòng)作用。隨著科技和時(shí)代的發(fā)展，界面圖標(biāo)在功能性和識(shí)別性上得到了很大的優(yōu)化，在統(tǒng)一性和個(gè)性化的視覺(jué)表現(xiàn)上也得到了不斷的提升，從像素化到擬物化，從扁平化到半扁平化，甚至到未來(lái)的多元化，界面圖標(biāo)在發(fā)展過(guò)程中經(jīng)歷了不同的視覺(jué)風(fēng)格演變，反映著時(shí)代的需要以及人們對(duì)技術(shù)與藝術(shù)的完美追求。

【關(guān)鍵詞】界面圖標(biāo)；風(fēng)格；演變

中圖分類(lèi)號(hào)： J524；TN929.53 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 2095-2457（2018）28-0039-002

DOI：10.19694/j.cnki.issn2095-2457.2018.28.015

【Abstract】User interface icon is the most intuitive visual morphological language in the graphical interface，is the most important component of the UI，its emergence plays an important role in promoting the development of information society.With the development of science and technology，the UI icon has been greatly optimized in functionality and recognition，and has been constantly improved in unity and personalized visual performance.From pixelization to materialization，from flattening to semi-flattening，and even to future diversification，the UI icon has undergone a process of development.The evolution of different visual styles reflects the needs of the times and people's pursuit of technology and art.

【Key words】UI icon；Style；Evolution

隨著電腦、手機(jī)、平板等電子設(shè)備越來(lái)越多的介入到我們的生活中，終端界面對(duì)人們的影響越來(lái)越大，它是用戶與機(jī)器設(shè)備之間交流和互動(dòng)的最直接的媒介，并且影響著用戶對(duì)設(shè)備和相關(guān)產(chǎn)品的識(shí)別度和信任度。計(jì)算機(jī)剛問(wèn)世時(shí)，只有少數(shù)人們能通過(guò)特殊的命令來(lái)與計(jì)算機(jī)進(jìn)行交流。如今圖形用戶界面廣泛應(yīng)用到個(gè)人電腦上時(shí)，大眾都可以通過(guò)完全圖形化的窗口系統(tǒng)實(shí)現(xiàn)計(jì)算機(jī)操作。隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，各種智能和移動(dòng)設(shè)備產(chǎn)品的迅速普及，瀏覽界面已經(jīng)成為人們生活中的一部分，是大家獲取信息的主要的方式之一。晦澀難懂的命令語(yǔ)言被圖形界面取而代之，用戶的操作體驗(yàn)變得簡(jiǎn)單而舒適，界面圖標(biāo)在這其中起著關(guān)鍵的作用。界面圖標(biāo)是圖形化界面中最直觀的視覺(jué)形態(tài)語(yǔ)言，是界面中最重要的組成元素，它的出現(xiàn)對(duì)社會(huì)的信息化發(fā)展起著重要的推動(dòng)作用。

圖標(biāo)有廣義和狹義之分，廣義的圖標(biāo)是具有指代意義的圖形符號(hào)，它不僅能準(zhǔn)確而快捷地傳達(dá)信息，而且便于識(shí)別和記憶。例如我們經(jīng)?？梢栽诠矆?chǎng)合中看到公廁圖標(biāo)、電梯圖標(biāo)和停車(chē)圖標(biāo)等。狹義的圖標(biāo)主要應(yīng)用于計(jì)算機(jī)軟件方面，一個(gè)小小的圖形符號(hào)，卻代表著一個(gè)文件、程序、網(wǎng)頁(yè)或命令，它能幫助用戶進(jìn)行打開(kāi)程序、執(zhí)行命令或是瀏覽網(wǎng)頁(yè)等諸多操作。界面圖標(biāo)指的就是這種類(lèi)型的圖標(biāo)，其最主要的作用是功能性，它要求用簡(jiǎn)單的造型來(lái)準(zhǔn)確表達(dá)和傳遞復(fù)雜的意義，具備較好的可識(shí)性和易讀性；除此以外界面圖標(biāo)的美觀性也很重要，良好的視覺(jué)效果能在人機(jī)交互中給人帶來(lái)愉悅的體驗(yàn)。早在二十世紀(jì)70年代，美國(guó)的施樂(lè)公司為了使用戶能更好的使用和掌握設(shè)備，研發(fā)了一種與設(shè)備相對(duì)應(yīng)的圖形標(biāo)識(shí)，這可以被看作是界面圖標(biāo)設(shè)計(jì)的開(kāi)始，隨著科技和時(shí)代的發(fā)展，界面圖標(biāo)在功能性和識(shí)別性上得到了很大的優(yōu)化，在統(tǒng)一性和個(gè)性化的視覺(jué)表現(xiàn)上也得到了不斷的提升，在它的發(fā)展過(guò)程中經(jīng)歷了不同的視覺(jué)風(fēng)格變化。

1 像素化風(fēng)格圖標(biāo)

在圖標(biāo)產(chǎn)生之初，由于受當(dāng)時(shí)計(jì)算機(jī)硬件設(shè)備的局限，顯示器的有限像素決定了圖標(biāo)的低像素的視覺(jué)表現(xiàn)，高度概括的低像素圖形成為界面圖標(biāo)最初的表現(xiàn)形式。在計(jì)算機(jī)還沒(méi)有全面普及的時(shí)代，顯示器只有72每英寸的分辨率，這決定著圖標(biāo)的像素也只有72*72，簡(jiǎn)單的像素點(diǎn)組成的抽象形態(tài)成為界面圖標(biāo)最早的視覺(jué)風(fēng)格。這種早期的圖標(biāo)像素化特征發(fā)展到現(xiàn)在，并不是指圖標(biāo)的低像素表現(xiàn)，而是成為了一種像素風(fēng)格的視覺(jué)特征代表，它強(qiáng)調(diào)清晰的輪廓、明快的色彩，顆粒感像素的造型比較卡通，畫(huà)面風(fēng)格獨(dú)特。

我們現(xiàn)在依然能在眾多的界面設(shè)計(jì)中看到具有像素化風(fēng)格的圖標(biāo)，這種低像素風(fēng)格化圖標(biāo)不再是簡(jiǎn)陋的畫(huà)面從它的創(chuàng)意理念和畫(huà)面制作上，我們可分辨出時(shí)代的不同。最初的像素圖標(biāo)只有黑白兩色，以顆粒像素的排列組合塑造不同的形狀?，F(xiàn)在的像素化風(fēng)格圖標(biāo)依舊保持顆粒像素組成的視覺(jué)獨(dú)特性，但在色彩和效果上都有很豐富的表現(xiàn)。圖標(biāo)的像素化最初源于設(shè)備的局限性，最終卻發(fā)展成為了一種獨(dú)特的藝術(shù)風(fēng)格，從某種意義上來(lái)看，像素化圖標(biāo)具有一定的時(shí)代特殊性，同時(shí)也被賦予了獨(dú)特的懷舊和復(fù)古氣息。

2 擬物化風(fēng)格圖標(biāo)

隨著計(jì)算機(jī)硬件設(shè)備水平的提高，界面圖標(biāo)的表現(xiàn)空間得以擴(kuò)展。為了讓用戶能夠準(zhǔn)確快速的識(shí)別和操作界面，界面圖標(biāo)就需要有更清晰的表現(xiàn)場(chǎng)景和識(shí)別意義，甚至為了增強(qiáng)其辨識(shí)度而去模仿現(xiàn)實(shí)世界中事物，利用用戶的日常經(jīng)驗(yàn)去培養(yǎng)對(duì)圖標(biāo)的熟悉感。自1984年蘋(píng)果公司發(fā)布了全新的Macintosh圖形系統(tǒng)，隱喻開(kāi)始被廣泛的應(yīng)用于各種桌面操作系統(tǒng)和移動(dòng)裝置，大家熟悉的桌面、文件夾和回收站類(lèi)似的概念都是源于桌面系統(tǒng)的隱喻。擬物化設(shè)計(jì)就是源于界面的視覺(jué)隱喻，形象生動(dòng)的文件夾和垃圾桶圖標(biāo)讓用戶快速清晰的明確它所指代的含義。蘋(píng)果公司的ios系統(tǒng)的人機(jī)界面指南里曾經(jīng)說(shuō)到，“當(dāng)你應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作模仿，用戶就能快速領(lǐng)會(huì)如何使用它?！?/p>