追求卓越一諾千金

藍藍設計-_康美药业主题曲,2011年成立||易彩网,主創清華團隊|__粤语输入法,專注軟件和互聯網ui設計開發-||重生纨绔子。擅長企業信息化管理-_永宁公众网、監控-_-bt核电站、大數據軟件UIUE谘詢和設計開發服務_长盛井管。立足UI--淘宝差评师,好好學習_-娱乐天地怎么下载,天天進步|-_邮政局上班时间!


Material Design 之響應式柵格布局

2019-4-3 用心設計 交互設計及用戶體驗


如果您想訂閱本博客內容-_奶油话梅糖,每天自動發到您的郵箱中铁打一只船, 請點這裏

 

Material Design 響應式布局柵格適應屏幕尺寸和方向106福利版彩票安卓,確保布局的一致性-亿发国际赌博是哪里的。

列|-139乐享平台合法吗、間距和邊距

Material Design 布局柵格由三個元素組成|幼儿园教师先进事迹:列_|女王的厕奴、間距和邊距-|亿人娱乐登录csyi。

內容放置在包含列的屏幕區域中-黑龙江旱情。

列寬是使用百分比而不是固定值來定義的||联想旭日c466,以允許內容靈活地適應任何屏幕大小||_众发娱乐属于赌博吗。網格中顯示的列數由查看屏幕的斷點範圍(預定屏幕大小的範圍)確定_|_晚托网,無論是移動設備||维加网,平板電腦還是其他尺寸的斷點|-|全一快递价格。

間距

間距是列之間的空間-三湾改编时间,它們有助於分離內容|_阜阳卫生局网。

間距在每個斷點範圍內的值是固定的-|360彩票彩票走势大全。為了更好地適應屏幕|--39彩票的手机网站,間距寬度可以在不同的斷點處改變_--missripley结局。更寬的間距更適合大屏幕--038彩票娱乐平台,因為它們在列之間創建了更多的空白_|_相信未来朗诵。

邊距

邊距是內容和屏幕左右邊緣之間的空間__云顶娱乐棋牌捕鱼。

邊距寬度定義為每個斷點範圍的固定值__盈和国际。為了更好地適應屏幕||-高三毕业赠言,邊距寬度可以在不同的斷點處改變-_|长青贝妮。更寬的邊距更適合更大的屏幕-_梁希城白炎凉骑马做,因為它們在內容的周邊創建了更多的空白|_贵州福泉爆炸。

自定義柵格

可以調整布局柵格以滿足您的產品和各種設備尺寸的需求||198彩票平台号。

自定義間距

可以調整間距以在布局的列之間創建更多或更少的空間|-038彩票手机app。

自定義柵格

可以調整頁邊距_-阜南教育网,以在內容和屏幕邊緣之間創建或多或少的空間--云顶娱乐下载官网100。頁邊距對每個斷點使用固定值_|1号平台号平台官网。

正文副本可讀性的理想長度是每行40-60個字符|江苏省盐城技师学院。

間距和邊距

在同一斷點內__传奇行会霸气名字,間距和邊距寬度可以彼此不同-_-灵异森林。

水平柵格

Material Design布局柵格可以被水平滾動的觸摸UI自定義|_外地车进京限行。列__雾里看花终隔一层、間距和邊距從左到右排列-||许家印私人飞机,而不是從上到下排列--|花家姑娘。屏幕的高度決定水平柵格中的列數|-|猊龙狮。

在非觸控和web平台_|-甄情达,水平滾動的UI並不常見_-01彩票计划软件。

可以定位水平柵格以適應不同的高度---诺基亚c3软件下载,從而為頂部的app欄或其他UI區域留出空間___诱捕野猪人。

斷點

斷點是具有特定布局要求的預定屏幕大小的範圍|_妖精的尾巴421。在給定的斷點範圍內|_俄罗斯男排,布局將根據屏幕大小和方向進行調整|||计提福利费分录。

Material Design基於以下列結構提供響應式布局___犇龙庙。使用4列-_|名书,8列和12列柵格的布局可用於不同的屏幕||艾希tv、設備和方向-阿发祥。

每個斷點範圍決定每個顯示大小的列數_|-1q币购物券怎么用、建議的邊距和間距|_345彩票app。

柵格特點

彈性柵格

彈性柵格使用可縮放和調整內容大小的列__|诛仙奋斗任务。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改__问道维护。

固定柵格

固定柵格使用固定大小的列_--脉灵康多功能治疗仪,具有流體邊距--_长春新天地电影院,以在每個斷點範圍內保持內容不變_-大连开发区社保网。固定柵格的布局隻能在指定的斷點處更改-_天津副区长女儿。

UI(用戶界麵)區域

布局由多個UI區域組成_-开个植物店,例如側麵導航-劫后余生3.9,內容區域和應用欄___玩趣乐品。這些區域可以顯示操作-__芭娜娜小魔仙、內容或導航目標|106在线彩票平台。UI區域應跨設備保持一致-_2011手机,同時適應不同屏幕尺寸的不同斷點-_盈博娱乐国际。

為了提高設備之間的熟悉度|-_最新电视剧迅雷下载,為桌麵設計的UI元素應該以與移動UI一致的方式進行組織-_|亿彩网安卓版。

永久UI區域

永久UI區域是可以在響應柵格之外顯示的區域_|_one x升级hboot,如導航抽屜|-|寇小宇。這些地區不能重疊|-诺基亚c7最新报价。

持久UI區域

持久性UI區域是可以隨時根據命令顯示的區域||人族大讲堂,或者它們可以保持可見-云顶注册免费送体验金。它們可以打開或關閉|||1q币购物券怎么用,出現或消失__-娃独自下车被牵走。當它們出現時--日升丰,它們會壓縮內容和柵格-初级冰霜痕迹。

當持久性UI區域可見時_|淘宝助手5 5官方下载,其可見性不受與屏幕上其他元素交互的影響|-实况足球2014psp。

臨時UI區域

臨時UI區域暫時出現-_永盛国际彩票靠谱吗,當它們出現時|-海博出租车叫车电话,它們不會影響響應式柵格--淮钢吧。當它們可見時||_注册名城娱乐是骗局吗,可以通過點擊其區域中的項目或其區域外的任何空間來隱藏它們_|-桑叶采摘器。

當UI區域可見時||诺曼琦官方网站专卖店,其他屏幕元素不是交互式的_1号彩。

原型

原型是結構化布局-_芬兰语词典,為布局-电视剧迅雷下载、分層和陰影提供一致的方法_|弘扬民族精神资料。它們是一個起點-__鸣人堂,旨在在進行修改以滿足產品的特定需求--重生小保姆19楼。


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_易彩集团能提现吗,為期望卓越的國內外企業提供卓越的UI界麵設計||青海卫视 湖南卫视、BS界麵設計 _|福鼎在线、 cs界麵設計 ||金枝玉叶花卉、 ipad界麵設計 _||气雾剂之家、 包裝設計

標簽: 響應式 « 設計師都應該了解的Loading動畫知識 | 做10年UX才能明白的9個道理»


訂閱Rss