超全面!移動端響應式的7種UI布局解析

Tony(作者):響應式 UI能夠使我們設計的元素在任何大小屏幕尺寸能夠靈活適配,保證布局和體驗的一致性。

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

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

常用的布局模式

  • 流線布局

  • 等比縮放

  • 拓展布局

  • 分欄布局

  • 流動布局

  • 重複布局

  • 固定布局

流線布局

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

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

等比縮放

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

拓展布局

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

分欄布局

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

流動布局

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

重複布局

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

固定布局

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

總結

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

超全面!移動端響應式的7種UI布局解析

超全面!移動端響應式的7種UI布局解析

發表迴響