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

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

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

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

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

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

斷點(diǎn)其實(shí)就是媒體查詢值，比如我們平時做的 Phone 和 Pad 的適配，又或者其他終端適配，就是通過設(shè)定斷點(diǎn)來讓程序讀取對應(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ù)，微軟移動領(lǐng)域的占比很少，暫不提，蘋果一家自成一派，安卓系統(tǒng)占比市場很大，包括國內(nèi)外很多廠商的定制化系統(tǒng)+自己出硬件設(shè)備，尺寸不一，這就導(dǎo)致如今碎片化屏幕。

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

常用的布局模式

1. 流線布局

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

2. 等比縮放

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

youtube的截圖

3. 拓展布局

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

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

4. 分欄布局

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

5. 流動布局

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

6. 重復(fù)布局

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

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

7. 固定布局

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

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

8. 大屏露出布局

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

總結(jié)

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

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

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

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

#相關(guān)閱讀#

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

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

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

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

#專欄作家#

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

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

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