經驗分享 | 教你如何打造動態響應元件 Dynamic Symbol
:point_up_2:首發於微信公眾號：小阿田的設計筆記~
作者：SumanX
地址：https://sumanx.zcool.com.cn/（歡迎關注）
本文已獲得作者授權原創釋出於公眾號「小阿田的設計筆記」，未經許可，禁止轉載。
分享個小工具，有點懷疑有沒有必要寫這個，所以拖拖拉拉很久，碰巧這工具有了重大的更新，終於還是寫出來了，純粹自己瞎鼓搗。如果你有更好的方法或方向，歡迎指正。如果對你有幫助，寫文不容易支援一下吧。
如果出現佈局錯誤請重啟一遍Sketch。
軟體：Sketch 5.25
外掛：Anima Toolkit 2.4.9
不論是個人還是團隊，在介面設計中，總會提煉元件，包括圖示、按鈕、控制元件等。一套完整的軟體介面，頁面中很多元件是高度複用的。所以元件在設計側意義不僅是提高效率，也能很好的規範了介面的一致性。還有上線後也存在迭代過程中的修改，如果不是Sketch的symbol系統，設計的修改怕是要比開發都辛苦不少，重複勞動·真搬磚。
在搭建元件庫的過程中，找到了好玩的東西，很大的提升Sketch元件可用性。完全用Symbol的設定項實現動態響應佈局，同時支援拉伸被動響應，支援多層巢狀，大多數的元件都可以製作~
並非全部都能做成動態symbol，還是有很多技術限制的，不過已經完成度很高了。
教程相對進階，但有必要的地方儘量詳細。沒必要的地方，比如標註可能是不完整的~
什麼是 動態響應 ，不是很嚴謹的概念，但為了簡化暫且用這個詞。一般來說，移動端的UI設計都是自適應的，因為要去適配各種機型。當然Sketch在迭代過程中也為我們準備了這個功能，也就是Resizing，但這種響應是被動的。看名字就明白，Resizing是拉伸後仍適應指定的佈局規則，是被動的。
這個功能其實足以讓人興奮，做的介面居然能隨著拉伸適應佈局，在PS時代想都不敢想。
那 動態響應 呢？是隨著元素內容改變，主動調整響應佈局。所謂的動態響應幾乎都是針對文字的，文字字數變化對佈局的影響，當然也不全是。其實這個功能Sketch本身也有，舉下面這個例子就明白了。如果你沒發現，可以馬上試試，但是效果僅限如此。
新建一個文字畫兩個矩形(文字不能使固定寬度)，矩形分別作為圖示和背景，背景要比文字和圖示加起來都寬，像下面這個圖一樣。全選生成symbol，神奇的事要來了，在symbol設定項裡，修改文字，你會看到圖示位置也變了，兩者間距保持不變。
這種平鋪的佈局，多排些東西，或者把圖示換成文字，效果都是有的。甚至右對齊也可以，這種效果只有在symbol裡才能看到。可是，不是所有佈局都這麼簡單，不過這個功能也常被用到。
* 自適應的動態元件 動態(主動)和被動響應都是需要的。
在建立元件庫的過程中只有被動響應，馬上會發現侷限性，舉個例子，這也是元件首先碰到的問題——“隨文字撐大的標籤”。不同於可以設定幾個寬度的按鈕，Tag往往只能隨字數變化寬度。
我們把做好的tag放到symbol裡試試，不管怎樣，你都不會得到你想要的。
動態按鈕？這個時候老司機會告訴你一個神器，Paddy！！這個外掛能解決這個問題，也是很多設計師熱捧的外掛。
所以我也要安利這個外掛了？不不不，如果不用巢狀Symbol，Paddy確實能做很多事，但元件需要巢狀symbol。巢狀後，Paddy的很多功能將失效。而且Paddy的視覺化不夠，即使是beta版也是。
Beta版Paddy會升級symbol的功能，支援巢狀，但和接下來的外掛有致命衝突，不可混用。
所以Paddy可以直接放棄，接下來的神器包含Paddy所有功能，並且更強大。即使你非要等paddy升級完善，思路也是一致的，不防了解下。
話說搭建元件後，大家是怎麼用的呢。很多時候是直接修改裡面Symbol（Library是先解除連結修改）。為什麼？因為某些佈局不會隨內容變化，導致不可用，必須手動修改。當然，在做元件的時候可以避免這個問題，繞開動態佈局。但我希望工具能儘可能的還原設計，減少被工具約束，減少為了做元件而刻意繞開的佈局。
介紹下今天要聊的外掛——Anima Toolkit。
看名字就是知道這是一套工具包，包含Auto-Layout、Launchpad和Timeline，後面兩個是建站和互動動畫的工具，不在今天討論的範疇。
主角是 Auto-Layout ，自動佈局。誒~ 這個很眼熟哦，早在sketch還沒有Resizing的功能時，這個外掛出現了，當時蠻有名氣，但sketch自帶了這個功能後，就被遺忘了。不安裝外掛就有的功能，幹嘛要安裝外掛呢。
廢話了這麼多，來認識一下Anima Auto-Layout，以下簡稱AL。先介紹功能，然後演示實際案例。
其實收起狀態已經露出了大部分的功能，所以真的很簡單，當然一般是在展開使用的。
功能1：Pin 定位銷
就是固定間距的功能，讓邊鎖定在一個位置。也是Sketch Resizing的主要功能，AL或許更方便，但效果其實差別不大，區別在於AL更偏主動響應，Resizing更適合被動自適應。有些時候還是要用Resizing的，互補，如果可以優先用Resizing。
百分比感覺很牛逼是不是，其實自帶的resizing也支援百分比，預設狀態下也就是不設定pin的時候。內部元素拉伸是按照比例來的，只不過不止間距，寬高也按比例拉伸了。
定位功能基於父級容器的，簡單的說就是上一級的組或Symbol，邊界和百分比的基數也是。當指定了數值後，佈局會自動發生變化。之後也可以移動，數值也會自動實時發生變化（這和Resizing一樣）。需要時可以設定為百分比，記得切換。
注：Sketch的預設情況下子層的寬高是固定比例的，所以會隨著父級拉伸而被拉伸。要定位元素需要先鎖定寬高。
功能2：寬高設定
沒錯，這個功能Resizing也有，就是固定寬高。AL可以額外設定最大、最小值。和Resizing的不一樣的是，這個的寬高鎖定是絕對的。
剛才提到過，自帶的resizing預設狀態下寬高就是固定比例的，只不過沒有數值而已
百分比也是以父級為參照的。最大值和最小值，在不開啟啟用開關時也生效，只能是畫素值。
在symbol中，AL的寬高固定是絕對的，這有好有壞。不過這導致有時候必須用Resizing的寬高設定，需要靈活選擇。
功能3：居中
這個功能就只是對單個層的在組內的居中操作，不是對齊功能。還可以設定偏移值。
是的，居中也是已父級為參照空間的。偏移值正值向右偏移，負值向左，只能是畫素值。
一鍵清空
上面提到的三個功能可以通過這個按鍵，對圖層所有設定一鍵刪除。
功能4：對齊工具Stack
這個怎麼翻譯呢，直譯叫堆疊，還是用英文名吧。是一種特殊的圖層組，主要是子層元素佈局操控，也就是對齊方式。除了對齊，對子層還有 特殊效果 。
基礎的排列對齊功能不用多講，兩種操作方式，多選圖層（包括組層），新建stack組。或者選擇一個組，轉化成stack組。
講下塌陷Collapsing功能，這個功能一般時候開不開都一樣。它是針對巢狀的symbol用的，當symbol裡的中間條目選擇隱藏時，啟用塌陷可以讓子層重新排列。
還有一個配套resize symbol的功能，很實用。只有一種情況，這個開關會出現，就是symbol畫板中只有一個stack組時。這個功能是讓symbol自動匹配stack組的尺寸的。
resize symbol可能是個新的功能，有個很大的缺陷，就是一旦勾選了Resize Symbol，這個Symbol的子層就不具備被動響應能力了，也就是寬高被固定了。用之前要清楚這個問題，某些時候不得不放棄使用，很多時候是預設勾上的。只能說等待官方修復這個問題，anima的更新頻率還是很高的。
stack組的子層會有個附帶效果，比例鎖定會在子層生效（包括組合symbol）。
功能5：自動填充padding
這個功能更新也就近幾個月的事，修復到可用實在2.4.2版本上，也就11月，新鮮出爐。為了解決無法和Paddy相容，AL自己做了這個功能。當然，支援巢狀symbol。
沒有這個功能時，做填充也是可以的，但是比較麻煩，效果也有侷限。
說白了，這個功能就是操控組內最底子層形狀的寬高，從而組的寬高也發生變化。
padding的巢狀目前也是有侷限性的，相比而言完成度是最高的，具體在後面例項中說。
實用工具
剩下一些智慧排列畫板、橫豎屏切換和適配到機型，不多說了，我用的不多，自行體驗。除了排列畫板，其餘就是幫你一鍵把設計稿切換到另一個機型或橫豎屏，不需要一個個手動拉扯。
動態元件：Tag
標籤Tag，很常見，用paddy可以輕鬆做出來，但是如何用AL實現可巢狀的Symbol呢，其實是一樣的。
1. 新建文字層（使用預設左對齊），直接新增padding，如圖設定，賦予隨字數調整寬度能力。padding會自動建立一個背景，修改文字和背景樣式，命名#tag grounp。
2. 將背景層生成symbol，隨意調整背景symbol畫板尺寸，背景撐滿畫板即可。複製五個，分別調色，命名。
3. 將#tag grounp生成symbol，完成
可以在symbol設定裡修改文字和tag顏色。需要注意的是，tag會有左對齊和右對齊的情況，預設狀態下，tag會向右伸展，利用AL的pin功能可以讓一個symbol同時滿足左右對齊(利用文字對齊是行不通的）。如需左對齊的佈局，選擇固定右邊的pin。（這裡自帶的Resizing的pin不能實現對齊效果）
如果要做多個排列的tag，可以排列幾個，打包成stack組，間距就鎖定了，整體佈局隨每個tag的字數動態調整。
需要說一個注意的，padding是支援巢狀的，但是巢狀的padding symbol不能參與動態佈局，巢狀裡的padding symbol 尺寸不會發生變化，所以動態佈局會失效。這個問題等待官方修復，參與動態佈局的padding暫時不要打包成symbol，保持組形式參與佈局。
如果文字變透明，就可以製作利用文字調節進度的symbol控制元件，活學活用。
動態元件：Tabbar
標籤欄是App中最常見的了，樣式型別比較多，並非所有都需要動態響應。
看下這幾類tab，型別2是MD的樣式，用的很多，Rezizing就可以完成。演示型別3的做法，其他也都做好放在原始檔裡了。
說下型別四，如果這種元件也能做成動態symbol，那麼….沒什麼控制元件是不能做的了，涉及太多變數計算，短時間內也不太可能實現，乖乖使用普通圖層吧，攤手~
新建兩個文字和一個方形，分別作為選中、未選中的文字和選中的短線，調整樣式。文字務必左對齊，做動態元件都可以用左對齊，不然可能會有誤差。
2. 將短線生成symbol，寬度縮小到比文字短。將文字疊在一起（可配置選中和未選中文字），放在短線上方。所有垂直居中對齊一次，然後打組，命名#tab。（後面要利用組讓短線和文字等寬，如果短線本身比文字寬或超出文字，組的寬度就不是文字的寬度了）
3. 短線進行如圖的AL pin設定，會自動與文字等寬（這裡是主動響應只能用AL，而不是Resizing）。這個設定等寬是動態的，會隨著文字寬度變化而變化。（有需要的話，比文字寬或短都可以做到，寬會麻煩一些，比如比文字寬兩畫素，可以私我）
4. 將#tab水平復制幾個，全選建立stack組，設定如下，命名#tab stack。這裡鎖定每個tab之間的間距關係。（tab欄目數不可配置，比如3欄和4欄只能做兩個symbol）
5. 繪製tabbar背景，與#tab stack打組，命名#tabbar。然後對#tab stack進行AL的居中設定，動態鎖定tab區居中，同時設定自適應規則，保持寬高固定。#tabbar生成symbol。
這樣就做好了，配置一下試試，同時可以拉伸適配響應，需要注意的是，兩層文字，需要的寫，不需要敲一個空格隱藏。不需要的短線選none。
動態元件：Bottom Tab
底部標籤欄，其實和標籤欄一樣，不過比較典型。這裡設定需要響應到pad，這裡只是演示功能，實際工作中pad字號可能會比phone大一些。
把所有用到的tab 圖示都做成symbol（這裡一共有5組10個），然後按標註樣式佈局搭好，這個不多說。打組命名#group，然後對圖示和文字設定Resizing，固定文字圖示高寬，賦予被動響應能力。
2. 文字都複製一層（直接command+D），作為選中未選中的文字，分別填充顏色。
3.複製一層背景（command+D），把樣式都取消，命名#box。將#box和文字圖示打組，命名#flex。對做響應設定如下，然後#group生成symbol。
大功告成，高度加34就適配iPhone X了。
動態元件：Action Sheet
Action Sheet，也很常見。其實不用anima也完全可以做到，但是必須按順序隱藏操作。這裡允許抽掉中間的條目也保持佈局。高度也可以動態調整，前提是如果多機型適配的需求低，可以勾選resize symbol。
1. 繪製需要用到的圖層，分割線、文字、背景和間隔塊，把分割線和間隔塊做symbol。
2. 把單個列表拼出來並打組，也生成symbol。#list
3. 把#list和間隔塊垂直排好，所有元素設定resizing，鎖定高度，寬度自適應。打stack組，設定如圖，然後生成symbol。
4. 在symbol裡，可以看到多了一個resize symbol，目前建議取消。勾上的話，symbol會動態變化，但是list寬高也鎖定了，不能做多機型適配了。
動態元件：Edit menu
文字選擇控制元件，相對來說比較複雜的控制元件，雖然看起來很簡單。除了在數量和字數不定的情況下完成規定佈局外，箭頭的位置也是可以調節的。
1. 新建三個文字、一個箭頭和一個圓角矩形
2. 選擇一個文字，設定如下padding（padding會自動生成背景形狀），將該padding組生成symbol，命名#control。注：給單個操作按鈕賦予動態間距填充。
3. 排列若干個“#control”水平復制，全選建立stack組，命名#control stack。注：給所有操作按鈕之間賦予動態間距排列。
4. 選擇兩個文字層，行高設定成和箭頭高度一致(10pt)，和箭頭水平擺放一起，全選建立stack組，命名#arrow stack。這裡是個小技巧，兩個文字可以動態調整箭頭層的寬度，加上佈局鎖定，就可以調整箭頭位置了。
5. 將#control padding和黑色背景，上下貼上排列，建立組。然後生成symbol (這個symbol可切圖給開發)。在symbol中進行如下設定。左右文字透明處理，它們調節箭頭位置的，命名為“箭頭右/左調節”。#Bubble bg
6.將#Bubble bg放在#control stack組下面，選擇兩者，建立組。然後設定padding，引數如下。（為了觀察，我把control的背景變半透明），生成symbol。#Bubble
7. 其實已經做完了，差點樣式調整。#control組的背景設定內陰影作為分割線，生成symbol（因為最後一個分割線是多餘的，做成symbol就可以隱藏），其餘參照標註。
完成，可以配置每個操作的文字，運算元量和箭頭位置。
注：這裡用padding包裹裡stack，可能會導致出錯，發現佈局有問題，重啟Sketch就會好，這種包裹目前來講不是很穩定，儘量少使用。
氣泡提示應該也會做吧，會更簡單。不一樣的是做氣泡的時候要留好四邊間距，已經做好放在原始檔裡了。
動態元件：Dialog
這種常規的自定義彈窗做一個symbol其實大部分情況夠用，當然用原生的更多，但iOS的library也不是動態的，有時候你得拆出來用。彈窗不需要拉伸，這裡唯一做的動態響應，就是單行和多行文字的動態變化。
1. 把底部按鈕做好，生成symbol（生成symbol有個好處可以切換按鈕形式，比如單個按鈕）。很簡單吧，字號什麼的隨意，重點不是這個。
2.新建文字，調整樣式（這裡文字是固定寬度的），設定padding。然後修改背景樣式。
3. 和按鈕一起打stack組，設定如下，生成symbol。resize symbol應該是自動勾上了，這裡可以勾選，需要這個功能。
ok，多行文字高度會動態調整，因為彈窗寬度是固定的，所以resize symbol的副作用也不用擔心
動態元件：卡片
其實只要包在stack組裡，比例就是可以被鎖定的。要講的就是這個，所以詳細的步驟不在這裡說了，直接看原始檔把。
需要說明的幾點
stack或padding的巢狀是新功能，還在實驗性階段，存在一些問題的，但可用也還夠用。至於bug甚至導致sketch崩潰問題，至少在我個人使用下，目前版本還算穩定。以前stack和padding混合100%會導致軟體崩潰，現在已經不會了。anima一直在更新，可以關注下。
目前容易出錯的使用方式 1）帶collapsing的stack組結合pin定位 2）Padding包裹Stack組。之能說減少使用，如果出現問題，重啟Sketch，頻繁出現問題，改掉上面的使用方式。
動態響應symbol裡的文字，只要參與動態佈局，最好都是左對齊，居中對齊當寬度是單數時，會有0.5的值，這會導致佈局不準確。
AL很多時候需要自帶resizing配合的，如果相同效果也建議用resizing實現，畢竟自帶的效能和優先順序比較高。一般來講被動的適配響應都可以用resizing來做，AL更多負責動態響應。
這篇文章的操作可能會隨著外掛和sketch的迭代過時，但思路是一樣的，如果有需要我會更新。
也許有的同學覺得很沒用。我這裡只是為設計提供更多可能性探索，作為設計師的一些努力。如果有更好更合適的思路，歡迎指正。
最後有個最大的問題，看過原始檔的人立刻會發現，symbol的設定項太複雜難找了，非常不友好（特別是sketch52後能在symbol設定項裡選擇文字和圖形樣式，而又不做分類），可用性大打折扣，基於這個問題原則上是不建議做複雜symbol的，這點我表示無奈。如果有開發大佬看到，開發一個視覺化更人性的symbol設定的外掛，那就太好了。
