UI 設計中依舊有很多裝飾圖標要使用偏擬物的設計風格，雖然很多人以為可以通過 AI 來生成，但實際上真正符合頁面需要的設計很難通過 AI 來獲得，所以我們依舊要自己來繪制。

這類輕擬物圖標畫起來并不難，只需要掌握一定的規(guī)律以及幾個基本操作技巧即可。而最好的入門方式，就是從“畫圓”開始，就像學素描時最開始畫的圓形石膏，用它來認識光影的效果。

一、擬物圖標的基本構成

設計中對擬物效果的實現(xiàn)，就是對三個基本要素的塑造，形體、光影、材質。

形體就是物體本身的外輪廓和外形樣式，不同的風格和設計標準會對外形有不同的繪制要求，比如有的復雜寫實有的簡約隨意。除了外形復雜度外，還有個關鍵的知識點，即 —— 透視關系。

透視關系就是現(xiàn)實世界物體在人眼中成像的一種模式，離得越近的東西越大，越遠的東西就越小，也就是我們所說的近大遠小。用一個正方體來解釋，就是當它擺出不同角度時，那么側邊的面會朝遠端逐漸縮小。

如果不帶透視關系，那么它的不同面就沒有縮小的效果，上下邊平行處于等高的狀態(tài)。

設計師輸出圖形，就要正確的反映空間關系，加或不加都可以，但不能出現(xiàn)兩種混用的沖突，那就是沒想好要怎么表現(xiàn)。同時就是元素本身角度的控制會對下一步光影的應用產生巨大的影響，因為不同的角度就會形成不同的光影關系，而之所以素描最喜歡從圓開始練起，就是因為圓形 “只有一個” 角度。

第二個光影要素，就是物體在接受光照后呈現(xiàn)出來的高光反射與遮擋光源后形成的投影。如果只有一個圓，在接受一個光源的照射后就會形成下面這樣的光影關系。

也只有在光照的影響下，物體的表面才不會是純色的，也才能反應本身的弧度。所以每次繪制擬物圖形我們都要確定它的光源在哪，決定受光面和投影的方向。

最后一點則是材質，也就是物體表面使用哪種材料，這不僅會決定它使用哪種肌理紋路，也會決定它面對光影的效果。比如一個鏡面材質，表面就是光滑且高反光度的，而磨砂玻璃材質，則是弱反光且具有透明模糊的效果。

上面三個就是擬物圖標繪制最核心的知識點，也是最基礎的美術專業(yè)知識，雖然它們還有很多細節(jié)可以拓展和學習，但所幸我們今天設計的質感圖標不再是追求高度還原的擬物，而是經(jīng)過簡化的 —— 輕擬物。

雖然那些知識不能被忽視，但因為我們要設計的東西也簡單，所以可以在一邊實踐中一邊學習，效果會更好。

二、擬物質感球體的繪制

接著我們就開始來畫圓，掌握擬物效果的實操方式，在這里我們演示用的軟件還是 Figma，只用到最基礎的矢量、填充、描邊、圖形效果等基礎功能。不管你用 Sketch 還是即時設計、Mastergo 都一樣。

第一步就是創(chuàng)建畫布后畫個圓，這個圓用 100-200px 大小就行，然后給圓填充一個基礎的顏色。

然后我們確定這個圓是鏡面材質的，光源是從正上方往下打。所以圓應該上方比下方顏色亮，且因為這是球體有弧度，所以添加的是 “徑向漸變”。通過這個漸變的添加為整個圓的色彩定調，確定明暗關系。

接著添加高光和投影，高光在頂部呈現(xiàn)不規(guī)則的橢圓狀，然后使用垂直透明度漸變向下逐漸消失。高光是種折射是會受到反射對象色彩影響的，所以高光也不可能是純白，而要使用和圓一樣色相的高明度色彩。

然后就是下方投影，這里一定要明白投影會反映空間的關系。如果使用默認圖層效果中的投影，它只能表現(xiàn)環(huán)境中的背景和我們的視線垂直，光源也是從視線這側來的。而我們現(xiàn)在希望塑造的是背景是在底部，且光源是從上打下來的，那么軟件自帶的投影模式就不適用。

軟件自帶投影的方向

我們希望創(chuàng)建的投影方向

想實現(xiàn)這個效果就要獨立繪制投影，最簡單的方式就是先畫個小點的深色投影輪廓，然后為它添加圖層模糊效果。

到這里圖形基本的狀態(tài)和光影效果都有了，但這看起來太粗糙了，想讓它更細膩更生動，就看我們怎么理解光影并為它添加更多細節(jié)進去了。

首先作為一個有顏色的玻璃球體，雖然會形成投影但也有光穿過它投射到背景上，那么這些穿過的光線就可以被表現(xiàn)出來，也就是底部要再疊加一層有色的投影。

同時因為光穿透到底部會再往回折射，所以球體底部實際上是會“積累”光線的，這不是明暗交界線，而是玻璃材質本身的一種特性，所以這個積累亮度的底部就要單獨畫出來，然后添加漸變和模糊效果。

而光在打到頂部時高光的形成是在表面之下（這個大家可以觀察玻璃珠），那么表層也有受光面，我們就可以再做個表面的橢圓模糊疊加到上方，讓它的高光面更自然。

最后，就是為圓添加一個描邊，這個描邊還有漸變色，來表現(xiàn)球體邊緣的厚度。而這個厚度在頂部是遠處不是受光位置所以較深，而底部在反光處所以有高亮。

完成上面的效果這個案例就做完了，要想做細節(jié)還可以再往下做。我們可以簡單在上面添加圖標，那么就是一個玻璃質感的按鈕。

做擬物類圖標的內核，就是你想表現(xiàn)什么樣的結果，要讓它的細節(jié)呈現(xiàn)到什么地步。復雜和極簡沒有對錯，關鍵的是你添加的每個細節(jié)都能有真實的物理特性去支撐，那么它們看起來才是合理的。

學習擬物就是認識美術的基本原理的過程，再學習不同細節(jié)呈現(xiàn)的軟件操作方式。

軟件是次要的，理解才是最重要的。

轉載自優(yōu)設網(wǎng)

蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態(tài)調整中高效賦能業(yè)務設計交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設計公司，分享了他們在設計組件庫建設中的新思考和實踐，供大家參考學習。

本文將分享我們對于“什么是好的設計組件”的看法，并給出一種搭建復雜組件的實用思路。我們還會從資產消費的角度，提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個設計平臺都行之有效，希望這些內容能給廣大設計師們帶來一些新的啟發(fā)。

蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

作為專注 UI 與用戶體驗設計的專業(yè)機構，蘭亭妙微在大量 To C、To B 項目中驗證：圖標是界面的視覺語言核心，既承擔功能指引，又傳遞品牌氣質，直接影響用戶認知效率與產品質感。一套科學、統(tǒng)一、高辨識度的圖標體系，能顯著降低理解成本、強化品牌記憶、提升流量轉化效率。

谷歌Material Design的圖標設計標準正在重新定義界面視覺語言。蘭亭妙微UI設計公司深度解析從簡潔性、幾何形狀到風格統(tǒng)一的三大核心原則，詳解24dp標準尺寸下的網(wǎng)格系統(tǒng)與布局規(guī)范，并揭秘復雜圖標的細節(jié)處理技巧。無論是圓角控制還是描邊粗細，這套方法論讓零基礎設計師也能快速掌握專業(yè)級圖標設計。

今天分享的是「圖標設計準則」。圖標是界面設計里的 “剛需元素”，一個小圖標能快速傳遞很多信息。好的圖標需要兼顧簡潔、現(xiàn)代、友好。但圖標的尺寸很小，設計時既要嚴格遵守設計規(guī)則，又得清晰表達信息，這樣才能保證整套圖標的風格統(tǒng)一、辨識度高。

今天就來聊聊大廠在用的圖標設計原則和設計規(guī)范，配合案例進行設計分析~

01 圖標設計的3個核心原則

① 形式夠簡潔

給大家舉個例子，就說下面的小船圖標，想讓圖標清晰好認，就得做減法，那么用正面的簡約船身造型最合適。

如果圖標設計的過于細致，例如圖標中添加了船帆、桅桿或者旗幟等細節(jié)，太寫實的圖標不僅會降低識別速度，還會破壞整套圖標的視覺統(tǒng)一性。

設計總結：

? 簡化圖標造型，提升清晰度和辨識度

? 拒絕過度寫實，避開復雜繁瑣的設計

② 多用幾何形狀打底

使用幾何圖形和統(tǒng)一的基礎形狀來設計圖標，能打造出清晰醒目的視覺感受。哪怕結構簡單，也能保持清晰的形態(tài)，縮小到小尺寸時也照樣容易分辨。

反過來講，盡量少用那些纖細、松散的不規(guī)則形狀，它們會破壞線條的連貫性，讓整套圖標看起來亂糟糟的，沒個統(tǒng)一的調性。

設計總結：

? 靠幾何圖形和統(tǒng)一的造型，打造醒目視覺效果

? 少用纖細、不規(guī)則的形狀

③ 整套風格保持一致

這里給大家看一組風格統(tǒng)一的圖標示例。對品牌識別和系統(tǒng)適配來說，保持圖標集的視覺一致性太重要了。

要是把不同風格的圖標混在一起用，用戶根本沒法把它們當成“一家人”。所以同一套圖標里，不管是形狀、線條粗細，還是比例、邊角處理，都得按同一個標準來。

設計總結：

? 單套圖標集里視覺風格要保持統(tǒng)一

? 千萬別混搭不同風格的圖標

02 圖標尺寸怎么選？

在谷歌的Material Design 3 設計規(guī)范中，標準 (基線) 圖標尺寸是24dp×24dp，設計時建議按100%的比例來做，這樣能保證像素級的精準度。

除了這個標準尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：

20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素

40dp/48dp：針對顯示器、大屏幕，還有標題欄這類特殊場景

03 標準圖標布局

設計圖標時，內容需要放在有效區(qū)域內里。有效區(qū)域是指頁面滾動或適配不同設備時圖標不會被遮擋的“安全可視區(qū)域”。

如果想讓圖標的視覺沖擊力更強，可以讓內容延伸到有效區(qū)域和裁剪區(qū)域之間的留白處，但不能超出裁剪區(qū)域，不然圖標很容易被裁剪顯示不全。

具體要怎么布局呢？看下面這兩點就夠了：

① 有效區(qū)域：圖標內容要放在20dp×20dp的范圍內，四周各留2dp的邊距

② 邊距：給有效區(qū)域留出2dp邊距，既能讓圖標和周圍元素拉開視覺距離，又能讓整體看起來更平衡

接下來通過一個圖標案例來簡單總結一下：

上圖從左到右分別代表了在有效區(qū)域、在有效區(qū)域和裁剪區(qū)域、在裁剪區(qū)域之外創(chuàng)建的圖標案例。

設計總結：

? 圖標內容保持在20dp×20dp的有效區(qū)域里，記得留2dp邊距?? 想加視覺沖擊力？內容可以延伸到邊距區(qū)域

? 任何情況下，圖標都不能超出裁剪區(qū)域

① 網(wǎng)格和關輔助線

一套圖標中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標保持視覺大小的一致性呢？

這種情況大家在設計圖標時應該都碰到過，解決方法可能大多是通過眼睛對比查看，把看著小的圖標調大一些或者把看著大的圖標調小一點。這種方法效率不高，而且設計出來的圖標大小不容易保持一致性。

這里提供一個更科學和高效的輔助圖標設計方法——使用網(wǎng)格和輔助線，照著這些輔助線來設計圖標，能輕松保持比例一致。

例如常用的24dp×24dp圖標網(wǎng)格，由正方形、圓形、豎矩形、橫矩形這四種基礎輔助線構成。它們就像圖標的“骨架”，能幫所有圖標保持統(tǒng)一的比例和對齊效果，哪怕放大10倍看，結構也照樣清晰。

給大家拆解一下這四種輔助線：

方形輔助線：邊長18dp，是圖標的基礎平衡基準。比如圖表類圖標就可以照著這個方形來畫，保證比例穩(wěn)定。

圓形輔助線：直徑20dp，用來設計圓潤平衡的圖標。像地球圖標用這個圓形打底，就能和其他圖標和諧搭配。

垂直矩形輔助線：高20dp、寬16dp，適合強調縱向比例的圖標。比如文檔圖標圍著這個豎矩形設計，比例會特別清晰。

水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標。像郵件圖標用這個橫矩形當基礎，形狀會很均衡。

04 圖標結構解析

一個完整的圖標，由圓角、起始/結束點、內部形狀、外部輪廓等組成。

① 圖標圓角

這里重點說下大家容易踩坑的“圓角”的設計：例如下圖的銀行卡圖標，采用外角2dp圓角、內角尖角的設計，這樣既柔和又利落。

如果把圓角做得太大，如下圖左側文檔圖標，圖標的辨識度就會下降；如果一個圖標中混用不同半徑的圓角，如下圖右側的圖標，整個圖標看著就會很雜亂。

設計總結：

? 按規(guī)則設置圓角，統(tǒng)一圓角半徑

? 避免圓角半徑過大/半徑混用的情況

② 描邊粗細

推薦的圖標描邊粗細是2dp或常規(guī) (400)，也可以根據(jù)需求靈活調整，例如在MD3設計規(guī)范中就提供了100 (細)到700 (粗)的多種選擇。

這里有兩個小技巧：

設計直角線性圖標時，描邊的末端盡量做成直角，例如下圖左側的箭頭圖標，45度切割的直角就很清晰；在下圖右側的添加圖標中，內部的加號也采用了2dp的描邊粗細，與外輪廓保持一致。

另外要注意一套圖標需要保持相同的描邊粗細。如果描邊x粗細不一致，不僅會模糊圖標形狀，還會破壞視覺一致性。

設計總結：

? 描邊粗細保持統(tǒng)一，直角圖標末端也用直角

05 復雜圖標怎么處理？

如果圖標需要一些精細的細節(jié)，可以通過一些靈活的調整來提升辨識度，但不能扭曲基礎的幾何形狀或破壞整體比例。

比如回形針圖標，為了在24dp的空間里放下多個曲線，可以把 2dp的標準描邊粗細微調成1.5dp；再比如拉面圖標，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細節(jié)更多，則采用1.5dp的細描邊，讓細節(jié)更清晰。

還有一個小原則：設計復雜圖標時，盡量保持正面視角，別做傾斜、旋轉的等距或者3D效果——多余的深度感會增加識別難度。

設計總結

? 正面視角設計，細節(jié)微調不跑偏

? 少用傾斜、旋轉的等距/3D呈現(xiàn)方式

最后

圖標是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優(yōu)勢，必須建立在清晰的結構和統(tǒng)一的規(guī)則之上。

設計時基于標準的輔助網(wǎng)格走，保持比例均衡、視覺重量一致，設計出的圖標才不會喧賓奪主，反而能提升整個產品的用戶體驗。

轉載：人人都是產品經(jīng)理

蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

這套蘭亭妙微自研的質感彈窗設計方法論，手把手教你打造高吸睛的 APP 運營彈窗，掌握后輕松提升彈窗點擊率！

從谷歌的Gemini到ChatGPT Plus，從Photoshop的智能填充到釘釘?shù)腁I助理，這個符號似乎已經(jīng)成為了AI的專屬標志。這篇文章將帶你深入了解“菱形十字星”的起源、發(fā)展以及它在AI圖標中的廣泛應用，探討這個視覺符號如何成為AI時代的標志。

不知道大家有沒有發(fā)現(xiàn)一個現(xiàn)象，現(xiàn)在很多AI標志或圖標里都帶有“菱形十字星”元素，自帶一股科技感和閃光感。這個設計風向實際已經(jīng)興起兩三年了。

2022年ChatGPT的發(fā)布直接給IT行業(yè)來了一場大變革，之后大部分應用都開始接入AI功能。設計師們琢磨來琢磨去：到底用啥圖標代表AI好呢？最后“菱形十字星”成了共識。

接下來就如大家所見了，哪里有AI，哪里就有菱形元素——谷歌的Gemini、Figma AI、ChatGPT Plus、PS的智能填充、有道詞典的logo、釘釘?shù)腁I助理、百度搜索的問AI……

那么“菱形十字星”元素是如何演變而來的呢？又是從什么時候開始、因為哪些原因，這個視覺符號逐漸成為AI專屬標志的呢？一起來看看~

01 “菱形十字星”的起源

說起菱形元素的最直接的起源，在日本漫畫里其實早有蹤跡。

在日本流行文化里，“菱形十字星”元素常用來突出漫畫人物角色的眼睛或者強調某個場景。到了20世紀70、80年代，它逐漸成為一種視覺符號：只要角色看到想要的東西或者喜歡的人，或是覺得某件事很酷很驚喜，眼睛里就會冒出這種閃光的菱形十字星。

后來到了1999年，日本電信公司Docomo創(chuàng)造了第一批“表情符號”，突破了純文字交流的局限。當時設計師栗田重隆一共設計了176個表情，其中就有個菱形十字星圖案 (左下角)，能把這個圖案加進去估計就是因為它在當時的日本流行文化里太有存在感了。

直到2010年，這個表情加入到Unicode 6.0標準，表情的官方名稱叫Sparkles，從此在全世界的數(shù)字設備上都能使用它了，也就是現(xiàn)在咱們手機里打出來的?表情。

02 AI視覺符號的發(fā)展

1990年Photoshop推出了“魔棒”功能，這讓菱形十字星元素在數(shù)字世界里的存在感又上了一個臺階。估計不少設計師都用過這個功能：點一下魔棒工具，就能選中圖片里顏色相近的區(qū)域。在此之前，要做這事要么手動用橡皮擦，要么一點點框選，操作起來很麻煩。

不過話說回來，跟其他圖標比，“魔棒”圖標表達出來的含義其實挺模糊的。你看時鐘、日歷、文檔、放大鏡、垃圾桶這些圖標，一看就知道是干啥的。

但魔棒圖標是啥意思？可能真說不準。正是由于這種特性，“魔棒”適合表達新穎、神秘、美好、便利等含義 (魔法棒一揮，美好的事情即將發(fā)生)。

后來在圖片編輯領域，菱形十字星元素用得越來越頻繁。只要是能“少動手”的功能，比如自動調色調、快速選區(qū)域、濾鏡，在設計圖標時都喜歡加入菱形十字星元素。

到最后，只要是能自動處理各種繁瑣任務、個性化定制的功能圖標，都會加入菱形十字星元素?，F(xiàn)在它幾乎成了一個萬能的圖形，所有讓人覺得亮眼的功能，好像都能用菱形十字星表示。

真正讓菱形十字星元素和AI綁定在一起，是2020年谷歌相冊推出的AI圖像增強功能——與其向普通用戶解釋AI多復雜，不如直接傳遞“神奇的事情馬上要發(fā)生”的感覺。同年谷歌表格的“探索”功能也用了菱形十字星元素，通過機器學習給用戶推薦主題。這大概是谷歌首次嘗試給AI功能建立“視覺符號”。

此后菱形十字星元素迅速成為AI功能的視覺語言。各大公司好像心照不宣都開始用它代表AI——你用我也用，慢慢就成了行業(yè)特征。

在AI人工智能剛興起的時候，許多設計師可能都面臨類似的困惑：如果必須用一個圖標來代表AI，它會是什么形狀？最開始有人使用機器人、大腦、芯片、燈泡或復雜電路圖案等圖形代表AI。但AI智能且復雜，要找個視覺穩(wěn)定、可擴展且美觀的圖標來代表，好像前面這些選項都差點意思——所以最后還是用”菱形十字星”這種視覺上最亮眼的圖案成為首選。

03 AI圖標未來會變成什么樣？

現(xiàn)在菱形十字星常作為輔助元素在圖標里搭配使用，而不是單獨使用。

比如夸克的AI搜索是一大一小兩個菱形搭配；有道的句子潤色是魔棒搭配菱形；稿定AI平臺對菱形用的更廣泛，凡是跟AI相關的功能，像創(chuàng)意畫布、AI改圖、AI擴圖等功能圖標中都有菱形十字星作為輔助元素。

雖然菱形十字星用的越來越頻繁，但也有一些產品在嘗試減少菱形的使用并探索更加個性化的AI設計圖標。

比如Notion剛開始推AI功能時用的也是菱形十字星圖標，后來AI功能逐漸完善了之后就將AI換成了人臉效果的圖標，這個圖標讓Notion的AI視覺效果一下子有了辨識度。

最后

說不定等AI完全變成標配功能之后，咱們還會重新用回那些傳統(tǒng)的圖標。就像90年代的軟盤保存圖標一樣，菱形十字星或許也會成為一個時代的標志。

但在此之前，菱形十字星很可能仍將作為一種重要的視覺語言，象征著向AI人工智能時代的過渡，成為我們擁抱和理解新技術的標志

轉載：人人都是產品經(jīng)理

蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

五個看似簡單的圖標，背后卻是Adobe數(shù)十年產品演進的縮影。從擬物到極簡，從功能隱喻到文化符號，這些“常青樹”圖標不僅定義了設計工具的操作邏輯，更見證了人機交互語言的變遷。

Adobe的產品大家應該都用過，每個產品里都有很多一些經(jīng)典且有特色的工具圖標。今天介紹五個Adobe圖標，稱得上是設計圈的“常青樹”。它們陪著Adobe走過幾十年，跟著旗下的王牌產品一起成長，一路迭代卻始終不過氣。

每個圖標背后都有段故事，不止于設計，更藏著技術、文化、用戶需求和這些年產品的變遷～

01 “眼睛”圖標

核心功能：控制圖層顯示 / 隱藏

“眼睛”圖標是經(jīng)典的設計隱喻，用得廣好理解，用來表達“顯示/隱藏”“可見/不可見”這種對立的概念。

在早期淺色版PS中，最開始用來控制圖層“顯示/隱藏”的是版本A，效果做得特別逼真，睫毛、瞳孔都看得清楚。

后來推出深色版本的PS，寫實的“眼睛”看著有點怪，就重新設計了在淺/深背景下效果差不多的版本B。

現(xiàn)在的“眼睛”圖標早就從精致的寫實風，變成了簡約抽象的符號風，適用范圍更廣，能讓人明白是“控制可見性”。

同時，針對淺深不同的顏色模式，“眼睛”圖標在保持形狀不變的情況下反轉了顏色，這樣在不同平臺或者設備中都能使用樣式更統(tǒng)一的圖標。

02 魔棒”圖標

核心功能：一鍵實現(xiàn)圖像便捷操作（如選色）

“魔棒”圖標的設計一直圍繞“魔法”展開，但現(xiàn)在四芒星成了AI標志性元素后，就得重新考慮“魔棒”的展示效果，既要保留“魔棒”的標志元素，又要和AI功能圖標有區(qū)分。

在新版PS中，“魔棒”圖標保留了原來的閃光樣式，重新調整了閃光元素的位置、大小和旋轉角度。從最開始的單個A版樣式，改成了旋轉后的B版樣式，最后用了三個獨立閃光元素的C版樣式，徹底和AI功能區(qū)分開。

03 “鋼筆”圖標

核心功能：精準繪制矢量路徑、貝塞爾曲線

現(xiàn)在“鋼筆”圖標是很常見的設計，但回溯到1987年Adobe Illustrator剛推出時，它才真正成為“創(chuàng)建、編輯矢量路徑”的代名詞。

它不是用來隨手畫的“鉛筆”，也不是用來涂色的“畫筆”，而是能精準畫貝塞爾曲線、做矢量圖的“鋼筆”。

這么多年，“鋼筆”代表“矢量繪圖”的核心意思沒改，但圖標的朝向調整過。

在Illustrator 15版本里，“鋼筆”角度被旋轉傾斜，目的是更好地適配按鈕空間，還能和其他工具圖標的方向保持一致。

04 “裁剪”圖標

核心功能：修剪、旋轉、矯正圖像

從Photoshop 1.0版本開始，“裁剪”圖標就存在了。它的設計靈感，來自暗房里洗照片時用的遮罩框，特別是框上的角線。這么多年“裁剪”圖標雖有小調整，但一直是個經(jīng)得起時間考驗的經(jīng)典符號。

這些年“裁剪”圖標做了不少優(yōu)化：

• 去掉原來的對角線，外觀更簡潔；
• 加了箭頭，用來表示圖片旋轉功能。

星號標記的地方，是這些年Adobe嘗試調整標尺交叉位置的情況，直到2020年才確定了現(xiàn)在“左上右下”的位置順序（這億點變化你發(fā)現(xiàn)了嗎…）

05 “軟盤”圖標

核心功能：保存文件（本地/云端/U盤）

“軟盤”圖標和“電話聽筒”圖標一樣，都是擬物化設計的代表——就算很多人沒見過真正的軟盤，也知道它代表“保存”。

用圖標表示抽象操作本身就不容易，再加上這么多年存儲設備一直在變，軟盤圖標的“長壽”更讓人驚訝。

從最開始代表軟盤的A版圖標，到后來代表光盤/硬盤的B版圖標，再到現(xiàn)在代表保存到云端的C版圖標，它的含義一直在延伸。

但看到這個經(jīng)典符號，大家就知道是“保存”，這就夠了。

最后

圖標雖小，但影響力卻很大。

寥寥幾個像素，卻承載著豐富的意義、記憶和隱喻。隨著工具、用戶和平臺的不斷發(fā)展，作為指引的圖標也在不斷演變。

這些圖標的變化告訴我們，設計不是一成不變的，而是一個不斷傾聽用戶、測試效果、優(yōu)化改進的動態(tài)過程，有時甚至會回歸到那些有效的經(jīng)典設計里。

所以下次你點圖標時，不妨多停一秒，好好看看這個藏著很多故事的小小圖像。

轉載：人人都是產品經(jīng)理

蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

在 UI 設計中，圖標是傳遞信息、提升界面顏值的核心元素。很多新手設計師明明看過不少教程，卻依然畫不出一套風格統(tǒng)一、兼具實用性與趣味性的圖標 —— 要么風格雜亂無章，要么細節(jié)處理粗糙，要么表意模糊。其實，圖標繪制有章可循，掌握 “風格定位、統(tǒng)一規(guī)范、造型方法、細節(jié)優(yōu)化” 四大核心，就能快速上手。本文結合實戰(zhàn)經(jīng)驗，拆解圖標繪制的完整流程，幫你避開常見誤區(qū)，畫出專業(yè)級圖標。

在 UI 設計的視覺體系中，圖標是傳遞信息的視覺語言，更是彰顯產品個性的關鍵元素。一枚富有設計感的圖標，既能降低用戶認知成本，又能讓產品在同類競品中脫穎而出。今天，我們就結合實用設計技巧與行業(yè)趨勢，帶大家走進 UI 圖標的創(chuàng)作世界，同時聊聊 UI 設計師的職業(yè)發(fā)展路徑。

游戲 UI 設計的核心不是 “畫面精致”，而是 “信息傳遞高效”。設計師在交付前可自查三個問題：是否考慮了信息的所有變量？復雜內容是否足夠易懂？設計能否適配所有使用情景？只有兼顧美觀與實用性，才能讓 UI 真正服務于游戲體驗。