圖標(biāo)設(shè)計(jì)不專業(yè)?可能是這10個(gè)容易被忽視的細(xì)節(jié)沒(méi)做好

2022-6-12    純純

圖標(biāo)是任何設(shè)計(jì)系統(tǒng)不可或缺的一部分。使用圖標(biāo)的主要原因是幫助用戶快速理解想法,實(shí)現(xiàn)快速導(dǎo)航,解決語(yǔ)言障礙,最終提升用戶體驗(yàn)。


圖標(biāo)作為一種設(shè)計(jì)工具,在UI/UX和平面設(shè)計(jì)師中最受歡迎。這些微小的設(shè)計(jì)元素對(duì)每個(gè)人來(lái)說(shuō)都是簡(jiǎn)單易懂的,這些特征賦予了它們通用數(shù)字語(yǔ)言的地位。


在這篇文章中,我整理了10個(gè)簡(jiǎn)單又重要的技巧幫你設(shè)計(jì)出更專業(yè)的圖標(biāo)。


1.尺寸規(guī)范 


最小的圖標(biāo)大小通常是12 x 12px。以這個(gè)尺寸為基礎(chǔ),行業(yè)標(biāo)準(zhǔn)中大多數(shù)其他尺寸只是通過(guò)將之前的尺寸翻倍而產(chǎn)生的。

  • 小尺寸圖標(biāo),px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
  • 中尺寸圖標(biāo),px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
  • 大尺寸圖標(biāo),px: 512 x 512, 1024 x 1024.

重要提示:當(dāng)你設(shè)計(jì)圖標(biāo)時(shí),重要的是要按100%顯示的比例去設(shè)計(jì),使圖標(biāo)完美像素并放大像素塊查看準(zhǔn)確性。 


2.保持像素完美 


完美像素圖標(biāo)在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今,高分辨率顯示器和視網(wǎng)膜顯示器正變得越來(lái)越好,所以在不久的將來(lái),對(duì)像素完美圖標(biāo)的需求可能會(huì)減少。但就目前而言,讓你的圖標(biāo)具有可伸縮性、響應(yīng)性和適配更多設(shè)備是非常重要的。


1) 像素網(wǎng)格對(duì)齊.

使直線部分完全清晰,并增加曲線和邊角的清晰度。


undefined



2)完美角度

有角度的線更模糊。創(chuàng)建圖標(biāo)的最佳角度是45°,因?yàn)樾纬梢粋€(gè)角的像素彼此對(duì)稱。



undefined



3)邊緣清晰

直線必須占據(jù)其邊緣上最暗的4個(gè)像素。這樣線的邊緣看起來(lái)更清晰。



undefined



3.注意粗細(xì)和間隙 


為了讓圖標(biāo)看起來(lái)整潔一致,重要的是要記住線條寬度和間隙大小。這條規(guī)則我認(rèn)為是必須遵循的:所有線條的寬度都是相同的。


理想情況下,線寬和間隙大小也應(yīng)該相等。 


undefined




undefined


然而,有時(shí)候你必須打破這個(gè)規(guī)則。當(dāng)你需要解釋我們?cè)谌粘I钪忻鎸?duì)的一個(gè)具有非對(duì)稱模式的物體時(shí),它就會(huì)發(fā)生。比如條形碼這個(gè)例子來(lái)說(shuō),我故意使圖標(biāo)內(nèi)的線寬和間隙大小不均勻,以表示條碼的特征。 



undefined



4.統(tǒng)一圓角 


在UI設(shè)計(jì)中,對(duì)象(包括圖標(biāo))的角半徑定義了項(xiàng)目的外觀和感覺(jué)。當(dāng)我們說(shuō)到一個(gè)集合中的多個(gè)對(duì)象時(shí),規(guī)則很簡(jiǎn)單:在正方形和圓角之間進(jìn)行選擇,并對(duì)所有的圖標(biāo)應(yīng)用相同的屬性。


為什么它如此重要?一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則。一個(gè)可用和用戶友好的設(shè)計(jì)總是提供一致的體驗(yàn)。在下面的例子中,你可以看到打破這個(gè)原則是如何影響視覺(jué)感知的。 



undefined




undefined



5.視覺(jué)平衡 


在電腦上看起來(lái)完美對(duì)齊和平衡的東西,在你的眼睛看來(lái)可能并不一樣。

當(dāng)我們把大小相等的正方形和圓放在一起時(shí),我們會(huì)有一種不對(duì)勁的感覺(jué),圓似乎比正方形小。為了使我們的形狀在尺寸上看起來(lái)相同,我們應(yīng)該使圓更大(或減少正方形的尺寸)。 


undefined




undefined




undefined


這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和使用。有些圖標(biāo)的一側(cè)可能較重。試著調(diào)整它們一兩個(gè)點(diǎn),直到整體對(duì)齊看起來(lái)正確。在下面的例子中,你可以看到突出顯示的圖標(biāo)看起來(lái)很大,盡管它與其他部分的大小相同。為了平衡這個(gè)集合,我們需要通過(guò)縮小圖標(biāo)的大小來(lái)調(diào)整突出顯示的圖標(biāo)。


(彩云注:這個(gè)原則很多人應(yīng)該都知道,但我發(fā)現(xiàn)也是在整套圖標(biāo)的設(shè)計(jì)中最容易出現(xiàn)的問(wèn)題,當(dāng)把圖標(biāo)匯總在一起的時(shí)候,這個(gè)問(wèn)題尤其需要重視。)



undefined




undefined



6.視覺(jué)對(duì)齊 


我們經(jīng)常在設(shè)計(jì)軟件中使用中心對(duì)齊,這種方法沒(méi)有錯(cuò)。但當(dāng)涉及到細(xì)節(jié)時(shí),比如圖標(biāo)設(shè)計(jì),我們需要相信自己的眼睛,打破數(shù)學(xué)法則,以增強(qiáng)元素的平衡。


讓我們以播放按鈕作為展示。這個(gè)例子很簡(jiǎn)單,但非常能說(shuō)明問(wèn)題,因?yàn)樾螤钤讲粚?duì)稱,需要改進(jìn)的缺陷就越明顯。 


undefined




undefined



7.保持簡(jiǎn)單和直接 

我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是,大多數(shù)系統(tǒng)在保持簡(jiǎn)單的情況下工作得最好。用戶越容易理解某樣?xùn)|西并與之互動(dòng),它就越具有通用性。


(彩云注:KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限,彩云幫大家找了一篇參考文獻(xiàn)https://www.jianshu.com/p/7d58b96d0185#comments ,感興趣的可以去學(xué)習(xí)下。)


它如何適用于圖標(biāo)設(shè)計(jì)?


1)別使用文字


文本和圖標(biāo)的綁定減少了圖標(biāo)的通用性。此外,小尺寸的文本是可讀性很差。如果一定要文本作為支持元素,使用工具提示和圖標(biāo)旁邊的標(biāo)簽。



undefined



2)不要過(guò)度設(shè)計(jì)

不必要的復(fù)雜性阻礙了合理的表達(dá),應(yīng)該避免。過(guò)載的設(shè)計(jì)會(huì)將用戶體驗(yàn)變成一場(chǎng)噩夢(mèng)。



undefined



3)避免不必要的元素 

只要確保每個(gè)圖標(biāo)在整體環(huán)境中是可理解和清晰的就行。(彩云注:比如已經(jīng)是在郵件客戶端中,就不需要再額外增加表示郵件的圖標(biāo)部分)


undefined


重要提示:在圖標(biāo)設(shè)計(jì)中合理地使用KISS原則,也不要把事情做得太簡(jiǎn)單,否則會(huì)影響功能。一個(gè)優(yōu)秀的圖標(biāo)應(yīng)清晰易懂。


8.圖標(biāo)規(guī)范框架 


圖標(biāo)規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個(gè)框架來(lái)設(shè)計(jì)圖標(biāo)。但是,這個(gè)規(guī)則非常靈活,只是作為參考,方便圖標(biāo)的設(shè)計(jì)在視覺(jué)上平衡。所以,如果你覺(jué)得你的圖標(biāo)不完全匹配這個(gè)框框,但看起來(lái)完全正確——相信你的眼睛! 


undefined




undefined




undefined



框架是設(shè)計(jì)的“容器”??蚣芤?guī)范了一個(gè)統(tǒng)一的范圍來(lái)設(shè)計(jì)圖標(biāo),這背后有一些原因:


1) 大小

由于其幾何形狀,所有圖標(biāo)都具有不同的高度和寬度。為了在我們的設(shè)計(jì)中統(tǒng)一圖標(biāo)尺寸,我們應(yīng)該將它們放置在大小始終相同的框架中。


undefined


2)輸出


框架內(nèi)的圖標(biāo)與視覺(jué)中心對(duì)齊,這經(jīng)常被開(kāi)發(fā)人員忽略,因?yàn)樗麄兘?jīng)常根據(jù)實(shí)際的中心來(lái)調(diào)整圖標(biāo),而沒(méi)有注意到差異。這就是為什么用框架輸出圖標(biāo)是至關(guān)重要的,當(dāng)你按這個(gè)框架輸出圖標(biāo)時(shí),能保證視覺(jué)設(shè)計(jì)時(shí)想要的視覺(jué)中心。


undefined



3)效率

如果使用Figma,可以通過(guò)創(chuàng)建組件來(lái)節(jié)省時(shí)間??梢允褂脤?shí)例快速地將一個(gè)圖標(biāo)替換為另一個(gè)圖標(biāo)。


undefined



9.設(shè)置好圖標(biāo)的關(guān)鍵詞 


如果你要打算做圖標(biāo)資源庫(kù)的話。要想到當(dāng)設(shè)計(jì)師在庫(kù)中搜索圖標(biāo)時(shí),會(huì)遇到哪些挑戰(zhàn)?他們的痛點(diǎn)是什么?他們的需求是什么?要回答這些問(wèn)題,請(qǐng)?jiān)O(shè)身處地為用戶著想。 


1)不要讓用戶思考

例如,如果他們不知道自己想要找到哪種花卉圖標(biāo),那么就讓他們看到一系列選擇:鮮花項(xiàng)鏈,室內(nèi)花卉,植物商店等。



undefined



2)展示關(guān)聯(lián)圖標(biāo)

例如,如果用戶想在相同的主題或類別中找到圖標(biāo),他們可以快速地檢查包含這個(gè)特定圖標(biāo)的完整集合。


undefined



3)使用標(biāo)簽

用戶可能很難找到合適的詞進(jìn)行搜索,或者可能希望看到所有類似的補(bǔ)充選項(xiàng),從中選擇最合適的。例如,當(dāng)一個(gè)圖標(biāo)的實(shí)際名稱是“蘭花花瓣”,你仍然可以找到它與以下關(guān)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開(kāi)花#植物#自然#熱帶#樹(shù)枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫


undefined



10.SVG和PNG圖標(biāo)的區(qū)別 

最終應(yīng)該導(dǎo)出SVG或PNG格式?這是一個(gè)關(guān)鍵問(wèn)題。讓我們來(lái)比較一下格式:

  • SVG的文件大小非常小,這意味著最終設(shè)計(jì)的加載速度非???,而PNG則相當(dāng)大。
  • SVG格式是無(wú)限可伸縮的,而PNG的分辨率則受創(chuàng)建的文件大小的限制。然而,將一個(gè)復(fù)雜的SVG圖標(biāo)縮小到隨機(jī)大小可能會(huì)產(chǎn)生半像素的邊緣,這可能會(huì)使圖標(biāo)看起來(lái)有虛邊。這是因?yàn)楫?dāng)屏幕上的圖標(biāo)變得更小時(shí),代表其來(lái)源的像素就會(huì)減少,從而導(dǎo)致清晰度下降。這并不意味著需要避免使用SVG文件。只需根據(jù)預(yù)期用途調(diào)整 SVG 圖標(biāo)即可。
  • SVG文件可以編輯和動(dòng)畫,PNG文件只能是靜態(tài)的。
  • 對(duì)于PNG格式,你必須提供各種大小和顏色的資源,而在使用SVG時(shí)就不需要這些了。
  • Png與大多數(shù)瀏覽器兼容,而svg可能不被舊的瀏覽器支持。


我個(gè)人的選擇是使用SVG圖標(biāo),因?yàn)樗梢怨?jié)省很多時(shí)間。但是,一定要小心縮小復(fù)雜的形狀,并記住舊的瀏覽器可能不支持SVG格式。

作者:彩云Sky         來(lái)源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔