這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

目錄

定位術語
組件寬度
響應式模式

以下指南描述了組件在網格和斷點之間的行為方式。

 

定位術語

UI元素在每個斷點范圍內以不同的方式運行。

描述

可以使用以下術語描述網格中UI元素,組件和界面的位置:

表格內容標注:

描述 定義
上方,下方 一個元素的y軸位置
前方,后方
?一個元素的z軸位置
左,右,居中 一個元素的x軸位置
頂部,底部 某元素相對于容器或者屏幕邊緣的y軸位置
垂直居中
某元素的x和y軸上位置都位于容器或屏幕的中心
粘性定位 跟隨UI滾動并鎖定在滾動位置上的某個點
浮動 固定在滾動內容前面的元素位置

 

組件寬度

組件寬度可以在多個屏幕尺寸中保持不變,或者可以根據布局而改變。 組件寬度可以是:

  1. 固定的
  2. 流式的

 

由于固定寬度元素在布局改變期間保持其寬度,因此它們的位置可以更改以適應新布局。 他們的位置可以是:

  1. 推出的
  2. 覆蓋的

 

固定的

當元素是固定寬度時,即使屏幕尺寸改變,元素的寬度也保持不變。

此按鈕組件保持固定在右邊距。

 

流式的

當元素是流式寬度時,其寬度隨著屏幕尺寸的變化而擴展和收縮。

??
此按鈕在右側兩列內流式縮放。

 

如果容器太窄而不能以較小的寬度顯示元素和填充,請不要在流式組件上使用容器。

??


當流式組件跨越寬屏幕中的多個列時要小心。 某些組件(如按鈕)可能會在較大的屏幕寬度上顯得過分強調。

推出的
當布局和屏幕尺寸發生變化時,可以從原始位置推動組件。 組件寬度保持不變,但其水平位置變化,向左或向右移動。 當發生這種情況時,如果被推離屏幕,它可能會被屏幕邊緣部分遮擋。
??
導航抽屜將內容區域推離屏幕。

 

覆蓋的

當UI改變時,組件可以被其他元素覆蓋而被遮擋。 當組件覆蓋時,其寬度和位置保持不變。
??
內容UI區域被導航UI區域覆蓋。

 

響應式模式

組件可以根據屏幕尺寸和設備類型調整其尺寸,使用以下模式。 這些尺寸調整可包括:

  1. 使用不同組件以更好地適應空間
  2. 改變組件的可見性以適應更小的空間
  3. 改變輸入的方法
    隨著屏幕空間增加,可以應用以上響應式模式。

 

出現
當在特定的斷點處有額外的空間可用時,因較小屏幕而隱藏的部分UI部分可能會出現
??
當屏幕尺寸增加時,諸如側面導航欄之類的元素可能會變得可見。

??
一個簡單的UI可能會出現更多強大或復雜的選項。

??
在小屏幕上,只有點擊某個元素才會出現的內容,當屏幕上有更多可用空間時,可能會默認顯示。

 

變形
一個組件可以在特定的斷點處從一種格式轉換為另一種格式。
??
側面導航欄可能變形為更大屏幕上的tab選項卡。

??
列表可能變形為更大屏幕上的圖像列表。

??
菜單項可能變形為更大屏幕上工具欄中的圖標。

 

分隔
當更多屏幕空間可見時,多個層級內容的用戶界面可以顯示所有的層級內容。 UI元素被劃分到這些新的可用空間中。

??
側面導航,列表內容和詳細內容在更大的視圖中被分隔開了。

??
tab選項卡的同級內容在較大屏幕上的同一視圖中被分隔排列。

 

重排
UI可以改變其布局并重排到新的可用空間中。
??
單列格式的元素可以重新排列在更大的屏幕上,形成多種組合來填滿內容區域。
??


水平tab選項卡可以在較大的屏幕上重排為垂直列表。

??
元素可以基于新的屏幕比例或設備方向在組件內重排。

 

擴展
UI可能擴展成更大的空間。
??
卡片可以擴展來填充新的和更大的空間。
??


對話框可以根據內容或特定的增量按比例擴展。

 

位移

UI組件可能會移動到更合適的位置。
??
小屏幕上的底部卡片可能重新定位為較大屏幕上的菜單。

??
浮動操作按鈕(FAB)可以移動到在更大屏幕上的相對于其他UI元素的更可見的位置。

 

原文地址:Material Design

譯者:糖糖

 

轉載請注明:學UI網 » Material Design Component behavior 組件的適配

登錄收藏
 
你可能喜歡的:
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
設計驅動案例-如何優化金融產品購買體驗?設計驅動案例-如何優化金融產品購買體驗?
Material Design Gestures 手勢Material Design Gestures 手勢
設計沉思錄丨如何利用場景化設計提升用戶決策效率設計沉思錄丨如何利用場景化設計提升用戶決策效率
用灰色文本字段來拯救你的注冊表單設計用灰色文本字段來拯救你的注冊表單設計
1套流程,帶你看遍1000萬個產品設計的從0到11套流程,帶你看遍1000萬個產品設計的從0到1
?
类似钱咖的高额赚钱 捕鱼来了cdkey在哪领取 二分彩开奖公告查询 股票长线和短线的区 快速赛车规律 体彩6 1预测推荐 网络赚钱 博彩通百乐坊 白小姐精选四肖中特 二人麻将怎么玩 足球直播