最近一位小伙伴遇到個(gè)Sketch問(wèn)題，作為UI設(shè)計(jì)師的你肯定也會(huì)遇到，而且牽扯到Sketch一個(gè)神奇功能。
這個(gè)問(wèn)題來(lái)自于四月份推出的Sketch課程，自己也從中總結(jié)了很多經(jīng)驗(yàn)。
自從《Sketch加薪進(jìn)階-組件管理與團(tuán)隊(duì)協(xié)作》課程上線以來(lái)，吸引了很多設(shè)計(jì)師伙伴的加入。課程可以從UI黑客公眾號(hào)熱門(mén)課程獲得。
除了視頻課程之外，學(xué)員每天在會(huì)員群中提出的設(shè)計(jì)問(wèn)題也都及時(shí)地獲得了比較好的答案，包括技術(shù)的、工作的、求職的。同時(shí)也給自己積累了不少典型案例。
問(wèn)題描述
具體問(wèn)題是這樣的，下面是一個(gè)常見(jiàn)的日期選擇控件，我們都會(huì)把它整體作為一個(gè)symbol組件，以便統(tǒng)一調(diào)用。
日期symbol內(nèi)部的結(jié)構(gòu)主要分為左邊的文字和右邊的圖標(biāo)。
為了讓日期組件在不同的頁(yè)面環(huán)境下適應(yīng)不同的寬度需求，我們一般會(huì)使用Sketch的智能縮放功能來(lái)對(duì)內(nèi)部元素進(jìn)行整理：讓文字左側(cè)固定，圖標(biāo)右側(cè)固定。
左側(cè)文字定位設(shè)置
右側(cè)圖標(biāo)定位設(shè)置
這樣設(shè)置好后，不管我們?cè)趺蠢?，永遠(yuǎn)是兩邊固定，實(shí)現(xiàn)彈性組件的需求。
但是這位同學(xué)遇到了一個(gè)怪現(xiàn)象，拉伸后，圖標(biāo)沒(méi)有固定在右側(cè)，而是緊緊跟著文字。
這是什么原因呢？明明左右元素都已經(jīng)固定好了，難道Sketch的智能縮放失效了嗎？
其實(shí)什么問(wèn)題都沒(méi)有，而是我們無(wú)意間觸發(fā)了Sketch的一個(gè)神奇功能，沒(méi)有官方叫法，我把這個(gè)稱(chēng)作：文本右側(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)居中》
解決問(wèn)題
我們回到剛開(kāi)始的問(wèn)題，為什么日期symbol中右側(cè)圖標(biāo)沒(méi)有固定？
原因就是右側(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)間距變大就可以解決問(wèn)題，在頁(yè)面中調(diào)用，需要多大的寬度再進(jìn)行設(shè)置即可。
總結(jié)
利用這個(gè)機(jī)制，我們可以不借助第三方插件做很多彈性化的組件，解決很多棘手問(wèn)題，大大提升設(shè)計(jì)效率，真正為設(shè)計(jì)賦能。
所以說(shuō)，設(shè)計(jì)師面對(duì)的任何問(wèn)題都需要從實(shí)際工作中來(lái)，解決之后再成為推動(dòng)項(xiàng)目向前迭代的動(dòng)力。
PS
很多設(shè)計(jì)師把Sketch僅僅作為一個(gè)畫(huà)圖工具，完全沒(méi)有發(fā)揮它的潛力。如果你在樣式整理、組件化設(shè)計(jì)、團(tuán)隊(duì)協(xié)作等方面遇到瓶頸的話(huà)，就來(lái)加入《Sketch加薪進(jìn)階-組件管理與團(tuán)隊(duì)協(xié)作》課程吧，專(zhuān)屬的會(huì)員群也會(huì)每天為你及時(shí)提供設(shè)計(jì)問(wèn)題解答。
END
