五篇系列目前已經(jīng)到最后一篇啦！今天我們一起看下響應(yīng)式UI，相對(duì)前面4部分，最后這個(gè)部分會(huì)略難一些，不過(guò)看完今天看這篇文章，應(yīng)該沒(méi)想象的那么難了。這篇文章以前有大致寫過(guò)，今天這版本我已經(jīng)優(yōu)化補(bǔ)充了。

如今屏幕復(fù)雜，多廠商設(shè)備尺寸不統(tǒng)一，自Phone X問(wèn)世后，國(guó)內(nèi)手機(jī)廠商的各種安卓X也出來(lái)了。

各種尺寸平板等，設(shè)計(jì)適配難度上升，公司層，產(chǎn)品側(cè)要求多端體驗(yàn)一致，作為設(shè)計(jì)師的我們更加有責(zé)任去了解如何去做多端統(tǒng)一體驗(yàn)，提高設(shè)計(jì)效率

為什么要學(xué)習(xí)響應(yīng)式布局

首先它能夠使界面元素在任何大小屏幕尺寸能夠靈活適配，保證功能布局和體驗(yàn)的一致性。

毫無(wú)疑問(wèn), 響應(yīng)式布局設(shè)計(jì)對(duì)于現(xiàn)今安卓和IOS端碎片化屏幕是非常重要的，它能使我們?cè)谧钚〉馁Y源的情況下完成設(shè)計(jì)適配，它的工作原理通過(guò)斷點(diǎn)系統(tǒng)來(lái)判斷讀取布局方式。

斷點(diǎn)其實(shí)就是媒體查詢值，比如我們平時(shí)做的 Phone 和 Pad 的適配，又或者其他終端適配，就是通過(guò)設(shè)定斷點(diǎn)來(lái)讓程序讀取對(duì)應(yīng)的布局（斷點(diǎn)設(shè)定可以根據(jù)屏幕分辨率或者屏幕尺寸）

響應(yīng)式布局的運(yùn)用范圍

響應(yīng)式布局不只是在Web端用得比較多，當(dāng)然他也在其他終端也運(yùn)用比較多，如電腦，pad ，手機(jī)，以及車機(jī)系統(tǒng)（某些需要考慮全局一致的項(xiàng)目上）；

為什么響應(yīng)式布局在今天運(yùn)用依然是很重要的，因?yàn)槟壳笆褂玫南到y(tǒng)被2大廠商分離割據(jù)，微軟移動(dòng)領(lǐng)域的占比很少，暫不提，蘋果一家自成一派，安卓系統(tǒng)占比市場(chǎng)很大，包括國(guó)內(nèi)外很多廠商的定制化系統(tǒng)+自己出硬件設(shè)備，尺寸不一，這就導(dǎo)致如今碎片化屏幕。

我們作為軟件服務(wù)提供商，當(dāng)然希望一套設(shè)計(jì)能在多端使用，節(jié)省成本，同時(shí)保持一致的體驗(yàn)。因此響應(yīng)式布局就這樣一直很重要。

常用的布局模式

1. 流線布局

流線布局：指在界面中的內(nèi)容元素控件在屏幕顯示區(qū)域內(nèi)進(jìn)行相對(duì)拉伸，以達(dá)到布局完整的目的，比如上面Pad應(yīng)用橫豎屏切換

2. 等比縮放

等比縮放：定義是指在界面中元素在相對(duì)位置進(jìn)行等比縮放，從而達(dá)到解決橫豎屏顯示相對(duì)較好的UI界面,這種布局不會(huì)對(duì)界面造成布局重構(gòu)影響，開發(fā)成本低，適配簡(jiǎn)單，一般使用于音樂(lè)、視頻、電商、雜志期刊App等領(lǐng)域帶有圖片宮格布局，界面等比放大后這種大圖顯示效果比較有視覺(jué)沖擊力前提是需要足夠高清的資源支撐

youtube的截圖

3. 拓展布局

拓展布局定義：在屏幕可顯示區(qū)域類元素增加或者減少，常用于應(yīng)用商店、音樂(lè)、視頻、電商等帶有宮格布局等場(chǎng)景。

如上面youtube的截圖就是布局最好示例。

4. 分欄布局

分欄布局定義：界面布局結(jié)構(gòu)發(fā)生改變，當(dāng)然這種布局一般比較復(fù)雜，開發(fā)需要重構(gòu) UI 框架，一般在橫屏及超大屏幕上面會(huì)使用這樣的布局，比如超大寸PAD，智能電視，車機(jī)系統(tǒng)。

5. 流動(dòng)布局

流動(dòng)布局定義 ： 界面元素可以根據(jù)新的屏幕比例或設(shè)備方向在組件內(nèi)進(jìn)行流動(dòng)型布局,界面元素是可以位置發(fā)生改變的，這種布局開發(fā)成本高，適配有一定難度，但是效果還是不錯(cuò)的。

6. 重復(fù)布局

重復(fù)布局定義：界面元素在橫屏下有限空間內(nèi)進(jìn)行多列重復(fù)布局,一般最多3列，這種布局可以展示更多的資源，開發(fā)成本也有點(diǎn)高，因?yàn)椴季职l(fā)生變化。

蘋果商店布局思路也是如此。

7. 固定布局

固定布局定義：界面元素在橫豎屏下面，固定使用同一種布局，做法是直接通過(guò)豎屏定義規(guī)則來(lái)適配橫屏，開發(fā)成本低，效率高

注意觀察上圖的播放器界面的元素圖標(biāo)位置的布局是否發(fā)生變化。

8. 大屏露出布局

大屏露出布局：左側(cè)由于屏幕小，所以通過(guò)漢堡菜單把導(dǎo)航內(nèi)容隱藏起來(lái)，右側(cè)在橫屏上面，顯示內(nèi)容多，可以利用屏幕空間，把導(dǎo)航內(nèi)容展開顯示。

總結(jié)

如果想要適配成本低，那么布局最好不要發(fā)生結(jié)構(gòu)上大改變，比如相對(duì)布局，流線布局等等這種布局一般適配成本低，但是效果其實(shí)在某些UI布局不適用。

那么上面8大布局大家看完后應(yīng)該有所了解，如果要完全掌握理解透徹還需要跟著項(xiàng)目走上幾遍。

一般在一個(gè)終端軟件設(shè)計(jì)時(shí)候，并不是只使用單一的一種布局，而是多種布局混合起來(lái)使用，比如流線布局、分屏、等比縮放混合使用，這樣能達(dá)到布局靈活適配各種設(shè)備，當(dāng)然需要前期定義一套適配方案。

本期只是作為一個(gè)介紹階段，如想了解更多，可以找我交流或者歡迎留言。

#相關(guān)閱讀#

《如何創(chuàng)建精致的UI界面（一）：排版篇》

《如何創(chuàng)建精致的UI界面（二）：圖形篇》

《如何創(chuàng)建精致的UI界面（三）：布局篇》

《如何創(chuàng)建精致的UI界面（四）：圖像篇》

#專欄作家#

Tony，微信公眾號(hào)：洞見設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議