為什么Sketch的固定邊距不起作用?可能你觸發(fā)了另一個(gè)神奇功能

最近一位小伙伴遇到個(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市擦盾,隨后出現(xiàn)的幾起案子嘲驾,更是在濱河造成了極大的恐慌淌哟,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辽故,死亡現(xiàn)場(chǎng)離奇詭異徒仓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)誊垢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門掉弛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人喂走,你說我怎么就攤上這事殃饿。” “怎么了芋肠?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵壁晒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我业栅,道長(zhǎng)秒咐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任碘裕,我火速辦了婚禮携取,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘帮孔。我一直安慰自己雷滋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布文兢。 她就那樣靜靜地躺著晤斩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪姆坚。 梳的紋絲不亂的頭發(fā)上澳泵,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音兼呵,去河邊找鬼兔辅。 笑死,一個(gè)胖子當(dāng)著我的面吹牛击喂,可吹牛的內(nèi)容都是我干的维苔。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼懂昂,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼介时!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤沸柔,失蹤者是張志新(化名)和其女友劉穎循衰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體勉失,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年原探,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了乱凿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡咽弦,死狀恐怖徒蟆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情型型,我是刑警寧澤段审,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站闹蒜,受9級(jí)特大地震影響寺枉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绷落,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一姥闪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砌烁,春花似錦筐喳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至管呵,卻和暖如春梳毙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捐下。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工顿天, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蔑担。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓牌废,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親啤握。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鸟缕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容