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

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

推薦7個非常實用的icon設(shè)計網(wǎng)站 - 知乎

推薦7個非常實用的icon設(shè)計網(wǎng)站 - 知乎首發(fā)于邵飛在記錄切換模式寫文章登錄/注冊推薦7個非常實用的icon設(shè)計網(wǎng)站邵飛今天給大家推薦幾個icon圖標(biāo)設(shè)計的網(wǎng)站，可以在做設(shè)計的時候激發(fā)一下靈感，升級一下自己的設(shè)計庫。iconfindericonfinder圖標(biāo)收錄超過210萬個，包含PNG，SVG，CSH，等格式，部分圖標(biāo)收費(fèi)，總體來說已經(jīng)是非常良心了。iconfont國內(nèi)最大的圖標(biāo)設(shè)計網(wǎng)站了，是由阿里巴巴創(chuàng)建的圖標(biāo)矢量庫，由于開放上傳，所以部分圖標(biāo)質(zhì)量較低，可以參考。iconmonstriconmonstr的圖標(biāo)風(fēng)格簡單實用，整體為黑白配色，圖標(biāo)更加偏向于功能性，適合做參考。icons8收錄62800個圖標(biāo)設(shè)計，icons8的特點(diǎn)在于，圖標(biāo)在線可交互，可以通過自己的喜好在網(wǎng)站上，直接可以調(diào)試圖標(biāo)的顏色和風(fēng)格，再來選擇是否下載，非常好用。Noun Project除了豐富的圖標(biāo)以外，還可以幫你收集收集整理精美的圖形插畫，功能強(qiáng)大，方便使用，下載需要注冊。Font Awesomeweb中比較常用的圖標(biāo)網(wǎng)站，除了可以下載圖標(biāo)源文件以外，還可以引入css文件。Androidicons免費(fèi)開源的圖標(biāo)設(shè)計網(wǎng)站，圖標(biāo)質(zhì)量非常好，可用性極高，有很多有意思的圖標(biāo)設(shè)計可供參考。獲取更多設(shè)計內(nèi)容請關(guān)注微信訂閱號：如履薄冰發(fā)布于 2018-01-03 10:22設(shè)計圖標(biāo)設(shè)計圖標(biāo)?贊同 22??添加評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄邵飛在記錄設(shè)計是一種多維

10個免費(fèi)UI設(shè)計圖標(biāo)資源網(wǎng)站分享 - 知乎

10個免費(fèi)UI設(shè)計圖標(biāo)資源網(wǎng)站分享 - 知乎首發(fā)于設(shè)計資源分享切換模式寫文章登錄/注冊10個免費(fèi)UI設(shè)計圖標(biāo)資源網(wǎng)站分享林林愛設(shè)計Iconfonthttps://www.iconfont.cn/Iconfont是中國最大的矢量圖標(biāo)網(wǎng)站，800多萬矢量圖標(biāo)以及創(chuàng)業(yè)插畫素材，圖標(biāo)可以按顏色風(fēng)格來進(jìn)一步篩選，選中后還能直接更改顏色下載還支持svg、ai和png。IconDeposithttps://www.icondeposit.com/IconDeposit圖標(biāo)庫一個綜合的設(shè)計圖標(biāo)庫，收錄了大量的icon作品，還包含一些經(jīng)典的設(shè)計教程和PS源代碼。除了免費(fèi)的APP圖標(biāo)設(shè)計素材，還有圖標(biāo)集，UI / UX設(shè)計，插畫/矢量圖形，CSS，CSS3，jQuery，PS圖象處理軟件教程。Iconstorehttps://iconstore.co/Iconstore一個免費(fèi)圖標(biāo)素材的網(wǎng)站,由超一流設(shè)計師提供的優(yōu)質(zhì) icon 圖標(biāo),可供網(wǎng)頁設(shè)計、UI 設(shè)計師自由下載使用以及商業(yè)用途。unDrawhttps://undraw.co/unDraw可以在任何商業(yè)或個人項目中使用插圖圖標(biāo),而無需注明出處。IconFinderhttps://www.iconfinder.com/?ref=iamxkIconFinder一個提供超過四百多萬個免費(fèi) icon 圖標(biāo)下載使用,是世界上前幾大免費(fèi)圖標(biāo)搜索引擎之一,注意部分是收費(fèi)的。Icons8https://icons8.cn/icon8免費(fèi)的高品質(zhì)的矢量圖標(biāo)素材網(wǎng)站。iOS、Windows和安卓圖標(biāo)一應(yīng)俱全。圖標(biāo)風(fēng)格統(tǒng)一，矢量圖可直接編輯，快速生成任何格式、大小和顏色的圖標(biāo)。分類齊全，方便用戶迅速篩選出不同設(shè)計風(fēng)格的圖標(biāo)。此外還提供API接口，方便開發(fā)人員快速對接。Easyiconhttps://www.easyicon.net/EasyiconEasyicon在國內(nèi)是非常不錯的搜索/下載圖標(biāo)網(wǎng)站，收錄了60多萬的圖標(biāo)資源可免費(fèi)下載為了滿足更多用戶的需求，網(wǎng)站提供了多種語言搜索。Flat Iconhttps://www.flaticon.com/Flat Icon是一個非常龐大的圖標(biāo)資源集合網(wǎng)站，數(shù)百萬的圖標(biāo)資源免費(fèi)下載，滿足你多方面的需求。IconsDBhttps://www.iconsdb.com/iconsDB圖標(biāo)庫一個超贊的免費(fèi)圖標(biāo)庫，目前擁有4000多個圖標(biāo)。支持用戶自定義顏色和尺寸下載自己想要的圖標(biāo)，而且大部分圖標(biāo)支持個人和商業(yè)使用。IconPnghttp://www.iconpng.com/IconsPng圖標(biāo)庫目前收錄的圖標(biāo)系列，可免費(fèi)下載使用，里面已對圖標(biāo)做好分類，可快速找到自己想要的設(shè)計圖標(biāo)。關(guān)注公眾號“林林愛設(shè)計”編輯于 2023-02-28 15:13?IP 屬地福建UI視覺設(shè)計用戶界面設(shè)計圖標(biāo)設(shè)計?贊同 9??添加評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄設(shè)計資源分享分享設(shè)計資訊、教程、軟件、素材等各

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

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

30 個免費(fèi) icon 下載網(wǎng)站推薦：圖標(biāo)、SVG、矢量圖等使用指南 | Eagle 博客

免費(fèi) icon 下載網(wǎng)站推薦：圖標(biāo)、SVG、矢量圖等使用指南 | Eagle 博客首頁瀏覽器擴(kuò)展用戶故事資源社區(qū)博客教程視頻教程使用技巧所有功能幫助中心立即購買目錄Eagle 博客設(shè)計資源30 個免費(fèi) icon 下載網(wǎng)站推薦：圖標(biāo)、SVG、矢量圖等使用指南圖標(biāo)無版權(quán)免費(fèi)素材羅杰摩爾?2021-09-01人的想像力無遠(yuǎn)弗屆，就如我們提供你的免費(fèi) Icon 網(wǎng)站使用也幾乎沒有限制。不管你正在尋找免費(fèi)下載圖標(biāo)的網(wǎng)站，還是打算下載特別的 Icon 用于個人作品或商業(yè)用途，這篇帖子通通都可以滿足你的需求！

本篇帖子特別提供給需要使用各種圖標(biāo)及 Icon 來美化自己的網(wǎng)頁風(fēng)格、用戶體驗及UI界面的設(shè)計師，內(nèi)文包含了 30 個免費(fèi)圖標(biāo)網(wǎng)站下載鏈接和使用說明。

你可以在以下提供的網(wǎng)頁找到：

使用于 Android 或 iOS 界面的元素

不同皮膚的圖標(biāo)及 icon

不同社區(qū)網(wǎng)站的功能按鈕

可用于商業(yè)用途的授權(quán)圖標(biāo)（請在下載前再次檢查授權(quán)說明喔?。?/p>

可用于個人作品的免費(fèi) icon

30 個免費(fèi) Icon 網(wǎng)站推薦清單Eagle App?- 你的圖標(biāo)及素材整理工具在搜索更多免費(fèi)圖標(biāo)之前，先來認(rèn)識 Eagle！?Eagle?是一款專門給設(shè)計師使用的素材整理工具，有了它，在找尋靈感圖標(biāo)時，只需單擊即可批量保存網(wǎng)絡(luò)上你喜歡的所有圖標(biāo)和圖像，然后輕易使用篩選器、標(biāo)簽、甚至顏色輕松整理和瀏覽！?它支持超過 81 種格式，包括圖標(biāo)、圖像、3d、視頻、字體、文件等等！ Eagle 有許多出色的 UI，特別有助于設(shè)計師進(jìn)行不同專案工作，也可以很輕松與 Figma、photoshop、ai 一起使用，提升設(shè)計生產(chǎn)力！ ?官網(wǎng):?cn.eagle.cool1. ICONFINDERICONFINDER 是一個在設(shè)計圈中廣為人知的圖標(biāo)搜索網(wǎng)站，它界面設(shè)計清晰且簡潔，只要在網(wǎng)站中輸入關(guān)鍵字即可找到需要的不同顏色圖標(biāo)！使用說明：ICONFINDER 包含免費(fèi)及付費(fèi)的 icon，如果想要使用免費(fèi)商用授權(quán)的圖標(biāo)，請在搜索頁面左邊的篩選器中選擇Free，即可使用。網(wǎng)站：?https://www.iconfinder.com/2. flaticonFlaticon 是一個與 FreePik 同一家公司的網(wǎng)站，專門為設(shè)計師找尋免費(fèi)素材。Flaticon 最棒的特點(diǎn)是可以使用網(wǎng)站內(nèi)的收尋引擎找到「免費(fèi)且商業(yè)可用」的圖標(biāo)。此外，在這里找到的 Icon 及圖標(biāo)都包含了矢量圖形文件和常見的圖像格式，方便設(shè)計師在下載后直接使用。使用說明：使用時需要標(biāo)注出處，即使用于個人作品也需要。若要用于商業(yè)用途則需要購買商用授權(quán)。網(wǎng)站： https://www.flaticon.com/3. FIND ICONSFindIcons 是一個圖標(biāo)搜索網(wǎng)站，它們擁有世界上最大的免費(fèi)圖標(biāo)數(shù)據(jù)庫，網(wǎng)站內(nèi)有篩選器和推薦功能，幫助你在做設(shè)計作品時更快速找到需要的免費(fèi)圖標(biāo)。雖然，它的搜索引擎看起來有點(diǎn)簡易且傳統(tǒng)，但相信一定有需要這種設(shè)計風(fēng)格的設(shè)計師們。使用說明：每個圖標(biāo)上都列出了不同授權(quán)的使用說明，請在下載前檢查用途規(guī)范。網(wǎng)站： https://findicons.com/4. IconArchiveIconArchive也是一個巨量的素材搜索引擎，它不僅包含常見的界面按鈕圖標(biāo)，還有紋理材質(zhì)風(fēng)格的圖標(biāo)及各種皮膚的漫畫 icon。IconArchive 網(wǎng)站的特別之處在于它的搜索結(jié)果是以顏色排列的，你可以使用贊同及不贊同的投票功能，幫助改進(jìn)搜索結(jié)果。如果你突然沒有靈感，也可以選擇最熱門、最多人預(yù)覽的 Icon 款式找到你喜愛的圖標(biāo)。 使用說明：大部分圖標(biāo)都是采用 CC 授權(quán)方式，但每個圖標(biāo)稍有不同。下載前請在各別的圖標(biāo)頁面中查找。網(wǎng)站： https://iconarchive.com/5. GraphicBurgerGraphicBurger 是一個免費(fèi)提供給設(shè)計師們使用的設(shè)計資源網(wǎng)站。在這里你甚至可以找到每個 Icon 專屬的 PSD 文件來修改圖標(biāo)，變成你想要的樣子。如果你正在尋找可愛特別的圖標(biāo)，請不要錯過 GraphicBurger！使用說明：

GraphicBurger 上所有的資源都可以隨意下載，包括logo模型、產(chǎn)品模型、文本效果、圖標(biāo)、用戶界面、插圖、背景圖像等，均可在個人和商業(yè)項目中免費(fèi)使用。

使用時無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會很感激你。

網(wǎng)站： https://graphicburger.com/6. Premium Pixel如果你真的不知道要使用什么圖標(biāo)的話，Premium Pixel 提供了專家精挑細(xì)選的免費(fèi)圖標(biāo)，你可以在這里搜索各種免費(fèi)素材和界面圖標(biāo)的懶人包。使用說明：所有資源都是免費(fèi)授權(quán)使用，幾乎沒有限制。網(wǎng)站： https://www.premiumpixels.com/7. Freebiesbug這個網(wǎng)站上的資源是由許多設(shè)計師共同制作和發(fā)布的一系列 PSD 圖標(biāo)。就像他的網(wǎng)站名稱一樣，它提供了大量免費(fèi)在 Photoshop 上使用的 Icon 素材。使用說明：可以在個人作品中免費(fèi)使用這些圖標(biāo)。若用于商業(yè)用途，請在使用前再次檢查授權(quán)，因為每個圖標(biāo)的作者要求都不太一樣。網(wǎng)站： https://freebiesbug.com/psd-freebies/icons/8. IcoMoon app想要制作自己的圖標(biāo)嗎？那你應(yīng)該會喜歡 IcoMoon！IcoMoon 不僅可以找尋想要的圖標(biāo)，還可以建立或合并你自己的 Icon 樣式，最后生成多種文件格式直接使用。使用說明：

每個圖標(biāo)都有一個授權(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 格式。

網(wǎng)站： https://icomoon.io/app/9. Squid Ink想找特別又可愛的圖標(biāo)下載嗎？ Squid Ink 上的圖標(biāo)都是親手畫的，總共包含了 2000 個圖標(biāo)， 17 個類別，并提供了 5 種不同的下載格式，允許任意更改 Icon 顏色或圖層樣式、移動和重新調(diào)整元素和大小。使用說明：可以免費(fèi)選擇 50 個喜愛的 Icon 在個人或商用作品中，第 51 個開始需要付費(fèi)。網(wǎng)站： https://thesquid.ink/flat-icons/10. Freepik相信喜愛免費(fèi)素材的你應(yīng)該對于 FreePik 不陌生，如果你還沒有聽說過它，那么現(xiàn)在也是時候了！ 這是一個一直都在更新的在線資源網(wǎng)站，提供的不僅僅是免費(fèi)圖標(biāo)或 Icon 。他們也提供大量的矢量圖像、插圖、照片和 PSD 設(shè)計文件可供免費(fèi)下載。使用說明：使用時需要注明出處。網(wǎng)站： https://www.freepik.com/

收集了很多 Icon 卻不知道怎么有效的整理他們嗎？ 試試你的專屬 Icon 管理神器 Eagle

11. iconstoreIconStore 是一個免費(fèi)的矢量 (SVG) 圖標(biāo)庫，由才華橫溢的設(shè)計師們一同建立，全部的文件都可下載用于商業(yè)用途。使用說明：你可以在個人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會很感激你。網(wǎng)站： https://iconstore.co/12. icon8icon8 網(wǎng)站最初是一個提供免費(fèi) Icon 資源的網(wǎng)站，但如果你也想找尋免費(fèi)的高畫質(zhì)圖像、矢量圖像和免費(fèi)音樂使用那就到這里！他們還擁有強(qiáng)大的圖標(biāo)編輯功能，可以讓你自由調(diào)整 Icon 的顏色、添加文本、背景、大小、位置、形狀…等功能。如果你需要將 Icon 嵌入到網(wǎng)站中，只需點(diǎn)擊「嵌入 HTML」按鈕，就會顯示各種嵌入方法！使用說明：

需要注明出處及原始鏈接，即可免費(fèi)使用帶 icon8 上面所有的圖標(biāo)，在個人或商業(yè)用途中。

請注意，不允許將原始圖標(biāo)文件轉(zhuǎn)售和發(fā)布給第三方人士。

網(wǎng)站： https://icons8.com/13. OxygennaOxygenna是一個小的創(chuàng)意設(shè)計公司，專門從事網(wǎng)頁設(shè)計及 App 開發(fā)。他們網(wǎng)站上有一個資源專區(qū)，專門提供給設(shè)計師免費(fèi)的資源，增加工作的效率。 你可以從網(wǎng)站中下載免費(fèi)的 Icon 資源，最棒的是提供你 Photoshop、Illustrator 和 PNG 文件格式，。使用說明：不管是在個人或商用作品中，都可以任意使用。網(wǎng)站：: https://www.oxygenna.com/14. 1001freedownloads1001FreeDownloads 是一個很著名的網(wǎng)站，直至今日他們每天都不斷的增加免費(fèi)可下載的內(nèi)容。它目前擁有數(shù)以千計的免費(fèi)矢量、照片、畫筆、漸變、PSD 和字體文件供大家免費(fèi)下載。 使用說明：可以在個人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，無需要注明出處及原始鏈接，但如果你愿意注明作者或出處，我們會很感激你。網(wǎng)站： https://www.1001freedownloads.com/15. iconshock在這里你可以找到各種不同樣式、大小、格式和皮膚的各種圖標(biāo)。 從 iOS 、Line Icon 到以食物為皮膚的圖標(biāo)皮膚通通都有。 所有圖標(biāo)在 Iconshock 上都可完全免費(fèi)供個人使用。小編最喜歡 iconshock 的一點(diǎn)是他們提供 3D 圖標(biāo)，他們的 3D 圖標(biāo)款式多樣且整潔，下載的出來的文件畫質(zhì)也很棒！使用說明：可以在個人作品中免費(fèi)使用網(wǎng)站： https://www.iconshock.com/free-icons/16. pngtreePngtree 是一個擁有數(shù)百萬個高畫質(zhì)的 png、矢量、模板和創(chuàng)意插圖的網(wǎng)站。 多年來，它為 3000 萬+ 設(shè)計師們和用戶提供了許多方便且適合商業(yè)用途的圖像內(nèi)容！想要一次瀏覽多種 Icon 的人可以參考這個網(wǎng)頁。使用說明：可以在個人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)，需要注明出處及原始鏈接。網(wǎng)站： https://pngtree.com/so/icon17. google fonts這里的所有 Icon 皆由 Google 免費(fèi)提供。 如果你正在開發(fā) Android App，或者你想看看大公司都怎么設(shè)計 Icon 界面，那么你可以用 Google 自家生產(chǎn)的 Icon 作為參考。Material Icons 有五種樣式和一系列不同的尺寸和大小可以下載。 使用說明：可免費(fèi)在個人或作品中使用。網(wǎng)站： https://fonts.google.com/icons?selected=Material+Icons18. steamline擁有 12 種不同風(fēng)格的皮膚，幫助你在 Streamline 中找到適合你工作項目的 icon。 網(wǎng)站上面擁有 100,000+ 個 Icon 、插圖和表情符號。 全部由 steamline 團(tuán)隊一一畫出，如果你想要在 Figma、Sketch 和 Adobe XD 上使用的話，可以下載他們自己開發(fā)的插件搭配使用，非常方便喔！使用說明：需要注明出處及原始鏈接。網(wǎng)站： https://streamlinehq.com/19. Fontawesome想要找尋可以把 Icon 變成 font 字型的網(wǎng)站嗎？Fontawesome 為你提供各種可縮放的矢量圖標(biāo)，

可以改變大小、顏色、陰影以及符合 CSS 的樣式。你也可以使用 style prefix 將 Font Awesome 提供的圖標(biāo)放置在任何你想要的位置。使用說明：每個圖標(biāo)的使用規(guī)范不同，請在下載前檢查用途規(guī)范。網(wǎng)站： https://fontawesome.com/20. Dribbble如果常常在設(shè)計圈的你對 Dribbble 一定也不陌生，他就如同設(shè)計界的 Facebook 一樣。 上面有來自世界各地的設(shè)計師在上面發(fā)布作品，包括各種圖形、動效、UI、Web 和插圖。 你可以使用關(guān)鍵字在 Dribbble 上發(fā)現(xiàn) 500 + 多個不同設(shè)計師提供的免費(fèi) icon，若遇到任何 Icon 使用上的問題也可以直接聯(lián)系設(shè)計師討教。使用說明：每位設(shè)計師的提供的 Icon 使用權(quán)限不一，請在頁面中仔細(xì)查看規(guī)范，或詢問設(shè)計師。網(wǎng)站： https://dribbble.com/tags/free_icons21. UXwingUXwing 是一個經(jīng)驗豐富的 Icon 設(shè)計師團(tuán)隊，專長制作矢量圖標(biāo)。他們幫助設(shè)計師和開發(fā)者畫出漂亮的移動端 app 圖標(biāo)、網(wǎng)站圖標(biāo)、Web 設(shè)計、產(chǎn)品設(shè)計…等其他創(chuàng)意作品，網(wǎng)頁上 Icon 支持矢量文件、透明背景的 PNG 和圖標(biāo)字體格式。 UXwing 上主要分成三大類別：實體、線條、顏色，以上再細(xì)分成 150 多個子類別，可幫助大家實時找到合適的 Icon 。使用說明：全部的 Icon 都可以做個人或商業(yè)用途，無需要注明出處及原始鏈接。網(wǎng)站： https://uxwing.com/22. iconfactoryIconfactory 的團(tuán)隊擁有了二十多年的設(shè)計及軟件開發(fā)經(jīng)驗，網(wǎng)站上的 Icon 可以供大家在個人作品中免費(fèi)使用，如果你有任何 Icon 使用上的問題都可以詢問他們。使用說明：免費(fèi) Icon 僅供個人作品使用，若需要作其他用途，請洽所有者。網(wǎng)站： https://freeware.iconfactory.com/icons23. thenounprojectThenounproject 是一個由 120 多個國家及地區(qū)的設(shè)計師組成的網(wǎng)站，他們致力將 Icon 變成世界上最通用的交流工具，希望可以跨越語言和文化的界限。 無論你是在尋找加密貨幣 icon、人工智能 Icon 、擁有 UI 元素 Icon，或是像 Beyoncé 等名人的 icon，你的特殊喜好在這里都能被滿足。使用說明：

使用權(quán)限依每個 Icon 有所不同，下載使用前請仔細(xì)閱讀頁面。

免費(fèi)使用需要注明出處及原始鏈接，若不想標(biāo)記出處可以參考網(wǎng)站內(nèi)的訂閱服務(wù)。

網(wǎng)站：https://thenounproject.com/icons/24. DeviantArtDeviantArt 是一個充滿活力的藝術(shù)家社區(qū)及論壇，上面有近 200,000 + 個免費(fèi) Icon 可供下載。 若你正在尋找動效風(fēng)格的 icon，到 DevianArt 一定可以找到！使用說明：每個 Icon 的使用規(guī)范不同，有些作者會要求你是 DeviantArt 社區(qū)上的成員才能下載，因此請在下載仔細(xì)前檢查。網(wǎng)站： https://www.deviantart.com/25. iconmonstriconmonstr 網(wǎng)站中集結(jié)了 316 個類別，共 4512+ 個免費(fèi)圖標(biāo)，在這里 Icon 只有黑與白。全部采用填充、粗體和細(xì)化設(shè)計。 每個 Icon 都有 SVG、EPS、PSD 和 PNG 格式可供你下載使用。SVG 格式也有嵌入的 code。 若想要更改 Icon 設(shè)計，可以選擇 PNG 格式直接在網(wǎng)站上更改圖像、大小、顏色、背景顏色等基本編輯。使用說明：可以在個人和商業(yè)作品中使用網(wǎng)站內(nèi)的所有圖標(biāo)。網(wǎng)站： https://iconmonstr.com/26. softiconSoftIcons.com 允許免費(fèi)下載 Icon 包供個人使用。 網(wǎng)頁上包含了 2,849 組，共 475,655 個 Icon 及圖像。網(wǎng)站自 2010 開始，每周增加了 9 組新 icon，從來不間斷。若是希望每周都可以發(fā)掘新的圖標(biāo)，這里會是你的好選擇。使用說明：所有 Icon 均可供個人作品使用。 若需將 Icon 作為商業(yè)目的使用，請閱讀欲下載的 Icon 頁面授權(quán)區(qū)。網(wǎng)站： https://www.softicons.com/27. fontelloFontello 是一種將矢量圖像快速打包成 webfonts 的工具。 你可以將其視為 Twitter Bootstrap 的圖像。若你想把 Icon 大量嵌入網(wǎng)站中，這里擁有你所需要的一切。Fontello 提供的 Icon 最大優(yōu)點(diǎn)是在高分辨率的螢?zāi)簧蠜]有像素化或模糊化的缺點(diǎn)，任何瀏覽器都支持。使用說明：使用權(quán)限依每個 Icon 有所不同，下載使用前請仔細(xì)閱讀頁面。網(wǎng)站： https://fontello.com/28. veryiconVeryIcom.com 是一個圖標(biāo)搜索引擎，它涵蓋了 1000 多個 Icon 包，共 20000 個高畫質(zhì)的 Web icon。 每個圖標(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é)議。網(wǎng)站： https://www.veryicon.com/29. BoxiconsBoxicons 是一個精心設(shè)計的開源圖標(biāo)網(wǎng)站，擁有 1500 多個簡單的圖標(biāo)。 如果不想要太復(fù)雜的圖標(biāo)，到 Boxicons 就對了。使用說明：Boxicons 是一個開源網(wǎng)站，使用的是創(chuàng)用 CC 授權(quán) 4.0，網(wǎng)站上的 Icon 均可以做個人或商業(yè)用途。網(wǎng)站：https://boxicons.com/30. FeatherFeather 上面的圖標(biāo)皆是開源免費(fèi)圖標(biāo)。每個圖標(biāo)都設(shè)計在 24x24 大小上，每一個 Icon 都強(qiáng)調(diào)簡單、一致和靈活。使用說明：全部的 Icon 都可以做個人或商業(yè)用途，需要注明出處及原始鏈接。網(wǎng)站：https://feathericons.com/結(jié)語這篇帖子中的 30 個網(wǎng)站提供了超過數(shù)百萬個 Icon 讓你免費(fèi)下載，在挑選合適的圖標(biāo)及 Icon 時，選擇正確的質(zhì)量跟大小也很重要，別忘了也適時的給提供免費(fèi)素材的作者一些鼓勵吧！如果你正在尋找一個工具來整理下載的所有 Icon 文件，那你一定要下載 Eagle！ Eagle 是一款功能強(qiáng)大的文件管理工具，專門為設(shè)計師整理素材而設(shè)計，不管你需要整理一大堆不同類型的圖標(biāo)文件，還是想要快速搜集 Icon 文件，Eagle 都能幫助你的設(shè)計工作流程更輕松、有效率！這篇文章對你有幫助嗎？分享給朋友

羅杰摩爾

社區(qū)經(jīng)理兼職設(shè)計師。在這里將紀(jì)錄：創(chuàng)意發(fā)想的過程、設(shè)計職場心得與觀點(diǎn)，深信有好的客戶服務(wù)才能帶領(lǐng)團(tuán)隊走得更長遠(yuǎn)。歡迎交流！

想加入 Eagle 博客作者群嗎？相關(guān)文章【全網(wǎng)最全】59 個免費(fèi)、免版權(quán)視頻素材下載網(wǎng)站分享免費(fèi)素材好難找？版權(quán)使用條款長篇大論看不懂？本文將介紹59個免費(fèi)無版權(quán)影片素材網(wǎng)站，讓你低成本做出精美影片！2021-09-27?設(shè)計資源47 個免費(fèi)商用圖庫！無版權(quán)、高分辨率、可商用圖像素材下載本文收集了 47 個免費(fèi)、高品質(zhì)、高分辨率的 CC0 圖像網(wǎng)站，大部分皆可商用，也保有二次創(chuàng)作的空間，讓你不必再擔(dān)心侵權(quán)問題，輕松下載制作，吸睛又吸金！2023-03-22?設(shè)計資源12 首 IG Reels 熱門音樂推薦，有效提升連續(xù)短片觸及率！想讓你的 IG Reels 更吸睛嗎？12 首熱門的連續(xù)短片音頻推薦，讓你跟上潮流、掌握趨勢，輕松找到好聽又適合的配樂，讓音樂為你的 Reels 加分！2023-08-11?設(shè)計資源免費(fèi)打造專業(yè)設(shè)計！25 款中英文字體任你下載，精美可商用本文我們精選了 25 款可免費(fèi)商用的中文英文字型，精美的字體設(shè)計，輕松讓你的作品變更專業(yè)！附上載點(diǎn)可立即下載收藏，布局、品牌廣告、社區(qū)貼文都適用！2023-06-22?設(shè)計資源免費(fèi) 20 組精選圖標(biāo)，直接下載幫你的下個專案找到好素材！立即發(fā)掘這免費(fèi)精選的 20 組圖標(biāo)包，立即下載，為你的下個專案找到絕佳素材！讓 Eagle 博客陪你提升設(shè)計品質(zhì)，加速創(chuàng)作！2023-06-06?設(shè)計資源免費(fèi)素材一網(wǎng)打盡！20 個優(yōu)質(zhì)樣機(jī)網(wǎng)站推薦，掌握實用素材想用更專業(yè)的方式呈現(xiàn)你的設(shè)計，讓客戶和主管一眼看出設(shè)計的重點(diǎn)嗎？20 個免費(fèi)的樣機(jī)網(wǎng)站推薦，免費(fèi)下載所有樣機(jī)素材，快速模擬產(chǎn)品效果！2023-06-01?設(shè)計資源產(chǎn)品立即購買下載最新開發(fā)進(jìn)度教育優(yōu)惠功能瀏覽器擴(kuò)展標(biāo)簽文件夾智能文件夾顏色篩選快速查看高效分類星等評分密碼保護(hù)GIF 播放器字體管理音頻管理視頻管理幫助幫助中心常見問題故障排除忘記序列號聯(lián)絡(luò)我們隱私權(quán)政策最終用戶許可協(xié)議資源快速上手學(xué)習(xí)中心用法與技巧資源社區(qū)博客Eagle API 官方文檔商務(wù)合作聯(lián)盟營銷計劃內(nèi)容合作活動贊助自媒體贊助媒體素材包關(guān)注我們 Twitter Facebook Instagram掃碼關(guān)注微信公眾號EnglishEspa?olРусскийDeutsch日本語???中文(繁體)中文(簡體)? 2017-2024 ogdesign.inc All rights reserved首頁瀏覽器擴(kuò)展快速上手資源社區(qū)博客幫助中心立即購買

Yesicon - 精選全球高品質(zhì)、開源、免費(fèi)的矢量圖標(biāo)庫

Yesicon - 精選全球高品質(zhì)、開源、免費(fèi)的矢量圖標(biāo)庫

簡體中文English簡體中文Espa?ol正體中文Deutsch日本語Fran?ais???Português反饋及建議切換到日間模式216,162 枚高品質(zhì)矢量圖標(biāo) 來自全球頂尖設(shè)計團(tuán)隊168 組開源、免費(fèi)的圖標(biāo)庫 開發(fā)者 和 設(shè)計師 的 CV 好幫手Yes I can!陷入自我懷疑時，記得握個拳，心中默念：Yes I can! SearchEmoji 類似于 Yesicon 的 Emoji 搜索引擎熱門搜索箭頭設(shè)置人首頁搜索用戶電話文件github時間數(shù)據(jù)分享消息定位愛心刪除手機(jī)返回編輯火關(guān)閉播放更多下載圖片視頻更多...圖標(biāo)庫目錄168常用圖標(biāo)Material Symbols10012321 個圖標(biāo)作者：Google開源協(xié)議：Apache 2.0Material Symbols Light10112379 個圖標(biāo)作者：Google開源協(xié)議：Apache 2.0Google Material Icons10210955 個圖標(biāo)作者：Material Design Authors開源協(xié)議：Apache 2.0Material Design Icons1037447 個圖標(biāo)作者：Pictogrammers開源協(xié)議：Apache 2.0Phosphor1047488 個圖標(biāo)作者：Phosphor Icons開源協(xié)議：MITSolar1057401 個圖標(biāo)作者：480 Design開源協(xié)議：CC BY 4.0Tabler Icons1065200 個圖標(biāo)作者：Pawe? Kuna開源協(xié)議：MITMingCute Icon1072806 個圖標(biāo)作者：MingCute Design開源協(xié)議：Apache 2.0Remix Icon1082860 個圖標(biāo)作者：Remix Design開源協(xié)議：Apache 2.0Bootstrap Icons1092050 個圖標(biāo)作者：The Bootstrap Authors開源協(xié)議：MITCarbon1102078 個圖標(biāo)作者：IBM開源協(xié)議：Apache 2.0IconaMoon1111781 個圖標(biāo)作者：Dariush Habibpour開源協(xié)議：CC BY 4.0Iconoir1121551 個圖標(biāo)作者：Luca Burgio開源協(xié)議：MITIonIcons1131338 個圖標(biāo)作者：Ben Sperry開源協(xié)議：MITLucide1141435 個圖標(biāo)作者：Lucide Contributors開源協(xié)議：ISCUnicons1151206 個圖標(biāo)作者：Iconscout開源協(xié)議：Apache 2.0TDesign Icons1161203 個圖標(biāo)作者：TDesign開源協(xié)議：MITTeenyicons1171200 個圖標(biāo)作者：smhmd開源協(xié)議：MITClarity1181103 個圖標(biāo)作者：VMware開源協(xié)議：MITBoxIcons119814 個圖標(biāo)作者：Atisa開源協(xié)議：CC BY 4.0BoxIcons Solid120665 個圖標(biāo)作者：Atisa開源協(xié)議：CC BY 4.0Majesticons121760 個圖標(biāo)作者：Gerrit Halfmann開源協(xié)議：MITAnt Design Icons122830 個圖標(biāo)作者：HeskeyBaozi開源協(xié)議：MITcss.gg123704 個圖標(biāo)作者：Astrit開源協(xié)議：MITGravity UI Icons124663 個圖標(biāo)作者：YANDEX LLC開源協(xié)議：MITOcticons125604 個圖標(biāo)作者：GitHub開源協(xié)議：MITMemory Icons126651 個圖標(biāo)作者：Pictogrammers開源協(xié)議：Apache 2.0CoreUI Free127554 個圖標(biāo)作者：creativeLabs ?ukasz Holeczek開源協(xié)議：CC0 1.0Flowbite Icons128539 個圖標(biāo)作者：Themesberg開源協(xié)議：MITMyna UI Icons1291089 個圖標(biāo)作者：Praveen Juge開源協(xié)議：MITBasil130493 個圖標(biāo)作者：Craftwork開源協(xié)議：CC BY 4.0Pixelarticons131480 個圖標(biāo)作者：Gerrit Halfmann開源協(xié)議：MITAkar Icons132453 個圖標(biāo)作者：Arturo Wibawa開源協(xié)議：MITcoolicons133442 個圖標(biāo)作者：Kryston Schwarze開源協(xié)議：CC BY 4.0System UIcons134430 個圖標(biāo)作者：Corey Ginnivan開源協(xié)議：UnlicenseTypicons135336 個圖標(biāo)作者：Stephen Hutchings開源協(xié)議：CC BY-SA 4.0Radix Icons136318 個圖標(biāo)作者：WorkOS開源協(xié)議：MITZondicons137297 個圖標(biāo)作者：Steve Schoger開源協(xié)議：MITElement Plus138293 個圖標(biāo)作者：Element Plus開源協(xié)議：MITCircum Icons139288 個圖標(biāo)作者：Klarr Agency開源協(xié)議：Mozilla Public License 2.0Material Design Light140284 個圖標(biāo)作者：Pictogrammers開源協(xié)議：Open Font LicenseFeather Icon141255 個圖標(biāo)作者：Megumi Hano開源協(xié)議：MITEOS Icons142253 個圖標(biāo)作者：SUSE UX/UI team開源協(xié)議：MITBitcoin Icons143250 個圖標(biāo)作者：Bitcoin Design Community開源協(xié)議：MITCharm Icons144261 個圖標(biāo)作者：Jay Newey開源協(xié)議：MITPrime Icons145260 個圖標(biāo)作者：PrimeTek開源協(xié)議：MITHumbleicons146246 個圖標(biāo)作者：Ji?í Zraly開源協(xié)議：MITuiw icons147214 個圖標(biāo)作者：liwen0526開源協(xié)議：MITUnicons Monochrome148296 個圖標(biāo)作者：Iconscout開源協(xié)議：Apache 2.0Unicons Thin Line149214 個圖標(biāo)作者：Iconscout開源協(xié)議：Apache 2.0Unicons Solid150189 個圖標(biāo)作者：Iconscout開源協(xié)議：Apache 2.0Maki151212 個圖標(biāo)作者：Mapbox開源協(xié)議：CC0Gridicons152207 個圖標(biāo)作者：Automattic開源協(xié)議：GPL 2.0Mono Icons153180 個圖標(biāo)作者：Mono開源協(xié)議：MITQuill Icons154140 個圖標(biāo)作者：Casper Lourens開源協(xié)議：MITGala Icons15551 個圖標(biāo)作者：Jake Wells開源協(xié)議：GPLLets Icons1561528 個圖標(biāo)作者：Leonid Tsvetkov開源協(xié)議：CC BY 4.0Framework7 Icons1571253 個圖標(biāo)作者：Vladimir Kharlampidi開源協(xié)議：MITMage Icons1581042 個圖標(biāo)作者：MageIcons開源協(xié)議：Apache 2.0Fluent UI System Icons15915647 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：MITIconPark Outline1602658 個圖標(biāo)作者：ByteDance開源協(xié)議：Apache 2.0IconPark Solid1611947 個圖標(biāo)作者：ByteDance開源協(xié)議：Apache 2.0IconPark TwoTone1621944 個圖標(biāo)作者：ByteDance開源協(xié)議：Apache 2.0IconPark1632658 個圖標(biāo)作者：ByteDance開源協(xié)議：Apache 2.0VSCode Icons1641255 個圖標(biāo)作者：Roberto Huertas開源協(xié)議：MITJam Icons165940 個圖標(biāo)作者：Michael Amprimo開源協(xié)議：MITHeroIcons1661176 個圖標(biāo)作者：Refactoring UI Inc開源協(xié)議：MITCodicons167455 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：CC BY 4.0Gitlab SVGs168375 個圖標(biāo)作者：GitLab B.V.開源協(xié)議：MITPepicons Pop!1691275 個圖標(biāo)作者：CyCraft開源協(xié)議：CC BY 4.0Pepicons Print1701275 個圖標(biāo)作者：CyCraft開源協(xié)議：CC BY 4.0Pepicons Pencil1711275 個圖標(biāo)作者：CyCraft開源協(xié)議：CC BY 4.0Bytesize Icons172101 個圖標(biāo)作者：Dan Klammer開源協(xié)議：MITEvil Icons17370 個圖標(biāo)作者：Alexander Madyankin and Roman Shamin開源協(xié)議：MITStreamline1742000 個圖標(biāo)作者：Streamline開源協(xié)議：CC BY 4.0Guidance175360 個圖標(biāo)作者：Streamline開源協(xié)議：CC BY 4.0Font Awesome Solid1761390 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0Font Awesome Regular177163 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0OOUI178356 個圖標(biāo)作者：OOUI Team開源協(xié)議：MITNimbus179140 個圖標(biāo)作者：Linkedstore S.A.開源協(xié)議：MITOpenSearch UI180386 個圖標(biāo)作者：OpenSearch Contributors開源協(xié)議：Apache 2.0FormKit Icons181142 個圖標(biāo)作者：FormKit, Inc開源協(xié)議：MIT動畫圖標(biāo)Material Line Icons200601 個圖標(biāo)作者：Vjacheslav Trushkin開源協(xié)議：MITMeteocons201450 個圖標(biāo)作者：Bas Milius開源協(xié)議：MITSVG Spinners20246 個圖標(biāo)作者：Utkarsh Verma開源協(xié)議：MIT表情符號OpenMoji3004129 個圖標(biāo)作者：OpenMoji開源協(xié)議：CC BY-SA 4.0Twitter Emoji3013668 個圖標(biāo)作者：Twitter開源協(xié)議：CC BY 4.0Noto Emoji3023555 個圖標(biāo)作者：Google Inc開源協(xié)議：Apache 2.0Fluent Emoji3032961 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：MITFluent Emoji Flat3042980 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：MITFluent Emoji High Contrast3051545 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：MITNoto Emoji (v1)3062162 個圖標(biāo)作者：Google Inc開源協(xié)議：Apache 2.0Emoji One (Colored)3071834 個圖標(biāo)作者：Emoji One開源協(xié)議：CC BY 4.0Emoji One (Monotone)3081403 個圖標(biāo)作者：Emoji One開源協(xié)議：CC BY 4.0Emoji One (v1)3091262 個圖標(biāo)作者：Emoji One開源協(xié)議：CC BY-SA 4.0Firefox OS Emoji3101034 個圖標(biāo)作者：Mozilla開源協(xié)議：Apache 2.0Streamline Emojis311787 個圖標(biāo)作者：Streamline開源協(xié)議：CC BY 4.0品牌 / 社交BoxIcons Logo400155 個圖標(biāo)作者：Atisa開源協(xié)議：CC BY 4.0SVG Logos4011812 個圖標(biāo)作者：Gil Barbara開源協(xié)議：CC0Simple Icons4023047 個圖標(biāo)作者：Simple Icons Collaborators開源協(xié)議：CC0 1.0CoreUI Brands403830 個圖標(biāo)作者：creativeLabs ?ukasz Holeczek開源協(xié)議：CC0 1.0Font Awesome Brands404484 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0Nonicons40567 個圖標(biāo)作者：yamatsum開源協(xié)議：MITArcticons4068749 個圖標(biāo)作者：Donnnno開源協(xié)議：CC BY-SA 4.0Custom Brand Icons4071106 個圖標(biāo)作者：Emanuele開源協(xié)議：CC BY-NC-SA 4.0File Icons408930 個圖標(biāo)作者：John Gardner開源協(xié)議：ISCDevicon409764 個圖標(biāo)作者：konpa開源協(xié)議：MITDevicon Plain410575 個圖標(biāo)作者：konpa開源協(xié)議：MITSkill Icons411397 個圖標(biāo)作者：tandpfun開源協(xié)議：MITBrandico41245 個圖標(biāo)作者：Fontello開源協(xié)議：CC BY SAEntypo+ Social41376 個圖標(biāo)作者：Daniel Bruce開源協(xié)議：CC BY-SA 4.0Cryptocurrency Icons414483 個圖標(biāo)作者：Christopher Downer開源協(xié)議：CC0 1.0Cryptocurrency Color Icons415483 個圖標(biāo)作者：Christopher Downer開源協(xié)議：CC0 1.0地圖 / 國旗Flag Icons500538 個圖標(biāo)作者：Panayiotis Lipiridis開源協(xié)議：MITCircle Flags501428 個圖標(biāo)作者：HatScripts開源協(xié)議：MITFlagpack502255 個圖標(biāo)作者：Yummygum開源協(xié)議：MITCoreUI Flags503199 個圖標(biāo)作者：creativeLabs ?ukasz Holeczek開源協(xié)議：CC BY 4.0Font-GIS504358 個圖標(biāo)作者：Jean-Marc Viglino開源協(xié)議：CC BY 4.0Map Icons505167 個圖標(biāo)作者：Scott de Jonge開源協(xié)議：Open Font LicenseGeoGlyphs50630 個圖標(biāo)作者：Sam Matthews開源協(xié)議：MIT專題Game Icons6004046 個圖標(biāo)作者：GameIcons開源協(xié)議：CC BY 3.0FontAudio601155 個圖標(biāo)作者：@fefanto開源協(xié)議：CC BY 4.0Academicons602157 個圖標(biāo)作者：James Walsh開源協(xié)議：Open Font LicenseWeather Icons603219 個圖標(biāo)作者：Erik Flowers開源協(xié)議：Open Font LicenseHealth Icons6041917 個圖標(biāo)作者：Resolve to Save Lives開源協(xié)議：MITMedical Icons605144 個圖標(biāo)作者：Samuel Frémondière開源協(xié)議：MITCovid Icons606142 個圖標(biāo)作者：Streamline開源協(xié)議：CC BY 4.0已歸檔 / 不再維護(hù)Line Awesome7001544 個圖標(biāo)作者：Icons8開源協(xié)議：Apache 2.0Eva Icons701490 個圖標(biāo)作者：Akveo開源協(xié)議：MITDashicons702342 個圖標(biāo)作者：WordPress開源協(xié)議：GPLFlat Color Icons703329 個圖標(biāo)作者：Icons8開源協(xié)議：MITEntypo+704321 個圖標(biāo)作者：Daniel Bruce開源協(xié)議：CC BY-SA 4.0Foundation705283 個圖標(biāo)作者：Zurb開源協(xié)議：MITRaphael706266 個圖標(biāo)作者：Dmitry Baranovskiy開源協(xié)議：MITIcons8 Windows 10 Icons707234 個圖標(biāo)作者：Icons8開源協(xié)議：MITInnowatio Font708105 個圖標(biāo)作者：Innowatio開源協(xié)議：Apache 2.0HeroIcons v1 Outline709230 個圖標(biāo)作者：Refactoring UI Inc開源協(xié)議：MITHeroIcons v1 Solid710230 個圖標(biāo)作者：Refactoring UI Inc開源協(xié)議：MITFont Awesome 5 Solid7111001 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0Font Awesome 5 Regular712151 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0Font Awesome 5 Brands713457 個圖標(biāo)作者：Dave Gandy開源協(xié)議：CC BY 4.0Font Awesome 4714678 個圖標(biāo)作者：Dave Gandy開源協(xié)議：Open Font LicenseFluent UI MDL27151735 個圖標(biāo)作者：Microsoft Corporation開源協(xié)議：MITFontisto716615 個圖標(biāo)作者：Kenan Gündo?an開源協(xié)議：MITIcoMoon Free717491 個圖標(biāo)作者：Keyamoon開源協(xié)議：GPLSubway Icon Set718306 個圖標(biāo)作者：Mariusz Ostrowski開源協(xié)議：CC BY 4.0Open Iconic719223 個圖標(biāo)作者：Iconic開源協(xié)議：MITIcons8 Windows 8 Icons720200 個圖標(biāo)作者：Icons8開源協(xié)議：MITSimple line icons721189 個圖標(biāo)作者：Sabbir Ahmed開源協(xié)議：MITElegant722100 個圖標(biāo)作者：Kenny Sing開源協(xié)議：GPL 3.0Elusive Icons723304 個圖標(biāo)作者：Team Redux開源協(xié)議：Open Font LicenseVaadin Icons724636 個圖標(biāo)作者：Vaadin開源協(xié)議：Apache 2.0Grommet Icons725614 個圖標(biāo)作者：Grommet開源協(xié)議：Apache 2.0 Copyright ? 2024 Powered by Iconify 數(shù)據(jù)源于 @iconify/json 2.2.188

UI設(shè)計教程—六步畫出好ICON - 知乎

UI設(shè)計教程—六步畫出好ICON - 知乎首發(fā)于零基礎(chǔ)如何學(xué)好新媒體ui設(shè)計？切換模式寫文章登錄/注冊UI設(shè)計教程—六步畫出好ICONUI小哥最近好幾個朋友在畫icon的時候遇到了問題，不知道從何入手，也不知道怎么評判自己畫的icon。這里正好有一篇ICONFINDER的設(shè)計師寫的文章，文章講述了圖標(biāo)的三個屬性，以及畫好圖標(biāo)的六個步驟。ICONFINDER和阿里推出的Iconfont圖標(biāo)庫類似，可以搜索出各種圖標(biāo)，圖標(biāo)會分為“Free（下載免費(fèi)）”“Premium（優(yōu)質(zhì)，下載需收費(fèi)）”兩類。在本文的例子中，筆者會重新設(shè)計一個狗的圖標(biāo)（它的名字叫作Corgi）。這個圖標(biāo)對于“Premium”來說還不夠好，筆者會提供一些簡單的指南，稍作優(yōu)化，這個圖標(biāo)已經(jīng)達(dá)到了“Premium”的標(biāo)準(zhǔn)。那么正文開始了。二、圖標(biāo)設(shè)計的三個屬性好的圖標(biāo)通常會有三個重要的屬性，而這三個屬性在大多數(shù)設(shè)計中是共通的。在設(shè)計新的圖標(biāo)時，我會以迭代的方式考慮每一個屬性。即使我只設(shè)計一個圖標(biāo)，這三個屬性仍然是隱含的，能從單個圖標(biāo)中看出來。1. 結(jié)構(gòu)“結(jié)構(gòu)”是圖標(biāo)的基礎(chǔ)形式。先不看圖標(biāo)的細(xì)節(jié)，在圖標(biāo)的主要形狀周圍畫一條線，會構(gòu)成正方形、圓形、水平或垂直矩形、三角形還是更有機(jī)的形狀？最成功的圖標(biāo)設(shè)計往往有著簡單的、可識別的圖案或形式。主要的幾何形狀有：圓形、正方形、三角形。這些形狀為圖標(biāo)設(shè)計創(chuàng)造了視覺上的穩(wěn)定感。2. 特征圖標(biāo)的“特征”由單個圖標(biāo)和圖標(biāo)集共同的元素組成。這些元素包括圓角、直角、線寬、樣式（平面型、直線型、紋理填充線型），色板，等等。3. 辨識度圖標(biāo)的“辨識度”指的是其本質(zhì)或圖標(biāo)的獨(dú)特之處。“辨識度”決定圖標(biāo)是否“有效”，即識別度和清晰度，也就是說用戶能否輕松地識別圖標(biāo)所描繪的對象、想法或行為。“特征”和“辨識度”往往相輔相成，多個圖標(biāo)共同的辨識度元素形成了整個圖標(biāo)集的特征。三、圖標(biāo)設(shè)計的六個步驟。1. 始終從網(wǎng)格開始不同大小的網(wǎng)格有各自的優(yōu)勢。在本文中，我們將使用32*32像素網(wǎng)格。我使用網(wǎng)格的時候，還會注意一些基本的規(guī)則，下圖就是我設(shè)計每個圖標(biāo)時所遵循的基本規(guī)則。網(wǎng)格的外部2個像素，我叫作“禁區(qū)”。除非絕對必要，否則我不會讓圖標(biāo)的任何部分進(jìn)入此空間。禁區(qū)的目的是在圖標(biāo)周圍創(chuàng)造一些呼吸的空間。圓形的圖標(biāo)從網(wǎng)格的中心開始。圓形的圖標(biāo)通常會觸及內(nèi)容區(qū)域的外面四條邊，但是不會進(jìn)入“禁區(qū)”。（圖標(biāo)的某些元素或小部件也可以超出該范圍）方形的圖標(biāo)也是從網(wǎng)格的中心開始的。但在大多數(shù)情況下，方形的圖標(biāo)不會一直延伸到內(nèi)容區(qū)域的最外邊緣。下圖中有三個同心的正方形，分別為淺藍(lán)色、橙色、淺綠色。我做的大多數(shù)圖標(biāo)會和中間的正方形對齊（下圖中橙色的正方形）。而是否要對齊每一個像素方格由圖標(biāo)本身的視覺重量決定。在32像素的正方形內(nèi)，有兩個20像素乘以28像素的矩形（見下圖，一個垂直，一個水平）。我會大致遵循這兩個矩形來設(shè)計圖標(biāo)，這樣我的圖標(biāo)方向會相對一致。也有通過對角線定向的圖標(biāo)（如下圖）。請注意，圖標(biāo)“鋸”最外面的點(diǎn)差不多和圓形的邊緣對齊。這里你做的時候不需要非常精確，大概靠近就可以。你不需要每一次都遵循上述網(wǎng)格和參考線。單個圖標(biāo)的優(yōu)秀比整個圖標(biāo)的一致性更重要。網(wǎng)格可以幫助你保持圖標(biāo)的一致性，但如果設(shè)計超棒的圖標(biāo)需要打破規(guī)則，那就打破規(guī)則。謹(jǐn)慎一點(diǎn)就好。2. 從簡單的幾何形狀開始設(shè)計圖標(biāo)的方法與畫草圖的方法相同：先用簡單的圓形、矩形、三角形創(chuàng)建主要形狀的大形。即使我的圖標(biāo)最終大部分是有機(jī)形狀的，我也會從Adobe Illustrator中的形狀工具開始。在制作圖標(biāo)時，特別是對于屏幕上較小的尺寸，手繪所帶來的微小的邊緣抖動會使圖標(biāo)看起來不精致。從基本幾何形狀開始有助于使邊緣更精致（特別是曲線），也能快速調(diào)整設(shè)計中元素的相對比例，并確保圖標(biāo)遵循網(wǎng)格和形狀。3. 數(shù)據(jù)化：邊緣、線條、圓角、曲線和角度數(shù)字上不精確的圓角、曲線和角度為讓你的設(shè)計看起來奇怪。所以，在涉及細(xì)節(jié)時，不要只用眼睛看或者手繪。這些細(xì)節(jié)的不一致性會降低圖標(biāo)的質(zhì)量。角度大多數(shù)情況下，我會使用45°角或它的倍數(shù)。45°角的“消除鋸齒”（Photoshop中使用選區(qū)工具時能看到這個勾選項）分布比較均勻（見下圖）。45°角的完美對稱性使其成為一種易于識別的特征，人眼看起來很舒服。45°角可以在圖標(biāo)集中構(gòu)建一致性。如果情況不允許用45°角，我會將其一分為二（22.5°，11.25°），或者使用15°的倍數(shù)。每個圖標(biāo)案例不盡相同，所以要根據(jù)具體情況做出決定。使用45°角的一半的好處在于，這些角度的“消除鋸齒”仍保持得不錯。曲線曲線是最引人關(guān)注的地方之一?！案呒墸瘜I(yè)”和“業(yè)余”之前的差別往往在于曲線。雖然人眼可以看出精確度的微小變化，但人的手眼協(xié)調(diào)卻不能總是達(dá)到高精度（下圖紫色背景的圖標(biāo)為手繪的曲線，很不精致）。我會通過形狀工具和數(shù)字來構(gòu)建曲線，而不是通過手繪。當(dāng)一定要手繪時，我會用Adobe Illustrator的約束修改鍵（Shift），或者使用Astute Graphics的VectorScribe和InkScribe來更精確地控制我的貝塞爾曲線，這樣更好。圓角我通常使用2像素的半徑。但是，你用的圓角半徑值取決于你想表現(xiàn)什么樣的個性。2像素的圓角，不是太大，但是給圖標(biāo)帶來了更“泡沫”的外觀。是否使用圓角是整個圖標(biāo)集特征的一部分。像素級完美“像素級完美”是現(xiàn)在圖標(biāo)和用戶界面設(shè)計中的流行語。在設(shè)計小尺寸圖標(biāo)的時候，“像素級完美”很重要。小尺寸圖標(biāo)邊緣上的“消除鋸齒”會使圖標(biāo)顯得模糊。沒有與像素網(wǎng)格對齊的線之間的空間也變得模糊。圖標(biāo)邊緣與像素網(wǎng)格對齊才能顯得清晰完美，而通過精確的角度和曲線能更加清晰完美。不過，像素級完美并不是最重要的問題（至少對于消除鋸齒、大尺寸和更高分辨率的顯示屏，如Retina屏，來說）。線寬關(guān)于線寬，我認(rèn)為2像素最理想，但有時也需要3像素。我通常選擇2像素和4像素線寬。理想情況下，我嘗試將圖標(biāo)中的每個值都保持為2的倍數(shù)。有時，單個圖標(biāo)的細(xì)節(jié)可能不滿足這個規(guī)則，但我會盡可能遵守。盡量避免使用非常細(xì)的線條，尤其是字形和平面圖標(biāo)。除非你故意要創(chuàng)建線條形式的圖標(biāo)，否則不要依賴線條來定義形狀。你應(yīng)該使用光線和陰影來定義形狀。4.在圖標(biāo)間保持一致性和相同的調(diào)性Dutch Icon的Hemmo de Jonge在2015年的Icon Salon上發(fā)表了精彩的演講，并詳細(xì)講述了他的圖標(biāo)設(shè)計元素（見下圖）。在他為荷蘭政府開展的為期兩年的圖標(biāo)系統(tǒng)項目中，Hemmo和他的設(shè)計合作伙伴在每個圖標(biāo)中都加入了“缺口”這一元素。不是每個圖標(biāo)都有缺口，但大多數(shù)都有。在圖標(biāo)集中統(tǒng)一地使用這種調(diào)性，可以使圖標(biāo)間產(chǎn)生更多的關(guān)聯(lián)。5.謹(jǐn)慎地使用細(xì)節(jié)和裝飾圖標(biāo)應(yīng)該快速地表達(dá)物體、想法或行為。太多的小細(xì)節(jié)會引入復(fù)雜性，這會使圖標(biāo)不易識別，特別是在小尺寸的時候。單個圖標(biāo)（圖標(biāo)集）中的細(xì)節(jié)的詳細(xì)程度是其特征和辨識度的重要組成部分。那么，什么才是圖標(biāo)（圖標(biāo)集）正正好好的細(xì)節(jié)程度呢？經(jīng)驗表明—只包含能使意義清晰的最少細(xì)節(jié)就是正好。6.讓你的圖標(biāo)獨(dú)一無二現(xiàn)在很多設(shè)計師過于依賴流行趨勢，或者重復(fù)一些受歡迎的設(shè)計師風(fēng)格。這會扼殺創(chuàng)意。作為創(chuàng)意專業(yè)人士，我們應(yīng)該在圖標(biāo)設(shè)計以外尋找靈感，例如，建筑、排版、工業(yè)設(shè)計、心理學(xué)、大自然以及我們可以找到靈感的任何其他領(lǐng)域?，F(xiàn)在很多圖標(biāo)集看起來都相似，所以，讓你的設(shè)計獨(dú)一就很重要。獨(dú)特性還有助于使圖標(biāo)更易于識別。（注意下圖狗狗鼻子的形狀）四、總結(jié)這簡單的6個步驟是大家設(shè)計圖標(biāo)的一個起點(diǎn)，并不是什么權(quán)威指南。筆者在本文中概括了自己的設(shè)計方法和知識，其他設(shè)計師當(dāng)然也有他們自己的觀點(diǎn)和技術(shù)。成為一個更好的設(shè)計師的最佳辦法是盡可能地多看，多閱讀，定期素描（可以隨身帶著素描本），還有就是，練習(xí)，練習(xí)，練習(xí)。（左邊是原來的icon，右邊是優(yōu)化后的icon）發(fā)布于 2019-07-04 21:08UI設(shè)計師UI設(shè)計入門前端 UI?贊同 4??3 條評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄零基礎(chǔ)如何學(xué)好新媒體ui設(shè)計？關(guān)注公眾號“天天向上好好學(xué)習(xí)”學(xué)5880+視

免費(fèi)logo設(shè)計生成_公司logo設(shè)計在線制作神器 - 標(biāo)智客

免費(fèi)logo設(shè)計生成_公司logo設(shè)計在線制作神器 - 標(biāo)智客

首頁

智能LOGO生成

VI設(shè)計生成

名片設(shè)計生成

VI設(shè)計生成

海報設(shè)計生成

門頭設(shè)計生成

包裝設(shè)計生成

電子名片設(shè)計生成

燈箱設(shè)計生成

易拉寶設(shè)計生成

獎狀/證書設(shè)計生成

工作證設(shè)計生成

菜單設(shè)計生成

手提袋設(shè)計生成

邀請函設(shè)計生成

全部類型

設(shè)計模板素材

品牌VI設(shè)計

商品 / 包裝VI設(shè)計

辦公 / 商務(wù)VI設(shè)計

餐飲 / 店鋪VI設(shè)計

會議 / 活動VI設(shè)計

設(shè)計類型

LOGO設(shè)計

名片設(shè)計

招牌/門頭

包裝瓶帖

包裝袋

查看所有

LOGO定制服務(wù)

商標(biāo)注冊

設(shè)計攻略

首頁

智能LOGO生成

設(shè)計生成

設(shè)計模板素材

LOGO定制服務(wù)

商標(biāo)注冊

成為會員

工作臺

成為會員，即可享受

全站模板

名片/工作證/門頭等應(yīng)有盡有

3億版權(quán)素材

插畫/圖片/文字全類型覆蓋

商業(yè)授權(quán)

線上/線下全渠道，皆可商用

VI物料高清無水印

無水印多格式文件下載

立即開通會員

LOGO

生成LOGO

查詢商標(biāo)

找模版素材

熱門搜索

LOGO

VI設(shè)計

門頭招牌

招聘

名片

首頁

智能LOGO生成

設(shè)計生成

設(shè)計模板素材

LOGO定制服務(wù)

商標(biāo)注冊查詢

設(shè)計攻略

設(shè)計模版中心

設(shè)計類型

品牌VI設(shè)計

查看所有

設(shè)計類型

LOGO設(shè)計

名片設(shè)計

招牌/門頭

包裝瓶帖

包裝袋

查看所有

品牌VI設(shè)計

商品 / 包裝VI設(shè)計

辦公 / 宣傳VI設(shè)計

餐飲 / 店鋪VI設(shè)計

會議 / 活動VI設(shè)計

查看所有

設(shè)計生成

名片設(shè)計生成

VI設(shè)計生成

海報設(shè)計生成

門頭設(shè)計生成

包裝設(shè)計生成

易拉寶設(shè)計生成

獎狀/證書設(shè)計生成

工作證設(shè)計生成

菜單設(shè)計生成

手提袋設(shè)計生成

電子名片設(shè)計生成

燈箱設(shè)計生成

邀請函設(shè)計生成

全部類型

不僅是

智能LOGO設(shè)計

LOGO智能生成

海量設(shè)計模板

3億＋版權(quán)圖片

全渠道商用授權(quán)

云端保存在線設(shè)計

微信登錄/注冊

關(guān)注"標(biāo)智客公眾號"進(jìn)行登錄/注冊

其他方式登錄

手機(jī)登錄

企業(yè)微信

手機(jī)登錄

賬號登錄

手機(jī)注冊/登錄

賬號密碼登錄

獲取驗證碼

登錄即同意《標(biāo)智客用戶使用協(xié)議》

微信登錄

其他方式登錄

微信登錄

企業(yè)微信

手機(jī)登錄

賬號登錄

手機(jī)注冊/登錄

賬號密碼登錄

記住此賬號

忘記密碼?

登錄即同意《標(biāo)智客用戶使用協(xié)議》

忘記密碼

微信登錄

其他方式登錄

微信登錄

企業(yè)微信

初次注冊，請綁定手機(jī)號

獲取驗證碼

登錄即同意

《標(biāo)智客用戶使用協(xié)議》

我已閱讀并同意

《標(biāo)智客用戶使用協(xié)議》

確定要退出當(dāng)前賬號嗎？

確定

取消

企業(yè)微信登錄入口將于近期關(guān)閉

新用戶注冊功能現(xiàn)已關(guān)閉

老用戶登錄后請綁定手機(jī)號，避免數(shù)據(jù)丟失

微信登錄(新用戶)

繼續(xù)登錄(已有賬號)

企業(yè)微信登錄功能即將關(guān)閉，請綁定手機(jī)號，避免數(shù)據(jù)丟失

去綁定

微信掃碼聯(lián)系客服

智能LOGO設(shè)計生成

開始生成

今日LOGO下載2721個

| 累計制作8390869個 | 可商用授權(quán)

一鍵生成品牌VI設(shè)計

首創(chuàng)智能VI設(shè)計生成

全場景VI設(shè)計在線編輯

提供多種印刷文件格式下載

線上/線下全渠道，皆可商用

生成設(shè)計

品牌LOGO定制設(shè)計

多對一貼身服務(wù)

多支團(tuán)隊，方案競標(biāo)

設(shè)計到滿意為止

立即預(yù)約

標(biāo)智客將嚴(yán)格保護(hù)您的隱私，請放心填寫

智能LOGO生成

設(shè)計智能 一鍵生成

智能VI設(shè)計生成

品牌VI設(shè)計 一鍵生成

企業(yè)定制設(shè)計

量身定制 獨(dú)一無二

不僅是智能LOGO設(shè)計

開始生成

Array

Array

Array

Array

Array

今日LOGO下載2721個

| 累計制作8390869個 | 可商用授權(quán)

不止有智能LOGO設(shè)計·還有全場景VI設(shè)計物料

LOGO

行政辦公

教育培訓(xùn)

實體店面

餐飲外賣

電商

商品包裝

會議活動

商標(biāo)設(shè)計

公司LOGO

徽章設(shè)計

網(wǎng)站標(biāo)志

App圖標(biāo)

店鋪頭像

公眾號LOGO

使用模板

標(biāo)智客

使用模板

標(biāo)智餐館

使用模板

標(biāo)智文創(chuàng)

使用模板

標(biāo)智客重慶小面

使用模板

標(biāo)智重工

使用模板

標(biāo)智客智創(chuàng)

使用模板

標(biāo)智智能

使用模板

標(biāo)智科技

換一批

生成LOGO

運(yùn)營物料·應(yīng)有盡有·一年省5萬設(shè)計費(fèi)

使用模板

簡約創(chuàng)意文藝春節(jié)手機(jī)海報設(shè)計

使用模板

紅色 新年 元旦 春節(jié) 手機(jī)海報 設(shè)計

使用模板

紅色簡約春節(jié)手機(jī)海報

使用模板

紅色 新年元旦春節(jié) 手機(jī)海報設(shè)計

使用模板

紅色極簡節(jié)日祝福煙花手機(jī)海報設(shè)計

使用模板

創(chuàng)意簡約大氣新年手機(jī)海報設(shè)計

使用模板

簡約現(xiàn)代新年春節(jié)手機(jī)海報設(shè)計

使用模板

簡約創(chuàng)意春節(jié)新年手機(jī)海報設(shè)計

使用模板

簡約喜慶元旦春節(jié)手機(jī)海報設(shè)計

使用模板

創(chuàng)意喜慶春節(jié)門神手機(jī)海報設(shè)計

使用模板

創(chuàng)意喜慶春節(jié)門神手機(jī)海報設(shè)計

使用模板

簡約現(xiàn)代新年春節(jié)元旦手機(jī)海報設(shè)計

換一批

模板中心

智能LOGO設(shè)計生成

通過智能化分析，為您自動生成圖文結(jié)合標(biāo)志、文字標(biāo)志、徽章標(biāo)志，并支持換色、換組合、換圖標(biāo)等功能生成出無盡的LOGO。

開始生成

All in Logo·可商用·可注冊商標(biāo)·可買斷

開公司 | 做團(tuán)隊

公司logo設(shè)計

標(biāo)志設(shè)計

企業(yè)VI設(shè)計

做產(chǎn)品 | 印包裝

商標(biāo)設(shè)計

產(chǎn)品logo設(shè)計

包裝標(biāo)簽設(shè)計

標(biāo)貼設(shè)計

開網(wǎng)店 | 自媒體

淘寶店標(biāo)設(shè)計

美團(tuán)店鋪入口圖/頭像

微信/抖音/小紅書頭像

開門店| 做生意

門頭設(shè)計

店標(biāo)設(shè)計

側(cè)招燈箱設(shè)計

搞活動 | 辦社團(tuán)

徽章設(shè)計

會標(biāo)設(shè)計

活動主題logo設(shè)計

會議主視覺logo設(shè)計

徽標(biāo)設(shè)計

建網(wǎng)站 | 做App

網(wǎng)站標(biāo)志設(shè)計

站標(biāo)設(shè)計

App圖標(biāo)設(shè)計

美團(tuán)頭像設(shè)計

先生成，后付費(fèi)！全力以赴為您設(shè)計屬于自己的LOGO

智能化LOGO生成

只需要公司/品牌名稱、所屬行業(yè)，標(biāo)智客就能智能化分析，為您自動生成圖文結(jié)合標(biāo)志、文字標(biāo)志、徽章標(biāo)志等多種創(chuàng)意設(shè)計供你選擇，比你更懂你！

個性化編輯

強(qiáng)大圖文編輯器讓你可以對logo在線生成結(jié)果隨心所欲地調(diào)整圖標(biāo)、字體、顏色、布局等，讓你公司logo設(shè)計更加個性，與眾不同！

原創(chuàng)LOGO設(shè)計

如果你的公司logo、網(wǎng)站標(biāo)志需要量身設(shè)計，標(biāo)智客專業(yè)設(shè)計團(tuán)隊可為您提供原創(chuàng)logo設(shè)計服務(wù)。

用戶好評

正純環(huán)保-張先生

制作公司標(biāo)志不僅非常容易，還免費(fèi)獲得高清源文件。

湯氏書院-吳先生

推薦給我的朋友說這個網(wǎng)站可以自動生成商標(biāo)，沒想到它還能定制商標(biāo)設(shè)計，能滿足我之后有商業(yè)用途的需要。將文字與圖形完美的融合，我對于這個效果十分滿意。

優(yōu)釋-李先生

你如果和我一樣對商標(biāo)設(shè)計一竅不通，那么就把專業(yè)的事情交給專業(yè)的人做！因為考慮到后期商標(biāo)設(shè)計需注冊，所以我選擇了定制化服務(wù)，與我溝通的顧問非常負(fù)責(zé)，做出的效果讓我十分滿意，會推薦給其他要設(shè)計公司logo的朋友。

利通云高-孫先生

一開始還因為它是直接生成的而有所疑慮，結(jié)果讓我意想不到！強(qiáng)烈推薦！

榮文房產(chǎn)-范先生

因為想打造一個讓人看到就能想起，還可以商用的logo商標(biāo)設(shè)計，所以選擇找專業(yè)logo設(shè)計公司去定制，設(shè)計出來的商標(biāo)效果非常符合我的要求，十分滿意！

意品-周女士

對商標(biāo)設(shè)計生成的結(jié)果非常滿意，值得一試！不僅logo圖標(biāo)素材多，還能任意編輯，更能免費(fèi)下載源文件。

MARSHARK-李先生

網(wǎng)上的這些logo在線生成工具，它絕對是是良心又專業(yè)的一家！不僅可以免費(fèi)生成logo，我想要定制化的需求也可以得到滿足。

文璽軒-文先生

因為想要打造一個店鋪品牌頭像，設(shè)計的logo必須能夠注冊商標(biāo)，所以選擇了定制化的logo設(shè)計。設(shè)計結(jié)束后，顧問還耐心指導(dǎo)我怎樣使用源文件。我喜歡他們這種專業(yè)認(rèn)真的態(tài)度，會推薦給其他朋友的。

再深情的凝望也比不上一次偉大的嘗試

智能生成LOGO

為什么上萬企業(yè)選擇生橙視覺？

●多方案堅持多團(tuán)隊作業(yè) / 多創(chuàng)意方案PK

●快出品專業(yè)流程 / 系統(tǒng)協(xié)作 / 定稿快

●好服務(wù)方案品控 / 不滿意退款 / 非原創(chuàng)退款

●省成本定稿快50% / 費(fèi)用省50%

預(yù)約設(shè)計 費(fèi)用評估

*

請輸入稱呼

*

請輸入正確手機(jī)號

*

選擇服務(wù)

品牌設(shè)計

LOGO設(shè)計

VI設(shè)計

包裝設(shè)計

吉祥物設(shè)計

門頭設(shè)計

宣傳單設(shè)計

海報設(shè)計

畫冊設(shè)計

*生橙視覺將嚴(yán)格保護(hù)您的隱私，請放心填寫

來不及找到心儀的內(nèi)容 按+D收藏我們

本網(wǎng)站使用cookies以提升您的使用體驗及統(tǒng)計網(wǎng)站流量相關(guān)數(shù)據(jù)。繼續(xù)使用本網(wǎng)站表示您同意我們使用cookies。我們的《隱私及Cookie政策》提供更多關(guān)于cookies使用及停用的相關(guān)信息。

我接受

首頁

LOGO在線制作

LOGO制作案例

LOGO定制服務(wù)

商標(biāo)注冊查詢

代理合作

法律聲明

API接口

侵權(quán)申訴

客戶端

Copyright 2012-2023 標(biāo)智客 All rights

reserved. 京ICP備2023004016號-3

京公網(wǎng)安備 11010502053486號

隱私政策

友情鏈接

熱門推薦

AI Logo

品牌設(shè)計

logo在線設(shè)計生成器

商標(biāo)設(shè)計

LOGO設(shè)計公司

宣傳冊設(shè)計

鳥哥筆記

蘇打蘇塔

H5

設(shè)計素材

在線視頻制作

中國設(shè)計之窗

ui素材

123RF圖庫

演界網(wǎng)PPT

app軟件

crm

VI設(shè)計

手機(jī)海報設(shè)計

名片設(shè)計

門頭設(shè)計

招牌設(shè)計

包裝瓶貼

包裝袋

Favicon.ico圖標(biāo)生成器 | 一鍵免費(fèi)制作ico圖標(biāo) - 標(biāo)小智

Favicon.ico圖標(biāo)生成器 | 一鍵免費(fèi)制作ico圖標(biāo) - 標(biāo)小智

LOGO生成器

LOGO模板

AI設(shè)計師

博客

網(wǎng)站/小程序

友情推薦

前往上線了官網(wǎng)十分鐘創(chuàng)建你的網(wǎng)站和小程序

專屬7折優(yōu)惠碼：LOGOSC

首頁

LOGO生成器

LOGO模板

AI設(shè)計師

博客

網(wǎng)站/小程序

登錄

免費(fèi)Favicon.ico圖標(biāo)在線生成器

輸入字母漢字在線生成Favicon圖標(biāo)

Favicon

圖片

圖標(biāo)

字符

生成

或選擇

圖片ICO

Favicon.ico圖標(biāo)下載

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

編輯

下載

透明PNG圖片

Favicon.ico

如何使用Favicon圖標(biāo)生成器？

你可以通過字母或者圖片兩種方式制作Favicon圖標(biāo)

字母Favicon：直接輸入字母（支持漢字）后點(diǎn)擊生成按鈕就能看到多個基于字母（或者漢字）的圖標(biāo)樣式。選擇直接下載或者繼續(xù)編輯圖標(biāo)的字體，顏色，或者背景圖形。

圖片F(xiàn)avicon：如果您已有圖片或者logo，可以點(diǎn)擊圖片→ICO的鏈接來在線生成你的Favicon圖標(biāo)。

如何安裝Favicon圖標(biāo)？

點(diǎn)擊下載并選擇Favicon格式，你將獲得Favicon圖標(biāo)的zip打包文件包含：

android-chrome-192×192.png

android-chrome-512×512.png

apple-touch-icon.png

favicon-16×16.png

favicon-32×32.png

favicon.ico

site.webmanifest

直接將Favicon文件上傳到你的網(wǎng)站服務(wù)器根目錄，在網(wǎng)頁的 head 部分復(fù)制粘貼HTML代碼即可。

{{ code }}

Favicon.ico圖標(biāo)常見問題

什么是Favicon圖標(biāo)？

Favicon也稱為URL圖標(biāo)或網(wǎng)站圖標(biāo)。這些圖標(biāo)非常小（通常為16×16或32×32），并會顯示在瀏覽器窗口和書簽中網(wǎng)站網(wǎng)址的旁邊，讓訪問用戶可以輕松在其打開的窗口中識別你的網(wǎng)站。

如果本地有ico圖標(biāo)文件，如何添加網(wǎng)站Favicon圖標(biāo)？

步驟1：重命名Favicon名稱

將本地圖標(biāo)名稱修改為 favicon.ico . 文件的名稱非常重要，因為Web 瀏覽器會自動查找具有該名稱的文件。

步驟2：上傳Favicon文件

將Favicon圖標(biāo)上傳到網(wǎng)站的主目錄或根目錄，默認(rèn)位置為 yourwebsite.com/favicon.ico 同樣瀏覽器會首先在網(wǎng)頁所在目錄默認(rèn)位置尋找favicon.ico文件。

步驟3：測試

Favicon圖標(biāo)安裝成功后，將在瀏覽器的地址欄上顯示出來。也可通過添加為網(wǎng)站書簽的方式，來測試圖標(biāo)是否正確展示。

步驟4：調(diào)試

為什么Favicon圖標(biāo)安裝后沒有顯示？

通常情況為，圖標(biāo)命名或安裝位置錯誤。確保你的favicon圖標(biāo)在以下位置能夠訪問到 http://websitename.com/favicon.ico

為什么顯示的Favicon圖標(biāo)不是最新版本？

這是由于瀏覽器緩存問題，有時會顯示舊版本，在強(qiáng)制清除瀏覽器緩存后，就能展示最新上傳的favicon圖標(biāo)。

Favicon圖標(biāo)有什么作用？

Favicon圖標(biāo)用于幫助用戶更輕松地在瀏覽器、書簽、快捷方式和地址欄中直觀地識別出你的網(wǎng)站，也讓用戶更容易在他們的瀏覽器上保存和記住你的網(wǎng)站。作為經(jīng)常被忽視的主要品牌元素，一個好看的Favicon圖標(biāo)可以讓你的網(wǎng)站在眾多競爭對手中脫穎而出。

常見的favicon圖標(biāo)格式有哪些？

ICO - favicon.ico

最常見的favicon圖標(biāo)格式是 ICO、PNG 和 SVG，但對于特定的瀏覽器或設(shè)備還有其他格式。ICO 文件格式由 Microsoft 開發(fā)，是 favicon 的原始文件格式。該格式是獨(dú)一無二的，因為它允許在同一個文件中包含多個小圖像。這是最大的優(yōu)勢，因為 ICO 格式（16x16、32x32 和 48x48 像素）的favicon圖標(biāo)所需的小圖標(biāo)可以獨(dú)立縮放和優(yōu)化。在小尺寸下，你不能依靠瀏覽器以最佳方式自動調(diào)整圖標(biāo)大小。所有瀏覽器都支持 ICO 格式，它是 IE5 ～I(xiàn)E10 唯一支持的格式。

PNG - favicon.png

PNG 格式是一種很棒的格式，因為它是大多數(shù)人熟悉的格式，并且不需要任何特殊工具來創(chuàng)建。隨著現(xiàn)代屏幕的高分辨率，小分辨率的小圖標(biāo)尺寸的原始問題不再存在。對于支持 PNG favicon 圖標(biāo)格式的瀏覽器，通常在瀏覽器選項卡或書簽欄中顯示的 favicon 的質(zhì)量將高于 ICO 格式。PNG 格式的缺點(diǎn)是它與 IE5 ～ IE10 不兼容。

SVG - favicon.svg

SVG 格式優(yōu)于 PNG 和 ICO 格式，但大多數(shù)瀏覽器都不支持。SVG 文件非常輕量級，并且可以無限擴(kuò)展，圖像質(zhì)量高，而且沒有大圖片加載消耗時間長的問題。目前只有 Chrome、Firefox 和 Opera 支持 SVG 格式的網(wǎng)站圖標(biāo)。

常見的favicon圖標(biāo)大小有哪些？

首先，你的favicon圖標(biāo)必須是方形的，由于桌面瀏覽器和IOS不支持其他形狀的圖標(biāo)。

對于 ICO 格式，推薦的尺寸為 16x16、32x32 和 48x48 像素。

對于 PNG 格式，推薦的尺寸為 16x16 和 32x32，不過瀏覽器可以兼容任何方形 PNG 圖像。

Favicon圖標(biāo)會影響搜索引擎排名或SEO嗎？

Favicon圖標(biāo)可間接幫助你優(yōu)化搜索引擎（SEO）：有些搜索引擎會在搜索結(jié)果中顯示你的 Favicon圖標(biāo)。一個吸引力的Favicon圖標(biāo)能夠提高在這些搜索引擎上點(diǎn)擊率（CTR）。此外，F(xiàn)avicon圖標(biāo)是建立品牌認(rèn)知度和品牌專業(yè)度的必要條件，缺失Favicon圖標(biāo)可能會降低用戶對網(wǎng)站的信任并增加跳出率。

智能LOGO在線設(shè)計生成器！

LOGO神器為您在線設(shè)計logo，生成企業(yè)VI，打造個性品牌。

在線logo設(shè)計

超過500萬用戶的AI智能logo設(shè)計神器！標(biāo)小智是國內(nèi)領(lǐng)先的品牌創(chuàng)建平臺?？焖僭诰€設(shè)計公司logo，生成企業(yè)VI，打造屬于你的個性品牌。

產(chǎn)品

Logo生成器

公司起名

商標(biāo)注冊

AI設(shè)計師

公司

Logo價格

推廣合作伙伴

Logo API

神器集

聯(lián)系

常見問題

在線客服

商務(wù)合作

友情鏈接

標(biāo)小智 上海婷平網(wǎng)絡(luò)科技有限公司 Copyright 2023 滬ICP備11048151號-6

-

使用條款

-

使用合同

請用微信掃碼支付