第一步,我們簡(jiǎn)單討論一下 B 端響應(yīng)式是什么的問(wèn)題。
雖然前面有寫(xiě)過(guò)網(wǎng)頁(yè)響應(yīng)式的分析,但是 B 端產(chǎn)品的作為一個(gè)比較特殊的分類,和一般展示型網(wǎng)站的響應(yīng)式在應(yīng)用上還是有很多不同點(diǎn)的。
響應(yīng)式是網(wǎng)站為了讓內(nèi)容適配瀏覽器畫(huà)布尺寸而使用的技術(shù),即內(nèi)容的區(qū)域會(huì)隨著瀏覽器窗口的變更而變更,從而提升不同用戶、不同場(chǎng)景的使用需求和體驗(yàn)。
普通展示性站點(diǎn),主要是對(duì)信息要素進(jìn)行響應(yīng)式的呈現(xiàn),包括圖片、文字、背景等內(nèi)容。而 B 端不僅展示的內(nèi)容形式更復(fù)雜,還包含大量復(fù)雜的圖表、表單、按鈕、組件等元素。
B 端的響應(yīng)式設(shè)計(jì)不僅僅是讓內(nèi)容能自動(dòng)匹配顯示而已,還要兼顧操作合理性和用戶體驗(yàn),并且這些復(fù)雜的設(shè)計(jì)內(nèi)容在開(kāi)發(fā)上也有比較多的技術(shù)難點(diǎn)。
所以,作為 B 端設(shè)計(jì)師,如果不能對(duì)該領(lǐng)域知識(shí)有基本認(rèn)識(shí),那么在對(duì)應(yīng)項(xiàng)目中就很難做出讓用戶滿意的設(shè)計(jì),以及降低項(xiàng)目的推進(jìn)效率。
解讀響應(yīng)式設(shè)計(jì),最好的參考對(duì)象,就是螞蟻 AntDesign 的布局相關(guān)規(guī)范了。
地址: https://ant.design/docs/spec/layout-cn
Ant 中,主要應(yīng)用兩種布局形式,左右工作區(qū)和上下工作區(qū),響應(yīng)式規(guī)則主要作用在工作區(qū)中的內(nèi)容區(qū)域中。
在這個(gè)區(qū)域中,Ant 采用了 24 列格線(Coloum)、23 列間隔(Gutter)的刪格系統(tǒng)。其中間隔數(shù)值是固定的,內(nèi)容區(qū)域減去 23 列間隔后,剩下的部分等分成 24 個(gè)格線。
這是一個(gè)自動(dòng)計(jì)算的體系,Gutter 可以通過(guò)我們制定,系統(tǒng)會(huì)自動(dòng)根據(jù)實(shí)際區(qū)域尺寸計(jì)算格線的寬度,大致公式如下:
列寬 = (區(qū)域?qū)?– 23*間距)/ 24
這個(gè)公式中,未知數(shù)只有列寬有一個(gè),間距是我們自己定的,在瀏覽器中也一定有一個(gè)數(shù)值,所以最后計(jì)算出列寬也就理所應(yīng)當(dāng)了。
柵格系統(tǒng)的基礎(chǔ)應(yīng)用,就是對(duì)內(nèi)容模塊分配指定數(shù)值的 “列”,比如一個(gè)組件的寬包含 3 col、4 col、5 col 或者 12 col。也就是說(shuō),在同一行中,總共包含 24 col,隨便設(shè)計(jì)師切割出多少模塊出來(lái),只要最后總數(shù)相加是 24 即可。
所以通過(guò) Ant 的框架來(lái)完成 B 端的設(shè)計(jì),就是創(chuàng)建好畫(huà)布以后,在內(nèi)容區(qū)域創(chuàng)建出對(duì)應(yīng)刪格系統(tǒng),然后在該刪格體系內(nèi)定義寬高、間距即可,Ant 的框架會(huì)自動(dòng)幫助我們完成響應(yīng)的功能。
比如,一開(kāi)始設(shè)計(jì)的頁(yè)面中,創(chuàng)建了 1440px 的畫(huà)布,使用左右布局的形式,左側(cè)使用 200px 寬的導(dǎo)航欄,右側(cè)區(qū)域?qū)挾葹?1192px,間距為 8px,列寬就是 42px。
在這之后,內(nèi)部層次更低的表格、輸入框、標(biāo)簽欄等元素也會(huì)對(duì)應(yīng)實(shí)現(xiàn)響應(yīng)的效果……
講到這里暈了嘛?
暈就對(duì)了,再寫(xiě)下去我也暈(狗頭)。
因?yàn)闊o(wú)論是 Ant 還是任何成熟的 B 端響應(yīng)式框架,都有比較高的理解成本,需要柵格和前端對(duì)應(yīng)技術(shù)特征有一定的了解。再解釋下去,我們就要從底層的 DIV+CSS 講起了。
感興趣的同學(xué)可以自己在 Ant 規(guī)范中查看設(shè)計(jì)、組件中的布局部分,嘗試去理解它們,如果看不明白,就不要再花多余的時(shí)間去查資料了,因?yàn)榍啡弊阋岳斫馑麄兊幕A(chǔ)。
同時(shí),柵格和響應(yīng)式的共同結(jié)合對(duì)于前端程序員也有非常高的要求,隨著標(biāo)準(zhǔn)化組件的增加,代碼會(huì)越來(lái)越難維護(hù),產(chǎn)生的問(wèn)題也會(huì)越來(lái)越多。
下面,我會(huì)對(duì)如何進(jìn)行 B 端設(shè)計(jì)給出自己的建議。
響應(yīng)式的應(yīng)用,是為了讓業(yè)務(wù)內(nèi)容可以正常的顯示,交互操作可以順利的開(kāi)展,而不是為了適配 Ant 這類框架而適配。
所以,盡量堅(jiān)持極簡(jiǎn)、效率至上的原則。建議新手不要將柵格系統(tǒng)和響應(yīng)式進(jìn)行混合使用。
在常規(guī)項(xiàng)目中,我們對(duì)響應(yīng)式功能的應(yīng)用只需要關(guān)注唯一一個(gè)要點(diǎn) —— 視圖拉伸。
“視圖” 是一個(gè)專業(yè)術(shù)語(yǔ),可以是手機(jī)客戶端開(kāi)發(fā)中的 View,也可以是網(wǎng)頁(yè)前端中的 Div,文本編輯器中的 Block,即選中設(shè)計(jì)元素時(shí)的外部邊框。
將整個(gè)響應(yīng)式規(guī)則簡(jiǎn)化,在 B 端的使用環(huán)境中,就是對(duì)部分模塊、組件的視圖區(qū)域進(jìn)行橫向拉伸、延展的過(guò)程。
比如下方的圖例,瀏覽器畫(huà)布放大以后,內(nèi)容區(qū)域?qū)崿F(xiàn)延伸,從而使得內(nèi)部的模塊、組件、列也發(fā)生對(duì)應(yīng)的寬度變化。
我們一層一層來(lái)解釋,首先是內(nèi)容區(qū)域的響應(yīng)。內(nèi)容區(qū)域的實(shí)際寬度,并不是我們手動(dòng)直接給出的,這和 C 端設(shè)計(jì)有很大的差異。
它的寬是通過(guò)定義左右的間距實(shí)現(xiàn)的,即距離左側(cè)導(dǎo)航的數(shù)值和右側(cè)邊緣的數(shù)值。
在這個(gè)基礎(chǔ)上,如果我們定義內(nèi)部的橫向模塊,也不需要定義它具體的寬度像素值,而是把它們用百分比的方式來(lái)定義,比如做成 3 等分,就是每個(gè)模塊寬占內(nèi)容區(qū)域的 33.33%。
如果內(nèi)容區(qū)域包含間距,那么每個(gè)模塊的實(shí)際寬度 = (內(nèi)容寬 – 總間距)/ 3 如下方的案例。
而對(duì)于每個(gè)模塊內(nèi)的元素來(lái)說(shuō),原則也是類似的。如果我們?cè)诶锩嫣砑恿藰?biāo)題、副標(biāo)題,兩個(gè)文本段落,那么這兩個(gè)文本視圖也可以隨著父級(jí)元素的變動(dòng)而變動(dòng)。
同理,除了文本以外,還包含輸入框、按鈕等表單元素,也一樣應(yīng)用這種思路進(jìn)行響應(yīng)。
以及,在處理表格的時(shí)候,我們也可以將每一列分配對(duì)應(yīng)的寬度比例,保證總和是 100%的情況,那么無(wú)論你怎么伸縮頁(yè)面都可以實(shí)現(xiàn)內(nèi)容的合理顯示。
但是,并不是在響應(yīng)式過(guò)程中,我們?cè)O(shè)計(jì)的每個(gè)元素都要具備響應(yīng)式的特征。比如頭像、圖標(biāo)、小按鈕、定寬標(biāo)簽等元素,并不會(huì)隨著父級(jí)元素的變更而變化自己的尺寸,這類元素即定寬元素。
響應(yīng)式設(shè)計(jì),就是用這種擊鼓傳花的方法將寬度一層層定義下去,每個(gè)進(jìn)行響應(yīng)的元素都根據(jù)父級(jí)元素的寬來(lái)進(jìn)行間距、比例的換算,而不能響應(yīng)的元素,我們確定好它的具體長(zhǎng)寬值,確保整個(gè)頁(yè)面的布局可以靈活的進(jìn)行調(diào)整。
并且,在上一篇內(nèi)容中,我們提過(guò)建議使用最小適配寬度來(lái)展開(kāi) B 端的設(shè)計(jì),原因就是因?yàn)槊恳荒K內(nèi)容的顯示都有它的最小值,所以理論上我們要在設(shè)計(jì) B 端界面的過(guò)程中,確定該頁(yè)面適配的最小寬度(min-width),當(dāng)小于這個(gè)寬度以后,所有頁(yè)面元素將不再縮小,使用瀏覽器進(jìn)度條進(jìn)行左右的滾動(dòng)查看內(nèi)容。
對(duì)于一般項(xiàng)目,使用這種基礎(chǔ)的響應(yīng)式方法即可,盡量避免使用 Breakpoint 概念去制作多個(gè)響應(yīng)的布局內(nèi)容,不僅設(shè)計(jì)工作大量增加,而且后期維護(hù)成本極高。
對(duì)于想要支持手機(jī)訪問(wèn)的需求來(lái)說(shuō),我只建議放棄在同一套設(shè)計(jì)中使用響應(yīng)式布局適配手機(jī),而是和你們的產(chǎn)品、開(kāi)發(fā)溝通,提供一套獨(dú)立的手機(jī)設(shè)計(jì)內(nèi)容。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。