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