如何用Sketch搭建組件庫(下)
發(fā)布時間:2022-01-06 10:42 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

依舊,來一個大綱:

  • 什么是動態(tài)響應(yīng)式
  • 關(guān)于彈性布局
  • 關(guān)于固定邊緣
  • 關(guān)于固定尺寸
  • 手把手實戰(zhàn)環(huán)節(jié)
  • 彈性布局的嵌套
  • 最后


什么是動態(tài)響應(yīng)式

響應(yīng)式估計大家都不陌生,專業(yè)點講就是,系統(tǒng)對不同的媒介(運行 web 的設(shè)備)及視窗(顯示網(wǎng)頁的瀏覽器窗口)所產(chǎn)生的適應(yīng)變化。

做跨設(shè)備響應(yīng)的朋友接觸會比較多,從大屏(pc)、中屏(平板)到小屏(移動端),為了適配不同的設(shè)備需要產(chǎn)出至少三個斷點的設(shè)計方案。

而要說市面做全局響應(yīng)做的比較好的,大家可以去官網(wǎng)感受下螞蟻是如何實現(xiàn)媒介、視窗的完美響應(yīng)的。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

回歸到主題,組件的響應(yīng)式和頁面響應(yīng)式其實本質(zhì)都是一樣的,都是元素跟隨父級的所產(chǎn)生的適應(yīng)變化。只不過組件的父級可以是一個編組、也可以是頁面。

對組件進(jìn)行響應(yīng)式處理意義重大。拿前文的這個商品卡片舉例,如果我們對其不做任何適配處理,那在進(jìn)行尺寸拉伸時就會這樣:

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

圖片、間距變形失真,整個組件都遭到了破壞,效果非常的挫。

但是如果我們對組件進(jìn)行一個適配處理,一切都變得非常自然柔順:

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

而在 sketch 中,實現(xiàn)動態(tài)響應(yīng)效果的功能就是 Resizing(后面統(tǒng)一翻譯為彈性布局)

關(guān)于彈性布局

所謂的彈性布局,就是讓元素跟隨父級編組或者畫板的尺寸變化而產(chǎn)生的適應(yīng)變化。在 sketch 中對應(yīng)著右側(cè)面板的 Resizing 功能。包含 Pin to Edge(固定邊緣)、Fix Size(固定尺寸)和 Preview(預(yù)覽)。(請忽略中文版截圖蹩腳的翻譯。。)

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

不過要注意的是,彈性布局需要擁有一個參照物實現(xiàn)尺寸和位置關(guān)系的控制。所以彈性布局面板只有在元素存在父級關(guān)系時才會出現(xiàn),這里的父級包括編組和畫板。如果元素沒有任何父級關(guān)系包裹,僅僅在一個頁面中,那并不會出現(xiàn)彈性布局的功能。

拿商品卡片舉例,一開始這個卡片存在于一個畫板中,這就意味著它是作為一個子級存在于畫板父級之下,所以會出現(xiàn)彈性布局功能。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

但是,當(dāng)我們將畫板給它撤掉,讓它獨立得存在于頁面中,你會發(fā)現(xiàn)彈性布局功能消失了。就是因為此時的商品卡片缺失了父級關(guān)系,沒有辦法使用參照物來控制其尺寸和位置關(guān)系。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

不過,當(dāng)我們將其編組后,彈性布局再次出現(xiàn),就是由于商品卡片再一次獲得了父級關(guān)系,只是這次的父級由畫板變更為編組了。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

固定邊緣

固定邊緣(Pin to Edge),即固定元素到邊緣的內(nèi)間距。

不論怎么拉伸,我自巋然不動。

拿商品標(biāo)簽舉例。未固定邊緣時,拉伸會直接破壞組件內(nèi)的間距,顯然這不是我們想要的。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

我們希望內(nèi)容與與左側(cè)邊緣的內(nèi)間距保持不變,這該怎么搞呢?

非常簡單,進(jìn)入源組件頁面,在右側(cè)彈性布局面板中將內(nèi)容固定到左側(cè)邊緣即可。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

回到標(biāo)簽組件,就會發(fā)現(xiàn)不論我們怎么拉伸,內(nèi)容始終是固定在左側(cè)邊緣的。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

關(guān)于固定尺寸

固定尺寸(Fix Size)即固定元素自身的尺寸大小。

拿商品圖為例,沒有固定尺寸時,拉伸后會失真變形。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

我們想要商品圖尺寸不隨編組或者畫板尺寸的改變而改變,所以選擇固定圖片的寬高。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

不論我們怎么拉伸編組,82 年的拉菲尺寸依舊保持不變。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

關(guān)于預(yù)覽

我們在選定一種屬性后可以實時在右側(cè)窗口中預(yù)覽到效果,以幫助我們判斷是不是自己想要的。注意,我們在點選后預(yù)覽動畫只會播放一次。如果想要再次觀看效果,需要 hover 在預(yù)覽窗口上哦~

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

不過在很多組件中,固定邊緣和固定尺寸往往是相互搭配、多次使用,下面我們通過一些實戰(zhàn)來鞏固。

手把手實戰(zhàn)環(huán)節(jié)

依舊是我們的這個商品卡片,我們的目標(biāo)就是讓卡片中的所有元素能夠適配任意的尺寸,包括不同的寬度和高度。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

第一步,確定參照物。

我們確定整個商品卡片這個組件為響應(yīng)參照物,后續(xù)所有的子級元素都要跟隨它尺寸的變化而變化。

第二步,確定響應(yīng)策略。

在這一步,我們確定卡片中所有元素的位置關(guān)系和尺寸的響應(yīng)規(guī)則。

首先,我們需要商品標(biāo)題、商品價格和標(biāo)簽保持下方和左側(cè)的內(nèi)間距固定,同時它們的尺寸保持固定(已經(jīng)提前建立了從左至右的自適應(yīng)規(guī)則)所以我們固定左下邊緣和寬高。

其中,標(biāo)簽由于是嵌套在商品卡片組件當(dāng)中的,所以我們需要對標(biāo)簽組件內(nèi)部做一次彈性布局。固定左側(cè)邊緣和寬高即可。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

商品圖我們希望保持尺寸不跟隨改變,所以直接固定其寬高。商品圖背景需要始終保持四個方向內(nèi)間距的一致,因此固定上下左右的邊緣。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

最后來個彈性布局的總覽。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

第三步,響應(yīng)效果測試。

到了激動人心的測試環(huán)節(jié)了!嗯,看著相當(dāng)完美。任意尺寸都能輕松 hold 住。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

當(dāng)然,這一步環(huán)節(jié)的效果如果不在我們的預(yù)期之內(nèi),需要返回檢查每一個元素的彈性布局在哪里出了問題,比如文字的對齊方式啊,比如父子級的關(guān)系啊等等,反復(fù)調(diào)試~

彈性布局的嵌套

彈性布局是可以嵌套使用的。

比如,我對 A 使用了彈性布局,那么 A 的父級 B 也可以使用彈性布局。一層層嵌套下去,就可以應(yīng)對那些復(fù)雜頁面的響應(yīng)效果。只是嵌套的調(diào)試適配較為麻煩,而且很容易在某個環(huán)節(jié)忽略掉。

這里我借鑒了幺零三大佬所使用的辦法,將具備父子級關(guān)系的元素一層層得逐級拆解,并在每一層分層進(jìn)行彈性布局規(guī)則制定。

比如這個頁面,它包含了較多的層級,如果直接草率上手做彈性布局會很麻煩,而且毫無邏輯的做法也很低效。正確的做法是一步步拆解后分層展開。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

為了便于閱讀理解,下面每一層的版塊和元素抽象成了骨架圖。

第一層彈性布局

首先,從一整個版面來看,我們確定整個畫板作為響應(yīng)參照物,而內(nèi)容區(qū)域需要保持不變的安全邊距。所以我們直接固定內(nèi)容區(qū)域四個方向的邊緣。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

第二層彈性布局

接著,我們對內(nèi)容區(qū)域進(jìn)行拆解。現(xiàn)在我們的彈性布局對象變?yōu)椴鸾夂蟮乃膫版塊,而參照物依舊是整個畫板。我們希望搜索框和 banner 的高度與上方間距保持不變,因此固定高度和上方邊緣。商品版塊寬高可以自由變化,所以僅固定上方邊緣。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

第三層彈性布局

最后,我們對各個版塊再次拆解,絕大部分被拆解為了最小顆粒。此時的彈性布局子級對象變?yōu)榱诉@些更加細(xì)分的元素,比如暗提示、圖標(biāo)、大標(biāo)題、折扣標(biāo)等等。而響應(yīng)參照物則變?yōu)榱嗽厮栏降母讣墶1热缢阉骺蚴前堤崾竞蛨D標(biāo)元素的父級,而 banner 就是文字、按鈕和圖片的父級。最后的布局規(guī)則如下,具體邏輯不再贅述~

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

基于這個拆解的步驟,我們可以清晰得在每一層級進(jìn)行分層彈性布局~

來看下骨架圖的響應(yīng)效果,沒啥問題。

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

再來看下界面的響應(yīng)效果~可以

超詳細(xì)!手把手教你用Sketch搭建組件庫(下)

最后

sketch 搭建組件庫系列就此結(jié)束了,從組件的搭建、到組件的動態(tài)自適應(yīng)、再到組件的動態(tài)響應(yīng)式,這三個環(huán)節(jié)缺一不可。

文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC