依舊,來(lái)一個(gè)大綱:
- 什么是動(dòng)態(tài)響應(yīng)式
- 關(guān)于彈性布局
- 關(guān)于固定邊緣
- 關(guān)于固定尺寸
- 手把手實(shí)戰(zhàn)環(huán)節(jié)
- 彈性布局的嵌套
- 最后
響應(yīng)式估計(jì)大家都不陌生,專(zhuān)業(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í)編組或者畫(huà)板的尺寸變化而產(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í)包括編組和畫(huà)板。如果元素沒(méi)有任何父級(jí)關(guān)系包裹,僅僅在一個(gè)頁(yè)面中,那并不會(huì)出現(xiàn)彈性布局的功能。
拿商品卡片舉例,一開(kāi)始這個(gè)卡片存在于一個(gè)畫(huà)板中,這就意味著它是作為一個(gè)子級(jí)存在于畫(huà)板父級(jí)之下,所以會(huì)出現(xiàn)彈性布局功能。
但是,當(dāng)我們將畫(huà)板給它撤掉,讓它獨(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í)由畫(huà)板變更為編組了。
固定邊緣(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ì)失真變形。
我們想要商品圖尺寸不隨編組或者畫(huà)板尺寸的改變而改變,所以選擇固定圖片的寬高。
不論我們?cè)趺蠢炀幗M,82 年的拉菲尺寸依舊保持不變。
我們?cè)谶x定一種屬性后可以實(shí)時(shí)在右側(cè)窗口中預(yù)覽到效果,以幫助我們判斷是不是自己想要的。注意,我們?cè)邳c(diǎn)選后預(yù)覽動(dòng)畫(huà)只會(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è)畫(huà)板作為響應(yīng)參照物,而內(nèi)容區(qū)域需要保持不變的安全邊距。所以我們直接固定內(nèi)容區(qū)域四個(gè)方向的邊緣。
第二層彈性布局
接著,我們對(duì)內(nèi)容區(qū)域進(jìn)行拆解,F(xiàn)在我們的彈性布局對(duì)象變?yōu)椴鸾夂蟮乃膫(gè)版塊,而參照物依舊是整個(gè)畫(huà)板。我們希望搜索框和 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)閱讀并接受
上述條款。