起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何創建精致的UI界面（五）：響應式布局篇
五篇系列目前已經到最后一篇啦！今天我們一起看下響應式UI，相對前面4部分，最后這個部分會略難一些，不過看完今天看這篇文章，應該沒想象的那么難了。這篇文章以前有大致寫過，今天這版本我已經優化補充了。
如今屏幕復雜，多廠商設備尺寸不統一，自Phone X問世后，國內手機廠商的各種安卓X也出來了。
各種尺寸平板等，設計適配難度上升，公司層，產品側要求多端體驗一致，作為設計師的我們更加有責任去了解如何去做多端統一體驗，提高設計效率
為什么要學習響應式布局
首先它能夠使界面元素在任何大小屏幕尺寸能夠靈活適配，保證功能布局和體驗的一致性。
毫無疑問, 響應式布局設計對于現今安卓和IOS端碎片化屏幕是非常重要的，它能使我們在最小的資源的情況下完成設計適配，它的工作原理通過斷點系統來判斷讀取布局方式。
斷點其實就是媒體查詢值，比如我們平時做的 Phone 和 Pad 的適配，又或者其他終端適配，就是通過設定斷點來讓程序讀取對應的布局（斷點設定可以根據屏幕分辨率或者屏幕尺寸）
響應式布局的運用范圍
響應式布局不只是在Web端用得比較多，當然他也在其他終端也運用比較多，如電腦，pad ，手機，以及車機系統（某些需要考慮全局一致的項目上）；
為什么響應式布局在今天運用依然是很重要的，因為目前使用的系統被2大廠商分離割據，微軟移動領域的占比很少，暫不提，蘋果一家自成一派，安卓系統占比市場很大，包括國內外很多廠商的定制化系統+自己出硬件設備，尺寸不一，這就導致如今碎片化屏幕。
我們作為軟件服務提供商，當然希望一套設計能在多端使用，節省成本，同時保持一致的體驗。因此響應式布局就這樣一直很重要。
常用的布局模式
1. 流線布局
流線布局：指在界面中的內容元素控件在屏幕顯示區域內進行相對拉伸，以達到布局完整的目的，比如上面Pad應用橫豎屏切換
2. 等比縮放
等比縮放：定義是指在界面中元素在相對位置進行等比縮放，從而達到解決橫豎屏顯示相對較好的UI界面,這種布局不會對界面造成布局重構影響，開發成本低，適配簡單，一般使用于音樂、視頻、電商、雜志期刊App等領域帶有圖片宮格布局，界面等比放大后這種大圖顯示效果比較有視覺沖擊力前提是需要足夠高清的資源支撐
youtube的截圖
3. 拓展布局
拓展布局定義：在屏幕可顯示區域類元素增加或者減少，常用于應用商店、音樂、視頻、電商等帶有宮格布局等場景。
如上面youtube的截圖就是布局最好示例。
4. 分欄布局
分欄布局定義：界面布局結構發生改變，當然這種布局一般比較復雜，開發需要重構 UI 框架，一般在橫屏及超大屏幕上面會使用這樣的布局，比如超大寸PAD，智能電視，車機系統。
5. 流動布局
流動布局定義 ： 界面元素可以根據新的屏幕比例或設備方向在組件內進行流動型布局,界面元素是可以位置發生改變的，這種布局開發成本高，適配有一定難度，但是效果還是不錯的。
6. 重復布局
重復布局定義：界面元素在橫屏下有限空間內進行多列重復布局,一般最多3列，這種布局可以展示更多的資源，開發成本也有點高，因為布局發生變化。
蘋果商店布局思路也是如此。
7. 固定布局
固定布局定義：界面元素在橫豎屏下面，固定使用同一種布局，做法是直接通過豎屏定義規則來適配橫屏，開發成本低，效率高
注意觀察上圖的播放器界面的元素圖標位置的布局是否發生變化。
8. 大屏露出布局
大屏露出布局：左側由于屏幕小，所以通過漢堡菜單把導航內容隱藏起來，右側在橫屏上面，顯示內容多，可以利用屏幕空間，把導航內容展開顯示。
總結
如果想要適配成本低，那么布局最好不要發生結構上大改變，比如相對布局，流線布局等等這種布局一般適配成本低，但是效果其實在某些UI布局不適用。
那么上面8大布局大家看完后應該有所了解，如果要完全掌握理解透徹還需要跟著項目走上幾遍。
一般在一個終端軟件設計時候，并不是只使用單一的一種布局，而是多種布局混合起來使用，比如流線布局、分屏、等比縮放混合使用，這樣能達到布局靈活適配各種設備，當然需要前期定義一套適配方案。
本期只是作為一個介紹階段，如想了解更多，可以找我交流或者歡迎留言。
#相關閱讀#
#專欄作家#
Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
問題來了……那設計師該如何規定“尺寸”—上下左右的位置