最近一位小伙伴遇到個(gè)Sketch問題链嘀，作為UI設(shè)計(jì)師的你肯定也會(huì)遇到萌狂，而且牽扯到Sketch一個(gè)神奇功能。
這個(gè)問題來自于四月份推出的Sketch課程怀泊，自己也從中總結(jié)了很多經(jīng)驗(yàn)茫藏。
自從《Sketch加薪進(jìn)階-組件管理與團(tuán)隊(duì)協(xié)作》課程上線以來，吸引了很多設(shè)計(jì)師伙伴的加入霹琼。課程可以從UI黑客公眾號(hào)熱門課程獲得刷允。
除了視頻課程之外，學(xué)員每天在會(huì)員群中提出的設(shè)計(jì)問題也都及時(shí)地獲得了比較好的答案碧囊，包括技術(shù)的树灶、工作的、求職的糯而。同時(shí)也給自己積累了不少典型案例天通。
問題描述
具體問題是這樣的，下面是一個(gè)常見的日期選擇控件熄驼，我們都會(huì)把它整體作為一個(gè)symbol組件像寒，以便統(tǒng)一調(diào)用。
日期symbol內(nèi)部的結(jié)構(gòu)主要分為左邊的文字和右邊的圖標(biāo)瓜贾。
為了讓日期組件在不同的頁面環(huán)境下適應(yīng)不同的寬度需求诺祸，我們一般會(huì)使用Sketch的智能縮放功能來對(duì)內(nèi)部元素進(jìn)行整理：讓文字左側(cè)固定，圖標(biāo)右側(cè)固定祭芦。
左側(cè)文字定位設(shè)置
右側(cè)圖標(biāo)定位設(shè)置
這樣設(shè)置好后筷笨，不管我們?cè)趺蠢欤肋h(yuǎn)是兩邊固定龟劲，實(shí)現(xiàn)彈性組件的需求胃夏。
但是這位同學(xué)遇到了一個(gè)怪現(xiàn)象，拉伸后昌跌，圖標(biāo)沒有固定在右側(cè)仰禀，而是緊緊跟著文字。
這是什么原因呢蚕愤？明明左右元素都已經(jīng)固定好了答恶，難道Sketch的智能縮放失效了嗎？
其實(shí)什么問題都沒有萍诱，而是我們無意間觸發(fā)了Sketch的一個(gè)神奇功能悬嗓，沒有官方叫法，我把這個(gè)稱作：文本右側(cè)內(nèi)容自動(dòng)跟隨砂沛。
Sketch的特殊機(jī)制
Sketch的這個(gè)特殊機(jī)制烫扼，簡(jiǎn)單描述就是：在symbol組件內(nèi)部曙求，文本的右側(cè)元素始終和文字保持固定間距咧虎。
利用這個(gè)特點(diǎn)，我們能做出很多省時(shí)省力的效果歧譬。除了剛才的右側(cè)固定跟隨圖標(biāo)之外棺蛛，還可以多個(gè)文字跟隨，適用于導(dǎo)航標(biāo)簽的制作塔沃。
以上兩個(gè)例子中，文字都是左對(duì)齊，如果是居中對(duì)齊双絮，還可以做文字+圖標(biāo)整體居中的效果，具體操作可以看這篇文章：《你不知道的Sketch黑科技-圖文浮動(dòng)居中》
解決問題
我們回到剛開始的問題得问，為什么日期symbol中右側(cè)圖標(biāo)沒有固定囤攀？
原因就是右側(cè)圖標(biāo)觸發(fā)了Sketch 文本右側(cè)內(nèi)容自動(dòng)跟隨機(jī)制，而且這個(gè)機(jī)制的優(yōu)先級(jí)是大于智能縮放的宫纬。
另外在上述機(jī)制中焚挠，只有文字和右側(cè)內(nèi)容間距≤20才可以觸發(fā)，大于20就不起作用了漓骚。
如上圖所示蝌衔，文字和圖標(biāo)間距為18，這樣便會(huì)觸發(fā)機(jī)制自動(dòng)跟隨文字蝌蹂，而且優(yōu)先級(jí)要大于已經(jīng)設(shè)置好的智能縮放噩斟。
所以我們只需要把日期symbol中的文字和圖標(biāo)間距變大就可以解決問題，在頁面中調(diào)用孤个，需要多大的寬度再進(jìn)行設(shè)置即可剃允。
總結(jié)
利用這個(gè)機(jī)制，我們可以不借助第三方插件做很多彈性化的組件齐鲤，解決很多棘手問題硅急，大大提升設(shè)計(jì)效率，真正為設(shè)計(jì)賦能佳遂。
所以說营袜，設(shè)計(jì)師面對(duì)的任何問題都需要從實(shí)際工作中來，解決之后再成為推動(dòng)項(xiàng)目向前迭代的動(dòng)力丑罪。
PS
很多設(shè)計(jì)師把Sketch僅僅作為一個(gè)畫圖工具荚板，完全沒有發(fā)揮它的潛力。如果你在樣式整理吩屹、組件化設(shè)計(jì)跪另、團(tuán)隊(duì)協(xié)作等方面遇到瓶頸的話，就來加入《Sketch加薪進(jìn)階-組件管理與團(tuán)隊(duì)協(xié)作》課程吧煤搜，專屬的會(huì)員群也會(huì)每天為你及時(shí)提供設(shè)計(jì)問題解答免绿。
END
