標是B端設計中畫龍點睛的部分，全文：10636字 48圖 預計閱讀時間：27分鐘 耐心讀完，你一定有所收獲

目前我主要深耕于B端設計中，深知B端圖標設計與C端有很大的不同，無論是應用的場景、設計的理念，都有非常大的差異

而現在網上有不少關于C端圖標如何圖標繪制的文章，對于B端的方向少之又少，因此我們今天就來聊聊圖標，聊聊B端圖標究竟應該如何設計

在我們的設計元素中由 色彩 color、文字 font、圖標 icon、圖形 shape、空間 space

這五個部分組成，而圖標的影響是整個產品的形象與氣質，起著畫龍點睛的作用

在圖標的設計中，它既需要具備嚴謹的設計態度，同時還要兼顧設計效率

前者是提升產品的視覺表現，后者是節約企業開發成本，無論是我之前一篇文章講到按鈕，又或者是每個B端產品中的導航，都涉及到了圖標。今天我就和大家來聊聊如何嚴謹高效的設計B端圖標

在設計系統中，基礎組件與業務組件遍布系統的各個角落。因為大多數B端設計系統都是采取這樣的核心思想去構建，這樣更能夠滿足B端系統的實際工作需求，同時又能讓設計系統真正落地，符合B端產品“復用”的設計理念，使每條產品線都能夠高效的搭建。之后我會單獨出一期設計系統的文章，咱們之后單獨細講

聊聊它們兩的定義：

?基礎組件：

每一個產品中都可以進行復用，是搭建整個系統的基礎

?業務組件：

需要滿足特定產品的需求，同時在功能上，不會進行多場景復用，作為單獨的模塊進行分類

這種思維方式在我們團隊中，被稱為基礎業務拆分法，運用到我們的每一個產品線中

還沒理解到？我舉一個例子，在Teambition Clarity Design，就按照相同的思路構建的設計系統

在Teambition Clarity Design設計系統當中，所有組件都分為：基礎組件、業務組件，我猜測正是通過這樣的劃分，才使得Teambition的設計系統能夠適用于更多的業務場景，滿足飛流、行云、thoughts、甘特圖、協作全景等多條產品線的設計需求

回到圖標當中，我們可以使用相同的思維方式，對圖標進行相應的拆解分析

?基礎圖標：

屬于整個B端圖標當中的基石，主要是頁面中最為基礎的圖標組成

比如：設置、編輯、搜索、時間日期等都屬于基礎圖標。每個系統都必須有的基礎圖標，所以在繪制圖標庫的過程中，基礎圖標可以確定整個圖標的性格[1]

[1] 圖標性格：為圖標整體給人的視覺感受（在本文第二章會著重講到）

?業務圖標：

屬于B端圖標設計中的業務分支，和我們每個產品的業務模塊都保持一致，通常是每個系統都會有一套獨有的業務系統圖標

比如：公海池、線索池、歸屬人管理、商機管理、客戶管理等，都屬于業務圖標。業務圖標主要是要求設計師能夠進行快速拓展

當然基礎圖標與業務圖標之間也并不是一塵不變的，很多業務圖標在產品中頻繁的使用會被提升到基礎圖標當中，同理使用減少也會進行相應的剝離

1) 圖標內容不同

?B端圖標求同

B端產品要與同類型的圖標盡量保持表意一致，在圖標表達形式上差距不要太大，相似性要高

因為B端產品的本質是滿足客戶對于工作、效率的需求，因而在B端圖標中，需要與行業中的設計語言和思路保持高度的一致，做到圖標之間 “形似”，這樣用戶在多個B端軟件進行切換過程中，會減小用戶的切換成本

?C端圖標存異

C端產品是要在同樣的文字上進行形式上的求變，與別的產品形成個性差異。因為在目前的C端市場中，圖標的同質化異常嚴重。想要圖標獨具一格，就必須突出自己的設計理念，讓用戶快速記住你這個品牌。因此需要考慮的是怎么樣在同樣的內容情況下，設計出更獨特的圖標風格

比如在下面的例子中，就是因為C端追求風格的原因，追趕者都會緊貼行業頭部的設計風格，在設計風格上做到 “神似”，但是在每一個圖標的內容上，他們都會存在巨大差異

2) 設計難點不同

?B端變化多

B端圖標的設計難點在于業務名稱復雜且多變。在B端圖標的設計場景中，會與各種業務名稱進行關聯，因而需要去思考每個業務所表達的特殊含義，遇到各種生僻字與英文縮寫時，圖標往往是需要去多維度的探究與思考

比如：在B端云產品當中，MySQL、MongoDB、SQL Server 是常見的云產品，如果你是第一次接觸，需要去深入理解業務才能夠準確去表達圖標的含義，去理解每一個圖標在行業當中設計的形式并加以設計

?C端趣味強

C端圖標更多偏向與趣味性的表達，比如大多數的圖標會采用去做圖標視覺上的優化，而不會去考慮業務層面的東西，也因此兩者的難點也存在不同的差異

3) 設計側重點不同

?B端講究擴展性

由于B端產品使用圖標場景較少，但在圖標的數量上會比C端圖標多上好幾倍，同時你還需要使用圖標去表達不同業務間的關系，因此B端圖標更講究 擴展性

比如同樣是流程申請，在快遞信息流程申請、采購備料流程申請、采購流程申請的圖標之間，需要存在一些相同點與不同點，這就需要你多去思考，在同時來了多個圖標設計需求時，如果通過分區實現圖標的快速設計

?C端講究整體性

C端圖標雖然圖標數量較少，但是使用圖標的場景卻又十分復雜。比如品類區、我的頁面中、各種功能圖標以及二級頁面圖標，因此需要通過整體性的考慮，將多場景的圖標進行串聯，形成一整套視覺圖標體系

4) 設計風格不同

?B端更直接

B端產品因為用戶的屏幕顯示參差不齊，會直接影響設計師對于顏色的直接判斷，較細的圖標會直接影響用戶的閱讀體驗，因此圖標形式建議多采取面性圖標或者2px的線條圖標，能夠增加圖形的識別度。圖標的對比度需要滿足W3C的AA、AAA原則，用戶才能更好的識別

?C端更多元

C端產品因為手機屏幕分辨率的不斷進步，已經進入高分辨率時代，手機屏幕色彩也更加地準確，因此圖標的視覺風格會更加多元，更能讓視覺設計師得到一個很好的發揮

在B端圖標設計中，我們一直在追求系統、高效、高質量地輸出，一方面對于B端產品而言，往往優先聚焦于主要流程的核心體驗， 圖標往往是低優先級的需求；另一方面，出現不統一、不美觀的圖標，無一例外都是在損耗著用戶對于產品的體驗與感受

比如最近設計圈的 “有贊審美缺失部”事件，也從正面反應了B端設計師對于圖標的認識不夠清晰，但透過現象看本質，是有贊部門對于圖標規范的缺失。因此，B端的圖標規范就顯得尤為重要

我們再從圖標出發，從宏觀上講，圖標是一門全球通用的“符號語言”，而在每一種語言當中，必定會有它的“語法”以及“單詞”，圖標中的“語法”與“單詞”一般包含有那些呢？

1) 圖標中的“語法”

它就是我們常見的圖標規范文檔。一般需要包含：設計原則、輪廓模版、操作熱區、命名規則

?設計原則

在設計原則中，一般是貫穿整個產品的始終，因此需要設計師深入提煉，設計原則能夠幫助我們確定產品方向，通過設計原則的落地，有利于我們高效做出決策

在圖標的設計原則中，主要通過設計的核心理念進行傳達，例如在Antdesign中，確定了圖標設計的四條原則

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

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

節奏：挖掘構圖中的秩序之美

愉悅：賦予適度的情感

?輪廓模版

輪廓模版是為了明確圖標視覺尺寸。我們通過 Keyline作為形狀的基礎，去規范我們圖標的核心形狀，這樣能夠幫助我們設計出大小統一的圖標，在多條產品線之間也能保證統一的視覺重量

?操作熱區

這是經常被B端設計師忽略的的細節，一方面操作熱區最開始興起于移動端，不知道大家還記得一句很經典的話嗎？“iOS的最小操作熱區為44px，安卓則為48px”。另一方面到了桌面端后，因為屏幕分辨率的不同，沒有規定最小操作熱區。但受到文字落地方式[2]的限制，12px漸漸成為大家公認圖標操作熱區的最小值

[2]落地方式：因為在Chrome瀏覽器中，文字受到瀏覽器大小的限制，最小的字體為12px，而在12px中的文字，與12px的圖標搭配最為合適，圖標都會與文字進行搭配使用，所以12px為PC端圖標最小尺寸

?命名規則

命名規則是屬于一項最為基礎的技能，一般有經驗的設計師都會有他自己的一套命名規則，而在圖標規范中，需要明確多項目之間有哪些不同。比如每個產品項目有自己單獨的后綴，在公共的基礎圖標部分又使用相同的命名規則，這樣既能夠讓圖標應用到各個產品，同時每個圖標之間也能追尋到最終的源頭

比如常見的命名規則：組件_類別_功能_狀態，但是在B端產品中通常為：組件_類別_狀態，這里將大量的組件、類別、狀態的英文命名都集合到一起，建議收藏

2) 圖標中的“單詞”

它是我們常見的圖標資源。一般由：圖標性格、圖標場景兩部分組成

?圖標性格

在圖標的設計中，圖標性格尤為重要。我們要根據自身產品特性，選擇與特性相匹配的圖標性格

我將圖標的所有性格羅列出一個坐標軸，通過圖標的粗細以及圖標圓滑程度的不同，將圖標分為四種不同的風格：粗曠、可愛、精致、商務

在B端圖標設計中，粗曠與商務是更適合的圖標性格。在圖標性格的選擇中，我們要與產品的設計理念相融合。通過對圖標性格的確立，我們也能更好的縮小范圍減少設計資源浪費

ps：當然你應該根據自身產品的視覺表現進行相應優化，拒絕生搬硬套

?場景不同含義不同

圖標是一門全球通用的“符號語言”，所以也具有多語意的特性，一些語言在不同的場景有著截然不同的意思。圖標也一樣，我們需要根據不同的場景去表達不同圖標的含義，因此就需要對B端圖標的場景進行一個系統梳理

先來看一個例子：

在這個例子中，相同的五角星在不同的場景對應著不同的意思，比如在淘寶詳情頁中星星代表著收藏；在美團點評中代表著每一個評價的評分，這樣場景的不同含義也不同也，因此我們需要去梳理B端圖標的場景

1. 基礎組件場景 - 象形圖標

在文章開始“咱們老規矩”中講到：基礎組件與業務組件之間的差距，這里就不再贅述兩者區別。

B端產品中，基礎組件需要涉及很多圖標，比如：日期組件中，需要有日期圖標作為組件的屬性展示；下拉菜單中，需要有一個下拉箭頭來代表。而這些基礎組件中都使用基礎圖標，又因為這些圖標都采取象形的手法簡化而來，因此基礎圖標大多數為象形圖標

象形圖標：

象形圖標是根據實際生活中物體的提煉所得，比如我們說的編輯，是通過鉛筆象形而來，經過大家對于鉛筆編輯的不斷理解，久而久之形成；篩選是通過漏斗象形而來；在象形圖標的設計中，需貼合真實使用場景

2. 運營模塊場景 - 表意圖標

通常出現在各種插件市場以及運營商城的頁面中。也是B端產品盈利的一個關鍵所在，在行業內常說的一句話：“Saas產品基本不掙錢，就是交個朋友，掙錢全靠后期運營與維護”

因此，在運營模塊使用的圖標也格外被重視，比如我舉幾個例子，他們在運營模塊中，都采取了“表意圖標”進行展示

表意圖標：

表意圖標是生活中原本不存在的物體，通過不斷發展，大家將某類東西約定俗成創造出的一個圖標，通常表示某類事物或某類行為比如：砍價、社群等等

要提醒大家的一點，這類圖標基本都是約定俗成，所以在設計上不要有過多變動，以免讓用戶感到疑惑

3. 專業性場景 - 文字圖標

在B端圖標場景中，還存在一類特別專業性的圖標，這類圖標在行業中往往沒有約定俗成的表達形式，而在設計表達上，也無法去使用簡單的圖形，因此使用圖標存在很大認知成本。比如：拼團、清倉

這時最好的解決辦法就是將相應的專業詞匯文字化，使用“文字圖標“將關鍵詞表示出來。

文字圖標：

是使用文字化的圖標直接表達含義，在一些垂直專業領域，常用文字的縮寫形式進行表達。比如美團外賣中的“打折”作為大眾都需要使用的一個圖標，很難去使用圖形符號去描述，因此使用“折”就能夠準確直接的表達，文字圖標雖然使用起來過于簡單粗暴，但是它的信息傳達比其他形式要高，因此在B端環境復雜的圖標生態中，是常用的方式。而在現在很火的下沉市場中，也多采取文字圖標的形式，這樣不會因為用戶的認知水平的高低產生立即上的偏差

4. 導航菜單場景 - 組合圖標

組合圖標在B端場景中經常存在，因業務復雜，常常需要將圖標進行公用，同時進行相應的思考，關于組合圖標與場景我會在第三章講到，這里就不細細展開

1) 根據公司不同階段進行搭建

在團隊中建立一整套圖標規范通常會有兩種模式：開源與自主搭建，我會從效率、品牌、完整度三個方面來進行分析與評價：

開源圖標

站在巨人的肩膀上，能夠為自身產品建立一套快速的圖標規范。通過圖標庫的引用，減少公司的設計成本，能夠有較高的設計質量與效率，但使用開源圖標主要針對的是公共業務，對于一些特定業務而言，會有相應的局限性，我會在第四章與大家獨家分享一些開源高質量的B端圖標庫

效率：★★★★★

品牌：★★★☆☆

完整度：★★★☆☆

自主搭建

自主搭建會擁有自己獨特的視覺風格與表達形式。但需要耗費一定的設計成本，自主搭建是一個循序漸進、反復打磨的過程，也常會推翻重來，因此需要大量的時間人力成本。對于公司而言獨特的符號語言更有利于產品的對外營銷。但自助搭建更考驗設計師的能力，如果能力欠佳，會得不償失

效率：★★★☆☆

品牌：★★★★★

完整度：★★★★★

明白了兩種搭建方式后，在我們搭建B端圖標規范之前，需要明確自身的產品的“定位”，根據產品的不同階段，我們會采取不同方式進行規范的搭建

在我了解的產品階段中，一般分為三種：初創期、成長期、成熟期

初創期的產品：

因為處于試探階段，產品需要經常迭代，所以處于一個變化的節奏中。為了應對這種變化，引用開源圖標庫便成為一種較好的解決方式

成長期的產品：

成長期的產品會從混亂到逐漸的穩定。設計師也會逐漸意識到產品的整體形態以及后續的規劃方向。這時候就需要整體考慮，去優化掉初創期所遺留下的問題，同時提升產品的設計競爭力

成熟期的產品：

成熟期的產品需要構建一套自己的方法論。并且要脫離圖標這個單一維度。去多維度多層次的思考，通過自主搭建，形成多條產品線的統一，建立完整成熟的設計系統來滿足業務發展的需要

2) 圖標資源如何設計

在圖標資源設計當中，我把圖標分為基礎圖標與業務圖標的分類進行講解，讓大家能夠更好理解

?基礎圖標

在我們的基礎圖標中，保證圖標性格一致的前提下，又牽涉到直角拐角以及圖標粗細等設計細節，因此在這里和大家細講這方面的內容

形大角大、形小角小

在基礎圖形設計中，圓角是一個經常被忽略的細節，我們要根據圖形的面積大小去設計我們圓角的大小，而不是拿到圖標就是2x的圓角，這時候就需要講到圖形與圓角之間的關系

當基礎圖形占的面積過大同時為正方形時，建議使用3x的圓角；當基礎圖形變小時，比如滿高(寬)矩形時，建議使用2x的圓角。當基礎圖形為較小(小于1/2寬高)矩形時，建議使用1x的圓角

* 這里的3x是指與描邊的大小比例

透視正確

在圖標的透視中，優先選用正視的圖標進行繪制，這樣能夠保證圖標庫的風格一致但對于有些圖標不能通過正視角度進行表達時，使用立體圖標表示，一樣符合透視一致性的原理，但需要極力避免

?業務圖標：

業務圖標因其特殊性，一般都為組合圖標，通常組合形式為A+B+C的模式，如果采取單個圖標繪制，難以保證圖標的一致性，同時產出效率極低，因此業務圖標會采取模塊化的方式進行設計 業務圖標在B端產品的菜單導航最為常見：比如在我接手到的CRM產品中，一共有50多個業務圖標，你是單一思考還是全局思考，就顯得尤為重要

我將圖標模塊化的方法分為以下幾步：

第一步：拆解整理

當我們拿到需求時，因為圖標數量龐大，所以需要尋找到圖標中的共性與個性

舉個例子：銷售簡報管理、銷售訂單管理、銷售權限管理、銷售公海池管理、業務銷售插件、商機銷售階段，他們基本都是頭部以銷售開頭，最后都會跟一個管理進行動作的描述。而中部的描述不同，也會在產品中的其他部分找到與之對應的文案

因此我們就發現了圖標當中的一個共性，而在一個龐大的B端圖標庫中，有這樣的共性的地方還有很多，我們通過一點點的拆解整理，整理出一個圖標間共性表格，完成拆解整理的工作

第二步：模塊分區

通過模塊分區，了解到圖標的結構，模塊分區的思路來源于Ant Design 圖標規范2.2 中講到的圖標韻律

在一次偶然的機會，看到Ant Design對于相同類型的圖標給出想類似的展現形式，因此想到我們圖標對于自身應該采取模塊的方式進行分區

通過一周的時間總結，對于市面上大多數B端圖標進行的拆解，我將整個模塊分為三個區域：一個主分區與兩個次分區通過主次分區間的不同組合，能夠滿足絕大多數B端圖標的使用場景主圖標：主要表達圖標的主要功能，會根據業務不同產生不同的主圖標次圖標：代表與主圖標相對應的功能，比如常見的：管理、權限、規則這樣通過主、次圖標的組合，就能夠將組合圖標進行高效的繪制

第三步：分區繪制

使用分區繪制，落地分區的圖標形式

在一個圖標中，如果讓你單一繪制例如銷售、審批、數據等圖標時，難度比雜糅到一起的組合圖標要低，因此分區繪制會時圖標的難度降低，可以讓團隊中其他水平較低的設計師一同參與。在繪制中，我們以24px大小的圖標為例：

主圖標的大小為：16px

次圖標的大小為：8px

按照相對應的大小尺寸，主圖標在圖形上要設計得更明確，因為外部還要與次圖標進行疊加，同時需要在多個圖標中出現同樣的圖形，也因此在造型上不能過于復雜

次圖標以簡潔為主，因為較小的面積，更多狀態的展示，需要它能夠簡潔易識別，這樣才使圖標在疊加的過程中，使兩者圖標更具代表性

第四步：細節調整

因為是多個圖標進行重疊形成，所以也會存在許多圖標連接間細節毫無規律的情況，因此保留相應的細節，比如圖標間的間距、圖標未來的擴展性等

1) 圖標規范

? Lightning

https://www.lightningdesignsystem.com/guidelines/iconography/

salesforce是一個值得仰望的B端產品，而伴隨著salesforce的不斷發展，Lightning設計系統也不停地在迭代，Lightning中的圖標規范不僅全面，而且落地，同時它也擁有500+個圖標資源

關于圖標規范，Lightning系統一直做到十分落地，因為Salesforce已經成型多年，設計規范一直十分穩定，關于它規范當中的每一個細節，都值得細細品味，感興趣還可以去多研究設計系統的迭代更新記錄，里面有寶藏～

? ATLASSIAN

https://atlassian.design/foundations/iconography/

ATLASSIAN在我心中一直是B端行業的頭部產品，無論是產品還是設計，它旗下的Jira、Confluence、Trello，都有著很高的設計水準，同時作為多個產品的設計系統，它的包容性也值得大家去學習，可以多去實際頁面去深入體驗，會有很多不一樣的收獲

? Material Design

https://material.io/design/iconography/system-icons.html#icon-themes

在B端產品中，為什么我不推薦apple又或者其他的設計語言，相比而言，Google的Material Design一直擁有著很高的水平，與實際情況相比，Material Desgin 設計的背景與B端實際情況十分類似，同樣擁有著混亂的屏幕分辨率，亟待解決的頁面層次，卡片化的設計思路，因為MD設計設計在對這些特殊情況都有深入的考慮

2) 圖標庫

1.REMIXICON

https://remixicon.com/

Remix Icon是國人設計師章蕭醇開源的一款圖標庫，目前這個圖標庫里共有2271個圖標。圖標涵蓋建筑、商業、通訊、設計、文檔編輯、財務、健康等十多種圖標類型，可以直接下載SVG或PNG版本或者復制SVG代碼

從圖標質量上來看，Remix Icon的質量算是我見過開源圖標庫中最高，擁有線性和面性兩種不同版本，兩千多個的圖標里，一定有你需要的～

2.Fearher

https://feathericons.com/

https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Librar

Feathericons是一個漂亮和簡單的開源圖標庫，每個圖標均以24x24網格設計，它包含282個SVG圖標，你可以使用右側的設置去調整圖標的粗細以及圖標大小，你還可以通過單擊網站右上角的月亮圖標來切換明暗模式。

如果你是Figma的用戶，作者也提供了Figma插件，在使用上的體驗會更加的友好

3.EVA Icons

https://akveo.github.io/eva-icons/#/

Eva Icons是Eva Design System中的圖標部分，一共有480個開源圖標，分別以SVG和PNG格式展示。在圖標類型上，你可以選線性和面形兩種風格圖標，很有趣的一點，你可以將鼠標Hover圖標上去，你可以自己設定圖標的動畫效果，如：放大、晃動、翻轉，這大概就是設計師的情懷吧～

4.heroicons

https://heroicons.dev/

Heroicons是由Tailwind CSS的創建者構建的另一個很棒的開源圖標庫。它具有超過165個具有填充和輪廓樣式的獨立圖標，但每個元素也提供深色和白色版本。圖標的外觀非常優質且制作精良

這些圖標的入門非常簡單，他們還提供了Figma中的庫。如果你想包含所有的圖標，你可以從公共資源庫中下載所有的SVG文件

5.Ikonate

https://ikonate.com/

最后但并非最不重要的是，Ikonate是另一個令人敬畏的開源圖標庫，它擁有約100個基于平面設計的高級圖標。它是根據非常寬松的MIT許可證慷慨授權的

導出之前，你可以輕松配置圖標的大小，邊框寬度，邊框和邊角以及顏色

6.IconPark

https://iconpark.bytedance.com/

字節跳動在9月3日開放的圖標庫，很大多數人都不知道，圖標風格有線性、填充、雙色、多色可選，圖標質量也十分的高，支持批量下載，網站還處于初期，感覺目前還是針對內部人員使用，只是目前將其開源出來，效果還不錯

因為篇幅關系，還有幾十個圖標資源網站放在youthce.com，這里就不做過多展示

2) Iconfont上優質的圖標資源

先說一句，由于iconfont的鏈接放到公眾號后老是打不開，因此大家可以通過我提供的作者名稱，進行iconfont 用戶搜索 找到

1. 阿里云設計中心

先這個是阿里云的賬號，很多B端同學做云產品的可以多多參考

2. musongtao

他的OA辦公系列圖標給我留下了很深刻印象，之前也嘗試過臨過一些

3. Mokki

4. Hi劉老爺

5. iconfont 官方圖標庫

1.遠古時期-圖片與雪碧圖

之前，在與一些設計前輩聊天時，談到過這個話題，那時候的圖標還原都采取圖片的形式，隨著網站頁面不斷增加，大家就會發現圖片十分占據請求資源，一方面網頁中每當有一個圖標都會去請求一次請求頻率十分的高，另一方面圖標本身體積很小，這樣頻繁請求后臺服務器會成承受更大的壓力，這樣顯然是不劃算的，隨后雪碧圖就出現了

雪碧圖：就是將多個圖標合成成為一個圖表，然后前端利用 css 的 background-position 定位去顯示不同的 icon 圖標。雖然解決頻繁請求的問題，但還是存在一個巨大的痛點，難以維護

因為當設計師每增加一個圖標，都需要修改原始圖片，而且通常雪碧圖是前端使用工具生成，工具稍稍不對就會影響前面定位好的圖片，同時雪碧圖的修改直接影響到之前的緩存，長此以往就會變得難以維護

2.發展時期-字體圖標

因為使用圖片落地圖標還是會有種種問題，字體圖標便開始問世，第三章剛講到圖標本質也是一種“文字符號”，所以在屬性上是極為符合的。在前端CSS開始支持@font-face引入web font中后，字體圖標就來到了高速發展的時期，比如Font Awesome就在這時候崛起，這時候國內出現了一個圖標托管網站：iconfont

3.成長時期-iconfont的興起

Iconfont已經陪伴我們7年，它集合了圖標托管、共享、管理平臺，算是解決了國內大多數設計師圖標管理的需求，iconfont是“阿里爸爸”旗下的產品，主要是有很多圖標資源提供給大家下載，當然強烈建議iconfont能夠擁有排序功能，對于我這種強迫癥來說，不能忍受圖標類型是混亂的

4.崛起時期-svg

svg源本就是圖標的最好歸屬，一方面svg本身就是擁有伸縮的特性，能夠滿足圖標任意放大縮小的功能，另一方面在眾多編輯繪圖軟件中，都支持svg的任意編輯，非常適合設計師再修改。同時svg可以直接使用，也會避免字體圖標那樣需要需要通過管理平臺進行維護

svg真正的崛起還是在內聯svg的出現，在2016年Github全面啟用了內聯圖標，可以將圖標直接嵌入到HTML的內容中，是它的文檔模型能夠被JS/CSS訪問操作，前端就可以通過CSS的控制實現圖標顏色、樣式，滿足圖標的多種需求

如果大家感興趣，可以出個番外篇與大家聊聊font icon 與 svg的對比

在圖標的設計中，我崇拜過Susan的細膩，能夠在如此低的分辨率中做著設計，而對于后續的mac圖標的設計中，都有著深遠的意義

我也敬佩錘子，將具象的圖標刻畫的細致到位，以至于很多時候看著圖標發呆，細細研究它的技法；

希望B端的圖標不要因為門檻而困擾著大家，我曾經深受圖標困惑，希望這篇文章你會有所收獲，由于篇幅較長，幾經修改，有細節不正確的地方，歡迎留言糾正

我是CE青年

一個2 B行業的2B設計師

我們下篇文章再見

如果你覺得文章不錯記得 關注點贊

挑戰30天在頭條寫日記#

功能：

顏色插件

Chart.js 品牌顏色的默認調色板可作為內置的省時零配置插件使用。

Tree-shaking

通過僅注冊必要的組件，JavaScript 包的大小可以減少數十千字節。

規模堆疊

布局框可以按組堆疊和加權。

字幕插件

輔助標題插件，具有與主標題相同的所有選項。

線段樣式

線段可以根據任何用戶定義的標準設置樣式。

3.0新功能高級動畫

每個元素中每個屬性的轉換都可以單獨且獨立地配置。

新功能表現！

引入了許多性能增強功能。此示例具有 1M (2x500k) 點，啟用了新的抽取插件。

2.0新功能混合圖表類型

混合搭配條形圖和折線圖，以在數據集之間提供清晰的視覺區分。

2.0新功能新的圖表軸類型

輕松繪制日期時間、對數甚至完全自定義比例的復雜、稀疏數據集。

2.0新功能動畫一切！

更改數據、更新顏色和添加數據集時，開箱即用的令人驚嘆的過渡。

使用Demo-創建圖表

在此示例中，我們為單個數據集創建條形圖并將其呈現在 HTML 頁面上。將此代碼片段添加到您的頁面：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx=document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

你應該得到一個像這樣的圖表：

讓我們分解一下這段代碼。

首先，我們的頁面中需要有一個畫布。建議為圖表提供自己的容器以提高響應能力。

<div>
  <canvas id="myChart"></canvas>
</div>

現在我們有了畫布，我們可以包含來自 CDN 的 Chart.js。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

最后，我們可以創建一個圖表。我們添加一個腳本，該腳本獲取myChart畫布元素并new Chart使用所需的配置進行實例化：bar圖表類型、標簽、數據點和選項。

<script>
  const ctx=document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Chart.js 的所有主要概念：

圖表類型和元素、數據集、自定義、插件、組件和 tree-shaking。不要猶豫，點擊文本中的鏈接。

我們將從頭開始使用幾個圖表構建 Chart.js 數據可視化：

使用 Chart.js 構建新應用程序

在新文件夾中，創建package.json包含以下內容的文件：

{
  "name": "chartjs-example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.6.2"
  },
  "dependencies": {
    "@cubejs-client/core": "^0.31.0",
    "chart.js": "^4.0.0"
  }
}

現代前端應用程序經常使用 JavaScript 模塊捆綁器，因此我們選擇Parcel 作為一個很好的零配置構建工具。我們還安裝了 Chart.js v4 和Cube 的 JavaScript 客戶端，這是一個用于數據應用程序的開源 API，我們將使用它來獲取真實世界的數據（稍后會詳細介紹）。

運行npm install、yarn install、 或pnpm install安裝依賴項，然后創建src文件夾。在該文件夾中，我們需要一個非常簡單的index.html文件：

<!doctype html>
<html lang="en">
  <head>
    <title>Chart.js example</title>
  </head>
  <body>
    <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
    <div style="width: 800px;"><canvas id="acquisitions"></canvas></div>

    <!-- <script type="module" src="dimensions.js"></script> -->
    <script type="module" src="acquisitions.js"></script>
  </body>
</html>

正如您所看到的，Chart.js 需要最少的標記：canvas帶有 的標記id，我們稍后將通過它引用圖表。默認情況下，Chart.js 圖表是響應式的，并占據整個封閉容器。所以，我們設置寬度div來控制圖表的寬度。

最后，讓我們創建src/acquisitions.js包含以下內容的文件：

import Chart from 'chart.js/auto'

(async function() {
  const data=[
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row=> row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row=> row.count)
          }
        ]
      }
    }
  );
})();

讓我們看一下這段代碼：

• 我們Chart從特殊路徑導入 Chart.js 主類chart.js/auto。它加載所有可用的 Chart.js 組件（這非常方便），但不允許進行樹搖動。我們稍后會解決這個問題。
• 我們實例化一個新Chart實例并提供兩個參數：將呈現圖表的畫布元素和選項對象。
• 我們只需要提供一個圖表類型 ( bar) 并提供data它由labels（通常是數據點的數字或文本描述）和一個數組datasets（Chart.js 支持大多數圖表類型的多個數據集）組成。每個數據集都用 a 指定，label并包含一個數據點數組。
• 目前，我們只有一些虛擬數據條目。因此，我們提取year和count屬性來生成labels唯一數據集中的 和 數據點數組。

是時候使用npm run dev、yarn dev、 或運行示例并在 Web 瀏覽器中pnpm dev導航到localhost:1234 了：

只需幾行代碼，我們就得到了一個具有很多功能的圖表：圖例、網格線、刻度線和懸停時顯示的工具提示。刷新網頁幾次即可看到圖表也是動畫的。嘗試單擊“按年份獲取”標簽，您會發現您還可以切換數據集可見性（當您有多個數據集時特別有用）。

簡單的定制

讓我們看看如何自定義 Chart.js 圖表。首先，讓我們關閉動畫，以便立即顯示圖表。其次，讓我們隱藏圖例和工具提示，因為我們只有一個數據集和相當瑣碎的數據。

將調用new Chart(...);替換src/acquisitions.js為以下代碼片段：

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      options: {
        animation: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        }
      },
      data: {
        labels: data.map(row=> row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row=> row.count)
          }
        ]
      }
    }
  );

正如您所看到的，我們已將該options屬性添加到第二個參數中，這樣您就可以為 Chart.js 指定各種自定義選項。通過提供的布爾標志禁用動畫animation。大多數圖表范圍的選項（例如，響應能力或設備像素比）都是這樣配置的。

圖例和工具提示隱藏在plugins. 請注意，Chart.js 的一些功能被提取到插件中：獨立的、獨立的代碼片段。其中一些插件作為Chart.js 發行版 的一部分提供，其他插件是獨立維護的，并且可以位于很棒的 插件、框架集成和其他圖表類型列表中。

您應該能夠在瀏覽器中看到更新后的簡約圖表。

真實世界數據

對于硬編碼、有限大小、不切實際的數據，很難展示 Chart.js 的全部潛力。讓我們快速連接到數據 API，以使我們的示例應用程序更接近生產用例。

讓我們創建src/api.js包含以下內容的文件：

import { CubejsApi } from '@cubejs-client/core';

const apiUrl='https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';

const cubeApi=new CubejsApi(cubeToken, { apiUrl });

export async function getAquisitionsByYear() {
  const acquisitionsByYearQuery={
    dimensions: [
      'Artworks.yearAcquired',
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [ {
      member: 'Artworks.yearAcquired',
      operator: 'set'
    } ],
    order: {
      'Artworks.yearAcquired': 'asc'
    }
  };

  const resultSet=await cubeApi.load(acquisitionsByYearQuery);

  return resultSet.tablePivot().map(row=> ({
    year: parseInt(row['Artworks.yearAcquired']),
    count: parseInt(row['Artworks.count'])
  }));
}

export async function getDimensions() {
  const dimensionsQuery={
    dimensions: [
      'Artworks.widthCm',
      'Artworks.heightCm'
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [
      {
        member: 'Artworks.classification',
        operator: 'equals',
        values: [ 'Painting' ]
      },
      {
        member: 'Artworks.widthCm',
        operator: 'set'
      },
      {
        member: 'Artworks.widthCm',
        operator: 'lt',
        values: [ '500' ]
      },
      {
        member: 'Artworks.heightCm',
        operator: 'set'
      },
      {
        member: 'Artworks.heightCm',
        operator: 'lt',
        values: [ '500' ]
      }
    ]
  };

  const resultSet=await cubeApi.load(dimensionsQuery);

  return resultSet.tablePivot().map(row=> ({
    width: parseInt(row['Artworks.widthCm']),
    height: parseInt(row['Artworks.heightCm']),
    count: parseInt(row['Artworks.count'])
  }));
}

讓我們看看那里發生了什么：

• 我們為Cubeimport （數據應用程序的開源 API）提供 JavaScript 客戶端庫，使用 API URL ( ) 和身份驗證令牌 ( ) 配置它，最后實例化客戶端 ( )。 apiUrlcubeTokencubeApi
• Cube API 托管在Cube Cloud 中，并連接到一個數據庫，該數據庫包含 約 140,000 條記錄的公共數據集 ，代表美國紐約現代藝術博物館 收藏的所有藝術品。當然，這是一個比我們現在擁有的更真實的數據集。
• 我們定義了幾個異步函數來從 API 獲取數據：getAquisitionsByYear和getDimensions。第一個返回按購買年份計算的藝術品數量，另一個返回每個寬度-高度對的藝術品數量（我們將在另一個圖表中需要它）。
• 我們來看一下getAquisitionsByYear。首先，我們在變量中創建一個基于 JSON 的聲明性查詢acquisitionsByYearQuery。正如您所看到的，我們指定了每件yearAcquired我們想要獲得count的藝術品；yearAcquired必須設置（即不是未定義）；結果集將按yearAcquired升序排序。
• 其次，我們resultSet通過調用獲取并將其映射到具有所需屬性cubeApi.load的對象數組。yearcount

現在，讓我們將真實世界的數據傳遞到我們的圖表中。請進行一些更改src/acquisitions.js：添加導入并替換data變量的定義。

import { getAquisitionsByYear } from './api'

// ...

const data=await getAquisitionsByYear();

完畢！現在，我們的真實數據圖表如下所示?？磥?964年、1968年和2008年發生了一些有趣的事情！

我們已經完成了條形圖。讓我們嘗試另一種 Chart.js 圖表類型。

進一步定制

Chart.js 支持許多常見的圖表類型。

例如，氣泡圖允許同時顯示三個維度的數據：x和y軸上的位置代表兩個維度，第三個維度由單個氣泡的大小表示。

要創建圖表，請停止已運行的應用程序，然后轉到src/index.html并取消注釋以下兩行：

<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>

<script type="module" src="dimensions.js"></script>

然后，創建src/dimensions.js包含以下內容的文件：

import Chart from 'chart.js/auto'
import { getDimensions } from './api'

(async function() {
  const data=await getDimensions();

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      data: {
        labels: data.map(x=> x.year),
        datasets: [
          {
            label: 'Dimensions',
            data: data.map(row=> ({
              x: row.width,
              y: row.height,
              r: row.count
            }))
          }
        ]
      }
    }
  );
})();

也許，一切都非常簡單：我們從 API 獲取數據并渲染一個具有該類型的新圖表，將三個維度的數據作為、和（半徑）屬性bubble傳遞。xyr

現在，使用 、 或 重置緩存并再次啟動rm -rf .parcel-cache應用程序。我們現在可以查看新圖表：npm run devyarn devpnpm dev

嗯，看起來不太漂亮。

首先，圖表不是正方形的。藝術品的寬度和高度同樣重要，因此我們希望圖表的寬度也等于其高度。默認情況下，Chart.js 圖表的縱橫比為 1（對于所有徑向圖表，例如圓環圖）或 2（對于所有其他圖表）。讓我們修改圖表的縱橫比：

// ...

	new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
      },

// ...

現在看起來好多了：

然而，這仍然不理想。水平軸的范圍從 0 到 500，垂直軸的范圍從 0 到 450。默認情況下，Chart.js 會自動將軸的范圍（最小值和最大值）調整為數據集中提供的值，因此圖表“適合“你的數據。顯然，MoMa 收藏中沒有高度在 450 至 500 厘米范圍內的藝術品。讓我們修改圖表的軸配置來解決這個問題：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500
          },
          y: {
            max: 500
          }
        }
      },

// ...

偉大的！看一下更新后的圖表：

然而，還有一個問題：這些數字是多少？單位是厘米不是很明顯。讓我們對兩個軸應用自定義刻度格式以使事情變得清晰。我們將提供一個回調函數，調用該函數來格式化每個刻度值。這是更新后的軸配置：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500,
            ticks: {
              callback: value=> `${value / 100} m`
            }
          },
          y: {
            max: 500,
            ticks: {
              callback: value=> `${value / 100} m`
            }
          }
        }
      },

// ...

完美，現在我們在兩個軸上都有合適的單位：

多個數據集

Chart.js 獨立繪制每個數據集，并允許對它們應用自定義樣式。

看一下圖表：有一條可見的氣泡“線”，其等號x和y坐標代表方形藝術品。將這些氣泡放入自己的數據集中并以不同的方式繪制它們會很酷。此外，我們可以將“較高”的藝術品與“較寬”的藝術品分開，并以不同的方式繪制它們。

我們可以這樣做。將其替換datasets為以下代碼：

// ...

        datasets: [
          {
            label: 'width=height',
            data: data
              .filter(row=> row.width===row.height)
              .map(row=> ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width > height',
            data: data
              .filter(row=> row.width > row.height)
              .map(row=> ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width < height',
            data: data
              .filter(row=> row.width < row.height)
              .map(row=> ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          }
        ]

// ..

如您所見，我們定義了三個具有不同標簽的數據集。每個數據集都有自己的使用 提取的數據片段filter?，F在，它們在視覺上是不同的，而且正如您所知，您可以獨立切換它們的可見性。

這里我們依賴默認的調色板。但是，請記住，每種圖表類型都支持許多數據集選項，您可以隨意自定義。

插件

另一種非常強大的自定義 Chart.js 圖表的方法是使用插件。您可以在插件目錄 中找到一些或創建您自己的臨時插件。在 Chart.js 生態系統中，這是慣用的，并且期望通過插件來微調圖表。例如，您可以自定義畫布背景或使用簡單的臨時插件為其添加邊框。讓我們嘗試一下后者。

插件具有廣泛的 API，但簡而言之，插件被定義為name具有擴展點中定義的一個或多個回調函數的對象。new Chart(...);在調用之前插入以下代碼片段來代替src/dimensions.js：

// ...

  const chartAreaBorder={
    id: 'chartAreaBorder',

    beforeDraw(chart, args, options) {
      const { ctx, chartArea: { left, top, width, height } }=chart;

      ctx.save();
      ctx.strokeStyle=options.borderColor;
      ctx.lineWidth=options.borderWidth;
      ctx.setLineDash(options.borderDash || []);
      ctx.lineDashOffset=options.borderDashOffset;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  };

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      plugins: [ chartAreaBorder ],
      options: {
        plugins: {
          chartAreaBorder: {
            borderColor: 'red',
            borderWidth: 2,
            borderDash: [ 5, 5 ],
            borderDashOffset: 2,
          }
        },
        aspectRatio: 1,

// ...

正如您所看到的，在這個chartAreaBorder插件中，我們獲取畫布上下文，保存其當前狀態，應用樣式，在圖表區域周圍繪制矩形，然后恢復畫布狀態。我們還傳遞了該插件，plugins因此它僅適用于這個特定的圖表。我們還將插件選項傳遞給options.plugins.chartAreaBorder; 我們當然可以在插件源代碼中對它們進行硬編碼，但這種方式可重用性更高。

我們的氣泡圖現在看起來更漂亮了：

搖樹

在生產中，我們努力交付盡可能少的代碼，以便最終用戶可以更快地加載我們的數據應用程序并獲得更好的體驗。為此，我們需要應用tree-shaking ，這是一個奇特的術語，用于從 JavaScript 包中刪除未使用的代碼。

Chart.js 的組件設計完全支持 tree-shaking。您可以一次注冊所有 Chart.js 組件（這在您進行原型設計時很方便）并將它們與您的應用程序捆綁在一起?；蛘撸梢詢H注冊必要的組件并獲得最小的捆綁包，其大小要小得多。

讓我們檢查一下我們的示例應用程序。捆綁包尺寸是多少？您可以停止應用程序并運行npm run build, 或yarn build, 或pnpm build。片刻之后，您將得到如下信息：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms

dist/index.html              381 B   164ms
dist/index.74a47636.js   265.48 KB   1.25s
dist/index.ba0c2e17.js       881 B    63ms
? Done in 0.51s.

我們可以看到 Chart.js 和其他依賴項被捆綁在一個 265 KB 文件中。

src/acquisitions.js為了減小包的大小，我們需要對和進行一些更改src/dimensions.js。首先，我們需要從兩個文件中刪除以下導入語句：import Chart from 'chart.js/auto'.

相反，我們只加載必要的組件并使用 Chart.js“注冊”它們Chart.register(...)。這是我們需要的src/acquisitions.js：

import {
  Chart,
  Colors,
  BarController,
  CategoryScale,
  LinearScale,
  BarElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BarController,
  BarElement,
  CategoryScale,
  LinearScale,
  Legend
);

這是以下代碼片段src/dimensions.js：

import {
  Chart,
  Colors,
  BubbleController,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BubbleController,
  PointElement,
  CategoryScale,
  LinearScale,
  Legend
);

您可以看到，除了Chart類之外，我們還加載圖表類型、比例和其他圖表元素（例如，條形圖或點）的控制器。您可以在文檔中查找所有可用的組件。

或者，您可以按照控制臺中的 Chart.js 建議進行操作。例如，如果您忘記導入BarController條形圖，您將在瀏覽器控制臺中看到以下消息：

Unhandled Promise Rejection: Error: "bar" is not a registered controller.

chart.js/auto請記住在準備生產應用程序時仔細檢查進口。只需要一次這樣的導入就可以有效地禁用樹搖動。

現在，讓我們再次檢查我們的應用程序。運行yarn build你會得到這樣的結果：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms

dist/index.html              381 B   176ms
dist/index.5888047.js    208.66 KB   1.23s
dist/index.dcb2e865.js       932 B    58ms
? Done in 0.51s.

過僅導入和注冊選定的組件，我們刪除了超過 56 KB 的不必要代碼。鑒于其他依賴項在捆綁包中占用約 50 KB，tree-shaking 有助于從我們的示例應用程序的捆綁包中刪除約 25% 的 Chart.js 代碼。

項目地址：https://github.com/chartjs/Chart.js

除摩天樓風載晃動的減震擺

劉延柱 科學網博客 2021-4-1

晨霧 / 轉帖

【晨霧按語】據媒體報道今天（2021年5月18日）中午時分，深圳賽格大廈出現晃動，現場有人員從大廈撤離。記者當日14時10分許從深圳消防獲悉，已接警并出警，具體狀況需進一步調查。

在此轉載一篇關于摩天大樓減震擺的科普文章。感謝文章原作者。

--------------------

赴臺旅游過的游客大都去過臺北的 101 大樓（圖 1），參觀過大樓里懸掛的巨大的減震擺（圖 2）。這個直徑 5.5 米，重達 660 噸的巨大鋼球由 4 根粗鋼索懸掛在 88 層與 92 層之間，形成一個大單擺。

圖1 臺北101 大樓

圖2 101 大樓的減震擺

2016 年完工的上海中心大廈高度 632 米，遠遠超過高度 448 米的 101 大樓（圖 3）。是已建成的全國第一，世界第二高樓，上海的地標性建筑之一。上海中心的頂部 126 層也懸掛著一個 1000 噸的重量更大的減震擺。這個巨大的減震轉置全名是 “ 擺式電渦流調諧質量阻尼器 ” (Pendulum Eddy-current Tuned Mass Damper) [1]。值得一提的是減震擺質量塊上方裝飾的藝術品（圖 4）。這個從《山海經》中 “燭龍之眼” 獲得靈感的雕塑作品與 “龍塔” 式的大廈造型相輝映。上方有一圓洞直指蒼穹，在透過玻璃的陽光投射下更增添神秘色彩，被昵稱為上海中心大廈的 “慧眼” 。

圖 3 上海中心大廈

圖 4 上海中心大廈的減震擺

樓層太高的摩天樓很容易受到風力的影響產生搖晃，這種晃動屬于自激振動。在博文 “瑞利方程和范德波爾方程描述的自激振動” 里，對于輸電線、懸索橋、高層建筑等細長物體因風載導致的自激振動有過詳細說明。類似的這種現象早在 19 世紀就已引起注意。1878 年捷克物理學家斯特勞哈爾（Strouhal,V.）發現，當微風吹過豎琴的細弦時會使豎琴發出聲音，因此對氣流通過圓截面柱時產生的振動做了系統的實驗研究。結論是振動頻率與流速成正比，與圓截面柱的直徑成反比。1912 年美籍匈牙利力學家馮?卡門（Von Kármán,T.）（圖 5）從理論上證明，當流體繞過非流線形障礙物時，會在物體后方兩側產生反對稱等距離排列的，旋轉方向相反的成對渦旋，稱為卡門渦街 (Kármán Vortex Street)（圖 6）。出現渦街的尾流對物體產生周期變化的作用力，頻率與流速和物體直徑的關系與斯特勞哈爾的實驗結果符合一致。如激勵頻率與物體固有頻率接近，可導致激烈的共振。從而解釋了風載引起自激振動的產生原因。

圖 5　馮?卡門（Von Kármán,T. 1881-1963）

圖 6　卡門渦街

摩天樓在風載下的自激振動若不加控制，頂端擺動的加速度可高達 6 cm/sec2 以上而超過允許范圍。為減小風載引起的搖晃效應，必須采取各種阻尼方法。上海中心大廈的外形十分獨特，是由曲面卷繞形成，每層扭轉10 的扭曲幾何體。理論研究表明，這種稱為“龍塔”式的外形可延緩和削弱卡門渦街的形成。擺式阻尼器將陣風對大樓的激勵轉移至減震擺，其擺動的動能被電渦流阻尼器耗散，從而實現有效的振動抑制。2019 年 8 月 10 日上海受強臺風 “利奇” 的襲擊，風速高達每秒 40 米，上海中心大廈的減震擺的振幅高達 50cm，而大廈安然無恙。

擺式阻尼器也稱為動力吸振器。其抑制振動的基本原理基于線性系統的受迫振動規律[2]。設質量為 mi (i=1,2) 的兩個物體，用兩個剛度為 Ki (i=1,2) 的彈簧串聯成二自由度振動系統（圖 7）。其中的物體 m1 受到頻率為 ω 的簡諧力 F0sinωt 的激勵，列出此系統的受迫振動方程：

圖 7　二自由度振動系統

此方程組有以下特解，確定系統的受迫振動規律：

其中函數 Δ(ω2)為

若作用于物體 m1 的激勵力頻率 ω 恰好等于物體 m2 的固有頻率 ω20=(K2/m2)1/2，則 x1(t) 的振幅等于零，表明物體 m1 的振動被完全抑制，激勵力的全部能量被轉移到物體 m2 。此即動力吸振器的理論依據?？紤]阻尼因素影響的理論分析在附錄中給出。

摩天樓中懸掛的大單擺就是一具超大型的動力吸振器。吹向大樓的陣風可能有多種頻率成分，其中以接近大樓基頻的陣風最危險，如不加控制就會使大樓產生強烈晃動。將大單擺的固有頻率設計成與大樓的基頻相等，則陣風的能量就被轉換為單擺擺動的動能。電渦流阻尼器將此動能耗散為熱量，大樓的晃動就被大大降低。

動力吸振器的原理是 1928 年由美國的奧蒙德羅伊德 (Ormondroyd,J.) 和鄧哈托 (Den Hartog,J.P.) 提出的。要達到消除振動的目的又不消耗能源，動力吸振器是一種理想的消振方案。在實際應用方面，鄧哈托在他的機械振動著作里曾舉出理發電推子的有趣例子[3] （圖10）。另一個重要的應用是在內燃機的曲柄軸上安裝一個可繞旋轉軸轉動的彈簧振子，它的固有頻率被調整得與旋轉軸的臨界轉速相等時，可消除旋轉軸的扭轉振動（圖11）。

圖 10　帶吸振器的理發推子

圖 11　旋轉軸上的動力吸振器

基于動力吸振器原理的減震擺以其消除晃動的有效性，被許多著名的超高層建筑采用。在上海中心大廈之前的 2008 年，另一座超高層建筑上海環球金融中心就已安裝了兩臺重 150 噸的減震擺。

參考文獻：

[1] 程穆，汪立軍. 阻尼器在上海中心大廈的應用. 上海建設科技，2014, (3): 26-29

[2] 劉延柱，陳立群，陳文良. 振動力學(第二版). 北京, 高等教育出版社，2011: 139~141

[3] 鄧哈托. 機械振動學. 北京：科學出版社. 1965 : 95~102

(改寫自：劉延柱. 趣味振動力學，8.5 節. 北京： 高等教育出版社，2012)

附錄：帶阻尼的二自由度系統動力消振器

轉載本文請聯系原作者獲取授權，同時請注明本文來自劉延柱科學網博客。

信息來源：2021-05-14 劉延柱科學網博客

http://blog.sciencenet.cn/blog-3452605-1279666.html

【聲明】本文為轉發分享，已經注明來源。不代表本平臺贊成或反對原作者的觀點，文責和版權屬于原作者。轉載此文是出于傳遞更多信息之目的，如有侵權請聯系刪除。