在圖形交互界面（GUI）中，圖標（icon）是一種最常使用的設(shè)計元素之一。圖標設(shè)計，即icon設(shè)計在界面設(shè)計中占有很重要的位置，一個好的圖標，可以讓用戶“一秒即懂”，那么如何設(shè)計出優(yōu)秀的圖標？石家莊電腦學(xué)校為你分享以下這些內(nèi)容，相信會給你答案！

石家莊電腦學(xué)校為你分享優(yōu)秀圖標設(shè)計

1、易識別

清晰度是優(yōu)秀界面的最重要特征，但不幸的是，圖標往往不夠清晰。

圖標必須第一時間傳達最重要的信息。當圖標不能夠立刻表達出所代表含義時，它就會變成一種“視覺噪音”，失去了圖標存在的意義。

優(yōu)秀的圖標即不用閱讀標簽或文字提示，就可以被認知理解。

幾個簡單的規(guī)則，可以幫助你避免使用不能傳達其含義的圖標。

——嘗試使用用戶熟悉的icon

用戶對于圖標的理解，一般基于其使用與認知的經(jīng)驗。這就是為何使用用戶熟悉的圖標效果會比使用獨特的圖標要好。依靠通用型圖標。就像屋子、打印、玩游戲和搜尋等等這些，不需要進行任何解釋的圖標。（通俗易懂的圖標）

調(diào)查研究，檢查你的競爭對手所用的圖標。

——不要使用有歧義的icon

應(yīng)該避免使用有多重含義的圖標。舉例來說，“心形”圖標和“星星”圖標都可以作為【喜歡】或?qū)?nèi)容【收藏】起來。當一起使用時很可能造成用戶干擾。（心形和星星圖標有歧義）

——測試icon的含義表達

不要聽從一些類似“人們每天都用我們的產(chǎn)品（APP），他們肯定能理解圖標的意思”的話。

請測試你的圖標！

【5秒鐘原則】是一種測試圖標的有效方法。問問用戶他們希望這個圖標代表什么？如果需要花費5秒鐘以上去思考這個圖標，那么這個圖標就不可能有效地傳達其意義。

——測試icon的可拓展性

測試你的icon在類似15x15px的尺寸下是否依舊清晰。

（音樂圖標縮放清晰）

——給陌生的icon附上標簽文字

如果你還是想要使用特殊的圖標，可以考慮在旁邊給圖標附上文字標簽。（圖標+文字）

——不要重新定義icon的含義

通過更改圖標的含義來混淆用戶相當容易。當圖標的功能與預(yù)期認知不同時，會造成用戶混淆。不要重新發(fā)明輪子！

即使意義上的細小區(qū)別，也會妨礙到用戶理解圖標的能力。

很長一段時間，Google Docs使用的圖標看起來就像一個漢堡包。大多數(shù)界面使用類似的圖標來表示主導(dǎo)航菜單，但Google重新定義了它的含義并將其用作“后退/返回”操作。當用戶點擊此圖標時，他們會被重新引導(dǎo)到Google文檔主頁。

2、視覺舒適

可以通過插畫、顏色以及圖標傳達品牌個性。如果做得好，圖標肯定可以增強設(shè)計的美感。

KISS原則適用于所有UI元素，包括圖標icons。保持圖標的簡潔性，并且遵循以下兩條原則，避免沒必要的復(fù)雜性：

限制顏色使用數(shù)量，使用不超過3或4種顏色，保持設(shè)計簡潔。

通過聚焦于對象的基本特征，來減少圖形設(shè)計細節(jié)的數(shù)量。盡量保持設(shè)計的概要性 ，因為設(shè)計概要性的在不同的界面和分辨率都可以進行轉(zhuǎn)換。（請勿過于花俏，避免設(shè)計的圖標上包含太多的視覺細節(jié)）

——通過添加動畫效果創(chuàng)造愉悅體驗

動畫效果可以表達清晰功能的目的，并且可以創(chuàng)造用戶愉悅體驗。對于形態(tài)改變的情況，使用動畫效果可以創(chuàng)造更好的動態(tài)體驗。

3、合適尺寸

圖標應(yīng)該很好地作為用戶的目標點。

設(shè)計師常見的錯誤之一，是在手機上為圖標留下太小的空間。當你為觸摸進行設(shè)計時，確保圖標能夠足夠大方便手指的點擊。參考：目標在屏幕中點擊范圍為7-10mm。并且，請確保在目標對象之間添加填充，以防止不準確的點擊。（實際目標尺寸=視覺目標尺寸+填充 圖片：Microsoft）

4、一致性

一致性是設(shè)計中的關(guān)鍵原則。一致性設(shè)計是一種直觀設(shè)計。

當使用相似的元素且具有一致的外觀和功能時，可以讓可用性和可學(xué)習(xí)性都得到提升改善。

——內(nèi)部一致性

圖標設(shè)計應(yīng)該保持視覺統(tǒng)一，你決定用于你的產(chǎn)品的圖標，應(yīng)該保持統(tǒng)一樣式。

理想情況下，它們看起來應(yīng)該是一位設(shè)計師設(shè)計的。以下是你需要遵循的關(guān)于創(chuàng)造統(tǒng)一性的幾條原則：使用相同顏色或者顏色組合在你的圖標上使用相同的形狀和其他樣式屬性（例如邊框的大?。?/span>

——與平臺保持一致

確保你的目標風(fēng)格與平臺一致，它們會讓用戶更容易去理解。（蘋果iOS和Google 安卓圖標）

——與產(chǎn)品系列保持一致

如果你擁有整個產(chǎn)品系列，確保一致的圖標風(fēng)格（或至少類似）應(yīng)用在你所有的產(chǎn)品中。

總結(jié)：通常來說，為你的項目尋找一個合適的圖標并不容易。這就是為什么我分享這個資源列表來讓這個任務(wù)變得簡單。我會定期更新列表，以便你可以找到更有用的資源。

石家莊電腦學(xué)校網(wǎng)絡(luò)傳媒高級工程師專業(yè)（UI界面設(shè)計）

網(wǎng)絡(luò)傳媒高級工程師專業(yè)前景：目前，中國有6.7億網(wǎng)民、413萬多家網(wǎng)站，越來越多的政府和企業(yè)更加注重使用網(wǎng)絡(luò)技術(shù)運營和管理，網(wǎng)絡(luò)技術(shù)得到了前所未有的發(fā)展。與此同時，網(wǎng)絡(luò)的建設(shè)、維護與更新，需要大量的實用型網(wǎng)絡(luò)技術(shù)人才，特別是高層次的網(wǎng)絡(luò)管理員、網(wǎng)絡(luò)架構(gòu)工程師、網(wǎng)絡(luò)開發(fā)運營工程師、企業(yè)信息管理師等相關(guān)人才，需求尤為迫切。

課程內(nèi)容：

第一階段 基礎(chǔ)課程：桌面支持與系統(tǒng)管理，Office2010辦公自動化，三大構(gòu)成

電子商務(wù)基礎(chǔ)，設(shè)計素描，圖文混排、版式設(shè)計綜合應(yīng)用；

第二階段 專業(yè)課程：三大設(shè)計，CorelDRAW矢量繪圖，Illustrator圖形設(shè)計，Photoshop圖像處理，平面設(shè)計典型實例，職業(yè)素質(zhì)課；

第三階段 實訓(xùn)課程：網(wǎng)頁圖像制作（FM），Dreamweaver網(wǎng)頁布局，Javascript腳本特效設(shè)計，DIV+CSS布局技術(shù)，ASP&Access網(wǎng)站后臺技術(shù)，UI界面設(shè)計；

第四階段 強化課程：網(wǎng)絡(luò)應(yīng)用技術(shù)基礎(chǔ)，網(wǎng)絡(luò)安全基礎(chǔ)，網(wǎng)絡(luò)設(shè)備與網(wǎng)絡(luò)設(shè)計，網(wǎng)絡(luò)綜合布線，公司型網(wǎng)絡(luò)搭建項目。

看完了石家莊電腦學(xué)校為大家分享的干貨，你都記下來了嗎？想不想學(xué)習(xí)更多UI界面設(shè)計干貨呢？那就持續(xù)關(guān)注我們吧！