400-611-9921
2017-08-25
2533
如今的用戶界面中,圖標(biāo)絕對是不可或缺的元素。雖然絕大多數(shù)的圖標(biāo)都很小,甚至不被人注意到,但是它們幫助設(shè)計和用戶解決了許多問題。圖標(biāo)是可用性和導(dǎo)航的關(guān)鍵,用戶能夠感知到圖標(biāo)的功用,但是只有設(shè)計師才會明白,想要讓圖標(biāo)簡約、可用還富有表現(xiàn)力,要耗費多少時間和精力。
喬布斯曾經(jīng)說過:“細(xì)節(jié)至關(guān)重要,花費時間仔細(xì)打磨是值得的?!眻D標(biāo)是現(xiàn)如今UI界面中可用性和導(dǎo)航體系的核心組件,所以,今天的文章,我們來仔細(xì)歸納一下常見的圖標(biāo)類型和它們在UI中的使用。
一般而言,圖標(biāo)是具有高度概括性的、用于視覺信息傳達的小尺寸圖像。圖標(biāo)常??梢詡鬟_出豐富的信息,并且常常和詞匯、文本搭配相互搭配使用,兩者互相支撐,或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。在數(shù)字設(shè)計領(lǐng)域,圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在,是確保界面可用性的基礎(chǔ)設(shè)施,也是達成人機交互這一目標(biāo)的有效途徑。
圖標(biāo)的表意功能,使得它可以有效地替代文本來使用。有研究表明,使用高度可識別的、清晰的圖標(biāo),對于界面導(dǎo)航的可用性有極大的提升,對于人類而言,視覺信息的處理速度比起文本要快太多。不過,從另一方面來看,圖標(biāo)需要傳遞出相對清晰的概念才行,任何輕微的誤讀都會對整體體驗造成極大的傷害,所以,圖標(biāo)的選取要慎之又慎,經(jīng)過仔細(xì)的測試,才能達成良好的平衡,并且為目標(biāo)受眾所接受。
正如同我們所知道的,圖標(biāo)、標(biāo)識都不是界面設(shè)計師所創(chuàng)造的概念,它的存在可以追溯到人類文明誕生之初,在漫長的歷史長河當(dāng)中,早期用來傳達信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字,而在地圖、圖書、壁畫和建筑等各種各樣的地方,還存在著用來代表和傳達特定概念的圖標(biāo)和標(biāo)識。
隨著技術(shù)的發(fā)展,計算機誕生了,而顯示器的出現(xiàn),也為圖形化界面的誕生,鋪平了道路。20世紀(jì)70年代,施樂在位于帕羅奧托的研究所當(dāng)中,誕生了最早的擁有圖形化界面的電腦,著名的 Xerox Alto。這款昂貴的概念機最終并沒有走進大眾的視野,但是它的后續(xù)機型施樂之星在1981年問世,并且成為了計算機史上的重要里程碑,而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā),更是引發(fā)了計算機歷史上最著名的一場戰(zhàn)爭:蘋果VS微軟,Windows 對抗 Macintosh。當(dāng)然這都是后話。
Xerox Alto 中引入了大量的圖標(biāo)設(shè)計,其中文件夾和垃圾箱的圖標(biāo)設(shè)計,從當(dāng)時一直延續(xù)到現(xiàn)在,成為企業(yè)網(wǎng)站建設(shè)圖標(biāo)設(shè)計中最廣為人知和普遍接受的設(shè)計概念。
來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年,蘋果借由Macintosh,首次發(fā)布了彩色的圖標(biāo)設(shè)計。圖標(biāo)所能容納的信息量比起上一個黑白界面的時代更大,全新的樣式使得它在信息傳達的功能性上有了明顯的提升。
在此之后,越來越多的圖標(biāo)開始借由靈活而強大的數(shù)字技術(shù)而誕生,并且基于不同的需求而演化出不同的分支和風(fēng)格。許多操作系統(tǒng)和工具開始預(yù)制一些成體系的圖標(biāo),誕生基于種種需求,越來越多的自制的、重設(shè)計的圖標(biāo),逐步進入了我們的視野。圖標(biāo)類型很多,我們可以用不同的方式來劃分它們。
這些圖標(biāo)是旨在闡明信息的圖標(biāo)類型。它們是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。在某些情況下,它們并不是直接可交互的UI元素,在很多時候也會有輔助解釋其含義的文案。同時,它們還常常會作為行為召喚的文本的視覺輔助元素而存在,以提高信息的可識別性。很多時候用戶會借助這些解釋性圖標(biāo)來獲取信息,而不是相搭配的文本。不過,有的時候圖標(biāo)表達的含義可能還不夠完整或者清晰,最好是將圖標(biāo)和文案搭配起來使用,降低誤讀的可能性。
這種圖標(biāo)在UI中不止是展示的作用,它們還會參與到用戶交互當(dāng)中來,是導(dǎo)航系統(tǒng)不可或缺的組成部分。它們可以被點擊,并且隨之響應(yīng),幫助用戶執(zhí)行特定的操作,觸發(fā)相應(yīng)的功能。
這種圖標(biāo)通常是用來提升整個界面的美感和視覺體驗,并不具備明顯的功能性。但是,它們同樣是重要的。這類圖標(biāo)迎合了目標(biāo)受眾的偏好與期望,具備有特定的風(fēng)格的外觀,并且提升了整個設(shè)計的可靠性和可信度。更準(zhǔn)確地說,這些裝飾性的圖標(biāo)不僅可以吸引并留住用戶,并且可以讓整個用戶體驗更加積極。裝飾性圖標(biāo)通常呈現(xiàn)出季節(jié)性和周期性的特征。
應(yīng)用圖標(biāo)是不同數(shù)字產(chǎn)品在各個操作系統(tǒng)平臺上的入口和品牌展示用的標(biāo)識,它是這個數(shù)字產(chǎn)品的身份象征。在絕大多數(shù)的情況下,它會將這個品牌的LOGO和品牌用色融入到圖標(biāo)設(shè)計當(dāng)中來。也有的圖標(biāo)會采用吉祥物和企業(yè)視覺識別色的組合。真正優(yōu)秀的應(yīng)用圖標(biāo)設(shè)計,其實是結(jié)合市場調(diào)研和品牌設(shè)計的組合,它的目標(biāo)在于創(chuàng)造一個不會讓用戶能夠在屏幕上快速找到的醒目設(shè)計。
Favicon 有時候也被成為 URL 圖標(biāo),它是網(wǎng)頁在網(wǎng)頁的標(biāo)簽中顯示的識別性小圖標(biāo),它同樣代表著網(wǎng)頁,是用戶在網(wǎng)頁和瀏覽器當(dāng)中快速定位的視覺識別標(biāo)識。Favicon 同樣是身份識別用的圖標(biāo),并且在網(wǎng)頁的宣傳和推廣以及視覺識別上都有重要的意義。
“Glyph”一詞是源自于排版領(lǐng)域,現(xiàn)在已經(jīng)隨著數(shù)字設(shè)計而逐步在數(shù)字設(shè)計領(lǐng)域扎根了,它源自于希臘語,含義為“雕刻”。最初,它值得是讀者和作家約定俗成的符號、字符合集中所包含的各種圖形。在排版領(lǐng)域當(dāng)中,符號圖標(biāo)通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統(tǒng),它可以是字母,也可以是圖形,有的時候甚至是兩者的組合。下面是一套古老的凱爾特字符系統(tǒng):
在現(xiàn)代的數(shù)字設(shè)計當(dāng)中,字符圖標(biāo)在古老的字符系統(tǒng)上有了新的發(fā)展?,F(xiàn)在的字符圖標(biāo)同樣包含了字母、數(shù)字和圖形,它們中所涵蓋的內(nèi)容更加豐富。這樣一來,現(xiàn)在提及字符圖標(biāo),我們通常不會將它們視為文字,而是圖標(biāo)。下面是Material Design 的字符圖標(biāo)集:
字符圖標(biāo)使用簡化和通用的圖形,當(dāng)用戶在使用它們的時候,它們擁有足夠的識別度和靈活的適用場景。
扁平化的圖標(biāo)設(shè)計比起字符圖標(biāo)就要復(fù)雜得多,其中增加了色彩和其他元素的填充,比起近乎由輪廓和筆畫構(gòu)成的字符圖標(biāo),明顯要高一個維度。然而和前者一樣,扁平的圖標(biāo)同樣專注于清晰而直觀的視覺信息傳達,為用戶提供一目了然的視覺內(nèi)容。扁平化的圖標(biāo)設(shè)計最突出的功能也就在此,在二位的平面上,不借助復(fù)雜的紋理和陰影來明了地、視覺化地傳達信息,和擬物化圖標(biāo)正好相對。
就如同上文所說,擬物化圖標(biāo)是扁平化圖標(biāo)的對立面,正如同當(dāng)初擬物化圖標(biāo)設(shè)計師常說的,它就是“抄現(xiàn)實”,盡量將現(xiàn)實世界中的形狀、紋理、光影都融入到整個圖標(biāo)的設(shè)計,擬真是它的特點。擬物化圖標(biāo)這一設(shè)計趨勢幾乎是跟隨著Macintosh 的誕生和進化一步一步走過來,走到極致,然后從UI設(shè)計領(lǐng)域開始,被扁平化設(shè)計所替代。不過,擬物化圖標(biāo)現(xiàn)在依然廣泛地運用在不同領(lǐng)域,尤其是游戲設(shè)計和游戲類產(chǎn)品的圖標(biāo)設(shè)計當(dāng)中。
SVG圖標(biāo),其中的SVG 是 Scalable Vector Graphics 的縮寫,它是基于 XML 的2D矢量圖標(biāo)技術(shù),它的技術(shù)標(biāo)準(zhǔn)被 W3C 所推行,并且得到所有的主流瀏覽器的支持。SVG 圖標(biāo)現(xiàn)在越來越受歡迎,它很大程度上降低了跨平臺、跨屏幕設(shè)計的時候圖標(biāo)顯示上的兼容性問題。
著名的可用性研究專家 Jackob Nielsen 曾經(jīng)在 NNGroup 的文章中披露了這種圖標(biāo)類型劃分的標(biāo)準(zhǔn)。圖標(biāo)基于其中所反映出來的隱喻,可以劃分為三個主要類型。相似圖標(biāo),它是將現(xiàn)實世界中的物理實體給符號化,這種設(shè)計最典型的就是用于搜索的放大鏡圖標(biāo),購物車圖標(biāo),郵件圖標(biāo)等。參考性圖標(biāo),它是使用類比對象的方式來設(shè)計的圖標(biāo),比如壓縮和解壓類的工具圖標(biāo),常常會使用包、拉鏈這樣的意象來傳遞出概念。
隨意式圖標(biāo),這類圖標(biāo)的設(shè)計和其功能/含義并沒有關(guān)聯(lián),它們本身并不傳遞出功能性的含義,依靠的是用戶長時間的查看、使用,逐步習(xí)慣來熟悉其中的含義?,F(xiàn)在許多界面當(dāng)中的“保存”按鈕采用的是軟盤的圖標(biāo),但是軟盤實際上早已退出歷史舞臺,許多用戶甚至都不知道軟盤的存在,但是用戶會在長時間的使用過程中了解它的功能,并且在大腦中形成這樣的概念回路。
在之前的文章中,我們總結(jié)過高效的圖標(biāo)設(shè)計應(yīng)該具備的特征,在此我們快速回顧一下:
清晰:圖標(biāo)的意義應(yīng)該是可理解的,可供受眾吸收的
有意義:傳遞出有意義的信息
可識別:圖標(biāo)中所包含的視覺符號應(yīng)該能夠被正確地識別和呈現(xiàn)
簡單:圖標(biāo)中僅僅包含必要的元素,便于被快速的感知,不會讓用戶感到費勁
吸引人:圖標(biāo)設(shè)計要比其他的視覺元素更突出,直覺而引人矚目
靈活可拓展:圖標(biāo)應(yīng)該可縮放,并且不論大小都能被人所理解,完整而易讀
不冒犯人:它應(yīng)該沒有隱含意義,也不會有被誤讀的可能
一致:圖標(biāo)應(yīng)該和應(yīng)用保持一致的風(fēng)格
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技
標(biāo)簽:縱天,企業(yè)網(wǎng)站建設(shè)
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com