萬字長文|終極圖標設(shè)計指南——分享篇

0 評論 2647 瀏覽 26 收藏 7 分鐘

編輯導(dǎo)語:圖標是用戶頁面不可缺少的元素,本篇文章作者分享了國內(nèi)外比較優(yōu)質(zhì)的圖標網(wǎng)站、設(shè)計師以及團隊分享,有需要的小伙伴一起來看看吧,希望對你有幫助。

一、圖標網(wǎng)站分享

設(shè)計圖標前通常會找很多參考作為設(shè)計靈感,下面推薦國內(nèi)外比較優(yōu)質(zhì)的圖標網(wǎng)站。給大家做參考。

1. https://remixicon.com/

套面向設(shè)計師和開發(fā)者的開源圖標庫。質(zhì)量很高,風(fēng)格中性大氣,因此適用于很多風(fēng)格的項目,圖標以24×24網(wǎng)格為基準,分為“線性圖標”和“面型圖標”兩種風(fēng)格。支持全部打包下載,也支持單獨下載。

2. https://feathericons.com/

簡單漂亮的開源圖標,支持在線修改顏色、屬性,功能強大。

3. https://akveo.github.io/eva-icons/#/

設(shè)計風(fēng)格干凈、簡約,網(wǎng)站提供這些圖案的各種預(yù)覽效果(縮放、抖動、翻轉(zhuǎn))。Eva Icons 有兩種不同樣式,包括只有外框線條的 Outline 或者填滿色彩的 Fill。

4. https://heroicons.dev/

Heroicons是由Tailwind CSS的創(chuàng)建者構(gòu)建的另一個很棒的開源圖標庫。它具有超過165個具有填充和輪廓樣式的獨立圖標,但每個元素也提供深色和白色版本,圖標的外觀非常優(yōu)質(zhì)且制作精良。

5. https://www.iconfont.cn/

iconfont-阿里巴巴體驗團隊打造,設(shè)計和前端開發(fā)的便捷工具。功能很強大且圖標內(nèi)容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉(zhuǎn)換等功能。

6. http://iconpark.oceanengine.com/official

IconPark 是字節(jié)跳動公司內(nèi)部產(chǎn)品體系使用的官方圖標庫,可以實現(xiàn)根據(jù)單一 SVG 源文件變換出多種主題,具備豐富的分類、更輕量的代碼和更靈活的使用場景。

提供超過 2000+ 預(yù)設(shè)圖標、32 種圖標分類;支持 4 種主題和在線換膚:線性、填充、雙色、四色。

網(wǎng)站提供多種便捷操作:復(fù)制 SVG code、復(fù)制 React 組件、復(fù)制 Vue 組件、下載 PNG、下載 SVG,無論是設(shè)計師還是開發(fā)者,使用起來都非常方便;針對前端開發(fā)者,還提供多種 NPM 包下載。

7. https://ikonate.com/

Ikonate是一組設(shè)計精美且經(jīng)過精心優(yōu)化的圖標庫,支持自定義調(diào)整邊框、圓角等樣式顏色。

二、圖標設(shè)計師/團隊分享

國內(nèi)外有非常多的團隊在dribbble上發(fā)布圖標,也可以成為我們工作中的參考。當然也可以作為日常賞析。

Dribbble:Vitality Studio;

https://dribbble.com/Vitality_Studio;

Vitality Studio團隊作品都是3D立體質(zhì)感的設(shè)計。

Dribbble:MVBen;

https://dribbble.com/MVBen;

質(zhì)感風(fēng),圖標設(shè)計細節(jié)及風(fēng)格都是很厲害的設(shè)計師。

Dribbble:Nucleo;

https://dribbble.com/nucleo;

專門做線性圖標的團隊,上傳的作品全是一整套的線形圖標!參考價值非常高。

Dribbble:Yoga Perdana;

https://dribbble.com/yoga;

設(shè)計師發(fā)布的圖標絕大部分是層疊式的啟動圖標設(shè)計風(fēng)格。

三、小結(jié)

整個圖標設(shè)計分為三篇來講述的。

《理論篇》主要講述圖標設(shè)計的概念以及設(shè)計原則等理論內(nèi)容;

《工作篇》主要講述工作中圖標設(shè)計過程以及圖標落地;

《分享篇》主要分享圖標設(shè)計的工具、圖標網(wǎng)站、圖標設(shè)計團隊或者設(shè)計師。

第三篇內(nèi)容就到這里結(jié)束了。

 

本文由 @卡洛設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash ,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!