比特派官方下載鏈接|icon圖標(biāo)臨摹

作者: 比特派官方下載鏈接
2024-03-10 21:59:07

iconfont-阿里巴巴矢量圖標(biāo)庫

第三十六期每周臨摹：經(jīng)典的寫實(shí)圖標(biāo)【icon】教程-UI中國用戶體驗(yàn)設(shè)計(jì)平臺(tái)

第三十六期每周臨?。航?jīng)典的寫實(shí)圖標(biāo)【icon】教程-UI中國用戶體驗(yàn)設(shè)計(jì)平臺(tái)

//百度統(tǒng)計(jì) 20220402 uicn

首頁

發(fā)現(xiàn)

即刻

作品

文章

活動(dòng)

設(shè)計(jì)大賽

設(shè)計(jì)團(tuán)隊(duì)

學(xué)習(xí)

教程

專題

書籍

UTalk

每周臨摹

工具

招聘

瀏覽器

榜單

會(huì)員

版權(quán)注冊

官方APP

認(rèn)證

話題

公眾號聯(lián)盟

查看全部熱門榜單

2023-2024作品集

50.2°

UI設(shè)計(jì)作品集

40.6°

全部

作品

文章

即刻

源文件

設(shè)計(jì)師

團(tuán)隊(duì)

常用搜索：

作品集AEui設(shè)計(jì)aigciconlogoapp

上傳作品

上傳經(jīng)驗(yàn)

上傳即刻

登錄

您的意見是我們 UI 中國進(jìn)步的動(dòng)力！

點(diǎn)擊立即反饋按鈕，發(fā)表您的意見！

立即反饋

QQ群反饋

您也可以加入U(xiǎn)I中國官方反饋群進(jìn)行反饋！

群號：302892100

備注：反饋問題后@管理員能讓我們及時(shí)了解您的意見

第三十六期每周臨摹：經(jīng)典的寫實(shí)圖標(biāo)【icon】教程

發(fā)布時(shí)間：2016-02-29

68107

113

682

psuiicon

查看詳情

上傳作品

交作業(yè)時(shí)間已過，看看每周臨摹吧

發(fā)起人

UI酷

662 粉絲 /

82 關(guān)注

申請發(fā)起

關(guān) 注

我們看見這類圖標(biāo)效果都是一層一層圖層疊加出的效果（鏡頭鏡頭鏡蓋彩帶側(cè)蓋）今天這套教程是對寫實(shí)類圖標(biāo)加深練習(xí), 希望大家能夠喜歡！我更希望大家能根據(jù)教程堅(jiān)持完成！新手最好這方面的技能掌握好，把這個(gè)練完，一定有不一樣的收獲！廢話就說到這里。

全部

按點(diǎn)贊數(shù)排序

按評論數(shù)排序

按時(shí)間排序

挑戰(zhàn)原創(chuàng)

#每周臨摹#粉色相機(jī)

309

愛柯基的阿桐

挑戰(zhàn)原創(chuàng)

#每周臨摹#臨摹臨摹

319

吃魚安

挑戰(zhàn)原創(chuàng)

#每周臨摹#擬真相機(jī)

484

~~ 胡楊~~

挑戰(zhàn)原創(chuàng)

#每周臨摹#卡通相機(jī)臨摹練習(xí)

409

知天下e站

挑戰(zhàn)原創(chuàng)

#每周臨摹#經(jīng)典寫實(shí)相機(jī)icon

540

成長故事多

挑戰(zhàn)原創(chuàng)

#每周臨摹#小相機(jī)的自拍，美美噠~

727

駿翊其林

挑戰(zhàn)原創(chuàng)

#每周臨摹#玫紅相機(jī)

393

高冷的天使CoCo

挑戰(zhàn)原創(chuàng)

#每周臨摹#相機(jī)一枚

446

夜雨raining

挑戰(zhàn)原創(chuàng)

#每周臨摹#擬物相機(jī)圖標(biāo)練習(xí)

720

摩西moses

挑戰(zhàn)原創(chuàng)

#每周臨摹#交作業(yè)

257

小雷雷

挑戰(zhàn)原創(chuàng)

#每周臨摹##每周臨摹#相機(jī)圖標(biāo)

421

_一個(gè)徐

挑戰(zhàn)原創(chuàng)

#每周臨摹#擬物相機(jī)-icon 臨

513

無神論

挑戰(zhàn)原創(chuàng)

#每周臨摹#相機(jī)圖標(biāo)

447

記憶中的沙城

挑戰(zhàn)原創(chuàng)

#每周臨摹##每周臨摹#相機(jī)圖標(biāo)

259

Ar_joy

挑戰(zhàn)原創(chuàng)

#每周臨摹#ISA寫實(shí)相機(jī)cemra

440

薄荷綠lsa

挑戰(zhàn)原創(chuàng)

#每周臨摹#練習(xí)。。。。

284

Jona_

挑戰(zhàn)原創(chuàng)

#每周臨摹#練練練

377

小樹林

挑戰(zhàn)原創(chuàng)

#每周臨摹#跌跌撞撞做完

676

MakeBAI

挑戰(zhàn)原創(chuàng)

#每周臨摹#沒看教程用矢量手法加圖層樣式做出來的

600

野司機(jī)

#每周臨摹#相機(jī)圖標(biāo)

588

一本書

123456

上周作品往期回顧

大牛，別默默的看了，快登錄幫我點(diǎn)評一下吧！:)

登錄

立即注冊

給UI酷發(fā)私信

我的第*期臨摹作業(yè)******，求發(fā)起人點(diǎn)評

還可以輸入200個(gè)字

取消

確定

舉報(bào)理由:

垃圾、廣告信息

色情、低俗內(nèi)容

時(shí)政敏感話題

其他原因

確定

Ctrl+Enter

商務(wù)合作

意見反饋

關(guān)于我們

聯(lián)系我們

版權(quán)聲明

官方QQ群

京ICP備14007358號-1

/ 京公網(wǎng)安備11010802014104號 / Powered by 2008-2024 UI.CN

APP下載(Android)

微信公眾號

反饋

圖標(biāo)分享 | 30 個(gè)免費(fèi) icon 下載網(wǎng)站 - 知乎

圖標(biāo)分享 | 30 個(gè)免費(fèi) icon 下載網(wǎng)站 - 知乎首發(fā)于免費(fèi)圖片素材資源切換模式寫文章登錄/注冊圖標(biāo)分享 | 30 個(gè)免費(fèi) icon 下載網(wǎng)站象刀辦公?已認(rèn)證賬號推薦的30 個(gè)網(wǎng)站提供了超過數(shù)百萬個(gè) icon 讓你免費(fèi)下載，在挑選合適的圖標(biāo)及 icon 時(shí)，選擇正確的質(zhì)量跟大小也很重要，別忘了點(diǎn)贊收藏哦！你可以在以下提供的網(wǎng)頁找到：使用于 Android 或 iOS 界面的元素不同皮膚的圖標(biāo)及 icon不同社區(qū)網(wǎng)站的功能按鈕可用于商業(yè)用途的授權(quán)圖標(biāo)（請?jiān)谙螺d前再次檢查授權(quán)說明喔！）可用于個(gè)人作品的免費(fèi) icon30 個(gè)免費(fèi) icon 網(wǎng)站推薦清單1. ICONFINDER網(wǎng)站：https://www.iconfinder.com/ICONFINDER 是一個(gè)在設(shè)計(jì)圈中廣為人知的圖標(biāo)搜索網(wǎng)站，它界面設(shè)計(jì)清晰且簡潔，只要在網(wǎng)站中輸入關(guān)鍵字即可找到需要的不同顏色圖標(biāo)！使用說明：ICONFINDER 包含免費(fèi)及付費(fèi)的 icon，如果想要使用免費(fèi)商用授權(quán)的圖標(biāo)，請?jiān)谒阉黜撁孀筮叺暮Y選器中選擇Free，即可使用。2. flaticon網(wǎng)站：https://www.flaticon.com/Flaticon 是一個(gè)與 FreePik 同一家公司的網(wǎng)站，專門為設(shè)計(jì)師找尋免費(fèi)素材。Flaticon 最棒的特點(diǎn)是可以使用網(wǎng)站內(nèi)的收尋引擎找到「免費(fèi)且商業(yè)可用」的圖標(biāo)。此外，在這里找到的 icon 及圖標(biāo)都包含了矢量圖形文件和常見的圖像格式，方便設(shè)計(jì)師在下載后直接使用。使用說明：使用時(shí)需要標(biāo)注出處，即使用于個(gè)人作品也需要。若要用于商業(yè)用途則需要購買商用授權(quán)。3. FIND ICONS網(wǎng)站：https://findicons.com/FindIcons 是一個(gè)圖標(biāo)搜索網(wǎng)站，它們擁有世界上最大的免費(fèi)圖標(biāo)數(shù)據(jù)庫，網(wǎng)站內(nèi)有篩選器和推薦功能，幫助你在做設(shè)計(jì)作品時(shí)更快速找到需要的免費(fèi)圖標(biāo)。雖然，它的搜索引擎看起來有點(diǎn)簡易且傳統(tǒng)，但相信一定有需要這種設(shè)計(jì)風(fēng)格的設(shè)計(jì)師們。使用說明：每個(gè)圖標(biāo)上都列出了不同授權(quán)的使用說明，請?jiān)谙螺d前檢查用途規(guī)范。4. IconArchive網(wǎng)站：https://iconarchive.com/IconArchive也是一個(gè)巨量的素材搜索引擎，它不僅包含常見的界面按鈕圖標(biāo)，還有紋理材質(zhì)風(fēng)格的圖標(biāo)及各種皮膚的漫畫 icon。IconArchive 網(wǎng)站的特別之處在于它的搜索結(jié)果是以顏色排列的，你可以使用贊同及不贊同的投票功能，幫助改進(jìn)搜索結(jié)果。如果你突然沒有靈感，也可以選擇最熱門、最多人預(yù)覽的 icon 款式找到你喜愛的圖標(biāo)。使用說明：大部分圖標(biāo)都是采用 CC 授權(quán)方式，但每個(gè)圖標(biāo)稍有不同。下載前請?jiān)诟鲃e的圖標(biāo)頁面中查找。5. GraphicBurger網(wǎng)站：https://graphicburger.com/GraphicBurger 是一個(gè)免費(fèi)提供給設(shè)計(jì)師們使用的設(shè)計(jì)資源網(wǎng)站。在這里你甚至可以找到每個(gè) icon 專屬的 PSD 文件來修改圖標(biāo)，變成你想要的樣子。如果你正在尋找可愛特別的圖標(biāo)，請不要錯(cuò)過 GraphicBurger！使用說明：GraphicBurger 上所有的資源都可以隨意下載，包括logo模型、產(chǎn)品模型、文本效果、圖標(biāo)、用戶界面、插圖、背景圖像等，均可在個(gè)人和商業(yè)項(xiàng)目中免費(fèi)使用。使用時(shí)無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會(huì)很感激你。6. Premium Pixel網(wǎng)站：https://www.premiumpixels.com/如果你真的不知道要使用什么圖標(biāo)的話，Premium Pixel 提供了專家精挑細(xì)選的免費(fèi)圖標(biāo)，你可以在這里搜索各種免費(fèi)素材和界面圖標(biāo)的懶人包。使用說明：所有資源都是免費(fèi)授權(quán)使用，幾乎沒有限制。7. Freebiesbug網(wǎng)站：https://freebiesbug.com/psd-freebies/icons/這個(gè)網(wǎng)站上的資源是由許多設(shè)計(jì)師共同制作和發(fā)布的一系列 PSD 圖標(biāo)。就像他的網(wǎng)站名稱一樣，它提供了大量免費(fèi)在 Photoshop 上使用的 icon 素材。使用說明：可以在個(gè)人作品中免費(fèi)使用這些圖標(biāo)。若用于商業(yè)用途，請?jiān)谑褂们霸俅螜z查授權(quán)，因?yàn)槊總€(gè)圖標(biāo)的作者要求都不太一樣。8. IcoMoon app網(wǎng)站：https://icomoon.io/app/想要制作自己的圖標(biāo)嗎？那你應(yīng)該會(huì)喜歡 IcoMoon！IcoMoon 不僅可以找尋想要的圖標(biāo)，還可以建立或合并你自己的 icon 樣式，最后生成多種文件格式直接使用。使用說明：每個(gè)圖標(biāo)都有一個(gè)授權(quán)鏈接可以參考詳細(xì)使用授權(quán)。網(wǎng)站上的圖標(biāo)都可以免費(fèi)下載，進(jìn)行基本的編輯，也可以導(dǎo)入你自己的圖標(biāo)，制作圖標(biāo)字體文件或生成 SVG、Polymer、PDF、XAML、PNG 和 CSS sprite 格式。9. Squid Ink網(wǎng)站：https://thesquid.ink/flat-icons/想找特別又可愛的圖標(biāo)下載嗎？ Squid Ink 上的圖標(biāo)都是親手畫的，總共包含了 2000 個(gè)圖標(biāo)， 17 個(gè)類別，并提供了 5 種不同的下載格式，允許任意更改 icon 顏色或圖層樣式、移動(dòng)和重新調(diào)整元素和大小。使用說明：可以免費(fèi)選擇 50 個(gè)喜愛的 icon 在個(gè)人或商用作品中，第 51 個(gè)開始需要付費(fèi)。10. Freepik網(wǎng)站：https://www.freepik.com/相信喜愛免費(fèi)素材的你應(yīng)該對于 FreePik 不陌生，如果你還沒有聽說過它，那么現(xiàn)在也是時(shí)候了！這是一個(gè)一直都在更新的在線資源網(wǎng)站，提供的不僅僅是免費(fèi)圖標(biāo)或 icon 。他們也提供大量的矢量圖像、插圖、照片和 PSD 設(shè)計(jì)文件可供免費(fèi)下載。使用說明：使用時(shí)需要注明出處。11. iconstore網(wǎng)站：https://iconstore.co/IconStore 是一個(gè)免費(fèi)的矢量 (SVG) 圖標(biāo)庫，由才華橫溢的設(shè)計(jì)師們一同建立，全部的文件都可下載用于商業(yè)用途。使用說明：你可以在個(gè)人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會(huì)很感激你。12. icon8網(wǎng)站：https://icons8.com/icon8 網(wǎng)站最初是一個(gè)提供免費(fèi) icon 資源的網(wǎng)站，但如果你也想找尋免費(fèi)的高畫質(zhì)圖像、矢量圖像和免費(fèi)音樂使用那就到這里！他們還擁有強(qiáng)大的圖標(biāo)編輯功能，可以讓你自由調(diào)整 icon 的顏色、添加文本、背景、大小、位置、形狀…等功能。如果你需要將 icon 嵌入到網(wǎng)站中，只需點(diǎn)擊「嵌入 HTML」按鈕，就會(huì)顯示各種嵌入方法！使用說明：需要注明出處及原始鏈接，即可免費(fèi)使用帶 icon8 上面所有的圖標(biāo)，在個(gè)人或商業(yè)用途中。請注意，不允許將原始圖標(biāo)文件轉(zhuǎn)售和發(fā)布給第三方人士。13. Oxygenna網(wǎng)站：https://www.oxygenna.com/Oxygenna是一個(gè)小的創(chuàng)意設(shè)計(jì)公司，專門從事網(wǎng)頁設(shè)計(jì)及 App 開發(fā)。他們網(wǎng)站上有一個(gè)資源專區(qū)，專門提供給設(shè)計(jì)師免費(fèi)的資源，增加工作的效率。你可以從網(wǎng)站中下載免費(fèi)的 icon 資源，最棒的是提供你 Photoshop、Illustrator 和 PNG 文件格式，。使用說明：不管是在個(gè)人或商用作品中，都可以任意使用。14. 1001freedownloads網(wǎng)站：https://www.1001freedownloads.com/1001FreeDownloads 是一個(gè)很著名的網(wǎng)站，直至今日他們每天都不斷的增加免費(fèi)可下載的內(nèi)容。它目前擁有數(shù)以千計(jì)的免費(fèi)矢量、照片、畫筆、漸變、PSD 和字體文件供大家免費(fèi)下載。使用說明：可以在個(gè)人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會(huì)很感激你。15. iconshock網(wǎng)站：https://www.iconshock.com/free-icons/在這里你可以找到各種不同樣式、大小、格式和皮膚的各種圖標(biāo)。從 iOS 、Line icon 到以食物為皮膚的圖標(biāo)皮膚通通都有。所有圖標(biāo)在 Iconshock 上都可完全免費(fèi)供個(gè)人使用。小編最喜歡 iconshock 的一點(diǎn)是他們提供 3D 圖標(biāo)，他們的 3D 圖標(biāo)款式多樣且整潔，下載的出來的文件畫質(zhì)也很棒！使用說明：可以在個(gè)人作品中免費(fèi)使用16. pngtree網(wǎng)站：https://pngtree.com/so/iconPngtree 是一個(gè)擁有數(shù)百萬個(gè)高畫質(zhì)的 png、矢量、模板和創(chuàng)意插圖的網(wǎng)站。多年來，它為 3000 萬+ 設(shè)計(jì)師們和用戶提供了許多方便且適合商業(yè)用途的圖像內(nèi)容！想要一次瀏覽多種 icon 的人可以參考這個(gè)網(wǎng)頁。使用說明：可以在個(gè)人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，需要注明出處及原始鏈接。17. google fonts網(wǎng)站：https://fonts.google.com/icons?selected=Material+Icons這里的所有 icon 皆由 Google 免費(fèi)提供。如果你正在開發(fā) Android App，或者你想看看大公司都怎么設(shè)計(jì) icon 界面，那么你可以用 Google 自家生產(chǎn)的 icon 作為參考。Material Icons 有五種樣式和一系列不同的尺寸和大小可以下載。使用說明：可免費(fèi)在個(gè)人或作品中使用。18. steamline網(wǎng)站：https://streamlinehq.com/擁有 12 種不同風(fēng)格的皮膚，幫助你在 Streamline 中找到適合你工作項(xiàng)目的 icon。網(wǎng)站上面擁有 100,000+ 個(gè) icon 、插圖和表情符號。全部由 steamline 團(tuán)隊(duì)一一畫出，如果你想要在 Figma、Sketch 和 Adobe XD 上使用的話，可以下載他們自己開發(fā)的插件搭配使用，非常方便喔！使用說明：需要注明出處及原始鏈接。19. Fontawesome網(wǎng)站：https://fontawesome.com/想要找尋可以把 icon 變成 font 字型的網(wǎng)站嗎？Fontawesome 為你提供各種可縮放的矢量圖標(biāo)，可以改變大小、顏色、陰影以及符合 CSS 的樣式。你也可以使用 style prefix 將 Font Awesome 提供的圖標(biāo)放置在任何你想要的位置。使用說明：每個(gè)圖標(biāo)的使用規(guī)范不同，請?jiān)谙螺d前檢查用途規(guī)范。20. Dribbble網(wǎng)站：https://dribbble.com/tags/free_icons如果常常在設(shè)計(jì)圈的你對 Dribbble 一定也不陌生，他就如同設(shè)計(jì)界的 Facebook 一樣。上面有來自世界各地的設(shè)計(jì)師在上面發(fā)布作品，包括各種圖形、動(dòng)效、UI、Web 和插圖。你可以使用關(guān)鍵字在 Dribbble 上發(fā)現(xiàn) 500 + 多個(gè)不同設(shè)計(jì)師提供的免費(fèi) icon，若遇到任何 icon 使用上的問題也可以直接聯(lián)系設(shè)計(jì)師討教。使用說明：每位設(shè)計(jì)師的提供的 icon 使用權(quán)限不一，請?jiān)陧撁嬷凶屑?xì)查看規(guī)范，或詢問設(shè)計(jì)師。21. UXwing網(wǎng)站：https://uxwing.com/UXwing 是一個(gè)經(jīng)驗(yàn)豐富的 icon 設(shè)計(jì)師團(tuán)隊(duì)，專長制作矢量圖標(biāo)。他們幫助設(shè)計(jì)師和開發(fā)者畫出漂亮的移動(dòng)端 app 圖標(biāo)、網(wǎng)站圖標(biāo)、Web 設(shè)計(jì)、產(chǎn)品設(shè)計(jì)…等其他創(chuàng)意作品，網(wǎng)頁上 icon 支持矢量文件、透明背景的 PNG 和圖標(biāo)字體格式。 UXwing 上主要分成三大類別：實(shí)體、線條、顏色，以上再細(xì)分成 150 多個(gè)子類別，可幫助大家實(shí)時(shí)找到合適的 icon 。使用說明：全部的 icon 都可以做個(gè)人或商業(yè)用途，無需要注明出處及原始鏈接。22. iconfactory網(wǎng)站：https://freeware.iconfactory.com/iconsIconfactory 的團(tuán)隊(duì)擁有了二十多年的設(shè)計(jì)及軟件開發(fā)經(jīng)驗(yàn)，網(wǎng)站上的 icon 可以供大家在個(gè)人作品中免費(fèi)使用，如果你有任何 icon 使用上的問題都可以詢問他們。使用說明：免費(fèi) icon 僅供個(gè)人作品使用，若需要作其他用途，請洽所有者。23. thenounproject網(wǎng)站：https://thenounproject.com/icons/Thenounproject 是一個(gè)由 120 多個(gè)國家及地區(qū)的設(shè)計(jì)師組成的網(wǎng)站，他們致力將 icon 變成世界上最通用的交流工具，希望可以跨越語言和文化的界限。無論你是在尋找加密貨幣 icon、人工智能 icon 、擁有 UI 元素 icon ，或是像 Beyoncé 等名人的 icon，你的特殊喜好在這里都能被滿足。使用說明：使用權(quán)限依每個(gè) icon 有所不同，下載使用前請仔細(xì)閱讀頁面。免費(fèi)使用需要注明出處及原始鏈接，若不想標(biāo)記出處可以參考網(wǎng)站內(nèi)的訂閱服務(wù)。24. DeviantArt網(wǎng)站：https://www.deviantart.com/DeviantArt 是一個(gè)充滿活力的藝術(shù)家社區(qū)及論壇，上面有近 200,000 + 個(gè)免費(fèi) icon 可供下載。若你正在尋找動(dòng)效風(fēng)格的 icon，到 DevianArt 一定可以找到！使用說明：每個(gè) icon 的使用規(guī)范不同，有些作者會(huì)要求你是 DeviantArt 社區(qū)上的成員才能下載，因此請?jiān)谙螺d仔細(xì)前檢查。25. iconmonstr網(wǎng)站：https://iconmonstr.com/iconmonstr 網(wǎng)站中集結(jié)了 316 個(gè)類別，共 4512+ 個(gè)免費(fèi)圖標(biāo)，在這里 icon 只有黑與白。全部采用填充、粗體和細(xì)化設(shè)計(jì)。每個(gè) icon 都有 SVG、EPS、PSD 和 PNG 格式可供你下載使用。SVG 格式也有嵌入的 code。若想要更改 icon 設(shè)計(jì)，可以選擇 PNG 格式直接在網(wǎng)站上更改圖像、大小、顏色、背景顏色等基本編輯。使用說明：可以在個(gè)人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)。26. softicon網(wǎng)站：https://www.softicons.com/http://SoftIcons.com 允許免費(fèi)下載 icon 包供個(gè)人使用。網(wǎng)頁上包含了 2,849 組，共 475,655 個(gè) icon 及圖像。網(wǎng)站自 2010 開始，每周增加了 9 組新 icon，從來不間斷。若是希望每周都可以發(fā)掘新的圖標(biāo)，這里會(huì)是你的好選擇。使用說明：所有 icon 均可供個(gè)人作品使用。若需將 icon 作為商業(yè)目的使用，請閱讀欲下載的 icon 頁面授權(quán)區(qū)。27. fontello網(wǎng)站：https://fontello.com/Fontello 是一種將矢量圖像快速打包成 webfonts 的工具。你可以將其視為 Twitter Bootstrap 的圖像。若你想把 icon 大量嵌入網(wǎng)站中，這里擁有你所需要的一切。Fontello 提供的 icon 最大優(yōu)點(diǎn)是在高分辨率的螢?zāi)簧蠜]有像素化或模糊化的缺點(diǎn)，任何瀏覽器都支持。使用說明：使用權(quán)限依每個(gè) icon 有所不同，下載使用前請仔細(xì)閱讀頁面。28. veryicon網(wǎng)站：https://www.veryicon.com/http://VeryIcom.com 是一個(gè)圖標(biāo)搜索引擎，它涵蓋了 1000 多個(gè) icon 包，共 20000 個(gè)高畫質(zhì)的 Web icon。每個(gè)圖標(biāo)都有 PNG、ICO 等多種文件格式，你可以輕松在 Windows、Macintosh 和 Linux 系統(tǒng)上免費(fèi)瀏覽和下載。使用說明：網(wǎng)站上所有 icon 都可以免費(fèi)用于非商業(yè)用途，但部分版權(quán)歸原作者所有，如果想將 icon 用于商業(yè)目的，必須付費(fèi)獲得作者的版權(quán)協(xié)議。29. Boxicons網(wǎng)站：https://boxicons.com/Boxicons 是一個(gè)精心設(shè)計(jì)的開源圖標(biāo)網(wǎng)站，擁有 1500 多個(gè)簡單的圖標(biāo)。如果不想要太復(fù)雜的圖標(biāo)，到 Boxicons 就對了。使用說明：Boxicons 是一個(gè)開源網(wǎng)站，使用的是創(chuàng)用 CC 授權(quán) 4.0，網(wǎng)站上的 icon 均可以做個(gè)人或商業(yè)用途。30. Feather網(wǎng)站：https://feathericons.com/Feather 上面的圖標(biāo)皆是開源免費(fèi)圖標(biāo)。每個(gè)圖標(biāo)都設(shè)計(jì)在 24x24 大小上，每一個(gè) icon 都強(qiáng)調(diào)簡單、一致和靈活。使用說明：全部的 icon 都可以做個(gè)人或商業(yè)用途，需要注明出處及原始鏈接。最后，別錯(cuò)過象刀PPT一家提供專業(yè)免費(fèi)的優(yōu)質(zhì)PPT模板和素材下載資源站。完全免費(fèi)，直接下載：發(fā)布于 2021-11-09 10:53圖標(biāo)圖標(biāo)制作Icon Font?贊同 259??15 條評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄免費(fèi)圖片素材資源提供優(yōu)質(zhì)免費(fèi)的圖

網(wǎng)站推薦|7個(gè)高質(zhì)量Icon圖標(biāo)資源網(wǎng)站 - 知乎

網(wǎng)站推薦|7個(gè)高質(zhì)量Icon圖標(biāo)資源網(wǎng)站 - 知乎首發(fā)于設(shè)計(jì)素材分享切換模式寫文章登錄/注冊網(wǎng)站推薦|7個(gè)高質(zhì)量Icon圖標(biāo)資源網(wǎng)站Billfish素材管家?已認(rèn)證賬號無論是界面設(shè)計(jì)還是PPT設(shè)計(jì)，一款有吸引力的精美圖標(biāo)，可以讓我們的作品更具視覺標(biāo)識。但是現(xiàn)在的Icon網(wǎng)站有很多，但是真正好用的，我只推薦下面這幾個(gè)。大家如果有需要，建議收藏分享。1、Iconfont-阿里巴巴矢量圖標(biāo)庫網(wǎng)址 http://www.iconfont.cn阿里巴巴旗下的免費(fèi)矢量圖庫，提供了矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等，可以中文搜索，直接在搜索框里輸入需要的內(nèi)容，就可以出現(xiàn)對應(yīng)的素材。點(diǎn)擊下載圖標(biāo)就可以了，網(wǎng)站還支持在線修改顏色，真的是很絕一網(wǎng)站。2、Noun Project網(wǎng)址 https://thenounproject.com/一個(gè)基于平面設(shè)計(jì)師而創(chuàng)辦的icon圖標(biāo)分享平臺(tái)，提供高質(zhì)量、可辨識性強(qiáng)的圖標(biāo)，使用者在網(wǎng)站上可以通過右上角的圖標(biāo)找到分類，篩選出你想尋找或使用的標(biāo)誌圖示，分類包括動(dòng)物、食物與飲料、生活保健、人物、安全與警示、科學(xué)、運(yùn)動(dòng)與娛樂、交通運(yùn)輸、旅游、天氣與自然等等分類。3、 Iconninja網(wǎng)址 http://www.iconninja.comIcon Ninja 是一個(gè)高質(zhì)量的免費(fèi)圖標(biāo)素材搜索下載平臺(tái)，支持近100萬個(gè)免費(fèi)圖標(biāo)，按照文件格式、圖片寬度、高度、文件大小等信息，用戶可以根據(jù)自己的需求進(jìn)行選擇，特別適合前端工程師或者PPT設(shè)計(jì)師使用。4、icons8網(wǎng)址 https://icons8.com/icons8是高質(zhì)量的免費(fèi)圖標(biāo)資源網(wǎng)站，支持在線改色、添加文字或背景裝飾等。用戶在下載素材時(shí)，可以選擇SVG、EPS、PNG和PDF四種下載格式，方便用戶后續(xù)在不同場景中的使用需求。5、IconPark網(wǎng)址：https://iconpark.oceanengine.com/homeIconPark是字節(jié)出品的一個(gè)開源圖標(biāo)庫，可以將一個(gè)單一的SVG源文件變幻出多種主題，網(wǎng)站分類詳細(xì)、為用戶提供更輕量的代碼和更靈活的使用場景；致力于構(gòu)建高質(zhì)量、統(tǒng)一化、可定義的圖標(biāo)資源，讓大多數(shù)人都能夠選擇適合自己的風(fēng)格圖標(biāo)。6、Flat Icon網(wǎng)址：https://www.flaticon.com/這是一個(gè)無可抗拒的扁平風(fēng)格圖標(biāo)庫，網(wǎng)站提供了可以滿足您日常需求的免費(fèi)和高級圖標(biāo)集，包含免費(fèi)圖標(biāo)集、數(shù)據(jù)分析圖標(biāo)、計(jì)算機(jī)圖標(biāo)，以及免費(fèi)表情符號制作工具等，分類詳細(xì)，您可以免費(fèi)設(shè)計(jì)自定義表情符號。7、Pictogram2網(wǎng)址：http://pictogram2.com/一個(gè)矢量圖標(biāo)網(wǎng)站，提供日語和英語切換訪問，提供了公眾場合、體育賽事、職場場景等等方面的角色和場景圖標(biāo)。圖標(biāo)設(shè)計(jì)識別度高，運(yùn)用場景也比較廣泛，無論是UI設(shè)計(jì)還是其他視覺設(shè)計(jì)都可以運(yùn)用，而且都是免費(fèi)使用。以上就是7個(gè)Icon圖標(biāo)庫的分享了，最后，Billfish還要自我推薦一下：將用的順手的圖標(biāo)通過Billfish搭建一個(gè)圖標(biāo)庫，為素材添加對應(yīng)的標(biāo)簽，可以方便我們后續(xù)更好的查找和使用，提升我們的設(shè)計(jì)效率哦。發(fā)布于 2021-11-18 10:41網(wǎng)站推薦網(wǎng)站推廣Icon Font?贊同 95??5 條評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄設(shè)計(jì)素材分享設(shè)計(jì)師常用素

設(shè)計(jì)師必看的圖標(biāo)（icon）設(shè)計(jì)指南 - 知乎

設(shè)計(jì)師必看的圖標(biāo)（icon）設(shè)計(jì)指南 - 知乎切換模式寫文章登錄/注冊設(shè)計(jì)師必看的圖標(biāo)（icon）設(shè)計(jì)指南揚(yáng)揚(yáng)圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁面中的各種圖形與圖標(biāo)。圖標(biāo)是UI設(shè)計(jì)中除了文字之外最不可或缺的視覺元素，在設(shè)計(jì)中看似只占一個(gè)很小的區(qū)域，但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn)，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件。本文盡量將圖標(biāo)進(jìn)行系統(tǒng)一些的介紹說明，當(dāng)然僅一篇文章是不可能面面俱到包含所有知識點(diǎn)。內(nèi)容比較基礎(chǔ)，主要以設(shè)計(jì)概念和設(shè)計(jì)思路為主，對圖標(biāo)相關(guān)的內(nèi)容進(jìn)行組織梳理和分類，便于小伙伴們建立圖標(biāo)的概念體系。過程中也有針對幾種典型的圖標(biāo)結(jié)構(gòu)進(jìn)行實(shí)操代練，想要把圖標(biāo)設(shè)計(jì)的更好，這就需要我們在平時(shí)勤加練習(xí)外，還要進(jìn)行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?.1 圖標(biāo)的定義圖標(biāo)，也稱為icon或Picoto，是計(jì)算機(jī)世界對現(xiàn)實(shí)世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。它的本質(zhì)是一種符號，它采用對這個(gè)世界的隱喻，來指代功能，含義，用途等。圖標(biāo)做為國際通用性語言，生活中隨處可見，例如商場導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，日常手機(jī)里使用的那些App圖標(biāo)，如微信、電話、短信等。的確，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富，有線的、有面的、還有擬物的等。如果粗淺劃分的話，UI設(shè)計(jì)中常見的圖標(biāo)大致分為2大類，第一類我們稱之為「標(biāo)志性圖標(biāo)」，比如手機(jī)中應(yīng)用啟動(dòng)圖標(biāo)；第二類我們稱之為「功能性圖標(biāo)」，這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導(dǎo)或操作。1.2 圖標(biāo)的重要性對于UI設(shè)計(jì)而言，圖標(biāo)可以說是整個(gè)產(chǎn)品的點(diǎn)睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中，圖標(biāo)幾乎是這個(gè)頁面的核心支撐體，它直接影響著產(chǎn)品的視覺體驗(yàn)和產(chǎn)品調(diào)性。它有以下幾點(diǎn)好處：全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣；節(jié)約空間：如果在一個(gè)圖標(biāo)能夠表述清楚含義的時(shí)候，比如用一個(gè)叉就可以不用寫「關(guān)閉」；快速定位：圖標(biāo)可以用它獨(dú)特的形狀或者顏色讓人快速定位到一個(gè)功能；上下文的定位：比如小飛機(jī)的圖標(biāo)單獨(dú)放出來不確定是什么，但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。1.3 發(fā)展歷程如你所知，圖標(biāo)、標(biāo)識都不是界面設(shè)計(jì)師所創(chuàng)造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當(dāng)中，早期用來傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識。隨著技術(shù)的發(fā)展，計(jì)算機(jī)誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀(jì)70年代，施樂在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒有走進(jìn)大眾的視野，但是它的后續(xù)機(jī)型施樂之星在1981年問世，并且成為了計(jì)算機(jī)史上的重要里程碑，而Xerox Alto 對于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場戰(zhàn)爭：蘋果VS微軟，Windows 對抗 Macintosh。當(dāng)然這都是后話。來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發(fā)布了彩色的圖標(biāo)設(shè)計(jì)。圖標(biāo)所能容納的信息量比起上一個(gè)黑白界面的時(shí)代更大，全新的樣式使得它在信息傳達(dá)的功能性上有了明顯的提升。從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來了一些麻煩——擬物圖標(biāo)的質(zhì)感、光影會(huì)分散用戶的注意力，形成「視覺噪聲」。于是UI設(shè)計(jì)師開始探索更新的表現(xiàn)形式來設(shè)計(jì)界面中的圖標(biāo)。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計(jì)和Google引領(lǐng)的長投影風(fēng)格的圖標(biāo)設(shè)計(jì)，但由于它們的表現(xiàn)形式太過于抽象，缺乏情感的傳遞，并沒有獲得用戶的青睞。在此之后，越來越多的圖標(biāo)開始借由靈活而強(qiáng)大的數(shù)字技術(shù)而誕生，并且基于不同的需求而演化出不同的分支和風(fēng)格。許多操作系統(tǒng)和工具開始預(yù)制一些成體系的圖標(biāo)，誕生基于種種需求，越來越多的自制的、重設(shè)計(jì)的圖標(biāo)，逐步進(jìn)入了我們的視野。圖標(biāo)類型很多，我們可以用不同的方式來劃分它們。圖標(biāo)的類型2.1 擬物圖標(biāo)由于人們都是通過以往的認(rèn)知來理解新事物，所以基于這一點(diǎn)，早期應(yīng)用界面必然要采用擬物風(fēng)格，以便于人們的理解和操作。是一個(gè)由實(shí)物 → 符號的發(fā)展歷程。例如「保存」圖標(biāo)就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標(biāo)的實(shí)體。但隨著時(shí)間的推移，人們逐漸將長期接觸的符號本身作為一種新的實(shí)體，在大家的眼里，它不再是一個(gè)具象事物的抽象符號，而是直接當(dāng)成一個(gè)實(shí)體來使用，甚至這個(gè)符號的實(shí)體已經(jīng)淡出歷史，但人們還在習(xí)慣性使用這個(gè)符號。更具體點(diǎn)來說，擬物設(shè)計(jì)就是追求模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等各種效果對實(shí)物進(jìn)行再現(xiàn)（也可適當(dāng)程度變形和夸張）；扁平化設(shè)計(jì)就是摒棄以上對效果（尤其是高光、陰影等能造成透視感的效果）的追求，轉(zhuǎn)而通過抽象、簡化、符號化的設(shè)計(jì)元素來表現(xiàn)。你還記得曾經(jīng)熬夜畫寫實(shí)圖標(biāo)的日子嘛～上千個(gè)圖層不在話下有木有！但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。再者，大家都熟悉的事物其實(shí)非常有限，而 APP 的創(chuàng)新卻在不斷進(jìn)行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒有參照物，所以也決定了擬物圖標(biāo)必然會(huì)被取代。2.2 扁平圖標(biāo)區(qū)別于擬物化更加接近于真實(shí)的實(shí)物，扁平化則是簡化真實(shí)的物體，進(jìn)行平面化的表現(xiàn)。2013年，蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來。并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡、符號化的概念。扁平圖標(biāo)風(fēng)格發(fā)展的后期，由于它們表現(xiàn)形式太過于抽象、缺乏情感的傳遞，也沒有獲得大眾的青睞，這也表明 UI 新的趨勢再一部向“突出內(nèi)容”的本質(zhì)靠攏，即“認(rèn)知簡約”。也許當(dāng)滿世界都是扁平化后，擬物化的設(shè)計(jì)卻又變得更顯眼了呢？最近流行的新擬物風(fēng)格就是最好的證明。2.3 微扁平、輕擬物從扁平風(fēng)格發(fā)展至現(xiàn)在，圖標(biāo)慢慢開始發(fā)展到微扁平輕擬物的方向，相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。2.4 線性圖標(biāo)線性圖標(biāo)是由直線、曲線、點(diǎn)在內(nèi)等元素組合而成的圖標(biāo)樣式，通過線來塑造輪廓。線性圖標(biāo)具有辨識度高，清晰，簡約易識別等優(yōu)點(diǎn)，線性圖標(biāo)不會(huì)對頁面造成太多的視覺干擾。缺點(diǎn)是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)對識別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì) ICON 所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。直角線條的icon顯得專業(yè)嚴(yán)謹(jǐn)，圓角粗線條的 ICON 顯得飽滿而可愛。2.5 面性圖標(biāo) 面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。面形圖標(biāo)具有表意能力強(qiáng)，細(xì)節(jié)豐富，情緒感強(qiáng)，視覺突出，創(chuàng)作空間大等優(yōu)點(diǎn)。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁面中不可過多出現(xiàn)，否則會(huì)造成頁面臃腫，難分主次，用戶視覺疲勞。2.5 文字圖標(biāo)文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標(biāo)，是一種很不錯(cuò)的表現(xiàn)手法。比如「提示」圖標(biāo)，使用一個(gè)圓圈包裹一個(gè)英文字母「i」，表示 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進(jìn)行表達(dá)，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標(biāo)識，這個(gè)概念太抽象了，很難用象形去概括，創(chuàng)造新的表意符號又很難被大眾接受，這時(shí)「正」字就很適合作為這個(gè)場景特定的圖標(biāo)符號，作為針對中國用戶群體的產(chǎn)品圖標(biāo)，簡單粗暴且有效。如果可能的話，盡量避免在圖標(biāo)中使用文字。因?yàn)閳D標(biāo)應(yīng)該是全球性的。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。2.6 " 新擬物 "風(fēng)格圖標(biāo)蘋果在 WWDC20 搞了個(gè)大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺(tái)遷移至ARM 平臺(tái)，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。macOS Big Sur是第一個(gè)將 " 新擬物 " 設(shè)計(jì)投入大規(guī)模商用的操作系統(tǒng)，這可視為 " 新擬物 "在實(shí)用化道路上的首次勝利。值得一提的是，在 Big Sur 的 " 外觀 " 設(shè)置里，多了一項(xiàng)名為" 自適應(yīng)強(qiáng)調(diào)色 "的選項(xiàng)。蘋果將主題色的指定權(quán)留給開發(fā)者，這是否暗示新一代 App 在光影上會(huì)有更豐富的效果？" 新擬物 " 設(shè)計(jì)的精髓在于對光線的絕妙運(yùn)用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間，進(jìn)而打造一種全新的視覺體驗(yàn)。不同于傳統(tǒng)的擬物，" 新擬物 "雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質(zhì)是自然界不存在的。換句話說，" 新擬物 " 是將真實(shí)光線用于虛擬對象，而 " 擬物 " 是還原實(shí)際物品在特定光照下的效果；由于整個(gè)設(shè)計(jì)界將不得不考慮新擬物風(fēng)格，圍繞該風(fēng)格的可能性將會(huì)有爆炸性的發(fā)展，并且這種新的數(shù)字空間設(shè)計(jì)理念如何能夠合理地適用于用戶界面設(shè)計(jì)和功能性將取得更大的突破。與以往一樣，第三方應(yīng)用將比蘋果更大膽、更快速地推動(dòng)這一風(fēng)格——這也是我們將會(huì)真正開始解鎖新擬物優(yōu)勢的時(shí)候。產(chǎn)品應(yīng)用圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異，從而被用戶記住。因此能在第一時(shí)間贏得用戶的好感和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計(jì)的好看且容易被人記住就成了非常重要的任務(wù)。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種。3.1 中文文字圖標(biāo)中文是我們的母語，每一個(gè)漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內(nèi)的產(chǎn)品都會(huì)使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計(jì)模式即字體設(shè)計(jì)，提取應(yīng)用名稱中的一個(gè)或多個(gè)漢字，進(jìn)行設(shè)計(jì)變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。3.1.1 單字提取產(chǎn)品名稱中最具代表性的文字，通過對筆畫及整體骨架進(jìn)行字體設(shè)計(jì)，以達(dá)到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識別性強(qiáng)。3.1.2 多字多字圖標(biāo)設(shè)計(jì)要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個(gè)字，最多兩行（四個(gè)字）排列。其優(yōu)點(diǎn)是更加直接的告訴用戶產(chǎn)品名稱，達(dá)到品牌推廣的目的，減輕用戶記憶成本。其缺點(diǎn)是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會(huì)顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。3.1.3 字加圖形組合文字加輔助圖形的組合，也是常見的產(chǎn)品圖標(biāo)設(shè)計(jì)方法，相比純文字圖標(biāo)，顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。3.2 英文字母圖標(biāo)英文設(shè)計(jì)與中文設(shè)計(jì)的設(shè)計(jì)模式相似，通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點(diǎn)或行業(yè)屬性進(jìn)行創(chuàng)意加工，新的字母圖形依舊保持本身的識別性。3.2.1 單字母通常提取英文首字母進(jìn)行設(shè)計(jì)，由于英文字母本身結(jié)構(gòu)簡潔，稍加改動(dòng)就很容易達(dá)到設(shè)計(jì)感于識別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。3.2.2 多字母提取產(chǎn)品全稱或幾個(gè)單詞的首字母組合而成，形成獨(dú)有的產(chǎn)品簡稱，方便用戶記憶。3.2.3 字母加圖形組合字母加圖形組合的設(shè)計(jì)形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進(jìn)行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。3.3 數(shù)字圖標(biāo)直接用數(shù)字做應(yīng)用圖標(biāo)的相對較少，但是數(shù)字識別性強(qiáng)，易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性。3.4 特殊符號圖標(biāo)由于符號本身的含義會(huì)對產(chǎn)品屬性有一定限制，所以特殊符號在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對較少。如“$”符號可代表與金錢有關(guān)聯(lián)性的產(chǎn)品，無法運(yùn)用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強(qiáng)的特點(diǎn)，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。除了中英文圖標(biāo)，還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡潔大方，視覺沖擊力強(qiáng)。常見的有以下幾種：3.5 幾何圖形幾何圖形的設(shè)計(jì)模式給人簡約、現(xiàn)代、個(gè)性等視覺感受，從單個(gè)具象圖形到復(fù)雜的空間感營造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達(dá)不同，如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等，添加圓角后又會(huì)更加親民、可愛。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。3.6 單雙形/剪影單雙形是指應(yīng)用圖標(biāo)只展示單個(gè)或兩個(gè)的剪影圖形。通常有兩種設(shè)計(jì)方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡潔明確，易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。3.7 線形線形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺效果。纖細(xì)的線框圖形傳遞出簡潔輕快的氣質(zhì)，適合于文藝、清新的應(yīng)用，在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格，才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一。線性風(fēng)格一定注意不可太細(xì)，如果做得太細(xì)，在手機(jī)上看會(huì)非常尖銳，顯得不易點(diǎn)擊。例如airbnb，它的背景是一個(gè)微漸變，線性風(fēng)格曲線組成“A”，同時(shí)是一個(gè)小蜜蜂。3.8 動(dòng)物圖形/剪影動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見的方式之一，通過提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素，背景填充單色或漸變色，簡潔明了。動(dòng)物給人的印象比較可愛，有助于加深用戶對產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。3.9 卡通形象卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感，一個(gè)可愛的卡通形象有助于加深用戶對產(chǎn)品的印象。很多決策者會(huì)認(rèn)為卡通是一種低齡的審美，這種想法其實(shí)是錯(cuò)誤的?？ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格，如騰訊就是以一個(gè)企鵝作為品牌形象開始拓展自己的版圖。3.10 正負(fù)形以正形為底突出負(fù)形特征，以負(fù)形表達(dá)產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標(biāo)中的負(fù)形圖形是對話氣泡，告訴我們這是一個(gè)媒體或社交的應(yīng)用，而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì)。3.11 白色漸變白色漸變的設(shè)計(jì)模式與透明白色相似，都是通過白色不透明度來構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點(diǎn)，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。3.12 彩色漸變色彩比任何圖形都更能抓住用戶的注意力，同時(shí)色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對比，營造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。3.13 無無，即沒有設(shè)計(jì)。除了背板什么也沒有。雖然這類設(shè)計(jì)模式比較獨(dú)特，但我們并不鼓勵(lì)，因?yàn)橛脩艉茈y從一個(gè)顏色上得到有用的信息。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。應(yīng)用圖標(biāo)尺寸規(guī)格4.1 iOS應(yīng)用圖標(biāo)iOS6及之前的版本，應(yīng)用圖標(biāo)的圓角半徑都可以通過1/4圓繪制出來，即繪制標(biāo)準(zhǔn)的圓角矩形即可，主屏幕應(yīng)用圖標(biāo)為114*114px，使用20px圓角半徑，App store應(yīng)用圖標(biāo)為512*512px，使用90px圓角半徑等。從iOS7開始，主屏幕應(yīng)用圖標(biāo)調(diào)整為120*120px，并且不再是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線，接近于26-27px圓角半徑。我們把兩個(gè)圓角曲線放大重疊后進(jìn)行對比，其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點(diǎn)，區(qū)別在于其曲線稍微向中心收緊。事實(shí)上，我們很難在Retina屏幕上區(qū)分這么席位的差別，因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)同學(xué)即可，如果應(yīng)用圖標(biāo)需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。4.2 安卓應(yīng)用圖標(biāo)安卓應(yīng)用圖標(biāo)同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設(shè)計(jì)師提供給程序員的同樣是直角矩形，然后程序員通過代碼進(jìn)行切割使其變成圓角圖標(biāo)。4.3 iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程在我之前的設(shè)計(jì)作品中，有個(gè)“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個(gè)iOS應(yīng)用圖標(biāo)的繪制過程。4.3.1 尋找隱喻隱喻是在彼類事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨椤⒄Z言行為和文化行為，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影，馬上就能想到相機(jī)、快門、閃光燈、暗房等。然后通過這些聯(lián)想詞，去找一些氣質(zhì)相符的圖片制作情緒版，通過情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。4.3.2 競品分析應(yīng)用市場各類產(chǎn)品不勝其數(shù)，在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì)，如何保持應(yīng)用圖標(biāo)的唯一識別性非常重要。唯一識別性不單單指圖形與其他應(yīng)用有所差異，避免創(chuàng)意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預(yù)期。4.3.3 提取關(guān)鍵詞根據(jù)收集的圖片，創(chuàng)建情緒版，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞，然后就知道在接下來的設(shè)計(jì)中應(yīng)該突出什么。我們從“影記”中可提取首字母“Y”，相機(jī)中的“快門”“信號燈”“開關(guān)機(jī)”，并依次將關(guān)鍵詞描繪成下列圖形。4.3.4 抽象圖形確立了首字母“Y”、“快門/開關(guān)機(jī)”和“信號燈”作為應(yīng)用圖標(biāo)的主圖形，接下來將繪制好的3個(gè)圖形相結(jié)合，即完成初步設(shè)想。4.3.5 圖標(biāo)柵格線使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計(jì)一句有助于建立和諧的圖標(biāo)繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。4.3.6 豐富細(xì)節(jié)通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì)，接下來我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié)，建立起應(yīng)用的產(chǎn)品氣質(zhì)?！坝坝洝弊鳛閿z影師分享佳作平臺(tái)，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應(yīng)用的主色。然后，白色的信號燈過于普通，使用相機(jī)本身發(fā)出的橘紅色燈光作為信號燈的顏色，使其更加具有動(dòng)感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流。4.3.7 多場景測試將120*120px應(yīng)用圖標(biāo)設(shè)計(jì)稿放大至1024*1024px，交付開發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形，iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住，假如圖標(biāo)設(shè)計(jì)稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域。△ 注：上圖非實(shí)際大小，僅表明不同分辨率下的比例關(guān)系此外，應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場景中，例如在iPhone 8plus上需@3x的圖，即將120px的圖標(biāo)放大至1.5倍；而在iPhone7的設(shè)置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時(shí)，一些細(xì)節(jié)就會(huì)丟失，使畫面變得模糊，因此設(shè)計(jì)師應(yīng)對小尺寸圖標(biāo)進(jìn)行席位調(diào)整，去除不必要的裝飾元素，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的識別度。APP中的功能圖標(biāo)除了產(chǎn)品圖標(biāo)，還有一種圖標(biāo)被稱為功能（或系統(tǒng)）圖標(biāo)，功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜，如微信底部四個(gè)系統(tǒng)圖標(biāo)就使用了比較簡潔的線性風(fēng)格。功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁或個(gè)人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時(shí)設(shè)計(jì)精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗(yàn)。在 @1x 一倍圖設(shè)計(jì)模式下，以 24px 為網(wǎng)格基準(zhǔn)的話，常使用的圖標(biāo)粗細(xì)有：1px 、1.5px、2px、3px，1.5的粗細(xì)常用于高倍屏，如近幾年旗艦機(jī)的手機(jī)屏幕或者 retina電腦屏，否則像素渲染會(huì)比較模糊。5.1 圖標(biāo)柵格圖標(biāo)柵格被用來促進(jìn)圖標(biāo)的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標(biāo)準(zhǔn)化的規(guī)范造就了一個(gè)靈活但有條理的系統(tǒng)，令所有的設(shè)計(jì)保持協(xié)調(diào)、一致和美學(xué)的視覺特征。5.1.1 像素柵格基于像素劃分的像素柵格是最基礎(chǔ)的柵格系統(tǒng)。在繪制圖標(biāo)時(shí)，我們總是希望將對象對齊到每一個(gè)像素，特別是直線。因?yàn)橄袼貙R不僅僅可以更好地渲染，還能讓圖標(biāo)更加整潔、舒服。下圖展示了Sketch 中像素對齊和沒對齊圖標(biāo)之間的差異：左：像素不對齊右：像素對齊可以在繪制圖標(biāo)之前就先設(shè)置好柵格，在Sketch和Figma中都有相似的設(shè)置。Material Design官網(wǎng)給出了圖標(biāo)的輔助網(wǎng)格，為設(shè)計(jì)師繪制小圖標(biāo)提供一致的標(biāo)準(zhǔn)。圖標(biāo)網(wǎng)格通常包含三部分內(nèi)容：活動(dòng)區(qū)域，修飾區(qū)域，關(guān)鍵線形狀。我們以此為例進(jìn)行介紹。活動(dòng)區(qū)域：是指圖標(biāo)主要內(nèi)容的繪制區(qū)域，通常而言圖標(biāo)圖形的主體都在該區(qū)域內(nèi)。修飾區(qū)域：是指用于承載部分圖標(biāo)的一些出格圖形，某些視覺占比較小的圖形可以延伸到修飾區(qū)域，但不能超出網(wǎng)格范圍。關(guān)鍵線形狀：關(guān)鍵線形狀是網(wǎng)格的基礎(chǔ)。有4種關(guān)鍵線形狀，利用這些核心形狀作為向?qū)?，你可以在產(chǎn)品圖標(biāo)的設(shè)計(jì)中保持一致的視覺比例。如 Material Deisgn 的圖標(biāo)網(wǎng)格中，活動(dòng)區(qū)域?qū)挾葹?20dp，修飾區(qū)域?qū)挾葹?2dp，4 種關(guān)鍵形狀分別對齊于 20pd和 18dp 和 16dp的邊緣，對齊于像素。上圖為基于網(wǎng)格和關(guān)鍵線形狀繪制圖標(biāo)的示例：如左側(cè)「剪切板」圖標(biāo)，整體核心圖形部分以網(wǎng)格中的正方矩形為模板，頂部的掛鉤圖形視覺面積較小，部分內(nèi)容伸入修飾區(qū)域。右側(cè)「相機(jī)」圖標(biāo)以長方矩形為模板。5.1.2 視覺柵格除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標(biāo)的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會(huì)比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個(gè)固定大小的容器，這樣它們在導(dǎo)出時(shí)就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺上看起來更加平衡，避免以后開發(fā)時(shí)還需要重新調(diào)整。5.1.3 視覺重量繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一，還要實(shí)現(xiàn)視覺上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開視覺上的覺錯(cuò)。UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長圖標(biāo)更緊湊。5.2 圖標(biāo)繪制細(xì)節(jié)清晰是圖標(biāo)的基本要素，在sketch中，參數(shù)不要有小數(shù)點(diǎn)，讓圖標(biāo)占滿像素網(wǎng)格。因?yàn)橛?jì)算機(jī)不能識別小數(shù)點(diǎn)，導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會(huì)把不能識別參數(shù)的部分拉伸填滿像素網(wǎng)格，導(dǎo)致圖標(biāo)出現(xiàn)虛邊。如果為圖標(biāo)設(shè)置1像素的邊框，邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時(shí)候，它們看起來很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊，如下圖：根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時(shí)候，清晰度會(huì)比一些不常見的角度效果會(huì)更好，比如13.7°，81°等等。所以，盡量避免用這些奇怪的數(shù)值。從一套圖標(biāo)中最復(fù)雜的那個(gè)開始來設(shè)計(jì)通常是最有效的，因?yàn)樗鼤?huì)幫助我們定義相同的視覺重量，讓所有的圖標(biāo)視覺重量保持一致。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力，而且視覺上看上去更重。5.3 圖標(biāo)的基本元素5.3.1 大小一致性是設(shè)計(jì)圖標(biāo)的關(guān)鍵，在繪制時(shí)，一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計(jì)中，網(wǎng)格的大小必須要是4或12的倍數(shù)。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個(gè)數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。通常我們只需要選擇一個(gè)通用的尺寸來繪制，然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí)，還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的產(chǎn)品圖標(biāo)可能是24px，但是營銷圖標(biāo)是80px，兩者的使用差別會(huì)很大，那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。這里建議從最大的尺寸開始，然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡化細(xì)節(jié)要比添加容易得多，也能最大程度的保留圖標(biāo)原始狀態(tài)。5.3.2 描邊和填充沒有什么比看到一個(gè)填充圖標(biāo)和一個(gè)線性圖標(biāo)放在一起更讓人抓狂的了。確保你的圖標(biāo)風(fēng)格一致是非常非常重要的。比如你想用填充圖標(biāo)來表示選中狀態(tài)，那么請一定要確保你的其他圖標(biāo)風(fēng)格一致，只有少量的變化。通常，填充圖標(biāo)具有更高的可識別性，而描邊圖標(biāo)更方便添加細(xì)節(jié)。并且在選擇你哪種風(fēng)格更合適的時(shí)候，也別忘了考慮品牌定位和風(fēng)格。如果你要繪制描邊圖標(biāo)，那么需要保證所有的筆畫都是相同的粗細(xì)，并且筆畫之間的間距不要比筆畫本身更細(xì)。當(dāng)我們繪制線性圖標(biāo)的填充版本時(shí)，首先需要考慮如何簡化線條。理想情況下，填充圖標(biāo)類似于陰影，而不是直接翻轉(zhuǎn)顏色。繪制填充圖標(biāo)的描邊版本，需要確定好線條的粗細(xì)，以及在保證清晰度的情況下可以添加多少細(xì)節(jié)。5.3.3 顏色如果是功能圖標(biāo)，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復(fù)雜，不利于和其他設(shè)計(jì)師協(xié)作。而對于營銷圖標(biāo)，出于品牌宣傳的目的，你可能會(huì)想要使用兩種顏色，個(gè)人認(rèn)為圖標(biāo)最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標(biāo)。5.4 功能圖標(biāo)的風(fēng)格常見的功能性圖標(biāo)風(fēng)格大致有三種：線性圖標(biāo)、面形圖標(biāo)和扁平化圖標(biāo)。但其實(shí)我們可以將「扁平化圖標(biāo)」可以看作是「線性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式，所以歸根到底，基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類：「線性圖標(biāo)」和「面型圖標(biāo)」；5.4.1 線性圖標(biāo)線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓，它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計(jì)語言，因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個(gè)場景下的幾個(gè)同等重要的圖標(biāo)，如果線條粗細(xì)不一致，會(huì)給人一種權(quán)重上存在差異的感覺。所以，在繪制線型圖標(biāo)時(shí)，通常會(huì)使用統(tǒng)一粗細(xì)的線條。常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì) ICON 所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個(gè)別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計(jì)，但粗線條的 ICON 圖形較為極簡才適用。線性圖標(biāo)根據(jù)樣式還可以分為：雙色線性圖標(biāo)、線面填充圖標(biāo)、線性漸變圖標(biāo)。5.4.2 面形圖標(biāo)面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在「微信」底部標(biāo)簽欄中，為選中的圖標(biāo)是線性圖標(biāo)，而選中的圖標(biāo)則是面形圖標(biāo)，同時(shí)顏色會(huì)變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實(shí)際上，蘋果在新的設(shè)計(jì)規(guī)范中也建議開發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo)，是否處于點(diǎn)擊態(tài)通過改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。面性圖標(biāo)根據(jù)不同的配色樣式可以分為：單色飽和度填充圖標(biāo)，純色漸變圖標(biāo)和多色漸變圖標(biāo)?；谧罨镜摹妇€性圖標(biāo)」和「面型圖標(biāo)」，通過不同的形態(tài)和風(fēng)格的組合，再結(jié)合豐富的表現(xiàn)手法，就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如：不同粗細(xì)線條線性圖標(biāo)的組合，或者面面組合，或者線面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候，需要根據(jù)自己的產(chǎn)品特征、受眾和使用場景，去選擇適合自己的表現(xiàn)形式。6.1 圖標(biāo)繪制方法圖標(biāo)的繪制方式主要有兩種：布爾運(yùn)算和貝塞爾曲線。6.1.1 布爾運(yùn)算布爾指的是喬治·布爾，19世紀(jì)的一位數(shù)學(xué)家，為了紀(jì)念布爾在符號邏輯運(yùn)算中的杰出貢獻(xiàn)，所以將這種運(yùn)算稱為布爾運(yùn)算。布爾運(yùn)算聽起來比較難，但其實(shí)非常簡單，布爾運(yùn)算采用的數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計(jì)師在使用軟件過程中引用了這種邏輯運(yùn)算方法，對應(yīng)到設(shè)計(jì)軟件中，就有：合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個(gè)圓形相減可以得到一個(gè)月亮的造型，這就是布爾運(yùn)算。合并形狀：將兩個(gè)形狀合并為一個(gè)，取的是交集；減去頂層形狀：用底層圖形減去頂層圖形所得最終圖形；與形狀區(qū)域相交：得到的形狀是兩個(gè)圖形重疊的部分，取的是交集；排除重疊形狀：簡單理解就是減去兩個(gè)圖形重疊的部分，與「與形狀區(qū)域相交」相反；基本上通過布爾運(yùn)算，我們能繪制出常見的大部分圖標(biāo)了，但有時(shí)我們需要針對某些線條進(jìn)行單獨(dú)的調(diào)整，又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo)，這個(gè)時(shí)候就需要用到貝塞爾曲線了。6.1.2 貝塞爾曲線貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表。他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。貝塞爾曲線包括：節(jié)點(diǎn)、控制點(diǎn)、控制線、曲線這幾個(gè)基本概念。矢量圖形便是由這幾個(gè)基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成，控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線，控制線就像皮筋一樣，調(diào)整控制點(diǎn)的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類型，一種是沒有控制點(diǎn)和控制線的「直線節(jié)點(diǎn)」；另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」，這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn)，另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化，適合繪制對稱結(jié)構(gòu)的曲線；再有一種是「無關(guān)聯(lián)節(jié)點(diǎn)」，即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線而不互相影響；最后一種是「不對稱關(guān)聯(lián)節(jié)點(diǎn)」，這種類型下，節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線上，但是卻不會(huì)對稱控制線的長度。在 Sketch 中，我們可以在選中節(jié)點(diǎn)后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當(dāng)前節(jié)點(diǎn)的類型，加快繪制效率。6.1.3 鋼筆工具繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點(diǎn)復(fù)雜，但是一但上手，會(huì)非常方便。The Bézier Game 這個(gè)是一個(gè)非常不錯(cuò)的練習(xí)鋼筆工具的網(wǎng)站，以游戲的形式練習(xí)鋼筆工具，通關(guān)的時(shí)候你對鋼筆工具就已經(jīng)輕車熟路了。繪制實(shí)戰(zhàn)這里選擇了幾個(gè)比較典型的圖標(biāo)，簡單演示下繪制方法和各自的繪制思路：6.1.4 面性眼睛：布爾運(yùn)算相交 / 相減 / 合并形狀繪制一個(gè)正圓，然后復(fù)制這個(gè)正圓形，通過布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓，再繪制兩個(gè)圓通過「相減」與合并形狀得到眼睛造型。位置定位：旋轉(zhuǎn) / 相減這個(gè)圖標(biāo)由兩個(gè)大小圓形相減，得到環(huán)形，再繪制一個(gè)和大圓半徑相等的正方形，和圓環(huán)左、下對齊，最后逆時(shí)針旋轉(zhuǎn)45度完成。WIFI：相加 / 相減 / 旋轉(zhuǎn)繪制多個(gè)圓通過布爾運(yùn)算的相加減得出三個(gè)圓圈嵌套“靶子造型，再繪制一個(gè)正三角形，和靶子圖形相交得到Wi-Fi圖標(biāo)。齒輪：旋轉(zhuǎn) / 相減通過兩個(gè)圖形的布爾運(yùn)算得到環(huán)形，然后繪制一個(gè)梯形，復(fù)制一個(gè)鏡像，將其對齊環(huán)形兩端，復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次（45度），最后合并全部形狀完成。鈴鐺：相加 / 相減由3個(gè)矩形組成鈴鐺主體，鈴鐺頂部圓頂結(jié)構(gòu)通過設(shè)置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算，完成。6.1.5 線性放大鏡：旋轉(zhuǎn) / 相加繪制一個(gè)正圓和一條線，用對齊工具將其居中對齊，編組后逆時(shí)針旋轉(zhuǎn)45度即可。時(shí)鐘：鋼筆 / 剪刀工具繪制一個(gè)正圓和一個(gè)矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個(gè)錨點(diǎn)，再用剪刀工具減去多余的線條即可。注意指針的長短關(guān)系。雨傘：相減 / 剪刀工具繪制一個(gè)正圓，再繪制一個(gè)矩形與其相減得到傘頂，然后繪制一個(gè)矩形，通過剪刀工具減去多余部分，得到傘架，完成。相機(jī)：合并繪制一個(gè)矩形和一個(gè)梯形，通過合并得到相機(jī)主體，再繪制一個(gè)正圓完成相機(jī)鏡頭部分，完成。愛心：相加 / 旋轉(zhuǎn)繪制兩個(gè)正圓和一個(gè)直徑與圓形等寬的正方形，然后逆時(shí)針旋轉(zhuǎn)45度所得。6.2 制定規(guī)范無規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來。在設(shè)計(jì)上也是如此，規(guī)范具有統(tǒng)一輸出，指引細(xì)節(jié)、便于查看的好處，規(guī)范就是一組圖標(biāo)中的規(guī)矩，所有圖標(biāo)的繪制都按照規(guī)矩來，最終的成品就會(huì)顯得井然有序。小小的圖標(biāo)是由很多圖形元素組成的，在這些圖標(biāo)中，元素的一致性是建立一個(gè)共同視覺于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè)圖標(biāo)和他們之間細(xì)微的差異，也將幫助我們學(xué)會(huì)圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu)，依次是筆畫末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。在制定規(guī)范時(shí)，我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范，依次按照上述圖標(biāo)元素進(jìn)行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度，光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。制定規(guī)范的三個(gè)過程：拆分細(xì)節(jié)：將圖標(biāo)中的細(xì)節(jié)元素（圓角、筆畫末端等）進(jìn)行分解，并在規(guī)范中制定細(xì)節(jié)元素的使用法則。風(fēng)格定位：根據(jù)產(chǎn)品調(diào)性，業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩、質(zhì)感風(fēng)格。功能劃分：不同功能（金剛區(qū)和標(biāo)簽欄等）的圖標(biāo)要區(qū)分開來，功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。圖標(biāo)設(shè)計(jì)規(guī)范6.3 圖標(biāo)管理和交付完成圖標(biāo)后需要進(jìn)行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi)，讓其他人幫忙來檢查你的圖標(biāo)是否整潔是非常有必要的。對圖標(biāo)精心設(shè)計(jì)評審，合格后再加入資源庫，這樣避免多人同時(shí)修改而造成混亂。文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標(biāo)，那么可能會(huì)提供1x、2x和3x.的png文件，以適應(yīng)多種設(shè)備。而對于開發(fā)和其他設(shè)計(jì)人員，則通常需要導(dǎo)出.svg文件，這些文件可以在設(shè)計(jì)程序中編輯，并且可以通過代碼在應(yīng)用程序或?yàn)g覽器中繪制。當(dāng)導(dǎo)出SVG時(shí)，代碼應(yīng)該盡可能簡潔。選擇Figma的另一個(gè)重要原因是它有超小的SVG導(dǎo)出，并且還能自動(dòng)優(yōu)化。圖標(biāo)資源管理工具：Nucleo或許你能做出完美無瑕的圖標(biāo)，但如果不能讓它們產(chǎn)品中發(fā)揮作用的話，那將毫無意義。所以在你開始設(shè)計(jì)之前，可以和開發(fā)人員談?wù)?，他們能告訴你圖標(biāo)交付的要求，這將改變你的一些選擇，比如圖標(biāo)的粗細(xì)或大小。問問其他設(shè)計(jì)師過去做過什么，以確保你們沒有重復(fù)工作。你還可以和市場運(yùn)營人員聊一下，看看他們在日常物料中缺少什么?？傊?，多向別人尋求反饋、建議和幫助。他們會(huì)激勵(lì)你發(fā)現(xiàn)更好的想法，并讓你了解自己應(yīng)該做什么。一套完整的圖標(biāo)設(shè)計(jì)規(guī)范是有必要的。6.4 線性or面性設(shè)計(jì)中，我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢？其實(shí)二者沒有太明顯的選擇優(yōu)劣，很多場景下已經(jīng)越來越模糊，但總的來說，還是有一些法則可以作為參考：常用的手法：在App的底部導(dǎo)航欄，選中狀態(tài)使用面型圖標(biāo)，而非選中狀態(tài)使用線性圖標(biāo)；16px左右的小圖標(biāo)慎用線性圖標(biāo)，線性圖標(biāo)在16px下，可排布像素的區(qū)域較小，這個(gè)時(shí)候線性圖標(biāo)不容易設(shè)計(jì)；面型圖標(biāo)比起線性圖標(biāo)，除裝飾性外具備更強(qiáng)的視覺信息層次感，更具引導(dǎo)性，比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面，使用面型圖標(biāo)；車載等系統(tǒng)界面，更適合用面型圖標(biāo)，面型圖標(biāo)的視覺面積較大，短時(shí)間內(nèi)更加容易識別；線性圖標(biāo)看起來通常會(huì)更加細(xì)膩精致，適合比較精致簡潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì)；功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁、詳情頁、或個(gè)人中心頁，都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶形成記憶思維，提高應(yīng)用的易用性。同時(shí)，設(shè)計(jì)精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗(yàn)。7.1 線性圖標(biāo)使用場景在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線框的圖標(biāo)設(shè)計(jì)，很多APP產(chǎn)品的標(biāo)簽欄都選擇用線性風(fēng)格的圖標(biāo)設(shè)計(jì)。無疑，線性圖標(biāo)可以減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上，同時(shí)輕量化的視覺語言也與扁平化的設(shè)計(jì)風(fēng)格更為融合。它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且線條本身就是一種設(shè)計(jì)語言，因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。通常，在UI設(shè)計(jì)中，線性圖標(biāo)很少和背板同時(shí)存在，因?yàn)榫€條的圖形視覺表現(xiàn)力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規(guī)則，一些簡單的線性圖標(biāo)和背板的組合也會(huì)很協(xié)調(diào)。7.2 面形圖標(biāo)使用場景面形圖標(biāo)具有廣泛適用性，通常在運(yùn)動(dòng)、時(shí)尚類應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺占比最大化，具有強(qiáng)烈的視覺表現(xiàn)力，一般用于應(yīng)用界面的主要功能入口，以方便用戶快速尋找。功能入口的面形圖標(biāo)通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標(biāo)，正形即圖標(biāo)直接填充色彩且無背板。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例，雖沒有嚴(yán)格的繪制標(biāo)準(zhǔn)，但從整體視覺效果上考慮，圖標(biāo)尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時(shí)還要考慮所有圖標(biāo)的視差一致。7.3 扁平圖標(biāo)的使用場景扁平化圖標(biāo)實(shí)際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導(dǎo)頁、空狀態(tài)也的情感化設(shè)計(jì)，后來逐漸在標(biāo)簽欄、首頁主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。我們了解了 icon 的基本知識，那么如何設(shè)計(jì)一個(gè)好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個(gè)產(chǎn)品呢？我們需要了解什么才是一個(gè)好的 icon 。我們可以從以下五個(gè)方面來檢驗(yàn)，分別是：識別性，規(guī)范性、統(tǒng)一性、呼吸感與品牌感。8.1 識別性圖標(biāo)就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個(gè)圖標(biāo)最重要的一項(xiàng)，尤其在沒有文字說明的情況下，一定不能讓用戶產(chǎn)生疑惑。我們檢測圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié)，還需要確保圖標(biāo)中的每一種顏色都是可見的。第二就是將圖標(biāo)拿到強(qiáng)光下進(jìn)行觀察，在強(qiáng)光下是否可以看清圖標(biāo)的主題結(jié)構(gòu)，圖標(biāo)是否有足夠的辨識度。圖標(biāo)識別性可以分為兩類，分別是含義識別和視覺識別。含義識別：是視覺語言是否可替換文字語言，簡言之就是讓你的圖標(biāo)可以被用戶理解，不會(huì)讓用戶產(chǎn)生歧義。視覺識別：圖標(biāo)的大小，顏色，線條的粗細(xì)，這些影響視覺識別的因素識別性是否高。8.2 規(guī)范性規(guī)范性也是做好一個(gè)圖標(biāo)的基礎(chǔ)，我們要保證圖標(biāo)在視覺大小的一致性，圖標(biāo)飽滿度、遵循同一種規(guī)律，細(xì)節(jié)統(tǒng)一性。視覺大小的一致性：在相同尺寸的基礎(chǔ)上分析形狀間的視覺差異，來審視視覺上是否統(tǒng)一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規(guī)定它的最大尺寸，進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整，使得視覺大小達(dá)到統(tǒng)一；飽滿度：常用的衡量方法就是正負(fù)形衡量法，在圖標(biāo)所占區(qū)域的矩形框中，看圖標(biāo)的正形的面積是否還可以增加；相同規(guī)律：同一套圖標(biāo)必須是以同種風(fēng)格呈現(xiàn)的，例如是否全部使用了圓角或直角的風(fēng)格，圓角大小、繪制風(fēng)格是否一致；細(xì)節(jié)統(tǒng)一：包括像素是否對齊、圓角、描邊粗細(xì)是否統(tǒng)一的問題；8.3 統(tǒng)一性在繪制多個(gè)類型相同的圖標(biāo)時(shí)，我們需要注意這一套圖標(biāo)合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中，會(huì)有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣，所表達(dá)的內(nèi)容也不同。這時(shí)，圖標(biāo)一致性的意義就體現(xiàn)出來了，根據(jù)格式塔原理中的相似性原則：人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級別的元素，則應(yīng)在視覺上保持統(tǒng)一匹配。圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標(biāo)后還需檢查線條的粗細(xì)比重，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。8.4 呼吸感呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。在圖標(biāo)的繪制過程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過近，元素也不宜過多。圖標(biāo)是一個(gè)物體的簡略縮影，目的是為了表達(dá)內(nèi)容，讓用戶快速理解，太過復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識別速度。因此在圖標(biāo)的繪制過程中應(yīng)該刪除所有無法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過復(fù)雜難以識別。8.5 品牌感品牌感就是我們上面談到的要與品牌理念相符，傳達(dá)給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設(shè)計(jì)的角度去理解，尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計(jì)中。那么，該如何提升品牌感，打造屬于自己App的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€索，這是近年來非常流行的一種趨勢。我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性，但是打開許多APP你會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角、斷線等設(shè)計(jì)語言，但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無個(gè)性的通病，使得UI看上去普通、不精致，缺少產(chǎn)品氣質(zhì)。那么，該如何打造屬于自己APP的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€索。它是由平面設(shè)計(jì)中的VIS（視覺識別系統(tǒng)）引入的一種設(shè)計(jì)策略，通過對品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺符號。每一個(gè)APP都有其品牌形象，代表了與眾不同的氣質(zhì)。接下來，我們就來學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì)。9.1 提取品牌圖形通常一個(gè)App的第一個(gè)tab是首頁，是用戶進(jìn)入App后看到的第一個(gè)頁面，最常見的圖標(biāo)設(shè)計(jì)是一個(gè)小房子的圖形。首頁是App中最重要的頁面，承載了整個(gè)產(chǎn)品的核心功能，是用戶瀏覽最多的地方，因此使用一個(gè)讓人印象深刻的品牌圖形作為“首頁”圖標(biāo)是必要的，不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象，加強(qiáng)了用戶對App的良好印象。例如網(wǎng)易云音樂的首頁標(biāo)簽就直接使用了它的品牌圖形，其優(yōu)點(diǎn)不言而喻。但是請注意，這種設(shè)計(jì)策略并不適合于所有的App，當(dāng)?shù)谝粋€(gè)tab被賦予特定功能，就不可使用品牌圖形，否則用戶會(huì)難以理解。例如微信第一個(gè)tab是聊天列表，此時(shí)使用氣泡就比品牌圖形更加合適。還有另外一種情況。通常一個(gè)App的最后一個(gè)tab是個(gè)人中心，即“我的”。如果App的品牌圖形是動(dòng)物圖形，也可以使用其整體或局部圖形來作為「個(gè)人中心」的入口圖標(biāo)。9.2 提取品牌色彩色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁面時(shí)感覺舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù)，可以給用戶帶來由內(nèi)而外一致的視覺體驗(yàn)。在設(shè)計(jì)時(shí)提取品牌色彩可適當(dāng)調(diào)整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標(biāo)背景色，使圖標(biāo)之間形成色彩上的關(guān)聯(lián)。直播應(yīng)用Bigo Live的品牌色是青藍(lán)色，在標(biāo)簽欄的圖標(biāo)設(shè)計(jì)上（選中態(tài)）將圖形局部元素填充青藍(lán)漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調(diào)性高度一致。9.3 提取設(shè)計(jì)語言在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素，這在圖標(biāo)設(shè)計(jì)中同樣適用，當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素，他們就構(gòu)成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓，這樣他們就形成了某種視覺聯(lián)系。9.4 提取產(chǎn)品氣質(zhì)品牌形象決定了產(chǎn)品的氣質(zhì)，而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個(gè)人的時(shí)候，往往會(huì)根據(jù)他的外貌形象特征，產(chǎn)生一個(gè)大致的印象，這就是一個(gè)人的氣質(zhì)。APP也同樣，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進(jìn)行拆解組合，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。9.5 拆分品牌名稱App標(biāo)簽欄圖標(biāo)最常見的形式是圖形加文字的組合，由于文字本身就能傳達(dá)最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個(gè)性。MONO是一款閱讀類App，它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個(gè)字母拆分成4個(gè)圖形。雖然每個(gè)字母與其對應(yīng)的功能模塊本身并沒有直接聯(lián)系，但加上標(biāo)簽文字的輔助也不會(huì)造成閱讀困難，而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了。9.6 展開形象聯(lián)想我們?nèi)粘Ｊ褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊：首頁、發(fā)現(xiàn)、動(dòng)態(tài)、我的等，因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì)。比如“首頁”是尖頂房子，“發(fā)現(xiàn)”是眼睛，“動(dòng)態(tài)”是氣泡，如果有差別也只是設(shè)計(jì)風(fēng)格的差異，有的直角有的圓角，有的線性有的面形。這樣的設(shè)計(jì)沒有品牌歸屬感，試一下將這些圖標(biāo)單獨(dú)拿出來就無法判斷它是誰，它從哪兒來？優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力，還要具備豐富的設(shè)計(jì)想象力，不拘泥于設(shè)計(jì)規(guī)范的條條框框，有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo)?！笆醉摗背诵》孔游覀冞€可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標(biāo)是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設(shè)計(jì)與品牌形象緊密相連，簡直完美！不過最新的改版好像已經(jīng)改沒了?？傊?，要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格，就要從外觀和顏色上確立主風(fēng)格，在局部尋求個(gè)性特征，將兩者結(jié)合，并融合產(chǎn)品屬性和符合用戶定位，先在腦海中構(gòu)思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個(gè)最佳方案上機(jī)完成，只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。寫在最后圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁面中的各種圖形與圖標(biāo)。在尺寸有限的界面上，小小的 icon 可以更加簡單高效的表達(dá)含義，傳遞給用戶正確和友好的指引。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格，以滿足不同的業(yè)務(wù)需求。OK，圖標(biāo)設(shè)計(jì)指南就分享到這里，希望對大家有所幫助。因?yàn)槠^長，幾經(jīng)修改，有細(xì)節(jié)不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎斧正，感謝閱讀。編輯于 2021-10-04 11:53UI設(shè)計(jì)師設(shè)計(jì)圖標(biāo)設(shè)計(jì)?贊同 39??添加評論?分享?喜歡?收藏?申請

Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS

Authors

Icons

Stickers

Interface icons

Animated icons

Other products

Freepik

Free vectors, photos and PSD

Wepik

Online design tool

Slidesgo

Free templates for presentations

Storyset

Free editable illustrations

Videvo

Free videos and motion graphics

Tools

API

API 14.5M+ icons to enhance your website, app, or project

Google Workspace

Icons for Slides & Docs

14.5+ millions of free customizable icons for your Slides, Docs and Sheets

English

Espa?ol

English

Deutsch

Português

Fran?ais

???

Pусский

Pricing

Notifications

No notifications to show yet

You’ll see useful information here soon. Stay tuned!

Icons

Stickers

Animated icons

Interface icons

All icons

Style

Pack

Collections

You haven’t created any collections yet

All collections displayed here

What can I do with my collections?

Add icons

Click on any icon you’d like to add to the collection.

Organize

Organize your collections by projects, add, remove, edit, and rename icons.

Edit

Use the "Paint collection" feature and change the color of the whole collection or do it icon by icon.

Download Icon font or SVG

Download your collections in the code format compatible with all browsers, and use icons on your website.

Share and Save

Save a backup copy of your collections or share them with others with just one click!

More info about Collections

Collections

Expand

Collapse

Show collections

You have reached your collections limit. Upgrade to get unlimited collections

Upgrade

Are you sure you want to delete this collection?

Yes, delete it

No, go back

We’re sorry you canceled your Premium subscription

You can still enjoy Flaticon Collections with the following limits:

You can choose only 3 collections to keep

You can only add up to 100 icons per collection

You can’t add Premium icons to your collection

The advantages of your collections have changed

You can choose only 3 collections to keep

You can only add up to 100 icons per collection

You can’t add Premium icons to your collection

Keep making the most of your icons and collections

Get 20% OFF our Annual Premium Plan

Apply Discount

Back

Select 3 collections to continue:

You have 8 collections, but can only unlock 3 of them

Stay Premium

Save and continue

Report download

Please indicate what problem has been found. Thanks!

Other

The download is not working

The format of some files is incorrect

The download is taking too long

Send

Base 64 encoded image

Copy the base64 encoded data and insert it in your HTML or CSS document. Need help? Maybe this link can help you

HTML image

Copy

Copied!

CSS background

Copy

Copied!

Using it for the web? Copy this link in your website:

Copy

Copied!

How to attribute for other media?

Don’t you want to attribute the author?

Going Premium is easy and it also allows you to use more than 14,522,000 icons without attribution. Find out more information here

Exit editor

Exit

Save to collection

Download

PNG

16px

24px

32px

64px

128px

256px

512px

SVG

EPS

CSS

Colors

Display

Shapes

Stroke

Select a color from the icon

Choose a new color

Custom palette

Remove color

Remove palette

You have exceeded the number of color samples for this palette

Save

Cancel

History

Scale

Move

Move left

Move right

Move up

Move down

Rotate

Rotate 90o right

Rotate 90o left

Flip

Flip horizontal

Flip vertical

Select a shape

None

Circle

Rounded square

Square

Size

Color

Stroke width

You can only save 3 new edited icons per collection as a free user. Upgrade to save unlimited icons.

Your collection is locked. You can upgrade your account to get an unlimited collection.

You have reached the icons limit per collection (256 icons)

This feature is only available for registered users. Login or register.

This icon has a gradient color and cannot be edited.

Undo

Redo

Reset

Access 14.5M+ vector icons & stickers

Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats.

Icons

Stickers

Animated icons

Interface icons

All icons

Style

Pack

圖標(biāo)庫 - Yesicon

Google Material Icons 圖標(biāo)庫 - Yesicon

簡體中文English簡體中文Espa?ol正體中文Deutsch日本語Fran?ais???Português反饋及建議切換到日間模式Material Symbols12321Material Symbols Light12379Google Material Icons10955Material Design Icons7447Phosphor7488Solar7401Tabler Icons5200MingCute Icon2806Remix Icon2860Bootstrap Icons2050Carbon2078IconaMoon1781Iconoir1551IonIcons1338Lucide1435Unicons1206TDesign Icons1203Teenyicons1200Clarity1103BoxIcons814BoxIcons Solid665Majesticons760Ant Design Icons830css.gg704Gravity UI Icons663Octicons604Memory Icons651CoreUI Free554Flowbite Icons539Myna UI Icons1089Basil493Pixelarticons480Akar Icons453coolicons442System UIcons430Typicons336Radix Icons318Zondicons297Element Plus293Circum Icons288Material Design Light284Feather Icon255EOS Icons253Bitcoin Icons250Charm Icons261Prime Icons260Humbleicons246uiw icons214Unicons Monochrome296Unicons Thin Line214Unicons Solid189Maki212Gridicons207Mono Icons180Quill Icons140Gala Icons51Lets Icons1528Framework7 Icons1253Mage Icons1042Fluent UI System Icons15647IconPark Outline2658IconPark Solid1947IconPark TwoTone1944IconPark2658VSCode Icons1255Jam Icons940HeroIcons1176Codicons455Gitlab SVGs375Pepicons Pop!1275Pepicons Print1275Pepicons Pencil1275Bytesize Icons101Evil Icons70Streamline2000Guidance360Font Awesome Solid1390Font Awesome Regular163OOUI356Nimbus140OpenSearch UI386FormKit Icons142Material Line Icons601Meteocons450SVG Spinners46OpenMoji4129Twitter Emoji3668Noto Emoji3555Fluent Emoji2961Fluent Emoji Flat2980Fluent Emoji High Contrast1545Noto Emoji (v1)2162Emoji One (Colored)1834Emoji One (Monotone)1403Emoji One (v1)1262Firefox OS Emoji1034Streamline Emojis787BoxIcons Logo155SVG Logos1812Simple Icons3047CoreUI Brands830Font Awesome Brands484Nonicons67Arcticons8749Custom Brand Icons1106File Icons930Devicon764Devicon Plain575Skill Icons397Brandico45Entypo+ Social76Cryptocurrency Icons483Cryptocurrency Color Icons483Flag Icons538Circle Flags428Flagpack255CoreUI Flags199Font-GIS358Map Icons167GeoGlyphs30Game Icons4046FontAudio155Academicons157Weather Icons219Health Icons1917Medical Icons144Covid Icons142Line Awesome1544Eva Icons490Dashicons342Flat Color Icons329Entypo+321Foundation283Raphael266Icons8 Windows 10 Icons234Innowatio Font105HeroIcons v1 Outline230HeroIcons v1 Solid230Font Awesome 5 Solid1001Font Awesome 5 Regular151Font Awesome 5 Brands457Font Awesome 4678Fluent UI MDL21735Fontisto615IcoMoon Free491Subway Icon Set306Open Iconic223Icons8 Windows 8 Icons200Simple line icons189Elegant100Elusive Icons304Vaadin Icons636Grommet Icons614WebHostingHub Glyphs2125SmartIcons Glyph799Material Design Iconic Font777Ligature Symbols348BPMN112Flat UI Icons100Vesper Icons159TopCoat Icons89Icalicons84Web Symbols Liga85Fontelico34PrestaShop Icons479Feather Icons286Mono Icons180Pepicons428Google Material Iconsicv1.0.32Google Material Icons 是一個(gè)由 Material Design Authors 設(shè)計(jì)并開源的圖標(biāo)庫，收錄了 10955 個(gè)高品質(zhì)的矢量圖標(biāo)，并基于 Apache 2.0 開源協(xié)議，可供任何人免費(fèi)下載和使用10955 個(gè)圖標(biāo)作者：Material Design Authors開源協(xié)議：Apache 2.0類型：全部動(dòng)作提醒音視頻通信內(nèi)容設(shè)備編輯器文件硬件家圖像地圖數(shù)學(xué)導(dǎo)航通知地點(diǎn)搜索購物社交切換風(fēng)格：全部基線輪廓圓角銳利雙色填充圓形徽章線性斷裂方形粗體填充線性輪廓細(xì)體圓角搜索：搜此庫搜全站新標(biāo)簽中搜全站搜索技巧多個(gè)中文關(guān)鍵詞之間可加空格，比如：右箭頭，當(dāng)然你不加空格直接搜：右箭頭，也完全沒問題，但加了空格能搜到更多結(jié)果。如果中文搜索結(jié)果不滿意，也可使用英文搜索。圖標(biāo)大?。?4Yes I can!陷入自我懷疑時(shí)，記得握個(gè)拳，心中默念：Yes I can! SearchEmoji 類似于 Yesicon 的 Emoji 搜索引擎0baseline-10k1baseline-10mp2baseline-11mp3baseline-1234baseline-12mp5baseline-13mp6baseline-14mp7baseline-15mp8baseline-16mp9baseline-17mp100baseline-18-up-rating101baseline-18mp102baseline-19mp103baseline-1k104baseline-1k-plus105baseline-1x-mobiledata106baseline-20mp107baseline-21mp108baseline-22mp109baseline-23mp200baseline-24mp201baseline-2k202baseline-2k-plus203baseline-2mp204baseline-30fps205baseline-30fps-select206baseline-360207baseline-3d-rotation208baseline-3g-mobiledata209baseline-3k300baseline-3k-plus301baseline-3mp302baseline-3p303baseline-4g-mobiledata304baseline-4g-plus-mobiledata305baseline-4k306baseline-4k-plus307baseline-4mp308baseline-5g309baseline-5k400baseline-5k-plus401baseline-5mp402baseline-6-ft-apart403baseline-60fps404baseline-60fps-select405baseline-6k406baseline-6k-plus407baseline-6mp408baseline-7k409baseline-7k-plus500baseline-7mp501baseline-8k502baseline-8k-plus503baseline-8mp504baseline-9k505baseline-9k-plus506baseline-9mp507baseline-abc508baseline-ac-unit509baseline-access-alarm600baseline-access-alarms601baseline-access-time602baseline-access-time-filled603baseline-accessibility604baseline-accessibility-new605baseline-accessible606baseline-accessible-forward607baseline-account-balance608baseline-account-balance-wallet609baseline-account-box610baseline-account-circle611baseline-account-tree612baseline-ad-units613baseline-adb614baseline-add700baseline-add-a-photo701baseline-add-alarm702baseline-add-alert703baseline-add-box704baseline-add-business705baseline-add-card706baseline-add-chart707baseline-add-circle708baseline-add-circle-outline709baseline-add-comment710baseline-add-home711baseline-add-home-work712baseline-add-ic-call713baseline-add-link714baseline-add-location800baseline-add-location-alt801baseline-add-moderator802baseline-add-photo-alternate803baseline-add-reaction804baseline-add-road805baseline-add-shopping-cart806baseline-add-task807baseline-add-to-drive808baseline-add-to-home-screen809baseline-add-to-photos810baseline-add-to-queue811baseline-addchart812baseline-adf-scanner813baseline-adjust814baseline-admin-panel-settings900baseline-adobe901baseline-ads-click902baseline-agriculture903baseline-air904baseline-airline-seat-flat905baseline-airline-seat-flat-angled906baseline-airline-seat-individual-suite907baseline-airline-seat-legroom-extra908baseline-airline-seat-legroom-normal909baseline-airline-seat-legroom-reduced910baseline-airline-seat-recline-extra911baseline-airline-seat-recline-normal912baseline-airline-stops913baseline-airlines914baseline-airplane-ticket1000baseline-airplanemode-active1001baseline-airplanemode-inactive1002baseline-airplay1003baseline-airport-shuttle1004baseline-alarm1005baseline-alarm-add1006baseline-alarm-off1007baseline-alarm-on1008baseline-album1009baseline-align-horizontal-center1010baseline-align-horizontal-left1011baseline-align-horizontal-right1012baseline-align-vertical-bottom1013baseline-align-vertical-center1014baseline-align-vertical-top1100baseline-all-inbox1101baseline-all-inclusive1102baseline-all-out1103baseline-alt-route1104baseline-alternate-email1105baseline-amp-stories1106baseline-analytics1107baseline-anchor1108baseline-android1109baseline-animation1110baseline-announcement1111baseline-aod1112baseline-apartment1113baseline-api1114baseline-app-blocking1200baseline-app-registration1201baseline-app-settings-alt1202baseline-app-shortcut1203baseline-apple1204baseline-approval1205baseline-apps1206baseline-apps-outage1207baseline-architecture1208baseline-archive1209baseline-area-chart1210baseline-arrow-back1211baseline-arrow-back-ios1212baseline-arrow-back-ios-new1213baseline-arrow-circle-down1214baseline-arrow-circle-left1300baseline-arrow-circle-right1301baseline-arrow-circle-up1302baseline-arrow-downward1303baseline-arrow-drop-down1304baseline-arrow-drop-down-circle1305baseline-arrow-drop-up1306baseline-arrow-forward1307baseline-arrow-forward-ios1308baseline-arrow-left1309baseline-arrow-outward1310baseline-arrow-right1311baseline-arrow-right-alt1312baseline-arrow-upward1313baseline-art-track1314baseline-article1400baseline-aspect-ratio1401baseline-assessment1402baseline-assignment1403baseline-assignment-ind1404baseline-assignment-late1405baseline-assignment-return1406baseline-assignment-returned1407baseline-assignment-turned-in1408baseline-assist-walker1409baseline-assistant1410baseline-assistant-direction1411baseline-assistant-photo1412baseline-assured-workload1413baseline-atm1414baseline-attach-email1500baseline-attach-file1501baseline-attach-money1502baseline-attachment1503baseline-attractions1504baseline-attribution下一頁加載更多 Copyright ? 2024 Powered by Iconify 數(shù)據(jù)源于 @iconify/json 2.2.1880

有哪些優(yōu)秀的 icon 的免費(fèi)下載網(wǎng)站？ - 知乎

有哪些優(yōu)秀的 icon 的免費(fèi)下載網(wǎng)站？ - 知乎首頁知乎知學(xué)堂發(fā)現(xiàn)等你來答?切換模式登錄/注冊生活新媒體網(wǎng)站網(wǎng)站推薦網(wǎng)頁有哪些優(yōu)秀的 icon 的免費(fèi)下載網(wǎng)站？關(guān)注者2,653被瀏覽4,250,576關(guān)注問題?寫回答?邀請回答?好問題 16?添加評論?分享?61 個(gè)回答默認(rèn)排序fonter感覺工程師 ...? 關(guān)注鼎鼎大名的圖標(biāo)工廠：http://iconfactory.com/freeware 不錯(cuò)的獨(dú)眼圖標(biāo)搜索：http://www.iconfinder.com/ 極限主題的圖標(biāo)區(qū)域：http://bbs.themex.net/showthread.php?t=16839403 The Noun Project：http://thenounproject.com/ deviantart的圖標(biāo)區(qū)：http://browse.deviantart.com/customization/icons/os/mac/ 還有很多不列舉了......編輯于 2011-09-21 20:46?贊同 340??11 條評論?分享?收藏?喜歡收起?知乎用戶強(qiáng)烈推薦 icon8 ，裝上icon8 Free App，畫原型再也不用到處找icon了。Free download of 4220+ icons in Windows 8, iOS 7 and Android style編輯于 2014-05-25 01:13?贊同 44??11 條評論?分享?收藏?喜歡

Remix Icon 圖標(biāo)庫 - Yesicon

簡體中文English簡體中文Espa?ol正體中文Deutsch日本語Fran?ais???Português反饋及建議切換到日間模式Material Symbols12321Material Symbols Light12379Google Material Icons10955Material Design Icons7447Phosphor7488Solar7401Tabler Icons5200MingCute Icon2806Remix Icon2860Bootstrap Icons2050Carbon2078IconaMoon1781Iconoir1551IonIcons1338Lucide1435Unicons1206TDesign Icons1203Teenyicons1200Clarity1103BoxIcons814BoxIcons Solid665Majesticons760Ant Design Icons830css.gg704Gravity UI Icons663Octicons604Memory Icons651CoreUI Free554Flowbite Icons539Myna UI Icons1089Basil493Pixelarticons480Akar Icons453coolicons442System UIcons430Typicons336Radix Icons318Zondicons297Element Plus293Circum Icons288Material Design Light284Feather Icon255EOS Icons253Bitcoin Icons250Charm Icons261Prime Icons260Humbleicons246uiw icons214Unicons Monochrome296Unicons Thin Line214Unicons Solid189Maki212Gridicons207Mono Icons180Quill Icons140Gala Icons51Lets Icons1528Framework7 Icons1253Mage Icons1042Fluent UI System Icons15647IconPark Outline2658IconPark Solid1947IconPark TwoTone1944IconPark2658VSCode Icons1255Jam Icons940HeroIcons1176Codicons455Gitlab SVGs375Pepicons Pop!1275Pepicons Print1275Pepicons Pencil1275Bytesize Icons101Evil Icons70Streamline2000Guidance360Font Awesome Solid1390Font Awesome Regular163OOUI356Nimbus140OpenSearch UI386FormKit Icons142Material Line Icons601Meteocons450SVG Spinners46OpenMoji4129Twitter Emoji3668Noto Emoji3555Fluent Emoji2961Fluent Emoji Flat2980Fluent Emoji High Contrast1545Noto Emoji (v1)2162Emoji One (Colored)1834Emoji One (Monotone)1403Emoji One (v1)1262Firefox OS Emoji1034Streamline Emojis787BoxIcons Logo155SVG Logos1812Simple Icons3047CoreUI Brands830Font Awesome Brands484Nonicons67Arcticons8749Custom Brand Icons1106File Icons930Devicon764Devicon Plain575Skill Icons397Brandico45Entypo+ Social76Cryptocurrency Icons483Cryptocurrency Color Icons483Flag Icons538Circle Flags428Flagpack255CoreUI Flags199Font-GIS358Map Icons167GeoGlyphs30Game Icons4046FontAudio155Academicons157Weather Icons219Health Icons1917Medical Icons144Covid Icons142Line Awesome1544Eva Icons490Dashicons342Flat Color Icons329Entypo+321Foundation283Raphael266Icons8 Windows 10 Icons234Innowatio Font105HeroIcons v1 Outline230HeroIcons v1 Solid230Font Awesome 5 Solid1001Font Awesome 5 Regular151Font Awesome 5 Brands457Font Awesome 4678Fluent UI MDL21735Fontisto615IcoMoon Free491Subway Icon Set306Open Iconic223Icons8 Windows 8 Icons200Simple line icons189Elegant100Elusive Icons304Vaadin Icons636Grommet Icons614WebHostingHub Glyphs2125SmartIcons Glyph799Material Design Iconic Font777Ligature Symbols348BPMN112Flat UI Icons100Vesper Icons159TopCoat Icons89Icalicons84Web Symbols Liga85Fontelico34PrestaShop Icons479Feather Icons286Mono Icons180Pepicons428Remix Iconriv4.2.0Remix Icon 是一個(gè)由 Remix Design 設(shè)計(jì)并開源的圖標(biāo)庫，收錄了 2860 個(gè)高品質(zhì)的矢量圖標(biāo)，并基于 Apache 2.0 開源協(xié)議，可供任何人免費(fèi)下載和使用2860 個(gè)圖標(biāo)作者：Remix Design開源協(xié)議：Apache 2.0類型：全部箭頭建筑物商業(yè)通信設(shè)計(jì)發(fā)展設(shè)備文件編輯器金融食品健康與醫(yī)療標(biāo)志地圖媒體其他系統(tǒng)用戶和人臉天氣風(fēng)格：全部填充線性圓形粗體徽章圓角方形細(xì)體搜索：搜此庫搜全站新標(biāo)簽中搜全站搜索技巧多個(gè)中文關(guān)鍵詞之間可加空格，比如：右箭頭，當(dāng)然你不加空格直接搜：右箭頭，也完全沒問題，但加了空格能搜到更多結(jié)果。如果中文搜索結(jié)果不滿意，也可使用英文搜索。圖標(biāo)大?。?4Yes I can!陷入自我懷疑時(shí)，記得握個(gè)拳，心中默念：Yes I can! SearchEmoji 類似于 Yesicon 的 Emoji 搜索引擎024-hours-fill124-hours-line24k-fill34k-line4a-b5account-box-fill6account-box-line7account-circle-fill8account-circle-line9account-pin-box-fill100account-pin-box-line101account-pin-circle-fill102account-pin-circle-line103add-box-fill104add-box-line105add-circle-fill106add-circle-line107add-fill108add-large-fill109add-large-line200add-line201admin-fill202admin-line203advertisement-fill204advertisement-line205aed-electrodes-fill206aed-electrodes-line207aed-fill208aed-line209ai-generate300airplay-fill301airplay-line302alarm-fill303alarm-line304alarm-warning-fill305alarm-warning-line306album-fill307album-line308alert-fill309alert-line400alibaba-cloud-fill401alibaba-cloud-line402aliens-fill403aliens-line404align-bottom405align-center406align-item-bottom-fill407align-item-bottom-line408align-item-horizontal-center-fill409align-item-horizontal-center-line500align-item-left-fill501align-item-left-line502align-item-right-fill503align-item-right-line504align-item-top-fill505align-item-top-line506align-item-vertical-center-fill507align-item-vertical-center-line508align-justify509align-left600align-right601align-top602align-vertically603alipay-fill604alipay-line605amazon-fill606amazon-line607anchor-fill608anchor-line609ancient-gate-fill610ancient-gate-line611ancient-pavilion-fill612ancient-pavilion-line613android-fill614android-line700angularjs-fill701angularjs-line702anticlockwise-2-fill703anticlockwise-2-line704anticlockwise-fill705anticlockwise-line706app-store-fill707app-store-line708apple-fill709apple-line710apps-2-add-fill711apps-2-add-line712apps-2-fill713apps-2-line714apps-fill800apps-line801archive-2-fill802archive-2-line803archive-drawer-fill804archive-drawer-line805archive-fill806archive-line807archive-stack-fill808archive-stack-line809armchair-fill810armchair-line811arrow-down-circle-fill812arrow-down-circle-fill-2813arrow-down-circle-line814arrow-down-double-fill900arrow-down-double-line901arrow-down-fill902arrow-down-line903arrow-down-s-fill904arrow-down-s-line905arrow-down-wide-fill906arrow-down-wide-line907arrow-drop-down-fill908arrow-drop-down-line909arrow-drop-left-fill910arrow-drop-left-line911arrow-drop-right-fill912arrow-drop-right-line913arrow-drop-up-fill914arrow-drop-up-line1000arrow-go-back-fill1001arrow-go-back-line1002arrow-go-forward-fill1003arrow-go-forward-line1004arrow-left-circle-fill1005arrow-left-circle-line1006arrow-left-double-fill1007arrow-left-double-line1008arrow-left-down-fill1009arrow-left-down-line1010arrow-left-fill1011arrow-left-line1012arrow-left-right-fill1013arrow-left-right-line1014arrow-left-s-fill1100arrow-left-s-line1101arrow-left-up-fill1102arrow-left-up-line1103arrow-left-wide-fill1104arrow-left-wide-line1105arrow-right-circle-fill1106arrow-right-circle-line1107arrow-right-double-fill1108arrow-right-double-line1109arrow-right-down-fill1110arrow-right-down-line1111arrow-right-fill1112arrow-right-line1113arrow-right-s-fill1114arrow-right-s-line1200arrow-right-up-fill1201arrow-right-up-line1202arrow-right-wide-fill1203arrow-right-wide-line1204arrow-turn-back-fill1205arrow-turn-back-line1206arrow-turn-forward-fill1207arrow-turn-forward-line1208arrow-up-circle-fill1209arrow-up-circle-line1210arrow-up-double-fill1211arrow-up-double-line1212arrow-up-down-fill1213arrow-up-down-line1214arrow-up-fill1300arrow-up-line1301arrow-up-s-fill1302arrow-up-s-line1303arrow-up-wide-fill1304arrow-up-wide-line1305artboard-2-fill1306artboard-2-line1307artboard-fill1308artboard-line1309article-fill1310article-line1311aspect-ratio-fill1312aspect-ratio-line1313asterisk1314at-fill1400at-line1401attachment-21402attachment-fill1403attachment-line1404auction-fill1405auction-line1406award-fill1407award-line1408baidu-fill1409baidu-line1410ball-pen-fill1411ball-pen-line1412bank-card-2-fill1413bank-card-2-line1414bank-card-fill1500bank-card-line1501bank-fill1502bank-line1503bar-chart-2-fill1504bar-chart-2-line下一頁加載更多 Copyright ? 2024 Powered by Iconify 數(shù)據(jù)源于 @iconify/json 2.2.1880

少妇伦子伦精品无吗,国产在线精品一区在线观看,精品久久久久久无码专区不卡,99久久免费国产精精品