用超多案例，幫你掌握symbol設(shè)計(jì)基礎(chǔ)知識(shí)

什么是symbol設(shè)計(jì)？什么是symbol組件的自適應(yīng)？本文用超多案例幫你掌握！

一、引言

symbol 在設(shè)計(jì)中處處都可以運(yùn)用，其可批量修改、可自適應(yīng)的特性，對(duì)設(shè)計(jì)提效非常有幫助。舉個(gè)例子：做用戶體驗(yàn)地圖的時(shí)候，我可以利用 symbol 批量修改圖層的樣式，寫痛點(diǎn)的時(shí)候，容器可以被自動(dòng)撐高，不用手動(dòng)調(diào)節(jié)。Sketch 模板搭建出來(lái)后，所有使用者均能受益。

symbol 特別厲害的特性在于“自適應(yīng)”這個(gè)點(diǎn)，包括拉伸自適應(yīng)和內(nèi)容自適應(yīng)。

一方面，拉伸自適應(yīng)。拿可視化圖表組件來(lái)說(shuō)，可視化頁(yè)面中，各個(gè)模塊大小都不一樣的，里面放入圖表的話，圖表經(jīng)常需要拉伸去適應(yīng)模塊大小，手動(dòng)調(diào)整過(guò)程很是耗時(shí)。而大多數(shù)可視化組件，直接拉伸會(huì)變形跑偏。

通過(guò)在 sketch 中給組件設(shè)置自適應(yīng)屬性，它就能實(shí)現(xiàn)下面這樣子的效果，作圖效率直線上升。要是再搭配上切換 symbol 控件，就能方便地切換圖表分組數(shù)目和切換圖表種類，設(shè)計(jì)效率更是翻倍。

另一方面，是內(nèi)容自適應(yīng)。設(shè)計(jì)師使用 symbol 組件時(shí)會(huì)很方便，更改字符后不用再手動(dòng)調(diào)間距。

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

但不少組件庫(kù)或設(shè)計(jì)規(guī)范，仍然僅僅停留在只提供一個(gè)樣式的層面上，沒(méi)有封裝“組件實(shí)際使用時(shí)期望達(dá)到的自適應(yīng)效果”，所以設(shè)計(jì)師運(yùn)用時(shí)仍非常不便。

所以本文想聚焦于“自適應(yīng)”這個(gè)點(diǎn)，去談 symbol 組件庫(kù)的使用和封裝。對(duì) symbol 特性、自適應(yīng)功能的介紹，也能幫助設(shè)計(jì)團(tuán)隊(duì)的小伙伴深入了解 symbol 的概念，更正確和輕松地使用已封裝好的組件庫(kù)，達(dá)到 symbol 化的最大價(jià)值。

二、什么 symbol？

1. symbol

symbol 即可多場(chǎng)景復(fù)用控件。所謂封裝，即創(chuàng)建 symbol 的操作。

symbo 有以下 5 個(gè)特性：

（1）可多處復(fù)用：支持多個(gè)畫板和多個(gè)文檔間的復(fù)用。當(dāng)你在一個(gè)文檔中創(chuàng)建了一個(gè) symbol，不僅可以在此文檔中重復(fù)引用此 symbol，并且也可以通過(guò)置入控件功能，在其他設(shè)計(jì)文檔中引用此 symbol 控件。圖示的就是在其他作圖文檔中調(diào)用控件的過(guò)程。

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

（3）可替換：Symbol 可通過(guò)“替換控件”功能，替換為已經(jīng)制作好的同組的其他 Symbol，如可從默認(rèn)態(tài)按鈕組件切換為禁用態(tài)按鈕組件。圖示我們可以將菜單欄組件從選中一級(jí)菜單改為選中二級(jí)菜單狀態(tài)、或改為帶徽標(biāo)樣式菜單欄。

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

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

（5）可自適應(yīng)：自適應(yīng)是 symbol 最為神奇的一個(gè)特性，包括兩種自適應(yīng)形式，一是子級(jí)元素跟隨父級(jí)拉伸所產(chǎn)生的自適應(yīng)變化，二是父級(jí)隨著子級(jí)元素字符變化而產(chǎn)生自適應(yīng)變化。下面會(huì)重點(diǎn)說(shuō)明 symbol 可以自適應(yīng)的特性。

symbol 的這 5 種特性，支撐了我們封裝和使用 symbol 組件庫(kù)。尤其是自適應(yīng)特性，會(huì)有助于我們高效地使用組件庫(kù)。

三、什么是 symbol 組件的自適應(yīng)？

1. 什么是自適應(yīng)？

籠統(tǒng)地來(lái)說(shuō)，在界面設(shè)計(jì)中，自適應(yīng)也稱為響應(yīng)式。指的是系統(tǒng)對(duì)不同的顯示設(shè)備及瀏覽器視窗所產(chǎn)生的適應(yīng)變化，也可以說(shuō)是子級(jí)元素跟隨父級(jí)容器的變化，所產(chǎn)生的適應(yīng)變化。（圖片來(lái)源：《不藏不掖著，響應(yīng)式網(wǎng)頁(yè)大揭秘來(lái)了！》-白澤、牧子）

2. 什么是組件的自適應(yīng)？

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

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

拉伸自適應(yīng)效果對(duì)于可視化圖表組件庫(kù)來(lái)說(shuō)也非常好用?？梢暬?yè)面中模塊大小都不一樣的，里面放入圖表，圖表經(jīng)常需要拉伸去適應(yīng)模塊的大小，但手動(dòng)調(diào)整過(guò)程很是耗時(shí)。經(jīng)過(guò)自適應(yīng)設(shè)置，各類型圖表能輕松實(shí)現(xiàn)拉伸自適應(yīng)的效果。（關(guān)于圖表組件的自適應(yīng)封裝，后面的文章會(huì)提到）

（2）組件輸入自適應(yīng)，指組件尺寸隨內(nèi)容變化而靈活變化：即父級(jí)組件的尺寸隨子級(jí)元素字符內(nèi)容的變化而變化，且組件中“各層之間的間距保持不變”。例如隨文字撐大的標(biāo)簽、自動(dòng)撐的文本域等。

因?yàn)?symbol 有這樣的屬性。所以，symbol 也可叫做“可適配控件”，即通過(guò)設(shè)定屬性（做適配處理，實(shí)現(xiàn)理想的自適應(yīng)效果。理想的自適應(yīng)效果，即按照預(yù)期實(shí)現(xiàn)“變與不變”。

因此，我個(gè)人覺(jué)得，組件的自適應(yīng)封裝，也可以理解為“將組件的響應(yīng)規(guī)則進(jìn)行封裝”。

3. 封裝自適應(yīng)效果的好處

未封裝自適應(yīng)效果的組件庫(kù)，使用體驗(yàn)糟糕，低效且容易出錯(cuò)。組件使用過(guò)程中，改變字符、改變尺寸、減少元素?cái)?shù)量，是高頻且必不可少的操作。而一旦涉及到組件內(nèi)文字信息的變更、組件尺寸的調(diào)整，未封裝的組件就非常難用，我可能需要將組件解組，還要注意間距規(guī)則，進(jìn)行拉伸、調(diào)間距等多個(gè)步驟才能完成。

而封裝后的組件直接更改文字就可以，不用手動(dòng)手動(dòng)調(diào)間距，所有間距會(huì)完美自適應(yīng)。對(duì)于相對(duì)復(fù)雜的組件而言，設(shè)置自適應(yīng)效果后的組件，使用起來(lái)更是方便，例如 tab，如果再配合上 symbol 的切換，就能實(shí)現(xiàn)大大提升作圖效率。圖示就是線條式 tab 組件，我可以變更 tab 標(biāo)題名稱，將 tab1 選中變?yōu)?tab2 選中，整個(gè)過(guò)程輕松完成。

4. 各家組件庫(kù)自適應(yīng)封裝效果評(píng)測(cè)

大部分組件庫(kù)僅已做到基礎(chǔ)的 symbol 封裝，但很多組件的自適應(yīng)封裝效果仍不理想。

試了一下 AntD、Arco、TD 等的 Sketch 組件庫(kù)文檔，有的沒(méi)封裝，有的簡(jiǎn)單封裝了，但若需要對(duì)組件進(jìn)行變更文字內(nèi)容、減少元素?cái)?shù)量等操作的話，效果同樣很糟糕。其中，AntD 的組件庫(kù)整體封裝效果較好，但自適應(yīng)封裝仍未覆蓋全局。

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

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

綜上，希望組件庫(kù)能從設(shè)計(jì)師實(shí)際使用的角度來(lái)考慮，進(jìn)行自適應(yīng)封裝，同時(shí)對(duì)實(shí)際使用時(shí)會(huì)存在的各種場(chǎng)景做針對(duì)性的封裝。實(shí)際作圖過(guò)程中，復(fù)合組件調(diào)整起來(lái)往往是更費(fèi)時(shí)的，對(duì)于復(fù)合型組件也要多加考慮自適應(yīng)效果。