一套B端后臺設計教程，含設計規范講解

Sponsor

全文介紹了中后臺我們要掌握的ICON設計能力大場設計規范，分享我做的一套ICON的過程示例。擴展標志設計的知識。

可能你覺得icon嘛。誰不會設計呢?；蛘攥F在還用設計嗎。如果你會有這樣的不屑一顧，那你可以看看下面我在說什么。我保證內容對你有用。

做自己認為對的事情。既是知識的分享，也是自己從新學習的一個過程。希望在這個過程中，能夠有更多優秀的一伙伴一起同行。我希望你們好的資深B端設計師們，這段是寫給你們的。加油?。?！

寫在前面

我與ICON的設計好像有什么不結之緣。早在2017年我就寫過一篇如果對抗APP中ICON設計同質話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設計過成套的APP應用中心的ICON和系統后臺ICON庫。ICON設計的經驗那是不得不豐富的存在。

ICON，中文翻譯為圖標。是對象的圖像表示，指用圖形指代某些名詞，如：打開、警告、愛、學校、山等。ICON，是上世紀九十年代伴隨IT 產業出現的一個技術詞匯，原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。

下面是我總結了這幾年設計icon的經驗結合大廠的后臺規范。給新手設計師的一些建議，都是經驗之談希望能夠幫到你?？梢宰屇阍谠O計的這條路上走的越來越輕松。

第一章 ICON的設計

那位美女設計師：??！搞什么呀，B端設計師icon還有設計，你傻不傻呀。我給你分享幾個現成的icon網站吧下載了就能用。我：是的我也用現成的icon在很多的需求里。但是我更喜歡自己設計，自己去做。直接用現成的icon不爽嗎。嗯當然爽呀?？词悄阋雷龅母玫姆椒ê涂赡苄?。不要總把自己當美工吧，我們可以是設計師的。

做為什么師我們大概都應該知道icon作為我們界面的重要構成元素，它會在很大程度上影響我們界面的風格。甚至會影響我們品牌的調性。所以一套符合我們設計風格具有我們品牌調性的icon是很有必要的?？傊阆朊靼滓粋€道理，你一整個屋子都裝修好了，房間里獨獨到處都放了幾把破椅子。不難受嗎。

Ant design設計規范：圖標是 UI 設計中必不可少的組成。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業級應用設計范圍中，圖標在界面設計的諸多元素中往往只占了很小的比重，在調用時也會被縮到比設計稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產品設計體系中實現一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。Ant Design 相信一整套優質的圖標對于設計質量的影響是非常巨大的，這考驗著設計師的協作能力，以及對圖形塑造的系統性思維，同時也能反映一個團隊對于細節的追求。

1、中后臺ICON的設計原則

中后臺使用的icon大部分規范平臺也好或者一有系統也好他們的設計原則基本是大同小異的。我的建議是如果你要設計一整套的icon圖標。在設計之前確定自己icon的設計原則。這個設計原則可以依照自己的界面設計風格或期望的界面設計風格以及行業屬性、自己品牌等去制定。

1-1、Ant design圖標設計原則

Ant Design 的圖標設計原則源自「確定」和「自然」，落實到圖標設計領域，一共有四個。準確、簡單、節奏、愉悅。

1-1-1、準確：

設計造型準確的圖標（保持偶數原則，去小數點）；選擇表意準確的圖標，不對用戶的認知造成困擾。

1-1-2、簡單：

在表意清晰準確的基礎上，盡量保持圖形的簡潔，不做多余的修飾。

1-1-3、節奏：

挖掘構圖中的秩序之美。

1-1-4、愉悅：

賦予適度的情感。在部分圖標設計中，會適度的注入擬人化的元素，令圖標具備生命力。

1-2、TDesign圖標設計原則

Icon 作為 UI 構成中重要的元素，它一定程度上影響整體 UI 界面呈現出的風格，TDesign 初期提供一套適用于中后臺場景的線性 Icon，以普適、通用的標準進行設計，風格契合默認 TDesign 的風格，線性、圓角。在TDesingv中設計原則為、從簡、精確、適度

1-2-1、從簡：

制作時保證參數的簡化，盡量消除小數點以及非整數的角度。處理線條以及輪廓時刪除多余的錨點，輸出時應避免出現不必要的裝飾，保持圖標的簡潔。

1-2-2、精確：

在設計時避免使用那些含義模糊的圖形，當同個事物存在多個圖形表述時，應選取最為流通的樣式，必要時進行針對性的強化。在圖標輸出時也應遵守命名規范，精確的文字描述便于他人查找。

1-2-3、適度：

單個圖標作為一個獨立的視覺個體，在線條的疏密以及圖形的搭配上要呈現適度感。在處理一些必要的高密度圖標時也要考慮線條的節奏感，讓其舒適不壓迫。系列圖標要遵守適度原則，將變化控制在一定范圍內。

發現沒大廠規范為了普世所以他們的圖標設計原則定的基本都是一樣的。只是換了一個詞而已。而且他們的大部分原則和細節都是來自平面設計里的板式設計和標志設計里的形式美法則。

2、如何規范的設計ICON

設計一套優秀的圖標設計應該簡潔明了、直觀性強、獨特性好、可識別度高、適應性廣、細節處理精細、可擴展性強，并且能夠根據用戶反饋及時改進和優化。如果要具備這些特征，那我們在設計的時候就要遵循一些特定的規范。

2-1、柵格

icon設計的柵格在大場的設計規范里面分為兩種。一種ant design設計規范里面的那種柵格。另一種是TDesign設計規范里面的柵格。我之前在做的時候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進行設計的不過。沒有這設計規范里面的柵格好用。

2-1-1、Ant Design柵格

Ant Design 的系統圖標都是按照 1024 x 1024 的畫板進行制作的。

出血位： 在圖標的設計過程中預留出血位的做法，可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險；同時在設計過程中，也為設計師把握圖標間平衡留下了進退的余地。新版的設計規格在圖形的外圍預留了 64px 的出血位，多數的圖標在設計中我們都不建議超過這個區域。

2-1-2、TDesign柵格

柵格作為圖表繪制的底層結構，是一切屬性設計的基礎。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。圖標常見尺寸為16*16；20*20；24*24；32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標繪制的統一柵格尺寸

我記得最早入行的時候畫icon就用的這種柵格。但是我不太喜歡，因為在實際的設計之中會出現好多問題。當時的我是無法解決的。

2-2、輪廓與模板

面對各式各樣的icon我們在上一步有了柵格，接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的，在視覺上是平衡的。所以轉對不同形狀的icon在柵格里所占的輪廓規范就產生了?；具@個輪廓都是一樣的。因為他是一個很基礎的東西。

但其實可能是我技術的問題。在過往的很多次設計中如果你完全按照這個輪廓去執行。做出來的icon你會發現其實在視覺上還是會存在問題的，我都會在做一次優化。不過這很大可能是我技術和設計能力的問題吧。

2-3、設計細節

即使有了規范，柵格輪廓等。但是往往我們在設計制作的時候還是會有很多的細節需要去處理的。這樣我們的設計才會更專業。因為我用ant 規范比比較多所以。我們就一起看一下ant的規范里對icon設計細節的一些建議。

在ant的圖標設計規范中，對icon圖標進行了、形式感、韻律、平衡、辨識這幾方面對我們在設計和制作icon可能遇到的問題給了一些建議。

Ant Design圖標設計建議詳情：https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88

3、ICON分類

以上的內容主要在探討一類icon圖標的設計。那就是中后臺的圖標設計。但其實icon圖標是有很多的分類的。交互性圖標、裝飾性圖標、說明性圖標

3-1、交互性圖標

這類圖標主要用于應用程序的界面設計，它們可以向用戶傳遞某種信息，引導用戶執行特定操作，同時也允許用戶向程序傳遞控制信息。例如，登陸注冊按鈕、開關按鈕、數量按鈕、點贊、轉發分享等都屬于交互性圖標。

3-2、裝飾性圖標

這類圖標主要用于提高頁面設計性，它們可以加深個性化設計風格，提升用戶線上體驗感，迎合受眾群的偏好，提升設計親和度。例如，符合節日需求的線上活動呼應圖標、個性化圖標等都屬于裝飾性圖標。

3-3、說明性圖標

這類圖標主要用于闡明信息，它們是區分不同功能或內容的視覺標記，簡單地說，就是對功能的解釋說明。例如，象形圖標、隱喻圖標、工具圖標和混合圖標等。

此外，根據圖標的具體功能和用途，還可以將圖標分為表意圖標（又稱解釋性圖標）和標識性圖標。表意圖標是通過原本不存在實物的符號表達某些特定的含義或操作行為，這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如，“箭頭”已經從最初的“弓箭”衍生為一種特定的表意符號。而標識性圖標主要用于標識品牌、產品或服務，它們通常具有獨特的設計風格和視覺效果，以便在市場上脫穎而出。例如，蘋果公司的蘋果圖標就屬于標識性圖標。

為我以往的設計經驗里大部分都是在做B端的設計和交互工作。在我的理解里圖標就分兩類。1、規規矩矩的ICON。2、花里胡哨的ICON。就這么簡單。

第二章 實戰我搞了一套ICON

再優秀的理論也只能是理論。實踐才是檢驗真理的唯一標準。這不是我說的。這是老馬（卡爾·海因里?！ゑR克思）說的。所以就請大家進入我的實踐過程吧。

1、需求背景

需要還是要從最初開始講。我負責的SAAS平臺要迭代換框架。然后對界面視覺交互、產品功能都迭代一個大的版本。這次設計部分的任務就我來負責。

因為是大的迭代嘛。所以這次icon設計的需求是跟著整個平臺一起走的。你要設計新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質量也是一個難以想象的存在。是開發直接從網上個個平臺找的。所以這次這個平臺的視覺迭代就有了搞一套適合我們界面和行業的icon圖標。

這是我們SaaS平臺的設計價值觀

2、設計原則

因為是先有了界面，要做一套配合界面的菜單icon圖標。我想我們的icon要符合整體頁面的風格。不說給界面加分了，也不破壞我辛苦做的界面視覺。

結合我們品牌的logo圖標的特點。讓我們的icon也擁有獨屬于他們自己的絲帶偶。把公司logo的設計特點加入到我們這次icon的設計原則里。

是的優美，是我們這一套icon的特點。也是從我們logo里提取出來的設計要點。然后把他運用到icon設計里。

3、規范的制定ICON的制作

規范的知道基本是使用的阿里巴巴矢量圖庫早期的那個上傳圖標模板的AI文件。為什么會選擇使用這個呢。因為我們SaaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用，而不是直接切圖給他們用。

在這套圖標設計的時候，其實并沒有完全的按照大廠的設計規范進行。在很多的細節上做了調整。為的是達到更好的效果。當然。也有很多遺憾。在很多的方面并不是很標準。在下次優化設計時，會更好的去執行制定的設計原則和設計規范。

第三章 拓展知識（標志設計淺談）

之所以寫這部分內容，是因為我覺得在平面設計里標志設計的知識對我們現在圖標設計是很有用的?？梢允菆D標設計本身就是適應了顯示屏后的標志設計。如果你搞懂了標志設計的系統知識，那圖標設計不就是手拿把掐的事了。標志設計就是殺雞的牛刀。

一般我們說到標識設計可能大概覽的就是會認為是品牌形象設計，也就是LOGO設計。是的我大學學的標志設計就是在講品牌LOGO的設計。但我現在理解的標志設計可能意義更廣泛。因為在很多的時候我是把標志設計的知識和原理來應用到其他的設計方面。

標志是品牌形象核心部分（英文俗稱為：logo），是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言，除表示什么，代替什么之外，還具有表達意義、情感和指令行動等作用。

LOGO、標志、徽標、商標是現代經濟的產物，它不同于古代的印記，現代標志承載著企業的無形資產，是企業綜合信息傳遞的媒介。

1、標志設計怎么來的

標志的來歷，可以追溯到上古時代的”圖騰”。最初人們將圖騰刻在居住的洞穴和勞動工具上，后來就作為戰爭和祭祀的標志，成為族旗、族徽。國家產生以后，又演變成國旗、國徽。

古代人們在生產勞動和社會生活中，為方便聯系、標示意義、區別事物的種類特征和歸屬，不斷創造和廣泛使用各種類型的標記，如路標、村標、碑碣、印信紋章等。

到本世紀，公共標志、國際化標志開始在世界普及。隨著社會經濟、政治、科技、文化的飛躍發展，21世紀以來經過精心設計從而具有高度實用性和藝術性的標志，已被廣泛應用于社會一切領域，對人類社會性的發展與進步發揮著巨大作用和影響。

2、標志的作用

隨著“讀圖”時代的到來，標志以簡潔、 獨特、易識別的圖形符號傳達著特定的含 義和綜合信息，成為人們相互交流和傳遞 信息、溝通情感、表達愿望的視覺語言。 特別是在注重品牌效能與品質的今天，標 志發揮著重要的作用。 標志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。

2-1、區分商品

標志能夠表述某種組織、某項活動或某 企業品牌的性質、服務和宗旨。標志作為一種視覺識別符號，能有效 區別各種品牌給消費者的印象。也就是說， 它能夠表述出個性特點，使其從眾多同類 產品的標志中被區別出來。

市場上的商品花色、品種繁多。在商品的海洋里，消費者只能根據不同的 標志區別同類商品的不同品牌和不同生產廠家，并以此進行比較與選擇。商業企業在經營商品時，有的 也用自己的標志表示各自的經營特色。標志的這種作用是其取得法律保護的主要依據，在國際貿易中， 這種作用也得到了普遍的認可。

2-2、樹立形象

標志是現代經濟的產物，它不同于古代的印記?，F代標志承載著企業的無形資產，是企業綜合信息 傳遞的媒介。對于企業而言，不僅要表明“我是誰”，還要說明“我怎么樣”。標志通過在不同場合、 不同載體的反復出現，使人們在看到標志的同時，就能自然聯想到產品

可口可樂歐洲太平洋集團公司前總裁喬戈斯曾經說：“可口可樂成功的原因很簡單，許多制造商只 熱衷于為消費者提供產品，而大多數消費者則需要產品的牌子。請記住，一聽可口可樂不只是飲料，它 還是一個朋友。

2-3、品牌價值

如今的社會，享用名牌似乎成為身份的象征、地位的體現和個人魅力的表現，這就使標志有了某種 精神的力量，這種精神力量代表著品牌的價值。

名牌價值是無形資產，無形資產的價值遠遠高于企業的有形資產價值和年銷售額?！翱煽诳蓸贰薄鞍?事可樂”的品牌價值都達到上百億美元。標志在各個國家都受到法律的保護，從這個意義上說，名牌標 志是企業的無價之寶，絲毫也不為過。

美國可口可樂公司的一位經理說，即使可口可樂工廠一夜之間被毀壞殆盡，公司也能憑借“可口可樂” 標志的聲譽從銀行立即貸款重建工廠?？梢?，對擁有名牌標志的企業來說，標志就是企業發展的一種依 托與保證，是一筆巨大的無形資產。

2-4、美化產品

標志作為企業和產品形象的象征，它用無聲的具有美感的圖形語言宣傳著產品的質量與特色。標志 設計的好壞直接影響企業和產品的信譽度。成功的標志不僅代表了產品本身，也增強了產品的魅力。

著名的香奈兒（CHANEL）的標志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創始人加布里?！た煽伞は隳蝺海℅abrielle Chanel）在法國巴黎創立，其標志是由兩 個背向的“C”重疊而成，圖形平衡對稱，充滿溫文爾雅、端莊聰慧之氣，

3、標志的創意原則

標志的本質是信息傳播，這是現代的 標志設計的核心。標志的設計創意應該從 信息入手，從功能需要出發。需要告訴大家的是什么，而不是把形式作 為設計的唯一出發點。

3-1、獨特性

在標志設計中，有的人喜歡造型簡單的，這得到了大部分人的認可；而有的人則認為在簡單中可適 當復雜，這要取決于實際的用途。不論簡單或復雜，需要把握一點：標志需要具備的特質是獨特。沒有 哪個企業甘愿平凡，大多數企業都在竭盡所能地建立自己獨特的企業文化和市場經營特色，所以在設計 標志時必須深思熟慮。

獨特性是標志設計的最基本要求。標志的形式法則和特殊性就是具備各自獨特的個性，不允許絲毫 的雷同。這就要求標志的設計必須做到獨特、別致，追求創造與眾不同的視覺感受，給人留下深刻的印象。

3-2、醒目

醒目的設計是所有標志希望達到的視覺效果。優秀的標志能夠吸引人，給人以較強的視覺沖擊力。 因為只有引起人的注意，才能使標志所要傳達的信息對人產生影響。在標志設計中，注重對比、強調視 覺形象的鮮明與生動，這是產生醒目性的重要形式要素。

3-3、簡單容易記憶

標志要易于識別、記憶和傳播。這并不是說簡單化，而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強的標志具有公眾認同面大、親切感強等特點。對于商標而言，一個易記的商標形象首先要有一個與眾不同的響亮、動聽的商標名稱，以好的商標名稱為基礎，綜合考慮商標的特點，選擇最佳方案， 再進行具體的圖形設計。

3-4、標志顏色

標志色彩的配置一般有三種基本方法；

-是原色配合原色的顏色單純、強烈、鮮艷奪目，藝術效果和傳播效果顯著。

-是同類色配合只選擇一種顏色，采用依靠色彩明亮度變化的辦法，如用桔紅、桔黃、中黃、淺黃進行搭配，形成由淺入深的過度色視覺，能表達出動態感。

-是補色配合這種色彩配置，對比鮮明，圖形格外醒目鮮艷，能給人以很強的視覺沖擊效果。

4、標志設計形式美法則

標志設計也是藝術設計的一種。所以他也同樣適用于我們設計里的形式美法則。用這些法則去設計你的標志或ICON讓他們的信息傳遞更準確。視覺表現更優秀。

形式美法則標志設計是一種視覺藝術，人們在觀看一個標志圖形的同時、也是一種審美的過程。在審美過程中，人們把視覺所感受的圖形，用社會所公認的相對客觀的標準進行評價、分析和比較，引起美感沖動。

4-1、變化與統一

任何一個完美的標志圖形必須具有統一性，這種統一性越單純，越有美感。但只有統一而無變化，則不能使人感到有趣味、美感也不能持久，這是因為缺少刺激的緣，變化是刺激的源泉，有喚起興趣的作用，但變化也要有規律，無規律的變化，然起混亂和繁雜。因此變化必須在統一中產生。

4-2、對稱于均衡

均衡是在不對稱中求平穩。均衡可分為調和均衡和對比均衡兩大類，調和均衡是指同形等量，即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外，還有量的均衡、色的均衡，在標志圖形設計時必須相應考慮，以追求標志視覺張力。

4-3、節奏與韻律

節奏是韻律的條件，韻律是節奏的深化，節奏也就是“律”，這種律不僅表現在音樂上，而且反映在其他方面，當物體失去均衡則會引起運動。此種運動如有規律，則稱之為“律”。在標志圖形設計中，如果將線的長短、粗細、曲直、方位等進行不同程度的變化和巧妙組合，便會創造出不同感的“律”的形式，歸納起來分為：循環體、反復體及連續體。

4-4、調和于對比

在標志設計中，對比與調和應用極廣，如在大小、方向、虛實、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數與偶數的對比。對比是標志圖形取得視覺特征的途徑，調和是標志完整統一的保證。

4-5、比例與尺度

任何一個完美的圖形都必須具備協調的比例尺度。在標志圖形中常用的比率有整數比、相加級數比、相差級數比、等比級數比、黃金比等。標志設計的形式美法則，不能孤立和片面地理解，因為一個美圖形的設計，往往要綜合利用多種法則來表現。這些法則是相互依賴，相互滲透，相互穿插、互相重疊、相互促進的，隨著時代的變化，審美標準、設計手法也在不斷發展。

5、標志發展趨勢

近年來，標志設計發展越來越成瘦?？偟陌l展趨勢是由復雜到簡約、具象到抽象、色彩更多樣話、標志的發展是一個設計相互交融、設計風格的多樣化過程。設計手段是次要的，目的才是第一位的。更注重的應使其商業性。

以下標志設計趨勢內容引用自標志情報局編譯的作者為Bill Gardner是logolounge.com的創始人的《2023標志設計趨勢報告》。https://www.logonews.cn/logo-design-trends-for-2023.html

我們每年收到的所有標志清晰解讀并整理成這份報告并不是一項容易的工作?？偣渤^30,000個標志，對我和一群杰出的設計師來說，這就像是世界上最大規模的配對游戲。最初，我們歸納出大約60-70個組別，然后將它們進一步劃分為具有最大影響力的15個類別。

我只是通過對提交的30,000多個標志進行徹底分析（還有國際上每個重要品牌的更新和重塑）后呈現的報告。因此你要了解的是，就像任何氣象學家會告訴你的那樣，他們不能保證天氣預報的準確性。同樣，我們也無法總是預測設計師將向哪個趨勢方向發展，這就是這份報告能讓我們保持警惕并感到有趣的原因所在

01、Wildflowers(野花)；02、Bloblend(流動混合)；03、Fades(逐漸模糊)；04Foreshort(透視)；05、Thrust(推進)；06、Spirals(螺旋)；07、Sonics(聲波)；08、WireForms(線框)；09、BallCaps(球形頂端)；10、NameFills(名字填充圖形)；11、Stretchers(元素拉伸)；12、NeoStencil(噴漆模版藝術)；13、HalfAster(半星號)；14、Double Os(雙圓環)；15、Ritz(餅干)；

寫在最后

重新讀了一遍標志設計的內容。果然受益匪淺的感覺。還是要時常溫故而知新的。學習了大廠的ICON設計規則也是很有收獲的。

最后我篇文章寫給你們、希望對你們有益。下篇文章見，

作者：彪形大漢pro (zcool.com.cn/u/20350317)
來源：站酷

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。