據(jù)說點擊藍色字體關(guān)注同學(xué)都升職加薪了

圖標(biāo)是一種比其他語言更能被普遍理解的視覺語言，它是一種強調(diào)對象特征的符號。它由 UI 圖標(biāo)、象形圖和標(biāo)志表示，并在各個領(lǐng)域中使用，因為它可以在占用小面積的情況下傳達意義。

它受到許多設(shè)計師的喜愛，因為它比其他元素更容易賦予個性，并允許您嘗試視覺原理。在這篇文章中，我們總結(jié)了圖標(biāo)的屬性以及UI設(shè)計中推薦的圖標(biāo)設(shè)計指南。

用法在 UI 設(shè)計中，圖標(biāo)主要用作應(yīng)用程序圖標(biāo)和系統(tǒng)圖標(biāo)。它用于應(yīng)用程序圖標(biāo)來表達您的品牌和系統(tǒng)圖標(biāo)，以便用戶快速了解信息并根據(jù)信息采取行動。

風(fēng)格有線條、填充、彩色和圖像方式來表達圖標(biāo)。目的因使用圖標(biāo)的空間而異，主要用于對動作進行反饋或增加注意力。
線條，填充：它以其基本形式放置在布局上。色彩：通常用于對行動提供反饋或增加注意力。圖片：在需要高度關(guān)注時使用。我傾向于使用表情符號或獨特的圖標(biāo)。

重量可以組合樣式以創(chuàng)建不同的權(quán)重。如果服務(wù)主要是圖片，圖標(biāo)的權(quán)重應(yīng)該最小化，如果服務(wù)是面向文本的，重圖標(biāo)可以用來給用戶帶來視覺上的愉悅。

特性構(gòu)成圖標(biāo)的元素包括厚度、尖端形狀、彎曲、陰影和重疊，并且統(tǒng)一了表達規(guī)則，以便僅給出觀看者識別圖標(biāo)所需的最小變化。
厚度：我使用了 1px 和 2px，因為數(shù)字屏幕會四舍五入無法表示的小數(shù)點。（隨著智能手機規(guī)格的改進，有時會使用小數(shù)點。）末端和連接處：有角端和圓端之分，圓形多用于平滑表達。圓角：End 和 Join 使用相同的規(guī)則來保持一致性，round 經(jīng)常用于平滑表達。

網(wǎng)格眼睛將圖標(biāo)與視覺網(wǎng)格和輪廓分開。視覺網(wǎng)格是指允許相同大小區(qū)域內(nèi)各種形狀的圖標(biāo)具有相同權(quán)重和重心的網(wǎng)格。幾何解構(gòu)的對象是根據(jù)由圓形、正方形、矩形和等邊三角形組成的網(wǎng)格產(chǎn)生的。

規(guī)模我傾向于使用 8 的倍數(shù)作為基線，例如 8px、16px、24px 和 32px，以便在各種環(huán)境中進行流暢的管理。主要用于移動設(shè)備小區(qū)域的系統(tǒng)圖標(biāo)有時會以 4px 的倍數(shù)使用，以實現(xiàn)多功能性。

明晰使用用戶可以快速理解的最少元素進行設(shè)計。盡可能讓用戶友好，必要時應(yīng)用簡單的比喻。復(fù)雜的圖標(biāo)可能不會或可能需要很長時間才能讓用戶理解它們的含義。

細(xì)節(jié)建議在“快速信息傳輸”的狹窄區(qū)域內(nèi)盡量減少細(xì)節(jié)，其中圖標(biāo)是最重要的目標(biāo)。特別是對于適合小區(qū)域的系統(tǒng)圖標(biāo)，最好只保留您正在談?wù)摰淖钌賰?nèi)容并刪除其他裝飾元素。

一致性在一項服務(wù)中執(zhí)行相同功能的圖標(biāo)以相同的樣式表示。填充和線條可以根據(jù)使用它們的上下文一起使用，但在相同上下文中使用的圖標(biāo)用相同的屬性表示。

視圖角度盡可能使透視圖從正面看。實際的數(shù)字設(shè)備是平面的，如果主要用于平面卡片空間的圖標(biāo)給人一種空間感，可能會感覺到認(rèn)知失調(diào)。盡管它是在有限的基礎(chǔ)上使用以引起特別注意，但不建議這樣做。

熟悉度無論平臺如何，我通常都使用相同的圖標(biāo)。但是對于在OS平臺中經(jīng)常使用的樣式，用戶可以通過使用OS默認(rèn)模板來更快地理解其含義，這是大多數(shù)用戶所熟悉的形式。

視覺誤差由于圖形設(shè)計工具的限制，有時需要進行視覺校正。對于下面的播放按鈕，圖形工具與圖層末端對齊。但實際上，三角形需要調(diào)整，因為它們的重心與圓形或正方形不同。

原文：https://bootcamp.uxdesign.cc/ultimate-guide-for-a-good-ui-icon-beefc840c2e5作者：Jake Park ??翻譯：靜電

//////?END?//////

《靜電的UI設(shè)計教室》暑期特訓(xùn)課預(yù)熱中

靜電老師全程主講

高含金量UI小班課程

報名即將開始 現(xiàn)在預(yù)約享特惠價

↓↓長按二維碼加靜電老師咨詢↓↓

? ? ? ? ?