2019年已經(jīng)所剩不多了，在這過(guò)去的一年內(nèi)，圖標(biāo)設(shè)計(jì)出現(xiàn)了什么新動(dòng)向和新熱點(diǎn)？本篇文章中，作者盤(pán)點(diǎn)回顧了2019圖標(biāo)設(shè)計(jì)出現(xiàn)的11個(gè)亮點(diǎn)趨勢(shì)，一起來(lái)看看。

圖標(biāo)icon可能是過(guò)往整個(gè)界面設(shè)計(jì)中最容易被低估但又是最重要的元素之一。它們幾乎無(wú)處不在，一個(gè)優(yōu)秀的圖標(biāo)設(shè)計(jì)可以是獨(dú)特的，同時(shí)為項(xiàng)目增磚添瓦。

現(xiàn)在就讓我們一起回顧一下2019年圖標(biāo)設(shè)計(jì)中出現(xiàn)的新動(dòng)向和新熱點(diǎn)吧!

01 圖標(biāo)外形直觀化

當(dāng)我們?yōu)g覽任何一家程序應(yīng)用商店時(shí)，應(yīng)該經(jīng)常能夠看到一些我們常見(jiàn)的圖標(biāo)標(biāo)識(shí)，比如代表郵件應(yīng)用的信封圖標(biāo)、代表工作安全應(yīng)用的門(mén)鎖圖標(biāo)等。

這類圖標(biāo)通過(guò)直觀的外形設(shè)計(jì)能為用戶提供一個(gè)快速的可視信息，簡(jiǎn)潔明了的告訴用戶應(yīng)用程序的功能，幫助用戶知道他們應(yīng)該做什么，應(yīng)該如何與設(shè)計(jì)交互。

所以設(shè)計(jì)師在嘗試設(shè)計(jì)屬于自己風(fēng)格的圖標(biāo)時(shí)，也越來(lái)越注意透過(guò)對(duì)圖標(biāo)直觀化的設(shè)計(jì)展示來(lái)簡(jiǎn)單快速的表達(dá)其特定含義。

02 高飽和、高明度的色彩

高飽和、高明度色彩的運(yùn)用已滲透在設(shè)計(jì)的各個(gè)方面，圖標(biāo)也不例外，明亮的色彩是吸引用戶眼球的有效方式。

色彩的運(yùn)用隨著圖標(biāo)設(shè)計(jì)趨勢(shì)也在發(fā)生著變化，從黑白線條圖標(biāo)到具備現(xiàn)實(shí)外觀的全彩圖標(biāo)再到現(xiàn)在流行的扁平、漸變、色彩明艷的圖標(biāo)。從目前流行趨勢(shì)來(lái)看，設(shè)計(jì)師更多偏向選取飽和度及明度都較高的黃色、藍(lán)色、綠色或是紫色，有時(shí)一個(gè)圖標(biāo)甚至?xí)Y(jié)合其中幾種色彩進(jìn)行調(diào)和搭配。

03 圓形圖標(biāo)

圓是最和諧的形狀之一。說(shuō)到圖標(biāo)設(shè)計(jì)，無(wú)論是比較偏寫(xiě)實(shí)的球體圖標(biāo)還是扁平化的圓形圖標(biāo)，在設(shè)計(jì)圖標(biāo)范圍內(nèi)都是相當(dāng)受歡迎的。

圓形對(duì)圖標(biāo)設(shè)計(jì)的部分影響可能來(lái)源于谷歌或是蘋(píng)果這樣的行業(yè)代表，他們提出的一些指導(dǎo)原則和材料設(shè)計(jì)使這些圓形按鈕非常適合在手機(jī)上進(jìn)行點(diǎn)擊，同理，由于圖標(biāo)可觸摸和可點(diǎn)擊的概率也非常高，所以這樣的理念也逐漸影響并適用于圖標(biāo)設(shè)計(jì)。

不過(guò)在創(chuàng)建圓形圖標(biāo)時(shí)，需要考慮圖標(biāo)不同的運(yùn)用場(chǎng)景及尺寸，保證圖標(biāo)設(shè)計(jì)的內(nèi)容在小尺寸場(chǎng)景下也同樣能被用戶注意和理解。

04 線性圖標(biāo)

線條風(fēng)格的圖標(biāo)似乎是永不過(guò)時(shí)的潮流，其主要原因就在于這個(gè)圖標(biāo)樣式可以運(yùn)用在任何場(chǎng)景下。也正是因?yàn)樗耐ㄓ眯?，目前許多流行的、可下載的圖標(biāo)設(shè)計(jì)里面依舊會(huì)包含線條樣式的設(shè)計(jì)。

以上圖這組線條風(fēng)的圖標(biāo)為例，不僅能形象的表達(dá)出圖標(biāo)的含義，而且也不會(huì)受到場(chǎng)景尺寸的影響。

05 簡(jiǎn)單元素的表達(dá)

和2019年的其他設(shè)計(jì)趨勢(shì)一樣，追求簡(jiǎn)約也是圖標(biāo)設(shè)計(jì)的一部分。將原來(lái)繁復(fù)寫(xiě)實(shí)的圖標(biāo)簡(jiǎn)化為用線或是面組成的圖標(biāo)，從而提高用戶的觀感度。

例如上圖設(shè)計(jì)的食物圖標(biāo)，每個(gè)圖標(biāo)運(yùn)用簡(jiǎn)單的塊面形狀將食物的整體形象表達(dá)出來(lái)，并在每個(gè)圖標(biāo)中設(shè)計(jì)出圓形留白區(qū)域融入到整體形象中。用戶在瀏覽過(guò)程中不僅可以快速明了圖標(biāo)的含義而且這樣的設(shè)計(jì)在用戶看來(lái)也是非常巧妙的。

06 漸變圖標(biāo)

目前漸變色的運(yùn)用也已成為2019年主導(dǎo)圖標(biāo)設(shè)計(jì)的趨勢(shì)之一。從簡(jiǎn)單的線條漸變（如上面的例子）到漸變背景上的全漸變著色圖標(biāo)都非常受到設(shè)計(jì)師的歡迎。這可能就是在圖標(biāo)中使用漸變的吸引力所在——漸變方法多種多樣，不僅可以豐富圖標(biāo)色彩，還能增加圖標(biāo)的可觀看性。

07 單色圖標(biāo)

在一些小尺寸圖標(biāo)的設(shè)計(jì)中，設(shè)計(jì)師在色彩方面則多采取了與原來(lái)追求寫(xiě)實(shí)效果相反的取色方式，盡量使用簡(jiǎn)單基本的色彩來(lái)處理這些小元素圖標(biāo)。這樣的取色方式可以讓這些小元素避免由于承載過(guò)多的色彩而導(dǎo)致空間過(guò)滿和細(xì)節(jié)丟失，同時(shí)也避免了給用戶在瀏覽過(guò)程中的視覺(jué)壓力。

08 應(yīng)用程序圖標(biāo)

圖標(biāo)越來(lái)越受歡迎的原因之一是我們已經(jīng)在為幾乎所有的東西設(shè)計(jì)圖標(biāo)。像從應(yīng)用程序圖標(biāo)到應(yīng)用程序風(fēng)格的favicons或desktop圖標(biāo)，這種風(fēng)格的圖標(biāo)實(shí)際上也是無(wú)處不在了。

應(yīng)用程序風(fēng)格的圖標(biāo)擁有自己獨(dú)特的風(fēng)格。具體包括：

• 外形普遍為方形
• 邊角處理為圓角
• 有色背景(通常是一種顏色)
• 圖標(biāo)內(nèi)通常設(shè)計(jì)簡(jiǎn)單明了的形狀
• 圖標(biāo)與背景色的對(duì)比度大
• 通常省略文本

09 粗線條圖標(biāo)樣式

不僅是線條樣式的圖標(biāo)很流行，粗線條的圖標(biāo)也越來(lái)越受到設(shè)計(jì)師及用戶的喜愛(ài)。這類風(fēng)格的圖標(biāo)通?？蓡为?dú)進(jìn)行使用，顏色也多選擇為黑白兩色或與背景色對(duì)比度較大的色彩。

10 扁平圖標(biāo)

盡管隨著圖標(biāo)設(shè)計(jì)趨勢(shì)的不斷變化，但是扁平化的圖標(biāo)依然是主流的設(shè)計(jì)樣式。

主要在于平面化的展現(xiàn)形式簡(jiǎn)潔明了，不會(huì)給用戶造成負(fù)擔(dān)，同時(shí)這種扁平化的外觀可以很容易與其他風(fēng)格相結(jié)合。例如上文我們提到的線性圖標(biāo)幾乎都采用了扁平化的風(fēng)格。

11 emoji圖標(biāo)

表情符號(hào)現(xiàn)在作為一種特有的網(wǎng)絡(luò)語(yǔ)言，已經(jīng)越來(lái)越被大眾接受并使用。所以，現(xiàn)在很多圖標(biāo)設(shè)計(jì)也開(kāi)始采用了這種表情風(fēng)格的視覺(jué)交流方式。這些圖標(biāo)可以通過(guò)一個(gè)人物或者動(dòng)物的頭部形狀，來(lái)提高用戶在瀏覽過(guò)程中的辨識(shí)度以及趣味性。

例如，上圖這些受《星球大戰(zhàn)》啟發(fā)的表情符號(hào)就是一個(gè)很好的例子，告訴你如何從圖標(biāo)設(shè)計(jì)中獲得樂(lè)趣。

圖標(biāo)作為一個(gè)不可或缺的設(shè)計(jì)元素，從應(yīng)用程序圖標(biāo)到網(wǎng)站標(biāo)志，再到用于logo或貫穿整個(gè)設(shè)計(jì)項(xiàng)目的細(xì)節(jié)，其重要性不言而喻。通過(guò)回顧2019年的圖標(biāo)趨勢(shì)不難發(fā)現(xiàn)那些基本的設(shè)計(jì)規(guī)則依然有效，具體總結(jié)如下：

• 創(chuàng)建網(wǎng)格
• 善用幾何圖形
• 色彩搭配
• 保持一致性
• 預(yù)留最小尺寸
• 避免過(guò)多裝飾

相信通過(guò)將以上基本規(guī)則與潮流趨勢(shì)結(jié)合起來(lái)，你也可以創(chuàng)造一個(gè)屬于自己風(fēng)格的圖標(biāo)。

作者：Jing；微信公眾號(hào)：IQS開(kāi)發(fā)者社區(qū)

本文由 @IQS開(kāi)發(fā)者社區(qū) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議