移動端響應式UI的7種布局，希望能夠對你(nǐ)的從産品工作(zuò)帶來(lái)一些(xiē)借鑒。

　　

 

　　為(wèi)什麽要說響應式 UI，它能夠使我們設計(jì)的元素在任何大(dà)小(xiǎo)屏幕尺寸能夠靈活适配，保證布局和(hé)體(tǐ)驗的一緻性。

　　毫無疑問，響應 UI 設計(jì)對于現今碎片化的屏幕是非常重要的，它能使我們在最小(xiǎo)的資源的情況下完成設計(jì)适配，它的工作(zuò)原理(lǐ)通(tōng)過斷點系統來(lái)判斷讀取布局方式，斷點其實就是媒體(tǐ)查詢值。

　　比如我們平時(shí)做(zuò)的 Phone 和(hé) Pad 的适配就是通(tōng)過設定斷點來(lái)讓程序讀取對應的布局(斷點設定可(kě)以根據屏幕分辨率或者屏幕尺寸)，今天就和(hé)大(dà)家(jiā)聊聊一些(xiē)常用的響應式 UI 模式

　　常用的布局模式

　　流線布局

　　等比縮放

　　拓展布局

　　分欄布局

　　流動布局

　　重複布局

　　固定布局

　　流線布局

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

　　下面截圖的3個(gè)産品都是屬于流線布局，這種布局一般開(kāi)發比較簡單，成本低(dī)，下面青芒閱讀的布局相對不錯，在 PAD 豎屏左右邊距留白是單獨設定規則的，橫屏情況下面左右各空(kōng)出2個(gè)網格(界面分為(wèi)12網格)，這樣橫屏內(nèi)容顯示不會(huì)過長

　　

 

　　

 

　　

 

　　等比縮放

　　等比縮放

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

　　

 

　　

 

　　

 

　　拓展布局

　　拓展布局定義 在屏幕可(kě)顯示區(qū)域類元素增加或者減少(shǎo)，常用于應用商店(diàn)、音(yīn)樂、視(shì)頻、電(diàn)商等帶有(yǒu)宮格布局等場(chǎng)景

　　

 

　　

 

　　

 

　　

 

　　分欄布局

　　分欄布局定義 界面布局結構發生(shēng)改變，當然這種布局一般比較複雜，開(kāi)發需要重構 UI 框架，一般在橫屏及超大(dà) PAD 上(shàng)面會(huì)使用這樣的布局

　　

 

　　

 

　　

 

　　

備方向在組件內(nèi)進行(xíng)流動型布局,界面元素是可(kě)以位置發生(shēng)改變的，這種布局開(kāi)發成本高(gāo)，适配有(yǒu)一定難度，但(dàn)是效果還(hái)是不錯的

 

　　

 

　　

 

　　

 

　　重複布局

　　

 

　　

 

　　固定布局

　　固定布局定義 界面元素在橫豎屏下面，固定使用同一種布局，做(zuò)法是直接通(tōng)過豎屏定義規則來(lái)适配橫屏，開(kāi)發成本低(dī)，效率高(gāo)

　　

 

　　

 

　　

 

　　

 

　　

 

　　總結

　　上(shàng)面七大(dà)布局大(dà)家(jiā)看完後應該有(yǒu)所了解了，如果要完全掌握理(lǐ)解透徹還(hái)需要跟着項目走上(shàng)幾遍，一般在一個(gè)APP裏面并不是隻使用單一的一種布局，而是多(duō)種布局混合起來(lái)使用，比如流線布局、分屏、等比縮放混合使用，這樣能達到布局靈活适配各種設備，當然需要前期定義一套适配方案，本期隻是作(zuò)為(wèi)一個(gè)介紹階段，以後看心情在細講每一種布局實現方案中如何去寫适配方案