UI 界面圖標(biāo)設(shè)計(jì)的 10 個(gè)關(guān)鍵細(xì)節(jié)：使用光柵框架確保圖標(biāo)視覺重量一致，設(shè)計(jì)時(shí)注意像素網(wǎng)格重要性、優(yōu)先 2 像素邊框，從最復(fù)雜圖標(biāo)開始設(shè)計(jì)以保持細(xì)節(jié)層次統(tǒng)一，控制相鄰元素最小間隙、避免輪廓 “粘滯”，去除重復(fù)圖形元素以簡(jiǎn)化設(shè)計(jì)，保持圖標(biāo)風(fēng)格（如角度、線性 / 填充）一致，基于 8 像素網(wǎng)格等二倍數(shù)度量系統(tǒng)設(shè)計(jì)，確保輪廓節(jié)點(diǎn)對(duì)齊、尺寸為整數(shù)，清理 SVG 代碼中的冗余圖層，同時(shí)強(qiáng)調(diào)這些建議需靈活應(yīng)用而非刻板遵循。

按鈕組(ButtonGroup)是一個(gè)將多個(gè)按鈕以可視化的方式組合在在一起的組件,幫助用戶快速識(shí)別并操
作相關(guān)操作。在M3Expressive中,按鈕組通過增強(qiáng)按鈕間的交互、布局適配以及層級(jí)表現(xiàn)力,提升
了界面的靈活性。

為什么要分組按鈕?
現(xiàn)有的按鈕只是簡(jiǎn)單地并排放置,缺乏任何鏈接交互或按鈕之間的視覺統(tǒng)一。
拼中人。簡(jiǎn)單
Co
在Material3中,我們將按鈕組定義為獨(dú)立的組件,以實(shí)現(xiàn)更豐富的表現(xiàn)力和自適應(yīng)的布局,并提出
了一種名為Connected Button Group的新形式來(lái)取代Segmentted Button的作用。
本文我們將了解新增按鈕組的功能和使用方法。如果您想了解更多關(guān)于Expressive新增的Split Button

配置按鈕組

容器
按鈕組可以包含各種元素,例如圖標(biāo)、文本按鈕等,但其核心概念是"容器",它是一種更高級(jí)的結(jié)構(gòu),
包裹著這些元素并控制其布局和交互。因此,將按鈕組理解為一個(gè)充當(dāng)按鈕容器的容器,而不是按鈕的
集合,似乎更準(zhǔn)確。

按鈕組的類型
按鈕組分為標(biāo)準(zhǔn)按鈕組和聯(lián)動(dòng)按鈕組。

標(biāo)準(zhǔn)按鈕組
使用標(biāo)準(zhǔn)按鈕組將獨(dú)立的操作按鈕并排放置。
每個(gè)按鈕都保持圓潤(rùn)的形狀,并且按鈕之間有一定的間距。在此組中,選定的按鈕可以改變寬度或形
狀,并且這種變化通常會(huì)影響相鄰的按鈕。整個(gè)按鈕組被設(shè)計(jì):為一個(gè)有機(jī)的整體。
一般適合展現(xiàn)保存、取消、刪除等主要操作,并且按鈕的大小和樣式根據(jù)上下文靈活調(diào)整。

鏈接按鈕組
連接按鈕組是一種主要用于允許選擇多個(gè)選項(xiàng)的組件。現(xiàn)有的分段按鈕將被連接按鈕組取代。
按鈕之間物理連接、共享邊框或以一致的高度和寬度對(duì)齊。用戶可以選擇一個(gè)或多個(gè)按鈕,并且只有選中的按鈕會(huì)在視覺上突出顯示。這種設(shè)計(jì)可以有效地傳過達(dá)清晰的選擇狀態(tài),而不會(huì)影響其他按鈕。

它主要用于替代分段按鈕的作用,例如過濾、視圖切換和排序選項(xiàng)。

如何使用按鈕組

按鈕組使您的產(chǎn)品更具表現(xiàn)力。
標(biāo)準(zhǔn)按鈕組增加了相鄰按鈕之間的交互,使它們相互響應(yīng)。選擇標(biāo)準(zhǔn)組內(nèi)的按鈕時(shí),會(huì)發(fā)生以下變化:
所選按鈕的形狀和寬度將會(huì)改變。
選定的切換按鈕也會(huì)改變顏色。
相鄰的按鈕移動(dòng)并暫時(shí)改變寬度。

僅在重要的交互時(shí)使用形狀變化。
您可以使用不同的按鈕類型、寬度和顏色組合來(lái)強(qiáng)調(diào)重要元素,并在視覺上對(duì)相關(guān)按鈕進(jìn)行分組。默認(rèn)
情況下,標(biāo)準(zhǔn)按鈕組中的所有按鈕應(yīng)具有相同的尺寸(XS到XL)和形狀(圓形或方形)。
·只有在英雄時(shí)刻,您才應(yīng)該在群體中使用不同尺寸。
?混合尺寸并不常用。
僅當(dāng)選擇按鈕或需要添加含義或?qū)Ρ葧r(shí)才應(yīng)使用不同的形狀。
區(qū)當(dāng)選擇這邊以而安添加古文現(xiàn)對(duì)比的才應(yīng)使用個(gè)問的形狀。

可以使用一組鏈接的按鈕在類似的操作之間切換。
鏈接按鈕組可幫助用戶選擇選項(xiàng)、切換視圖或?qū)R頁(yè)面上的元素。它們的行為與標(biāo)準(zhǔn)按鈕組類似,但不
會(huì)影響相鄰的按鈕。鏈接按鈕組應(yīng)取代已棄用的分段按鈕。

如果按鈕內(nèi)容彼此關(guān)聯(lián)且可選,請(qǐng)使用鏈接按鈕組。在購(gòu)物應(yīng)用中,鏈接按鈕組用于選擇商品的容量,
因此,密切相關(guān)的操作在鏈接按鈕組中效果更佳。

使用一組鏈接按鈕來(lái)實(shí)現(xiàn)單選或多選模式。
對(duì)于使用切換按鈕的單選或多選模式,應(yīng)使用鏈接按鈕組。如果所有按鈕均不可切換,則不應(yīng)使用鏈接
按鈕組。

一組鏈接按鈕被配置為填充其所在頁(yè)面或區(qū)域的寬度,這會(huì)導(dǎo)致內(nèi)部按鈕的寬度也隨之增加。在寬屏
上,建議設(shè)置最大寬度,以防止按鈕組過寬。

可以根據(jù)窗口大小手動(dòng)調(diào)整按鈕的寬度、大小和填充。
按鈕組應(yīng)在布局中移動(dòng)到一行,并且不應(yīng)換行。您可以垂直堆疊多個(gè)按鈕組,以使項(xiàng)目保持緊密排列,
但按鈕組之間不能進(jìn)行垂直交互。

手動(dòng)調(diào)整圖標(biāo)按鈕的寬度時(shí),避免將其拉伸得太寬。

您還可以根據(jù)窗口大小手動(dòng)調(diào)整一組按鈕的大小、形狀和填充。
在小窗口中,最好使用較小、較窄的按鈕來(lái)容納按鈕組中的所有按鈕,而在較大的屏幕上,最好使用較
大、較寬的按鈕來(lái)有效地填充可用空間。
靈活按鈕或按鈕組會(huì)根據(jù)窗口大小自動(dòng)調(diào)整其寬度。

必須在布局和設(shè)備之間保持一致的層次結(jié)構(gòu)。
當(dāng)窗口變大時(shí),您應(yīng)該利用顏色和大小等屬性來(lái)確保每個(gè)按鈕保持其視覺層次。例如,主要操作按鈕在
所有窗口尺寸下都應(yīng)保持最大、最寬且視覺上最突出。

根據(jù)屏幕的大小,按鈕應(yīng)該在榮單中隱藏或重新顯示。
在小窗口中,您可以將按鈕組末尾的按鈕設(shè)置為折疊成榮單,然后在窗口大小增加時(shí)重新顯示。建議將
榮單放置在按鈕組的末尾。按鈕組外部的按鈕不受按鈕組行為的影響。

在標(biāo)準(zhǔn)組中,當(dāng)您按下一個(gè)按鈕時(shí),相鄰的按鈕也會(huì)改變寬度...
按下按鈕時(shí),其寬度和形狀會(huì)發(fā)生變化。在標(biāo)準(zhǔn)按鈕組中,按皮下按鈕也會(huì)影響相鄰按鈕的寬度。相比之
下,在鏈接按鈕組中,只有按下的按鈕會(huì)改變形狀,其他按鈕丑不受影響。

所選按鈕應(yīng)改變形狀以實(shí)現(xiàn)視覺區(qū)分。
選定的按鈕應(yīng)從圓形變?yōu)榉叫?或從方形變?yōu)閳A形。

鏈接按鈕組和分段按鈕之間有什么區(qū)別?
雖然兩者的功能相同,但可以說(shuō)它們被納入了一個(gè)按鈕組,以實(shí)現(xiàn)富有表現(xiàn)力的交互。

鏈接到現(xiàn)有分段按鈕的一組按鈕。
分段按鈕也允許單選或多選,但其配置相對(duì)固定,并且視覺呈現(xiàn)受到限制。
鏈接按鈕組在調(diào)整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺交互也得到了增強(qiáng),例如
根據(jù)選擇狀態(tài)改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會(huì)在視覺上突出顯示,從而提供
清晰的反饋。
Expressive在這種靈活性和表現(xiàn)力的基礎(chǔ)上,逐漸減少分段按鈕的的使用,轉(zhuǎn)而采用鏈接按鈕組作為替
代。

綜上所述

按鈕組是實(shí)用的組件,能夠直觀地將相關(guān)操作分組,并為用戶提供清晰的上下文。它們旨在直觀地展示
按鈕之間的關(guān)系,并根據(jù)屏幕尺寸或具體情況靈活操作,從而在不同界面上提供一致的體驗(yàn)。標(biāo)準(zhǔn)按鈕
組有利于實(shí)現(xiàn)交互和層級(jí)結(jié)構(gòu),而鏈接按鈕組則有利于清晰的選擇結(jié)構(gòu)。然而,形狀、尺寸設(shè)置以及響
應(yīng)式設(shè)計(jì)需要精細(xì)的設(shè)計(jì)。
Material3取代了現(xiàn)有的分段按鈕,并提出將一組按鈕作為獨(dú)立組件,以實(shí)現(xiàn)富有表現(xiàn)力的UI組合。
這種設(shè)計(jì)超越了簡(jiǎn)單的按鈕排列,全面考慮了交互、布局和層級(jí),指明了提升整個(gè)產(chǎn)品一致性和可用性
的方向。

?“三維圖標(biāo)設(shè)計(jì)寶典” 方法論，強(qiáng)調(diào)從前期構(gòu)思（分析競(jìng)品如馬蜂窩與本品飛豬的圖標(biāo)類型、配色、風(fēng)格及核心辨識(shí)點(diǎn)，通過關(guān)鍵詞腦暴鎖定 “品質(zhì)、活力、青春” 方向并產(chǎn)出情緒版）、繪制圖標(biāo)（具象功能、簡(jiǎn)化結(jié)構(gòu)、確定基本形，融入飛豬品牌超級(jí)符號(hào)，添加毛玻璃質(zhì)感等細(xì)節(jié)）到走查圖標(biāo)（從辨識(shí)度、統(tǒng)一性、美感度、差異化四方面檢查，如類型、風(fēng)格、體量感統(tǒng)一，融入品牌符號(hào)增強(qiáng)差異化）的完整流程，助設(shè)計(jì)師提升過稿率。

你只需要做三件事情，就可以讓你做出足夠優(yōu)秀的作品

第一：找到合適的圖標(biāo)素材

第二：增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

第三：給設(shè)計(jì)素材加入自己的想法

我們這次做的圖標(biāo)分別為：通知、商城、發(fā)現(xiàn)、我的。

第一：找到合適的圖標(biāo)素材

我就拿最常用的阿里巴巴圖標(biāo)庫(kù)，打開網(wǎng)址，找通知圖標(biāo)，直接下載第一頁(yè)，第 1 排第 2 個(gè)：

接下來(lái)是商城圖標(biāo)，繼續(xù)搜索商城，我們選用第一頁(yè)，第 2 排第 2 個(gè)：

相同的方式，我們找到以下四個(gè)圖標(biāo)的原始素材：

這里面我們需要注意，在找素材的時(shí)候，你至少需要找到一兩個(gè)不太一樣的圖標(biāo)，否則整體就會(huì)比較普通，我們現(xiàn)在這樣看上去，第四個(gè)“我的”圖標(biāo)，相對(duì)來(lái)說(shuō)不一樣一點(diǎn)，至少?zèng)]那么常見：

第二：增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

有了素材之后，我們首先要讓他們看起來(lái)是一套的，所以在統(tǒng)一性上需要優(yōu)化，先優(yōu)化大小和線條粗細(xì)：

大小和粗細(xì)優(yōu)化完之后，我們?cè)賰?yōu)化下圓角統(tǒng)一性，現(xiàn)在很明顯，只有第二個(gè)圖標(biāo)是圓潤(rùn)的，其他的都是有點(diǎn)硬朗的，可以進(jìn)行統(tǒng)一下：

直角圓角統(tǒng)一了之后，還有一個(gè)統(tǒng)一性就是斷線，只有第二個(gè)沒有斷開的設(shè)計(jì)，所以我們?cè)侔焉坛沁M(jìn)行斷線處理：

第三：給設(shè)計(jì)素材加入自己的想法

大家要明白，雖然我們可以直接下載圖標(biāo)素材，而且可以通過審美讓他們變得相對(duì)精致統(tǒng)一，但素材畢竟還是通用的，我們還是需要融入自己的想法和設(shè)計(jì)，不能完全依賴素材，舉一個(gè)最簡(jiǎn)單的例子，“我的”這個(gè)圖標(biāo)，他的腦袋是圓形的，那我們是不是可以把他改成矩形的？

比如一些細(xì)節(jié)的調(diào)整，像通知圖標(biāo)，感覺有點(diǎn)禿，是不是可以讓中間伸出一點(diǎn)寬度來(lái)：

細(xì)微調(diào)整之后，如果覺得還不夠，我們還可以繼續(xù)添加新的設(shè)計(jì)語(yǔ)言，比如增加配色點(diǎn)綴：

就這樣，這幾個(gè)圖標(biāo)，漸漸的就成為了你自己的作品！

我們?cè)诜胚m當(dāng)?shù)陌b一下：

我們?cè)賹?duì)比一下原始的素材：

效果還是提升很大的！

所以，做任何事情，一定要講究方法，不能死腦筋，否則進(jìn)步就很慢。

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

編輯導(dǎo)語(yǔ)：各大APP的圖標(biāo)都各有特點(diǎn)，圖標(biāo)的設(shè)計(jì)也是一門學(xué)問。在這篇文章中，作者全面解析了各類APP圖標(biāo)設(shè)計(jì)背后的用意，一起學(xué)習(xí)一下吧。

如果說(shuō)一個(gè)人的臉面、衣著打扮是給陌生人的第一印象，那么APP的應(yīng)用圖標(biāo)風(fēng)格與氣質(zhì)就是留給新用戶的第一印象，關(guān)系著用戶是否對(duì)這個(gè)APP感興趣、是否會(huì)打開應(yīng)用介紹、是否會(huì)點(diǎn)擊下載按鈕起著決定性的作用。

一個(gè)好的應(yīng)用圖標(biāo)有著無(wú)限可能，無(wú)形中對(duì)用戶產(chǎn)生強(qiáng)大的吸引力，并有一種想要了解的沖動(dòng)，況且圖形本身就能讓人充分發(fā)揮想象力，這就是為什么不管在哪個(gè)應(yīng)用市場(chǎng)第一眼看到的是應(yīng)用圖標(biāo)，而非應(yīng)用名稱。

在一部手機(jī)就能解決很多問題的互聯(lián)網(wǎng)時(shí)代，相信每個(gè)人都有下載幾十上百個(gè)APP，琳瑯滿目的列表，應(yīng)用圖標(biāo)是否能在第一時(shí)間抓住用戶眼球（目標(biāo)明確或鐵粉除外）非常重要，一個(gè)視覺傳達(dá)清晰且有吸引力的圖標(biāo)能提升用戶點(diǎn)擊率，即便用戶只使用過一次，相對(duì)來(lái)說(shuō)，印象也會(huì)更深刻。

本文根據(jù)筆者對(duì)大量應(yīng)用圖標(biāo)的分析、結(jié)合設(shè)計(jì)準(zhǔn)則進(jìn)行總結(jié)，希望能幫助大家在設(shè)計(jì)過程中規(guī)避掉一些常見的問題，歡迎一起探討、取長(zhǎng)補(bǔ)短、共同進(jìn)步。

分享目錄

1. 四大設(shè)計(jì)原則
2. 色彩的表現(xiàn)形式
3. 主體圖形分類
4. 背景圖案及元素
5. 主體圖形的表現(xiàn)手法
6. 應(yīng)用圖標(biāo)設(shè)計(jì)流程
7. 總結(jié)

一、四大設(shè)計(jì)原則

應(yīng)用圖標(biāo)代表產(chǎn)品的外在形象，設(shè)計(jì)的精美與否決定著用戶的第一印象，是否產(chǎn)生打開的欲望跟當(dāng)前圖標(biāo)的視覺所傳達(dá)的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標(biāo)雖然不同于設(shè)計(jì)LOGO，表現(xiàn)方式也千變?nèi)f化，但必定有自身的設(shè)計(jì)準(zhǔn)則要去遵守，利用設(shè)計(jì)的手段將視覺傳播的價(jià)值最大化。

1. 可識(shí)別性

首先，應(yīng)用圖標(biāo)需要盡量簡(jiǎn)約。過于復(fù)雜的圖標(biāo)會(huì)增加用戶的理解成本、甚至誤導(dǎo)用戶，但如果過于追求簡(jiǎn)約，缺乏細(xì)節(jié)、個(gè)性化以及必要的隱喻信息，也會(huì)因過于單調(diào)，造成表意不明確等問題。

簡(jiǎn)約并非簡(jiǎn)單，設(shè)計(jì)師需要通過專業(yè)的知識(shí)進(jìn)行合理的簡(jiǎn)化，以提升應(yīng)用圖標(biāo)的設(shè)計(jì)品質(zhì)，方便用戶在不同場(chǎng)景中都能清晰的辨認(rèn)。其次，需表意明確、易于理解。

應(yīng)用圖標(biāo)代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢(shì)，要讓用戶第一眼就能識(shí)別出所代表的含義，貼近用戶的心理預(yù)期。

簡(jiǎn)約易識(shí)別是應(yīng)用圖標(biāo)必備的基礎(chǔ)屬性之一，這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標(biāo)主視覺的原因，因?yàn)閘ogo設(shè)計(jì)考慮到了方方面面以及后續(xù)延展的問題，即便有些logo較為復(fù)雜，也會(huì)通過提取局部元素、吉祥物、主體色等方式來(lái)強(qiáng)化應(yīng)用圖標(biāo)屬性，給用戶形成獨(dú)特的記憶，以提升應(yīng)用的下載量和使用率。

2. 關(guān)聯(lián)性

應(yīng)用圖標(biāo)應(yīng)該與產(chǎn)品的屬性、品牌有極強(qiáng)的關(guān)聯(lián)性，通過品牌延展賦予產(chǎn)品更強(qiáng)的生命力，讓用戶從接觸應(yīng)用圖標(biāo)的第一眼開始、再到后面的使用，整個(gè)過程始終都能保持清晰且統(tǒng)一的品牌認(rèn)知，通過和諧統(tǒng)一的視覺效果，帶來(lái)更好的用戶體驗(yàn)。

應(yīng)用圖標(biāo)需要與品牌之間必須保持高度的一致，著重從以下幾點(diǎn)體現(xiàn)：

1）LOGO

毫無(wú)疑問，用品牌logo作為主體圖形是最佳選擇，結(jié)合品牌色搭配使用，能將產(chǎn)品核心理念、品牌形象的傳播效果達(dá)到極致，在APP應(yīng)用市場(chǎng)中，大家會(huì)發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標(biāo)的主視覺圖形。

2）品牌色

品牌色即主體色，將貫穿APP所有頁(yè)面的元素組件。眾所周知，每種顏色都有其特定的含義，能傳遞給用戶不同的心理感受。用主體色作為應(yīng)用圖標(biāo)的背景色，可以烘托出產(chǎn)品的情感氛圍，并與進(jìn)入應(yīng)用后的主體色遙相呼應(yīng)，以最小的視覺跳躍性將前后關(guān)聯(lián)，強(qiáng)化用戶對(duì)產(chǎn)品的記憶感知。

3）IP/吉祥物

吉祥物屬于品牌logo延展的一部分， 也是產(chǎn)品的靈魂。當(dāng)logo較為復(fù)雜時(shí)，因移動(dòng)設(shè)備應(yīng)用圖標(biāo)位置空間有限，logo細(xì)節(jié)無(wú)法在短時(shí)間被用戶捕捉，不宜展示時(shí)，使用IP/吉祥物或其局部元素代替也是不錯(cuò)的選擇。

4）產(chǎn)品名稱

如果說(shuō)logo是產(chǎn)品的臉面，通過暗示和隱喻給用戶無(wú)限遐想并讓用戶記住它的樣子，那么名稱的出現(xiàn)就相當(dāng)于產(chǎn)品主動(dòng)進(jìn)行了自我介紹，并讓用戶知道如何稱呼它。

將產(chǎn)品名稱作為應(yīng)用圖標(biāo)需謹(jǐn)慎使用：首先，文字傳達(dá)的信息量有限：其次，用戶對(duì)于圖形的理解效率要優(yōu)于文字；再者，應(yīng)用圖標(biāo)都會(huì)有對(duì)應(yīng)的產(chǎn)品名稱展示（應(yīng)用市場(chǎng)在右、桌面在下方），多少有些信息重復(fù)。

所以大家見到的應(yīng)用圖標(biāo)主體是產(chǎn)品名稱的不外乎兩種情況，一種是產(chǎn)品本身將名稱設(shè)計(jì)成字體logo，例如美團(tuán)、懶飯；另一種是將產(chǎn)品名稱作為logo的輔助信息提示，例如繽紛生活。

以上是應(yīng)用圖標(biāo)與品牌屬性關(guān)聯(lián)最常見的四種方式，在設(shè)計(jì)中可靈活搭配，使用兩種及以上的方式組合，能將品牌傳播的途徑發(fā)揮到最大值。

3. 差異化

筆者上小學(xué)時(shí)，曾經(jīng)在一次彩鉛繪畫作業(yè)中得到了老師的真心夸贊，但內(nèi)心卻備受打擊。老師對(duì)著我畫的桃子說(shuō)“這西紅柿畫的太像了”。

舉這個(gè)例子似乎并不恰當(dāng)，但結(jié)果是驚人的相似，筆者想要陳述的一個(gè)觀點(diǎn)是，不要讓你辛苦做出的設(shè)計(jì)成為別人的嫁衣，讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。

目前，應(yīng)用市場(chǎng)中的APP數(shù)量巨大，且還處于增長(zhǎng)的趨勢(shì)，同行業(yè)的圖標(biāo)設(shè)計(jì)同質(zhì)化相當(dāng)嚴(yán)重。想要讓自身產(chǎn)品應(yīng)用圖標(biāo)脫穎而出，就有必要在設(shè)計(jì)之前做好競(jìng)品分析，借鑒競(jìng)品的優(yōu)點(diǎn)，在突出自身產(chǎn)品核心特征、屬性的基礎(chǔ)上，還要用不同的表現(xiàn)手法突出其差異性，給用戶留下獨(dú)特的印象，避免同質(zhì)化。

4. 可用性

應(yīng)用圖標(biāo)在設(shè)計(jì)完成之后（測(cè)試小組）、上線后（用戶反饋）進(jìn)行可用性測(cè)試，主要針對(duì)圖標(biāo)對(duì)用戶的吸引力、識(shí)別度等問題作進(jìn)一步優(yōu)化，以確保圖標(biāo)在不同場(chǎng)景中都能被用戶清晰識(shí)別并提升印象。

雖然可用性測(cè)試存在設(shè)計(jì)之后，但這一環(huán)節(jié)至關(guān)重要，它決定著產(chǎn)品的下載量以及使用率。

二、圖標(biāo)顏色的表現(xiàn)形式

1. 單色圖標(biāo)

單色圖標(biāo)通常以品牌色作為背景色、logo以反白的形式呈現(xiàn)，既能突出品牌色、還能用于烘托主體圖形，不過這種方式僅適合色值單一的logo，多色值可能會(huì)與背景色產(chǎn)生融合或色彩反差太大影響視覺傳達(dá)效果。另外，如果logo視覺重量較大，也可使用白色背景+原品牌色logo，這樣會(huì)更直觀。

單色應(yīng)用圖標(biāo)雖然色彩比較單一、表現(xiàn)形式也受到局限，但視覺清晰、簡(jiǎn)潔且識(shí)別性強(qiáng)，如果能運(yùn)用其他設(shè)計(jì)手法豐富圖標(biāo)細(xì)節(jié)就再好不過了。

2. 多色圖標(biāo)

多色圖標(biāo)使用了兩種及以上的顏色，更多是直接使原多色彩的logo圖形+白色背景，無(wú)需任何加工，控制好尺寸規(guī)范就行。如果是運(yùn)營(yíng)推廣所需，如春節(jié)、618、雙11等活動(dòng)，會(huì)對(duì)應(yīng)用圖標(biāo)加以其他色彩烘托、點(diǎn)綴元素或標(biāo)簽等，色彩就會(huì)更多，但一般都具有時(shí)效性，活動(dòng)過期即圖標(biāo)復(fù)原。

多色圖標(biāo)的細(xì)節(jié)、層次更加豐富，設(shè)計(jì)時(shí)確保各色彩搭配協(xié)調(diào)，一旦因色彩過多造成視覺混亂，就得不償失了。

3. 漸變圖標(biāo)

無(wú)論是單色還是多色，添加漸變會(huì)讓應(yīng)用圖標(biāo)更加細(xì)膩、耐看。漸變的表現(xiàn)手法應(yīng)用廣泛，簡(jiǎn)單的漸變能讓圖標(biāo)細(xì)節(jié)豐富，同時(shí)也具備空間感和微立體感。

設(shè)計(jì)漸變色圖標(biāo)需注意圖形銜接處的對(duì)比度，花里胡哨的漸變色會(huì)拉低品質(zhì)感，要確保色彩的和諧，讓圖標(biāo)視覺清晰且容易識(shí)別。

4. 顏色疊加

單色、多色或是漸變都可通過調(diào)整不透明度、圖層疊加的方式來(lái)豐富應(yīng)用圖標(biāo)細(xì)節(jié)，相比純粹的漸變，立體感和空間感更強(qiáng)。使用顏色疊加需注意色彩對(duì)比及明暗關(guān)系，否則會(huì)衍生出臟亂的顏色。

5. 色環(huán)的運(yùn)用

環(huán)形構(gòu)圖為主，由多個(gè)元素復(fù)制并以統(tǒng)一的中心點(diǎn)、旋轉(zhuǎn)角度，旋轉(zhuǎn)衍生出一個(gè)主體圖形。這種應(yīng)用圖標(biāo)的設(shè)計(jì)構(gòu)圖飽滿、色彩豐富，能給用戶傳遞出輕松愉快的視覺體驗(yàn)。

需要注意的是，由于顏色較多，至少在三種顏色及以上，否則無(wú)法構(gòu)成色環(huán)類的主體圖形（錯(cuò)覺）。如果沒有超強(qiáng)的配色功底，最好按照色環(huán)的順序依次取色，即便沒有太大的優(yōu)勢(shì)，但至少不會(huì)出錯(cuò)。

三、主體圖形的分類

一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該是多元素、多信息結(jié)合運(yùn)用，才能達(dá)到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設(shè)計(jì)師們對(duì)其進(jìn)行拆解，提取局部元素、色彩、名稱等信息進(jìn)行二次創(chuàng)作，從原則上來(lái)說(shuō)，是一次線上logo的設(shè)計(jì)。

應(yīng)用圖標(biāo)種類繁多，切不可盲目跟風(fēng)，需經(jīng)過認(rèn)真的分析、研究，找到最適合自身產(chǎn)品的才是最重要的，且每種類型并非獨(dú)立，在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1）單中文字體

僅次于圖形logo的表現(xiàn)方式，通常會(huì)在產(chǎn)品名稱中提取一個(gè)具有代表性的文字對(duì)筆畫、結(jié)構(gòu)等進(jìn)行再設(shè)計(jì)。基于國(guó)人文化的優(yōu)勢(shì)以及對(duì)漢字的敏感度，既能降低用戶對(duì)應(yīng)用圖標(biāo)的認(rèn)知成本、還能根據(jù)產(chǎn)品特性設(shè)計(jì)出差異化的視覺效果。

不過因?yàn)槲淖止P畫的原因，單個(gè)文字提取難度較大，避免信息傳遞有誤或影響識(shí)別度，建議選擇筆畫較少且具有特性/代表性的文字，若達(dá)不到條件，最好選擇其他表現(xiàn)方式。

2）多中文字體

使用兩個(gè)及以上漢字，大多直接將產(chǎn)品名稱用在圖當(dāng)中，對(duì)用戶來(lái)說(shuō)更容易記憶，有利于品牌推廣。相比單字體，設(shè)計(jì)感會(huì)受到一定的局限，不宜做過于夸張的表現(xiàn)方式，因文字較多，設(shè)計(jì)時(shí)一定要注意文字的協(xié)調(diào)與可讀性。

多文字圖標(biāo)建議將字?jǐn)?shù)控制在2~6個(gè)范圍內(nèi)，3字以內(nèi)一行顯示，超過3字即兩行顯示且最多不超過兩行，否則會(huì)影響圖標(biāo)的識(shí)別效果。

3）中文、圖形組合

適當(dāng)添加帶有產(chǎn)品特性的輔助圖形，用引導(dǎo)或指向性的方式對(duì)文字進(jìn)行強(qiáng)調(diào)，圖標(biāo)細(xì)節(jié)會(huì)更豐富，可以突出產(chǎn)品想要傳達(dá)的信息、以及不同的氣質(zhì)，還能增加圖標(biāo)的形式感和趣味性。注意添加的圖形不要過于復(fù)雜，不然會(huì)讓信息混亂，適得其反。

4）中文圖形化

根據(jù)單個(gè)字體筆畫的特點(diǎn)進(jìn)行巧妙的變形或延展，會(huì)讓你的應(yīng)用圖標(biāo)更具設(shè)計(jì)感、品質(zhì)好。這種方式對(duì)設(shè)計(jì)功底的要求較高，需要確保字體的識(shí)別度，切勿霸王硬上弓，如果是為了設(shè)計(jì)而設(shè)計(jì)，就違背的信息傳播的初衷。

5）中文、IP形象組合

由產(chǎn)品名稱和IP形象組合而成，這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗(yàn)，讓產(chǎn)品更具親和力，拉近與用戶之間的關(guān)系。例如，IP的喜、怒、哀、樂表情變化分別對(duì)應(yīng)用戶不同的心理感受，以加深用戶對(duì)產(chǎn)品的印象及品牌認(rèn)知。

2. 英文字體

1）單英文字體

單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進(jìn)行創(chuàng)意設(shè)計(jì)，跟中文字體相比，基于字母本身線條的簡(jiǎn)潔及流暢性，再結(jié)合產(chǎn)品特點(diǎn)，很容易設(shè)計(jì)出兼具美感、高識(shí)別度的應(yīng)用圖標(biāo)。

需要明確一點(diǎn)，不管如何創(chuàng)意，也僅局限于在26個(gè)英文字母中選擇，如果想設(shè)計(jì)出差異化的應(yīng)用圖標(biāo)，對(duì)設(shè)計(jì)師來(lái)說(shuō)，是一個(gè)很大的挑戰(zhàn)。

2）多英文字體

跟多中文不同，中文產(chǎn)品名稱在移動(dòng)端基本不會(huì)超出6個(gè)字，而全拼音或英文名則多達(dá)十幾位甚至更多，為了用戶能更好容易識(shí)別、記憶，依然是提取不同拼音或單詞的首字母（中文全稱）進(jìn)行設(shè)計(jì)。

多英文的應(yīng)用圖標(biāo)很很容易形成獨(dú)有的產(chǎn)品簡(jiǎn)稱，更利于用戶記憶，但字母一定不要過多，如果無(wú)法刪減，那就只突出特定的2~4個(gè)字母。

3）其他類型

字母與圖形、IP形象組合以及字母圖形化，其表現(xiàn)方式、設(shè)計(jì)原則與中文字體圖標(biāo)類似，這里不做過多闡述。

3. 數(shù)字符號(hào)

1）數(shù)字設(shè)計(jì)

人們對(duì)于數(shù)字來(lái)說(shuō)是非常敏感的，不存在文化差異或認(rèn)知誤區(qū)，基于數(shù)字便于記憶且容易識(shí)別的特點(diǎn)，將數(shù)字圖形化后應(yīng)用到圖標(biāo)當(dāng)中，會(huì)讓產(chǎn)品具有親和力，有利于品牌傳播。單純的數(shù)字過于簡(jiǎn)單，需增加一些細(xì)節(jié)，豐富圖標(biāo)層次，讓其具備獨(dú)特的記憶點(diǎn)，不然會(huì)顯得單調(diào)。

2）符號(hào)設(shè)計(jì)

每個(gè)符號(hào)都有特定的含義，因此，在選擇符號(hào)作為應(yīng)用圖標(biāo)之前，首先需要了解清楚該符號(hào)是否能體現(xiàn)出產(chǎn)品屬性以及想要表達(dá)的意思，例如“¥”適合攢錢、理財(cái)相關(guān)的應(yīng)用，而“+-×÷”則適合用于計(jì)算器或數(shù)學(xué)相關(guān)的應(yīng)用；其次，符號(hào)跟數(shù)字一樣，都比較簡(jiǎn)單，需經(jīng)過二次創(chuàng)作后才會(huì)使用。

4. 扁平化圖形

1）線性圖形

線性風(fēng)格的應(yīng)用圖標(biāo)能給人一種簡(jiǎn)潔輕快的感覺，設(shè)計(jì)師通過提取產(chǎn)品的品牌信息、功能服務(wù)等進(jìn)行創(chuàng)意設(shè)計(jì)，將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來(lái)達(dá)到信息傳播的目的。

通常以反白的形式出現(xiàn)，背景可以是單色、漸變色或加以輔助圖形點(diǎn)綴。

線性圖形非常適合文藝類簡(jiǎn)約風(fēng)格的應(yīng)用，通過不同的線條帶給用戶不同的心理感受，例如直線代表大方、專業(yè)、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。

設(shè)計(jì)時(shí)，切記圖形不能過于復(fù)雜，否則會(huì)影響其辨識(shí)度，增加用戶的認(rèn)知成本，也不利于品牌推廣。

2）面性圖形

也可稱之為剪影圖形，根據(jù)產(chǎn)品屬性，將日常生活中被大眾所熟知的動(dòng)物、植物、食品、工具、玩具…等事物進(jìn)行簡(jiǎn)化，通過刻畫事物的造型輪廓來(lái)形成獨(dú)立的剪影圖形。

高識(shí)別度的剪影圖形會(huì)讓整體看起來(lái)非常醒目，提高信息傳播的效率，只要控制好造型，即便把圖標(biāo)縮到很小也能清晰辨認(rèn)。

因現(xiàn)實(shí)世界中事務(wù)的復(fù)雜性，被提煉出的圖形如果細(xì)節(jié)過多會(huì)顯的復(fù)雜且不夠干練、細(xì)節(jié)過少則難以辨認(rèn)，所以需要對(duì)圖形進(jìn)行創(chuàng)意加工，最終以確保應(yīng)用圖標(biāo)的功能和美感兼具。

3）幾何圖形

幾何圖形在應(yīng)用圖標(biāo)中使用的很廣泛，可以是線性或面性，表現(xiàn)形式也非常豐富，利用幾何圖形通過單獨(dú)、組合、布爾運(yùn)算等方式形成簡(jiǎn)單且個(gè)性化的創(chuàng)意圖形，帶給用戶簡(jiǎn)約、現(xiàn)代、空間、熱鬧等不同的心理感受。

幾何圖形構(gòu)圖簡(jiǎn)潔，設(shè)計(jì)形式豐富多樣，想設(shè)計(jì)出具備設(shè)計(jì)感和差異化的應(yīng)用圖標(biāo)，很考驗(yàn)設(shè)計(jì)師的創(chuàng)意能力。

5. 卡通形象

對(duì)純色剪影圖形增加太多細(xì)節(jié)，無(wú)疑是將其“大卸八塊”，變成一堆零件，但通過多色、漸變、圖層樣式等表現(xiàn)手法設(shè)計(jì)成卡通形象，就完全不一樣了。

卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力，以及直觀且易于理解和記憶的特質(zhì)，對(duì)品牌形象的塑造、傳播起到了很好作用。

在畫卡通形象時(shí)，需要注意產(chǎn)品主用戶群體的年齡段，切勿一開始就把活潑可愛作為卡通形象的代名詞，避免絕對(duì)低齡化的表達(dá)，同時(shí)需要設(shè)計(jì)師有一定的繪畫功底。

6. 擬人化

利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結(jié)合常見的表情動(dòng)作進(jìn)行圖形化設(shè)計(jì)，相當(dāng)于給原本冷冰冰的圖形賦予了生命力，傳達(dá)出不一樣的情感，而且用戶原本就對(duì)人體元素敏感度更高，更容易打動(dòng)用戶并形成較強(qiáng)的記憶。

擬人化的應(yīng)用圖標(biāo)會(huì)顯得親民，便于拉近與用戶之間的關(guān)系，適度在抽象的圖形上加入情感化（動(dòng)作/表情）表達(dá)，能生動(dòng)、形象的體現(xiàn)出產(chǎn)品獨(dú)有的特性。

如果想要較強(qiáng)的視覺沖擊力，建議元素不要過多，最好是對(duì)某個(gè)單一的元素作放大或特寫處理，讓用戶看到更多的細(xì)節(jié)，也可用夸張、比喻、襯托等表現(xiàn)手法強(qiáng)化特點(diǎn)。

7. 擬物化

擬物化圖標(biāo)使用的比較少，它更偏向于某種行業(yè)類型，例如工具、游戲類型的應(yīng)用，通過超接近于現(xiàn)實(shí)世界中的物體造型，基本不需要用戶思考，一眼就能理解，但也正因?yàn)檫@種特性，信息量的傳播受到很大局限，僅適合單一且大眾化的信息傳達(dá)。

在如今，想同時(shí)融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時(shí)代，顯然不太實(shí)用了。

四、背景圖案及元素

1. 圖形背景

應(yīng)用圖標(biāo)背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應(yīng)的輔助圖形背景，以豐富圖標(biāo)的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過分表達(dá)，以免喧賓奪主。

2. 炫彩背景

當(dāng)主體圖形的結(jié)構(gòu)、色彩不是很復(fù)雜，且產(chǎn)品面對(duì)的是年輕化用戶群體時(shí)，可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計(jì)出炫彩效果，色彩表現(xiàn)豐富的應(yīng)用圖標(biāo)，能帶給用戶更強(qiáng)的視覺沖擊力。色彩可多但不可亂，需要把控好色彩之間的對(duì)比關(guān)系。

3. 運(yùn)營(yíng)標(biāo)簽

常見于在特定的節(jié)日中，例如618、雙11、雙12及傳統(tǒng)節(jié)日等，產(chǎn)品會(huì)存在促銷、打折活動(dòng)，為了更早的讓用戶知道，會(huì)在應(yīng)用圖標(biāo)的某個(gè)區(qū)域以標(biāo)簽的方式出現(xiàn)，起到引導(dǎo)用戶的作用。

不過這種表現(xiàn)方式具有時(shí)效性，活動(dòng)截止即圖標(biāo)樣式復(fù)原。

4. 節(jié)日氛圍

通過配色或節(jié)日相關(guān)的元素點(diǎn)綴，營(yíng)造出一種感同身受的節(jié)日氛圍。例如：春節(jié)期間，部分應(yīng)用圖標(biāo)背景會(huì)調(diào)整為紅色，并使用燈籠、煙花、文案等元素點(diǎn)綴，制造出普天同慶、與用戶同樂的喜慶感，或者在高考期間鼓勵(lì)學(xué)生，少了套路、多了真誠(chéng)，給用戶留下較深的印象。

五、主體圖形的表現(xiàn)手法

1. 對(duì)比

通過元素的大小、長(zhǎng)短、虛實(shí)、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進(jìn)行對(duì)比，形成強(qiáng)烈的反差效果，同時(shí)兼具張力和美感，這也是應(yīng)用圖標(biāo)設(shè)計(jì)中很常見的技法表現(xiàn)之一。

2. 對(duì)稱

對(duì)稱在自然界中隨處可見，在互聯(lián)網(wǎng)設(shè)計(jì)中也是如此，應(yīng)用圖標(biāo)中的主體圖形以對(duì)稱的方式呈現(xiàn)，能給用戶平衡、和諧的感覺，也讓圖標(biāo)更具有觀賞性。

3. 分割

將應(yīng)用圖標(biāo)中的主體圖形分割，賦予不同的顏色、樣式等，明確層級(jí)劃分，可提升圖標(biāo)的美感。例如：將色塊分割成不同的比例、形狀，就能組合成一個(gè)完整的熊貓圖形（百度搜“熊貓剪影”圖片）。

如果適合使用0.168黃金比例分割就再好不過了，這是被公認(rèn)為最具美感的比例。

4. 重復(fù)

將相同或相近的圖形以某種規(guī)律連續(xù)性的排列，相比單調(diào)的圖形，會(huì)更加飽滿。重復(fù)性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點(diǎn)進(jìn)行有序的排列，最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。

需要注意的是基礎(chǔ)圖形不能過于復(fù)雜，一定是有規(guī)律的重復(fù)，否則會(huì)讓圖形變的混亂，無(wú)法形成整體。

5. 重疊

在保證識(shí)別度清晰的前提下，將兩個(gè)或以上的元素相互重疊、交叉在一起，能形成前后左右的層級(jí)關(guān)系，制造空間感，同時(shí)也能將多個(gè)圖形關(guān)聯(lián)在一起，避免圖標(biāo)元素零散或單調(diào)，讓整體性更強(qiáng)，豐富用戶視覺感知。

6. 正負(fù)形

正負(fù)形也是常見的表現(xiàn)手法之一，利用正圖為底，通過減去底層挖空的方式突出（錯(cuò)覺）負(fù)形，將產(chǎn)品特征、屬性及服務(wù)多途徑的傳達(dá)給用戶，可謂是“一石二鳥”。

正負(fù)形圖標(biāo)能將信息傳播最大化，且設(shè)計(jì)感十足，好的正負(fù)形圖標(biāo)能給用戶形成獨(dú)特的記憶點(diǎn)，但設(shè)計(jì)時(shí)需要注意正、負(fù)銜接的順暢度，否則無(wú)法清晰的傳播信息。

六、應(yīng)用圖標(biāo)設(shè)計(jì)流程

1. 發(fā)散思維、尋找隱喻

通過產(chǎn)品屬性、功能或特點(diǎn)進(jìn)行思維發(fā)散，例如：夏天，我們會(huì)想到空調(diào)、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關(guān)聯(lián)的事和物，搜集起來(lái)并做好整理歸類，確定大致的設(shè)計(jì)方向。

2. 分析競(jìng)品、避免同質(zhì)化

確定了大致的設(shè)計(jì)方向，就去找同行業(yè)、同類型或相似的應(yīng)用圖標(biāo)分析其形狀、配色、組合類型等，取長(zhǎng)補(bǔ)短，這也是避免同質(zhì)化非常重要的一個(gè)環(huán)節(jié)，幫助自己在后續(xù)設(shè)計(jì)出具備差異化的應(yīng)用圖標(biāo)做鋪墊。

3. 提取關(guān)鍵詞

可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達(dá)的核心信息，并提煉出關(guān)鍵詞。切記，關(guān)鍵詞不可脫離帶水、表意不明確，一定要夠精煉、能表達(dá)出核心內(nèi)容。關(guān)鍵詞在精不在多，如果太多，需要通過層層遞進(jìn)，篩選出“一主三輔”，要知道這關(guān)系著后續(xù)應(yīng)用圖標(biāo)傳達(dá)信息的精準(zhǔn)度。

4. 圖標(biāo)繪制

將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形，進(jìn)行視覺化提煉，這時(shí)應(yīng)用圖標(biāo)的雛形已經(jīng)形成，再結(jié)合前面所提到的圖形分類、表現(xiàn)手法以及注意事項(xiàng)等，進(jìn)入圖標(biāo)繪制流程。關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范及原則，在之前的《圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識(shí)！》文章中有詳細(xì)說(shuō)明，這里不做闡述。

5. 細(xì)節(jié)處理

基本圖形繪制完成后，通過添加點(diǎn)綴、輔助圖形、背景處理等方式豐富圖標(biāo)細(xì)節(jié)，進(jìn)行精細(xì)化處理，使其更精致，具備高識(shí)別度及品質(zhì)感。

6. 適用性測(cè)試

分別通過移動(dòng)端應(yīng)用商店列表、應(yīng)用詳情、設(shè)置中應(yīng)用列表、桌面以及WEB商店等，對(duì)不同位置的大小、不同的桌面背景進(jìn)行虛擬測(cè)試，以確保在不同場(chǎng)景中都能被用戶高度識(shí)別，如果這些問題等著被用戶發(fā)現(xiàn)，很可能給產(chǎn)品帶來(lái)不利的影響。

7. 輸出切圖

需要對(duì)iOS和Android系統(tǒng)各輸出一套圖標(biāo)，iOS只需一個(gè)1024px的切圖便能適配所有，且無(wú)需設(shè)定圓角。Android則需要多套切圖規(guī)范，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準(zhǔn)設(shè)定為90px（參考值）。

這些固定的尺寸規(guī)范并不在技術(shù)能力范疇，如果實(shí)在不清楚，需要用時(shí)就“百度一下”一大把，或直接找開發(fā)人員拿尺寸都不是難事。

七、總結(jié)

首先，筆者要感謝耐心看到這里的小伙伴，希望總結(jié)的內(nèi)容能幫到大家，在前期設(shè)計(jì)中作為資料參考，避免出現(xiàn)常見的問題，防止進(jìn)入誤區(qū)。

其次，要想設(shè)計(jì)出優(yōu)秀的應(yīng)用圖標(biāo)僅看上述內(nèi)容是遠(yuǎn)遠(yuǎn)不夠的，少不了平時(shí)的多看、多練、多思考，需日積月累，逐漸提升自己的視覺審美、造型提煉、執(zhí)行效率等多方面設(shè)計(jì)能力。

應(yīng)用圖標(biāo)的總結(jié)分享就到這里了，對(duì)你有幫助的話就給筆者點(diǎn)個(gè)贊吧，如果有不同意見，歡迎在評(píng)論區(qū)交流或指正，以便查漏補(bǔ)缺，共同進(jìn)步。

#專欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于 CC0 協(xié)議

蘭亭妙微(www.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

扁平化設(shè)計(jì)這一趨勢(shì)已經(jīng)流行了挺長(zhǎng)時(shí)間，而現(xiàn)在，設(shè)計(jì)風(fēng)向似乎要有所轉(zhuǎn)變了，這或許可以從一些設(shè)計(jì)案例中透露出來(lái)。這篇文章里，作者就從案例出發(fā)，展示了設(shè)計(jì)趨勢(shì)的演變，一起來(lái)看看吧。

設(shè)計(jì)趨勢(shì)來(lái)來(lái)去去，但一個(gè)普遍的趨勢(shì)已經(jīng)流行了很長(zhǎng)時(shí)間，那就是扁平化設(shè)計(jì)，現(xiàn)在也幾乎是無(wú)處不在，UI中的按鈕，Logo，圖形設(shè)計(jì)等等。

最近感覺設(shè)計(jì)風(fēng)向有點(diǎn)變啊，我碰到幾個(gè)例子感覺挺有意思的，似乎是印證了這波轉(zhuǎn)變。

在這篇文章里，我主要聚焦在UI設(shè)計(jì)領(lǐng)域，看看設(shè)計(jì)趨勢(shì)在這方面都經(jīng)歷了哪些變化。

一、扁平化設(shè)計(jì)趨勢(shì)是怎么興起的？

2013 年蘋果推出 iOS 7 后，扁平化設(shè)計(jì)火得一塌糊涂，界面設(shè)計(jì)方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素，但其作為行業(yè)風(fēng)向標(biāo)的影響力依然無(wú)人能及。

從擬物到扁平，iOS 7 帶來(lái)了革命性的設(shè)計(jì)語(yǔ)言飛躍，顛覆了之前 iOS 的視覺風(fēng)格。蒂姆·庫(kù)克將其稱為 “iPhone 以來(lái) iOS 最大的變革”。

看上圖就一目了然（iOS 6 左，iOS 7 右），iOS 7 砍掉了許多元素的 3D 效果，整體扁平了很多。其實(shí)改成這樣是有道理的，畢竟擬物設(shè)計(jì)當(dāng)初是為了讓用戶更快上手新界面，現(xiàn)在大家都習(xí)慣了，設(shè)計(jì)語(yǔ)言也需要更新迭代了。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

十年過去了，絕大部分現(xiàn)代界面設(shè)計(jì)依然在用這種設(shè)計(jì)語(yǔ)言。然而，隨著設(shè)計(jì)逐漸追求更多復(fù)雜性和立體感（是的，又是3D，回到擬物設(shè)計(jì)），一些方面也開始出現(xiàn)變化。讓我們來(lái)看看幾個(gè)近期的例子。

值得說(shuō)的是，盡管蘋果公司在引領(lǐng)扁平化設(shè)計(jì)趨勢(shì)方面發(fā)揮了重要作用，但其實(shí)靈感還是來(lái)自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個(gè)用扁平化設(shè)計(jì)的大廠。

對(duì)這段歷史感興趣的可以看看這篇10年前寫的文章：https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設(shè)計(jì)刷新

先一起看看最近的一個(gè)大廠設(shè)計(jì)改版案例，Reddit最近刷新了它的Logo。你能從上面的圖中看到，相比于舊版，新的設(shè)計(jì)有了一些3D風(fēng)格化。

一直以來(lái)，扁平化logo是主流，但隨著像Pentagram這樣的設(shè)計(jì)大廠都開始探索3D化設(shè)計(jì)風(fēng)格，預(yù)示著扁平化的時(shí)代就快要過去了。

現(xiàn)代的品牌logo設(shè)計(jì)大多是扁平的，因?yàn)檫@樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來(lái)會(huì)怎么玩品牌設(shè)計(jì)。

三、MacOS Big Sur 圖標(biāo)

回到2020年，在那年的11月，蘋果刷新了它們的MacOS圖標(biāo)風(fēng)格。我個(gè)人認(rèn)為，這是在細(xì)節(jié)設(shè)計(jì)上搭配更多3D效果這股趨勢(shì)的源頭，我在網(wǎng)上看到了很多這樣的討論。

從 Big Sur 開始，蘋果就在圖標(biāo)上下功夫，給原生應(yīng)用圖標(biāo)加料，讓它們看起來(lái)不那么乏味。你看上面那些，陰影也深了，漸變也多了，整個(gè)圖標(biāo)更有立體感。

一看蘋果都整 3D 了，不少第三方應(yīng)用開發(fā)商也坐不住了，紛紛改起了自家圖標(biāo)，看起來(lái)更立體了。

蘋果在界面設(shè)計(jì)上向來(lái)引領(lǐng)潮流，這次的新趨勢(shì)，又不知道多少公司和個(gè)人會(huì)跟著玩。

四、Airbnb 新版本設(shè)計(jì)

Airbnb在最近的夏冬主題設(shè)計(jì)更新里，玩了不少 3D 和復(fù)雜設(shè)計(jì)。就拿它們新出的“游客護(hù)照”來(lái)說(shuō)吧，圖標(biāo)就跟真“書”似的，點(diǎn)開交互還有翻書動(dòng)畫，賊逼真。

游客護(hù)照打開后，頂部卡片加了陰影，看著更有立體感，一點(diǎn)都不扁了。

Airbnb 在其他地方也玩兒 3D 了，比如“最受歡迎”那個(gè)地方，評(píng)分都立體起來(lái)了，還有那個(gè)改版后的“選月份”的按鈕，做得跟真表盤似的。

最后，他們冬天的新版本里，插畫也搞起了等角投影風(fēng)格，給你們看下面他們那個(gè)新版本宣傳片就知道了。

五、Shopify更新了設(shè)計(jì)系統(tǒng)

Shopify 對(duì)深受好評(píng)的設(shè)計(jì)系統(tǒng) Polaris 進(jìn)行了重大更新，換了套新花樣！以前那些扁平的按鈕，現(xiàn)在縮小了，還更帶感了，按著賊舒服。

這次重設(shè)計(jì)也不是瞎改，當(dāng)初設(shè)計(jì)團(tuán)隊(duì)說(shuō)扁平化做能讓界面干凈，理解簡(jiǎn)單，用著還效率高。可時(shí)間一長(zhǎng)，商家們就不樂意了，說(shuō)這界面整得“沒勁”、“乏味”還“單調(diào)”。

改設(shè)計(jì)主要是為了把軟件界面打造成 “專業(yè)工具”，更加高大上。改動(dòng)之后，按鈕在點(diǎn)擊時(shí)更爽了一些，就像商家們平時(shí)在用的物理按鍵一般。

探索的2種不同設(shè)計(jì)風(fēng)格

總結(jié)

上面這些案例展示了現(xiàn)代設(shè)計(jì)趨勢(shì)的演變，從扁平化設(shè)計(jì)向更加注重細(xì)節(jié)的方向過渡。

扁平化設(shè)計(jì)固然擁有清晰高效等優(yōu)點(diǎn)，但現(xiàn)代設(shè)計(jì)更傾向于展現(xiàn)層次和深度。設(shè)計(jì)師和開發(fā)者應(yīng)當(dāng)密切關(guān)注這一趨勢(shì)，并做好準(zhǔn)備將相關(guān)元素融入自身系統(tǒng)，尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢(shì)的情況下。

設(shè)計(jì)趨勢(shì)真是一個(gè)輪回。

在做產(chǎn)品設(shè)計(jì)的時(shí)候，UI界面更多是由設(shè)計(jì)師完成，產(chǎn)品僅是提供界面元素和布置，其他的由設(shè)計(jì)師發(fā)揮。但如果產(chǎn)品能了解更多設(shè)計(jì)相關(guān)的知識(shí)，在和設(shè)計(jì)師探討、分析時(shí)會(huì)更有針對(duì)性，也會(huì)讓產(chǎn)品的工作顯得更為專業(yè)。

在當(dāng)今數(shù)字化時(shí)代，我們與各種移動(dòng)應(yīng)用、網(wǎng)頁(yè)和軟件界面打交道，圖標(biāo)就像是這些界面的明星。它們小巧玲瓏、獨(dú)具特色，扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標(biāo)的定義、作用以及在用戶界面中的重要性。

一、UI圖標(biāo)的定義和作用

A. UI圖標(biāo)的定義

UI圖標(biāo)是指用簡(jiǎn)潔明了的小型圖形符號(hào)來(lái)表示特定功能、操作或信息的設(shè)計(jì)元素。圖標(biāo)通過簡(jiǎn)單的形狀和圖像，向用戶傳遞信息和功能，并在界面中起到重要的導(dǎo)航和標(biāo)識(shí)作用。

B. UI圖標(biāo)的作用

• 提供快速識(shí)別：UI圖標(biāo)能夠以簡(jiǎn)單直觀的方式展示功能和操作，使用戶迅速識(shí)別界面元素，快速完成操作。
• 提升用戶體驗(yàn)：UI圖標(biāo)能夠使界面更加直觀、友好和易于使用，用戶無(wú)需過多猜測(cè)，更加自信地與界面互動(dòng)。
• 增加品牌識(shí)別度：UI圖標(biāo)承載著品牌形象，設(shè)計(jì)合理的圖標(biāo)能夠提升品牌的識(shí)別度和記憶性，促進(jìn)用戶與品牌的情感連接。

C. UI圖標(biāo)在用戶界面中的重要性

UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色，其重要性體現(xiàn)在以下幾個(gè)方面：

• 導(dǎo)航和標(biāo)識(shí)功能：UI圖標(biāo)通過視覺上的差異化，幫助用戶快速識(shí)別和定位所需的功能模塊，提供直觀導(dǎo)航，減少操作復(fù)雜度。
• 美觀和統(tǒng)一性：精心設(shè)計(jì)的UI圖標(biāo)能夠增加界面的美感，提升用戶體驗(yàn)。通過一致性的圖標(biāo)設(shè)計(jì)，整個(gè)界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺效果。
• 信息傳遞效果：UI圖標(biāo)通過形狀、顏色和圖像等視覺元素，能夠傳達(dá)具體的信息和功能，使用戶更容易理解界面的意圖和操作方式。
• 增強(qiáng)品牌形象：UI圖標(biāo)能夠?qū)⑵放菩蜗笕谌氲浇缑嬷校纬瑟?dú)特的品牌風(fēng)格和個(gè)性，幫助品牌建立與用戶的情感聯(lián)系。

二、設(shè)計(jì)原則和要素

UI圖標(biāo)設(shè)計(jì)是用戶界面的重要組成部分，它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站，還可以增強(qiáng)整體視覺效果。為了設(shè)計(jì)出高質(zhì)量的UI圖標(biāo)，設(shè)計(jì)師需要遵循一些基本原則和要素。

A. 獨(dú)特性和可識(shí)別性

設(shè)計(jì)具有獨(dú)特特征的圖標(biāo) UI圖標(biāo)應(yīng)該具有獨(dú)特的特征，使其能夠與其他圖標(biāo)區(qū)分開來(lái)。設(shè)計(jì)師可以通過使用不同的形狀、顏色和風(fēng)格來(lái)實(shí)現(xiàn)這一目標(biāo)。同時(shí)，圖標(biāo)的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

避免與其他圖標(biāo)混淆 為了避免UI圖標(biāo)與其他圖標(biāo)混淆，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與其他圖標(biāo)有足夠的區(qū)別。如果圖標(biāo)的形狀和顏色與其他圖標(biāo)過于相似，用戶可能會(huì)難以區(qū)分它們的功能和意義，從而影響用戶的使用體驗(yàn)。

B. 簡(jiǎn)潔性和清晰性

追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì) 簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)可以幫助用戶更快地理解和使用圖標(biāo)。設(shè)計(jì)師應(yīng)該盡可能地簡(jiǎn)化圖標(biāo)的形狀和顏色，避免使用過多的細(xì)節(jié)和復(fù)雜的形狀。簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。

避免過度復(fù)雜化的細(xì)節(jié) 過度復(fù)雜化的細(xì)節(jié)可能會(huì)使圖標(biāo)變得過于復(fù)雜和難以理解。設(shè)計(jì)師應(yīng)該避免使用過多的細(xì)節(jié)和復(fù)雜的形狀，以確保圖標(biāo)的簡(jiǎn)潔性和清晰性。同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色足夠明確，以便用戶能夠輕松地識(shí)別和理解圖標(biāo)的功能和意義。

C. 一致性和統(tǒng)一性

維護(hù)整個(gè)UI界面的一致性風(fēng)格 UI圖標(biāo)應(yīng)該與整個(gè)UI界面的風(fēng)格保持一致。設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義，同時(shí)也可以增強(qiáng)應(yīng)用程序或網(wǎng)站的整體視覺效果。

使用相似的線條、顏色和風(fēng)格 為了實(shí)現(xiàn)一致性和統(tǒng)一性，設(shè)計(jì)師應(yīng)該使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這樣可以使圖標(biāo)與整個(gè)UI界面的風(fēng)格保持一致，同時(shí)也可以使圖標(biāo)的形狀和顏色更加和諧統(tǒng)一。

D. 可視化傳達(dá)

明確圖標(biāo)所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標(biāo)，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀和顏色能夠明確地傳達(dá)

使用適當(dāng)?shù)男螤睢⒎?hào)和顏色傳達(dá)信息 為了確保圖標(biāo)能夠明確地傳達(dá)信息，設(shè)計(jì)師應(yīng)該使用適當(dāng)?shù)男螤睢⒎?hào)和顏色。

例如，一個(gè)圖標(biāo)可能需要使用一個(gè)圓形作為基本形狀，同時(shí)使用一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。

同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

E. 可縮放性和適應(yīng)性

使用矢量圖形實(shí)現(xiàn)圖標(biāo)的可縮放性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性，設(shè)計(jì)師應(yīng)該使用矢量圖形來(lái)實(shí)現(xiàn)圖標(biāo)的可縮放性。

矢量圖形是一種基于數(shù)學(xué)公式的圖形，它們可以在不失真的情況下進(jìn)行任意大小的縮放。

這意味著：即使圖標(biāo)被放大或縮小，它們的形狀和顏色也不會(huì)發(fā)生變化。

確保在不同屏幕和設(shè)備上的可用性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性，設(shè)計(jì)師應(yīng)該考慮圖標(biāo)在不同分辨率和屏幕尺寸下的表現(xiàn)。

例如，設(shè)計(jì)師應(yīng)該確保圖標(biāo)的大小和形狀適合不同屏幕和設(shè)備的顯示。

同時(shí)，設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的顏色在不同的屏幕和設(shè)備上都能夠保持一致，以幫助用戶更快地識(shí)別和理解圖標(biāo)的功能和意義。

三、設(shè)計(jì)流程和技巧

UI圖標(biāo)設(shè)計(jì)需要遵循一定的流程和技巧，以確保圖標(biāo)的高質(zhì)量和可用性。

以下是一些常用的設(shè)計(jì)流程和技巧：

A. 需求分析和功能定義

在開始設(shè)計(jì)之前，設(shè)計(jì)師需要了解UI圖標(biāo)的使用場(chǎng)景和目的。這可以幫助設(shè)計(jì)師確定圖標(biāo)所代表的含義和功能，以確保圖標(biāo)的準(zhǔn)確性和可用性。

B. 創(chuàng)意和草圖階段

在進(jìn)行創(chuàng)意和草圖階段，設(shè)計(jì)師應(yīng)該進(jìn)行創(chuàng)意思維和頭腦風(fēng)暴，以產(chǎn)生出多種不同的設(shè)計(jì)方案。同時(shí)，設(shè)計(jì)師也應(yīng)該從簡(jiǎn)單的草圖開始構(gòu)思圖標(biāo)設(shè)計(jì)，以確保圖標(biāo)的可行性和可實(shí)現(xiàn)性。

C. 細(xì)化和完善設(shè)計(jì)

在細(xì)化和完善設(shè)計(jì)階段，設(shè)計(jì)師應(yīng)該使用矢量工具進(jìn)行圖標(biāo)設(shè)計(jì)，并重點(diǎn)關(guān)注細(xì)節(jié)和清晰度的提升。這可以幫助設(shè)計(jì)師創(chuàng)建出具有獨(dú)特特征的圖標(biāo)，并確保圖標(biāo)的可縮放性和適應(yīng)性。

D. 反饋和優(yōu)化

在反饋和優(yōu)化階段，設(shè)計(jì)師應(yīng)該向用戶和團(tuán)隊(duì)收集反饋，并根據(jù)反饋進(jìn)行圖標(biāo)的優(yōu)化和調(diào)整。這可以幫助設(shè)計(jì)師確保圖標(biāo)的準(zhǔn)確性和可用性，并根據(jù)用戶的需求和期望進(jìn)行調(diào)整和優(yōu)化。

四、設(shè)計(jì)最佳實(shí)踐和案例研究

UI圖標(biāo)設(shè)計(jì)是一個(gè)重要的設(shè)計(jì)領(lǐng)域，它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標(biāo)設(shè)計(jì)案例和分析。

A. 探索成功的UI圖標(biāo)設(shè)計(jì)案例

成功的UI圖標(biāo)設(shè)計(jì)案例可以幫助設(shè)計(jì)師了解和學(xué)習(xí)一些設(shè)計(jì)最佳實(shí)踐和技巧。成功的圖標(biāo)有很多以下只列舉兩個(gè)圖標(biāo)設(shè)計(jì)案例：

1. Airbnb圖標(biāo)：Airbnb是一個(gè)在線旅行房屋租賃平臺(tái)，它的圖標(biāo)設(shè)計(jì)非常簡(jiǎn)潔和具有代表性。Airbnb的圖標(biāo)設(shè)計(jì)使用了一個(gè)圓形的形狀，并使用了一個(gè)代表性的符號(hào)來(lái)表示它的功能和意義。同時(shí)，Airbnb的圖標(biāo)設(shè)計(jì)也非常簡(jiǎn)潔，它只使用了少量的顏色和形狀，這使得圖標(biāo)非常易于理解和使用。
2. Apple的App Store圖標(biāo)：Apple的App Store圖標(biāo)采用了一個(gè)簡(jiǎn)單明了的大字母”A”，代表了應(yīng)用程序。這個(gè)圖標(biāo)的設(shè)計(jì)借鑒了蘋果公司的品牌風(fēng)格，采用了簡(jiǎn)潔、現(xiàn)代的風(fēng)格，使其在界面中易于辨認(rèn)。

B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策

成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。

以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法：

• 了解用戶的需求和期望：設(shè)計(jì)師應(yīng)該了解用戶的需求和期望，并根據(jù)用戶的需求和期望進(jìn)行圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加符合用戶需求和期望的圖標(biāo)，從而提高圖標(biāo)的可用性和易用性。
• 遵循一致性和統(tǒng)一性原則：設(shè)計(jì)師應(yīng)該遵循一致性和統(tǒng)一性原則，使用相似的線條、顏色和風(fēng)格來(lái)設(shè)計(jì)圖標(biāo)。這可以幫助設(shè)計(jì)師創(chuàng)建出具有一致性和統(tǒng)一性的圖標(biāo)，從而提高圖標(biāo)的可視化傳達(dá)和可用性。
• 避免過度復(fù)雜化的細(xì)節(jié)：設(shè)計(jì)師應(yīng)該避免過度復(fù)雜化的細(xì)節(jié)，追求簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加簡(jiǎn)潔和易于理解的圖標(biāo)，從而提高圖標(biāo)的可用性和易用性。

五、最后

A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則

UI圖標(biāo)在用戶界面中扮演著重要的角色，它們不僅能夠傳達(dá)信息和功能，還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則：

• 簡(jiǎn)潔明了：使用必要的元素和形狀，避免過度復(fù)雜化的細(xì)節(jié)。
• 可識(shí)別性：使圖標(biāo)獨(dú)特、清晰、易于辨認(rèn)，以便用戶快速理解其含義。
• 一致性：與品牌風(fēng)格相匹配，確保整個(gè)界面的視覺統(tǒng)一性。
• 可擴(kuò)展性：使用矢量圖形制作圖標(biāo)，以便在不同尺寸和分辨率下保持清晰度。
• 用戶反饋和測(cè)試：收集用戶的意見和建議，進(jìn)行測(cè)試和調(diào)整，以提升圖標(biāo)的質(zhì)量和效果。

B. 鼓勵(lì)設(shè)計(jì)師繼續(xù)探索和發(fā)展圖標(biāo)設(shè)計(jì)技能

圖標(biāo)設(shè)計(jì)是一個(gè)不斷發(fā)展和演進(jìn)的領(lǐng)域。鼓勵(lì)設(shè)計(jì)師們繼續(xù)學(xué)習(xí)、實(shí)踐和探索，通過不斷嘗試新的技術(shù)和方法，提升自己的設(shè)計(jì)能力。以下是一些建議：

• 深入研究：學(xué)習(xí)不同的圖標(biāo)設(shè)計(jì)風(fēng)格和趨勢(shì)，深入了解各種設(shè)計(jì)工具和技術(shù)，保持對(duì)設(shè)計(jì)領(lǐng)域的持續(xù)學(xué)習(xí)。
• 觀察和啟發(fā)：注意身邊的圖標(biāo)設(shè)計(jì)，從成功的案例中汲取靈感，拓寬自己的設(shè)計(jì)思維。
• 反饋和合作：與團(tuán)隊(duì)和用戶溝通交流，接受他們的反饋和建議，與其他設(shè)計(jì)師合作分享經(jīng)驗(yàn)和知識(shí)。
• 認(rèn)識(shí)目標(biāo)用戶：了解目標(biāo)用戶的需求和偏好，將其融入到圖標(biāo)設(shè)計(jì)的決策中。

UI圖標(biāo)設(shè)計(jì)在用戶界面中起著重要的作用。通過掌握設(shè)計(jì)原則和實(shí)踐技巧，繼續(xù)學(xué)習(xí)和發(fā)展設(shè)計(jì)技能，我們將能夠創(chuàng)造出令人印象深刻的UI圖標(biāo)作品，提升用戶體驗(yàn)和界面美感。不斷探索和挑戰(zhàn)自己，成為一名卓越的圖標(biāo)設(shè)計(jì)師！