2019-4-3 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Material Design 響應(yīng)式布局柵格適應(yīng)屏幕尺寸和方向，確保布局的一致性。
Material Design 布局柵格由三個(gè)元素組成：列、間距和邊距。
內(nèi)容放置在包含列的屏幕區(qū)域中。
列寬是使用百分比而不是固定值來(lái)定義的，以允許內(nèi)容靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列數(shù)由查看屏幕的斷點(diǎn)范圍（預(yù)定屏幕大小的范圍）確定，無(wú)論是移動(dòng)設(shè)備，平板電腦還是其他尺寸的斷點(diǎn)。
間距是列之間的空間，它們有助于分離內(nèi)容。
間距在每個(gè)斷點(diǎn)范圍內(nèi)的值是固定的。為了更好地適應(yīng)屏幕，間距寬度可以在不同的斷點(diǎn)處改變。更寬的間距更適合大屏幕，因?yàn)樗鼈冊(cè)诹兄g創(chuàng)建了更多的空白。
邊距是內(nèi)容和屏幕左右邊緣之間的空間。
邊距寬度定義為每個(gè)斷點(diǎn)范圍的固定值。為了更好地適應(yīng)屏幕，邊距寬度可以在不同的斷點(diǎn)處改變。更寬的邊距更適合更大的屏幕，因?yàn)樗鼈冊(cè)趦?nèi)容的周邊創(chuàng)建了更多的空白。
可以調(diào)整布局柵格以滿足您的產(chǎn)品和各種設(shè)備尺寸的需求。
可以調(diào)整間距以在布局的列之間創(chuàng)建更多或更少的空間。
可以調(diào)整頁(yè)邊距，以在內(nèi)容和屏幕邊緣之間創(chuàng)建或多或少的空間。頁(yè)邊距對(duì)每個(gè)斷點(diǎn)使用固定值。
正文副本可讀性的理想長(zhǎng)度是每行40-60個(gè)字符。
在同一斷點(diǎn)內(nèi)，間距和邊距寬度可以彼此不同。
Material Design布局柵格可以被水平滾動(dòng)的觸摸UI自定義。列、間距和邊距從左到右排列，而不是從上到下排列。屏幕的高度決定水平柵格中的列數(shù)。
在非觸控和web平臺(tái)，水平滾動(dòng)的UI并不常見(jiàn)。
可以定位水平柵格以適應(yīng)不同的高度，從而為頂部的app欄或其他UI區(qū)域留出空間。
斷點(diǎn)是具有特定布局要求的預(yù)定屏幕大小的范圍。在給定的斷點(diǎn)范圍內(nèi)，布局將根據(jù)屏幕大小和方向進(jìn)行調(diào)整。
Material Design基于以下列結(jié)構(gòu)提供響應(yīng)式布局。使用4列，8列和12列柵格的布局可用于不同的屏幕、設(shè)備和方向。
每個(gè)斷點(diǎn)范圍決定每個(gè)顯示大小的列數(shù)、建議的邊距和間距。
彈性柵格
彈性柵格使用可縮放和調(diào)整內(nèi)容大小的列。彈性柵格的布局可以使用斷點(diǎn)來(lái)確定布局是否需要顯著更改。
固定柵格
固定柵格使用固定大小的列，具有流體邊距，以在每個(gè)斷點(diǎn)范圍內(nèi)保持內(nèi)容不變。固定柵格的布局只能在指定的斷點(diǎn)處更改。
UI（用戶界面）區(qū)域
布局由多個(gè)UI區(qū)域組成，例如側(cè)面導(dǎo)航，內(nèi)容區(qū)域和應(yīng)用欄。這些區(qū)域可以顯示操作、內(nèi)容或?qū)Ш侥繕?biāo)。UI區(qū)域應(yīng)跨設(shè)備保持一致，同時(shí)適應(yīng)不同屏幕尺寸的不同斷點(diǎn)。
為了提高設(shè)備之間的熟悉度，為桌面設(shè)計(jì)的UI元素應(yīng)該以與移動(dòng)UI一致的方式進(jìn)行組織。
永久UI區(qū)域
永久UI區(qū)域是可以在響應(yīng)柵格之外顯示的區(qū)域，如導(dǎo)航抽屜。這些地區(qū)不能重疊。
持久UI區(qū)域
持久性UI區(qū)域是可以隨時(shí)根據(jù)命令顯示的區(qū)域，或者它們可以保持可見(jiàn)。它們可以打開(kāi)或關(guān)閉，出現(xiàn)或消失。當(dāng)它們出現(xiàn)時(shí)，它們會(huì)壓縮內(nèi)容和柵格。
當(dāng)持久性UI區(qū)域可見(jiàn)時(shí)，其可見(jiàn)性不受與屏幕上其他元素交互的影響。
臨時(shí)UI區(qū)域
臨時(shí)UI區(qū)域暫時(shí)出現(xiàn)，當(dāng)它們出現(xiàn)時(shí)，它們不會(huì)影響響應(yīng)式柵格。當(dāng)它們可見(jiàn)時(shí)，可以通過(guò)點(diǎn)擊其區(qū)域中的項(xiàng)目或其區(qū)域外的任何空間來(lái)隱藏它們。
當(dāng)UI區(qū)域可見(jiàn)時(shí)，其他屏幕元素不是交互式的。
原型
原型是結(jié)構(gòu)化布局，為布局、分層和陰影提供一致的方法。它們是一個(gè)起點(diǎn)，旨在在進(jìn)行修改以滿足產(chǎn)品的特定需求。
藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.shtzxx.cn