132-8888-7891
移動端響應式的7種UI布局解析
 2018-02-02 14:10 微力互聯小編
響應式UI能夠使我們設計的元素在任何大小屏幕尺寸能夠靈活適配,保證布局和體驗的一致性。
 
毫無疑問,響應 UI 設計對于現今碎片化的屏幕是非常重要的,它能使我們在最小的資源的情況下完成設計適配,它的工作原理通過斷點系統來判斷讀取布局方式,斷點其實就是媒體查詢值。
 
比如我們平時做的 Phone 和 Pad 的適配就是通過設定斷點來讓程序讀取對應的布局(斷點設定可以根據屏幕分辨率或者屏幕尺寸),今天就和大家聊聊一些常用的響應式 UI 模式
 
常用的布局模式
 
流線布局
 
等比縮放
 
拓展布局
 
分欄布局
 
流動布局
 
重復布局
 
固定布局
 
流線布局
 
流線布局 指在界面中的內容元素控件在屏幕顯示區域內進行相對拉伸,以達到布局完整的目的,比如 Pad&Phone 橫豎屏切換。
 
下面截圖的 3 個產品都是屬于流線布局,這種布局一般開發比較簡單,成本低,下面青芒閱讀的布局相對不錯,在 PAD 豎屏左右邊距留白是單獨設定規則的,橫屏情況下面左右各空出 2 個網格(界面分為 12 網格),這樣橫屏內容顯示不會過長。
 

    20170906093100803003.png

00000.jpg

 

等比縮放

 

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

 20170906093059258601.jpg

 

拓展布局

 

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

    20170906093100085402.png

  

分欄布局

 

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

 20170906093100803003.png

000001png.png

 

流動布局

20170906093101910604.png

 

  

固定布局

 

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

201709060931020666004.png

本文鏈接:http://www.ofskdb.live/xinwenzhongxin/590.html

  
官網網址:http://www.ofskdb.live  
微力互聯專注于東莞網站建設,東莞網站制作,東莞網站優化,東莞網站推廣,是東莞網站建設公司網絡營銷行業中知名品牌,能快速幫助公司解決網絡營銷難題,選擇我們!選擇成功!
更多
 
 
請聯系我們
東莞南城科技園北區
132-8888-7891
132-8888-7891
132-6852-2264
早8:30~晚18:00
 
東莞網站建設,微力互聯騰訊微博 東莞網站制作,微力互聯新浪微博
東莞網站建設,東莞網站制作,網站制作,東莞高端網站建設,東莞網站設計
Copyright © 2008-2017 東莞微力互聯科技有限公司 (Gong Guan WLHL internet Technology Co.,Ltd.) All Rights Reserved 
 
3d试机号绕胆图 梦幻西游种四级种子赚钱吗 开网店卖茶叶赚钱吗 小目标打卡赚钱会赔吗 海口滴滴哪个时间段好赚钱 mcy怎么赚钱 户外拓展公司赚钱 新媒体运营赚钱么 有银子如何赚钱 建社区食堂赚钱吗 艺龙拉新赚钱 最可靠的聊污赚钱软件 梦幻西游五庄如何赚钱 可以赚钱的h5网站 天龙八部手游怎么样能赚钱 安图恩赚钱吗 孙悟空照相赚钱吗