Material Design的Responsive-UI 響應式/自適應布局 筆記（下）

接上Material Design的Responsive-UI 響應式/自適應布局 筆記（上）

三、Surface behaviors（窗口行為）

原文是用表格展示了Behavior和對應的Definition，如下圖：

為了看的更清楚一些，我把他轉化成小標題+描述的形式，如下圖：

————————————————————————

當一個屏幕大小的變化，UI適應下面的特性。

1、Visibility（能見度）

Permanent（永久可見）

When screen space is available, a surface is always visible.（當屏幕空間可用，窗口面板總是可見的。）

Persistent（持續可見）

Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen does not change visibility.（窗口的可見性可以通過切換隱藏或顯示。在屏幕上可見時,與其他元素交互不會改變可見性。）

Temporary（臨時可見）

Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen toggles the surface to become hidden or minimized.（窗口的可見性可以通過切換隱藏或顯示。在屏幕上可見時,與其他元素交互會將面板隱藏或最小化。）

2、Width（寬度）

Fixed（固定的）

Element width stays the same when screen size changes.（當屏幕尺寸變化元素寬度保持不變。）

Fluid（不固定的）

Element width grows as screen size changes.（元素的寬度隨著屏幕大小的變化。）

Sticky（粘性的）

Element width is fixed until influenced by another element or breakpoint.（在被另一個元素或斷點影響前元素寬度是固定的。）

Squeeze（擠壓性的）

Element width contracts as a panel is revealed.（面板出現時元素寬度按規定去顯示。）

Push（推）

Element width stays the same, its position changes horizontally as a panel appears, and it may be partially occluded by a screen』s edge.（元素寬度保持不變,窗口面板的出現會改變其位置,可能某些部分被推出屏幕外。）

Overlay（覆蓋）

Element width and position stays the same as a panel appears over content.（窗口覆蓋在內容上時元素的寬度和位置保持不變。）

3、Descriptors（描述性）

Above, Below（以上，以下）

The y position of an element.（元素的Y位置。）

Over, Under（超過，下）

The z position of an element in motion.（運動中的元素的Z位置。）

In Front, Behind（在前，在後）

The static z position of an element.（元素的靜態Z位置。）

Left, Right, Centered（左，右，中心）

The x position of an element.（元素的X位置）

Top, Bottom（頂、底）

The y position of an element and its position relative to a screen edge.（元素的y位置及其相對於屏幕邊緣的位置。）

Flat, Raised（平，提升）

The z position, and shadow of an element. A flat element will have no shadow.（元素的z位置和陰影。平面元素沒有陰影。）

Inset, Full Bleed（插入，全出血）

The padding of an image or element.（圖像或元素的填充邊距。）

Summary, Detail（總結，詳細）

A content summary, and the full expansion of the summary（一個內容的摘要，一個摘要的詳情描述。）

四、Patterns（模式）

屏幕空間增大時，會有以下的反饋：

（一）Reveal（展現）

在較小屏幕上隱藏的內容可以在較大屏幕上展示出來。

Elements, such as a side nav, may become visible.（例如側邊導航會成為可見的。）

A simple UI may reveal more powerful or complex options.（一個簡單的UI可能會顯示更強大或複雜的選項。）

Content on a small screen that only appears after tapping an element may be revealed by default when more space is available.（當有更多的可用空間時，會展示出更多原本未在小空間的顯示出來的內容。）

（二）Transform（轉換）

UI可以從一種形式轉化成另一種形式。

Side navigation may transform into tabs.（側導航可以轉換成標籤。）

A list may transform into a grid list.（一個列表可以轉換成一個網格列表。）

Menu items may transform into icons in a toolbar.（菜單項可以在工具欄中轉換為圖標.。）

（三）Divide（分隔）

界面的UI元素會被分配到新的界面。

Side navigation, list content, and detailed content divide to fill a single view.（側邊欄、列表及詳情會被分配去填充整個視圖。）

A left panel, list content, and a right panel divide within a single view as space increases.（空間增加時，隱藏的左側面板、列表及隱藏的右側面板將在一個界面中展示出來。）

Tabbed sibling content is divided within the same view.（一臉懵比，最後這個例子我沒看懂，所以不知道怎麼翻譯...）

（四）Reflow（重構）

UI可以在可用空間里重構。

Elements from a single-column format may reflow to fill the content area in various combinations.（元素可以通過重構以各種組合形式從單列到鋪滿整個內容區域。）

Horizontal tabs may reflow into a vertical list.（橫向的標籤選項可以重構成縱向的列表。）

Elements may reflow within a component based on a new screen ratio or device orientation.（在新的頁面比例或者設備方向上元素會進行重構。）

（五）Expand（擴展）

UI可以在更大的空間上擴展。

Content cards may expand to fill the new space.（內容區域可以鋪開去佔據新空間。）

Dialogs may expand proportionally with content or in specific increments.（這個不知道怎麼翻...）

（六）Position（方向）

UI組件會隨著變化換到更合適位置。

A bottom sheet on a small screen may reposition itself as a menu.（小屏幕上的底部彈窗選項會隨被重新定位到菜單選項。）

A floating action button (FAB) may move to a more visible location relative to other UI elements.（懸浮按鈕會移動到相對於其它UI元素更顯眼的位置。）

我英文真的不好，只是為了個人理解，如果可以直接去讀原文吧（微笑臉）再附上原文鏈接，Responsive UI - Layout - Material design guidelines

歡迎關注專欄「一枚設計」 知乎專欄

咩~~

————————————————以上

推薦閱讀：