??圖標(biāo)（ICON）是任何設(shè)計(jì)系統(tǒng)中都不可或缺的一部分。使用圖標(biāo)的主要原因就在于它可以幫助用戶(hù)快速解釋想法、快速導(dǎo)骯、解決語(yǔ)言障礙等問(wèn)題，以此讓用戶(hù)旅程變得可用且愉快。
??ICON作為一種設(shè)計(jì)工具，在UI/UX設(shè)計(jì)師之間最受歡迎。它對(duì)每個(gè)人來(lái)說(shuō)都是簡(jiǎn)單易懂的，同時(shí)圖標(biāo)所具有的這些特性也賦予了它們通用數(shù)字語(yǔ)言的地位。
??今天，我們就給大家來(lái)分享幾個(gè)ICON設(shè)計(jì)的最佳原則，來(lái)幫助大家在UI/UX中設(shè)計(jì)出完美的圖標(biāo)。
??01
??Size
??最小的圖標(biāo)大小通常為12×12px。根據(jù)行業(yè)標(biāo)準(zhǔn)，在以此為基礎(chǔ)產(chǎn)生的大小值中，大部分的數(shù)值都是通過(guò)將先前的數(shù)字加倍而創(chuàng)建的。通常我們可以看到小、中、大這三個(gè)尺寸的圖標(biāo)大小。
??小圖標(biāo)：12×12,16×16,24x24,32x32,48x48px
??中等圖標(biāo)：64x64,96x96,128x128,256x256px
??大圖標(biāo)：512x512,1024x1024px
??值得我們注意的是，在我們創(chuàng)建ICON時(shí)，應(yīng)該以100%的比例設(shè)計(jì)，這樣才會(huì)使得圖標(biāo)像素看起來(lái)比較完美。同時(shí)通過(guò)進(jìn)一步放大也可以確保準(zhǔn)確性。
??02
??Pixel-Perfect
??具有完美像素的圖標(biāo)會(huì)呈現(xiàn)出清晰明快的線條和形狀。如今，高分辨率顯示器和Retina顯示器越來(lái)越流行，因此在不久的將來(lái)可能會(huì)減少對(duì)像素完美圖標(biāo)的要求。但就目前而言，我們所設(shè)計(jì)的圖標(biāo)也應(yīng)該是可擴(kuò)展、響應(yīng)迅速并能適用于許多設(shè)備的。我們?cè)趧?chuàng)建具有完美像素的圖標(biāo)時(shí)，可以參考以下三種建議：
??對(duì)齊像素網(wǎng)格：這種設(shè)計(jì)方法可以使直線變得非常清晰，并增加曲線和拐角的清晰度
??使圖標(biāo)保持完美角度：有角度的線條更有模糊感。在創(chuàng)建圖標(biāo)時(shí)，完美的角度是45°
??邊緣：直線必須占據(jù)其邊緣最暗的4個(gè)像素，這樣線條邊緣看起來(lái)才會(huì)更清晰
??03
??LineWidth
??為了使圖標(biāo)看起來(lái)整潔一致，非常重要的一點(diǎn)就是要記住線寬和間隙的大小。這是一條我們必須遵循的規(guī)則，即：所有線條的寬度相同。
??在理想情況下，線寬和間隙的大小應(yīng)該相等。然而，在某些時(shí)候，我們又不得不打破這個(gè)規(guī)則，當(dāng)我們需要說(shuō)明日常生活中的不對(duì)稱(chēng)物體時(shí)，就會(huì)發(fā)生這種情況。以條形碼為例，如果我們故意使圖標(biāo)內(nèi)部的線寬和間隙大小不均勻，這樣就會(huì)在一定程度上表明該對(duì)象的身份。
??04
??CornerRadius
??在UI設(shè)計(jì)中，包括圖標(biāo)在內(nèi)的對(duì)象圓角半徑會(huì)定義項(xiàng)目的外觀和感覺(jué)。當(dāng)我們對(duì)一組中的多個(gè)對(duì)象進(jìn)行闡述時(shí)，就需要遵循這一簡(jiǎn)單的規(guī)則，即：在方角和圓角之間選擇其一，并對(duì)整組圖標(biāo)應(yīng)用相同的屬性。
??那么這一原則為什么如此重要呢？我們需要知道，一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則?？捎们覍?duì)用戶(hù)友好的設(shè)計(jì)需要始終提供一致的體驗(yàn)。在下圖示例中，我們可以看到打破這一原則是如何影響視覺(jué)體驗(yàn)的。
??05
??OpticalBalance
??計(jì)算機(jī)與我們?nèi)搜鬯兄降捏w驗(yàn)是不同的。對(duì)計(jì)算機(jī)來(lái)說(shuō)，那些似乎對(duì)其完全平衡的東西，對(duì)我們的眼睛來(lái)說(shuō)可能并不相同。
??例如，當(dāng)我們把一個(gè)大小相等的正方形和一個(gè)圓形放在一起時(shí)，就會(huì)產(chǎn)生一種奇怪的感覺(jué)：圓形似乎比正方形小。為了使我們的形狀在視覺(jué)上看上去大小相同，我們就應(yīng)該把圓圈變大，或減小正方形的大小。
??這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和適用。有些圖標(biāo)可能更側(cè)重于一側(cè)。那我們就可以嘗試將它們調(diào)整至整體對(duì)齊。如下圖所示，我們可以看到，盡管它與其他部分都具有相同的大小，但突出顯示的圖標(biāo)似乎更大。為了平衡這組圖標(biāo)，大家就需要通過(guò)減小其大小來(lái)調(diào)整突出顯示的圖標(biāo)。
??06
??OpticalAlignment
??我們經(jīng)常在設(shè)計(jì)程序中使用中心對(duì)齊。雖然這種方法并沒(méi)有錯(cuò)，但在細(xì)節(jié)方面，比如圖標(biāo)設(shè)計(jì)中，我們就需要相信自己的眼睛，打破數(shù)學(xué)規(guī)律，以增強(qiáng)元素的平衡。以播放按鈕為例，它的形狀越不對(duì)稱(chēng)，需要改進(jìn)的地方就會(huì)越明顯。
??07
??KeepSimple&Starightforward
??在這里，想和大家分享的是這條KISS原則。這個(gè)原則背后的想法是，如果大多數(shù)系統(tǒng)保持簡(jiǎn)單操作，那么它們就會(huì)運(yùn)作得很好。用戶(hù)也就會(huì)越容易理解并與之交互，而它就越有可能被放到項(xiàng)目設(shè)計(jì)中。那么，KISS原則是如何運(yùn)用于圖標(biāo)設(shè)計(jì)的呢？
??不使用文本：文字和圖標(biāo)的結(jié)合會(huì)減少圖標(biāo)的使用方式。此外，小尺寸的文本具有不可讀性。如果我們?nèi)匀恍枰獙⑽谋咀鳛橹С衷?，就需要使用ICON旁邊的提示工具和標(biāo)簽
??不要過(guò)度設(shè)計(jì)：不必要的復(fù)雜性會(huì)妨礙設(shè)計(jì)目的。重復(fù)的設(shè)計(jì)也會(huì)嚴(yán)重影響用戶(hù)體驗(yàn)
??盡可能避免不必要的元素：但我們不能忘記確保每個(gè)圖標(biāo)在整體上下文中都是可以理解且清晰的
??值得大家關(guān)注的是，在ICON設(shè)計(jì)中需要明智使用KISS原則，但也要注意不能讓設(shè)計(jì)變得過(guò)于簡(jiǎn)單而損害了本應(yīng)該呈現(xiàn)出的效果。如果想要提供積極的用戶(hù)體驗(yàn)，那我們所設(shè)計(jì)的圖標(biāo)應(yīng)該是清晰易懂的。
??08
??Frame&Keyshapes
??關(guān)鍵形狀（keyshape）通常是指組合在一起的圓形、正方形、縱向及橫向矩形，它們通過(guò)了一個(gè)模式來(lái)創(chuàng)建ICON。但是，這一規(guī)則需要我們的靈活運(yùn)用，并讓位于上面所提到的“OpticalBalance(光感平衡)”這一原則。
??因此，如果我們?cè)谠O(shè)計(jì)過(guò)程中覺(jué)得圖標(biāo)并不完全適合形狀，那么這時(shí)候我們并不能馬上懷疑自己的設(shè)計(jì)是否有誤，通過(guò)換位思考也許它并沒(méi)有錯(cuò)。
??對(duì)于框架（frame）而言，它是我們?cè)O(shè)計(jì)的“容器”?？蚣芸梢詭椭覀兺ㄟ^(guò)選擇畫(huà)布的一個(gè)區(qū)域來(lái)創(chuàng)建設(shè)計(jì)。大家在創(chuàng)建設(shè)計(jì)時(shí)經(jīng)常會(huì)將ICON放置在框架中，這么做的原因在于以下幾點(diǎn)：
??Size(大小)：由于圖標(biāo)的幾何形狀，它們都具有不同的高度和寬度。為了在設(shè)計(jì)中正確使用ICON，我們就應(yīng)該將它們放置在大小始終相同的框架之中
??Export(導(dǎo)出)：框架內(nèi)的圖標(biāo)需要與視覺(jué)中心對(duì)齊，這對(duì)于導(dǎo)出帶有框架的圖標(biāo)至關(guān)重要
??Time(時(shí)間)：如果我們使用Figma，那就需要通過(guò)創(chuàng)建組件來(lái)節(jié)省時(shí)間。大家可以使用“實(shí)例功能”來(lái)快速替換圖標(biāo)
??09
??Format:SVG&PNGicons
??SVGorPNG？當(dāng)我們處于導(dǎo)出圖標(biāo)階段時(shí)，這就會(huì)成為關(guān)鍵問(wèn)題。那我們就先來(lái)比較一下兩種格式：
??SVG具有非常小的文件大小，這就意味著在導(dǎo)出時(shí)，可以快速加載最終設(shè)計(jì)成果；而PNG的文件大小有時(shí)會(huì)過(guò)大
??SVG格式是無(wú)限可擴(kuò)展的；而PNG的分辨率僅限于我們創(chuàng)建文件的大小
??SVG文件可以進(jìn)行編輯和創(chuàng)建動(dòng)畫(huà)；而PNG則是靜態(tài)文件
??對(duì)于PNG格式來(lái)說(shuō)，我們必須提供所有尺寸和顏色的資源；而使用SVG時(shí)則不需要
??PNG與大多數(shù)瀏覽器都兼容；而某些舊瀏覽器可能不支持SVG格式
??在這里建議大家可以選擇SVG格式的圖標(biāo)，因?yàn)樗梢怨?jié)省大量時(shí)間。但最重要的是，在導(dǎo)出過(guò)程中需要注意縮小復(fù)雜的形狀，并牢記某些舊版本的瀏覽器可能不支持SVG格式。
??以上，就是我們想跟大家分享的9種ICON設(shè)計(jì)原則，希望可以幫助大家在今后的圖標(biāo)創(chuàng)建設(shè)計(jì)中更加方便、靈活。
聯(lián)系客服
