火星網(wǎng)校
手把手教你設計規(guī)范實操指南：圖標篇
發(fā)布時間：2024-08-19 13:04:50 瀏覽量：171次
手把手教你設計規(guī)范實操指南：圖標篇
圖標設計在界面設計中扮演著至關重要的角色，一套出色的圖標不僅能夠提升產品的品牌形象和用戶體驗，還能極大地影響界面美觀度、降低用戶的理解成本，塑造品牌形象，增強用戶的安全感和轉化率。
本系列共包括色彩規(guī)范、字體規(guī)范、圖標規(guī)范、設計原則、文案規(guī)范、布局規(guī)范和組件規(guī)范，本文為圖標規(guī)范篇，內容如下：
- 什么是圖標
- 為什么圖標很重要
- 設計原則
- 制圖規(guī)范
- 命名規(guī)范
一、什么是圖標
圖標是具有特殊含義的圖形，是能夠快速傳達信息、降低用戶理解成本、提升界面美觀度的重要元素。
現(xiàn)代漢字本身也是圖標的一種，是對大自然的一種象形文字，能夠快速傳達信息，降低用戶理解成本。
二、為什么圖標很重要
圖標設計對產品的品牌形象和用戶體驗影響重大，提升界面美觀度、降低用戶的理解成本，塑造品牌形象、提升用戶安全感和轉化率。
1. 圖標傳達信息快
圖形比文字更快傳達信息，簡單、直觀清晰。
2. 圖標傳達信息準
通用圖形跨語言、文化表達含義，避免混淆。
3. 品牌塑造穩(wěn)定
保持統(tǒng)一風格有利于提升用戶的安全感，樹立專業(yè)形象。
三、設計原則
1. 易讀
信息傳遞是圖標的根本價值，易讀性至關重要。
2. 簡單
刪除多余細節(jié)，保留主要特征，簡潔明了。
3. 統(tǒng)一
保持風格、線條粗細、夾角大小、顏色、正負形統(tǒng)一。
四、制圖規(guī)范
1. 大小尺寸
PC端常用尺寸為 16x16、24x24、32x32，需預留出血區(qū)域。
2. 貼合柵格線
保證節(jié)點貼合柵格線，避免小數(shù)點等數(shù)值出現(xiàn)。
3. 對齊
保持視覺對齊，確保圖標整體穩(wěn)定。
4. 輪廓化
使用圖形，避免描邊，保持放大使用一致。
簡化節(jié)點，保持圖形清爽。
線條粗細為2px，可根據(jù)實際情況微調傾斜線條。
倒角外圓內方，外部倒角為2px，內部倒角為直角。
五、命名規(guī)范
命名可根據(jù)團隊習慣，通常為模塊_類別_功能_狀態(tài).png的英文小寫和數(shù)字格式。
舉例：登錄頁啟動圖標 login_icon_logo_nor@2x.png
想要了解更多設計規(guī)范與實操技巧？歡迎點擊點擊咨詢，了解火星時代教育的相關數(shù)字藝術培訓課程。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
