什么是symbol設計？什么是symbol組件的自適應？本文用超多案例幫你掌握！

一、引言

symbol 在設計中處處都可以運用，其可批量修改、可自適應的特性，對設計提效非常有幫助。舉個例子：做用戶體驗地圖的時候，我可以利用 symbol 批量修改圖層的樣式，寫痛點的時候，容器可以被自動撐高，不用手動調節。Sketch 模板搭建出來后，所有使用者均能受益。

symbol 特別厲害的特性在于“自適應”這個點，包括拉伸自適應和內容自適應。

一方面，拉伸自適應。拿可視化圖表組件來說，可視化頁面中，各個模塊大小都不一樣的，里面放入圖表的話，圖表經常需要拉伸去適應模塊大小，手動調整過程很是耗時。而大多數可視化組件，直接拉伸會變形跑偏。

通過在 sketch 中給組件設置自適應屬性，它就能實現下面這樣子的效果，作圖效率直線上升。要是再搭配上切換 symbol 控件，就能方便地切換圖表分組數目和切換圖表種類，設計效率更是翻倍。

另一方面，是內容自適應。設計師使用 symbol 組件時會很方便，更改字符后不用再手動調間距。

所以市面上的組件庫，很多都做了設計側的 symbo 化封裝。好處就是基于 symbol 的這些特性，能方便地對組件進行全局修改，比如升級品牌色等等，設計師使用組件庫搭建頁面也會更方便。

但不少組件庫或設計規范，仍然僅僅停留在只提供一個樣式的層面上，沒有封裝“組件實際使用時期望達到的自適應效果”，所以設計師運用時仍非常不便。

所以本文想聚焦于“自適應”這個點，去談 symbol 組件庫的使用和封裝。對 symbol 特性、自適應功能的介紹，也能幫助設計團隊的小伙伴深入了解 symbol 的概念，更正確和輕松地使用已封裝好的組件庫，達到 symbol 化的最大價值。

二、什么 symbol？

1. symbol

symbol 即可多場景復用控件。所謂封裝，即創建 symbol 的操作。

symbo 有以下 5 個特性：

（1）可多處復用：支持多個畫板和多個文檔間的復用。當你在一個文檔中創建了一個 symbol，不僅可以在此文檔中重復引用此 symbol，并且也可以通過置入控件功能，在其他設計文檔中引用此 symbol 控件。圖示的就是在其他作圖文檔中調用控件的過程。

（2）可批量修改：創建 symbol 后，可在頁面中置入創建好的 symbol 控件。后期只需要對 symbol 本體進行修改，就可以一次性對頁面中所有應用此 symbol 分身的地方完成批量修改。圖示就是對本體修改后，所有引用它的地方都會同步修改。

（3）可替換：Symbol 可通過“替換控件”功能，替換為已經制作好的同組的其他 Symbol，如可從默認態按鈕組件切換為禁用態按鈕組件。圖示我們可以將菜單欄組件從選中一級菜單改為選中二級菜單狀態、或改為帶徽標樣式菜單欄。

PS：替換時有 2 個選擇，可選擇“替換成相同尺寸”和“替換為原始尺寸”。替換，就是用 B 替換 A。替換為相同尺寸，即置入的 B 要自適應變成和 A 控件一樣大的尺寸，不去管 B 本身的大小，我需要 B 放大或縮小去自適應 A 的顯示區域；而替換為原始尺寸，即置入的 symbol B 保持本身原始尺寸。這個功能自己實際操作一下會更好理解。

（4）可嵌套：Symbol 內可以嵌套多個 Symbol。例如圖標按鈕，就是在按鈕中嵌套了一個圖標控件。（圖示就是我們修改圖標控件本體，帶 icon 按鈕控件也會自動修改）疊加上 symbol 可批量修改、可替換的特性，嵌套能保證全局一起修改，也能更方便地通過 symbol 切換組合成多樣的組件形態。

（5）可自適應：自適應是 symbol 最為神奇的一個特性，包括兩種自適應形式，一是子級元素跟隨父級拉伸所產生的自適應變化，二是父級隨著子級元素字符變化而產生自適應變化。下面會重點說明 symbol 可以自適應的特性。

symbol 的這 5 種特性，支撐了我們封裝和使用 symbol 組件庫。尤其是自適應特性，會有助于我們高效地使用組件庫。

三、什么是 symbol 組件的自適應？

1. 什么是自適應？

籠統地來說，在界面設計中，自適應也稱為響應式。指的是系統對不同的顯示設備及瀏覽器視窗所產生的適應變化，也可以說是子級元素跟隨父級容器的變化，所產生的適應變化。（圖片來源：《不藏不掖著，響應式網頁大揭秘來了！》-白澤、牧子）

2. 什么是組件的自適應？

組件的自適應和頁面的響應式，類似但略有不同。組件主要有兩種自適應形式。

組件拉伸自適應：在響應式頁面中，視窗縮小時，圖片、icon、組件不會變形失真，會有序變化。同理，組件自適應，即組件拉伸不會變形失真，組件中子級元素跟隨父級容器尺寸變化所產生的適應性變化。例如拉伸彈窗，彈窗內元素遵循既定規律變化，不會變形不會混亂。

拉伸自適應效果對于可視化圖表組件庫來說也非常好用。可視化頁面中模塊大小都不一樣的，里面放入圖表，圖表經常需要拉伸去適應模塊的大小，但手動調整過程很是耗時。經過自適應設置，各類型圖表能輕松實現拉伸自適應的效果。（關于圖表組件的自適應封裝，后面的文章會提到）

（2）組件輸入自適應，指組件尺寸隨內容變化而靈活變化：即父級組件的尺寸隨子級元素字符內容的變化而變化，且組件中“各層之間的間距保持不變”。例如隨文字撐大的標簽、自動撐的文本域等。

因為 symbol 有這樣的屬性。所以，symbol 也可叫做“可適配控件”，即通過設定屬性（做適配處理，實現理想的自適應效果。理想的自適應效果，即按照預期實現“變與不變”。

因此，我個人覺得，組件的自適應封裝，也可以理解為“將組件的響應規則進行封裝”。

3. 封裝自適應效果的好處

未封裝自適應效果的組件庫，使用體驗糟糕，低效且容易出錯。組件使用過程中，改變字符、改變尺寸、減少元素數量，是高頻且必不可少的操作。而一旦涉及到組件內文字信息的變更、組件尺寸的調整，未封裝的組件就非常難用，我可能需要將組件解組，還要注意間距規則，進行拉伸、調間距等多個步驟才能完成。

而封裝后的組件直接更改文字就可以，不用手動手動調間距，所有間距會完美自適應。對于相對復雜的組件而言，設置自適應效果后的組件，使用起來更是方便，例如 tab，如果再配合上 symbol 的切換，就能實現大大提升作圖效率。圖示就是線條式 tab 組件，我可以變更 tab 標題名稱，將 tab1 選中變為 tab2 選中，整個過程輕松完成。

4. 各家組件庫自適應封裝效果評測

大部分組件庫僅已做到基礎的 symbol 封裝，但很多組件的自適應封裝效果仍不理想。

試了一下 AntD、Arco、TD 等的 Sketch 組件庫文檔，有的沒封裝，有的簡單封裝了，但若需要對組件進行變更文字內容、減少元素數量等操作的話，效果同樣很糟糕。其中，AntD 的組件庫整體封裝效果較好，但自適應封裝仍未覆蓋全局。

舉個栗子，下圖是 AntD 的彈窗組件的使用情況。對于對話框底部右對齊的操作按鈕組，希望的是一個按鈕字符寬度變化后，兩按鈕之間仍保持固定間距，按鈕組在對話框內始終右對齊。但實際使用效果欠佳。

此外，若是我想要減少一個操作按鈕，我只能解除組件鏈接，層層解組。

綜上，希望組件庫能從設計師實際使用的角度來考慮，進行自適應封裝，同時對實際使用時會存在的各種場景做針對性的封裝。實際作圖過程中，復合組件調整起來往往是更費時的，對于復合型組件也要多加考慮自適應效果。