依舊，來(lái)一個(gè)大綱：
- 什么是動(dòng)態(tài)響應(yīng)式
- 關(guān)于彈性布局
- 關(guān)于固定邊緣
- 關(guān)于固定尺寸
- 手把手實(shí)戰(zhàn)環(huán)節(jié)
- 彈性布局的嵌套
- 最后
響應(yīng)式估計(jì)大家都不陌生，專業(yè)點(diǎn)講就是，系統(tǒng)對(duì)不同的媒介（運(yùn)行 web 的設(shè)備）及視窗（顯示網(wǎng)頁(yè)的瀏覽器窗口）所產(chǎn)生的適應(yīng)變化。
做跨設(shè)備響應(yīng)的朋友接觸會(huì)比較多，從大屏（pc）、中屏（平板）到小屏（移動(dòng)端），為了適配不同的設(shè)備需要產(chǎn)出至少三個(gè)斷點(diǎn)的設(shè)計(jì)方案。
而要說(shuō)市面做全局響應(yīng)做的比較好的，大家可以去官網(wǎng)感受下螞蟻是如何實(shí)現(xiàn)媒介、視窗的完美響應(yīng)的。
回歸到主題，組件的響應(yīng)式和頁(yè)面響應(yīng)式其實(shí)本質(zhì)都是一樣的，都是元素跟隨父級(jí)的所產(chǎn)生的適應(yīng)變化。只不過(guò)組件的父級(jí)可以是一個(gè)編組、也可以是頁(yè)面。
對(duì)組件進(jìn)行響應(yīng)式處理意義重大。拿前文的這個(gè)商品卡片舉例，如果我們對(duì)其不做任何適配處理，那在進(jìn)行尺寸拉伸時(shí)就會(huì)這樣：
圖片、間距變形失真，整個(gè)組件都遭到了破壞，效果非常的挫。
但是如果我們對(duì)組件進(jìn)行一個(gè)適配處理，一切都變得非常自然柔順：
而在 sketch 中，實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)效果的功能就是 Resizing（后面統(tǒng)一翻譯為彈性布局）
所謂的彈性布局，就是讓元素跟隨父級(jí)編組或者畫板的尺寸變化而產(chǎn)生的適應(yīng)變化。在 sketch 中對(duì)應(yīng)著右側(cè)面板的 Resizing 功能。包含 Pin to Edge（固定邊緣）、Fix Size（固定尺寸）和 Preview（預(yù)覽）。（請(qǐng)忽略中文版截圖蹩腳的翻譯。。）
不過(guò)要注意的是，彈性布局需要擁有一個(gè)參照物實(shí)現(xiàn)尺寸和位置關(guān)系的控制。所以彈性布局面板只有在元素存在父級(jí)關(guān)系時(shí)才會(huì)出現(xiàn)，這里的父級(jí)包括編組和畫板。如果元素沒(méi)有任何父級(jí)關(guān)系包裹，僅僅在一個(gè)頁(yè)面中，那并不會(huì)出現(xiàn)彈性布局的功能。
拿商品卡片舉例，一開(kāi)始這個(gè)卡片存在于一個(gè)畫板中，這就意味著它是作為一個(gè)子級(jí)存在于畫板父級(jí)之下，所以會(huì)出現(xiàn)彈性布局功能。
但是，當(dāng)我們將畫板給它撤掉，讓它獨(dú)立得存在于頁(yè)面中，你會(huì)發(fā)現(xiàn)彈性布局功能消失了。就是因?yàn)榇藭r(shí)的商品卡片缺失了父級(jí)關(guān)系，沒(méi)有辦法使用參照物來(lái)控制其尺寸和位置關(guān)系。
不過(guò)，當(dāng)我們將其編組后，彈性布局再次出現(xiàn)，就是由于商品卡片再一次獲得了父級(jí)關(guān)系，只是這次的父級(jí)由畫板變更為編組了。
固定邊緣（Pin to Edge），即固定元素到邊緣的內(nèi)間距。
不論怎么拉伸，我自巋然不動(dòng)。
拿商品標(biāo)簽舉例。未固定邊緣時(shí)，拉伸會(huì)直接破壞組件內(nèi)的間距，顯然這不是我們想要的。
我們希望內(nèi)容與與左側(cè)邊緣的內(nèi)間距保持不變，這該怎么搞呢？
非常簡(jiǎn)單，進(jìn)入源組件頁(yè)面，在右側(cè)彈性布局面板中將內(nèi)容固定到左側(cè)邊緣即可。
回到標(biāo)簽組件，就會(huì)發(fā)現(xiàn)不論我們?cè)趺蠢，?nèi)容始終是固定在左側(cè)邊緣的。
固定尺寸（Fix Size）即固定元素自身的尺寸大小。
拿商品圖為例，沒(méi)有固定尺寸時(shí)，拉伸后會(huì)失真變形。
我們想要商品圖尺寸不隨編組或者畫板尺寸的改變而改變，所以選擇固定圖片的寬高。
不論我們?cè)趺蠢炀幗M，82 年的拉菲尺寸依舊保持不變。
我們?cè)谶x定一種屬性后可以實(shí)時(shí)在右側(cè)窗口中預(yù)覽到效果，以幫助我們判斷是不是自己想要的。注意，我們?cè)邳c(diǎn)選后預(yù)覽動(dòng)畫只會(huì)播放一次。如果想要再次觀看效果，需要 hover 在預(yù)覽窗口上哦～
不過(guò)在很多組件中，固定邊緣和固定尺寸往往是相互搭配、多次使用，下面我們通過(guò)一些實(shí)戰(zhàn)來(lái)鞏固。
依舊是我們的這個(gè)商品卡片，我們的目標(biāo)就是讓卡片中的所有元素能夠適配任意的尺寸，包括不同的寬度和高度。
第一步，確定參照物。
我們確定整個(gè)商品卡片這個(gè)組件為響應(yīng)參照物，后續(xù)所有的子級(jí)元素都要跟隨它尺寸的變化而變化。
第二步，確定響應(yīng)策略。
在這一步，我們確定卡片中所有元素的位置關(guān)系和尺寸的響應(yīng)規(guī)則。
首先，我們需要商品標(biāo)題、商品價(jià)格和標(biāo)簽保持下方和左側(cè)的內(nèi)間距固定，同時(shí)它們的尺寸保持固定（已經(jīng)提前建立了從左至右的自適應(yīng)規(guī)則）所以我們固定左下邊緣和寬高。
其中，標(biāo)簽由于是嵌套在商品卡片組件當(dāng)中的，所以我們需要對(duì)標(biāo)簽組件內(nèi)部做一次彈性布局。固定左側(cè)邊緣和寬高即可。
商品圖我們希望保持尺寸不跟隨改變，所以直接固定其寬高。商品圖背景需要始終保持四個(gè)方向內(nèi)間距的一致，因此固定上下左右的邊緣。
最后來(lái)個(gè)彈性布局的總覽。
第三步，響應(yīng)效果測(cè)試。
到了激動(dòng)人心的測(cè)試環(huán)節(jié)了！嗯，看著相當(dāng)完美。任意尺寸都能輕松 hold 住。
當(dāng)然，這一步環(huán)節(jié)的效果如果不在我們的預(yù)期之內(nèi)，需要返回檢查每一個(gè)元素的彈性布局在哪里出了問(wèn)題，比如文字的對(duì)齊方式啊，比如父子級(jí)的關(guān)系啊等等，反復(fù)調(diào)試～
彈性布局是可以嵌套使用的。
比如，我對(duì) A 使用了彈性布局，那么 A 的父級(jí) B 也可以使用彈性布局。一層層嵌套下去，就可以應(yīng)對(duì)那些復(fù)雜頁(yè)面的響應(yīng)效果。只是嵌套的調(diào)試適配較為麻煩，而且很容易在某個(gè)環(huán)節(jié)忽略掉。
這里我借鑒了幺零三大佬所使用的辦法，將具備父子級(jí)關(guān)系的元素一層層得逐級(jí)拆解，并在每一層分層進(jìn)行彈性布局規(guī)則制定。
比如這個(gè)頁(yè)面，它包含了較多的層級(jí)，如果直接草率上手做彈性布局會(huì)很麻煩，而且毫無(wú)邏輯的做法也很低效。正確的做法是一步步拆解后分層展開(kāi)。
為了便于閱讀理解，下面每一層的版塊和元素抽象成了骨架圖。
第一層彈性布局
首先，從一整個(gè)版面來(lái)看，我們確定整個(gè)畫板作為響應(yīng)參照物，而內(nèi)容區(qū)域需要保持不變的安全邊距。所以我們直接固定內(nèi)容區(qū)域四個(gè)方向的邊緣。
第二層彈性布局
接著，我們對(duì)內(nèi)容區(qū)域進(jìn)行拆解，F(xiàn)在我們的彈性布局對(duì)象變?yōu)椴鸾夂蟮乃膫(gè)版塊，而參照物依舊是整個(gè)畫板。我們希望搜索框和 banner 的高度與上方間距保持不變，因此固定高度和上方邊緣。商品版塊寬高可以自由變化，所以僅固定上方邊緣。
第三層彈性布局
最后，我們對(duì)各個(gè)版塊再次拆解，絕大部分被拆解為了最小顆粒。此時(shí)的彈性布局子級(jí)對(duì)象變?yōu)榱诉@些更加細(xì)分的元素，比如暗提示、圖標(biāo)、大標(biāo)題、折扣標(biāo)等等。而響應(yīng)參照物則變?yōu)榱嗽厮栏降母讣?jí)。比如搜索框是暗提示和圖標(biāo)元素的父級(jí)，而 banner 就是文字、按鈕和圖片的父級(jí)。最后的布局規(guī)則如下，具體邏輯不再贅述~
基于這個(gè)拆解的步驟，我們可以清晰得在每一層級(jí)進(jìn)行分層彈性布局~
來(lái)看下骨架圖的響應(yīng)效果，沒(méi)啥問(wèn)題。
再來(lái)看下界面的響應(yīng)效果~可以
sketch 搭建組件庫(kù)系列就此結(jié)束了，從組件的搭建、到組件的動(dòng)態(tài)自適應(yīng)、再到組件的動(dòng)態(tài)響應(yīng)式，這三個(gè)環(huán)節(jié)缺一不可。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。