火星網校
設計師必備：圖標設計的隱喻元素和繪制流程
發(fā)布時間：2024-09-06 12:02:33 瀏覽量：189次
設計師必看圖標(icon)指南
icon 中的隱喻元素很重要，它可以讓我們一看到這個 icon 就知道是什么意思。比如，一個房子代表首頁，一個叉叉代表出錯或關閉。當我縮小一個 icon 時，我都會保留隱喻元素，來保證 icon 仍然可以準確傳達信息。
（3）工具圖標
主要以行業(yè)類別為分類，使用范圍廣泛，大眾或行內人士識別度高，且被長期使用。比如：建筑行業(yè)，醫(yī)療行業(yè)，化工行業(yè)等等。
（4）混合圖標
也就是前三種的結合，目的在于達到不同的視覺效果和應用結構。前段時間追波很流行的MBE粗描邊風格icon就是綜合圖標的產物，多表達設計師個人設計風格或適用某類設計感較強的軟件。
基于視覺特性的分類
（1）字符圖標
字符圖標“Glyph”一詞是源自于排版領域，現(xiàn)在已經隨著數字設計而逐步在數字設計領域扎根了，它源自于希臘語，含義為“雕刻”。在排版領域當中，符號圖標通常是包含特定的含義、特定功能、可表意也可書寫的類文字系統(tǒng)，它可以是字母，也可以是圖形，有的時候甚至是兩者的組合。
在這類圖標設計中，比較典型的當屬天氣類圖標了。從單個圖標到組合圖標，都能充分體現(xiàn)出來。
（2）扁平圖標
扁平圖標包含線性、面型、線+面，面+面，變現(xiàn)方式多樣，拓展性強，更個性化，年輕化一些，相同，同樣設計風格的icon，在更換顏色后就能體現(xiàn)和傳達不一樣的信息。
（3）擬物化圖標
擬物化圖標是扁平化圖標的對立面，正如同當初擬物化圖標設計師常說的，它就是“抄現(xiàn)實”，盡量將現(xiàn)實世界中的形狀、紋理、光影都融入到整個圖標的設計，擬真是它的特點。擬物化圖標這一設計趨勢幾乎是跟隨著Macintosh的誕生和進化一步一步走過來，走到極致，然后從UI設計領域開始，被扁平化設計所替代。不過，擬物化圖標現(xiàn)在依然廣泛地運用在不同領域，尤其是游戲設計和游戲類產品的圖標設計當中。2.5D圖標和桌面應用圖標。
圖標的優(yōu)勢
1. 全球通用
Windows,iOS, etc., 中文版和英文版甚至各種語言版本，在不打開菜單之前，基本上都長一樣。很多圖標已經能夠被大多數用戶快速識別，甚至成為國際通用的圖標。例如Windows UI
2. 節(jié)約空間
一個圖標能夠表述清楚含義的時候，只需占用一個字符的位置就可以傳遞給用戶操作信息。例如掃一掃、郵件發(fā)送成功，用文案表示需要3-4個字，英文或其它語言可能更長，而用圖標代替只需要一個字符位置
支付寶右上角 + 表示更多功能，此時一個字符位置解釋清楚其含義；微信下一個類似聲波圖標表示語音，直觀易理解
3. 快速定位
進入碎片化時代和進入讀圖時代，幾乎是相同的節(jié)奏。圖片內容能在短時間內產生更大的影響力，研究表明，大腦處理圖片內容的速度比文字內容快60000倍，人類大腦對圖形圖像的記憶也遠勝于對文字的記憶。所以，在推廣品牌時，圖片內容可以說是一圖勝千言。使用圖標通過視覺引導幫助用戶快速識別信息。
Tik Tok和ins沒有任何文字說明情況下，我們就知道第5個標簽就是個人中心
4. 可識別，易記憶
科學證明，在大腦中相對于其他感覺來說與視覺信息處理相關的腦區(qū)占統(tǒng)治地位，人腦對于圖像的記憶遠遠高于文字。圖標多采用幾何圖形，并以對稱、一致的設計目標來進行設計，由于其高度濃縮的特性，圖標具有更加簡潔的特性，更加便于記憶。
圖標的繪制流程
圖標最底層邏輯：線性圖標、面型圖標、線+面型圖標、面+面型圖標、2.5D圖標、擬物圖標。網上五花八門的圖標是在這些基礎上進行視覺區(qū)分，而當我們設計圖標時候需要思考：
- 產品視覺風格定位（行業(yè)領域）
- 圖標具體應用的界面
- 產品面相的用戶人群是怎樣的？
先看一組不用風格的圖標，由上面不同APP圖標可以看出不同行業(yè)、不同場景、不同用戶，圖標的設計和表達方式是不一樣的，所以設計前需要思考，你需要表達的設計思路和產品的定位。
1. 設計執(zhí)行
（1）拆解關鍵詞及關鍵詞聯(lián)想
將需求信息中的關鍵詞進行拆解及發(fā)散，轉化為生活中常見的事物，釋放它所代表的內在含義。關鍵詞的同義詞、近義詞、形狀相關或相關聯(lián)想的物體
例如說到榮譽，馬上就能想到獎杯、獎狀、金牌、皇冠等。然后通過這些詞聯(lián)想，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩做為產品圖標的主要造型
（2）根據關鍵詞聯(lián)想輸出圖形
根據上一步拆解的詞語或物體，通過簡單基本形狀轉為生活中常見圖形。常用的2中方法是用AI鋼筆工具（sketch貝塞爾工具）或者布爾運算進行繪制
（3）根據場景輸出
這里的場景可能是實際應用的場景，比如大眾點評tab標簽欄、功能區(qū)（品類區(qū)）、運營類圖標等這些圖標需要引導用戶去點擊，所以在視覺上更加豐富一些；而個人中心、分類區(qū)、詳情頁更多側重功能上的引導，相對來說較簡潔，屬于二級使用場景，線型圖標居多。
圖標的設計注意事項
我們常見各個圖標文章分析應該注意十幾點，而這些沒有規(guī)律和邏輯難以記憶，一時記住了也容易忘記。這些總結其實是從Material Design或者iOS規(guī)范中得來的。認真研究這些細節(jié)，圖標制作就不難了
1. 端點統(tǒng)一
圖標端點分為直角和圓角，我們在設計過程中要統(tǒng)一圖標端點，保持一致的設計語言
2. 角度統(tǒng)一
（1）拐角
相對于其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上中央凹(fovea centralis），是視網膜中視覺最敏銳的區(qū)域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近于圓。
圓角自身的圓形屬性會給人圓潤、可愛，更加安全、親密的感覺。因此社交、娛樂、直播、美食等圖標多會使用圓角圖標。
直角則會給人一種尖銳、具有攻擊性的感覺，圖標整體細節(jié)更多，通常出現(xiàn)在金融等商務屬性比較強的產品。比如：36氪、金融類產品等。
（2）傾斜角度統(tǒng)一
3. 內部空間比例統(tǒng)一
內部空間比例的不一致易導致圖標視覺重點不統(tǒng)一。如下圖左第二個圖標重偏下，第四個圖標重心偏上，右邊是早期PP助手的標簽欄圖標，圖標內部挖空面積占比率相同，整體視覺和諧統(tǒng)一。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
