Icon圖標的設計步驟與心得,不用很專業!

2021-12-24 菜菜創意小站

圖標在生活中運用是顯而可見的。例如:男女廁所標誌和各種交通標誌等。在計算機系統或軟體方面的應用也是很廣泛。例如:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。

下面的例子更形象的說明這個問題。


(圖片來源:九銘)
外國人A與中國人B,兩人在語言上存在差異對文字的認識是不同的,用圖標來表示,會縮短語言描述的距離。所以圖標更具有快捷傳達信息、便於記憶的特性。那麼圖標被廣泛使用的時候,什麼樣的圖標才是好圖標呢?好圖標從兩個角度去認識:辨識度與精緻度。
辨識度:圖標能夠直觀的表現要描述的物體。
精緻度:在精美的頁面或者系統界面上,精緻的圖標能提升整個頁面的最佳視覺。
那麼怎麼樣才能做出一套好的圖標?在圖標設計過程中需要注意哪些問題
在《圖標設計語言》中作者Yegor Gilyov (來源站點Turbo Milk )曾提到 「如果你需要畫幾個圖標,你需要整體考慮這個站點所有圖標,然後再開始使用軟體繪製。」如果你的icon全都是粗糙模糊的造型或拙劣的漸變色,那麼這個icon很失敗,不能當作是「風格的問題」來了事。這樣的icon不僅僅會毀掉整個頁面的美觀,更讓被描述的文字降低了被查看的欲望,對你的用戶來使用或閱讀它是一種極大的痛苦。Icon的細節包含對顏色的使用,對造型的創新,對質感的體現。
Icon的設計步驟

我認為icon設計遵循上面的一個規則,在做icon的前提要先構思好整個icon的風格,有了構思可以開始造型設計接著就是上色,然後對整體的icon進行細節修改。
Icon的要點從學會批評別人開始
曾經有人說過:「批評別人的作品比自己製作一個優秀的作品要容易得多。但如果使用系統的方式去批判,這才是個成熟的分析!」那麼怎麼學會去批判呢?下面來分享一些批判後總結的例子。


(圖片來源iconfans)
上面一些圖標看起來很像,這讓人很難分辨出哪個是哪個。尤其小圖標的時候辨識性差了。如果你不注意說明,你會很容易把這些圖標混在一起。圖標還是要有差異性,在保全風格統一的前提下要有很好的識別性,可以在顏色上或者造型上做差異的改變。


(圖片來源:九銘)
圖標應該是輕鬆被識別的,構建它的元素要越少越好。而上面的插畫和圖形明顯的告訴我們圖標的相關性不該是複雜的,可以省略掉相同的對象,凸顯出重要的信息。


上面圖片形象的說明了圖標像素邊沿化的問題,左邊的圖標比較模糊不清,右邊的比較清晰。


在做icon時很容易出現一些常見的毛邊,導致像素過渡化,最後圓角不柔和。
怎麼樣處理不柔和的圓角?
在由大icon到小icon的過程中你要重視一些細節的處理,對於這個我創了一句口訣:去多穩造型,邊沿移到位。
去多穩造型:大icon到小icon的過程是由細節的減少開始變化,大icon比較注重質感和光澤等,小icon除了保證質感還要清晰可見。在做16像素icon時可以減少一些必要的元素用像素點去代替,去掉多餘的陰影與高光。
邊沿移到位:小icon的邊緣移位主要靠移動像素點來實現,或者增加像素點。


經過處理,上面的圖標已經沒有了原來的鋸齒,有的是柔和的圓角。
當然每個設計師做icon的習慣都是不一樣的,這只是我做icon時的一些心得。

文章轉載自:web元素

作為設計師的我們也可以不動腦經賺錢,so easy!

你只需要完成有賺網裡面的任務就可以獲得相應的積分(可換現金)

不多說了,大夥賺錢吧!

了解詳情,點擊閱讀原文



相關焦點

  • ICON設計使用手冊:如何設計一個優秀的圖標?
    圖標設計,即icon設計,在界面設計中佔有很重要的位置,一個好的圖標,可以讓用戶「一秒即懂」,如何設計出優秀的圖標,這篇文章給你解答。在圖形交互界面(GUI)中,圖標(icon)是一種最常使用的設計元素之一。怎樣設計一個優秀的圖標呢?
  • 4496+免費圖標icon資源,提供SVG、EPS、PSD、PNG格式下載
    說換就換你們現在看到的這篇文章的封面圖(首圖)就使用了 iconmonstr 的圖標 icon  (圖標名:iconmonstr-cat-1)iconmonstriconmonstr 是由一位擁有15年專業圖標 icon 設計經驗的德國高級設計師 Alexander
  • 【原創】玩轉矢量圖標——ICON這樣用
    PPT設計中,我們都知道「文不如字,字不如表,表不如圖」的設計箴言,可知道未必做到。
  • 每周臨摹練習第六期總結:小icon大學問
    人類從很早以前就用圖標來與他人溝通,比如巖畫,埃及的象形文字等都屬於圖標。它是世界上最通用的語言,可以無障礙的在不同的民族,年齡之間傳遞。時至今日,大家一提到icon主要想到的是界面中的icon,但其實icon在生活中無處不在。交通標誌,運動會的標誌,就連你天天在廁所見到的標誌都屬於icon的範疇。
  • 6個ICON圖標素材庫丨素材篇
    現在越來越多的PPT、公眾號推文需要一些小圖標來展現想表達的內容,然而,想要找到一個合適的圖標非常難,不是顏色不搭配就是圖標不符合內容,那麼現在就需要ICON圖標素材庫來幫助你了。鵜鶘哥發現最近有些同事做PPT的時候總是文字和圖標不符,嚴重影響閱讀。這是同事沒看這篇推文之前的PPT。
  • 為什麼你的圖標設計總是差點「感覺」?
    編者按:設計原則總是看起來簡單抽象不言自明的,但是在細分的設計領域,這些原則其實有著各自不同適用情況,有著「特定的條件」。圖標設計,就是如此。今天的這篇文章,來自專業的圖標設計師 Helena Zhang,她結合自己製作 Phosphor 系列圖標的經驗,來分享她對於圖標設計原則的理解。
  • 4款免費圖標素材網站:設計PPT必備
    各式各樣的圖標是很多設計者,和製作PPT的必要元素。下面介紹4種關於圖標的素材網站。1、iconfrontIconfont是國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。
  • 網站前端ICONFONT圖標助力網站設計之WordPress應用
    說到網站建設就不得不提到前端UI與後端程序談到UI就不得不提及美工與設計在當前這個網際網路開放的時代,提到前端美工設計不提及ICONFONT圖標的廣泛應用,那完全是設計界的盲人;什麼是ICONFONT?,因製作此主題的作者已經集成了一套ICO庫;所以在這裡我們可以直接使用,具體如何使用,請看下面步驟:為了方便本篇文章的截圖操作,特在本地搭建了環境並重新安裝了Wordpress,所以以下所有截圖均為本地環境下的建站截圖,非本站現有界面截圖第一步:創建網站主體欄目(忽略截圖,自行添加)
  • 什麼是圖標設計,圖標在UI設計界面當中起到什麼作用
    圖標設計(Icon Design),是設計師在入門界面設計的必經之路,圖標是透過「符號」來簡化文字,主要是用來指示或暗示行為,在界面設計上我們會使用大量的圖標來節省空間,也可技術性的避免一些跨國語系的問題,常見的圖標例如,分享、贊、搜尋、地圖…等等,光聽到這些名詞,多數的人應該也能快速的聯想到圖標樣式了吧,網絡上對於圖標細節的討論很少,本篇就以界面設計常用的圖標來做更深入的討論
  • 第十四期天氣icon原創設計
    構圖1 / 材質 1 / 細節1 / 顏色1 / 創意2 構圖4 / 材質3 / 細節3 / 顏色3 / 創意2 構圖4 / 材質 3 / 細節3 / 顏色4 / 創意4第二點:一個icon裡面的元素顏色是要互相影響的,(還是用陣雨舉例:雲彩受到黃色太陽的影響,會帶有黃色,受到藍色雨點的影響,會帶有藍色,下面幾個有布蛋兒形象的icon也有同樣的問題,星星、月亮、布蛋兒三個元素在顏色上已經脫節了,像拼接上去的)。繼續加油~ 構圖4 / 材質3 / 細節4 / 顏色3 / 創意5
  • 一個Tip 讓你的 icon 更討喜:流行 icon 分析總結與運用
    默畫人家icon時候發現的:為什麼按我記憶中默畫出來的別家產品圖標,系統圖標都沒有原版好看?在比對自己的默畫與原作細節之後我發現一個非常重要,區別開「嗯這個是個圖標」和「哇這個圖標像樣」之間的關鍵因素:讓你「哇」出來的圖標,一般都比較飽滿。一、啥是飽滿?為啥大家喜歡飽滿?我們先來感性的認識一下,啥是飽滿。
  • 研究了上百套圖標,總監卻告訴我圖標要這樣畫!!(附資源禮包下載)
    主要講述如何快速繪製精緻圖標的經驗與技巧,有效提升專業力。  2.講述團隊內有多個設計師協作的時候,如何制定圖標設計規範,來約束大家繪製的圖標icon畫風一致,讓設計更整體。  彩蛋:在公眾號網際網路er的早讀課後臺,回復發送『圖標合集』,就能獲取到最新設計資源。  回想一下自己也很久沒畫icon,所以這次有點獻醜了!
  • 那些國外設計師都會參考的素材網站——ICON篇
    ICON在設計當中廣為應用,它會讓你的內容看起來更豐富、更直觀表達。今天來分享一些好用的國外icon網站,而且均是免費的。ICON篇。格式圖標素材下載的站點,該網站收錄的圖標都是單色、平面化素材,可以應用於任何網站和其他項目,更重要的是可以打包下載使用。
  • PPT中高大上的icon圖標是怎麼做的,一招快速解決!
    圖標是PPT製作中經常用到的元素之一,因此比文字生動、比圖片簡潔的特性而深受廣大PPT愛好者的喜歡。因此,常有朋友在後臺留言提問:PPT中那些看似高大上的圖標是怎麼做的?今天小編就和大家分享下PPT中做圖標的一個技巧。
  • 最全ui設計圖標解析,圖標概念大揭曉
    咳咳~不好意思跑題了,ui設計圖標並不是這樣的!(冷漠臉)圖片來源於網絡其實正確打開方式是這樣的!ico圖標其實是icon file的縮寫形式,它是基於windows而開發的一個圖形格式,大多用於電腦,手機或其它設備中為各種文件,應用程式或快捷方式設置的一種圖形標誌。想必大家看完以後會對什麼ico圖標有一個初步的印象了。那麼我們再來看看圖標的一些分類,各有什麼區別特點!
  • 四百多萬個免費圖標素材,建設世界上最受歡迎的圖標網站
    Boss有話說ICONFINDER 一個提供超過四百多萬個免費 icon 圖標下載使用,注意的是部分是收費的哦。可以說 ICONFINDER 使用一個圖標搜索工具,為數百萬創意專業人士提供高品質的圖標。
  • 一些圖標網站
    經常做PPT的朋友都知道,除了圖片以外圖標在PPT中的應用也非常廣泛,此外圖標一直在UI設計、網頁設計等運用得非常廣泛
  • 微課製作之片頭、圖標、音效素材
    愛看圖標網是一個圖標搜尋引擎。設計寶跟愛看圖標網相似,可以通過搜索關鍵詞來檢索相關圖標。同樣地,千圖網也可以通過關鍵詞檢索到相關圖標,但其不足顯而易見。非會員在千圖網免費下載素材只能允許一個小時不超過三次。6.圖標搜索下載:http://www.easyicon.net/language.zh-cn/
  • Flutter如何快速做好App的圖標適配
    好了到此處我們的Flutter圖標適配就完成了90%了。啥?我們不是什麼都還沒做嗎?對於剩下的步驟工具一個命令就能能完成的事,那不叫事,嘿嘿。,還得請出我們的主角,那就是Flutter的插件:flutter_launcher_iconsflutter_launcher_icons 提供了adaptive_icon_background 和 adaptive_icon_foreground 指定這兩個屬性,即可實現安卓8以上版本的圖標自適應工作。
  • 資深遊戲設計師解答:遊戲圖標的設計跟其它應用的圖標設計有何不同?
    這裡乾脆我就二合一,根據自身這幾年積累的經驗來回答一下這個問題,希望答案能夠幫助到答主和者所有對遊戲設計感興趣的同行們。關於圖標 在探討遊戲圖標之前,首先我們要去大致了解一下什麼是「圖標」(icon)。