2018-8-9 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
先說(shuō)下設(shè)計(jì)視角吧，這個(gè)最貼近設(shè)計(jì)師，比較好理解。
設(shè)計(jì)視角主要是從網(wǎng)頁(yè)的排版角度去進(jìn)行分類(lèi)，大致分為四種：上下布局、左右布局、國(guó)字形布局和T字形布局。
上下布局是最常見(jiàn)的布局方式，基本上都會(huì)在最上方有一個(gè)導(dǎo)航，下方是內(nèi)容區(qū)，有的官網(wǎng)還會(huì)有頁(yè)腳footer，站酷就是上下布局。左右布局在后臺(tái)類(lèi)、TO B類(lèi)產(chǎn)品中比較常見(jiàn)，一般左側(cè)為側(cè)邊欄，右側(cè)為內(nèi)容區(qū)。國(guó)字形布局和T字形布局其實(shí)算作上下布局，只不過(guò)比較典型，可以單拎出來(lái)作為一種布局類(lèi)型。
接下來(lái)我們來(lái)看下前端視角的布局方法
首先為什么要了解些前端的布局方式呢，直接甩給前端一個(gè)設(shè)計(jì)稿，讓他去實(shí)現(xiàn)不就行了？其實(shí)這涉及到的是設(shè)計(jì)和開(kāi)發(fā)之間的協(xié)作關(guān)系，一個(gè)有規(guī)律有規(guī)范的設(shè)計(jì)稿，前端實(shí)現(xiàn)起來(lái)更加容易，也方便他管理自己的代碼，實(shí)現(xiàn)出來(lái)的樣式也會(huì)更靈活，在出設(shè)計(jì)稿之前和前端溝通一下，采用什么布局方式，需要設(shè)計(jì)怎么配合，也費(fèi)不了多少工夫。當(dāng)然直接甩個(gè)設(shè)計(jì)稿，前端也能實(shí)現(xiàn)，但一些特殊效果真的是需要雙方合作才能完成的。
廢話不多說(shuō)
前端視角主要是指實(shí)現(xiàn)頁(yè)面的各種CSS布局方式，我這里主要?dú)w納了5種：靜態(tài)布局、流式布局、響應(yīng)式布局、彈性布局和Flex布局。除了靜態(tài)布局，其他都能實(shí)現(xiàn)在不同分辨率下頁(yè)面的自適應(yīng)，來(lái)給用戶(hù)最佳的視覺(jué)呈現(xiàn)。
靜態(tài)布局（static layout）
靜態(tài)布局也叫做固定布局，網(wǎng)頁(yè)內(nèi)容區(qū)采?絕對(duì)寬度，網(wǎng)頁(yè)內(nèi)每個(gè)模塊的尺寸大小固定，一般整體在瀏覽器內(nèi)居中顯示，并會(huì)設(shè)置最小寬度min-width，當(dāng)分辨率小于最小寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于最小寬度則內(nèi)容居中外加背景 。
找了一個(gè)很古老的網(wǎng)站，大家看看就好。。。
應(yīng)用場(chǎng)景：目前大部分的高校官網(wǎng)、醫(yī)院官網(wǎng)、政府網(wǎng)站等都是靜態(tài)布局，而且設(shè)計(jì)風(fēng)格上也很老舊，你們懂得，當(dāng)然并不是說(shuō)靜態(tài)布局的風(fēng)格就是老舊，這個(gè)布局和設(shè)計(jì)風(fēng)格沒(méi)有多大關(guān)系哈，有很多新聞門(mén)戶(hù)類(lèi)、企業(yè)官網(wǎng)等網(wǎng)站采用靜態(tài)布局，同樣也很出彩。
優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和前端來(lái)說(shuō)都是最簡(jiǎn)單的，不用去考慮兼容性等問(wèn)題。設(shè)計(jì)和開(kāi)發(fā)成本低，后期維護(hù)成本低。
缺點(diǎn)：在小屏上有可能出現(xiàn)橫向滾動(dòng)條，在大屏上會(huì)出現(xiàn)大量的空白，不能根據(jù)用戶(hù)的屏幕尺寸做出不同的表現(xiàn)，用戶(hù)體驗(yàn)比較差。
流式布局（fluid layout ）
流式布局英文fluid layout，也可以翻譯成liquid layout，是指頁(yè)面按照百分比%定義寬度（也就是長(zhǎng)度單位不是我們平常使用的px，而是百分?jǐn)?shù)），來(lái)適配不同的屏幕分辨率，在不同的分辨率下網(wǎng)頁(yè)布局保持不變，一般搭配min-、max-屬性來(lái)控制尺寸流動(dòng)范圍，以免過(guò)大或者過(guò)小影響展示和閱讀，頁(yè)面內(nèi)元素的高度和文字大小往往px來(lái)固定住，方便頁(yè)面排版和閱讀。
流式布局的特點(diǎn)是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
圖片來(lái)自ant design
應(yīng)用場(chǎng)景：流式布局典型的代表是柵格系統(tǒng)，一般頁(yè)面中采用百分比定寬的部分都可以看做是流動(dòng)布局的屬性。目前大部分網(wǎng)頁(yè)為了實(shí)現(xiàn)更好的視覺(jué)效果都會(huì)全局或局部使用流式布局。
優(yōu)點(diǎn)：在不同分辨率屏幕上能夠很好的展示頁(yè)面元素，如果設(shè)計(jì)得當(dāng)，流動(dòng)布局能避免在小屏幕上出現(xiàn)水平滾動(dòng)條，對(duì)于差別不是很大的屏幕分辨率十分友好。
缺點(diǎn)：當(dāng)屏幕分辨率差異過(guò)大時(shí)，因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來(lái)固定，有些頁(yè)面元素寬度被拉的很高，頁(yè)面縮小后，一些字或者圖片或者圖表等會(huì)產(chǎn)生堆疊，顯示效果不太好控制。
響應(yīng)式布局（responsive layout ）
響應(yīng)式布局是指網(wǎng)頁(yè)分別為不同的屏幕分辨率定義不同的布局，同時(shí)在每個(gè)布局中，各元素大小采用百分比定義寬度，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配?？梢钥醋鍪嵌x了幾個(gè)不同尺寸的流式布局。
布局特點(diǎn)：基于柵格系統(tǒng)設(shè)計(jì)和開(kāi)發(fā)，通過(guò)監(jiān)測(cè)設(shè)備的分辨率來(lái)呈現(xiàn)不同的布局。Bootstrap（一個(gè)前端代碼庫(kù)）的響應(yīng)式設(shè)計(jì)中，預(yù)設(shè)了六個(gè)響應(yīng)尺寸：xs、sm、 md 、lg、 xl、 xxl， 當(dāng)屏幕分辨率較高時(shí)采用XL或者XXL的布局，當(dāng)屏幕過(guò)小時(shí)，采用XS的布局。
網(wǎng)站示例：Uplabs網(wǎng)站就是基于柵格系統(tǒng)進(jìn)行了響應(yīng)式布局，寬屏模式下展示更多內(nèi)容，包括上方的引導(dǎo)區(qū)和各種標(biāo)簽入口，當(dāng)在小屏上市就折疊部分內(nèi)容，同時(shí)作品縮略圖也實(shí)現(xiàn)了基于柵格進(jìn)行放大和縮小。
優(yōu)點(diǎn)：能夠適應(yīng)pc、pad和移動(dòng)端，在任何尺寸的屏幕上都能呈現(xiàn)完美的視覺(jué)效果
缺點(diǎn)：要匹配足夠多的屏幕大小，需要設(shè)計(jì)多個(gè)版本，設(shè)計(jì)和開(kāi)發(fā)工作量大
因?yàn)樽罱谧鲈O(shè)計(jì)規(guī)范，無(wú)意中發(fā)現(xiàn)shopify的設(shè)計(jì)規(guī)范的示例中設(shè)計(jì)了四種尺寸的設(shè)計(jì)稿：1440px、1024px、776px、320px，所以還是繁瑣的。（這么多版本，設(shè)計(jì)和開(kāi)發(fā)會(huì)吐血吧）
下面是響應(yīng)式布局的一些網(wǎng)站：Bootstrap（https://getbootstrap.com/）、Uplabs（https://www.uplabs.com/）、Ant Design（https://ant.design/components/grid-cn/）
彈性布局（em/rem layout）
彈性布局翻譯過(guò)來(lái)不是em/rem layout ，因?yàn)閺椥圆季植捎玫膯挝皇莈m或者rem，為了直觀，所以直接采用了單位縮寫(xiě)去區(qū)分。
em和rem是一個(gè)相對(duì)長(zhǎng)度單位，頁(yè)面內(nèi)各元素的尺寸采用em/rem做單位，em是相對(duì)其父元素大小，rem是始終相對(duì)于html大小，即頁(yè)面根元素。(有點(diǎn)看不懂是吧，沒(méi)關(guān)系，你只需要他是個(gè)相對(duì)長(zhǎng)度單位就行了）
布局特點(diǎn)：采用em或者rem為單位，頁(yè)面元素能夠根據(jù)屏幕分辨率進(jìn)行等比縮放，支持文字、間距類(lèi)等比縮放，國(guó)內(nèi)PC端網(wǎng)頁(yè)不咋用，在國(guó)外已經(jīng)很普遍，比較適用于移動(dòng)端H5的適配
MINX網(wǎng)站采用了em為單位，進(jìn)行了彈性布局，當(dāng)屏幕分辨率差別不是很大時(shí)，視覺(jué)效果還是不錯(cuò)的。
優(yōu)點(diǎn)：彈性適配不同的分辨率，視覺(jué)效果比較好，而且不用出多套設(shè)計(jì)稿，是不是很爽！
缺點(diǎn)：em以父節(jié)點(diǎn)font-size大小為參考點(diǎn)，進(jìn)行任何元素設(shè)置，都需要知道他父元素的大小，容易造成頁(yè)面排版混亂，rem支持的瀏覽器比較少。
還是上面的網(wǎng)站，當(dāng)頁(yè)面繼續(xù)縮小，會(huì)出現(xiàn)元素的疊加，所以em單位使用時(shí)不太好把控效果。
看了好多國(guó)外的網(wǎng)站，發(fā)現(xiàn)彈性布局還是很普遍的，彈性布局示例網(wǎng)站：https://minx-net.co.jp/
https://northstreetcreative.com/
Flex布局
個(gè)人理解的，felx布局主要是用來(lái)定義頁(yè)面內(nèi)某些元素相對(duì)于父級(jí)元素的對(duì)齊、排序、分布等排版方式，通過(guò)調(diào)整父級(jí)內(nèi)元素的寬高，從而在任何顯示設(shè)備上實(shí)現(xiàn)對(duì)可用顯示空間最佳填充的能力。
圖片來(lái)自ant design
我個(gè)人覺(jué)得flex布局比較適合模塊內(nèi)元素的布局，算不上整個(gè)頁(yè)面級(jí)別的布局。
優(yōu)點(diǎn)：能夠很好的契合移動(dòng)端，無(wú)需考慮分辨率問(wèn)題，移動(dòng)端flex布局占據(jù)主流
缺點(diǎn)：PC端網(wǎng)頁(yè)兼容性不好，ie瀏覽器必須是10.0版本以上；對(duì)設(shè)計(jì)稿要求很高，需要是有規(guī)律的設(shè)計(jì)稿，比如柵格系統(tǒng)；網(wǎng)頁(yè)內(nèi)容較多時(shí)，flex布局不太好控制。
我個(gè)人找到的知乎是用了Flex布局，但是他進(jìn)行了頁(yè)面定寬，所以很多效果看不出來(lái)
個(gè)人總結(jié)了下各種布局的關(guān)系
流動(dòng)布局可以看做是靜態(tài)布局的動(dòng)態(tài)版，響應(yīng)式布局可以看做是幾個(gè)不同尺寸的流動(dòng)布局，在每個(gè)流動(dòng)布局之間進(jìn)行自適應(yīng)。流動(dòng)布局、響應(yīng)式布局、彈性布局和flex布局都能實(shí)現(xiàn)自適應(yīng)的效果，只不過(guò)彈性布局是用em/rem為單位，流動(dòng)布局和響應(yīng)式布局是以百分比為單位，flex由于兼容性問(wèn)題，PC端不太常用。
各種布局不是絕對(duì)的，可以綜合使用，目的都是使頁(yè)面在不同分辨率的設(shè)備上實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)，針對(duì)不同性質(zhì)的網(wǎng)站采用合適的布局方式。
我這里將柵格設(shè)計(jì)放了進(jìn)來(lái)，但實(shí)際上，頁(yè)面布局可以基于柵格也可以不基于柵格，完全看設(shè)計(jì)師個(gè)人和實(shí)際工作場(chǎng)景了。
----------------------------------------------------------------------------
看完布局，你會(huì)發(fā)現(xiàn)，很多國(guó)內(nèi)常用的布局都和柵格有關(guān)，有些網(wǎng)頁(yè)設(shè)計(jì)師在做的時(shí)候也喜歡用柵格來(lái)規(guī)范自己的設(shè)計(jì)稿，所以我簡(jiǎn)單的梳理了一下柵格的小知識(shí)，希望對(duì)大家有用。
首先，柵格化設(shè)計(jì)（grid-design ）不等于柵格化開(kāi)發(fā)（css grid ）。我之前一直以為用柵格就要實(shí)現(xiàn)網(wǎng)頁(yè)的響應(yīng)式，由于我們是to b類(lèi)的網(wǎng)站，所以剛開(kāi)始很抵觸，總覺(jué)得沒(méi)法定寬設(shè)計(jì)某個(gè)模塊，后來(lái)查了些資料才發(fā)現(xiàn)，這是兩回事。
柵格化設(shè)計(jì)是針對(duì)設(shè)計(jì)師而言，主要是為了提高網(wǎng)頁(yè)的規(guī)范性和統(tǒng)一性，可以不考慮頁(yè)面的響應(yīng)式；而柵格化開(kāi)發(fā)，是針對(duì)開(kāi)發(fā)人員，特指前端攻城獅使用的css框架，用來(lái)實(shí)現(xiàn)頁(yè)面的響應(yīng)式布局。也就是你可以按照柵格去出設(shè)計(jì)稿，但不一定基于柵格開(kāi)發(fā)，基于柵格開(kāi)發(fā)意味著需要實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局。
那么柵格是什么，想必大家都很清楚，就是將網(wǎng)頁(yè)劃分為幾個(gè)等分欄。大概就長(zhǎng)下面這樣
柵格包括列寬（column）、間隔（gutter）和外邊框margin，gutter是左右均分，分別位于列寬的兩側(cè)，margin是位于整個(gè)網(wǎng)頁(yè)的兩側(cè)的空白區(qū)，由1/2的gutter和一個(gè)padding組成，一般來(lái)說(shuō)網(wǎng)頁(yè)的總寬度是不包含左右兩側(cè)的margin的。
柵格系統(tǒng)的適配
一般來(lái)說(shuō)，適配時(shí)，間距gutter寬度不變，只會(huì)改變列寬column，但是在material design中定義了多種寬度的gutter，當(dāng)寬屏?xí)r使用16或者24px的gutter，窄屏使用8px的gutter，所以可以根據(jù)實(shí)際情況自己定義是否改變gutter寬度。
柵格的類(lèi)型
我個(gè)人將柵格歸為了4類(lèi)：有間隔柵格、無(wú)間隔柵格、局部柵格、水平柵格。有間隔柵格最為常見(jiàn)，無(wú)間隔柵格也就是gutter為0，局部柵格一般適用于頁(yè)面內(nèi)有側(cè)邊欄固定的布局，側(cè)邊欄可以不算入柵格范圍，水平柵格是指垂直和水平都進(jìn)行柵格，感覺(jué)不太常用。
柵格常見(jiàn)分欄
12欄和24欄是最常見(jiàn)的，因?yàn)槟軌虮?、3、4、6整除，也就是頁(yè)面能夠均分為2、3、4、6等份，其次是16列比較常見(jiàn)。列數(shù)越多，排版布局越靈活，列數(shù)越少限制性越大，同時(shí)頁(yè)面的統(tǒng)一性更強(qiáng) ?？梢愿鶕?jù)網(wǎng)頁(yè)特點(diǎn)選擇合適的欄數(shù)，不必拘泥。
下圖是經(jīng)典的960柵格系統(tǒng)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn