使用sketch插件打造動態(tài)響應組件Dynamic Symbol

http://v.youku.com/v_show/id_XMzk0NTU4MTU3Mg==.html

當年在Sketch里用過symbol馬上就回不去了,實用貼心到流淚。那都8102年了,有沒有可能更智能呢?

篇幅較長,可以先下載附件體驗,秒懂的話不需要聽我啰嗦~

分享個小工具,有點懷疑有沒有必要寫這個,所以拖拖拉拉很久,碰巧這工具有了重大的更新,終于還是寫出來了,純粹自己瞎鼓搗。如果你有更好的方法或方向,歡迎指正。如果對你有幫助,寫文不容易支持一下吧。

下面視頻是演示接下來能get到的技能,插件我會放在附件里,安裝一次以后直接在sketch更新就好。我把做好的組件放在源文件里供大家參考,接受能力較強的甚至可以忽略文章看源文件就好了。

如果出現(xiàn)布局錯誤請重啟一遍Sketch。

軟件:Sketch 5.25

插件:Anima Toolkit 2.4.9

 

 

不論是個人還是團隊,在界面設計中,總會提煉組件,包括圖標、按鈕、控件等。一套完整的軟件界面,頁面中很多組件是高度復用的。所以組件在設計側(cè)意義不僅是提高效率,也能很好的規(guī)范了界面的一致性。還有上線后也存在迭代過程中的修改,如果不是Sketch的symbol系統(tǒng),設計的修改怕是要比開發(fā)都辛苦不少,重復勞動·真搬磚。

在搭建組件庫的過程中,找到了好玩的東西,很大的提升Sketch組件可用性。完全用Symbol的設置項實現(xiàn)動態(tài)響應布局,同時支持拉伸被動響應,支持多層嵌套,大多數(shù)的組件都可以制作~

并非全部都能做成動態(tài)symbol,還是有很多技術(shù)限制的,不過已經(jīng)完成度很高了。

教程相對進階,但有必要的地方盡量詳細。沒必要的地方,比如標注可能是不完整的~

 

什么是動態(tài)響應,不是很嚴謹?shù)母拍?,但為了簡化暫且用這個詞。一般來說,移動端的UI設計都是自適應的,因為要去適配各種機型。當然Sketch在迭代過程中也為我們準備了這個功能,也就是Resizing,但這種響應是被動的??疵志兔靼?,Resizing是拉伸后仍適應指定的布局規(guī)則,是被動的。

 

這個功能其實足以讓人興奮,做的UI居然能隨著拉伸適應布局,在PS時代想都不敢想。

 

 

那動態(tài)響應呢?是隨著元素內(nèi)容改變,主動調(diào)整響應布局。所謂的動態(tài)響應幾乎都是針對文本的,文字字數(shù)變化對布局的影響,當然也不全是。其實這個功能Sketch本身也有,舉下面這個例子就明白了。如果你沒發(fā)現(xiàn),可以馬上試試,但是效果僅限如此。

新建一個文字畫兩個矩形(文本不能使固定寬度),矩形分別作為圖標和背景,背景要比文字和圖標加起來都寬,像下面這個圖一樣。全選生成symbol,神奇的事要來了,在symbol設置項里,修改文本,你會看到圖標位置也變了,兩者間距保持不變。

 

 

這種平鋪的布局,多排些東西,或者把圖標換成文字,效果都是有的。甚至右對齊也可以,這種效果只有在symbol里才能看到??墒?,不是所有布局都這么簡單,不過這個功能也常被用到。

 

自適應的動態(tài)組件需要動態(tài)(主動)和被動響應都是需要的。

在建立組件庫的過程中只有被動響應,馬上會發(fā)現(xiàn)局限性,舉個例子,這也是組件首先碰到的問題——“隨文字撐大的標簽”。不同于可以設定幾個寬度的按鈕,Tag往往只能隨字數(shù)變化寬度。

 

 

我們把做好的tag放到symbol里試試,不管怎樣,你都不會得到你想要的。

 

 

動態(tài)按鈕?這個時候老司機會告訴你一個神器,Paddy??!這個插件能解決這個問題,也是很多設計師熱捧的插件。

 

 

所以我也要安利這個插件了?不不不,如果不用嵌套Symbol,Paddy確實能做很多事,但組件需要嵌套symbol。嵌套后,Paddy的很多功能將失效。而且Paddy的可視化不夠,即使是beta版也是。

 

Beta版Paddy會升級symbol的功能,支持嵌套,但和接下來的插件有致命沖突,不可混用。

 

 

所以Paddy可以直接放棄,接下來的神器包含Paddy所有功能,并且更強大。即使你非要等paddy升級完善,思路也是一致的,不防了解下。

 

話說搭建組件后,大家是怎么用的呢。很多時候是直接修改里面Symbol(Library是先解除鏈接修改)。為什么?因為某些布局不會隨內(nèi)容變化,導致不可用,必須手動修改。當然,在做組件的時候可以避免這個問題,繞開動態(tài)布局。但我希望工具能盡可能的還原設計,減少被工具約束,減少為了做組件而刻意繞開的布局。

 

 

 

介紹下今天要聊的插件——Anima Toolkit。

 

 

看名字就是知道這是一套工具包,包含Auto-Layout、Launchpad和Timeline,后面兩個是建站和交互動畫的工具,不在今天討論的范疇。

 

主角是Auto-Layout,自動布局。誒~ 這個很眼熟哦,早在sketch還沒有Resizing的功能時,這個插件出現(xiàn)了,當時蠻有名氣,但sketch自帶了這個功能后,就被遺忘了。不安裝插件就有的功能,干嘛要安裝插件呢。

 

廢話了這么多,來認識一下Anima Auto-Layout,以下簡稱AL。先介紹功能,然后演示實際案例。

 

 

其實收起狀態(tài)已經(jīng)露出了大部分的功能,所以真的很簡單,當然一般是在展開使用的。

 

功能1:Pin 定位銷

就是固定間距的功能,讓邊鎖定在一個位置。也是Sketch Resizing的主要功能,AL或許更方便,但效果其實差別不大,區(qū)別在于AL更偏主動響應,Resizing更適合被動自適應。有些時候還是要用Resizing的,互補,如果可以優(yōu)先用Resizing。

 

百分比感覺很牛逼是不是,其實自帶的resizing也支持百分比,默認狀態(tài)下也就是不設置pin的時候。內(nèi)部元素拉伸是按照比例來的,只不過不止間距,寬高也按比例拉伸了。

 

 

定位功能基于父級容器的,簡單的說就是上一級的組或Symbol,邊界和百分比的基數(shù)也是。當指定了數(shù)值后,布局會自動發(fā)生變化。之后也可以移動,數(shù)值也會自動實時發(fā)生變化(這和Resizing一樣)。需要時可以設置為百分比,記得切換。

 

注:Sketch的默認情況下子層的寬高是固定比例的,所以會隨著父級拉伸而被拉伸。要定位元素需要先鎖定寬高。

 

功能2:寬高設置

沒錯,這個功能Resizing也有,就是固定寬高。AL可以額外設置最大、最小值。和Resizing的不一樣的是,這個的寬高鎖定是絕對的。

 

剛才提到過,自帶的resizing默認狀態(tài)下寬高就是固定比例的,只不過沒有數(shù)值而已

 

 

百分比也是以父級為參照的。最大值和最小值,在不打開啟用開關(guān)時也生效,只能是像素值。

 

 

在symbol中,AL的寬高固定是絕對的,這有好有壞。不過這導致有時候必須用Resizing的寬高設置,需要靈活選擇。

 

 

功能3:居中

這個功能就只是對單個層的在組內(nèi)的居中操作,不是對齊功能。還可以設置偏移值。

 

 

是的,居中也是已父級為參照空間的。偏移值正值向右偏移,負值向左,只能是像素值。

 

 

一鍵清空

上面提到的三個功能可以通過這個按鍵,對圖層所有設置一鍵刪除。

 

 

功能4:對齊工具Stack

這個怎么翻譯呢,直譯叫堆棧,還是用英文名吧。是一種特殊的圖層組,主要是子層元素布局操控,也就是對齊方式。除了對齊,對子層還有特殊效果。

 

講下塌陷Collapsing功能,這個功能一般時候開不開都一樣。它是針對嵌套的symbol用的,當symbol里的中間條目選擇隱藏時,啟用塌陷可以讓子層重新排列。

 

 

還有一個配套resize symbol的功能,很實用。只有一種情況,這個開關(guān)會出現(xiàn),就是symbol畫板中只有一個stack組時。這個功能是讓symbol自動匹配stack組的尺寸的。

 

 

resize symbol可能是個新的功能,有個很大的缺陷,就是一旦勾選了Resize Symbol,這個Symbol的子層就不具備被動響應能力了,也就是寬高被固定了。用之前要清楚這個問題,某些時候不得不放棄使用,很多時候是默認勾上的。只能說等待官方修復這個問題,anima的更新頻率還是很高的。

 

 

stack組的子層會有個附帶效果,比例鎖定會在子層生效(包括組合symbol)。

 

 

功能5:自動填充padding

這個功能更新也就近幾個月的事,修復到可用實在2.4.2版本上,也就11月,新鮮出爐。為了解決無法和Paddy兼容,AL自己做了這個功能。當然,支持嵌套symbol。

 

沒有這個功能時,做填充也是可以的,但是比較麻煩,效果也有局限。

 

 

說白了,這個功能就是操控組內(nèi)最底子層形狀的寬高,從而組的寬高也發(fā)生變化。

 

 

padding的嵌套目前也是有局限性的,相比而言完成度是最高的,具體在后面實例中說。

 

 

實用工具

剩下一些智能排列畫板、橫豎屏切換和適配到機型,不多說了,我用的不多,自行體驗。除了排列畫板,其余就是幫你一鍵把設計稿切換到另一個機型或橫豎屏,不需要一個個手動拉扯。

 

 

動態(tài)組件:Tag

標簽Tag,很常見,用paddy可以輕松做出來,但是如何用AL實現(xiàn)可嵌套的Symbol呢,其實是一樣的。

 

 

1. 新建文字層(使用默認左對齊),直接添加padding,如圖設置,賦予隨字數(shù)調(diào)整寬度能力。padding會自動創(chuàng)建一個背景,修改文字和背景樣式,命名#tag grounp。

 

 

2. 將背景層生成symbol,隨意調(diào)整背景symbol畫板尺寸,背景撐滿畫板即可。復制五個,分別調(diào)色,命名。

 

 

3. 將#tag grounp生成symbol,完成

 

 

可以在symbol設置里修改文字和tag顏色。需要注意的是,tag會有左對齊和右對齊的情況,默認狀態(tài)下,tag會向右伸展,利用AL的pin功能可以讓一個symbol同時滿足左右對齊(利用文本對齊是行不通的)。如需左對齊的布局,選擇固定右邊的pin。(這里自帶的Resizing的pin不能實現(xiàn)對齊效果)

 

 

如果要做多個排列的tag,可以排列幾個,打包成stack組,間距就鎖定了,整體布局隨每個tag的字數(shù)動態(tài)調(diào)整。

 

 

需要說一個注意的,padding是支持嵌套的,但是嵌套的padding symbol不能參與動態(tài)布局,嵌套里的padding symbol 尺寸不會發(fā)生變化,所以動態(tài)布局會失效。這個問題等待官方修復,參與動態(tài)布局的padding暫時不要打包成symbol,保持組形式參與布局。

 

 

如果文字變透明,就可以制作利用文字調(diào)節(jié)進度的symbol控件,活學活用。

 

 

 

動態(tài)組件:Tabbar

標簽欄是App中最常見的了,樣式類型比較多,并非所有都需要動態(tài)響應。

看下這幾類tab,類型2是MD的樣式,用的很多,Rezizing就可以完成。演示類型3的做法,其他也都做好放在源文件里了。

說下類型四,如果這種組件也能做成動態(tài)symbol,那么….沒什么控件是不能做的了,涉及太多變量計算,短時間內(nèi)也不太可能實現(xiàn),乖乖使用普通圖層吧,攤手~

 

 

新建兩個文本和一個方形,分別作為選中、未選中的文字和選中的短線,調(diào)整樣式。文字務必左對齊,做動態(tài)組件都可以用左對齊,不然可能會有誤差。

 

 

2. 將短線生成symbol,寬度縮小到比文字短。將文字疊在一起(可配置選中和未選中文字),放在短線上方。所有垂直居中對齊一次,然后打組,命名#tab。(后面要利用組讓短線和文字等寬,如果短線本身比文字寬或超出文字,組的寬度就不是文字的寬度了)

 

 

3. 短線進行如圖的AL pin設置,會自動與文字等寬(這里是主動響應只能用AL,而不是Resizing)。這個設置等寬是動態(tài)的,會隨著文字寬度變化而變化。(有需要的話,比文字寬或短都可以做到,寬會麻煩一些,比如比文字寬兩像素,可以私我)

 

 

4. 將#tab水平復制幾個,全選建立stack組,設置如下,命名#tab stack。這里鎖定每個tab之間的間距關(guān)系。(tab欄目數(shù)不可配置,比如3欄和4欄只能做兩個symbol)

 

 

5. 繪制tabbar背景,與#tab stack打組,命名#tabbar。然后對#tab stack進行AL的居中設置,動態(tài)鎖定tab區(qū)居中,同時設定自適應規(guī)則,保持寬高固定。#tabbar生成symbol。

 

 

這樣就做好了,配置一下試試,同時可以拉伸適配響應,需要注意的是,兩層文字,需要的寫,不需要敲一個空格隱藏。不需要的短線選none。

 

 

動態(tài)組件: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了。

 

 

 

動態(tài)組件:Action Sheet

Action Sheet,也很常見。其實不用anima也完全可以做到,但是必須按順序隱藏操作。這里允許抽掉中間的條目也保持布局。高度也可以動態(tài)調(diào)整,前提是如果多機型適配的需求低,可以勾選resize symbol。

 

 

1. 繪制需要用到的圖層,分割線、文字、背景和間隔塊,把分割線和間隔塊做symbol。

 

 

2. 把單個列表拼出來并打組,也生成symbol。#list

 

 

3. 把#list和間隔塊垂直排好,所有元素設置resizing,鎖定高度,寬度自適應。打stack組,設置如圖,然后生成symbol。

 

 

4. 在symbol里,可以看到多了一個resize symbol,目前建議取消。勾上的話,symbol會動態(tài)變化,但是list寬高也鎖定了,不能做多機型適配了。

 

 

動態(tài)組件:Edit menu

文本選擇控件,相對來說比較復雜的控件,雖然看起來很簡單。除了在數(shù)量和字數(shù)不定的情況下完成規(guī)定布局外,箭頭的位置也是可以調(diào)節(jié)的。

 

 

1. 新建三個文字、一個箭頭和一個圓角矩形

 

 

2. 選擇一個文字,設置如下padding(padding會自動生成背景形狀),將該padding組生成symbol,命名#control。注:給單個操作按鈕賦予動態(tài)間距填充。

 

 

3. 排列若干個“#control”水平復制,全選建立stack組,命名#control stack。注:給所有操作按鈕之間賦予動態(tài)間距排列。

 

 

4. 選擇兩個文字層,行高設置成和箭頭高度一致(10pt),和箭頭水平擺放一起,全選建立stack組,命名#arrow stack。這里是個小技巧,兩個文字可以動態(tài)調(diào)整箭頭層的寬度,加上布局鎖定,就可以調(diào)整箭頭位置了。

 

 

5. 將#control padding和黑色背景,上下貼上排列,建立組。然后生成symbol (這個symbol可切圖給開發(fā))。在symbol中進行如下設置。左右文字透明處理,它們調(diào)節(jié)箭頭位置的,命名為“箭頭右/左調(diào)節(jié)”。#Bubble bg

 

 

6.將#Bubble bg放在#control stack組下面,選擇兩者,建立組。然后設置padding,參數(shù)如下。(為了觀察,我把control的背景變半透明),生成symbol。#Bubble

 

 

7. 其實已經(jīng)做完了,差點樣式調(diào)整。#control組的背景設置內(nèi)陰影作為分割線,生成symbol(因為最后一個分割線是多余的,做成symbol就可以隱藏),其余參照標注。

 

 

完成,可以配置每個操作的文字,操作數(shù)量和箭頭位置。

 

注:這里用padding包裹里stack,可能會導致出錯,發(fā)現(xiàn)布局有問題,重啟Sketch就會好,這種包裹目前來講不是很穩(wěn)定,盡量少使用。

 

 

氣泡提示應該也會做吧,會更簡單。不一樣的是做氣泡的時候要留好四邊間距,已經(jīng)做好放在源文件里了。

 

 

 

動態(tài)組件:Dialog

這種常規(guī)的自定義彈窗做一個symbol其實大部分情況夠用,當然用原生的更多,但iOS的library也不是動態(tài)的,有時候你得拆出來用。彈窗不需要拉伸,這里唯一做的動態(tài)響應,就是單行和多行文字的動態(tài)變化。

 

 

1. 把底部按鈕做好,生成symbol(生成symbol有個好處可以切換按鈕形式,比如單個按鈕)。很簡單吧,字號什么的隨意,重點不是這個。

 

 

2.新建文字,調(diào)整樣式(這里文字是固定寬度的),設置padding。然后修改背景樣式。

 

 

3. 和按鈕一起打stack組,設置如下,生成symbol。resize symbol應該是自動勾上了,這里可以勾選,需要這個功能。

 

 

ok,多行文本高度會動態(tài)調(diào)整,因為彈窗寬度是固定的,所以resize symbol的副作用也不用擔心

 

 

 

動態(tài)組件:卡片

其實只要包在stack組里,比例就是可以被鎖定的。要講的就是這個,所以詳細的步驟不在這里說了,直接看源文件把。

 

需要說明的幾點

stack或padding的嵌套是新功能,還在實驗性階段,存在一些問題的,但可用也還夠用。至于bug甚至導致sketch崩潰問題,至少在我個人使用下,目前版本還算穩(wěn)定。以前stack和padding混合100%會導致軟件崩潰,現(xiàn)在已經(jīng)不會了。anima一直在更新,可以關(guān)注下。

 

目前容易出錯的使用方式 1)帶collapsing的stack組結(jié)合pin定位 2)Padding包裹Stack組。之能說減少使用,如果出現(xiàn)問題,重啟Sketch,頻繁出現(xiàn)問題,改掉上面的使用方式。

 

動態(tài)響應symbol里的文字,只要參與動態(tài)布局,最好都是左對齊,居中對齊當寬度是單數(shù)時,會有0.5的值,這會導致布局不準確。

 

AL很多時候需要自帶resizing配合的,如果相同效果也建議用resizing實現(xiàn),畢竟自帶的性能和優(yōu)先級比較高。一般來講被動的適配響應都可以用resizing來做,AL更多負責動態(tài)響應。

 

這篇文章的操作可能會隨著插件和sketch的迭代過時,但思路是一樣的,如果有需要我會更新。

 

也許有的同學覺得很沒用。我這里只是為設計提供更多可能性探索,作為設計師的一些努力。如果有更好更合適的思路,歡迎指正。

 

最后有個最大的問題,看過源文件的人立刻會發(fā)現(xiàn),symbol的設置項太復雜難找了,非常不友好(特別是sketch52后能在symbol設置項里選擇文本和圖形樣式,而又不做分類),可用性大打折扣,基于這個問題原則上是不建議做復雜symbol的,這點我表示無奈。如果有開發(fā)大佬看到,開發(fā)一個可視化更人性的symbol設置的插件,那就太好了。

 

每天更新,
全站高品質(zhì)素材免費下載!