正文

設(shè)計圖標(biāo)（設(shè)計圖標(biāo)素材）

發(fā)布時間：2023-04-07 08:00:11 稿源：創(chuàng)意嶺閱讀： 147

大家好！今天讓小編來大家介紹下關(guān)于設(shè)計圖標(biāo)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、電腦上怎么設(shè)計圖標(biāo)logo
2、圖標(biāo)設(shè)計的風(fēng)格有哪些?(一)
3、圖標(biāo)設(shè)計規(guī)范（面性與線性圖標(biāo)）
4、有哪些ui圖標(biāo)設(shè)計的分類?

設(shè)計圖標(biāo)（設(shè)計圖標(biāo)素材）

一、電腦上怎么設(shè)計圖標(biāo)logo

1、創(chuàng)建一個新文檔，轉(zhuǎn)到“查看”標(biāo)簽，然后選中“網(wǎng)格線”框，添加一個網(wǎng)格，幫助對齊logo元素。

2、轉(zhuǎn)到“插入”選項卡，然后在畫布上添加一個圓圈。

3、選擇背景色，將默認(rèn)的黑色修改為需要的顏色。

4、創(chuàng)建一個圓的副本，用鼠標(biāo)右鍵單擊圓圈，然后選擇“復(fù)制”，使第二個圓小于原始圓，將較小的圓圈放在大的圓圈上方，單擊內(nèi)圓，使邊界線變粗，描邊線條的顏色更改為白色，如果沒有邊界線，可以在設(shè)置中添加。

5、使用“插入”工具，在logo中添加兩條平行的水平線。

6、使用“文本”工具添加公司名稱，添加在圓圈內(nèi)。

7、使用“文本”工具，自定義品牌名稱的字體，確保文字顏色與圖標(biāo)相配。

8、文本選擇透明背景并刪除邊框線。

9、選擇所有元素，然后單擊“組”，確保每個元素都保留在需要的位置。

二、圖標(biāo)設(shè)計的風(fēng)格有哪些?(一)

看起來很簡單的東西有很多，其實是設(shè)計師的很多心血注入的。那么今天青藤醬就來講一講圖標(biāo)設(shè)計中包含的風(fēng)格，希望大家可以多多學(xué)習(xí)。

設(shè)計圖標(biāo)（設(shè)計圖標(biāo)素材）

我們通過圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。那么圖標(biāo)的設(shè)計風(fēng)格都有哪些?

1.扁平化風(fēng)格圖標(biāo)設(shè)計

扁平化風(fēng)格圖標(biāo)設(shè)計現(xiàn)在深受設(shè)計師的喜愛，其一是視覺表現(xiàn)效果較好;其二是在進(jìn)行app應(yīng)用時，將圖標(biāo)降低像素后在界面中受到的視覺影響也較小，使用方便;其三是和界面整體風(fēng)格容易搭配，視覺效果能較為融洽的進(jìn)行統(tǒng)一。

扁平化風(fēng)格的圖標(biāo)設(shè)計在設(shè)計上更多的是考慮色彩的搭配和圖形的拼接，不再進(jìn)行過多的色彩漸變運用、高光的應(yīng)用、陰影的應(yīng)用，不再過多的運用其他視覺元素的方式，在圖標(biāo)上直接進(jìn)行互補色或同色系變化的色塊運用，能讓用戶更為直接的感受到其視覺含義，正是因為這種處理方式，讓用戶的視覺中心更加集中，不再受到其他的視覺元素影響。扁平化風(fēng)格的圖標(biāo)設(shè)計出現(xiàn)以后讓UI界面的視覺表現(xiàn)更為直接、更加簡潔、更加高效。

以上是環(huán)球青藤小編為考生整理的圖標(biāo)設(shè)計的風(fēng)格的相關(guān)內(nèi)容，希望對大家有幫助!更多技能資訊的相關(guān)內(nèi)容盡在本平臺，快來看看吧!

三、圖標(biāo)設(shè)計規(guī)范（面性與線性圖標(biāo)）

在UI設(shè)計中，我們經(jīng)常會遇到各種各樣的圖標(biāo)，導(dǎo)航欄區(qū)域的圖標(biāo)、金剛區(qū)圖標(biāo)、tab欄圖標(biāo)等，在不同的產(chǎn)品、不同功能模塊的圖標(biāo)樣式也是不同的，有面性、線性、線面結(jié)合、異性等等。通過對常見圖標(biāo)類型進(jìn)行歸納，以及對不同圖標(biāo)不同使用場景進(jìn)行設(shè)計規(guī)范總結(jié) ，我們在做UI設(shè)計時才會更加得心應(yīng)手，更加注重設(shè)計規(guī)范。

一、面性圖標(biāo)

面性圖標(biāo)是幾種圖標(biāo)中最強的一種，其次是線面結(jié)合圖標(biāo)，最后是線性圖標(biāo)。面性圖標(biāo)的突顯性更強。對于如何選取哪一種圖標(biāo)，應(yīng)該首先站在信息層級上去考慮。

1.1功能入口

在首頁金剛區(qū)中常采用面性圖標(biāo)進(jìn)行功能、業(yè)務(wù)的導(dǎo)流及流量分發(fā) ，比如美團(tuán)、鏈家、淘寶等。但是也有些產(chǎn)品金剛區(qū)采用線性圖標(biāo)。

☛那么為什么有的產(chǎn)品金剛區(qū)采用面性圖標(biāo)有的采用線性圖標(biāo)？

——考慮該模塊是否為該功能的核心出入口。如果整個產(chǎn)品此功能70%以上都是通過此模塊進(jìn)入的，那么建議采用面性圖標(biāo)；如果此功能還可以通過其他多個模塊進(jìn)入，就可以采用線性圖標(biāo)。

▶設(shè)計解析

a.內(nèi)圖標(biāo)與底板保持一定的呼吸感

也就是說里面的圖標(biāo)不能太大，撐太滿，要有一定的留白呼吸感。

市場上一般有兩種處理方法：一是二者之間的比例約等于 0.618（內(nèi)圖標(biāo)與底板的比）；而是兩者比例接近 1:2（裝飾元素與整個圖標(biāo)的比）。

b.圖標(biāo)的色彩保持四色原則與飽和度統(tǒng)一、漸變統(tǒng)一

金剛區(qū)的圖標(biāo)色彩可以根據(jù)其業(yè)務(wù)屬性進(jìn)行色彩選擇，如外賣相關(guān)的可以選擇橙色，健康環(huán)保的可以選藍(lán)色綠色等等。在一個模塊色彩最好不超過四種顏色。

在色彩上的處理也應(yīng)保持所有圖標(biāo)在視覺處理上是統(tǒng)一的。比如色彩選取區(qū)域、漸變方向等。

c.簡約挖空

簡約挖空能讓圖標(biāo)更加精致與出彩。如何做到讓圖標(biāo)簡約，首先得在造型上簡約，其次再進(jìn)行適當(dāng)?shù)耐诳仗幚恚M(jìn)行點綴弱化。值得借鑒的產(chǎn)品美團(tuán)與支付寶。

1.2標(biāo)題點綴

標(biāo)題點綴的意義在于能讓用戶在快速閱讀中，快速找到心儀板塊。

▶設(shè)計解析

a.五分原則。根據(jù)親密性原則，讓圖標(biāo)離文字更近，離頁邊更遠(yuǎn)，兩種的比例為1:2。

b.圖標(biāo)與文字高度保持一致，或比文字略小。這樣看上去才更平衡。

c.圖標(biāo)極簡原則。此場景圖標(biāo)一定要簡約，不能太復(fù)雜，達(dá)到區(qū)分性即可。

1.3列表流

列表流圖標(biāo)能讓列表內(nèi)容更加豐富，吸引用戶去閱讀與快訊定位心儀內(nèi)容。值得借鑒ios設(shè)置頁面。

▶設(shè)計解析

a.上下間距保持一致，左右間距保持一致。

b.圖標(biāo)略高于文案

c.業(yè)務(wù)屬性相同的圖標(biāo)色彩上保持一致，圖標(biāo)的視覺處理保持一致

d.圖標(biāo)簡約

☛ 為什么有的產(chǎn)品個人中心有統(tǒng)一底板，有的卻沒有？？

—— 在視覺呈現(xiàn)上追求統(tǒng)一感，可采用底板；追求圖標(biāo)的辨識度不用底板

1.4選中狀態(tài)

常見于tab欄的選擇狀態(tài)，或者點贊、收藏等此類按鈕點擊后的狀態(tài)。能區(qū)分于其他圖標(biāo)，讓用戶明白此時的位置與記錄自己的操作狀態(tài)。

▶設(shè)計解析

a.選中顏色使用品牌色

b.統(tǒng)一設(shè)計范圍與視覺比重（采用圖標(biāo)柵格系統(tǒng)進(jìn)行處理）

c.視覺處理保持統(tǒng)一

▶利于圖標(biāo)柵格系統(tǒng)進(jìn)行圖標(biāo)視覺比重處理

這是很多初級設(shè)計師常常忽略的一個設(shè)計重點。導(dǎo)致設(shè)計處理的圖標(biāo)視覺比重不一致。圖標(biāo)柵格系統(tǒng)能很好的規(guī)避這個問題。

ant design里面有對圖標(biāo)的設(shè)計規(guī)范有很好的說明

Ant Design 的圖標(biāo)設(shè)計對于設(shè)計稿的分層也有一定的要求，其目的除了讓設(shè)計師實現(xiàn)有序的文檔管理之外，更多的是便于團(tuán)隊間文檔的傳遞，統(tǒng)一的設(shè)計框架像是無形的共識，可以讓彼此間的理解得到進(jìn)一步的提升。

圖標(biāo)柵格系統(tǒng)資源分享鏈接： https://pan.baidu.com/s/1ak0Fjz2XwerfRZwQjtpl4Q

2.主流面性圖標(biāo)樣式總結(jié)

▶白色面性微漸變

內(nèi)圖標(biāo)采用白色到背景色的微漸變比直接用白色看上去更具有質(zhì)感與細(xì)節(jié) 。

▶色塊不透明度疊加

色塊不透明的疊加類圖標(biāo)更具有空間感，更豐富。

▶ 微投影圖標(biāo)

加上圖標(biāo)顏色的微投影，讓圖標(biāo)更細(xì)膩精致

二、線性圖標(biāo)

2.1功能入口

非主流業(yè)務(wù)入口、或者平臺工具類產(chǎn)品使用居多。

▶設(shè)計解析

a.視覺比例統(tǒng)一，利用圖標(biāo)柵格系統(tǒng)去設(shè)計

b.顏色符號業(yè)務(wù)色

c.圓角數(shù)值不宜過大，一般3-4px

2.2輔助功能按鈕

輔助功能按鈕如feed流里面的點贊、評論、轉(zhuǎn)發(fā)等功能。線性的輔助功能圖標(biāo)比面性輔助圖標(biāo)呼吸感更強。

▶設(shè)計解析

a.視覺比例統(tǒng)一，利用圖標(biāo)柵格系統(tǒng)去設(shè)計

b.線條簡練，描邊粗細(xì)統(tǒng)一

c.圖標(biāo)高度略大于文案，或保持一樣的高度（參考微博）

2.3列表流

▶設(shè)計解析

a.上下邊距與頁邊距保持一致

b.線條簡練，描邊粗細(xì)統(tǒng)一，圓角統(tǒng)一

c.圖標(biāo)高于文案

2.4選中狀態(tài)

對于選中狀態(tài)的處理建議還是選用面性圖標(biāo)。

▶設(shè)計解析

a.選中顏色使用品牌色

b.統(tǒng)一設(shè)計范圍與視覺比重（采用圖標(biāo)柵格系統(tǒng)進(jìn)行處理）

c.視覺處理保持統(tǒng)一

主流線性圖標(biāo)樣式總結(jié)

▶選中圖標(biāo)定制化（趣味性）

▶斷點處理（形狀拼接處進(jìn)行斷點處理，處理一定要克制）

▶粗像素（更加個性化、突出）

鏈接：https://www.jianshu.com/p/b8b499999464

四、有哪些ui圖標(biāo)設(shè)計的分類?

1、ui圖標(biāo)設(shè)計的分類——交互圖標(biāo)

該圖標(biāo)不僅是用戶界面中的顯示功能，而且參與用戶交互，是導(dǎo)航系統(tǒng)不可缺少的一部分。它們可以被點擊和響應(yīng)，幫助用戶執(zhí)行特定的動作，觸發(fā)相應(yīng)的功能。

2、ui圖標(biāo)設(shè)計的分類——裝飾和娛樂圖標(biāo)

這些圖標(biāo)通常用來增強整個界面的美感和視覺體驗，而不需要明顯的功能。但它們也很重要。這個圖標(biāo)迎合了目標(biāo)受眾的喜好和期望，具有特定的外觀風(fēng)格，提高了整個設(shè)計的可靠性和可信度。更具體地說，這些裝飾性的圖標(biāo)不僅能吸引和留住用戶，還能讓用戶的整體體驗更加積極。裝飾圖標(biāo)通常是季節(jié)性和周期性的。

3、ui圖標(biāo)設(shè)計的分類——應(yīng)用程序圖標(biāo)

應(yīng)用程序圖標(biāo)表示不同操作系統(tǒng)平臺上不同數(shù)字產(chǎn)品的入口和品牌。它是數(shù)字產(chǎn)品的標(biāo)識符號。在大多數(shù)情況下，它將品牌標(biāo)志和顏色融入到圖標(biāo)設(shè)計中。一些圖標(biāo)將使用吉祥物和公司視覺標(biāo)志的顏色組合。一個好的應(yīng)用圖標(biāo)設(shè)計實際上是市場調(diào)研和品牌設(shè)計的結(jié)合。它的目標(biāo)是創(chuàng)建一個引人注目的設(shè)計，不會讓用戶在屏幕上快速找到它。

同時，ui圖標(biāo)設(shè)計的分類往往作為行為的視覺輔助元素存在于文本中，以提高對信息的識別能力。大多數(shù)時候，用戶會使用這些解釋性圖標(biāo)來獲取信息，而不是匹配文本。環(huán)球網(wǎng)校將會持續(xù)更新ui設(shè)計的相關(guān)資訊及技巧，也可以點擊本站的其他文章進(jìn)行學(xué)習(xí)。

以上就是小編對于設(shè)計圖標(biāo)問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。