? ??? APP開發(fā) 軟件開發(fā) APP開發(fā)公司 軟件開發(fā)公司

?? ?????? 圖標(biāo)是界面中非常重要的元素。它解決了許多問(wèn)題，也是影響界面交互可用性和識(shí)別的關(guān)鍵因素。它看起來(lái)像一個(gè)小圖標(biāo)。只有設(shè)計(jì)師知道花了多少精力來(lái)設(shè)計(jì)每一個(gè)細(xì)節(jié)，使之簡(jiǎn)單、美麗、易懂。
??? 圖標(biāo)的定義
?? ?在圖標(biāo)的一般定義中，圖標(biāo)是一種具有參考意義的圖形符號(hào)，高度濃縮，快速傳遞信息，易于記憶，應(yīng)用范圍廣，不僅限于計(jì)算機(jī)軟件、簡(jiǎn)單的軟件開發(fā)，APP開發(fā)中的圖標(biāo)包括程序識(shí)別、數(shù)據(jù)識(shí)別、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。

??? 在界面設(shè)計(jì)中，圖標(biāo)可以在一些場(chǎng)景中替換文本，界面視覺(jué)效果豐富，研究表明，大多數(shù)人理解圖像比文本的速度快，清晰易懂的圖標(biāo)對(duì)于用戶理解界面中的信息是非常好的，但是如果用戶理解錯(cuò)誤的圖標(biāo)會(huì)導(dǎo)致用戶體驗(yàn)不好，了解圖標(biāo)的類型和細(xì)節(jié)是接口設(shè)計(jì)的一個(gè)組成部分。
?? ?圖標(biāo)的歷史
?? ?最早的電腦圖標(biāo)出現(xiàn)在70年代由施樂(lè)公司開發(fā)的施樂(lè)阿爾托，當(dāng)時(shí)施樂(lè)公司使用的文件夾和垃圾箱圖標(biāo)至今仍在使用。

??? 1991年，該公司推出了一組MacOSX彩色圖標(biāo)，這是該圖標(biāo)發(fā)展的里程碑。這些交互式圖標(biāo)與傳遞信息相結(jié)合，代表了所提出的物化風(fēng)格的形成。
?? ?在目前的UI設(shè)計(jì)中，各種圖標(biāo)非常豐富，網(wǎng)絡(luò)上有很多現(xiàn)成的設(shè)計(jì)包，每個(gè)圖標(biāo)庫(kù)的圖標(biāo)也在不斷創(chuàng)新。那么，有多少種主流的交互圖標(biāo)可以劃分？
?? ?按功能分類
?? ?1、分類圖標(biāo)
?? ?分類圖標(biāo)的目的是解釋內(nèi)容的功能或類型。在某些情況下，它們會(huì)附帶文本信息，以確保信息傳輸?shù)臏?zhǔn)確性。與單一文本分類相比，視覺(jué)效果更加豐富，識(shí)別率得到提高。能夠立即理解圖標(biāo)的用戶不需要關(guān)注文本。
?? ?2、功能圖標(biāo)
?? ?功能圖標(biāo)是具有指代意義且具有功能標(biāo)識(shí)的圖標(biāo)，它們是可點(diǎn)擊的，可操作的，主要目的是告知用戶按鈕、控件或其它交互元素所代表的功能或特性

??? 3、裝飾圖標(biāo)
?? ?除了表達(dá)功能，界面中也會(huì)有一些裝飾性為主，表達(dá)一些信息為輔的裝飾性圖標(biāo)，常見(jiàn)于各個(gè)產(chǎn)品的節(jié)日主題等
?? ?4、應(yīng)用圖標(biāo)
?? ?應(yīng)用圖標(biāo)是產(chǎn)品的Logo，適用于不同的平臺(tái)，要保證帶有鮮明的產(chǎn)品特征，在手機(jī)界面中可以清晰的被識(shí)別。

??? 按風(fēng)格分類
?? ?1、填充圖標(biāo)
?? ?填充圖標(biāo)的視覺(jué)比例大，具有較高的視覺(jué)影響，更容易被用戶識(shí)別。
?? （1）半透明填充圖標(biāo)
?? ?圖標(biāo)部分使用透明度來(lái)增加圖標(biāo)的層次感，視覺(jué)效果更加豐富

??? （2）彌散投影填充圖標(biāo)
?? ? 在圖標(biāo)中使用相同顏色系統(tǒng)的暗漫投影，增加圖標(biāo)的微紋理

??? （3）撞色填充圖標(biāo)
?? ? 吸引用戶的注意力，在應(yīng)用中小心使用，并保持與整體界面風(fēng)格一致

??? 2、線性圖標(biāo)
?? ?需要繪制具有均勻厚度的線的線性圖標(biāo)。它通常用2px的線繪制。根據(jù)風(fēng)格，還具有3-5px的厚度。它可以通過(guò)過(guò)多的界面圖案來(lái)減少用戶的視覺(jué)干擾，使整個(gè)界面是白色的和合理的，視覺(jué)效果更加簡(jiǎn)潔。
?? （1）圓角線性圖標(biāo)
?? ?適用于展示女性、母嬰、年輕活力的產(chǎn)品，給人親和力、可愛(ài)感

??? （2）直角線性圖標(biāo)
?? ? 直角圖標(biāo)傾向于商業(yè)、金融和其他產(chǎn)品，給人一種清潔的感覺(jué)。

??? （3）斷點(diǎn)線性圖標(biāo)
?? ? 豐富圖標(biāo)的視覺(jué)效果并通過(guò)其斷點(diǎn)添加功能
?? ?（4）雙色線性圖標(biāo)
?? ?雙色圖標(biāo)可與黑白灰+顏色或主體顏色+顏色組合的組合、顏色匹配圖標(biāo)、顏色匹配需要小心使用，界面整體風(fēng)格一致，未被推翻。

? ?? 3、線面結(jié)合圖標(biāo)
?? ? 現(xiàn)在應(yīng)用程序設(shè)計(jì)中最常用和最流行的風(fēng)格，是對(duì)產(chǎn)品圖形的總結(jié)，臉部通常起到裝飾點(diǎn)綴的作用，這里的面條可以是單色或漸變，適合各種產(chǎn)品，表現(xiàn)形式豐富。
?? ?（1）半透明結(jié)合圖標(biāo)
?? ?半透明組合圖標(biāo)通常填充同一顏色系統(tǒng)的半透明部分，并將線性圖標(biāo)組合起來(lái)，以增加圖標(biāo)的層次結(jié)構(gòu)。

???? （2）撞色結(jié)合圖標(biāo)
? ? ? 顏色對(duì)比圖標(biāo)風(fēng)格大膽，層次感更豐富，更有趣。常用于標(biāo)簽欄、列表、快捷方式等處

??? （3）漸變結(jié)合圖標(biāo)
?? ? 具有漸變填充和線條組合的圖標(biāo)紋理更豐富，同時(shí)保持圖標(biāo)的一致性，用戶的注意力更加吸引人，可見(jiàn)性很強(qiáng)，通常用于圖標(biāo)的選定狀態(tài)

??? （4）MBE風(fēng)格
?? ? 它采用粗黑筆畫，線條圓潤(rùn)，色彩明快，填充顏色稍有交錯(cuò)，簡(jiǎn)潔有趣，在界面上非?；钴S，通常用于卡片裝飾、功能入口等

??? 總結(jié)
?? ?首先考慮應(yīng)用場(chǎng)景，再考慮APP的整體風(fēng)格..
?? ?2、填充圖標(biāo)、線性圖標(biāo)和線-面組合圖標(biāo)各有優(yōu)勢(shì)。填充圖標(biāo)吸引了更多用戶的注意力，具有很強(qiáng)的視覺(jué)沖擊力，而線性圖標(biāo)更加簡(jiǎn)潔干凈，減少了過(guò)多色塊對(duì)用戶造成的視覺(jué)干擾。線面組合圖標(biāo)功能非常豐富，可以顯示圖標(biāo)的各種狀態(tài)。
?? ?3、圖標(biāo)的統(tǒng)一是非常重要的，圖標(biāo)的視覺(jué)尺寸、圓角半徑、線條厚度和紋理參數(shù)應(yīng)該是一致的。

?