2023-6-9 周周
柵格一直都是很多同學(xué)非常疑惑的地方,無(wú)論是柵格的日常使用,又或者是柵格在整個(gè)產(chǎn)品當(dāng)中的作用,一直以來(lái)都有非常多的疑惑,今天就來(lái)聊聊柵格在實(shí)際工作如何使用,以及產(chǎn)品之間究竟有何區(qū)別。
上期回顧:
其實(shí)在說(shuō)柵格的使用,我們就在討論網(wǎng)頁(yè)當(dāng)中的布局方式,以及他們之間的不同點(diǎn)。
布局方式,本質(zhì)上就是去處理窗口寬度與網(wǎng)頁(yè)內(nèi)容的關(guān)系
用戶會(huì)使用瀏覽器打開(kāi)不同尺寸的窗口寬度,而網(wǎng)頁(yè)內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸?
通常會(huì)分為:固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局
固定布局是一種最為簡(jiǎn)單的方式,它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的內(nèi)容 “寫(xiě)死固定” 在屏幕上,內(nèi)容不會(huì)隨著本身窗口寬度進(jìn)行改變,所有元素都使用 px 作為基礎(chǔ)單位
當(dāng)然在固定布局當(dāng)中,窗口大小與頁(yè)面內(nèi)容會(huì)存在兩種基本關(guān)系:窗口過(guò)大則將頁(yè)面元素進(jìn)行居中,窗口過(guò)小則展示橫向滾動(dòng)條
固定布局的好處是這種方式相對(duì)簡(jiǎn)單,只需將頁(yè)面設(shè)計(jì)好即可,不會(huì)存在太多兼容性的問(wèn)題(因?yàn)橐矇焊鶝](méi)有考慮兼容性的相關(guān)問(wèn)題)
固定布局通常出現(xiàn)在 老舊的政府項(xiàng)目、網(wǎng)頁(yè)的登錄注冊(cè)中
流式布局是最基礎(chǔ)的變化布局,它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的元素設(shè)計(jì)成可以流動(dòng)的 “水” ,通過(guò)在頁(yè)面,設(shè)計(jì)不同的“杯子”容器來(lái)裝下頁(yè)面內(nèi)容
這里的“水”一般指的是 文字、圖標(biāo)、以及一些頁(yè)面重復(fù)出現(xiàn)的元素。而杯子通常是我們?cè)O(shè)計(jì)的容器,它高度固定,只會(huì)變化其寬度,比如卡片、外層容器控制寬度 等等...
因?yàn)椤氨印钡南拗疲簿蛯?dǎo)致水會(huì)根據(jù)杯子的寬度進(jìn)行延展流動(dòng),進(jìn)而形成流式布局
使用流式布局可以通過(guò)較低的開(kāi)發(fā)成本,來(lái)實(shí)現(xiàn)一個(gè)頁(yè)面當(dāng)中多尺寸的小范圍適配,如果屏幕尺寸跨度較大,則會(huì)比較困難
而流式布局最常使用的方式就是通過(guò)柵格系統(tǒng),來(lái)確定整個(gè)“杯子”的寬度,進(jìn)而讓“水”能夠在頁(yè)面當(dāng)中實(shí)時(shí)滾動(dòng)展示
這里有兩個(gè)需要注意的點(diǎn):
在研發(fā)層面,杯子的大小是需要進(jìn)行限制的,通常會(huì)去設(shè)定它的最大值與最小值,當(dāng)它超過(guò)最大值則居中對(duì)齊,當(dāng)他
在流式布局當(dāng)中,窗口超過(guò)其最大值則固定左側(cè),右側(cè)空白補(bǔ)充;窗口小于其最小值則展示橫向滾動(dòng)條
比如與上方同樣的案例,將頁(yè)面當(dāng)中內(nèi)容的文字實(shí)現(xiàn)成流式布局,并且將其流體布局的寬度限制為 200px - 120px,這時(shí)則會(huì)形成頁(yè)面的寬度變化,會(huì)導(dǎo)致內(nèi)容發(fā)生直接的變化
流動(dòng)的“水” 需要去考慮它漫出的情況,即在“水杯”高度固定的情況下,整個(gè)寬度無(wú)法裝下如此多“水”的情況,通常我們可以使用 “...” 進(jìn)行標(biāo)注。這個(gè)思路后續(xù)在響應(yīng)式布局當(dāng)中也會(huì)體現(xiàn)
自適應(yīng)布局是將差別較大的屏幕尺寸,去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿,每一個(gè)設(shè)計(jì)稿去對(duì)應(yīng) 一個(gè)用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計(jì)方案
通俗一點(diǎn)來(lái)說(shuō),自適應(yīng)就是去單獨(dú)設(shè)計(jì)桌面端、平板端、移動(dòng)端的頁(yè)面,并且將它們?nèi)哌M(jìn)行獨(dú)立,而系統(tǒng)通過(guò)不同尺寸間的 屏幕斷點(diǎn)/瀏覽器 UA 等...(實(shí)際前端判斷遠(yuǎn)比這個(gè)更加復(fù)雜,但是為了方便理解可以暫且這么認(rèn)為),進(jìn)而適應(yīng)出不同的設(shè)計(jì)頁(yè)面
而通俗一點(diǎn)來(lái)說(shuō),自適應(yīng)是使用多套代碼去對(duì)應(yīng)多個(gè)頁(yè)面,并且都是在業(yè)務(wù)非常復(fù)雜的情況下進(jìn)行使用,在國(guó)內(nèi)當(dāng)中最常使用便是 桌面端與移動(dòng)端 的產(chǎn)品
比如 語(yǔ)雀 當(dāng)中的 桌面端與移動(dòng)端就是一個(gè)典型案例,他通過(guò)判斷用戶的使用設(shè)備,將頁(yè)面拆分為了,桌面端、移動(dòng)設(shè)備端、小程序(單獨(dú)設(shè)計(jì)適配的)。因此只需要將每種設(shè)備的設(shè)計(jì)思路分析清楚即可
自適應(yīng)布局與柵格
自適應(yīng)主要是表達(dá)多個(gè)設(shè)備尺寸下進(jìn)行切換的 布局方式,在不同的設(shè)備之間,也是需要去使用流式布局以及其他布局方式
而不同的設(shè)備之間,屏幕分辨率的差異就會(huì)涉及到一個(gè)關(guān)鍵點(diǎn),屏幕斷點(diǎn)
屏幕斷點(diǎn)
屏幕斷點(diǎn),又叫媒體查詢 @media,因?yàn)樵谡麄€(gè)設(shè)計(jì)當(dāng)中,屏幕尺寸是極其復(fù)雜的,除了我們常見(jiàn)的尺寸:1920、1080、1440、1366
用戶還可以通過(guò)調(diào)整窗口的大小,進(jìn)而改變網(wǎng)頁(yè)尺寸。而屏幕斷點(diǎn),最主要是判斷屏幕的寬度,來(lái)確定目前的尺寸究竟應(yīng)該采取什么設(shè)計(jì)方案
比如在設(shè)計(jì)一款成熟的 B 端產(chǎn)品時(shí),因?yàn)樯虡I(yè)的緣故我們作為各大平臺(tái)(釘釘、企微、飛書(shū))的 ISV(合作上架),產(chǎn)品上架到不同平臺(tái)時(shí),需要對(duì)不同平臺(tái)尺寸進(jìn)行調(diào)整,比如釘釘為 1024px、企微為 980px、飛書(shū)為 1280px,這時(shí)為了滿足用戶的實(shí)際場(chǎng)景,會(huì)將這幾類特殊的尺寸作為屏幕斷點(diǎn)進(jìn)行對(duì)應(yīng)的布局設(shè)計(jì),以滿足不同產(chǎn)品當(dāng)中的最佳實(shí)踐
關(guān)于屏幕斷點(diǎn)的媒體查詢,是在前端 CSS3 代碼當(dāng)中,提供給用戶校驗(yàn)整個(gè)屏幕的寬度,比如在下圖前端代碼當(dāng)中,則代表在屏幕尺寸小于 480px 時(shí),使用 字體大小為 16px
而確定斷點(diǎn)才是這其核心,這里給大家提供兩個(gè)思路,實(shí)際設(shè)計(jì)當(dāng)中還會(huì)更為復(fù)雜:
物理斷點(diǎn):也就是屏幕當(dāng)中,已經(jīng)劃分好的斷點(diǎn)方式,比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異
設(shè)計(jì)斷點(diǎn):在設(shè)計(jì)過(guò)程當(dāng)中,一些必要的屏幕尺寸。比如上方講到不同平臺(tái)的設(shè)計(jì)問(wèn)題
其實(shí)屏幕斷點(diǎn)不是最終目的,最終還是想通過(guò)屏幕斷點(diǎn),將頁(yè)面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計(jì)稿中,如果不需要,完全可以不考慮增加屏幕斷點(diǎn)。
這里先多聊一句,其實(shí)響應(yīng)式的大規(guī)模普及,是源自 2015 年 Google 的倡導(dǎo)(可以看到 Google 旗下的很多產(chǎn)品都采取的響應(yīng)式布局,例如 YouTube),它最初的目的非常簡(jiǎn)單,就是為了提高響應(yīng)式在移動(dòng)終端上的運(yùn)行效率。因?yàn)樵?2015 年時(shí),安卓 生態(tài)下的屏幕尺寸多到可怕,以至于需要有一套解決辦法來(lái)讓用戶運(yùn)行并使用。
響應(yīng)式布局是確保一個(gè)頁(yè)面當(dāng)中所有的設(shè)備(桌面端、平板端、移動(dòng)端)都能夠展示出非常滿意的效果,進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局 的結(jié)合,它能夠通過(guò)對(duì)屏幕尺寸的快速響應(yīng),進(jìn)而對(duì)頁(yè)面的內(nèi)容進(jìn)行更為細(xì)致的變化。
通俗一點(diǎn)來(lái)說(shuō)就是通過(guò)一套代碼去實(shí)現(xiàn)多個(gè)頁(yè)面,并且將多個(gè)頁(yè)面的內(nèi)容進(jìn)行細(xì)化,進(jìn)而能夠快速適配多個(gè)設(shè)備。
對(duì)于多個(gè)設(shè)備,最主要是調(diào)整頁(yè)面柵格數(shù)量、水槽寬度、頁(yè)面距進(jìn)行適應(yīng),比如在 YouTube 當(dāng)中,就是通過(guò)響應(yīng)式布局,讓頁(yè)面實(shí)時(shí)響應(yīng)進(jìn)行處理。
響應(yīng)式布局與柵格
比如以 Ant Design Pro 的頁(yè)面進(jìn)行拆解,你會(huì)發(fā)現(xiàn)它在 575、767、991 的尺寸中,頁(yè)面布局發(fā)生變化,然后根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局,采用向下兼容的適配方式,Ant design Pro 屏幕斷點(diǎn)可以劃分為 320、576、768、992、1200,響應(yīng)策略如下圖:
你會(huì)發(fā)現(xiàn)布局其實(shí)是依賴于柵格,而柵格的使用,正是由于不同的布局所導(dǎo)致。只有通過(guò)柵格,才能夠確定流式布局的比例、響應(yīng)式布局的變化方式,但是在 B 端產(chǎn)品當(dāng)中,并不是所有頁(yè)面都需要使用柵格,經(jīng)常看到一些作品集其實(shí)是為了柵格而柵格
在 B 端產(chǎn)品當(dāng)中在,真正使用柵格的地方更多是工作臺(tái)、官網(wǎng),而其他相對(duì)復(fù)雜的頁(yè)面是沒(méi)辦法使用柵格,而對(duì)我們每一個(gè)產(chǎn)品而言,可以優(yōu)化的點(diǎn)就是在屏幕尺寸較小的情況下,默認(rèn)讓整個(gè)產(chǎn)品導(dǎo)航菜單收起,以提供給用戶更多展示內(nèi)容。
文章來(lái)源:優(yōu)設(shè)網(wǎng) 作者:CE青年
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com