圖標(biāo)設(shè)計(jì),即icon設(shè)計(jì)在界面設(shè)計(jì)中占有很重要的位置,決定一個(gè)界面風(fēng)格的重要構(gòu)成元素。一個(gè)好的圖標(biāo),可以讓用戶“一秒即懂”,如何設(shè)計(jì)出優(yōu)秀的圖標(biāo)?
圖標(biāo)的類型多種多樣,總共分為三大類:工具圖標(biāo),裝飾圖標(biāo),啟動圖標(biāo)。其中風(fēng)格多種多樣。主要風(fēng)格有大體有這些:
工具圖標(biāo):線性風(fēng)格、面性風(fēng)格、混合風(fēng)格
裝飾圖標(biāo):扁平風(fēng)格、擬物風(fēng)格、2.5D風(fēng)格、炫彩漸變風(fēng)格、實(shí)物貼圖風(fēng)格
啟動圖標(biāo):文字形式、圖形形式、圖標(biāo)形式、插畫形式、擬物形式
優(yōu)秀的圖標(biāo)都有哪些特點(diǎn)?
01.易識別 圖標(biāo)必須第一時(shí)間傳達(dá)最重要的信息。當(dāng)圖標(biāo)不能夠立刻表達(dá)出所代表含義時(shí),它就會變成一種“視覺噪音”,失去了圖標(biāo)存在的意義。優(yōu)秀的圖標(biāo)即不用閱讀標(biāo)簽或文字提示,就可以被認(rèn)知理解。
02.視覺舒適 可以通過插畫、顏色以及圖標(biāo)傳達(dá)品牌個(gè)性。如果做得好,圖標(biāo)肯定可以增強(qiáng)設(shè)計(jì)的美感。限制顏色使用數(shù)量,使用不超過3或4種顏色,保持設(shè)計(jì)簡潔。通過聚焦于對象的基本特征,來減少圖形設(shè)計(jì)細(xì)節(jié)的數(shù)量。盡量保持設(shè)計(jì)的概要性,因?yàn)樵O(shè)計(jì)概要性的在不同的界面和分辨率都可以進(jìn)行轉(zhuǎn)換。
03.合適尺寸 圖標(biāo)應(yīng)該很好地作為用戶的目標(biāo)點(diǎn)。參考:目標(biāo)在屏幕中點(diǎn)擊范圍為7-10mm。并且,請確保在目標(biāo)對象之間添加填充,以防止不準(zhǔn)確的點(diǎn)擊。
04.一致性 當(dāng)使用相似的元素且具有一致的外觀和功能時(shí),可以讓可用性和可學(xué)習(xí)性都得到提升改善。
a.內(nèi)部一致性 圖標(biāo)設(shè)計(jì)應(yīng)該保持視覺統(tǒng)一,你決定用于你的產(chǎn)品的圖標(biāo),應(yīng)該保持統(tǒng)一樣式。理想情況下,它們看起來應(yīng)該是一位設(shè)計(jì)師設(shè)計(jì)的。以下是你需要遵循的關(guān)于創(chuàng)造統(tǒng)一性的幾條原則:1.使用相同顏色或者顏色組合在你的圖標(biāo)上;2.使用相同的形狀和其他樣式屬性(例如邊框的大?。?。
b.與平臺保持一致 確保你的目標(biāo)風(fēng)格與平臺一致,它們會讓用戶更容易去理解。
c.與整個(gè)產(chǎn)品風(fēng)格保持一致 如果你擁有整個(gè)產(chǎn)品系列,確保一致的圖標(biāo)風(fēng)格(或至少類似)應(yīng)用在你所有的產(chǎn)品中。
作者:Nick Babich
翻譯:JaylonG
分享題目:如何設(shè)計(jì)優(yōu)秀的網(wǎng)站ICON圖標(biāo)
網(wǎng)址分享:http://muchs.cn/news25/116425.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)