文章簡要分享了移動端響應式UI的7種布局，希望能夠對你的從產品工作帶來一些借鑒。

為什么要說響應式 UI，它能夠使我們設計的元素在任何大小屏幕尺寸能夠靈活適配，保證布局和體驗的一致性。

毫無疑問，響應 UI 設計對于現今碎片化的屏幕是非常重要的，它能使我們在最小的資源的情況下完成設計適配，它的工作原理通過斷點系統來判斷讀取布局方式，斷點其實就是媒體查詢值。

比如我們平時做的 Phone 和 Pad 的適配就是通過設定斷點來讓程序讀取對應的布局（斷點設定可以根據屏幕分辨率或者屏幕尺寸），今天就和大家聊聊一些常用的響應式 UI 模式

常用的布局模式

1. 流線布局
2. 等比縮放
3. 拓展布局
4. 分欄布局
5. 流動布局
6. 重復布局
7. 固定布局

流線布局

流線布局 指在界面中的內容元素控件在屏幕顯示區域內進行相對拉伸，以達到布局完整的目的，比如 Pad&Phone 橫豎屏切換

下面截圖的3個產品都是屬于流線布局，這種布局一般開發比較簡單，成本低，下面青芒閱讀的布局相對不錯，在 PAD 豎屏左右邊距留白是單獨設定規則的，橫屏情況下面左右各空出2個網格（界面分為12網格），這樣橫屏內容顯示不會過長

等比縮放

等比縮放

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

拓展布局

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

分欄布局

分欄布局定義 界面布局結構發生改變，當然這種布局一般比較復雜，開發需要重構 UI 框架，一般在橫屏及超大 PAD 上面會使用這樣的布局

流動布局

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

重復布局

固定布局

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

總結

上面七大布局大家看完后應該有所了解了，如果要完全掌握理解透徹還需要跟著項目走上幾遍，一般在一個APP里面并不是只使用單一的一種布局，而是多種布局混合起來使用，比如流線布局、分屏、等比縮放混合使用，這樣能達到布局靈活適配各種設備，當然需要前期定義一套適配方案，本期只是作為一個介紹階段，以后看心情在細講每一種布局實現方案中如何去寫適配方案

作者：Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文由 @TONY 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議