├── .gitignore
├── .editorconfig
├── src
    ├── guidelines-overview
    │   └── index.md
    ├── foundation-overview
    │   └── index.md
    ├── index.md
    ├── platform-guidance
    │   ├── android-text-selection-toolbar.md
    │   ├── android-bars.md
    │   ├── android-navigating-between-apps.md
    │   ├── android-haptics.md
    │   ├── android-split-screen.md
    │   ├── android-widget.md
    │   ├── android-icons.md
    │   ├── cross-platform-adaptation.md
    │   ├── android-permissions.md
    │   └── android-swipe-to-refresh.md
    ├── shape
    │   ├── shape-hierarchy.md
    │   ├── about-shape.md
    │   └── shape-as-expression.md
    ├── communication
    │   ├── offline-states.md
    │   ├── gesture-education.md
    │   ├── empty-states.md
    │   ├── launch-screen.md
    │   ├── confirmation-acknowledgement.md
    │   └── help-feedback.md
    ├── navigation
    │   ├── search.md
    │   └── navigation-transitions.md
    ├── interaction
    │   └── selection.md
    ├── introduction
    │   └── index.md
    ├── environment
    │   └── light-shadows.md
    ├── iconography
    │   └── animated-icons.md
    ├── layout
    │   ├── understanding-layout.md
    │   ├── density.md
    │   └── component-behavior.md
    ├── components
    │   ├── tooltips.md
    │   └── dividers.md
    ├── material-theming
    │   └── overview.md
    ├── color
    │   └── text-legibility.md
    └── typography
    │   └── the-type-system.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .vscode/
3 | /assets
4 | /build/vendor
5 | /dist
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.html]
12 | indent_size = 2
13 | 


--------------------------------------------------------------------------------
/src/guidelines-overview/index.md:
--------------------------------------------------------------------------------
 1 | <div class="article__intro">
 2 | 
 3 | [en]: <> (Guidelines)
 4 | # 指南
 5 | 
 6 | [en]: <> (Create custom Material Themes to make your product unique. Implement your design vision with Material Theming, which simplifies the process of customizing your product and using components, which are the building blocks that make a product usable and functional.)
 7 | 译文
 8 | 
 9 | </div><div class="article__body">
10 | 
11 | [en]: <> (Usability and platform guidance describe how to make sure your app is usable for all users. Platform guidance helps you make detailed decisions about what conventions are proper for each platform.)
12 | 译文
13 | 
14 | </div>
15 | 


--------------------------------------------------------------------------------
/src/foundation-overview/index.md:
--------------------------------------------------------------------------------
 1 | <div class="article__intro">
 2 | 
 3 | [en]: <> (Foundation)
 4 | # 基础
 5 | 
 6 | [en]: <> (Material Design defines the qualities that can be expressed by UI regions, surfaces, and components. Design and strategize how your app is built using foundations that address design from both a broad and detailed perspective.)
 7 | 质感设计(Material Design）定义了质量，它可以通过用户界面区域、外观和插件体现。设计并布置你的软件是基于使用的，它可以从更广、更细致的角度解决设计问题。
 8 | 
 9 | </div><div class="article__body">
10 | 
11 | [en]: <> (Layout, color, and more)
12 | #### 布局，颜色和其他
13 | 
14 | [en]: <> (This section describes the Material environment and layout, its possible interactions, and the unified expression of qualities like color, shape, and motion.)
15 | 该区域描述了质感的环境和布局，可能的交互设计，还有像颜色、形状和动态这些统一体现产品质量的外观。
16 | 
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/index.md:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .start-read:before {
 3 |     background-color: transparent !important;
 4 | }
 5 | </style>
 6 | 
 7 | <div class="article__intro">
 8 | 
 9 | # Material Design 指南中文版
10 | 
11 | </div><div class="article__body">
12 | 
13 | <a href="https://www.mdui.org/design/introduction/index.html" class="start-read mdui-btn mdui-btn-raised mdui-color-theme">开始阅读</a>
14 | 
15 | ### 内容来源
16 | 
17 | 英文版官方文档：[https://material.io/design/](https://material.io/design/)
18 | 
19 | 中文翻译网站：[https://www.mdui.org/design](https://www.mdui.org/design)
20 | 
21 | 中文版 Github 仓库：[https://github.com/zdhxiong/Material-Design-Chinese](https://github.com/zdhxiong/Material-Design-Chinese)
22 | 
23 | ### 捐赠
24 | 
25 | <div class="mdui-row-sm-3">
26 | <div class="mdui-col">
27 | 
28 | 您的捐赠将帮助我继续完善翻译，及用于服务器费用、图片视频的流量费等开销。
29 | 
30 | </div><div class="mdui-col">
31 | 
32 | <figure>
33 | 
34 | ![](https://ww1.sinaimg.cn/large/63f511e3gy1ffhx0it64wj206o089dge.jpg)
35 | 
36 | </figure>
37 | 
38 | </div><div class="mdui-col">
39 | 
40 | <figure>
41 | 
42 | ![](https://ww1.sinaimg.cn/large/63f511e3gy1ffhx0q42oyj206o0890ta.jpg)
43 | 
44 | </figure>
45 | 
46 | </div></div>
47 | 
48 | </div>
49 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-text-selection-toolbar.md:
--------------------------------------------------------------------------------
 1 | <div class="article__intro">
 2 | 
 3 | [en]: <> (Android text selection toolbar)
 4 | # Android 文本选择工具
 5 | 
 6 | [en]: <> (A toolbar appears in front of selected text, displaying the actions of Cut, Copy, Paste, and More.)
 7 | 译文
 8 | 
 9 | </div><div class="article__body">
10 | 
11 | [en]: <> (The toolbar appears upon selection and disappears upon action or tapping outside of the toolbar area. When the user selects the More icon, the toolbar transforms into a secondary menu to reveal additional actions.)
12 | 译文
13 | 
14 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-text-selection-toolbar/01-textselection.mp4" src="{assets_path}/platform-guidance/android-text-selection-toolbar/01-textselection.mp4" type="video/mp4"></video><figcaption>
15 | 
16 | [en]: <> (Appearance of a text selection toolbar)
17 | 译文
18 | 
19 | </figcaption></figure><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-text-selection-toolbar/02-overflowmenu.mp4" src="{assets_path}/platform-guidance/android-text-selection-toolbar/02-overflowmenu.mp4" type="video/mp4"></video><figcaption>
20 | 
21 | [en]: <> (Transitioning between the overflow menu and the text selection toolbar)
22 | 译文
23 | 
24 | </figcaption></figure></div>
25 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-bars.md:
--------------------------------------------------------------------------------
 1 | <div class="article__intro">
 2 | 
 3 | [en]: <> (Android bars)
 4 | # Android功能栏
 5 | 
 6 | [en]: <> (The following guidance applies to Android only.)
 7 | 以下指南只适用于Android。
 8 | 
 9 | <nav>
10 | 
11 | [en]: <> (Status bar)
12 | [en]: <> (Android navigation bar)
13 | * [状态栏](#status-bar)
14 | * [导航栏](#android-navigation-bar)
15 | 
16 | </nav></div><div class="article__body">
17 | 
18 | [en]: <> (Status bar)
19 | <h2 id="status-bar">状态栏</h2>
20 | 
21 | [en]: <> (On Android, the status bar contains notification icons and system icons.)
22 | 在Android端，导航栏包括通知图标和系统图标。
23 | 
24 | [en]: <> (Metrics:)
25 | 标准：
26 | 
27 | [en]: <> (Android status bar height: 24dp )
28 | Android状态栏高度：24dp
29 | 
30 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
31 | 
32 | ![]({assets_path}/platform-guidance/android-bars/as-statusbar.png)
33 | 
34 | <figcaption>
35 | 
36 | [en]: <> (Android status bar.)
37 | Android状态栏。
38 | 
39 | </figcaption></figure></div><div class="mdui-col"><figure>
40 | 
41 | ![]({assets_path}/platform-guidance/android-bars/as-appbar.png)
42 | 
43 | <figcaption>
44 | 
45 | [en]: <> (Android status bar on top of the app bar)
46 | Android状态栏在应用栏顶端。
47 | 
48 | </figcaption></figure></div></div>
49 | 
50 | [en]: <> (Android navigation bar)
51 | <h2 id="android-navigation-bar">Android导航栏</h2>
52 | 
53 | [en]: <> (The Android navigation bar in Android houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier.)
54 | Android的导航栏包含设备导航控件：返回、主页和最近任务。它也会显示为2.3或更早Android版本编写的应用的菜单。
55 | 
56 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
57 | 
58 | ![]({assets_path}/platform-guidance/android-bars/android-only-additional6.png)
59 | 
60 | <figcaption>
61 | 
62 | [en]: <> (Dark)
63 | 黑暗模式的导航栏
64 | 
65 | </figcaption></figure></div><div class="mdui-col"><figure>
66 | 
67 | ![]({assets_path}/platform-guidance/android-bars/android-only-additional7.png)
68 | 
69 | <figcaption>
70 | 
71 | [en]: <> (Light)
72 | 明亮模式的导航栏
73 | 
74 | </figcaption></figure></div></div></div>
75 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-navigating-between-apps.md:
--------------------------------------------------------------------------------
 1 | <div class="article__intro">
 2 | 
 3 | [en]: <> (Android navigating between apps)
 4 | # Android 应用间转换
 5 | 
 6 | [en]: <> (Navigate directly from one app to another when using common actions.)
 7 | 译文
 8 | 
 9 | <nav>
10 | 
11 | [en]: <> (Usage)
12 | [en]: <> (Activities, tasks, & intents)
13 | * [译文](#usage)
14 | * [译文](#activities-tasks-intents)
15 | 
16 | </nav></div><div class="article__body">
17 | 
18 | [en]: <> (Usage)
19 | <h2 id="usage">译文</h2>
20 | 
21 | [en]: <> (Apps can create a consistent experience when using common actions by navigating directly from one app to another. For example, to capture a photo, an app may activate the Camera app.)
22 | 译文
23 | 
24 | [en]: <> (Activities, tasks, & intents)
25 | <h2 id="activities-tasks-intents">译文</h2>
26 | 
27 | [en]: <> (Activities)
28 | #### 译文
29 | 
30 | [en]: <> (In Android, an activity includes an app’s screen and the actions it makes available to users. An app is a collection of activities that are created and reused from other apps.)
31 | 译文
32 | 
33 | [en]: <> (Tasks)
34 | #### 译文
35 | 
36 | [en]: <> (A task is the sequence of activities a user follows to accomplish a goal.)
37 | 译文
38 | 
39 | [en]: <> (Intents)
40 | #### 译文
41 | 
42 | [en]: <> (An intent allows an app to signal it would like another app's assistance in performing an action, such as “Share.” Apps can indicate which intents to respond to through activities.)
43 | 
44 | [en]: <> (Steps)
45 | ### 译文
46 | 
47 | <div class="mdui-row-sm-2"><div class="mdui-col">
48 | 
49 | [en]: <> (Launching an app from the Home screen begins a new *task*.)
50 | 译文
51 | 
52 | [en]: <> (This task is extended to include *activities* of navigating through albums and viewing photo details.)
53 | 译文
54 | 
55 | [en]: <> (If the user triggers the Share action, a bottom sheet is revealed with available sharing activities from different apps \(all of which have been registered to handle the Share *intent*\).)
56 | 译文
57 | 
58 | </div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-navigating-between-apps/androidonly-navigatingbetweenapps.mp4" src="{assets_path}/platform-guidance/android-navigating-between-apps/androidonly-navigatingbetweenapps.mp4" type="video/mp4"></video><figcaption>
59 | 
60 | [en]: <> (A bottom sheet displays available sharing activities from different apps.)
61 | 译文
62 | 
63 | </figcaption></figure></div></div></div>
64 | 


--------------------------------------------------------------------------------
/src/shape/shape-hierarchy.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Shape and hierarchy)
  4 | # 形状和层次结构
  5 | 
  6 | [en]: <> (Shapes can direct attention to important elements and show how surfaces relate to one another.)
  7 | 形状能聚注意焦于重要的元素并展现面与面间的相互关系。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Developing hierarchy)
 12 | [en]: <> (Surface relationships)
 13 | * [构建层次结构](#developing-hierarchy)
 14 | * [面与面间关系](#surface-relationships)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Developing hierarchy)
 19 | <h2 id="developing-hierarchy">构建层次结构</h2>
 20 | 
 21 | [en]: <> (Unique shapes)
 22 | ### 独特的形状
 23 | 
 24 | [en]: <> (Shapes that are unique differ from the shapes around them, making them stand out. Components with unique shapes stand out from other components, the content that surrounds them, and the UI as a whole. Their shape gives them emphasized importance that helps direct user attention.)
 25 | 特别于周边形状的形状，会较为突出。形状特殊的组件会从其余组件、周围文本、以及整个 UI 中凸显出来。其形状重申表现了其之重要，从而有助于集聚用户的注意力。
 26 | 
 27 | <figure>
 28 | 
 29 | ![]({assets_path}/shape/shape-hierarchy/uniqueshapes-do-baseline-1.png)
 30 | 
 31 | <figcaption>
 32 | 
 33 | {do}
 34 | 
 35 | [en]: <> (Make a shape stand out by contrasting it with other shapes. This floating action button’s round shape helps it stand out from other components, which are rectangular.)
 36 | 要使形状凸显，使它与别的形状形成鲜明对比。该浮钮之圆助它脱俗于其它组件，凸显于那些矩形。
 37 | 
 38 | </figcaption></figure><figure>
 39 | 
 40 | ![]({assets_path}/shape/shape-hierarchy/uniqueshapes-dont-baseline-1.png)
 41 | 
 42 | <figcaption>
 43 | 
 44 | {dont}
 45 | 
 46 | [en]: <> (A shape is less likely to stand out when placed among similar shapes. This floating action button has the same shape as other elements, making it difficult to find.)
 47 | 形似处不易凸显形状。此浮动按钮形同其它，致使难以察觉。
 48 | 
 49 | </figcaption></figure>
 50 | 
 51 | [en]: <> (Surface relationships)
 52 | <h2 id="surface-relationships">二面关系</h2>
 53 | 
 54 | [en]: <> (Connecting surfaces through shape)
 55 | ### 以形接面
 56 | 
 57 | [en]: <> (Shape can help users understand how Material surfaces are related to one another.)
 58 | 形状可助用户了解材料面之间的联系。
 59 | 
 60 | [en]: <> (Similar surfaces)
 61 | #### 相似面
 62 | 
 63 | [en]: <> (Similar shapes can indicate that surfaces are peers, such as cards in a collection with matching dimensions and corners.)
 64 | 相似的形状可表明二面关系对等，例如同一集合中的卡片有着匹配的尺寸和边角。
 65 | 
 66 | [en]: <> (Related surfaces)
 67 | #### 关联面
 68 | 
 69 | [en]: <> (Surfaces that are related to one another can be indicated by using shapes that resemble arrows, such that they “point” to other surfaces. For example, an arrow-like corner of a menu can point to a related surface.)
 70 | 表明二面间关系时可以通过使用像箭头的形状，并使其“指向”另一面。举例，目录中类箭头的一角可以指向一关联面。
 71 | 
 72 | [en]: <> (Separate surfaces)
 73 | #### 分离面
 74 | 
 75 | [en]: <> (Shapes can emphasize when surfaces are separate from one another. For example, when a unique shape appears at a higher elevation than another surface, it emphasizes that the two surfaces are separate.)
 76 | 形状能强调表示二面何时是分离的。举例，当一个特别形状出现在较另一个面的高位时，强调表示这二面相分离。
 77 | 
 78 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 79 | 
 80 | ![]({assets_path}/shape/shape-hierarchy/surfacerelationships-do-crane-1b.mp4)
 81 | 
 82 | <figcaption>
 83 | 
 84 | {do}
 85 | 
 86 | [en]: <> (Curved corners emphasize that the white surface is separate from the purple surface behind it.)
 87 | 圆角强调表示着该白色面与后面的紫色面相分离。
 88 | 
 89 | </figcaption></figure></div><div class="mdui-col"><figure>
 90 | 
 91 | ![]({assets_path}/shape/shape-hierarchy/surfacerelationships-do-owl.mp4)
 92 | 
 93 | <figcaption>
 94 | 
 95 | {do}
 96 | 
 97 | [en]: <> (Shape helps emphasize that the surface in the bottom right corner is separate from the surface behind it.)
 98 | 形状协助强调右下角的面是相分离于于其后的面的。
 99 | 
100 | </figcaption></figure></div></div><figure>
101 | 
102 | ![]({assets_path}/shape/shape-hierarchy/surfacerelationships-do-owl-cards.png)
103 | 
104 | <figcaption>
105 | 
106 | {do}
107 | 
108 | [en]: <> (The similar shape and dimensions of the cards in this collection indicate that they are peers.)
109 | 这个集合中卡片的相似形状和相似尺寸表明它们是对等的。
110 | 
111 | </figcaption></figure><figure>
112 | 
113 | ![]({assets_path}/shape/shape-hierarchy/surfacerelationships-do-reply-1.png)
114 | 
115 | <figcaption>
116 | 
117 | {do}
118 | 
119 | [en]: <> (The unique corner of the menu points to its parent surface.)
120 | 选单中这独特的一角指向它的父级面。
121 | 
122 | </figcaption></figure><figure>
123 | 
124 | ![]({assets_path}/shape/shape-hierarchy/combiningstyles-dont-baseline-1.png)
125 | 
126 | <figcaption>
127 | 
128 | {dont}
129 | 
130 | [en]: <> (Don’t use shape to imply that elements are related if they aren’t. The shape of this dialog suggests it is related to the card behind it and to the right.)
131 | 若并无关，则别用形状暗示元素间有关联。这个对话框的形状表明它关联于后面的卡片以及右侧部分。
132 | 
133 | </figcaption></figure></div>
134 | 


--------------------------------------------------------------------------------
/src/communication/offline-states.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Offline states)
  4 | # 离线状态
  5 | 
  6 | [en]: <> (Offline states allow users to interact with an app without Internet access.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Principles)
 12 | [en]: <> (Offline functionality)
 13 | [en]: <> (Offline settings)
 14 | * [译文](#principles)
 15 | * [译文](#offline-functionality)
 16 | * [译文](#offline-settings)
 17 | 
 18 | </nav>
 19 | 
 20 | </div><div class="article__body">
 21 | 
 22 | [en]: <> (Principles)
 23 | <h2 id="principles">译文</h2>
 24 | 
 25 | <div class="mdui-row-sm-3"><div class="mdui-col">
 26 | 
 27 | <figure>
 28 | 
 29 | ![]({assets_path}/communication/offline-states/graceful.png)
 30 | 
 31 | </figure>
 32 | 
 33 | [en]: <> (Adapt to connection)
 34 | #### 译文
 35 | 
 36 | [en]: <> (Adapt how your feature or app behaves when the user has a slow, intermittent, or no connection at all.)
 37 | 译文
 38 | 
 39 | </div><div class="mdui-col">
 40 | 
 41 | <figure>
 42 | 
 43 | ![]({assets_path}/communication/offline-states/form.png)
 44 | 
 45 | </figure>
 46 | 
 47 | [en]: <> (Illustrate functionality)
 48 | #### 译文
 49 | 
 50 | [en]: <> (Use the UI design to illustrate how an offline feature works and communicates its intended purpose.)
 51 | 译文
 52 | 
 53 | </div><div class="mdui-col">
 54 | 
 55 | <figure>
 56 | 
 57 | ![]({assets_path}/communication/offline-states/something.png)
 58 | 
 59 | </figure>
 60 | 
 61 | [en]: <> (Display available content)
 62 | #### 译文
 63 | 
 64 | [en]: <> (Load available content when the connection is limited, rather than not loading any content.)
 65 | 译文
 66 | 
 67 | </div></div>
 68 | 
 69 | [en]: <> (Offline functionality)
 70 | <h2 id="offline-functionality">译文</h2>
 71 | 
 72 | [en]: <> (If your app has features that are available when offline, and other features that aren’t, it should indicate whether it’s current state is offline or online.)
 73 | 译文
 74 | 
 75 | [en]: <> (For offline states, it should provide a place to manage offline files.)
 76 | 译文
 77 | 
 78 | [en]: <> (Functionality while offline)
 79 | ### 译文
 80 | 
 81 | [en]: <> (To communicate that an action in your app is working offline, display the [offline pin icon]\(https://material.io/tools/icons/?icon=offline_pin&style=baseline\) with the text label “offline.”)
 82 | 译文
 83 | 
 84 | <div class="mdui-row-sm-2"><div class="mdui-col">
 85 | 
 86 | <figure>
 87 | 
 88 | ![]({assets_path}/communication/offline-states/offline-translation.png)
 89 | 
 90 | <figcaption>
 91 | 
 92 | [en]: <> (The app shows an offline badge when the user performs an action offline.)
 93 | 译文
 94 | 
 95 | </figcaption></figure>
 96 | 
 97 | </div><div class="mdui-col">
 98 | 
 99 | <figure>
100 | 
101 | ![]({assets_path}/communication/offline-states/browser-offline.png)
102 | 
103 | <figcaption>
104 | 
105 | [en]: <> (The app shows an offline icon next to the URL when a website is being accessed offline.)
106 | 译文
107 | 
108 | </figcaption></figure>
109 | 
110 | </div></div>
111 | 
112 | [en]: <> (No functionality while offline)
113 | ### 译文
114 | 
115 | [en]: <> (When features are not available offline, indicate them using the [cloud off icon]\(https://material.io/tools/icons/?icon=cloud_off&style=baseline\). Only show this icon when the product is offline. When possible, use the text label “offline” along with the icon.)
116 | 译文
117 | 
118 | <div class="mdui-row-sm-2"><div class="mdui-col">
119 | 
120 | <figure>
121 | 
122 | ![]({assets_path}/communication/offline-states/search-offline.png)
123 | 
124 | <figcaption>
125 | 
126 | [en]: <> (The app indicates when you’re offline and provides helpful tips of what the user can do while offline.)
127 | 译文
128 | 
129 | </figcaption></figure>
130 | 
131 | </div><div class="mdui-col">
132 | 
133 | <figure>
134 | 
135 | ![]({assets_path}/communication/offline-states/translate-offline.png)
136 | 
137 | <figcaption>
138 | 
139 | [en]: <> (The app offers the user to download an offline dictionary when the user is connected again to the Internet for future offline use.)
140 | 译文
141 | 
142 | </figcaption></figure>
143 | 
144 | </div></div>
145 | 
146 | [en]: <> (Offline settings)
147 | <h2 id="offline-settings">译文</h2>
148 | 
149 | [en]: <> (Provide a place for users to manage their offline settings. If you use icons in your app, mark this destination with the [offline pin icon]\(https://material.io/tools/icons/?icon=offline_pin&style=baseline\).)
150 | 译文
151 | 
152 | <div class="mdui-row-sm-2"><div class="mdui-col">
153 | 
154 | <figure>
155 | 
156 | ![]({assets_path}/communication/offline-states/offline-places.png)
157 | 
158 | <figcaption>
159 | 
160 | [en]: <> (The navigation menu item “Offline areas” \(5th in the list\) indicates information saved for offline use.)
161 | 译文
162 | 
163 | </figcaption></figure>
164 | 
165 | </div></div>
166 | 
167 | </div>
168 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 新版翻译已开始，一起来翻译吧
  2 | 
  3 | 我已经把文档整理成了 Markdown 格式，并把英文原文以注释的形式保留在了 Markdown 文件中，方便进行逐行对照翻译。
  4 | 
  5 | ## 如何参与翻译
  6 | 
  7 | 1. fork 主仓库
  8 | 2. 在 `README.md` 的 “待认领的文件” 下面选择一个你想认领的文件，将其剪贴到 “翻译中的文件”下面，并在文件名后面写上 (@你的github名)，给主仓库的 `v2` 分支提 pull request
  9 | 3. 提的 pull request 被确认，合并到主仓库后，代表你已认领完成，可以开始翻译。认领完成后，请在 5 天内完成翻译并提交 pull request，否则我会认为你已放弃翻译，会将该文件重新移回到 “待认领的文件”中。
 10 | 4. 翻译完成后，提交 pull request 给主仓库的 `v2` 分支
 11 | 5. 校验人员可能会给你的翻译提出一些意见，你需要按修改意见进行修改。待 pull request 被合并后，代表该文件翻译完成
 12 | 
 13 | ## 如何生成文档
 14 | 
 15 | 我们使用 PHP 来生成最终的 HTML 文件，生成的文件位于 dist 目录中。
 16 | 
 17 | 注意：提交翻译时，只需提交 src 目录中的文件即可，无需提交 dist 目录。
 18 | 
 19 | ```
 20 | # 进入 build 目录
 21 | cd build
 22 | # 安装依赖
 23 | composer install
 24 | # 生成 HTML 文件
 25 | php build.php
 26 | ```
 27 | 
 28 | ## 待认领的文件
 29 | 
 30 | * src/components/sheets-bottom.md
 31 | * src/components/sheets-side.md
 32 | * src/components/sliders.md
 33 | * src/environment/elevation.md
 34 | * src/environment/surfaces.md
 35 | * src/guidelines-overview/index.md
 36 | * src/iconography/animated-icons.md
 37 | * src/iconography/product-icons.md
 38 | * src/iconography/system-icons.md
 39 | * src/interaction/gestures.md
 40 | * src/interaction/selection.md
 41 | * src/interaction/states.md
 42 | * src/introduction/index.md
 43 | * src/layout/component-behavior.md
 44 | * src/layout/density.md
 45 | * src/layout/responsive-layout-grid.md
 46 | * src/layout/spacing-methods.md
 47 | * src/layout/understanding-layout.md
 48 | * src/material-theming/implementing-your-theme.md
 49 | * src/material-theming/overview.md
 50 | * src/motion/choreography.md
 51 | * src/motion/customization.md
 52 | * src/motion/speed.md
 53 | * src/motion/understanding-motion.md
 54 | * src/platform-guidance/android-fingerprint.md
 55 | * src/platform-guidance/android-haptics.md
 56 | * src/platform-guidance/android-icons.md
 57 | * src/platform-guidance/android-navigating-between-apps.md
 58 | * src/platform-guidance/android-notifications.md
 59 | * src/platform-guidance/android-permissions.md
 60 | * src/platform-guidance/android-settings.md
 61 | * src/platform-guidance/android-split-screen.md
 62 | * src/platform-guidance/android-swipe-to-refresh.md
 63 | * src/platform-guidance/android-text-selection-toolbar.md
 64 | * src/platform-guidance/android-widget.md
 65 | * src/platform-guidance/cross-platform-adaptation.md
 66 | 
 67 | ## 翻译中的文件
 68 | 
 69 | * src/color/the-color-system.md (@VCEtwp)
 70 | * src/typography/language-support.md (@PaperFlu)
 71 | * src/typography/the-type-system.md (@PaperFlu)
 72 | * src/typography/understanding-typography.md (@PaperFlu)
 73 | * src/usability/index.md (@PaperFlu)
 74 | * src/navigation/navigation-transitions.md (@zhiwei-xu)
 75 | * src/navigation/understanding-navigation.md (@zhiwei-xu)
 76 | * src/foundation-overview/index.md (@ClaireLind1)
 77 | 
 78 | ## 已翻译完成的文件
 79 | 
 80 | * src/color/color-usage.md (@zdhxiong)
 81 | * src/color/text-legibility.md (@Minoyu)
 82 | * src/color/applying-color-to-ui.md (@VCEtwp)
 83 | * src/communication/confirmation-acknowledgement.md (@zdhxiong)
 84 | * src/communication/data-formats.md (@zdhxiong)
 85 | * src/communication/empty-states.md (@zdhxiong)
 86 | * src/communication/gesture-education.md (@zdhxiong)
 87 | * src/communication/help-feedback.md (@zdhxiong)
 88 | * src/communication/imagery.md (@zdhxiong)
 89 | * src/communication/launch-screen.md (@zdhxiong)
 90 | * src/communication/onboarding.md (@zdhxiong)
 91 | * src/communication/writing.md (@zdhxiong)
 92 | * src/shape/about-shape.md (@PaperFlu)
 93 | * src/shape/shape-as-expression.md (@PaperFlu)
 94 | * src/shape/shape-hierarchy.md (@PaperFlu)
 95 | * src/shape/shape-motion.md (@PaperFlu)
 96 | * src/components/app-bars-bottom.md (@zdhxiong)
 97 | * src/components/app-bars-top.md (@zdhxiong)
 98 | * src/components/backdrop.md (@zdhxiong)
 99 | * src/components/banners.md (@zdhxiong)
100 | * src/components/bottom-navigation.md (@zdhxiong)
101 | * src/components/buttons.md (@zdhxiong)
102 | * src/components/buttons-floating-action-button.md (@zdhxiong)
103 | * src/components/cards.md (@zdhxiong)
104 | * src/components/chips.md (@zdhxiong)
105 | * src/components/data-tables.md (@zdhxiong)
106 | * src/components/dialogs.md (@zdhxiong)
107 | * src/navigation/search.md (@zhiwei-xu)
108 | * src/components/dividers.md (@zdhxiong)
109 | * src/components/image-lists.md (@zdhxiong)
110 | * src/components/lists.md (@zdhxiong)
111 | * src/components/menus.md (@zdhxiong)
112 | * src/components/progress-indicators.md (@Chheese)
113 | * src/components/navigation-drawer.md (@zdhxiong)
114 | * src/components/snackbars.md (@kengwang)
115 | * src/components/tabs.md (@Chheese)
116 | * src/components/selection-controls.md (@zdhxiong)
117 | * src/components/text-fields.md (@kengwang)
118 | * src/environment/light-shadows.md (@O7I2)
119 | * src/platform-guidance/android-bars.md (@Chheese)
120 | * src/components/tooltips.md (@MrWillCom)
121 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-haptics.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android haptics)
  4 | # Android 触感
  5 | 
  6 | [en]: <> (Haptics enhance interactions and convey useful information to users through the sense of touch.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Principles)
 13 | * [译文](#usage)
 14 | * [译文](#principles)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Usage)
 19 | <h2 id="usage">译文</h2>
 20 | 
 21 | [en]: <> (Haptics refers to the sensation delivered to users through a touch UI. Haptics can enhance the overall user experience by conveying and reinforcing information. They are frequently combined with audio and visual elements to complement interactions.)
 22 | 译文
 23 | 
 24 | [en]: <> (When to use)
 25 | ### 译文
 26 | 
 27 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 28 | 
 29 | ![]({assets_path}/platform-guidance/android-haptics/haptics-1.png)
 30 | 
 31 | <figcaption>
 32 | 
 33 | [en]: <> (Touch feedback)
 34 | #### 译文
 35 | 
 36 | [en]: <> (Haptics provide touch feedback using:)
 37 | 译文
 38 | 
 39 | [en]: <> (Tap and click)
 40 | [en]: <> (Long press)
 41 | * 译文
 42 | * 译文
 43 | 
 44 | </figcaption></figure></div><div class="mdui-col"><figure>
 45 | 
 46 | ![]({assets_path}/platform-guidance/android-haptics/haptics-3.png)
 47 | 
 48 | <figcaption>
 49 | 
 50 | [en]: <> (Attention cues)
 51 | #### 译文
 52 | 
 53 | [en]: <> (Haptics provide signals using:)
 54 | 译文
 55 | 
 56 | [en]: <> (Alarms and reminders)
 57 | [en]: <> (Notifications)
 58 | [en]: <> (Incoming calls)
 59 | [en]: <> (Error and success states)
 60 | * 译文
 61 | * 译文
 62 | * 译文
 63 | * 译文
 64 | 
 65 | </figcaption></figure></div></div>
 66 | 
 67 | [en]: <> (Haptics with audio and video)
 68 | ### 译文
 69 | 
 70 | [en]: <> (Haptics can be paired with other audio and visual elements, or used alone. For example, haptics can be the only method of feedback when a device has the sound turned off.)
 71 | 译文
 72 | 
 73 | [en]: <> (When paired with other elements, haptics should be synchronized to create powerful and delightful expressions.)
 74 | 译文
 75 | 
 76 | [en]: <> (Implementation)
 77 | ### 译文
 78 | 
 79 | [en]: <> (Haptics can be implemented in multiple ways. One way is through the commonly used motor-controlled vibration available on mobile devices.)
 80 | 译文
 81 | 
 82 | [en]: <> (Haptics may be constrained by technological and device limitations.)
 83 | 译文
 84 | 
 85 | [en]: <> (Principles)
 86 | <h2 id="principles">译文</h2>
 87 | 
 88 | [en]: <> (Haptics should be used thoughtfully. If haptics are overused, it can be bothersome and could potentially cause user discomfort. Only perform haptic feedback if the user has enabled haptics in their system’s settings.)
 89 | 译文
 90 | 
 91 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 92 | 
 93 | ![]({assets_path}/platform-guidance/android-haptics/haptics-4.png)
 94 | 
 95 | <figcaption>
 96 | 
 97 | [en]: <> (Follow system patterns)
 98 | #### 译文
 99 | 
100 | [en]: <> (Apply haptics consistently by adhering to platform patterns \(such as [Android Haptic Feedback Constants]\(https://developer.android.com/reference/android/view/HapticFeedbackConstants\)\).)
101 | 译文
102 | 
103 | </figcaption></figure></div><div class="mdui-col"><figure>
104 | 
105 | ![]({assets_path}/platform-guidance/android-haptics/haptics-5.png)
106 | 
107 | <figcaption>
108 | 
109 | [en]: <> (Focus on user needs)
110 | #### 译文
111 | 
112 | [en]: <> (The number of new and unique haptics produced should be limited, and only used when system patterns are not defined.)
113 | 译文
114 | 
115 | </figcaption></figure></div><div class="mdui-col"><figure>
116 | 
117 | ![]({assets_path}/platform-guidance/android-haptics/haptics-6.png)
118 | 
119 | <figcaption>
120 | 
121 | [en]: <> (Design holistically)
122 | #### 译文
123 | 
124 | [en]: <> (Select patterns that fit the interaction, context, and environment in which a pattern is used.)
125 | 译文
126 | 
127 | </figcaption></figure></div></div><div class="mdui-row-sm-3"><div class="mdui-col"><figure>
128 | 
129 | ![]({assets_path}/platform-guidance/android-haptics/haptics-7.png)
130 | 
131 | <figcaption>
132 | 
133 | [en]: <> (Combine haptics with audio and visual)
134 | #### 译文
135 | 
136 | [en]: <> (Haptics communicate simpler information, and shouldn’t be used to convey complex information.)
137 | 译文
138 | 
139 | </figcaption></figure></div><div class="mdui-col"><figure>
140 | 
141 | ![]({assets_path}/platform-guidance/android-haptics/haptics-8.png)
142 | 
143 | <figcaption>
144 | 
145 | [en]: <> (Avoid unpleasant haptics)
146 | #### 译文
147 | 
148 | [en]: <> (Use simple haptic patterns, avoiding long or jarring vibrations if alternative haptic designs are possible.)
149 | 译文
150 | 
151 | </figcaption></figure></div><div class="mdui-col"><figure>
152 | 
153 | ![]({assets_path}/platform-guidance/android-haptics/haptics-9.png)
154 | 
155 | <figcaption>
156 | 
157 | [en]: <> (Use patterns predictably)
158 | #### 译文
159 | 
160 | [en]: <> (Use standard patterns in the ways they were intended, so users don’t get confused.)
161 | 译文
162 | 
163 | </figcaption></figure></div></div></div>
164 | 


--------------------------------------------------------------------------------
/src/navigation/search.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Search)
  4 | # 搜索
  5 | 
  6 | [en]: <> (Search allows users to quickly find app content.)
  7 | 用户可通过搜索功能快速查找应用中的内容。
  8 | 
  9 | <figure>
 10 | 
 11 | ![]({assets_path}/navigation/search/search-hero-1.png)
 12 | 
 13 | </figure><nav>
 14 | 
 15 | [en]: <> (Usage)
 16 | [en]: <> (Persistent search)
 17 | [en]: <> (Expandable search)
 18 | * [应用搜索功能](#usage)
 19 | * [固定式搜索](#persistent-search)
 20 | * [隐藏式搜索](#expandable-search)
 21 | 
 22 | </nav></div><div class="article__body">
 23 | 
 24 | [en]: <> (Usage)
 25 | <h2 id="usage">应用搜索功能</h2>
 26 | 
 27 | [en]: <> (Search allows users to quickly locate content across an app. Basic search enables users to input a query into a search text field to view related results. )
 28 | 搜索功能使用户可以快速地在应用中查找内容。利用基本的搜索功能，用户将文本输入文本框并查看相关结果。
 29 | 
 30 | [en]: <> (Search query input methods can be extended to include historical suggestions, auto-completion of queries, and voice input.)
 31 | 搜索时的输入方式可以有多种，包括基于历史记录的建议、自动补全和语音输入。
 32 | 
 33 | [en]: <> (Persistent search)
 34 | <h2 id="persistent-search">固定式搜索</h2>
 35 | 
 36 | [en]: <> (Use persistent search when search is the primary focus of your app. The search text field is presented inside of a search bar, ready to receive focus.)
 37 | 如果应用的首要功能是搜索，使用固定式搜索。设计一个引人关注的搜索栏，使用户在需要时激活。
 38 | 
 39 | [en]: <> (Usage)
 40 | #### 应用方式
 41 | 
 42 | [en]: <> (When in focus, the search experience expands to fill the entire screen. Optionally, historical search suggestions can displayed below the text field.)
 43 | [en]: <> (A user can type a query or select from a suggestion \(if available\). Upon pressing Return, the search is submitted.)
 44 | [en]: <> (Search results are displayed below the search bar.)
 45 | [en]: <> (To release focus from the search box and dismiss search suggestions, the user taps the Up arrow.)
 46 | 1. 当搜索功能被激活时，应占据整个屏幕。同时，历史记录建议可以显示在文本输入框下方。
 47 | 2. 用户可以输入文本或在建议中选择一个（如果有）。直到按下确认键，查询内容才被提交。
 48 | 3. 搜索结果在搜索栏下方展示。
 49 | 4. 用户点击返回按钮以忽略建议、退出搜索，回到初始状态。
 50 | 
 51 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/search/baseline-persistent-v03.mp4" src="{assets_path}/navigation/search/baseline-persistent-v03.mp4" type="video/mp4"></video><figcaption>
 52 | 
 53 | [en]: <> (Persistent search field receiving focus, loading results, and returning to an unfocused state)
 54 | 搜索时，固定式搜索栏激活并显示结果。搜索结束后，搜索栏回到初始状态
 55 | 
 56 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 57 | 
 58 | ![]({assets_path}/navigation/search/persistentsearch-1.png)
 59 | 
 60 | <figcaption>
 61 | 
 62 | [en]: <> (Persistent search bar without focus \(default\))
 63 | 未激活的搜索栏
 64 | 
 65 | </figcaption></figure></div><div class="mdui-col"><figure>
 66 | 
 67 | ![]({assets_path}/navigation/search/persistentsearch-2.png)
 68 | 
 69 | <figcaption>
 70 | 
 71 | [en]: <> (Persistent search bar in focus, with cards of suggested queries below)
 72 | 激活的搜索栏，下方是搜索建议卡片
 73 | 
 74 | </figcaption></figure></div></div>
 75 | 
 76 | [en]: <> (Expandable search)
 77 | <h2 id="expandable-search">隐藏式搜索</h2>
 78 | 
 79 | [en]: <> (Use expandable search when search is not the primary focus of your app. Expandable search displays a search icon in the toolbar, instead of an open search text box.)
 80 | 如果应用的首要功能不是搜索，则使用隐藏式搜索。在工具栏中设置一个搜索图标，以代替搜索栏。
 81 | 
 82 | [en]: <> (Usage)
 83 | #### 应用方式
 84 | 
 85 | [en]: <> (The user taps the search icon \(in the toolbar\) to transform it into a focused search bar.)
 86 | [en]: <> (As a user types, historical search suggestions can be shown beneath the search bar.)
 87 | [en]: <> (Upon entering a query or choosing a suggestion, pressing Return submits the search.)
 88 | [en]: <> (Results appear below the search bar and scroll beneath it.)
 89 | * 用户（在工具栏内）点击搜索图标使搜索栏展开。
 90 | * 当用户输入时，历史搜索建议在搜索栏下方显示。
 91 | * 直到用户按下确认键或选择一个建议项，搜索才被提交。
 92 | * 结果在搜索栏下方显示，结果可以上下滚动。
 93 | 
 94 | [en]: <> (When displaying results, the search text field remains visible, but not in focus. Tapping the Up arrow releases the focus from search, dismisses suggestions and the on-screen keyboard, and returns the toolbar to its original state.)
 95 | 当显示搜索结果时，搜索栏仍保持可见，但不处于激活状态。点击返回按钮可退出搜索功能，搜索栏取消激活、搜索建议消失、键盘收起，回到初始状态。
 96 | 
 97 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/search/baseline-expandable-v02.mp4" src="{assets_path}/navigation/search/baseline-expandable-v02.mp4" type="video/mp4"></video><figcaption>
 98 | 
 99 | [en]: <> (Expandable search bar opening from an icon and loading results)
100 | 隐藏的搜索栏展开并加载结果
101 | 
102 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
103 | 
104 | ![]({assets_path}/navigation/search/expandingsearch-1.png)
105 | 
106 | <figcaption>
107 | 
108 | [en]: <> (Expandable search in its default state)
109 | 处在默认状态的隐藏式搜索
110 | 
111 | </figcaption></figure></div><div class="mdui-col"><figure>
112 | 
113 | ![]({assets_path}/navigation/search/expandingsearch-3.png)
114 | 
115 | <figcaption>
116 | 
117 | [en]: <> (Search text field in focus with auto-complete suggestions)
118 | 激活的搜索功能，搜索栏下方显示自动补全建议
119 | 
120 | </figcaption></figure></div></div></div>
121 | 


--------------------------------------------------------------------------------
/src/interaction/selection.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Selection)
  4 | # 选择
  5 | 
  6 | [en]: <> (Selection refers to how users indicate specific items they intend to take action on.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Properties)
 12 | [en]: <> (Item selection)
 13 | * [译文](#properties)
 14 | * [译文](#item-selection)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Properties)
 19 | <h2 id="properties">译文</h2>
 20 | 
 21 | [en]: <> (Usage)
 22 | ### 译文
 23 | 
 24 | [en]: <> (Item selection allows users to apply actions to selected items.)
 25 | 译文
 26 | 
 27 | [en]: <> (Interactions)
 28 | ### 译文
 29 | 
 30 | [en]: <> (Touch devices)
 31 | #### 译文
 32 | 
 33 | [en]: <> (On touch devices, select items using:)
 34 | 译文
 35 | 
 36 | [en]: <> (A long-press touch or two-finger touch)
 37 | [en]: <> (A selection shortcut, if available, such as tapping an avatar)
 38 | * 译文
 39 | * 译文
 40 | 
 41 | [en]: <> (Desktop)
 42 | #### 译文
 43 | 
 44 | [en]: <> (On desktop, items with checkboxes shouldn’t display their checkboxes by default \(or permanently\) unless item selection is the primary activity in the UI. Instead, checkboxes \(or similar indicators\) should only be displayed:)
 45 | 译文
 46 | 
 47 | [en]: <> (On hover, as a single checkbox for that item)
 48 | [en]: <> (Upon selection of the first item, after which checkboxes are displayed for remaining items in that set)
 49 | * 译文
 50 | * 译文
 51 | 
 52 | [en]: <> (Item selection)
 53 | <h2 id="item-selection">译文</h2>
 54 | 
 55 | [en]: <> (Selecting items \(mobile\))
 56 | ### 译文
 57 | 
 58 | <div class="mdui-row-sm-2"><div class="mdui-col">
 59 | 
 60 | [en]: <> (Entering selection mode)
 61 | #### 译文
 62 | 
 63 | [en]: <> (To select an item and enter selection mode, long press the item or use a shortcut, such as tapping the item’s avatar. To select additional items, tap each of them.)
 64 | 译文
 65 | 
 66 | [en]: <> (Exiting selection mode)
 67 | #### 译文
 68 | 
 69 | [en]: <> (To exit selection mode, tap each selected item until they’re all deselected, or tap an action on the toolbar.)
 70 | 译文
 71 | 
 72 | [en]: <> (Larger selections)
 73 | #### 译文
 74 | 
 75 | [en]: <> (To select multiple items simultaneously, use a long press and drag gesture across items. However, don’t use this gesture for selection if your app already uses this gesture to pick up and move items \(like [cards]\(https://www.mdui.org/design/components/cards.html\)\).)
 76 | 译文
 77 | 
 78 | </div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-selecting-items.mp4" src="{assets_path}/interaction/selection/item-selection-selecting-items.mp4" type="video/mp4"></video><figcaption>
 79 | 
 80 | [en]: <> (On touch devices, select an item by pressing and holding it.)
 81 | 译文
 82 | 
 83 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-toggling-selection-tap.mp4" src="{assets_path}/interaction/selection/item-selection-toggling-selection-tap.mp4" type="video/mp4"></video><figcaption>
 84 | 
 85 | [en]: <> (Once an item is selected, tap the item to toggle its selection state.)
 86 | 译文
 87 | 
 88 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-toggling-selection-photo.mp4" src="{assets_path}/interaction/selection/item-selection-toggling-selection-photo.mp4" type="video/mp4"></video><figcaption>
 89 | 
 90 | [en]: <> (Users may long press and drag across multiple items to quickly select them.)
 91 | 译文
 92 | 
 93 | </figcaption></figure></div></div>
 94 | 
 95 | [en]: <> (Selecting items \(desktop\))
 96 | #### 译文
 97 | 
 98 | [en]: <> (To make a selection, hover over an item to reveal a checkbox. The checkbox can then be clicked.)
 99 | 译文
100 | 
101 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-toggling-selection-desktop.mp4" src="{assets_path}/interaction/selection/item-selection-toggling-selection-desktop.mp4" type="video/mp4"></video><figcaption>
102 | 
103 | [en]: <> (On desktop, clicking a checkbox selects an item.)
104 | 译文
105 | 
106 | </figcaption></figure>
107 | 
108 | [en]: <> (Indicating selected elements)
109 | ### 译文
110 | 
111 | [en]: <> (To indicate selection, display a check mark and scrim over the selected item or its avatar.)
112 | 译文
113 | 
114 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-indicating-selection-do.mp4" src="{assets_path}/interaction/selection/item-selection-indicating-selection-do.mp4" type="video/mp4"></video><figcaption>
115 | 
116 | {do}
117 | 
118 | [en]: <> (Check marks replace icons or avatars if there is space. For smaller items, use compact checkmarks to avoid obscuring content.)
119 | 译文
120 | 
121 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/interaction/selection/item-selection-indicating-selection-dont.mp4" src="{assets_path}/interaction/selection/item-selection-indicating-selection-dont.mp4" type="video/mp4"></video><figcaption>
122 | 
123 | {dont}
124 | 
125 | [en]: <> (Selected items should be distinct from unselected items. A darker scrim, or an additional signifier, such as a check mark, would better differentiate selected items.)
126 | 译文
127 | 
128 | </figcaption></figure></div></div></div>
129 | 


--------------------------------------------------------------------------------
/src/communication/gesture-education.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Gesture education)
  4 | # 手势指导
  5 | 
  6 | [en]: <> (Gesture education explains how to interact with an element using a gesture.)
  7 | 手势指导解释了如何使用手势与元素进行交互。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Types)
 12 | [en]: <> (How to use)
 13 | * [类型](#types)
 14 | * [如何使用](#how-to-use)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Types)
 19 | <h2 id="types">类型</h2>
 20 | 
 21 | [en]: <> (Partial surface gesture education)
 22 | ### 局部手势指导
 23 | 
 24 | <div class="mdui-row-sm-2"><div class="mdui-col">
 25 | 
 26 | [en]: <> (A *partial surface gesture* affects only a portion of the screen, such as swiping a card.)
 27 | *局部手势指导*只在屏幕的局部有效，例如滑动卡片。
 28 | 
 29 | [en]: <> (Display a sample UI)
 30 | #### 显示一个示例 UI
 31 | 
 32 | [en]: <> (To show how to use a gesture for the first time, display a sample UI that mimics the movement of the gesture being represented.)
 33 | 为了向首次使用应用的用户演示如何使用手势，请显示一个示例 UI，来模拟手势触发时的元素移动效果。
 34 | 
 35 | [en]: <> (Dismissing gesture education)
 36 | #### 关闭手势指导
 37 | 
 38 | [en]: <> (The only way to dismiss the sample UI should be when the user performs the gesture being demonstrated. Once a gesture is detected, the gesture indicator should pause, and then disappear.)
 39 | 关闭示例 UI 的唯一方式应该是当用户执行演示的手势时。一旦检测到这个手势，手势指导 UI 应该暂停，然后消失。
 40 | 
 41 | [en]: <> (Writing)
 42 | #### 文字
 43 | 
 44 | [en]: <> (Describe the result of the gesture briefly and clearly.)
 45 | 简单清晰的描述手势的结果。
 46 | 
 47 | </div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/gesture-education/gesture-ed-partial-screen.mp4" src="{assets_path}/communication/gesture-education/gesture-ed-partial-screen.mp4" type="video/mp4"></video><figcaption>
 48 | 
 49 | [en]: <> (After displaying a sample UI of a card being swiped off the screen, only a left or right swipe will dismiss the gesture education card.)
 50 | 这个在屏幕上滑动的卡片示例显示后，只有向左或向右的滑动才能关闭手势指导卡片。
 51 | 
 52 | </figcaption></figure></div></div>
 53 | 
 54 | [en]: <> (Full-screen gesture education)
 55 | ### 全屏手势指导
 56 | 
 57 | <div class="mdui-row-sm-2"><div class="mdui-col">
 58 | 
 59 | [en]: <> (*Full-screen gestures* affect the entire screen, such as pinching to zoom in.)
 60 | *全屏手势指导*会影响整个屏幕，例如双指缩放。
 61 | 
 62 | [en]: <> (Display a banner)
 63 | #### 显示一个横幅
 64 | 
 65 | [en]: <> (A banner should describe what a full-screen gesture will do.)
 66 | 应该在横幅中描述全屏手势的功能。
 67 | 
 68 | [en]: <> (Dismissing gesture education)
 69 | #### 关闭手势指导
 70 | 
 71 | [en]: <> (Upon touching the screen, the screen content should return to its default state, with the gesture indicator removed. The banner should be displayed until the user dismisses it.)
 72 | 触摸屏幕后，屏幕内容应该回到默认状态，同时移除手势指导横幅。在用户触摸屏幕前，横幅应该始终保持显示。
 73 | 
 74 | [en]: <> (Writing)
 75 | #### 文字
 76 | 
 77 | [en]: <> (Describe the result of the gesture briefly and clearly.)
 78 | 简单清晰的描述手势的结果。
 79 | 
 80 | </div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/gesture-education/gesture-ed-entire-screen.mp4" src="{assets_path}/communication/gesture-education/gesture-ed-entire-screen.mp4" type="video/mp4"></video><figcaption>
 81 | 
 82 | [en]: <> (A banner describes what a full-screen gesture will do, and is displayed until the user dismisses it.)
 83 | 横幅描述了全屏手势执行的操作，并在用户取消它之前会持续显示。
 84 | 
 85 | </figcaption></figure></div></div>
 86 | 
 87 | 
 88 | [en]: <> (How to use)
 89 | <h2 id="how-to-use">如何使用</h2>
 90 | 
 91 | [en]: <> (Targeting & Triggering)
 92 | ### 定位 & 触发
 93 | 
 94 | [en]: <> (Gesture education should be displayed as the user needs it, not just in the first moments of using an app. It should help users interact with an element or surface in a way they have not done so previously.)
 95 | 手势指导应该只在用户需要的时候显示，而不仅仅是在用户首次使用应用时。它应该帮助用户以前所未有的方式与元素或界面进行交互。
 96 | 
 97 | [en]: <> (Whether the gesture affects only part of the screen, or the entire screen, similar targeting and triggering guidelines are used.)
 98 | 无论手势只影响屏幕的一部分、或影响整个屏幕，都会使用类似的定位和触发准则。
 99 | 
100 | [en]: <> (Targeting                                                                  | Triggering)
101 | [en]: <> (---------                                                                  |----------)
102 | [en]: <> (Show gesture education only to users who have not performed the gesture.   | <p>Gesture education occurs:</p><ul><li>During the first-run experience \(FRE\)</li><li>In later sessions, if a user has not performed the gesture</li><li>After a major change to the UI</li><p>If a certain gesture is core to the user experience, present it at a contextually relevant moment later in the first-run experience.</p><p>If a gesture is not critical to the experience, show it in a later session at a contextually relevant moment.</p>/ul>)
103 | 
104 | 定位                              | 触发
105 | --------                         |----------
106 | 仅向尚未执行手势的用户显示手势指导     | <p>手势指导发生在：</p><ul><li>用户首次体验应用（FRE）期间</li><li>之后的会话中，前提是用户没有执行过手势</li><li>对 UI 做了大的更改之后</li></ul><p>如果某个手势是用户体验的核心，则在用户首次体验应用时，在和用户所处情境相关的时刻，显示附加手势。</p><p>如果某个手势对用户体验不重要，则可以在稍后的会话中，在和用户所处情境相关的时刻显示它。</p>
107 | 
108 | [en]: <> (Volume)
109 | ### 数量
110 | 
111 | [en]: <> (Limit the number of gesture education prompts displayed in your app and UI.)
112 | 限制应用中显示的手势指导提示的数量。
113 | 
114 | [en]: <> (If a gesture is critical to your user experience, display up to two prompts during the first-run experience.)
115 | 如果某个手势对用户体验至关重要，则在用户首次体验应用时，可以最多显示两个手势指导提示。
116 | 
117 | [en]: <> (Frequency)
118 | ### 频率
119 | 
120 | [en]: <> (Most gesture education prompts should be shown only once.)
121 | 大部分手势指导提示应该只显示一次。
122 | 
123 | [en]: <> (If a gesture is critical to your user experience, display it up to two times in distinct sessions.)
124 | 如果某个手势对用户体验至关重要，则在不同会话中，最多显示两次。
125 | 
126 | </div>
127 | 


--------------------------------------------------------------------------------
/src/introduction/index.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Introduction)
  4 | # 介绍
  5 | 
  6 | [en]: <> (Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.)
  7 | 译文
  8 | 
  9 | </div><div class="article__body">
 10 | 
 11 | [en]: <> (Goals)
 12 | ### 目标
 13 | 
 14 | <figure>
 15 | 
 16 | ![]({assets_path}/introduction/index/intro-illo-intro.png)
 17 | 
 18 | </figure><div class="mdui-row-sm-3"><div class="mdui-col">
 19 | 
 20 | [en]: <> (创造)
 21 | #### 译文
 22 | 
 23 | [en]: <> (Create a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.)
 24 | 创造一个将经典的设计原则和科技、创新相结合的设计语言。
 25 | 
 26 | </div><div class="mdui-col">
 27 | 
 28 | [en]: <> (Unify)
 29 | #### 译文
 30 | 
 31 | [en]: <> (Develop a single underlying system that unifies the user experience across platforms, devices, and input methods.)
 32 | 译文
 33 | 
 34 | </div><div class="mdui-col">
 35 | 
 36 | [en]: <> (Customize)
 37 | #### 译文
 38 | 
 39 | [en]: <> (Expand Material’s visual language and provide a flexible foundation for innovation and brand expression.)
 40 | 译文
 41 | 
 42 | </div></div>
 43 | 
 44 | [en]: <> (Principles)
 45 | ### 原则
 46 | 
 47 | <figure>
 48 | 
 49 | ![]({assets_path}/introduction/index/intro-illo-metaphor.png)
 50 | 
 51 | </figure>
 52 | 
 53 | [en]: <> (Material is the metaphor)
 54 | #### Material 是一种隐喻
 55 | 
 56 | [en]: <> (Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.)
 57 | 译文
 58 | 
 59 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 60 | 
 61 | ![]({assets_path}/introduction/index/intro-illo-bold.png)
 62 | 
 63 | <figcaption>
 64 | 
 65 | [en]: <> (Bold, graphic, intentional)
 66 | #### 鲜明、形象、有意义
 67 | 
 68 | [en]: <> (Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.)
 69 | 译文
 70 | 
 71 | </figcaption></figure></div><div class="mdui-col"><figure>
 72 | 
 73 | ![]({assets_path}/introduction/index/intro-illo-motion.png)
 74 | 
 75 | <figcaption>
 76 | 
 77 | [en]: <> (Motion provides meaning)
 78 | #### 有意义的动画效果
 79 | 
 80 | [en]: <> (Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment, with interactions generating new transformations.)
 81 | 译文
 82 | 
 83 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 84 | 
 85 | ![]({assets_path}/introduction/index/intro-illo-flexible.png)
 86 | 
 87 | <figcaption>
 88 | 
 89 | [en]: <> (Flexible foundation)
 90 | #### 译文
 91 | 
 92 | [en]: <> (The Material Design system is designed to enable brand expression. It’s integrated with a custom code base that allows the seamless implementation of components, plug-ins, and design elements.)
 93 | 译文
 94 | 
 95 | </figcaption></figure></div><div class="mdui-col"><figure>
 96 | 
 97 | ![]({assets_path}/introduction/index/intro-illo-cross-platform.png)
 98 | 
 99 | <figcaption>
100 | 
101 | [en]: <> (Cross-platform)
102 | #### 跨平台
103 | 
104 | [en]: <> (Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web.)
105 | 译文
106 | 
107 | </figcaption></figure></div></div>
108 | 
109 | [en]: <> (Getting around)
110 | ### 译文
111 | 
112 | [en]: <> (Our comprehensive guidance helps you make beautiful products, faster. Design and build with new tools for customizing Material and sharing work, find inspiration in the Material studies, and express your product’s unique identity with Material Theming.)
113 | 译文
114 | 
115 | [en]: <> (Find what you need by navigating across these three sections:)
116 | 译文
117 | 
118 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
119 | 
120 | ![]({assets_path}/introduction/index/intro-illo-system.png)
121 | 
122 | <figcaption>
123 | 
124 | [en]: <> (Material System)
125 | #### 译文
126 | 
127 | [en]: <> (Our expanded and enhanced design system is unified with Material tools and components to improve workflow between design and development.)
128 | 译文
129 | 
130 | </figcaption></figure></div><div class="mdui-col"><figure>
131 | 
132 | ![]({assets_path}/introduction/index/intro-illo-foundation.png)
133 | 
134 | <figcaption>
135 | 
136 | [en]: <> (Material Foundation)
137 | #### 译文
138 | 
139 | [en]: <> (Design and strategize how to build your app using Material Design architecture, while learning the principles and theory that underpin Material Design.)
140 | 译文
141 | 
142 | </figcaption></figure></div><div class="mdui-col"><figure>
143 | 
144 | ![]({assets_path}/introduction/index/intro-illo-guidance.png)
145 | 
146 | <figcaption>
147 | 
148 | [en]: <> (Material Guidelines)
149 | #### 译文
150 | 
151 | [en]: <> (Customize and deploy a unique Material theme systematically across your product – from design to code.)
152 | 译文
153 | 
154 | </figcaption></figure></div></div>
155 | 
156 | [en]: <> (You can still view the [previous set of Material Guidelines]\(https://www.mdui.org/archive/guidelines/\).)
157 | 译文
158 | 
159 | [en]: <> (Updates)
160 | ### 译文
161 | 
162 | [en]: <> (Material is designed to evolve over time. Starting in May 2018, we’ll deliver on a monthly release cadence to increase the expressive capabilities of the Material Design system, bringing you even more Material Theming capability.)
163 | 译文
164 | 
165 | [en]: <> (Sign up to [receive release notifications by email]\(https://services.google.com/fb/forms/google-design-updates/\), and view the latest release notes and [release plan on GitHub]\(https://github.com/material-components/material-components/blob/develop/ROADMAP.md/\).)
166 | 译文
167 | 
168 | </div>
169 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-split-screen.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android split-screen)
  4 | # Android 分屏
  5 | 
  6 | [en]: <> (Split-screen mode allows two activities to be visible on screen at the same time.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Behavior)
 13 | [en]: <> (Layout)
 14 | * [译文](#usage)
 15 | * [译文](#behavior)
 16 | * [译文](#layout)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Usage)
 21 | <h2 id="usage">译文</h2>
 22 | 
 23 | [en]: <> (Apps are not authorized to invoke split-screen mode by themselves; the user must activate it.)
 24 | 译文
 25 | 
 26 | [en]: <> (Launching new activities)
 27 | ### 译文
 28 | 
 29 | [en]: <> (When an app launches a new activity, it will launch within the same portion of the screen by default. Apps will be resized to fit the split-screen view as necessary \(unless your app isn’t compatible with the split-screen format\).)
 30 | 译文
 31 | 
 32 | [en]: <> (When split-screen mode is active, apps may launch new activities in the opposite portion of the screen if the following criteria are met:)
 33 | 译文
 34 | 
 35 | [en]: <> (The original and new activities are related to each other and usable while in split-screen mode)
 36 | [en]: <> (The task that the app helps accomplish warrants displaying two activities at once, and hiding the other app that was open)
 37 | [en]: <> (It is clear that the app will enter split-screen mode, such as with a button stating “Open in new window”)
 38 | * 译文
 39 | * 译文
 40 | * 译文
 41 | 
 42 | <figure>
 43 | 
 44 | ![]({assets_path}/platform-guidance/android-split-screen/01-splitscreen-intro.png)
 45 | 
 46 | <figcaption>
 47 | 
 48 | [en]: <> (Split screen shown in portrait mode on mobile \(on the left\) and landscape mode on tablet \(on the right\))
 49 | 译文
 50 | 
 51 | </figcaption></figure>
 52 | 
 53 | [en]: <> (Behavior)
 54 | <h2 id="behavior">译文</h2>
 55 | 
 56 | [en]: <> (Split-screen mode remains active until the user cancels it or switches to an incompatible app.)
 57 | 译文
 58 | 
 59 | [en]: <> (Resizing split screen)
 60 | ### 译文
 61 | 
 62 | [en]: <> (Users may move and resize each screen in split-screen mode by dragging the divider between the two split screens.)
 63 | 译文
 64 | 
 65 | [en]: <> (Edge swipe gestures)
 66 | ### 译文
 67 | 
 68 | [en]: <> (When split-screen mode is active, the edge swipe gesture will likely not work as intended. Because split-screen mode relies on swiping to resize each split screen, if your app also relies on edge swipes to perform actions, then it’s possible that the swipe will either trigger screen resizing or an action in your app.)
 69 | 译文
 70 | 
 71 | [en]: <> (To avoid this, edge swipes should not be the only way to perform actions in your app. There should be an alternative method to perform each action.)
 72 | 译文
 73 | 
 74 | [en]: <> (For example, the navigation drawer enables an edge swipe to open the drawer, but it is also accessible by pressing the menu icon.)
 75 | 译文
 76 | 
 77 | [en]: <> (Layout)
 78 | <h2 id="layout">译文</h2>
 79 | 
 80 | [en]: <> (To support split-screen usage, viewable content should be scaled to an appropriate size and density.)
 81 | 译文
 82 | 
 83 | [en]: <> (Primary controls should be adapted for split-screen mode. For example, navigation tabs may be collapsed into a menu.)
 84 | 译文
 85 | 
 86 | [en]: <> (Responsive UI)
 87 | ### 译文
 88 | 
 89 | [en]: <> (Apps in split-screen mode should elegantly adjust across device sizes and orientations.)
 90 | 译文
 91 | 
 92 | [en]: <> (The screen is split along the x-axis in portrait, and along the y-axis in landscape. Changing a device’s orientation should not cause the UI to change unexpectedly. For example, a video displayed in one side of a split screen shouldn’t switch to full-screen if the device is rotated from portrait to landscape orientation.)
 93 | 译文
 94 | 
 95 | [en]: <> (Apps may use the same or different layouts for mobile and tablet:)
 96 | 译文
 97 | 
 98 | [en]: <> (Apps with similar layouts for mobile and tablet may switch between the tablet and mobile UIs when the app is resized, as the transition will not be jarring.)
 99 | [en]: <> (Apps with completely different layouts for mobile and tablet should avoid using the mobile UI on tablet in split-screen mode. Instead, the existing tablet UI should be adapted to fit the smaller size to ensure that users have a consistent experience on both devices.)
100 | * 译文
101 | * 译文
102 | 
103 | <figure>
104 | 
105 | ![]({assets_path}/platform-guidance/android-split-screen/02-splitscreen-samelayout.png)
106 | 
107 | <figcaption>
108 | 
109 | [en]: <> (An app may use the same layout across mobile \(left\) and tablet \(right\).)
110 | 译文
111 | 
112 | </figcaption></figure><figure>
113 | 
114 | ![]({assets_path}/platform-guidance/android-split-screen/03-splitscreen-differentlayout.png)
115 | 
116 | <figcaption>
117 | 
118 | [en]: <> (An app may use different layouts across mobile \(left\) and tablet \(right\).)
119 | 译文
120 | 
121 | </figcaption></figure>
122 | 
123 | [en]: <> (Design for condensed sizes)
124 | ### 译文
125 | 
126 | [en]: <> (To simplify adapting your app for the various sizes of split-screen mode, it is recommended to design for the smallest size first.)
127 | 译文
128 | 
129 | [en]: <> (Create a layout that works at 220dp wide or tall by condensing elements or removing non-essential ones. The layout may be scaled upward from there.)
130 | 译文
131 | 
132 | <figure>
133 | 
134 | ![]({assets_path}/platform-guidance/android-split-screen/04-splitscreen-34.15-tablet.png)
135 | 
136 | <figcaption>
137 | 
138 | [en]: <> (When the split screen is active on a tablet, by default it takes up 34.15% of the entire screen.)
139 | 译文
140 | 
141 | </figcaption></figure><figure>
142 | 
143 | ![]({assets_path}/platform-guidance/android-split-screen/05-splitscreen-16.9-mobile.png)
144 | 
145 | <figcaption>
146 | 
147 | [en]: <> (When the split screen is active on mobile, the aspect ratio of an app in portrait orientation is 16:9.)
148 | 译文
149 | 
150 | </figcaption></figure></div>
151 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-widget.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android widget)
  4 | # Android 小部件
  5 | 
  6 | [en]: <> (Widgets display glanceable information of an app's most important data and functionality.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Types)
 12 | [en]: <> (Behavior)
 13 | * [译文](#types)
 14 | * [译文](#behavior)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Types)
 19 | <h2 id="types">译文</h2>
 20 | 
 21 | [en]: <> (Widgets display your app’s new and interesting content in a consolidated form on a mobile home screen. They link to richer detail within the app.)
 22 | 译文
 23 | 
 24 | [en]: <> (Users can move and, if supported, resize widgets across their home screen panels.)
 25 | 译文
 26 | 
 27 | [en]: <> (Information widgets)
 28 | #### 译文
 29 | 
 30 | [en]: <> (Information widgets display a few elements of importance to a user and track how that information changes over time, such as weather or sports scores. Tapping the widget launches the associated app into a detail screen.)
 31 | 译文
 32 | 
 33 | <figure>
 34 | 
 35 | ![]({assets_path}/platform-guidance/android-widget/as-widget-types-information.png)
 36 | 
 37 | <figcaption>
 38 | 
 39 | [en]: <> (An information widget)
 40 | 译文
 41 | 
 42 | </figcaption></figure>
 43 | 
 44 | [en]: <> (Collection widgets)
 45 | #### 译文
 46 | 
 47 | [en]: <> (Collection widgets display multiple elements of the same type, such as a collection of articles from a news app. They focus on two interactions:)
 48 | 译文
 49 | 
 50 | [en]: <> (Browsing a collection)
 51 | [en]: <> (Opening an element’s detail screen)
 52 | * 译文
 53 | * 译文
 54 | 
 55 | [en]: <> (Collection widgets can scroll vertically.)
 56 | 译文
 57 | 
 58 | <figure>
 59 | 
 60 | ![]({assets_path}/platform-guidance/android-widget/as-widget-types-collection-1.png)
 61 | 
 62 | <figcaption>
 63 | 
 64 | [en]: <> (A collection widget)
 65 | 译文
 66 | 
 67 | </figcaption></figure><figure>
 68 | 
 69 | ![]({assets_path}/platform-guidance/android-widget/as-widget-types-collection-2.png)
 70 | 
 71 | <figcaption>
 72 | 
 73 | [en]: <> (A collection widget)
 74 | 译文
 75 | 
 76 | </figcaption></figure>
 77 | 
 78 | [en]: <> (Control widgets)
 79 | #### 译文
 80 | 
 81 | [en]: <> (Control widgets display frequently used functions. These functions may be triggered from the home screen without opening the app. For example, music app widgets allow the user to play, pause, or skip music tracks from outside the music app.)
 82 | 译文
 83 | 
 84 | [en]: <> (Control widgets may or may not progress to a detail screen.)
 85 | 译文
 86 | 
 87 | <figure>
 88 | 
 89 | ![]({assets_path}/platform-guidance/android-widget/as-widget-types-control.png)
 90 | 
 91 | <figcaption>
 92 | 
 93 | [en]: <> (A control widget)
 94 | 译文
 95 | 
 96 | </figcaption></figure>
 97 | 
 98 | [en]: <> (Hybrid widgets)
 99 | #### 译文
100 | 
101 | [en]: <> (Many widgets are hybrids that combine elements of the different types above. Center your widget around one of these types and add elements of others as needed.)
102 | 译文
103 | 
104 | <figure>
105 | 
106 | ![]({assets_path}/platform-guidance/android-widget/as-widget-types-hybrid.png)
107 | 
108 | <figcaption>
109 | 
110 | [en]: <> (A hybrid music player widget combines a control widget with elements of an information widget. The result keeps the user informed about which track is currently playing. )
111 | 译文
112 | 
113 | </figcaption></figure>
114 | 
115 | [en]: <> (Behavior)
116 | <h2 id="behavior">译文</h2>
117 | 
118 | [en]: <> (Scrolling)
119 | ### 译文
120 | 
121 | [en]: <> (Scrollable widgets)
122 | #### 译文
123 | 
124 | [en]: <> (List or grid-based collection widgets usually expand or contract the vertical scrolling area. Regardless of the widget's size, the user can still scroll all elements into view.)
125 | 译文
126 | 
127 | [en]: <> (Determine how much of your app's information should surface. For smaller widget sizes, concentrate on the essential and then add more contextual information as the widget grows.)
128 | 译文
129 | 
130 | [en]: <> (Non-scrollable widgets)
131 | #### 译文
132 | 
133 | [en]: <> (Information widgets are not scrollable. All content and layout must dynamically fit into the size selected by the user.)
134 | 译文
135 | 
136 | [en]: <> (Resizing)
137 | ### 译文
138 | 
139 | [en]: <> (Resizing allows users to adjust the height or width of a widget. This allows users to influence the layout of widgets on home panels.)
140 | 译文
141 | 
142 | [en]: <> (Your app may be completely resizable or constrained to horizontal or vertical size changes.)
143 | 译文
144 | 
145 | <figure>
146 | 
147 | ![]({assets_path}/platform-guidance/android-widget/as-widget-behavior-resizing.png)
148 | 
149 | <figcaption>
150 | 
151 | [en]: <> (A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size.)
152 | 译文
153 | 
154 | </figcaption></figure>
155 | 
156 | [en]: <> (Responsive resizing)
157 | #### 译文
158 | 
159 | [en]: <> (Widgets should accommodate different spacing requirements across devices, including cell number, size, and spacing variations.)
160 | 译文
161 | 
162 | [en]: <> (Navigation)
163 | ### 译文
164 | 
165 | [en]: <> (Your widgets should provide navigation links to frequently used areas of your app, including:)
166 | 译文
167 | 
168 | [en]: <> (Functions that allow the user to create new content, such as a new document or message)
169 | [en]: <> (Access to the top level of your app)
170 | * 译文
171 | * 译文
172 | 
173 | [en]: <> (Configuring)
174 | ### 译文
175 | 
176 | [en]: <> (Once placed on a home screen panel, Android widgets display their configuration choices.)
177 | 译文
178 | 
179 | [en]: <> (Configuration should:)
180 | 译文
181 | 
182 | [en]: <> (Present no more than 2-3 configuration elements)
183 | [en]: <> (Present choices using dialogs, rather than full-screen, to retain the user's context)
184 | * 译文
185 | * 译文
186 | 
187 | [en]: <> (Once setup, widgets do not typically show a "Setup" or "Configuration" button.)
188 | 译文
189 | 
190 | </div>
191 | 


--------------------------------------------------------------------------------
/src/communication/empty-states.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Empty states)
  4 | # 空状态
  5 | 
  6 | [en]: <> (Empty states occur when an item’s content can’t be shown.)
  7 | 无法显示项目的内容时，会显示空状态。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Content)
 12 | [en]: <> (Alternatives)
 13 | * [内容](#content)
 14 | * [备选方案](#alternatives)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Content)
 19 | <h2 id="content">内容</h2>
 20 | 
 21 | [en]: <> (Empty states can display a wide variety of content. For example, they can include a list without list items, or a search that returns no results. Although these states aren’t typical, they should be designed to prevent confusion.)
 22 | 空状态可以显示各种各样的内容。例如它可以包含一个没有列表项目的列表，或者不包含任何结果的搜索。虽然这些状态并不具有代表性，但它们也应该被设计成防止用户混淆。
 23 | 
 24 | [en]: <> (Displaying an empty state)
 25 | ### 显示空状态
 26 | 
 27 | [en]: <> (The most basic empty state consists of a non-interactive image and a text tagline.)
 28 | 最基本的空状态由非交互式的图像和文本标语组成。
 29 | 
 30 | [en]: <> (Use an image that:)
 31 | 使用的图像应该：
 32 | 
 33 | [en]: <> (Has a neutral or humorous tone)
 34 | [en]: <> (Is consistent with your brand)
 35 | * 具有中性或幽默的语调
 36 | * 与你的品牌保持一致
 37 | 
 38 | [en]: <> (Include a tagline that:)
 39 | 使用的标语应该：
 40 | 
 41 | [en]: <> (Has a helpful message)
 42 | [en]: <> (Is consistent with your brand)
 43 | [en]: <> (Conveys the purpose of the screen, without appearing actionable)
 44 | * 包含一个有用的信息
 45 | * 与你的品牌保持一致
 46 | * 传达当前屏幕的目的，不要出现可执行的操作
 47 | 
 48 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 49 | 
 50 | ![]({assets_path}/communication/empty-states/empty-state-do.png)
 51 | 
 52 | <figcaption>
 53 | 
 54 | {do}
 55 | 
 56 | [en]: <> (If it aligns with your brand, you can use a humorous image and tagline that conveys the purpose of the screen, without appearing actionable.)
 57 | 如果它与你的品牌相一致，你可以使用幽默的图像或标语来传达屏幕的目的，而不会显得有可操作性。
 58 | 
 59 | </figcaption></figure></div><div class="mdui-col"><figure>
 60 | 
 61 | ![]({assets_path}/communication/empty-states/empty-state-dont.png)
 62 | 
 63 | <figcaption>
 64 | 
 65 | {dont}
 66 | 
 67 | [en]: <> (Don’t use a tagline worded like a call to action, as empty tags aren’t interactive and don’t respond when tapped. Images that express urgency or confusion should also be avoided.)
 68 | 不要使用号召性的标语，因为空状态不能进行交互，在点击时也不会有响应。同时应该避免使用表示紧急或混乱的图像。
 69 | 
 70 | </figcaption></figure></div></div>
 71 | 
 72 | [en]: <> (Alternatives)
 73 | <h2 id="alternatives">备选方案</h2>
 74 | 
 75 | <div class="mdui-row-sm-2"><div class="mdui-col">
 76 | 
 77 | [en]: <> (Starter content)
 78 | #### 启动器内容
 79 | 
 80 | [en]: <> (To help users new to an app or section, screens which would otherwise be empty can be populated with starter content. Starter content allows users to begin using an app right away, making it easier for them to learn about what an app has to offer.)
 81 | 为了帮助用户使用应用，本来显示空状态的屏幕，可以显示启动器内容作为替代。启动器内容可以帮助用户立即开始使用应用，使他们更容易了解应用的功能。
 82 | 
 83 | [en]: <> (Recommendations:)
 84 | 建议：
 85 | 
 86 | [en]: <> (Starter content is best for apps that store content \(such as books or music\), or create templated content \(such as notes or documents\).)
 87 | [en]: <> (Use content that has broad appeal and demonstrates primary features.)
 88 | [en]: <> (Give users the ability to delete and replace starter content.)
 89 | [en]: <> (If possible, provide content that's personalized.)
 90 | * 启动器内容最适合用于内容型应用（如图书或音乐），或者创建模板内容（例如笔记或文档）。
 91 | * 使用具有较大吸引力的内容，并展示主要特性。
 92 | * 使用户能自主删除或替换启动器内容。
 93 | * 有可能的话，向用户提供个性化内容。
 94 | 
 95 | </div><div class="mdui-col"><figure>
 96 | 
 97 | ![]({assets_path}/communication/empty-states/emptystate-default.png)
 98 | 
 99 | <figcaption>
100 | 
101 | [en]: <> (A reading app might provide all users with a few free popular books to immediately start exploring the app.)
102 | 一款阅读应用可以为所有用户提供一些免费的热门书籍，使用户能快速开始探索这款应用。
103 | 
104 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col">
105 | 
106 | [en]: <> (Educational content)
107 | #### 教育性内容
108 | 
109 | [en]: <> (If the purpose of the screen isn't easily conveyed through an image and tagline, consider showing educational content instead. Educational content helps users understand what an app will be able to do once it has content.)
110 | 如果屏幕的内容不方便通过图像和标语来传达，可以考虑展示教育性内容。教育性内容可以帮助用户了解在此屏幕上有新内容后，他们能在此屏幕上执行哪些操作。
111 | 
112 | [en]: <> (Recommendations:)
113 | 建议：
114 | 
115 | [en]: <> (Make it possible to dismiss or skip this content.)
116 | [en]: <> (Keep it brief.)
117 | [en]: <> (Keep content contextual to the screen. This should not be a place to onboard the user to the entire app.)
118 | * 使用户能忽略或跳过这些内容。
119 | * 保持简短
120 | * 确保内容和当前屏幕相关。这里不应该是引导用户使用整个应用的地方。
121 | 
122 | </div><div class="mdui-col"><figure>
123 | 
124 | ![]({assets_path}/communication/empty-states/emptystate-educational.png)
125 | 
126 | <figcaption>
127 | 
128 | [en]: <> (The user has no movies yet, but instead of showing an empty state, a dismissable card explains the features and benefits of the service.)
129 | 该用户还没有购买任何电影，但没有显示空状态，而是使用一个卡片解释了该服务的功能和优点。
130 | 
131 | </figcaption></figure></div></div>
132 | 
133 | [en]: <> (Best match)
134 | #### 最佳匹配
135 | 
136 | [en]: <> (If nothing exactly matches a user's query, content that contains the *best match* to the query can be displayed, by returning results for a query spelled slightly differently. By showing these results, the user may find what they're looking for.)
137 | 如果没有和用户的搜索完全匹配的结果，则可以通过返回和搜索词的拼写稍有不同的搜索结果，显示和该搜索“最匹配”的内容。通过显示这些结果，可能会帮助用户更快找到他们想找的内容。
138 | 
139 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
140 | 
141 | ![]({assets_path}/communication/empty-states/emptystate-searchresults-1.png)
142 | 
143 | <figcaption>
144 | 
145 | [en]: <> (A best query match)
146 | 最佳搜索匹配示例
147 | 
148 | </figcaption></figure></div><div class="mdui-col"><figure>
149 | 
150 | ![]({assets_path}/communication/empty-states/emptystate-searchresults-2.png)
151 | 
152 | <figcaption>
153 | 
154 | [en]: <> (A heading identifies the content as best match results.)
155 | 把最佳匹配结果作为大标题显示。
156 | 
157 | </figcaption></figure></div></div></div></div>
158 | 


--------------------------------------------------------------------------------
/src/navigation/navigation-transitions.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Navigation transitions)
  4 | # 导航转换
  5 | 
  6 | [en]: <> (Navigational transitions occur when users move between screens, such as from a home screen to a detail screen.)
  7 | 译文
  8 | 
  9 | <figure>
 10 | 
 11 | ![]({assets_path}/navigation/navigation-transitions/navigationtransitions-hero-1.png)
 12 | 
 13 | </figure><nav>
 14 | 
 15 | [en]: <> (About navigation transitions)
 16 | [en]: <> (Hierarchical transitions)
 17 | [en]: <> (Peer transitions)
 18 | * [译文](#about-navigation-transitions)
 19 | * [译文](#hierarchical-transitions)
 20 | * [译文](#peer-transitions)
 21 | 
 22 | </nav></div><div class="article__body">
 23 | 
 24 | [en]: <> (About navigation transitions)
 25 | <h2 id="about-navigation-transitions">译文</h2>
 26 | 
 27 | [en]: <> (Navigation and motion)
 28 | ### 译文
 29 | 
 30 | [en]: <> (Navigation transitions use motion to guide users between two screens in your app. They help users orient themselves by expressing your app’s hierarchy, using movement to indicate how elements are related to one another.)
 31 | 译文
 32 | 
 33 | [en]: <> (For example, when an element expands to fill the entire screen, the act of expansion expresses that the new screen is a *child* element. The screen from which it expanded is its *parent* element.)
 34 | 译文
 35 | 
 36 | [en]: <> (Hierarchy)
 37 | ### 译文
 38 | 
 39 | [en]: <> (Hierarchical transitions move users one level upwards or downwards through an app’s hierarchy, while peer transitions move users between siblings \(screens of equal hierarchy\).)
 40 | 译文
 41 | 
 42 | [en]: <> (Hierarchical transitions)
 43 | <h2 id="hierarchical-transitions">译文</h2>
 44 | 
 45 | [en]: <> (Hierarchical transitions reflect when users move one level up, or down, in an app. Screens at adjacent levels to one another have a parent and child relationship with one another, in which the parent is placed at a higher level of hierarchy than its child.)
 46 | 译文
 47 | 
 48 | [en]: <> (Parent-child transitions)
 49 | #### 译文
 50 | 
 51 | [en]: <> (From a parent screen, an embedded child element lifts up on touch and expands in place, using the *standard easing curve* The motion both draws focus to the child screen \(which is the destination of the interaction\), while reinforcing the relationship between parent and child screens.)
 52 | 译文
 53 | 
 54 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/hierarchicaltransitions-1-spec.mp4" src="{assets_path}/navigation/navigation-transitions/hierarchicaltransitions-1-spec.mp4" type="video/mp4"></video><figcaption>
 55 | 
 56 | [en]: <> (A parent-to-child transition)
 57 | 译文
 58 | 
 59 | </figcaption></figure><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/hierarchicaltransitions-reply-1a.mp4" src="{assets_path}/navigation/navigation-transitions/hierarchicaltransitions-reply-1a.mp4" type="video/mp4"></video><figcaption>
 60 | 
 61 | [en]: <> (Message previews in this email app lift and expand in place to reveal the full message.)
 62 | 译文
 63 | 
 64 | </figcaption></figure>
 65 | 
 66 | [en]: <> (Peer transitions)
 67 | <h2 id="peer-transitions">译文</h2>
 68 | 
 69 | [en]: <> (*Peer transitions* occur between screens at the same level of hierarchy.)
 70 | 译文
 71 | 
 72 | [en]: <> (*Sibling transitions* occur between peers that share a parent, while *top-level peer transitions* are only used for switching between primary destinations.)
 73 | 译文
 74 | 
 75 | [en]: <> (Sibling transitions)
 76 | ### 译文
 77 | 
 78 | [en]: <> (Screens that share the same parent \(such as photos in an album, sections of a profile, or steps in a flow\) move in unison to reinforce their relationship to one another. The peer screen slides in from the one side, while its sibling moves off screen in the opposite direction.)
 79 | 译文
 80 | 
 81 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/peertransitions-1-spec.mp4" src="{assets_path}/navigation/navigation-transitions/peertransitions-1-spec.mp4" type="video/mp4"></video><figcaption>
 82 | 
 83 | [en]: <> (Tabs indicate they are related by sitting at the same elevation and moving together.)
 84 | 译文
 85 | 
 86 | </figcaption></figure><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/peertransitions-crane-1b.mp4" src="{assets_path}/navigation/navigation-transitions/peertransitions-crane-1b.mp4" type="video/mp4"></video><figcaption>
 87 | 
 88 | [en]: <> (This travel app uses tabs to allow switching between three different types of trips.)
 89 | 译文
 90 | 
 91 | </figcaption></figure>
 92 | 
 93 | [en]: <> (Top-level transitions)
 94 | ### 译文
 95 | 
 96 | [en]: <> (At the top level of an app, destinations are often grouped into major tasks \(and the tasks may not relate to one another\). These screens transition in place by changing values such as opacity and scale.)
 97 | 译文
 98 | 
 99 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/peertransitions-bottomnav.mp4" src="{assets_path}/navigation/navigation-transitions/peertransitions-bottomnav.mp4" type="video/mp4"></video><figcaption>
100 | 
101 | [en]: <> (Destinations in a bottom navigation bar transition in place.)
102 | 译文
103 | 
104 | </figcaption></figure><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/navigation/navigation-transitions/peertransitions-bottomnav-baseline.mp4" src="{assets_path}/navigation/navigation-transitions/peertransitions-bottomnav-baseline.mp4" type="video/mp4"></video><figcaption>
105 | 
106 | [en]: <> (The top-level destinations of this photo app transition appropriately, given that the destinations aren’t strongly related to one another.)
107 | 译文
108 | 
109 | </figcaption></figure></div>
110 | 


--------------------------------------------------------------------------------
/src/communication/launch-screen.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Launch screen)
  4 | # 启动页
  5 | 
  6 | [en]: <> (The launch screen is a user’s first experience of your app.)
  7 | 启动页是用户对应用的第一体验。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Placeholder UI)
 13 | [en]: <> (Branded launch)
 14 | * [用法](#usage)
 15 | * [占位符 UI](#placeholder-ui)
 16 | * [品牌启动页](#branded-launch)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Usage)
 21 | <h2 id="usage">用法</h2>
 22 | 
 23 | [en]: <> (Using launch screens)
 24 | ### 使用启动页
 25 | 
 26 | [en]: <> (Launch screens can be displayed upon an app’s launch from the home screen when an app loads, instead of displaying a blank screen. Displaying a launch screen can decrease the sense of a long load time, and has the potential to add delight to the user experience.)
 27 | 当应用从主屏幕启动时，可以显示启动页，而不是空白页面。显示启动页可以减少用户感官上的加载时间，且有可能为用户的体验增添乐趣。
 28 | 
 29 | [en]: <> (Launch screens shouldn’t be displayed if an app is running.)
 30 | 如果应用正在允许，则不应该显示启动页。
 31 | 
 32 | [en]: <> (Types of launch screens)
 33 | ### 启动页类型
 34 | 
 35 | [en]: <> (There are two types of launch screens:)
 36 | 有两种类型的启动页：
 37 | 
 38 | [en]: <> (Placeholder UI launch screens display a non-interactive preview of the app’s actual UI. This launch screen is appropriate for both app launches and activity transitions within an app.)
 39 | [en]: <> (Branded launch screens provide momentary brand exposure.)
 40 | * 占位符 UI 启动页显示应用实际 UI 的非交互式预览。这种启动页同时适用于应用的启动和应用内页面的切换。
 41 | * 品牌启动页提供短暂的品牌展示。
 42 | 
 43 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 44 | 
 45 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-01.png)
 46 | 
 47 | <figcaption>
 48 | 
 49 | [en]: <> (Branded launch screen)
 50 | 品牌启动页
 51 | 
 52 | </figcaption></figure></div><div class="mdui-col"><figure>
 53 | 
 54 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-03.png)
 55 | 
 56 | <figcaption>
 57 | 
 58 | [en]: <> (Placeholder UI)
 59 | 占位符 UI
 60 | 
 61 | </figcaption></figure></div></div>
 62 | 
 63 | [en]: <> (Placeholder UI)
 64 | <h2 id="placeholder-ui">占位符 UI</h2>
 65 | 
 66 | [en]: <> (Usage)
 67 | ### 用法
 68 | 
 69 | <div class="mdui-row-sm-2"><div class="mdui-col">
 70 | 
 71 | [en]: <> (For apps with short loading times, or that aren’t promoting branding, a placeholder UI displays the fewest possible shifts from the launch screen to the app. Additionally, placeholder UIs have a higher perceived response time.)
 72 | 当应用的加载时间非常短，或没有强烈的品牌需求时，使用占位符 UI 可以显示尽可能少的过渡效果。此外占位符 UI 具有更高的感知响应时间。
 73 | 
 74 | </div><div class="mdui-col"><figure>
 75 | 
 76 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-03.png)
 77 | 
 78 | <figcaption>
 79 | 
 80 | [en]: <> (A placeholder UI)
 81 | 占位符 UI
 82 | 
 83 | </figcaption></figure></div></div>
 84 | 
 85 | [en]: <> (Behavior)
 86 | ### 行为
 87 | 
 88 | [en]: <> (On launch, core structural elements – such as the status bar, app bar, and bottom sheet – are displayed without content until the app has loaded.)
 89 | 启动时，核心结构元素（例如状态栏、应用栏和底部卡片）将在没有内容的情况下显示，直至应用内容加载完毕。
 90 | 
 91 | [en]: <> (Placeholder elements, with subtle animation, should be displayed in locations where content will load.)
 92 | 应该在内容加载的位置显示带有微妙动画的占位符元素。
 93 | 
 94 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/launch-screen/02-fortnightly-loading-do.mp4" src="{assets_path}/communication/launch-screen/02-fortnightly-loading-do.mp4" type="video/mp4"></video><figcaption>
 95 | 
 96 | {do}
 97 | 
 98 | [en]: <> (A branded indicator is displayed until a placeholder UI loads. Content loads using a subtle fade transition.)
 99 | 在占位符 UI 载入前，先显示品牌指示符。内容的加载需要使用微妙的淡入淡出动画。
100 | 
101 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/launch-screen/02-fortnightly-loading-dont.mp4" src="{assets_path}/communication/launch-screen/02-fortnightly-loading-dont.mp4" type="video/mp4"></video><figcaption>
102 | 
103 | {dont}
104 | 
105 | [en]: <> (Don’t display multiple progress indicators, which divide focus.)
106 | 不要使用多个进度指示符，这会分散焦点。
107 | 
108 | </figcaption></figure></div></div>
109 | 
110 | [en]: <> (Placeholder elements should remain positioned where content will load to avoid unexpected shifts in positioning.)
111 | 占位符元素的位置应该和即将加载的内容的位置一致，以避免产生突然的位置变化。
112 | 
113 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/launch-screen/02-fortnightly-loadinglayout-dont.mp4" src="{assets_path}/communication/launch-screen/02-fortnightly-loadinglayout-dont.mp4" type="video/mp4"></video><figcaption>
114 | 
115 | {dont}
116 | 
117 | [en]: <> (Don’t display content that rearranges itself instantly as it loads, as this can produce a jarring experience.)
118 | 不要在加载完后马上重新排列内容并显示，因为这会导致很不和谐的体验。
119 | 
120 | </figcaption></figure>
121 | 
122 | [en]: <> (Branded launch)
123 | <h2 id="branded-launch">品牌启动页</h2>
124 | 
125 | [en]: <> (Usage)
126 | ### 用法
127 | 
128 | [en]: <> (Branded launch screens express branding while an app loads, by displaying a logo or other elements that improve brand recognition. Avoid using text on this screen except your logo and, if applicable, a tagline.)
129 | 品牌启动页可以在应用加载时，显示 Logo 或其他能提升品牌认知度的元素，来展示品牌形象。避免在此屏幕上使用文字，但你的 Logo 和标语（适用的话）除外。
130 | 
131 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
132 | 
133 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-01.png)
134 | 
135 | <figcaption>
136 | 
137 | [en]: <> (Examples of branded launch screens)
138 | 品牌启动页示例
139 | 
140 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/communication/launch-screen/fortnightly-launch.mp4" src="{assets_path}/communication/launch-screen/fortnightly-launch.mp4" type="video/mp4"></video></figure></div></div><figure>
141 | 
142 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-04.png)
143 | 
144 | </figure><figure>
145 | 
146 | ![]({assets_path}/communication/launch-screen/communication-launch-screens-05.png)
147 | 
148 | </figure></div>
149 | 


--------------------------------------------------------------------------------
/src/environment/light-shadows.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Light and shadows)
  4 | # 光亮和阴影
  5 | 
  6 | [en]: <> (Material surfaces cast shadows when they obstruct light sources.)
  7 | 当光源被阻挡时会在材料表面产生阴影
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Light)
 12 | [en]: <> (Shadows)
 13 | * [光源](#light)
 14 | * [阴影](#shadows)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Light)
 19 | <h2 id="light">光源</h2>
 20 | 
 21 | [en]: <> (Light and shadows)
 22 | ### 光源和阴影
 23 | 
 24 | [en]: <> (In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.)
 25 | 在Material Design的环境中，由虚拟光源照亮UI。关键光源会投射更锐利，有引导性阴影，称为关键阴影； 而环境光源会从各个角度出现，并投射分散的柔和阴影，称为环境阴影。
 26 | 
 27 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 28 | 
 29 | ![]({assets_path}/environment/light-shadows/lightshadows-1.png)
 30 | 
 31 | <figcaption>
 32 | 
 33 | [en]: <> (Shadow cast by a key light)
 34 | 由关键光源投射的阴影
 35 | 
 36 | </figcaption></figure></div><div class="mdui-col"><figure>
 37 | 
 38 | ![]({assets_path}/environment/light-shadows/lightshadows-2.png)
 39 | 
 40 | <figcaption>
 41 | 
 42 | [en]: <> (Shadow cast by ambient light)
 43 | 由环境光源投射的阴影
 44 | 
 45 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 46 | 
 47 | ![]({assets_path}/environment/light-shadows/lightshadows-3.png)
 48 | 
 49 | <figcaption>
 50 | 
 51 | [en]: <> (Combined shadow from key and ambient lights)
 52 | 同时含有由环境和关键光源所投射的阴影
 53 | 
 54 | </figcaption></figure></div><div class="mdui-col"><figure>
 55 | 
 56 | ![]({assets_path}/environment/light-shadows/lightshadows-4.png)
 57 | 
 58 | <figcaption>
 59 | 
 60 | [en]: <> (Elements use shadows on dark surfaces, even if they are less visible.)
 61 | 元素在深色表面上使用阴影，即使可见度很低
 62 | 
 63 | </figcaption></figure></div></div>
 64 | 
 65 | [en]: <> (Light sources)
 66 | ### 光源
 67 | 
 68 | [en]: <> (Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows a card with an elevation of 6dp.)
 69 | 在Material中的阴影由关键光源和环境光源组成 在Android和iOS中，当光源在z轴的各个位置被材质表面阻挡时，会产生阴影。在Web中，仅能通过控制y轴改变 以下示例显示了海拔高度为6dp的卡片。
 70 | 
 71 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 72 | 
 73 | ![]({assets_path}/environment/light-shadows/whatismaterial-environment-shadow1.png)
 74 | 
 75 | <figcaption>
 76 | 
 77 | {dont}
 78 | 
 79 | [en]: <> (Shadow cast by key light)
 80 | 由关键光源投射的阴影
 81 | 
 82 | </figcaption></figure></div><div class="mdui-col"><figure>
 83 | 
 84 | ![]({assets_path}/environment/light-shadows/whatismaterial-environment-shadow2.png)
 85 | 
 86 | <figcaption>
 87 | 
 88 | {dont}
 89 | 
 90 | [en]: <> (Shadow cast by ambient light)
 91 | 由环境光源投射的阴影
 92 | 
 93 | </figcaption></figure></div><div class="mdui-col"><figure>
 94 | 
 95 | ![]({assets_path}/environment/light-shadows/whatismaterial-environment-shadow3.png)
 96 | 
 97 | <figcaption>
 98 | 
 99 | {do}
100 | 
101 | [en]: <> (Combined shadow from key and ambient lights)
102 | 同时含有由环境和关键光源所投射的阴影
103 | 
104 | </figcaption></figure></div></div>
105 | 
106 | [en]: <> (Shadows)
107 | <h2 id="shadows">阴影</h2>
108 | 
109 | [en]: <> (Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.)
110 | 阴影会给人有关深浅，运动方向以及边缘的暗示 表面阴影是由海报高度和它与其他表面的关系决定的
111 | 
112 | [en]: <> (Usage)
113 | ### 用法
114 | 
115 | [en]: <> (Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.)
116 | 由于阴影表示表面之间的高度，因此必须在整个产品中始终使用阴影。
117 | 
118 | <figure>
119 | 
120 | ![]({assets_path}/environment/light-shadows/shadowprinciples-do-1.png)
121 | 
122 | <figcaption>
123 | 
124 | [en]: <> (Elevation is depicted by consistent use of shadow.)
125 | 海拔高度始终使用阴影来表示
126 | 
127 | </figcaption></figure><figure>
128 | 
129 | ![]({assets_path}/environment/light-shadows/shadowprinciples-do-2.png)
130 | 
131 | <figcaption>
132 | 
133 | [en]: <> (Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.)
134 | 阴影大小反映了海拔高度 表面在越高的海拔就拥有越高的阴影，而在低海拔高度时阴影越小
135 | 
136 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/environment/light-shadows/shadowprinciples-basil-1c.mp4" src="{assets_path}/environment/light-shadows/shadowprinciples-basil-1c.mp4" type="video/mp4"></video><figcaption>
137 | 
138 | {caution}
139 | 
140 | [en]: <> (If your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.)
141 | 如果您的产品不使用阴影，那么请通过其他方式（例如通过视差运动）传达海拔高度
142 | 
143 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/environment/light-shadows/shadowprinciples-list.mp4" src="{assets_path}/environment/light-shadows/shadowprinciples-list.mp4" type="video/mp4"></video><figcaption>
144 | 
145 | {do}
146 | 
147 | [en]: <> (The appearance of a shadow indicates the list item has been picked up and can move in front of its peers during this reorder interaction.)
148 | 阴影的出现表示列表中的物品已经被选取，而且可以在重新排序交互顺序的过程中，移动到它的前面
149 | 
150 | </figcaption></figure></div></div>
151 | 
152 | [en]: <> (Shadows & Motion)
153 | ### 阴影和运动
154 | 
155 | [en]: <> (Shadows provide useful cues about an surface’s direction of movement and whether the distance between surfaces is increasing or decreasing.)
156 | 阴影提供了有关表面的运动方向和表面与表面之间的距离时增加还是减少的有用提示
157 | 
158 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/environment/light-shadows/shadowsmotion-do-1a.mp4" src="{assets_path}/environment/light-shadows/shadowsmotion-do-1a.mp4" type="video/mp4"></video><figcaption>
159 | 
160 | [en]: <> (When a surface changes shape or scale, but its elevation remains the same, its shadow should not change.)
161 | 当表面改变形状或比例但其海拔高度保持不变时，其阴影不应改变
162 | 
163 | </figcaption></figure><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/environment/light-shadows/shadowsmotion-dont-1a.mp4" src="{assets_path}/environment/light-shadows/shadowsmotion-dont-1a.mp4" type="video/mp4"></video><figcaption>
164 | 
165 | [en]: <> (When a surface changes its elevation, its shadow should change.)
166 | 当表面的海拔高度改变时其阴影也应该与其改变
167 | 
168 | </figcaption></figure></div>
169 | 


--------------------------------------------------------------------------------
/src/iconography/animated-icons.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Animated icons)
  4 | # 动画图标
  5 | 
  6 | <nav>
  7 | 
  8 | [en]: <> (Usage)
  9 | [en]: <> (Transitions)
 10 | [en]: <> (States)
 11 | [en]: <> (Theming)
 12 | * [译文](#usage)
 13 | * [译文](#transitions)
 14 | * [译文](#states)
 15 | * [译文](#theming)
 16 | 
 17 | </nav></div><div class="article__body">
 18 | 
 19 | [en]: <> (Usage)
 20 | <h2 id="usage">译文</h2>
 21 | 
 22 | [en]: <> (Animation reflects the action an icon performs in a way that adds polish and delight.)
 23 | 译文
 24 | 
 25 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/01-meaning.mp4" src="{assets_path}/iconography/animated-icons/01-meaning.mp4" type="video/mp4"></video><figcaption>
 26 | 
 27 | [en]: <> (The animation of each icon is aligned with both the visual design and action they perform.)
 28 | 译文
 29 | 
 30 | </figcaption></figure>
 31 | 
 32 | [en]: <> (Transitions)
 33 | <h2 id="transitions">译文</h2>
 34 | 
 35 | [en]: <> (Transitions connect animated icons between two visual states. Transitioning between two icons signifies that they are linked, and that pressing one icon makes the other icon available.)
 36 | 译文
 37 | 
 38 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/02-statechange.mp4" src="{assets_path}/iconography/animated-icons/02-statechange.mp4" type="video/mp4"></video><figcaption>
 39 | 
 40 | [en]: <> (Transitions show the connection between two icons.)
 41 | 译文
 42 | 
 43 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/02-statechange-disable.mp4" src="{assets_path}/iconography/animated-icons/02-statechange-disable.mp4" type="video/mp4"></video><figcaption>
 44 | 
 45 | [en]: <> (Transitions are used to toggle between animated icons, such as between on and off states.)
 46 | 译文
 47 | 
 48 | </figcaption></figure></div></div>
 49 | 
 50 | [en]: <> (Emphasis)
 51 | ### 译文
 52 | 
 53 | [en]: <> (Animated icon transitions can use either simple or emphasized animation.)
 54 | 译文
 55 | 
 56 | [en]: <> (Icons that aren’t prominent use a simple shared motion)
 57 | [en]: <> (Icons that are an important part of an app use detailed tweening)
 58 | * 译文
 59 | * 译文
 60 | 
 61 | <div class="mdui-row-sm-2"><div class="mdui-col">
 62 | 
 63 | [en]: <> (Simple)
 64 | #### 译文
 65 | 
 66 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/03-simple.mp4" src="{assets_path}/iconography/animated-icons/03-simple.mp4" type="video/mp4"></video><figcaption>
 67 | 
 68 | [en]: <> (Use shared motion on icons that don’t need to be emphasized. Fading, scaling, or rotating are simple ways to transition between icons.)
 69 | 译文
 70 | 
 71 | </figcaption></figure></div><div class="mdui-col">
 72 | 
 73 | [en]: <> (Emphasized)
 74 | #### 译文
 75 | 
 76 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/03-complex.mp4" src="{assets_path}/iconography/animated-icons/03-complex.mp4" type="video/mp4"></video><figcaption>
 77 | 
 78 | [en]: <> (Detailed tweening calls attention and adds delight to important icons.)
 79 | 译文
 80 | 
 81 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/04-simple.mp4" src="{assets_path}/iconography/animated-icons/04-simple.mp4" type="video/mp4"></video><figcaption>
 82 | 
 83 | [en]: <> (Simple icon transitions are used when functionality is more important than style. Exiting icons simply fade out and entering icons fade in, subtly scaling up in size.)
 84 | 译文
 85 | 
 86 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/04-complex-hype.mp4" src="{assets_path}/iconography/animated-icons/04-complex-hype.mp4" type="video/mp4"></video><figcaption>
 87 | 
 88 | [en]: <> (Detailed icon transitions are used on important UI elements, like controls in a music app.)
 89 | 译文
 90 | 
 91 | </figcaption></figure></div></div>
 92 | 
 93 | [en]: <> (Duration)
 94 | ### 译文
 95 | 
 96 | [en]: <> (The more complex an icon animation is, the longer duration it needs to have to avoid feeling rushed. To keep consistency across an app, use the same duration for icons that have similar levels of complexity. Most icons will fit into these three groups of recommended durations:)
 97 | 译文
 98 | 
 99 | [en]: <> (Simple icon animations: 100ms)
100 | [en]: <> (Average icon animations: 200ms)
101 | [en]: <> (Complex icon animations: 500ms)
102 | * 译文
103 | * 译文
104 | * 译文
105 | 
106 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/04-duration-v1.mp4" src="{assets_path}/iconography/animated-icons/04-duration-v1.mp4" type="video/mp4"></video><figcaption>
107 | 
108 | [en]: <> (Simple: 100ms)
109 | [en]: <> (Average: 200ms)
110 | [en]: <> (Complex: 500ms)
111 | 1. 译文
112 | 2. 译文
113 | 3. 译文
114 | 
115 | </figcaption></figure>
116 | 
117 | [en]: <> (Stagger)
118 | ### 译文
119 | 
120 | [en]: <> (Sets of icons can use staggered timing to perform entrances fluidly. They animate from left to right to give a sense of progression.)
121 | 译文
122 | 
123 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/05-stagger.mp4" src="{assets_path}/iconography/animated-icons/05-stagger.mp4" type="video/mp4"></video><figcaption>
124 | 
125 | [en]: <> (Icons in an app bar enter from left to right with staggered timing.)
126 | 译文
127 | 
128 | </figcaption></figure>
129 | 
130 | [en]: <> (States)
131 | <h2 id="states">译文</h2>
132 | 
133 | [en]: <> (Icon animations can be used to reinforce a change in state.)
134 | 译文
135 | 
136 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/06-states.mp4" src="{assets_path}/iconography/animated-icons/06-states.mp4" type="video/mp4"></video><figcaption>
137 | 
138 | [en]: <> (Icons animate to indicate they have changed state by being selected.)
139 | 译文
140 | 
141 | </figcaption></figure>
142 | 
143 | [en]: <> (Theming)
144 | <h2 id="theming">译文</h2>
145 | 
146 | [en]: <> (Animations should reflect a brand’s style.)
147 | 译文
148 | 
149 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/iconography/animated-icons/07-style-owl.mp4" src="{assets_path}/iconography/animated-icons/07-style-owl.mp4" type="video/mp4"></video><figcaption>
150 | 
151 | [en]: <> (These icon animations are inspired by the brand logo and loading state animations.)
152 | 译文
153 | 
154 | [en]: <> (Icon animations)
155 | [en]: <> (Logo animation)
156 | [en]: <> (Loading animation)
157 | 1. 译文
158 | 2. 译文
159 | 3. 译文
160 | 
161 | </figcaption></figure></div>
162 | 


--------------------------------------------------------------------------------
/src/layout/understanding-layout.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Understanding layout)
  4 | # 理解布局
  5 | 
  6 | [en]: <> (Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Pixel density)
 13 | * [译文](#usage)
 14 | * [译文](#pixel-density)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Usage)
 19 | <h2 id="usage">译文</h2>
 20 | 
 21 | [en]: <> (Principles)
 22 | ### 译文
 23 | 
 24 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 25 | 
 26 | ![]({assets_path}/layout/understanding-layout/01-intuitive-structure.png)
 27 | 
 28 | <figcaption>
 29 | 
 30 | [en]: <> (Predictable)
 31 | #### 译文
 32 | 
 33 | [en]: <> (UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization.)
 34 | 译文
 35 | 
 36 | </figcaption></figure></div><div class="mdui-col"><figure>
 37 | 
 38 | ![]({assets_path}/layout/understanding-layout/03-consistency.png)
 39 | 
 40 | <figcaption>
 41 | 
 42 | [en]: <> (Consistent)
 43 | #### 译文
 44 | 
 45 | [en]: <> (Layouts should use a consistent grid, keylines, and padding.)
 46 | 译文
 47 | 
 48 | </figcaption></figure></div><div class="mdui-col"><figure>
 49 | 
 50 | ![]({assets_path}/layout/understanding-layout/04-reactiveness.png)
 51 | 
 52 | <figcaption>
 53 | 
 54 | [en]: <> (Responsive)
 55 | #### 译文
 56 | 
 57 | [en]: <> (Layouts are adaptive and react to input from the user, device, and screen elements.)
 58 | 译文
 59 | 
 60 | </figcaption></figure></div></div>
 61 | 
 62 | [en]: <> (Structure)
 63 | ### 译文
 64 | 
 65 | [en]: <> (Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.)
 66 | 译文
 67 | 
 68 | [en]: <> (Smaller components, such as iconography and typography, can align to a 4dp grid.)
 69 | 译文
 70 | 
 71 | <figure>
 72 | 
 73 | ![]({assets_path}/layout/understanding-layout/layout-unitsmeasurements-dev-grid.png)
 74 | 
 75 | <figcaption>
 76 | 
 77 | [en]: <> (8dp and 4dp units)
 78 | 译文
 79 | 
 80 | </figcaption></figure>
 81 | 
 82 | [en]: <> (Pixel density)
 83 | <h2 id="pixel-density">译文</h2>
 84 | 
 85 | [en]: <> (Screen pixel density and resolution vary depending on the platform. Device-independent pixels and scalable pixels are units that provide a flexible way to accommodate a design across platforms.)
 86 | 译文
 87 | 
 88 | [en]: <> (Calculating pixel density)
 89 | ### 译文
 90 | 
 91 | [en]: <> (The number of pixels that fit into an inch is referred to as pixel density. High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens.)
 92 | 译文
 93 | 
 94 | [en]: <> (To calculate screen density, you can use this equation:)
 95 | 译文
 96 | 
 97 | [en]: <> (Screen density = Screen width \(or height\) in pixels / Screen width \(or height\) in inches)
 98 | 译文
 99 | 
100 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
101 | 
102 | ![]({assets_path}/layout/understanding-layout/layout-unitsmeasurements-pixeldensity-high.png)
103 | 
104 | <figcaption>
105 | 
106 | [en]: <> (High-density display)
107 | 译文
108 | 
109 | </figcaption></figure></div><div class="mdui-col"><figure>
110 | 
111 | ![]({assets_path}/layout/understanding-layout/layout-unitsmeasurements-pixeldensity-lower.png)
112 | 
113 | <figcaption>
114 | 
115 | [en]: <> (Lower density display)
116 | 译文
117 | 
118 | </figcaption></figure></div></div>
119 | 
120 | [en]: <> (Density independence)
121 | ### 译文
122 | 
123 | [en]: <> (Density independence refers to the uniform display of UI elements on screens with different densities.)
124 | 译文
125 | 
126 | [en]: <> (Density-independent pixels, written as dp \(pronounced “dips”\), are flexible units that scale to have uniform dimensions on any screen. Material UIs use density-independent pixels to display elements consistently on screens with different densities.)
127 | 译文
128 | 
129 | <figure>
130 | 
131 | ![]({assets_path}/layout/understanding-layout/layout-unitsmeasurements-pixeldensity-lowhigh.png)
132 | 
133 | <figcaption>
134 | 
135 | [en]: <> (Low-density screen displayed with density independence)
136 | [en]: <> (High-density screen displayed with density independence)
137 | 1. 译文
138 | 2. 译文
139 | 
140 | </figcaption></figure>
141 | 
142 | [en]: <> (Pixel density on Android)
143 | ### 译文
144 | 
145 | [en]: <> (When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on a screen with a density of 160.)
146 | 译文
147 | 
148 | [en]: <> (To calculate dp:)
149 | 译文
150 | 
151 | [en]: <> (dp = \(width in pixels * 160\) / screen density)
152 | 译文
153 | 
154 | <table><thead><tr><th>
155 | 
156 | [en]: <> (Screen physical width)
157 | 译文
158 | 
159 | </th><th>
160 | 
161 | [en]: <> (Screen density)
162 | 译文
163 | 
164 | </th><th>
165 | 
166 | [en]: <> (Screen width in pixels)
167 | 译文
168 | 
169 | </th><th>
170 | 
171 | [en]: <> (Screen width in dps)
172 | 译文
173 | 
174 | </th></tr></thead><tbody><tr><td>1.5 in</td><td>120</td><td>180 px</td><td rowspan="4">240 dp</td></tr><tr><td>1.5 in</td><td>160</td><td>240 px</td></tr><tr><td>1.5 in</td><td>240</td><td>360 px</td></tr></tbody></table>
175 | 
176 | [en]: <> (Scalable pixels \(sp\))
177 | #### 译文
178 | 
179 | [en]: <> (Scalable pixels \(sp\) serve the same function as density-independent pixels \(dp\), but for fonts. The default value of an sp is the same as the default value for a dp.)
180 | 译文
181 | 
182 | [en]: <> (The primary difference between an sp and a dp is that sp’s preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.)
183 | 译文
184 | 
185 | [en]: <> (Pixel density on iOS)
186 | ### 译文
187 | 
188 | [en]: <> (Logical resolution)
189 | #### 译文
190 | 
191 | [en]: <> (iOS determines density using logical resolution, which measures its units in points. Points are scaled using a Native Scale factor, which map to a device's native resolution \(in pixels\).)
192 | 译文
193 | 
194 | [en]: <> (For example, when designing for the iPhone X, you would design for a logical resolution of 375 x 812 points. When rendered, elements are processed by the graphics hardware to fill the iPhone X's 1125 x 2436 pixel screen.)
195 | 译文
196 | 
197 | [en]: <> (Units for iOS)
198 | #### 译文
199 | 
200 | [en]: <> (When designing for iOS, use points \(pts\).)
201 | 译文
202 | 
203 | [en]: <> (Learn more:)
204 | 译文
205 | 
206 | [en]: <> (Apple iOS' Documentation on [Displays]\(https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html\))
207 | [en]: <> (PaintCode's [Guide to iPhone Resolutions]\(https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions\))
208 | * 译文
209 | * 译文
210 | 
211 | [en]: <> (Pixel density on the web)
212 | ### 译文
213 | 
214 | [en]: <> (Logical resolution)
215 | #### 译文
216 | 
217 | [en]: <> (Use the device's logical resolution, which scales to the device's screen resolution.)
218 | 译文
219 | 
220 | [en]: <> (Units for the web)
221 | #### 译文
222 | 
223 | [en]: <> (When designing for the web, replace dp with px \(for pixel\).)
224 | 译文
225 | 
226 | </div>
227 | 


--------------------------------------------------------------------------------
/src/communication/confirmation-acknowledgement.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Confirmation & acknowledgement)
  4 | # 确认 & 确知
  5 | 
  6 | [en]: <> (Confirmation and acknowledgement communications ask for confirmation before taking an action and acknowledge successful actions.)
  7 | 确认和确知在采取行动前进行确认、以及在执行确认操作前进行确认。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Confirmation)
 13 | [en]: <> (Acknowledgement)
 14 | * [用法](#usage)
 15 | * [确认](#confirmation)
 16 | * [确知](#acknowledgement)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Usage)
 21 | <h2 id="usage">用法</h2>
 22 | 
 23 | [en]: <> (Confirming and acknowledging user actions can reduce uncertainty about an action that a user has taken, or is about to take. They also prevent users from making mistakes.)
 24 | 对用户行为进行确认和确知可以减少用户已经或即将采取的操作的不确定性。它还可以防止用户犯错误。
 25 | 
 26 | [en]: <> (Types of actions)
 27 | #### 操作类型
 28 | 
 29 | [en]: <> (*Confirming actions* ask the user to verify that they want to proceed with an action.)
 30 | [en]: <> (*Acknowledging actions* provide text to let the user know whether an action they chose has been completed.)
 31 | * *确认操作*要求用户确认他们想执行的操作。
 32 | * *确知操作*提供文本，让用户知道他们选择的操作是否已经完成。
 33 | 
 34 | [en]: <> (Not all actions warrant a confirmation or an acknowledgment.)
 35 | 不是所有的操作都需要确认或确知。
 36 | 
 37 | [en]: <> (Confirmation)
 38 | <h2 id="confirmation">确认</h2>
 39 | 
 40 | [en]: <> (Usage)
 41 | ### 用法
 42 | 
 43 | [en]: <> (When a UI requests confirmation from a user, it asks if they want to proceed with the action they just took. It may be paired with a warning or critical information related to that action.)
 44 | 当 UI 请求用户的确认时，它会询问用户是否想继续他们刚刚采取的操作。它可能和与该操作相关的警告或关键信息同时出现。
 45 | 
 46 | [en]: <> (Confirmation isn’t necessary when the consequences of an action are reversible or negligible. For example, if a check mark shows an image has been selected, further confirmation is unnecessary.)
 47 | 当一个操作的结果是可逆的或者可以忽略的时候，确认是不必要的。例如，选中一个复选标记，表示一张图片被选中，这个过程不需要进一步确认。
 48 | 
 49 | [en]: <> (Alert dialog)
 50 | ### 警告框
 51 | 
 52 | [en]: <> (Confirmation is best delivered using an alert dialog.)
 53 | 确认最好使用警告框的形式出现。
 54 | 
 55 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 56 | 
 57 | ![]({assets_path}/communication/confirmation-acknowledgement/communication-confirmation1.png)
 58 | 
 59 | </figure></div><div class="mdui-col"><figure>
 60 | 
 61 | ![]({assets_path}/communication/confirmation-acknowledgement/communication-confirmation2.png)
 62 | 
 63 | <figcaption>
 64 | 
 65 | [en]: <> (An alert dialog confirms the user action and informs the user of what will happen as a result.)
 66 | 警告框确认用户操作，并通知用户操作结果。
 67 | 
 68 | </figcaption></figure></div></div>
 69 | 
 70 | 
 71 | [en]: <> (Acknowledgement)
 72 | <h2 id="acknowledgement">确知</a>
 73 | 
 74 | [en]: <> (Usage)
 75 | ### 用法
 76 | 
 77 | [en]: <> (An acknowledgement notifies the user about system actions occurring in the background. It appears for a short amount of time and may include an option to undo the action.)
 78 | 确知会通知用户在后台发生的系统操作。它出现的时间很短，且可能包含取消操作的选项。
 79 | 
 80 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 81 | 
 82 | ![]({assets_path}/communication/confirmation-acknowledgement/communication-acknowledgement1.png)
 83 | 
 84 | <figcaption>
 85 | 
 86 | [en]: <> (An acknowledgment in the form of a snackbar appears, then fades after a few seconds.)
 87 | 以 snackbar 形式出现的确知，几秒钟后就会消失。
 88 | 
 89 | </figcaption></figure></div><div class="mdui-col"><figure>
 90 | 
 91 | ![]({assets_path}/communication/confirmation-acknowledgement/communication-acknowledgement2.png)
 92 | 
 93 | <figcaption>
 94 | 
 95 | [en]: <> (An acknowledgment appears with an undo option. It remains until the user takes an unrelated action, such as scrolling through a list.)
 96 | 确知会出现一个撤销选项。它会持续显示，直到用户执行一个不相关的操作，例如滚动列表，它才会消失。
 97 | 
 98 | </figcaption></figure></div></div>
 99 | 
100 | [en]: <> (Acknowledgement components)
101 | ### 确知组件
102 | 
103 | [en]: <> (Acknowledgements can be delivered by a variety of components. Criteria for choosing the right acknowledgement component includes:)
104 | 确知可以通过各种组件进行传递。选择正确的确知组件的标准包括：
105 | 
106 | [en]: <> (Urgency level)
107 | [en]: <> (Inclusion of an action to correct a problem)
108 | [en]: <> (Duration on screen \(transient, dismissable, or both\))
109 | * 紧急程度
110 | * 包含一个纠正问题的操作
111 | * 在屏幕上的持续时间（短暂的、可忽略的、或两者都有）
112 | 
113 | [en]: <> (Acknowledgements that are transient mean the component will exit on its own within a few seconds of appearing. Dismissable acknowledgements can be dismissed by selecting an action to dismiss the component.)
114 | 短暂的确知意味着组件将在出现后的几秒内自动退出。可忽略的确知可以通过点击操作来忽略该组件。
115 | 
116 | [en]: <> (Component    | Urgency  | Content                                 | Behavior                                   | Number of actions to dismiss)
117 | [en]: <> (---------    |----------|---------                                |------                                      |---------)
118 | [en]: <> (Snackbar     | Low      | Informational                           | Transient & dismissable                    | 0-1)
119 | [en]: <> (Alert        | Medium   | Correct a problem; Awareness of state   | Persistent, non-blocking, and dismissable  | 1-2)
120 | [en]: <> (Dialog       | High     | Require a choice; Acknowledge           | Persistent, blocking \(interruptive\)      | 1-2)
121 | [en]: <> (Empty State  | Medium   | Informational                           | Persistent, blocking                       | 0-2)
122 | 
123 | 组件       | 紧急程度  | 内容                          | 行为                      | 忽略操作的数量
124 | --------  |----------|-----------                   |-----------               |-------
125 | Snackbar  | 低       | 信息                          | 短暂的、可忽略的            |0-1
126 | 警告       | 中       | 纠正一个问题；使用户知道当前状态   | 持久的，非阻塞的，可忽略的    |1-2
127 | 对话框     | 高       | 需要进行选择；确知               | 持久的，阻塞的（打断用户的）  |1-2
128 | 空状态     | 中       | 信息                          | 持久的，阻塞的              |0-2
129 | 
130 | [en]: <> (Alert)
131 | #### 警告
132 | 
133 | [en]: <> (Use alerts to deliver a persistent, in-app message that informs users of a particular change state.)
134 | 使用警告来传递一个持久的、应用内的消息，它通知用户特定的状态变更。
135 | 
136 | <figure>
137 | 
138 | ![]({assets_path}/communication/confirmation-acknowledgement/understanding-alerts-usage.png)
139 | 
140 | <figcaption>
141 | 
142 | [en]: <> (An alert)
143 | 一个警告
144 | 
145 | </figcaption></figure>
146 | 
147 | [en]: <> (Snackbar)
148 | #### Snackbar
149 | 
150 | [en]: <> (Use a snackbar to provide brief feedback about an operation.)
151 | 使用 Snackbar 来提供关于一个操作的简短反馈。
152 | 
153 | <figure>
154 | 
155 | ![]({assets_path}/communication/confirmation-acknowledgement/snackbars-container-do.png)
156 | 
157 | <figcaption>
158 | 
159 | [en]: <> (A snackbar)
160 | snackbar
161 | 
162 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col">
163 | 
164 | [en]: <> (Empty state)
165 | #### 空状态
166 | 
167 | [en]: <> (When a UI is only available online and content has failed to load or sync, use an empty state. The user should be able to interact with as much of the rest of the app as possible. A link to reload can be presented to help a user accomplish their task.)
168 | 当 UI 只在联网时可用，在内容加载失败时，显示空状态。应该让用户能尽可能多的与应用的其他部分进行交互。可以提供一个重新加载的链接，以帮助用户继续他们的操作。
169 | 
170 | </div><div class="mdui-col"><figure>
171 | 
172 | ![]({assets_path}/communication/confirmation-acknowledgement/empty-state-do.png)
173 | 
174 | <figcaption>
175 | 
176 | [en]: <> (An empty state)
177 | 空状态
178 | 
179 | </figcaption></figure></div></div></div>
180 | 


--------------------------------------------------------------------------------
/src/components/tooltips.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Tooltips)
  4 | # 工具提示
  5 | 
  6 | [en]: <> (Tooltips display informative text when users hover over, focus on, or tap an element.)
  7 | 当用户悬停，聚焦，或是点击某个元素时，工具提示会显示一些信息文本。
  8 | <figure>
  9 | 
 10 | ![]({assets_path}/components/tooltips/tooltips-intro.png)
 11 | 
 12 | </figure><nav>
 13 | 
 14 | [en]: <> (Usage)
 15 | [en]: <> (Placement)
 16 | [en]: <> (Behavior)
 17 | [en]: <> (Spec)
 18 | * [用法](#usage)
 19 | * [位置](#placement)
 20 | * [行为](#behavior)
 21 | * [规范](#spec)
 22 | 
 23 | </nav></div><div class="article__body">
 24 | 
 25 | [en]: <> (Usage)
 26 | <h2 id="usage">用法</h2>
 27 | 
 28 | [en]: <> (When activated, tooltips display a text label identifying an element, such as a description of its function.)
 29 | 一旦激活，工具提示将显示一个文本标签来标识元素，如功能说明。
 30 | 
 31 | [en]: <> (Principles)
 32 | ### 原则
 33 | 
 34 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 35 | 
 36 | ![]({assets_path}/components/tooltips/tooltips-illo-1.png)
 37 | 
 38 | <figcaption>
 39 | 
 40 | [en]: <> (Transient)
 41 | #### 显示时间短暂
 42 | 
 43 | [en]: <> (Tooltips appear on hover, focus, or touch, and disappear after a short duration.)
 44 | 工具提示在悬停，聚焦或点击时显示，在一小段时间后消失。
 45 | 
 46 | </figcaption></figure></div><div class="mdui-col"><figure>
 47 | 
 48 | ![]({assets_path}/components/tooltips/tooltips-illo-3.png)
 49 | 
 50 | <figcaption>
 51 | 
 52 | [en]: <> (Paired)
 53 | #### 相关元素
 54 | 
 55 | [en]: <> (Tooltips are always paired nearby the element with which they are associated.)
 56 | 工具提示总是在它的相关元素周围配对，
 57 | 
 58 | </figcaption></figure></div><div class="mdui-col"><figure>
 59 | 
 60 | ![]({assets_path}/components/tooltips/tooltips-illo-2.png)
 61 | 
 62 | <figcaption>
 63 | 
 64 | [en]: <> (Succinct)
 65 | #### 简洁
 66 | 
 67 | [en]: <> (Tooltips only include short, descriptive text.)
 68 | 工具提示包含一个短小的描述性文字。
 69 | 
 70 | </figcaption></figure></div></div>
 71 | 
 72 | [en]: <> (Placement)
 73 | <h2 id="placement">位置</h2>
 74 | 
 75 | <figure>
 76 | 
 77 | ![]({assets_path}/components/tooltips/tooltip-usage.png)
 78 | 
 79 | <figcaption>
 80 | 
 81 | {do}
 82 | 
 83 | [en]: <> (Use tooltips for interactive imagery.)
 84 | 用工具提示来与图像交互。
 85 | 
 86 | [en]: <> (200% zoom)
 87 | 二倍放大
 88 | 
 89 | [en]: <> (On hover)
 90 | [en]: <> (On focus)
 91 | 1. 悬停
 92 | 2. 聚焦
 93 | 
 94 | </figcaption></figure><figure>
 95 | 
 96 | ![]({assets_path}/components/tooltips/tooltip-usage-dont.png)
 97 | 
 98 | <figcaption>
 99 | 
100 | {dont}
101 | 
102 | [en]: <> (Don’t use tooltips to restate visible UI text.)
103 | 不要使用工具提示修改可见的 UI 文本。
104 | 
105 | [en]: <> (200% zoom)
106 | 二倍放大
107 | 
108 | [en]: <> (On hover)
109 | [en]: <> (On focus)
110 | 1. 悬停
111 | 2. 聚焦
112 | 
113 | </figcaption></figure><figure>
114 | 
115 | ![]({assets_path}/components/tooltips/tooltip-usage-do.png)
116 | 
117 | <figcaption>
118 | 
119 | [en]: <> (200% zoom)
120 | 二倍放大
121 | 
122 | [en]: <> (Tooltips describe differences between similar elements)
123 | [en]: <> (Tooltips distinguish actions with related iconography)
124 | 1. 工具提示描述相似元素之间的区别
125 | 2. 工具提示区分相关操作
126 | 
127 | </figcaption></figure><figure>
128 | 
129 | ![]({assets_path}/components/tooltips/tooltip-usage-dont-2.png)
130 | 
131 | <figcaption>
132 | 
133 | {dont}
134 | 
135 | [en]: <> (200% zoom)
136 | 二倍放大
137 | 
138 | [en]: <> (Don’t display shadows on tooltips)
139 | [en]: <> (Don’t display rich information and imagery on tooltips)
140 | 1. 不要为工具提示添加阴影
141 | 2. 不要为工具提示显示详细信息或是图像
142 | 
143 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
144 | 
145 | ![]({assets_path}/components/tooltips/tooltip-position-do.png)
146 | 
147 | <figcaption>
148 | 
149 | {do}
150 | 
151 | [en]: <> (Keep the position of the tooltip visible.)
152 | 保证工具提示的位置可见
153 | 
154 | </figcaption></figure></div><div class="mdui-col"><figure>
155 | 
156 | ![]({assets_path}/components/tooltips/tooltip-position-dont.png)
157 | 
158 | <figcaption>
159 | 
160 | {dont}
161 | 
162 | [en]: <> (Don’t crop tooltips.)
163 | 不要裁剪工具提示
164 | 
165 | </figcaption></figure></div></div>
166 | 
167 | [en]: <> (Desktop)
168 | ### 桌面端
169 | 
170 | <figure>
171 | 
172 | ![]({assets_path}/components/tooltips/tooltip-desktop.png)
173 | 
174 | <figcaption>
175 | 
176 | [en]: <> (Desktop tooltip on hover)
177 | 悬停时桌面端的工具提示
178 | 
179 | </figcaption></figure>
180 | 
181 | [en]: <> (Mobile)
182 | ### 移动端
183 | 
184 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/components/tooltips/baseline-video-list.mp4" src="{assets_path}/components/tooltips/baseline-video-list.mp4" type="video/mp4"></video><figcaption>
185 | 
186 | [en]: <> (Tooltip displayed through long press)
187 | 长按显示工具提示
188 | 
189 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/components/tooltips/baseline-video-list-focus.mp4" src="{assets_path}/components/tooltips/baseline-video-list-focus.mp4" type="video/mp4"></video><figcaption>
190 | 
191 | [en]: <> (Tooltip summoned through focus \(Android only\))
192 | 聚焦以召唤工具提示\(仅安卓\)
193 | 
194 | </figcaption></figure></div></div>
195 | 
196 | [en]: <> (Behavior)
197 | <h2 id="behavior">译文</h2>
198 | 
199 | [en]: <> (A tooltip is displayed upon tapping and holding a screen element or component \(on mobile\) or hovering over it \(desktop\). Continuously display the tooltip as long as the user long-presses or hovers over the element.)
200 | 行为
201 | 工具提示将在点击并按住屏幕元素或组件 \(在移动设备上\) 或将鼠标悬停在其上 \(桌面\) 时显示。 若用户在元素上长按或悬停，工具提示就不会消失。
202 | 
203 | [en]: <> (Timing)
204 | #### 定时
205 | 
206 | [en]: <> (Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.)
207 | 工具提示出现后，持续显示 1.5 秒。如果用户在该时间之前采取了另一个操作，则工具提示将消失。
208 | 
209 | [en]: <> (Motion)
210 | #### 动画
211 | 
212 | [en]: <> (Over 150ms, tooltips fade in and scale up using the deceleration curve. They fade out over 75ms.)
213 | 在工具提示显示 150 毫秒后，工具提示会逐渐消失，并以减速曲线放大。 它们会在 75 毫秒内消失。
214 | 
215 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/components/tooltips/01-tooltip-interaction.mp4" src="{assets_path}/components/tooltips/01-tooltip-interaction.mp4" type="video/mp4"></video><figcaption>
216 | 
217 | [en]: <> (200%)
218 | [en]: <> (100%)
219 | 1. 200%
220 | 2. 100%
221 | 
222 | </figcaption></figure>
223 | 
224 | [en]: <> (On desktop, tooltips appear in the center of click targets and stay in place while cursor moves within the target.)
225 | 在桌面端上，工具提示在单击目标的中心出现，当在光标在目标内移动时保持原位。
226 | 
227 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/components/tooltips/02-tooltip-interaction.mp4" src="{assets_path}/components/tooltips/02-tooltip-interaction.mp4" type="video/mp4"></video><figcaption>
228 | 
229 | [en]: <> (Tooltip disappears when cursor moves out of the touch target)
230 | [en]: <> (Tooltip remains while cursor moves within the touch target)
231 | 1. 工具提示会在光标移出点击目标时消失
232 | 2. 当光标在点击目标内移动时工具提示将保持原位
233 | 
234 | </figcaption></figure>
235 | 
236 | [en]: <> (Spec)
237 | <h2 id="spec">规格</h2>
238 | 
239 | [en]: <> (Desktop)
240 | ### 桌面端
241 | 
242 | <figure>
243 | 
244 | ![]({assets_path}/components/tooltips/tooltip-spec-desktop.png)
245 | 
246 | </figure>
247 | 
248 | [en]: <> (Mobile)
249 | ### 移动端
250 | 
251 | <figure>
252 | 
253 | ![]({assets_path}/components/tooltips/tooltip-spec-mobile.png)
254 | 
255 | </figure></div>
256 | 


--------------------------------------------------------------------------------
/src/components/dividers.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Dividers)
  4 | # 分隔线
  5 | 
  6 | [en]: <> (A divider is a thin line that groups content in lists and layouts.)
  7 | 分隔线是一条细线，用于对列表和布局中的内容进行分组。
  8 | 
  9 | <figure>
 10 | 
 11 | ![]({assets_path}/components/dividers/divider-intro.png)
 12 | 
 13 | </figure><nav>
 14 | 
 15 | [en]: <> (Usage)
 16 | [en]: <> (Types)
 17 | [en]: <> (Specs)
 18 | * [用法](#usage)
 19 | * [类型](#types)
 20 | * [规范](#specs)
 21 | 
 22 | </nav></div><div class="article__body">
 23 | 
 24 | [en]: <> (Usage)
 25 | <h2 id="usage">用法</h2>
 26 | 
 27 | [en]: <> (Dividers separate content into clear groups.)
 28 | 分隔线可以清晰地对内容进行分组。
 29 | 
 30 | [en]: <> (Principles)
 31 | ### 原则
 32 | 
 33 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 34 | 
 35 | ![]({assets_path}/components/dividers/divider-illos-03.png)
 36 | 
 37 | <figcaption>
 38 | 
 39 | [en]: <> (Subtle)
 40 | #### 精细的
 41 | 
 42 | [en]: <> (Dividers should be noticeable in a layout, but not jarring.)
 43 | 分隔线应该要显眼，但不能导致不和谐。
 44 | 
 45 | </figcaption></figure></div><div class="mdui-col"><figure>
 46 | 
 47 | ![]({assets_path}/components/dividers/divider-illos-04.png)
 48 | 
 49 | <figcaption>
 50 | 
 51 | [en]: <> (Secondary)
 52 | #### 不作为首选
 53 | 
 54 | [en]: <> (Dividers should only be used if elements cannot be separated using white space.)
 55 | 只有在用空格无法分隔元素时，才应该使用分隔线。
 56 | 
 57 | </figcaption></figure></div><div class="mdui-col"><figure>
 58 | 
 59 | ![]({assets_path}/components/dividers/divider-illos-05.png)
 60 | 
 61 | <figcaption>
 62 | 
 63 | [en]: <> (Infrequent)
 64 | #### 不常用
 65 | 
 66 | [en]: <> (Use dividers sparingly, to create groupings rather than separate items.)
 67 | 分隔线应用于创建分组，而不是分隔项目。
 68 | 
 69 | </figcaption></figure></div></div>
 70 | 
 71 | [en]: <> (Types)
 72 | ### 类型
 73 | 
 74 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 75 | 
 76 | ![]({assets_path}/components/dividers/dividers-full.png)
 77 | 
 78 | <figcaption>
 79 | 
 80 | [en]: <> (Full-bleed dividers)
 81 | #### 全出血分隔线
 82 | 
 83 | [en]: <> (Full-bleed dividers separate content into sections and span the entire length of a layout.)
 84 | 全出血分隔线将内容分成多个部分，其宽度为整个布局的宽度。
 85 | 
 86 | </figcaption></figure></div><div class="mdui-col"><figure>
 87 | 
 88 | ![]({assets_path}/components/dividers/dividers.png)
 89 | 
 90 | <figcaption>
 91 | 
 92 | [en]: <> (Inset dividers)
 93 | #### 内嵌型分隔线
 94 | 
 95 | [en]: <> (Inset dividers separate related content, anchored by elements that align with the app bar title.)
 96 | 内嵌型分隔线用于分隔同一类型的内容，与应用栏标题对齐。
 97 | 
 98 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 99 | 
100 | ![]({assets_path}/components/dividers/divider-middle.png)
101 | 
102 | <figcaption>
103 | 
104 | [en]: <> (Middle dividers)
105 | #### 居中分隔线
106 | 
107 | [en]: <> (Middle dividers space related content and are centered in a layout or list.)
108 | 居中分隔线用于分隔相关的内容，并在布局中居中显示。
109 | 
110 | </figcaption></figure></div><div class="mdui-col"><figure>
111 | 
112 | ![]({assets_path}/components/dividers/dividers-subhead.png)
113 | 
114 | <figcaption>
115 | 
116 | [en]: <> (Dividers with subheaders)
117 | #### 含副标题的分隔线
118 | 
119 | [en]: <> (Dividers can be paired with subheaders to help define content groupings.)
120 | 分隔线可以和副标题配合使用，用于定义分组的标题。
121 | 
122 | </figcaption></figure></div></div>
123 | 
124 | [en]: <> (Types)
125 | <h2 id="types">类型</h2>
126 | 
127 | [en]: <> (Full-bleed dividers)
128 | ### 全出血分隔线
129 | 
130 | [en]: <> (Full-bleed dividers separate content into sections, such as:)
131 | 全出血分隔线把内容分成了几个部分，例如：
132 | 
133 | [en]: <> (Separating list and layout elements)
134 | [en]: <> (Indicating where an element may expand)
135 | * 分隔列表和布局元素
136 | * 指示元素可以在这个位置展开
137 | 
138 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
139 | 
140 | ![]({assets_path}/components/dividers/dividers-full-bleed.png)
141 | 
142 | <figcaption>
143 | 
144 | [en]: <> (When lists don’t have an anchoring element \(such as an icon\), spacing may not be enough to separate content. Full-bleed dividers can help separate individual tiles.)
145 | 当列表中没有锚定元素（例如图标）时，列表项之间的间距可能不足以分隔内容。全出血分隔线可以分隔出每个列表项。
146 | 
147 | </figcaption></figure></div><div class="mdui-col"><figure>
148 | 
149 | ![]({assets_path}/components/dividers/baseline-drawer.png)
150 | 
151 | <figcaption>
152 | 
153 | [en]: <> (A full-bleed divider in a navigation drawer)
154 | 抽屉导航中的全出血分隔线
155 | 
156 | </figcaption></figure></div></div>
157 | 
158 | [en]: <> (Inset dividers)
159 | ### 内嵌型分隔线
160 | 
161 | [en]: <> (Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and left-aligned with the app bar title.)
162 | 内嵌型分隔线用于分隔同一类型的内容，例如邮件列表中的邮箱。它应该与锚点元素（例如图标或头像）一起使用，并与应用栏标题左对齐。
163 | 
164 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
165 | 
166 | ![]({assets_path}/components/dividers/dividers-with-dividers.png)
167 | 
168 | <figcaption>
169 | 
170 | [en]: <> (Inset dividers)
171 | 内嵌型分隔线
172 | 
173 | </figcaption></figure></div><div class="mdui-col"><figure>
174 | 
175 | ![]({assets_path}/components/dividers/dividers-inset-2.png)
176 | 
177 | <figcaption>
178 | 
179 | [en]: <> (Use inset dividers when there are anchoring elements such as an icon or avatar.)
180 | 当存在锚点元素（如图标或头像）时，应使用内嵌型分隔线。
181 | 
182 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
183 | 
184 | ![]({assets_path}/components/dividers/dividers-do.png)
185 | 
186 | <figcaption>
187 | 
188 | {do}
189 | 
190 | [en]: <> (Use inset dividers to group items.)
191 | 使用内嵌型分隔线对项目进行分组。
192 | 
193 | </figcaption></figure></div><div class="mdui-col"><figure>
194 | 
195 | ![]({assets_path}/components/dividers/dividers-dont.png)
196 | 
197 | <figcaption>
198 | 
199 | {dont}
200 | 
201 | [en]: <> (Don’t use dividers to separate individual items.)
202 | 不要使用内嵌型分隔线来分隔每个项目。
203 | 
204 | </figcaption></figure></div></div>
205 | 
206 | [en]: <> (Middle dividers)
207 | ### 居中分隔线
208 | 
209 | [en]: <> (Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.)
210 | 分隔线可以在布局中居中显示。它们最适合用于分隔相关内容，例如订单中的价格。
211 | 
212 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
213 | 
214 | ![]({assets_path}/components/dividers/divider-middle-2.png)
215 | 
216 | <figcaption>
217 | 
218 | [en]: <> (An inset divider above a subheader)
219 | 副标题上方的居中分隔线
220 | 
221 | </figcaption></figure></div><div class="mdui-col"><figure>
222 | 
223 | ![]({assets_path}/components/dividers/divider-middle.png)
224 | 
225 | <figcaption>
226 | 
227 | [en]: <> (A full divider above a subheader)
228 | 副标题上方的居中分隔线
229 | 
230 | </figcaption></figure></div></div>
231 | 
232 | [en]: <> (Dividers with subheaders)
233 | ### 含副标题的分隔线
234 | 
235 | [en]: <> (Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.)
236 | 分隔线可以和副标题配合使用，用于定义分组标题。将分隔线放在副标题上方，以加强副标题和内容的联系。
237 | 
238 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
239 | 
240 | ![]({assets_path}/components/dividers/dividers-subhead.png)
241 | 
242 | <figcaption>
243 | 
244 | [en]: <> (An inset divider above a subheader)
245 | 副标题上方的内嵌型分隔线
246 | 
247 | </figcaption></figure></div><div class="mdui-col"><figure>
248 | 
249 | ![]({assets_path}/components/dividers/dividers-subhead-2.png)
250 | 
251 | <figcaption>
252 | 
253 | [en]: <> (A full-bleed divider above a subheader)
254 | 副标题上方的全出血分隔线
255 | 
256 | </figcaption></figure></div></div>
257 | 
258 | [en]: <> (Specs)
259 | <h2 id="specs">规范</h2>
260 | 
261 | <figure>
262 | 
263 | ![]({assets_path}/components/dividers/divider-spec.png)
264 | 
265 | </figure></div>
266 | 


--------------------------------------------------------------------------------
/src/shape/about-shape.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (About shape)
  4 | # 关于形状
  5 | 
  6 | [en]: <> (Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.)
  7 | 材料面可以显示出不同的形状。而形状可以引导注意、分别组件、传递状态、并且宣传品牌。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Shaping material)
 12 | [en]: <> (Shape and meaning)
 13 | [en]: <> (Components and shape)
 14 | * [形塑材料](#shaping-material)
 15 | * [形状和含义](#shape-meaning)
 16 | * [组件和形状](#components-shape)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Shaping material)
 21 | <h2 id="shaping-material">形塑材料</h2>
 22 | 
 23 | [en]: <> (About shape)
 24 | ### 关于形状
 25 | 
 26 | [en]: <> (Material surfaces have a rectangular shape by default, with 4dp rounded corners. They have adjustable:)
 27 | 材料面默认是矩形，并有 4dp 的圆角。其拥有可控的：
 28 | 
 29 | [en]: <> (Corner angles and curves)
 30 | [en]: <> (Edge angles and curves)
 31 | [en]: <> (The number of corners)
 32 | * 角的角度及曲线
 33 | * 边的倾斜角度及曲线
 34 | * 角数目
 35 | 
 36 | [en]: <> (Shape changes, such as rounded or clipped corners, can be subtle or more significant.)
 37 | 改变形状时，例如圆滑或锐化边角，变化程度可以微妙也可明显。
 38 | 
 39 | <figure>
 40 | 
 41 | ![]({assets_path}/shape/about-shape/shapingmaterial-hero-1.png)
 42 | 
 43 | <figcaption>
 44 | 
 45 | [en]: <> (The default Material shape can be customized.)
 46 | 材料初始形状可以变化定制。
 47 | 
 48 | </figcaption></figure>
 49 | 
 50 | [en]: <> (Usage)
 51 | ### 用法
 52 | 
 53 | [en]: <> (Emphasis)
 54 | #### 要点
 55 | 
 56 | [en]: <> (Because unique shapes stand out, they can direct attention to different parts of a screen.)
 57 | 特殊形状因为比较显眼，所以它们能把用户注意力引导到屏幕中不同的特别部分。
 58 | 
 59 | <figure>
 60 | 
 61 | ![]({assets_path}/shape/about-shape/usingshape-reply-1.png)
 62 | 
 63 | <figcaption>
 64 | 
 65 | [en]: <> (This combination of a round floating action button and curved bottom app bar stands out from the rectangular shapes elsewhere on screen.)
 66 | 这个圆形浮钮和弧形底栏的搭配组合，从屏幕上的其余矩形里凸现。
 67 | 
 68 | </figcaption></figure>
 69 | 
 70 | [en]: <> (Identity)
 71 | #### 个性
 72 | 
 73 | [en]: <> (Shape provides a way for users to recognize components and identify different Material surfaces.)
 74 | 形状提供了一种帮助用户认出组件和分别不同材料面的方法。
 75 | 
 76 | <figure>
 77 | 
 78 | ![]({assets_path}/shape/about-shape/usingshape-reply-4.png)
 79 | 
 80 | <figcaption>
 81 | 
 82 | [en]: <> (These entry chips can be identified by their consistent use of shape.)
 83 | 这些条目碎片可以通过其统一的形状使用来被辨识。
 84 | 
 85 | </figcaption></figure>
 86 | 
 87 | [en]: <> (State)
 88 | #### 状态
 89 | 
 90 | [en]: <> (You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group. When using shape to indicate a state change, use it consistently with that state, in every instance it occurs.)
 91 | 一个元素的状态变更，您可以通过使用一不同于组中其余元素或面的外形来传达表示。使用形状来表现状态变更时，不论是哪次状态变化，对同样的状态需用一致对应的形状。
 92 | 
 93 | <figure>
 94 | 
 95 | ![]({assets_path}/shape/about-shape/usingshape-owl-selection.png)
 96 | 
 97 | <figcaption>
 98 | 
 99 | [en]: <> (This card changes shape upon selection to indicate it’s been selected.)
100 | 这张卡片在被选时会变形以表现被选。
101 | 
102 | </figcaption></figure>
103 | 
104 | [en]: <> (Branding)
105 | #### 树品牌
106 | 
107 | [en]: <> (To express a brand’s visual language throughout an app, use shape in tandem with other customizations \(like color\) in consistent ways. Small adjustments to shape, applied strategically through an app, contribute to the overall impression a brand makes.)
108 | 要通过 app 来表现品牌视觉语言，使用形状时结合其它定制项（如颜色）并确保对应统一。贯穿一个 app 的对形状细致入微的调整，有战略目标的合适地应用，大有利于整体的品牌形象建设。
109 | 
110 | <figure>
111 | 
112 | ![]({assets_path}/shape/about-shape/usingshape-owl-stickersheet.png)
113 | 
114 | <figcaption>
115 | 
116 | [en]: <> (The consistent use of shape throughout this app helps express its brand.)
117 | 贯穿此 app 的对应统一的形状使用有助其展现品牌。
118 | 
119 | </figcaption></figure>
120 | 
121 | [en]: <> (Displaying shape)
122 | ### 显出形状
123 | 
124 | [en]: <> (Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity, .)
125 | 当面的边与其背景具有足够的对比度时，形状可见。默认情况下，Material Design 使用阴影现出面的边缘，来使形状可见。其它的用于显出面边沿及形状的方法使用时可以同时结合阴影，亦也可独当一面，如颜色填充和透明度。
126 | 
127 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
128 | 
129 | ![]({assets_path}/shape/about-shape/surfaceedges-fab-do.png)
130 | 
131 | <figcaption>
132 | 
133 | {do}
134 | 
135 | [en]: <> (A colored fill on this floating action button contrasts with the content on the surface behind it, making its surface edges and shape noticeable.)
136 | 这个浮钮的颜色填充对比后处平面的内容文本，使它的边缘和形状变得明显。
137 | 
138 | </figcaption></figure></div><div class="mdui-col"><figure>
139 | 
140 | ![]({assets_path}/shape/about-shape/surfaceedges-fab-dont.png)
141 | 
142 | <figcaption>
143 | 
144 | {dont}
145 | 
146 | [en]: <> (A semi-transparent surface and white color makes it hard to see the edges and shape of this floating action button.)
147 | 半透明表面配上白颜料，致使难以看见这个浮钮的边缘和形状。
148 | 
149 | </figcaption></figure></div></div>
150 | 
151 | [en]: <> (Shape and meaning)
152 | <h2 id="shape-meaning">形状和含义</h2>
153 | 
154 | [en]: <> (Communicating meaning)
155 | ### 表达含义
156 | 
157 | [en]: <> (Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.)
158 | 形状可用于影射某一特定目的或含义。若面单一的形状表意模糊不清，可以用文字或图标加强表达。
159 | 
160 | <figure>
161 | 
162 | ![]({assets_path}/shape/about-shape/shapemeaning-do-reply-1.png)
163 | 
164 | <figcaption>
165 | 
166 | {do}
167 | 
168 | [en]: <> (The menu has an arrow-like corner that points toward the navigation drawer, reinforcing that these components are connected.)
169 | 此选单有一角形似箭头并指向导航抽屉，强调这些组件相关联。
170 | 
171 | </figcaption></figure><figure>
172 | 
173 | ![]({assets_path}/shape/about-shape/shapemeaning-dont-baseline-1.png)
174 | 
175 | <figcaption>
176 | 
177 | {dont}
178 | 
179 | [en]: <> (Don’t use shapes in ways that create ambiguous meaning. This Cancel button’s label text implies that it will return the user to a previous point in the flow, but the arrow-shaped button points forward, as though it continues the flow’s progress.)
180 | 使用的形状不得模糊含义。这个取消按钮标签文字暗示着会帮助用户返回流程前一点，而其箭头形状却指向右方，似乎它是推动流程进展。
181 | 
182 | </figcaption></figure>
183 | 
184 | [en]: <> (Components and shape)
185 | <h2 id="components-shape">组件和形状</h2>
186 | 
187 | [en]: <> (Shaping components)
188 | ### 形塑组件
189 | 
190 | [en]: <> (Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:)
191 | 形状除了帮助用户辨识组件，还会影响组件的可用性。组件形状的变化范围取决于：
192 | 
193 | [en]: <> (If a component relies on its shape for identification)
194 | [en]: <> (If it has ergonomic requirements, such as a minimum touch target size)
195 | * 组件是否依赖形状来分别
196 | * 是否有符合人体工程学的要求，例如触摸目标要求的最小尺寸
197 | 
198 | <figure>
199 | 
200 | ![]({assets_path}/shape/about-shape/structure-dont-baseline-1.png)
201 | 
202 | <figcaption>
203 | 
204 | {dont}
205 | 
206 | [en]: <> (Don’t use shapes that make components unrecognizable.)
207 | 不要用使得组件面目全非难以分辨的外形。
208 | 
209 | </figcaption></figure><figure>
210 | 
211 | ![]({assets_path}/shape/about-shape/structure-dont-baseline-2.png)
212 | 
213 | <figcaption>
214 | 
215 | {dont}
216 | 
217 | [en]: <> (Don’t use shapes that interfere with a component’s ability to receive user input. This button has a touch target that is too small.)
218 | 不要用影响用户操作的形状。此按钮作为触摸目标太小了。
219 | 
220 | </figcaption></figure><figure>
221 | 
222 | ![]({assets_path}/shape/about-shape/structure-dont-reply-1.png)
223 | 
224 | <figcaption>
225 | 
226 | {dont}
227 | 
228 | [en]: <> (Don’t use shapes that make a component unrecognizable. These buttons look very similar to the chips above them, which makes it difficult to distinguish the two components.)
229 | 不要用使得组件面目全非难以分辨的外形。这些按钮看起来非常像它们上面的条条，使得分辨这两种组件变得困难。
230 | 
231 | </figcaption></figure></div>
232 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-icons.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android icons)
  4 | # Android 图标
  5 | 
  6 | [en]: <> (Android O icons represent your app on a device's Home and All Apps screens.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Keyline shapes)
 13 | [en]: <> (Specs)
 14 | [en]: <> (OEM masks)
 15 | * [译文](#usage)
 16 | * [译文](#keyline-shapes)
 17 | * [译文](#specs)
 18 | * [译文](#oem-masks)
 19 | 
 20 | </nav></div><div class="article__body">
 21 | 
 22 | [en]: <> (Usage)
 23 | <h2 id="usage">译文</h2>
 24 | 
 25 | [en]: <> (The following guidelines describe how icons can receive unique visual treatments, animations, and behaviors.)
 26 | 译文
 27 | 
 28 | [en]: <> (Providing icons)
 29 | ### 译文
 30 | 
 31 | [en]: <> (Launcher icons are provided to the Google Play store, with the following requirements:)
 32 | 译文
 33 | 
 34 | [en]: <> (Icon drawables in a PNG or vector format)
 35 | [en]: <> (Background and foreground layers without mask or background shadows)
 36 | [en]: <> (All layers must exceed the base icon shape by 50%)
 37 | * 译文
 38 | * 译文
 39 | * 译文
 40 | 
 41 | [en]: <> (The OEM requirements include:)
 42 | 译文
 43 | 
 44 | [en]: <> (One shape for masking any icons that are displayed on an OEM’s platform)
 45 | [en]: <> (An outer shadow \(optional\))
 46 | * 译文
 47 | * 译文
 48 | 
 49 | [en]: <> (Keyline shapes)
 50 | <h2 id="keyline-shapes">译文</h2>
 51 | 
 52 | [en]: <> (Keyline shapes)
 53 | ### 译文
 54 | 
 55 | [en]: <> (Keyline shapes are used across all app icons to maintain consistent visual proportions.)
 56 | 译文
 57 | 
 58 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 59 | 
 60 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-01.png)
 61 | 
 62 | <figcaption>
 63 | 
 64 | [en]: <> (Square)
 65 | #### 译文
 66 | 
 67 | [en]: <> (Height: 44dp<br>Width: 44dp<br>Corner radius: 4dp)
 68 | 译文
 69 | 
 70 | </figcaption></figure></div><div class="mdui-col"><figure>
 71 | 
 72 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-02.png)
 73 | 
 74 | <figcaption>
 75 | 
 76 | [en]: <> (Circle)
 77 | #### 译文
 78 | 
 79 | [en]: <> (Diameter: 52dp)
 80 | 译文
 81 | 
 82 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 83 | 
 84 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-01.png)
 85 | 
 86 | <figcaption>
 87 | 
 88 | [en]: <> (Vertical rectangle)
 89 | #### 译文
 90 | 
 91 | [en]: <> (Height: 52dp<br>Width: 36dp<br>Corner radius: 4dp)
 92 | 译文
 93 | 
 94 | </figcaption></figure></div><div class="mdui-col"><figure>
 95 | 
 96 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-02.png)
 97 | 
 98 | <figcaption>
 99 | 
100 | [en]: <> (Horizontal rectangle)
101 | #### 译文
102 | 
103 | [en]: <> (Height: 36dp<br>Width: 52dp<br>Corner radius: 4dp)
104 | 译文
105 | 
106 | </figcaption></figure></div></div>
107 | 
108 | [en]: <> (Specs)
109 | <h2 id="specs">译文</h2>
110 | 
111 | [en]: <> (Layers)
112 | ### 译文
113 | 
114 | [en]: <> (Icons consist of two layers: a foreground and a background. Each layer can animate and receive treatments independently from the other layer.)
115 | 译文
116 | 
117 | <figure>
118 | 
119 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-09.png)
120 | 
121 | <figcaption><div class="mdui-row-sm-2"><div class="mdui-col">
122 | 
123 | [en]: <> (Foreground \(scrolling parallax\))
124 | #### 译文
125 | 
126 | [en]: <> (108 x 108 dp<br>72dp masked section<br>Transparency recommended \(optional\))
127 | 译文
128 | 
129 | </div><div class="mdui-col">
130 | 
131 | [en]: <> (Background \(subtler parallax\))
132 | #### 译文
133 | 
134 | [en]: <> (108 X 108 dp<br>72dp masked section<br>Must be opaque)
135 | 译文
136 | 
137 | </div></div></figcaption></figure>
138 | 
139 | [en]: <> (Shadows)
140 | ### 译文
141 | 
142 | [en]: <> (When designing new icons, lighting and shadow effects should be consistent with other icons on the platform. Contact shadows are placed on elements to make them stand out from the background.)
143 | 译文
144 | 
145 | <div class="mdui-row-sm-2"><div class="mdui-col">
146 | 
147 | [en]: <> (Illustrator mode: Normal)
148 | 译文
149 | 
150 | [en]: <> (Opacity: 20%)
151 | 译文
152 | 
153 | [en]: <> (X Offset: 0dp)
154 | 译文
155 | 
156 | [en]: <> (Y Offset: 4dp)
157 | 译文
158 | 
159 | [en]: <> (Blur: 4dp)
160 | 译文
161 | 
162 | [en]: <> (Color: Refer to tint, shade and shadow values)
163 | 译文
164 | 
165 | </div><div class="mdui-col"><figure>
166 | 
167 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-05.png)
168 | 
169 | <figcaption>
170 | 
171 | [en]: <> (A contact shadow is a soft shadow surrounding an element.)
172 | 译文
173 | 
174 | </figcaption></figure></div></div>
175 | 
176 | [en]: <> (Edge tint and shade)
177 | ### 译文
178 | 
179 | [en]: <> (To provide a sense of depth, treatments are applied to the top and bottom edges of elements.)
180 | 译文
181 | 
182 | [en]: <> (Tinted edges highlight the top edge of elements \(the left, right, and bottom edges are not tinted\))
183 | [en]: <> (Shaded edges display dark bottom edges on elements \(the left, right, and top edges are not shaded\))
184 | * 译文
185 | * 译文
186 | 
187 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
188 | 
189 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-07.png)
190 | 
191 | <figcaption>
192 | 
193 | [en]: <> (Tinted edge)
194 | 译文
195 | 
196 | [en]: <> (Height: 1dp<br>Opacity: 20%<br>Color: White \(#FFFFFF\))
197 | 译文
198 | 
199 | </figcaption></figure></div><div class="mdui-col"><figure>
200 | 
201 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-08.png)
202 | 
203 | <figcaption>
204 | 
205 | [en]: <> (Shaded edge)
206 | 译文
207 | 
208 | [en]: <> (Height: 1dp<br>Opacity: 20%<br>Color: See tint, shade, and shadow values)
209 | 译文
210 | 
211 | </figcaption></figure></div></div>
212 | 
213 | [en]: <> (Finishing layer)
214 | ### 译文
215 | 
216 | [en]: <> (A finishing layer is placed above the foreground layer.)
217 | 译文
218 | 
219 | <div class="mdui-row-sm-2"><div class="mdui-col">
220 | 
221 | [en]: <> (Specs)
222 | #### 译文
223 | 
224 | [en]: <> (Angle: 45º)
225 | [en]: <> (Midpoint: 32%)
226 | [en]: <> (Color: Refer to tint, shade and shadow values)
227 | * 译文
228 | * 译文
229 | * 译文
230 | 
231 | [en]: <> (Illustrator gradient tool     | Opacity      | Location)
232 | [en]: <> (---------                     |----------    |---------)
233 | [en]: <> (Slider 1                      | 10%          | 0%)
234 | [en]: <> (Slider 2                      | 0%           | 100%)
235 | 
236 | 译文     | 译文     | 译文
237 | --------|----------|----------
238 | 译文     | 译文     | 译文
239 | 译文     | 译文     | 译文
240 | 
241 | </div><div class="mdui-col"><figure>
242 | 
243 | ![]({assets_path}/platform-guidance/android-icons/product-icons-android-06.png)
244 | 
245 | <figcaption>
246 | 
247 | [en]: <> (Finishing layer above foreground layer)
248 | 译文
249 | 
250 | </figcaption></figure></div></div>
251 | 
252 | [en]: <> (OEM masks)
253 | <h2 id="oem-masks">译文</h2>
254 | 
255 | [en]: <> (Without affecting icon layout, OEMs can apply their own custom masks to icons using a 72 x 72 dp masked area. The convex shapes include both a circular mask and a square mask.)
256 | 译文
257 | 
258 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-icons/product-icons-android-02.mp4" src="{assets_path}/platform-guidance/android-icons/product-icons-android-02.mp4" type="video/mp4"></video><figcaption>
259 | 
260 | [en]: <> (OEM mask shapes)
261 | 译文
262 | 
263 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-icons/product-icons-android-03.mp4" src="{assets_path}/platform-guidance/android-icons/product-icons-android-03.mp4" type="video/mp4"></video><figcaption>
264 | 
265 | [en]: <> (Final icon shapes)
266 | 译文
267 | 
268 | </figcaption></figure></div></div></div>
269 | 


--------------------------------------------------------------------------------
/src/layout/density.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Density)
  4 | # 密集度
  5 | 
  6 | [en]: <> (Material Design uses low-density space by default \(with large tap targets and margins\) but offers high-density space when it improves the user experience.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Layout)
 13 | [en]: <> (Touch and click targets)
 14 | [en]: <> (Typographic density)
 15 | * [译文](#usage)
 16 | * [译文](#layout)
 17 | * [译文](#touch-click-targets)
 18 | * [译文](#typographic-density)
 19 | 
 20 | </nav></div><div class="article__body">
 21 | 
 22 | [en]: <> (Usage)
 23 | <h2 id="usage">译文</h2>
 24 | 
 25 | [en]: <> (Density principles)
 26 | ### 译文
 27 | 
 28 | <div class="mdui-row-sm-3"><div class="mdui-col"><figure>
 29 | 
 30 | ![]({assets_path}/layout/density/density-illos-01.png)
 31 | 
 32 | <figcaption>
 33 | 
 34 | [en]: <> (Scannable)
 35 | #### 译文
 36 | 
 37 | [en]: <> (Dense UIs improve browsing and interaction with large amounts of content.)
 38 | 译文
 39 | 
 40 | </figcaption></figure></div><div class="mdui-col"><figure>
 41 | 
 42 | ![]({assets_path}/layout/density/density-illos-02.png)
 43 | 
 44 | <figcaption>
 45 | 
 46 | [en]: <> (Prioritized)
 47 | #### 译文
 48 | 
 49 | [en]: <> (Dense UIs help users focus by reducing space between actions.)
 50 | 译文
 51 | 
 52 | </figcaption></figure></div><div class="mdui-col"><figure>
 53 | 
 54 | ![]({assets_path}/layout/density/density-illos-03.png)
 55 | 
 56 | <figcaption>
 57 | 
 58 | [en]: <> (Available)
 59 | #### 译文
 60 | 
 61 | [en]: <> (Density exposes more content and actions on a single screen.)
 62 | 译文
 63 | 
 64 | </figcaption></figure></div></div>
 65 | 
 66 | [en]: <> (When to apply density)
 67 | ### 译文
 68 | 
 69 | [en]: <> (Whether to increase your UI’s density can be determined by how users interact with a component.)
 70 | 译文
 71 | 
 72 | [en]: <> (Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.)
 73 | 译文
 74 | 
 75 | <figure>
 76 | 
 77 | ![]({assets_path}/layout/density/layout-density-rows.png)
 78 | 
 79 | <figcaption>
 80 | 
 81 | [en]: <> (Default density, 48dp row height)
 82 | [en]: <> (High density, 32dp row height)
 83 | 1. 译文
 84 | 2. 译文
 85 | 
 86 | </figcaption></figure><figure>
 87 | 
 88 | ![]({assets_path}/layout/density/layout-density-forms.png)
 89 | 
 90 | <figcaption>
 91 | 
 92 | [en]: <> (Default density, 56dp text field height)
 93 | [en]: <> (High density, 44dp text field height)
 94 | 1. 译文
 95 | 2. 译文
 96 | 
 97 | </figcaption></figure>
 98 | 
 99 | [en]: <> (Apply density consistently to a component and any components nested within it.)
100 | 译文
101 | 
102 | <figure>
103 | 
104 | ![]({assets_path}/layout/density/layout-density-nested.png)
105 | 
106 | <figcaption>
107 | 
108 | [en]: <> (Default density, 40dp row height, and 36dp action height.)
109 | [en]: <> (High density, 32dp row height, and 24dp action height.)
110 | 1. 译文
111 | 2. 译文
112 | 
113 | </figcaption></figure>
114 | 
115 | [en]: <> (When not to apply density)
116 | ### 译文
117 | 
118 | [en]: <> (High density should not be applied to task or alert-based components.)
119 | #### 译文
120 | 
121 | [en]: <> (Focused tasks)
122 | #### 译文
123 | 
124 | [en]: <> (Don’t apply density to components that involve focused tasks, such as interacting with a dropdown menu or picker. Increasing density on these components reduces their usability.)
125 | 译文
126 | 
127 | <figure>
128 | 
129 | ![]({assets_path}/layout/density/focused-tasks-dont.png)
130 | 
131 | <figcaption>
132 | 
133 | {dont}
134 | 
135 | [en]: <> (Don’t apply high density to a date picker, as this reduces usability.)
136 | 译文
137 | 
138 | </figcaption></figure>
139 | 
140 | [en]: <> (Alerts and messaging)
141 | #### 译文
142 | 
143 | [en]: <> (Don’t apply density to components that alert the user of changes, such as snackbars or dialogs. Applying high density to alerts reduces their ability to command attention.)
144 | 译文
145 | 
146 | <figure>
147 | 
148 | ![]({assets_path}/layout/density/alerts-dont.png)
149 | 
150 | <figcaption>
151 | 
152 | {dont}
153 | 
154 | [en]: <> (Don’t apply high density to dialogs, which reduces their readability and prominence.)
155 | 译文
156 | 
157 | </figcaption></figure>
158 | 
159 | [en]: <> (Layout)
160 | <h2 id="layout">译文</h2>
161 | 
162 | [en]: <> (Grid and component density)
163 | ### 译文
164 | 
165 | [en]: <> (To create more scannable groups of content, use a less-dense grid layout with high-density components. The higher the density of components, the larger their margins and gutter widths should be.)
166 | 译文
167 | 
168 | <figure>
169 | 
170 | ![]({assets_path}/layout/density/rally-density-gridvcontent-high-low.gif)
171 | 
172 | <figcaption>
173 | 
174 | [en]: <> (High-density component row height, with wide margins and gutters)
175 | 译文
176 | 
177 | </figcaption></figure><figure>
178 | 
179 | ![]({assets_path}/layout/density/rally-density-gridvcontent-low-high.gif)
180 | 
181 | <figcaption>
182 | 
183 | [en]: <> (Default density component row height, with narrow margins and gutters)
184 | 译文
185 | 
186 | </figcaption></figure><figure>
187 | 
188 | ![]({assets_path}/layout/density/rally-gridvcontent-dont.gif)
189 | 
190 | <figcaption>
191 | 
192 | {dont}
193 | 
194 | [en]: <> (Don’t use both a dense layout grid and dense components, as this will make it difficult to differentiate content groups.)
195 | 译文
196 | 
197 | </figcaption></figure>
198 | 
199 | [en]: <> (Touch and click targets)
200 | <h2 id="touch-click-targets">译文</h2>
201 | 
202 | [en]: <> (Touch target specs)
203 | ### 译文
204 | 
205 | [en]: <> (Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 48 x 48 dp, with at least 8dp of space between each target.)
206 | 译文
207 | 
208 | <figure>
209 | 
210 | ![]({assets_path}/layout/density/layout-spacing-touchtargets.png)
211 | 
212 | <figcaption>
213 | 
214 | [en]: <> (Touch target minimum of 48 x 48 dp)
215 | 译文
216 | 
217 | </figcaption></figure>
218 | 
219 | [en]: <> (Applying density)
220 | #### 译文
221 | 
222 | <figure>
223 | 
224 | ![]({assets_path}/layout/density/rally-touchtargets-1.png)
225 | 
226 | <figcaption>
227 | 
228 | [en]: <> (Default density in a list)
229 | 译文
230 | 
231 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
232 | 
233 | ![]({assets_path}/layout/density/rally-touchtargets-2.png)
234 | 
235 | <figcaption>
236 | 
237 | {do}
238 | 
239 | [en]: <> (In this high-density list, the minimum space \(48px\) is defined by the tap target on each list item.)
240 | 译文
241 | 
242 | </figcaption></figure></div><div class="mdui-col"><figure>
243 | 
244 | ![]({assets_path}/layout/density/rally-touchtargets-3-dont.png)
245 | 
246 | <figcaption>
247 | 
248 | {dont}
249 | 
250 | [en]: <> (Don’t use less than the minimum touch target size of 48dp for touch devices or devices that support both touch and click input methods.)
251 | 译文
252 | 
253 | </figcaption></figure></div></div>
254 | 
255 | [en]: <> (Click targets)
256 | ### 译文
257 | 
258 | [en]: <> (On non-touch UIs, click targets should be at least 24 x 24 dp, with at least 8dp of space between each target.)
259 | 译文
260 | 
261 | <figure>
262 | 
263 | ![]({assets_path}/layout/density/layout-spacing-clicktargets.png)
264 | 
265 | <figcaption>
266 | 
267 | [en]: <> (Click target minimum 24 x 24dp)
268 | 译文
269 | 
270 | </figcaption></figure>
271 | 
272 | [en]: <> (Applying Density)
273 | #### 译文
274 | 
275 | <figure>
276 | 
277 | ![]({assets_path}/layout/density/rally-clicktargets.png)
278 | 
279 | <figcaption>
280 | 
281 | [en]: <> (When using high-density icons \(18dp\), the minimum space \(24px\) is defined by the click target.)
282 | 译文
283 | 
284 | </figcaption></figure>
285 | 
286 | [en]: <> (Typographic density)
287 | <h2 id="typographic-density">译文</h2>
288 | 
289 | [en]: <> (Line height)
290 | ### 译文
291 | 
292 | [en]: <> (Line height is the space between lines of text. Line height can be used as a way to create density in typographic layouts. When tightening line height be sure to still use the 4dp baseline grid.)
293 | 译文
294 | 
295 | <figure>
296 | 
297 | ![]({assets_path}/layout/density/layout-line-height-1.png)
298 | 
299 | <figcaption>
300 | 
301 | [en]: <> (Larger line height)
302 | [en]: <> (Smaller line height)
303 | 1. 译文
304 | 2. 译文
305 | 
306 | </figcaption></figure></div>
307 | 


--------------------------------------------------------------------------------
/src/material-theming/overview.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Overview)
  4 | # 概述
  5 | 
  6 | [en]: <> (Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Material Theming)
 12 | [en]: <> (Using Material Theming)
 13 | * [译文](#material-theming)
 14 | * [译文](#using-material-theming)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Material Theming)
 19 | <h2 id="material-theming">译文</h2>
 20 | 
 21 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/material-theming/overview/theming-overview-applyingtheming.mp4" src="{assets_path}/material-theming/overview/theming-overview-applyingtheming.mp4" type="video/mp4"></video></figure>
 22 | 
 23 | [en]: <> (What is Material Theming?)
 24 | ### 译文
 25 | 
 26 | [en]: <> (Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand.)
 27 | 译文
 28 | 
 29 | [en]: <> (When you begin changing aspects of your UI, such as color and typography, Material Theming tools apply your design vision throughout your user experience. These tools allow easy switching between design and code workflows by providing specific values for all customizable attributes. Customizing these values creates a Material Theme for your product.)
 30 | 译文
 31 | 
 32 | [en]: <> (Using Material Theming)
 33 | ### 译文
 34 | 
 35 | [en]: <> (Material Theming consists of three main actions: customizing your theme, applying it across your design mocks, and using it in code.)
 36 | 译文
 37 | 
 38 | [en]: <> (Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. You can then customize it as little, or as much, as you like to make Material work for your product.)
 39 | 译文
 40 | 
 41 | [en]: <> (Using Material Theming)
 42 | <h2 id="using-material-theming">译文</h2>
 43 | 
 44 | [en]: <> (The Material Theme editor)
 45 | ### 译文
 46 | 
 47 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/material-theming/overview/theme-editor-desbyte-color-final.mp4" src="{assets_path}/material-theming/overview/theme-editor-desbyte-color-final.mp4" type="video/mp4"></video></figure>
 48 | 
 49 | [en]: <> (Material Theming can be implemented with the help of the Material Theme Editor, a tool that currently allows you to customize color, type, and shape and create your own branded symbol library, helping you deploy Material quickly and reliably. Selected values will cascade throughout your stickersheet, appropriately altering components, text, and surfaces.)
 50 | 译文
 51 | 
 52 | [en]: <> (It’s currently available for the design app Sketch. You can download the Material Plugin to get started with Material Theme editing.)
 53 | 译文
 54 | 
 55 | [en]: <> (Theming in practice)
 56 | ### 译文
 57 | 
 58 | [en]: <> (Theming affects your entire UI, including individual components, like a button. This example shows how a button component’s out-of-the-box values can be customized.)
 59 | 译文
 60 | 
 61 | [en]: <> (Customization: before and after)
 62 | #### 译文
 63 | 
 64 | [en]: <> (A contained button is assigned values for a specific color, shape, and type family. By default, contained buttons have the following default values:)
 65 | 译文
 66 | 
 67 | [en]: <> (The color is #6200EE)
 68 | [en]: <> (The text is 14pt, Roboto, Medium, and all caps)
 69 | [en]: <> (The corners have a rounded radii of 4dp)
 70 | * 译文
 71 | * 译文
 72 | * 译文
 73 | 
 74 | [en]: <> (You can adjust the default color, type, and shape of this contained button to suit your app’s style.)
 75 | 译文
 76 | 
 77 | [en]: <> (On the left, a Material button shows the default styles. On the right, these values have been altered to create a button that is entirely customized.)
 78 | 译文
 79 | 
 80 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 81 | 
 82 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-default.png)
 83 | 
 84 | <figcaption>
 85 | 
 86 | [en]: <> (A baseline Material button)
 87 | 译文
 88 | 
 89 | </figcaption></figure></div><div class="mdui-col"><figure>
 90 | 
 91 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-shrine.png)
 92 | 
 93 | <figcaption>
 94 | 
 95 | [en]: <> (That same Material button, but customized)
 96 | 译文
 97 | 
 98 | </figcaption></figure></div></div>
 99 | 
100 | [en]: <> (Default and customized values)
101 | #### 译文
102 | 
103 | [en]: <> (Buttons have the following attributes and default values, with customizations for this example indicated in bold.)
104 | 译文
105 | 
106 | [en]: <> (Typography)
107 | #### 译文
108 | 
109 | <figure>
110 | 
111 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-type.png)
112 | 
113 | </figure>
114 | 
115 | [en]: <> (Element      | Category    | Attribute                             | Default values                         | Custom values)
116 | [en]: <> (---------    |----------   |---------                              |------                                  |------)
117 | [en]: <> (Text Label   | BUTTON      | Type Family<br>Font<br>Case<br>Size   | Roboto<br>Medium<br>All Caps<br>14pt   | Rubik<br>Medium<br>All Caps<br>14pt)
118 | 
119 | 译文     | 译文     | 译文                        | 译文                        | 译文
120 | --------|----------|----------                  |-----------                 |-----------
121 | 译文     | 译文     | 译文<br>译文<br>译文<br>译文  | 译文<br>译文<br>译文<br>译文  | 译文<br>译文<br>译文<br>译文
122 | 
123 | [en]: <> (Color)
124 | #### 译文
125 | 
126 | <figure>
127 | 
128 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-color.png)
129 | 
130 | </figure>
131 | 
132 | [en]: <> (Element      | Category     | Attribute          | Default values     | Custom values)
133 | [en]: <> (---------    |----------    |---------           |------              |------)
134 | [en]: <> (Container    | Primary      | Color<br>Opacity   | #6200EE<br>100%    | #FEDBD0<br>100%)
135 | [en]: <> (Text Label   | On Primary   | Color<br>Opacity   | #FFFFFFF<br>100%   | #442C2E<br>100%)
136 | [en]: <> (Icon         | On Primary   | Color<br>Opacity   | #FFFFFFF<br>100%   | #442C2E<br>100%)
137 | 
138 | 译文     | 译文     | 译文         | 译文          | 译文
139 | --------|----------|----------   |-----------   |-----------
140 | 译文     | 译文     | 译文<br>译文  | 译文<br>译文  | 译文<br>译文
141 | 译文     | 译文     | 译文<br>译文  | 译文<br>译文  | 译文<br>译文
142 | 译文     | 译文     | 译文<br>译文  | 译文<br>译文  | 译文<br>译文
143 | 
144 | [en]: <> (Iconography)
145 | #### 译文
146 | 
147 | <figure>
148 | 
149 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-icons.png)
150 | 
151 | <figcaption>
152 | 
153 | [en]: <> ()
154 | 译文
155 | 
156 | </figcaption></figure>
157 | 
158 | [en]: <> (Element      | Category     | Attribute          | Default values     | Custom values)
159 | [en]: <> (---------    |----------    |---------           |------              |------)
160 | [en]: <> (Icon    | Icon Set      | Icon Family<br>Icon   | Filled<br>Add    | Outlined<br>Shopping Cart)
161 | 
162 | 译文     | 译文     | 译文         | 译文          | 译文
163 | --------|----------|----------   |-----------   |-----------
164 | 译文     | 译文     | 译文<br>译文  | 译文<br>译文  | 译文<br>译文
165 | 
166 | [en]: <> (Shape)
167 | #### 译文
168 | 
169 | <figure>
170 | 
171 | ![]({assets_path}/material-theming/overview/theming-overview-applyingtheming-shape.png)
172 | 
173 | </figure>
174 | 
175 | [en]: <> (Element     | Attribute                                                                          | Default values                                             | Default values)
176 | [en]: <> (---------   |---------                                                                           |------                                                      |------)
177 | [en]: <> (Container   | Top left corner<br>Top right corner<br>Bottom right corner<br>Bottom left corner   | Rounded 4dp<br>Rounded 4dp<br>Rounded 4dp<br>Rounded 4dp   | Cut 4 dp<br>Cut 4 dp<br>Cut 4 dp<br>Cut 4 dp)
178 | 
179 | 译文     | 译文                        | 译文                        | 译文
180 | --------|----------                   |-----------                 |-----------
181 | 译文     | 译文<br>译文<br>译文<br>译文  | 译文<br>译文<br>译文<br>译文  | 译文<br>译文<br>译文<br>译文
182 | 
183 | [en]: <> (Bold values indicate values that have been customized from the defaults.)
184 | 译文
185 | 
186 | </div>
187 | 


--------------------------------------------------------------------------------
/src/communication/help-feedback.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Help & feedback)
  4 | # 帮助 & 反馈
  5 | 
  6 | [en]: <> (Help content provides answers to user questions and concerns.)
  7 | 帮助内容为用户的问题和疑虑提供解答。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Use & placement)
 12 | [en]: <> (Icons)
 13 | [en]: <> (Writing)
 14 | * [用法 & 位置](#use-placement)
 15 | * [图标](#icons)
 16 | * [文字](#writing)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Use & placement)
 21 | <h2 id="use-placement">用法 & 位置</h2>
 22 | 
 23 | [en]: <> (Using help content)
 24 | ### 使用帮助内容
 25 | 
 26 | [en]: <> (Help content provides answers to common questions about your app. Users can submit comments, report bugs, and ask questions that are not already answered by the help content.)
 27 | 帮助内容提供了用户常见问题的解答。用户可以发表评论，报告错误，并提出帮助内容中尚未回答的问题。
 28 | 
 29 | [en]: <> (Common locations)
 30 | ### 常见的位置
 31 | 
 32 | [en]: <> (Help content should be easy for users to find. It can be placed in various points in your navigation. It usually appears in a navigation drawer or overflow menu under the label “Help” or “Send feedback.”)
 33 | 帮助内容应该放在用户很容易找到的位置。它可以放在导航的不同位置。它通常放置在抽屉式导航（或弹出菜单）的 “帮助” 或 “发送反馈” 中。
 34 | 
 35 | <figure>
 36 | 
 37 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-placement-01-decisiontree.png)
 38 | 
 39 | </figure>
 40 | 
 41 | [en]: <> (App complexity)
 42 | #### 复杂应用
 43 | 
 44 | [en]: <> (If your app is complex, place a link to “Help” both in the navigation drawer and the app bar.)
 45 | [en]: <> (If your app is not complex, place “Help” in a navigation drawer or overflow menu only.)
 46 | * 如果你的应用非常复杂，请在抽屉式导航和应用栏中同时放置 “帮助” 入口。
 47 | * 如果你的应用不太复杂，则仅在抽屉式导航或应用栏中放置“帮助”入口。
 48 | 
 49 | [en]: <> (Navigation Drawer)
 50 | ### 抽屉式导航
 51 | 
 52 | <div class="mdui-row-sm-2"><div class="mdui-col">
 53 | 
 54 | [en]: <> (“Help” should be the last item in the navigation drawer, with “Send feedback” directly above it.)
 55 | 把 “帮助” 作为最后一项放在抽屉式导航中，即 “发送反馈” 的下面。
 56 | 
 57 | [en]: <> (Anytime “Sign out” appears in a navigation drawer, it should be the last item in the list.)
 58 | 如果抽屉式导航中有 “登出”，应该把 “登出” 放在最后一项。
 59 | 
 60 | </div><div class="mdui-col"><figure>
 61 | 
 62 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-placement-02-navdrawer.png)
 63 | 
 64 | <figcaption>
 65 | 
 66 | [en]: <> (The navigation drawer showing “Help” and “Send feedback”)
 67 | 抽屉式导航中的 “帮助” 和 “发送反馈”
 68 | 
 69 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col">
 70 | 
 71 | [en]: <> (Overflow menu)
 72 | #### 弹出菜单
 73 | 
 74 | [en]: <> (“Help” and “Feedback” \(or “Send feedback”\) should be placed in the overflow menu when there is no navigation drawer.)
 75 | 当应用没有抽屉式导航时，把 “帮助” 和 “反馈”（或 “发送反馈” ）放在弹出菜单中。
 76 | 
 77 | </div><div class="mdui-col"><figure>
 78 | 
 79 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-placement-04-overflow.png)
 80 | 
 81 | <figcaption>
 82 | 
 83 | {do}
 84 | 
 85 | [en]: <> (Overflow menu showing “Help” and “Send feedback”)
 86 | 弹出菜单中的 “帮助” 和 “发送反馈”
 87 | 
 88 | </figcaption></figure></div></div>
 89 | 
 90 | [en]: <> (App bar)
 91 | ### 应用栏
 92 | 
 93 | [en]: <> (To provide help for urgent issues, such as payments and refunds, place a Help icon in the app bar. Desktop apps may also place a Help icon in the app bar, as there is more space in the desktop UI.)
 94 | 为了使用户在遇到紧急问题时（如付款和退款），能轻松地找到帮助，可以把帮助图标放在应用栏中。桌面端的应用也可以在应用栏中放置帮助图标，因为在桌面端 UI 中会有较多空间。
 95 | 
 96 | <figure>
 97 | 
 98 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-placement-07-appbar.png)
 99 | 
100 | <figcaption>
101 | 
102 | [en]: <> (Help icon promoted in the app bar)
103 | 帮助图标放在了应用栏中
104 | 
105 | </figcaption></figure>
106 | 
107 | [en]: <> (Help screen)
108 | ### 帮助界面
109 | 
110 | <div class="mdui-row-sm-2"><div class="mdui-col">
111 | 
112 | [en]: <> (The help screen can include a “Send feedback” button for users to report issues or send comments.)
113 | 帮助界面可以包含一个“发送反馈”按钮，供用户报告问题和发送评论。
114 | 
115 | [en]: <> (Content viewed less often \(such as “About,” “Privacy,” and “Terms of service”\) may be placed in an action overflow menu.)
116 | 不常访问的视图（如 “关于” 、 “隐私” 、 “服务条款”）可以放置在弹出菜单中。
117 | 
118 | </div><div class="mdui-col"><figure>
119 | 
120 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-placement-06-overflow.png)
121 | 
122 | <figcaption>
123 | 
124 | [en]: <> (A help screen with frequently asked questions and answers and an action button to send feedback)
125 | 一个帮助界面，包含了常见问题的答案，和发送反馈按钮。
126 | 
127 | </figcaption></figure></div></div>
128 | 
129 | [en]: <> (Icons)
130 | <h2 id="icons">图标</h2>
131 | 
132 | [en]: <> (Help)
133 | ### 帮助
134 | 
135 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
136 | 
137 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-01.png)
138 | 
139 | <figcaption>
140 | 
141 | {do}
142 | 
143 | [en]: <> (To indicate Help content, use the *icon for Help*.)
144 | 为了表示帮助内容，请使用“help 图标”。
145 | 
146 | </figcaption></figure></div><div class="mdui-col"><figure>
147 | 
148 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-02.png)
149 | 
150 | <figcaption>
151 | 
152 | {dont}
153 | 
154 | [en]: <> (Don’t use icon variations, such as those with speech bubbles or outlines.)
155 | 不要使用图标的变体，例如带有气泡或轮廓的图标。
156 | 
157 | </figcaption></figure></div></div>
158 | 
159 | [en]: <> (Send feedback)
160 | ### 发送反馈
161 | 
162 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
163 | 
164 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-03.png)
165 | 
166 | <figcaption>
167 | 
168 | {do}
169 | 
170 | [en]: <> (To indicate where users can send feedback, use the Material Design *icon for feedback*.)
171 | 请使用 Material Design 的“feedback 图标”来表示反馈。
172 | 
173 | </figcaption></figure></div><div class="mdui-col"><figure>
174 | 
175 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-04.png)
176 | 
177 | <figcaption>
178 | 
179 | {dont}
180 | 
181 | [en]: <> (Don’t use icon variations, such as chat or bug icons.)
182 | 不要使用图标的变体，例如 chat 或 bug 图标。
183 | 
184 | </figcaption></figure></div></div>
185 | 
186 | [en]: <> (Help Tooltips)
187 | ### 帮助提示
188 | 
189 | [en]: <> (When a brief description can help provide context, you can display a help tooltip. Help icons provide helper text on hover, tap, or click.)
190 | 当简短的描述可以帮助提供上下文时，你可以显示一个帮助提示。帮助图标在鼠标悬浮、点击、以及手指触摸和点击时会提供帮助文本。
191 | 
192 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
193 | 
194 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-05.png)
195 | 
196 | <figcaption>
197 | 
198 | {do}
199 | 
200 | [en]: <> (To indicate a help tooltip is available, use the Material Design *Help outline icon*.)
201 | 为了表示这是一个帮助提示，请使用 Material Design 的*Help outline 图标*
202 | 
203 | </figcaption></figure></div><div class="mdui-col"><figure>
204 | 
205 | ![]({assets_path}/communication/help-feedback/communication-helpfeedback-icons-06.png)
206 | 
207 | <figcaption>
208 | 
209 | {dont}
210 | 
211 | [en]: <> (Don’t use icon variations or icons with speech bubbles or outlines.)
212 | 不要使用图标的变体或带有气泡或轮廓的图标。
213 | 
214 | </figcaption></figure></div></div>
215 | 
216 | [en]: <> (Writing)
217 | <h2 id="writing">文字</h2>
218 | 
219 | [en]: <> (Make it easy to read)
220 | ### 使其便于阅读
221 | 
222 | [en]: <> (Make content clear and easy to scan by formatting text with bold headings, lists, tables, and space between paragraphs.)
223 | 按需使用大标题、列表、表格以及段落间距等来格式化文本，使使内容更易于阅读。
224 | 
225 | [en]: <> (When referring to elements that users need to select, such as buttons or links, you can bold their names when referring to them.)
226 | 当涉及需要用户选择的元素（例如按钮或链接）时，请在引用时加粗它们。
227 | 
228 | <figure>
229 | 
230 | ![]({assets_path}/communication/help-feedback/patterns-helpfeedback-writing-01.png)
231 | 
232 | <figcaption>
233 | 
234 | [en]: <> (Headings help organize an article’s content. They help readers scan the page to quickly find the information they need.)
235 | 标题清楚的概括了一篇文章的内容，这帮助读者快速扫描页面就能就能找到他们需要的信息。
236 | 
237 | </figcaption></figure>
238 | 
239 | [en]: <> (Give key information)
240 | #### 提供关键信息
241 | 
242 | [en]: <> (Keep explanations as short as possible, without giving details that aren’t relevant to typical usage.)
243 | 使用尽可能简短的语言解释问题。避免给出无关的细节。
244 | 
245 | [en]: <> (Use simple language)
246 | #### 使用简单的语言
247 | 
248 | [en]: <> (Avoid using technical terms in help content where possible.)
249 | 尽量避免在帮助内容中使用专业术语。
250 | 
251 | [en]: <> (Show images)
252 | #### 展示图片
253 | 
254 | [en]: <> (When providing step-by-step instructions, show relevant images or icons to explain what the user needs to do.)
255 | 当提供分步说明时，显示相关的图片或图标来解释用户需要做什么。
256 | 
257 | </div>
258 | 


--------------------------------------------------------------------------------
/src/shape/shape-as-expression.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Shape as expression)
  4 | # 形状表达
  5 | 
  6 | [en]: <> (Shape can communicate an element’s state or help express a brand.)
  7 | 形状能传达一个元素的状态或帮助表现品牌。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Communicating state)
 12 | [en]: <> (Expressing brand)
 13 | * [传达状态](#communicating-state)
 14 | * [表现品牌](#expressing-brand)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Communicating state)
 19 | <h2 id="communicating-state">传达状态</h2>
 20 | 
 21 | [en]: <> (Shape and meaning)
 22 | ### 形状和内涵
 23 | 
 24 | [en]: <> (Shape can communicate many things about an element, including its current state, the result of a user interaction, or other changes in an app. When used in these ways, shape should be used consistently across the same state and interactions, so that a specific shape means the same thing every time it’s encountered.)
 25 | 形状能传递与元素有关的很多信息，包括当前状态、用户交互结果、或应用中的其他改变。如此使用时，同样的状态和交互应确保形状使用得统一，因此每遇特定形状都意味着同一事情。
 26 | 
 27 | [en]: <> (Shape and interaction)
 28 | #### 形状和交互
 29 | 
 30 | [en]: <> (To attach meaning to a specific shape, shape changes can be expressed in tandem with a user-initiated action or state change. For example, morph a shape upon selection, or introduce the shape with an icon or other indicator, to reinforce a shape’s meaning.)
 31 | 要为特定形状附上意思，形状改变的展现可以串在一用户发起的动作或状态改变后。举例，在选择时变形，或引入带有图标或其他指示的形状，以强化形状内涵。
 32 | 
 33 | [en]: <> (Non-interactive shapes)
 34 | #### 非交互式形状
 35 | 
 36 | [en]: <> (If a shape isn’t interactive, avoid using shapes with sizes large enough to appear interactive. For example, a small triangular shape on a card shouldn’t be large enough to be mistaken for a tap target if it’s not one.)
 37 | 如果一个形状不是交互式的，则避免使用尺寸大到可以展现交互的形状。举例，一个卡片上的小三角形如果不为点按目标则不应大到可被误判。
 38 | 
 39 | <figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/shape/shape-as-expression/communicatingstate-do-reply-1b-v2.mp4" src="{assets_path}/shape/shape-as-expression/communicatingstate-do-reply-1b-v2.mp4" type="video/mp4"></video><figcaption>
 40 | 
 41 | {do}
 42 | 
 43 | [en]: <> (Shape changes should be clearly linked to a user interaction or other obvious cause. This list item’s shape changes upon passing a gesture threshold, eventually giving its left edge a rounded corner.)
 44 | 形状变化应该与用户交互或其它明显原因清晰关联。这个列表项的形状在越过一个手势阈值后发生变化，最终在它的左边缘带来一个圆角。
 45 | 
 46 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 47 | 
 48 | ![]({assets_path}/shape/shape-as-expression/communicatingstate-dont-reply-1.png)
 49 | 
 50 | <figcaption>
 51 | 
 52 | {dont}
 53 | 
 54 | [en]: <> (Don’t communicate state with shapes that are too small to be noticeable.)
 55 | 不要使用小得难以察觉的形状传递状态。
 56 | 
 57 | </figcaption></figure></div><div class="mdui-col"><figure>
 58 | 
 59 | ![]({assets_path}/shape/shape-as-expression/communicatingstate-dont-reply-2.png)
 60 | 
 61 | <figcaption>
 62 | 
 63 | {dont}
 64 | 
 65 | [en]: <> (Don’t communicate state with a shape large enough to provide a tap target if it’s not interactive.)
 66 | 若不是交互式的，不要使用大到可以作为点按目标的形状来传递状态。
 67 | 
 68 | </figcaption></figure></div></div><figure>
 69 | 
 70 | ![]({assets_path}/shape/shape-as-expression/communicatingstate-caution-baseline-1.png)
 71 | 
 72 | <figcaption>
 73 | 
 74 | {caution}
 75 | 
 76 | [en]: <> (A shape can be used in ways that makes it unclear whether it’s expressing a state or branding. These folded card corners don’t make it clear if the cards are selected, favorited, or simply expressing brand – because cards can express all of these states. To make meaning clearer, either:)
 77 | 可以使用不清楚其是在传递状态还是表现品牌的形状。这些折叠起来的卡片边角未表明这些卡片是选中，喜爱，还是简单地表现着品牌 – 因为卡片能够传达所有这些状态。要使表意明晰，二选一：
 78 | 
 79 | [en]: <> (Clearly connect the change of the corner shape with a user action, like selection or favoriting)
 80 | [en]: <> (Remove the folded shape, but keep the corner angle, to reduce the appearance that the folded shape is interactive)
 81 | * 清楚地把角的形状变化和一用户动作关联起来，如选择或喜爱
 82 | * 移去折叠状，但保留角的角度，以减少该折叠形的可交互感
 83 | 
 84 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 85 | 
 86 | ![]({assets_path}/shape/shape-as-expression/communicatingstate-do-baseline-1.png)
 87 | 
 88 | <figcaption>
 89 | 
 90 | {do}
 91 | 
 92 | [en]: <> (Use shape consistently, so that each shape expresses a single meaning. The rounded corner on selected cards helps the shape develop meaning.)
 93 | 统一一致地使用形状，这样每个形状仅表一个意思。选中的卡片上的圆角有助于形状进行表意。
 94 | 
 95 | </figcaption></figure></div><div class="mdui-col"><figure>
 96 | 
 97 | ![]({assets_path}/shape/shape-as-expression/communicatingstate-caution-baseline-2.png)
 98 | 
 99 | <figcaption>
100 | 
101 | {caution}
102 | 
103 | [en]: <> (The inconsistent shapes on the corners in this card collection make it unclear if each shape represents something different \(such as distinct groupings\) or is simply brand expression.)
104 | 此卡片集合上边角的不同形状模糊了各形状是否代表不同的意思（例如不同的分组）或仅仅是表现品牌。
105 | 
106 | </figcaption></figure></div></div>
107 | 
108 | [en]: <> (Expressing brand)
109 | <h2 id="expressing-brand">表现品牌</h2>
110 | 
111 | [en]: <> (Shape and brand expression)
112 | ### 形状和品牌表达
113 | 
114 | [en]: <> (Branding with shape)
115 | #### 形塑品牌
116 | 
117 | [en]: <> (Use shape in combination with other customizations, like color and typography, to develop your brand’s visual language. Similar, related shapes help unify brand expression across your app. Your app can use a *shape family* – a set of similar shapes such as oval variations of a circle, or the same angled corner at different scales – across its surfaces, components, and elements. The style of shapes in a shape family, such as organic or geometric forms, should match your brand.)
118 | 结合其它自定义一起调教形状，如颜色和排版，进而开发您的品牌视觉语言。相似的、关联的形状有助于跨应用地统一您的品牌表达。您的应用可以使用一个*形状系列* – 即一组近似的形状，例如多种离心率的圆，或角度相同大小不同的边角 – 它们广泛遍布于其面，组件，和元素。形状系列中形状的风格，如自然或规则型，应与您的品牌相匹配。
119 | 
120 | [en]: <> (Mixing shapes)
121 | #### 调和形状
122 | 
123 | [en]: <> (When expressing brand with shape, avoid shapes that:)
124 | 用形状表现品牌时，避开这样的形状：
125 | 
126 | [en]: <> (Imply interactivity)
127 | [en]: <> (Inaccurately express state)
128 | [en]: <> (Interfere with usability)
129 | * 暗示着可交互的
130 | * 会误表现状态的
131 | * 干扰可用性的
132 | 
133 | [en]: <> (Mixing both different shape styles, and different shapes altogether, can make it difficult to associate particular shapes with a brand.)
134 | 混用不同的形状风格，和不同的形状于一处，可能导致难以将特定形状与品牌相联系。
135 | 
136 | [en]: <> (Shape overuse)
137 | #### 形状使用过度
138 | 
139 | [en]: <> (Overuse of a shape for branding purposes can make it less meaningful because that shape becomes common and less noticeable.)
140 | 过度使用一个形状于品牌化目的可能会让其不是那么有意义因为这个形状已经普遍存在变得不再引目。
141 | 
142 | <figure>
143 | 
144 | ![]({assets_path}/shape/shape-as-expression/expressingbrand-reply-1.png)
145 | 
146 | <figcaption>
147 | 
148 | {do}
149 | 
150 | [en]: <> (Consistent use of shape throughout a product contributes to a brand’s visual language. This product’s components use a shape based on its logo \(1, 2\).)
151 | 产品中各处对形状的如一使用有利于品牌的视觉语言。此产品组件使用的形状基于其徽标（1，2）。
152 | 
153 | </figcaption></figure><figure>
154 | 
155 | ![]({assets_path}/shape/shape-as-expression/expressingbrand-shrine-1.png)
156 | 
157 | <figcaption>
158 | 
159 | {do}
160 | 
161 | [en]: <> (This product’s components use a geometric shape based on its logo \(1, 2, 3\).)
162 | 此产品组件使用的规则型形状基于其徽标（1，2，3）。
163 | 
164 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
165 | 
166 | ![]({assets_path}/shape/shape-as-expression/expression-do-reply-1.png)
167 | 
168 | <figcaption>
169 | 
170 | {do}
171 | 
172 | [en]: <> (The curve of the corner reflects the color and curved edge of the logo, without affecting usability.)
173 | 边角曲线反映了徽标的颜色和曲边，且不影响可用性。
174 | 
175 | </figcaption></figure></div><div class="mdui-col"><figure>
176 | 
177 | ![]({assets_path}/shape/shape-as-expression/expression-dont-reply-1.png)
178 | 
179 | <figcaption>
180 | 
181 | {dont}
182 | 
183 | [en]: <> (Don’t reduce the usability of a component when using shape to express brand. The size of this shape interferes with the usability of the list.)
184 | 勿以牺牲组件可用性的方式表现品牌。该形状的大小影响了此列表的可用性。
185 | 
186 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
187 | 
188 | ![]({assets_path}/shape/shape-as-expression/expressingbrand-caution-shrine-1.png)
189 | 
190 | <figcaption>
191 | 
192 | {caution}
193 | 
194 | [en]: <> (Overuse of a single shape makes that shape common, and thus less noticeable, which reduces its impact on branding.)
195 | 过度使用单一形状使该形状变得常见，因而不太明显，亦减少了它在品牌化中的影响。
196 | 
197 | </figcaption></figure></div><div class="mdui-col"><figure>
198 | 
199 | ![]({assets_path}/shape/shape-as-expression/expressingbrand-dont-shrine-2.png)
200 | 
201 | <figcaption>
202 | 
203 | {dont}
204 | 
205 | [en]: <> (Don’t use shapes that don’t reflect a product’s shape family.)
206 | 别去用那些不体现产品形状系列的形状。
207 | 
208 | </figcaption></figure></div></div></div>
209 | 


--------------------------------------------------------------------------------
/src/color/text-legibility.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Text legibility)
  4 | # 文本可读性
  5 | 
  6 | [en]: <> (Color plays an important role in text legibility.)
  7 | 颜色在文本可读性中起到很重要的作用。
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Legibility standards)
 12 | [en]: <> (Text backgrounds)
 13 | [en]: <> (Text types)
 14 | * [可读性标准](#legibility-standards)
 15 | * [文本背景](#text-backgrounds) 
 16 | * [文本类型](#text-types) 
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Legibility standards)
 21 | <h2 id="legibility-standards">可读性标准</h2>
 22 | 
 23 | [en]: <> (WCAG standards)
 24 | ### Web内容无障碍指南（WCAG）标准
 25 | 
 26 | [en]: <> (All text should be legible and meet accessibility standards. *The Web Content Accessibility Guidelines \(WCAG 2.0\)* level AA requires a 4.5：1 color contrast between text and background for normal text, and 3:1 to large text.)
 27 | 所有的文本应该是清晰易懂的，并符合无障碍标准。*Web内容无障碍指南 \(WCAG 2.0\)* 中，AA 级别要求正常文本的文本和背景之间的颜色对比度为4.5：1，大文本的颜色对比度为3：1。
 28 | 
 29 | [en]: <> (To learn more about color, contrast, and accessibility design, read *Material Design Accessibility*.)
 30 | 想要了解更多关于颜色，对比和无障碍设计，请阅读 *Material Design 无障碍*
 31 | 
 32 | 
 33 | [en]: <> (Text backgrounds)
 34 | <h2 id="text-backgrounds">文本背景</h2>
 35 | 
 36 | [en]: <> (Text on colored backgrounds)
 37 | ### 彩色背景上的文本
 38 | 
 39 | [en]: <> (Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme.)
 40 | 黑色文本被推荐运用于浅色的背景上，而白色的文本推荐运用于深色的背景。如果你的app同时拥有浅色和深色的主题，请确保这些文本在每个主题的对比颜色上都是易获取的。
 41 | 
 42 | [en]: <> (Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text.)
 43 | 彩色背景或排版会额外的改变关于文本不透明度和不同文本状态的规则。
 44 | 
 45 | [en]: <> (Using text opacity)
 46 | ### 使用文本不透明度
 47 | 
 48 | [en]: <> (Instead of using gray text and icons on top of colored backgrounds, create better contrast by displaying white or black text with reduced opacity.)
 49 | 在彩色背景上使用灰色的文本和图标是不推荐的，取而代之的是 通过显示含已减少不透明度的白色或黑色文本来创造更佳的透明度。
 50 | 
 51 | [en]: <> (For example, black text displayed at 75% opacity on a green background gives the text an appearance of black, with a hint of green.)
 52 | 例如，黑色文本以 75% 的不透明度显示在一个绿色背景上，就会给这些文字带来黑色的外观并带有一丝绿色。
 53 | 
 54 | [en]: <> (Alternatively, you can calculate the color of text by doing the following:)
 55 | 或者，你可以通过完成以下这些来计算文本的颜色
 56 | 
 57 | [en]: <> (Place the color black at reduced opacity in front of a green background)
 58 | [en]: <> (Identify the hex value of the resulting darkened green color)
 59 | [en]: <> (Use that hex value of that color for your text)
 60 | * 将含已减少不透明度的黑色放在一个绿色背景的前面。
 61 | * 识别由此产生的深色绿色的十六进制值（hex color）。
 62 | * 将此颜色的十六进制值应用于你的文本。
 63 | 
 64 | [en]: <> (In this case, if the surface behind the text changes color, you must update the hex color as well.)
 65 | 在这种情况下，如果处于文本下方的表面变换了颜色，你必须同时改变文本的十六进制色码。
 66 | 
 67 | <figure>
 68 | 
 69 | ![]({assets_path}/color/text-legibility/color-legibility-opacity-baseline-do.png)
 70 | 
 71 | <figcaption>
 72 | 
 73 | {do}
 74 | 
 75 | [en]: <> (Use a transparent version of black on a colored surface to preserve legibility.)
 76 | 在彩色表面上使用透明的黑色以保持可读性。
 77 | 
 78 | </figcaption></figure><figure>
 79 | 
 80 | ![]({assets_path}/color/text-legibility/color-legibility-opacity-baseline-dont.png)
 81 | 
 82 | <figcaption>
 83 | 
 84 | {dont}
 85 | 
 86 | [en]: <> (Avoid using opaque gray text that isn’t legible on colored surfaces.)
 87 | 避免使用不透明的灰色文本，他们在彩色表面上往往是难以分辨的
 88 | 
 89 | </figcaption></figure>
 90 | 
 91 | [en]: <> (Dark text on light backgrounds)
 92 | ### 在浅色背景上使用深色文本
 93 | 
 94 | <div class="mdui-row-sm-2"><div class="mdui-col">
 95 | 
 96 | [en]: <> (Dark text on light backgrounds \(shown here as #000000 on #FFFFFF\) applies the following opacity levels:)
 97 | 在浅色背景上的深色文本（例如此处所展示的 #FFFFFF 背景上的 #000000 ）应用以下的不透明度( opacity )级别
 98 | 
 99 | [en]: <> (High-emphasis text has an opacity of 100%)
100 | [en]: <> (Medium-emphasis text and hint text have opacities of 60%)
101 | [en]: <> (Disabled text has an opacity of 38%)
102 | * 高强调度的文本具有100%的不透明度。
103 | * 中强调度的文本和暗示文本具有60%的不透明度。
104 | * 禁用文本的不透明度为38%。
105 | 
106 | </div><div class="mdui-col"><figure>
107 | 
108 | ![]({assets_path}/color/text-legibility/color-legibility-darktext.png)
109 | 
110 | </figure></div></div>
111 | 
112 | [en]: <> (Colored text and backgrounds)
113 | ### 彩色的文本和背景
114 | 
115 | [en]: <> (Colored text should be used sparingly to draw attention and apply selective emphasis. Ideally colored text should be reserved for text elements such as headlines, buttons, and links.)
116 | 彩色文本应谨慎使用，以引起注意，并有选择性地强调。理想的彩色文本应该为像标题、按钮和链接等文本元素保留。
117 | 
118 | [en]: <> (Use the Material color tool to determine if certain foreground colors used on text pass accessibility standards on background colors.)
119 | 使用 *Material颜色工具* 来确定文本上使用的某些前景颜色是否通过背景颜色的无障碍标准。
120 | 
121 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
122 | 
123 | ![]({assets_path}/color/text-legibility/color-legibility-coloredtextbg-basil.png)
124 | 
125 | <figcaption>
126 | 
127 | {do}
128 | 
129 | [en]: <> (Large headlines and short text snippets are best for colored text.)
130 | 大标题和短的文本片段是彩色文本的最佳实践。
131 | 
132 | </figcaption></figure></div><div class="mdui-col"><figure>
133 | 
134 | ![]({assets_path}/color/text-legibility/color-legibility-coloredtextbg-caution-owl.png)
135 | 
136 | <figcaption>
137 | 
138 | {caution}
139 | 
140 | [en]: <> (It can be hard to read long body copy that is colored.)
141 | 长篇的彩色文稿可能是难以阅读的。
142 | 
143 | </figcaption></figure></div></div>
144 | 
145 | 
146 | [en]: <> (Text types)
147 | <h2 id="text-types">文本类型</h2>
148 | 
149 | [en]: <> (Helper Text)
150 | ### 辅助文本
151 | 
152 | <div class="mdui-row-sm-2"><div class="mdui-col">
153 | 
154 | [en]: <> (Helper text gives context about a field’s input, such as how the input will be used. It can adopt brand colors, but should be legible as determined by WCAG standards.)
155 | 辅助文本提供关于字段的输入的上下文，例如输入将如何使用。它可以采用品牌颜色，但应该是WCAG标准所确定的。
156 | 
157 | [en]: <> (For example, helper text on light backgrounds could apply the following opacity levels and default hexes:)
158 | 例如，浅背景下的辅助文本可以应用以下的不透明度级别和默认值：
159 | 
160 | [en]: <> (High emphasis helper: This text uses a hex value #000000 at 100% opacity)
161 | [en]: <> (Default color helper text: This text uses a hex value of #000000 at 60% opacity)
162 | [en]: <> (Default error helper text: This text uses a hex value of #B00020 at 100% opacity)
163 | * 强调度高的辅助文本：这个文本使用了十六进制颜色值 #000000 和100%的不透明度
164 | * 默认颜色的辅助文本：这个文本使用了十六进制颜色值 #000000 和60%的不透明度
165 | * 默认错误的辅助文本：这个文本使用了十六进制颜色值 #B00020 和100%的不透明度
166 | 
167 | </div><div class="mdui-col"><figure>
168 | 
169 | ![]({assets_path}/color/text-legibility/color-legibility-helpertext.png)
170 | 
171 | </figure></div></div>
172 | 
173 | [en]: <> (Selected Text)
174 | ### 已选择文本
175 | 
176 | [en]: <> (To reflect brand, text selection can use an accent of your primary or secondary color.)
177 | 为了反映品牌，文字选择区域可以使用主色或次色的强调色。
178 | 
179 | [en]: <> (Selected text should be legible against the selection color, and the selection color should contrast the background color. Alternatively, you can display outlines, motion, checkmark icons, or other text treatments to indicate selected text.)
180 | 所选择的文本应在选择区颜色下清晰易读，选择区颜色应与背景颜色形成对比。或者，你可以显示纲要、手势、复选图标或其他文本处理方式来指示选择的文本。
181 | 
182 | [en]: <> (Learn more about contrast \(or try a color contrast analyzer\) at webaim.org.)
183 | 你可以在 *WeBAIM.org* 了解更多关于对比度信息（或者尝试使用颜色对比度分析器）。
184 | 
185 | <div class="mdui-row-xs-2"><div class="mdui-col"><figure>
186 | 
187 | ![]({assets_path}/color/text-legibility/color-legibility-selectedtext-baseline.png)
188 | 
189 | <figcaption>
190 | 
191 | [en]: <> (Text)
192 | [en]: <> (Text selection color)
193 | [en]: <> (Background)
194 | * 文本
195 | * 文本选择区颜色
196 | * 背景色
197 | 
198 | </figcaption></figure></div><div class="mdui-col"><figure>
199 | 
200 | ![]({assets_path}/color/text-legibility/color-legibility-selectedtext-reply.png)
201 | 
202 | <figcaption>
203 | 
204 | [en]: <> (Text selection can be customized using your palette accent color.)
205 | 文本选择区可以使用调色板的强调颜色定制。
206 | 
207 | </figcaption></figure></div></div>
208 | 
209 | [en]: <> (Icons and Other symbols)
210 | ### 图标和其他符号
211 | 
212 | <div class="mdui-row-sm-2"><div class="mdui-col">
213 | 
214 | [en]: <> (Icons and other elements don’t need to meet WCAG legibility standards, but should be as visible as possible to indicate function or communicate information.)
215 | 图标和其他元素不需要满足 WCAG 可读性标准，但应该尽可能明显地指示功能或交流信息。
216 | 
217 | 
218 | [en]: <> (For example, dark icons \(#000000\) or other elements on light backgrounds \(#FFFFFF\) could apply the following opacity levels:)
219 | 例如，在浅色背景上的深色图标（#000000）或其他的元素应该运用如下的不透明度等级
220 | 
221 | [en]: <> (Active icons have an opacity of 100%)
222 | [en]: <> (Inactive icons have an opacity of 60%)
223 | [en]: <> (Disabled icones have an opacity of 38%)
224 | * 激活的图标具有100%的不透明度
225 | * 可激活的图标具有60%的不透明度
226 | * 禁用的图标具有38%的不透明度
227 | 
228 | </div><div class="mdui-col"><figure>
229 | 
230 | ![]({assets_path}/color/text-legibility/color-legibility-darkicon.png)
231 | 
232 | </figure></div></div></div>
233 | 


--------------------------------------------------------------------------------
/src/platform-guidance/cross-platform-adaptation.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Cross-platform adaptation)
  4 | # 跨平台适配
  5 | 
  6 | [en]: <> (Material Design supports design and usability best practices across platforms to help create beautiful user experiences.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (When to adapt)
 12 | [en]: <> (Cross-platform guidelines)
 13 | * [译文](#when-to-adapt)
 14 | * [译文](#cross-platform-guidelines)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (When to adapt)
 19 | <h2 id="when-to-adapt">译文</h2>
 20 | 
 21 | [en]: <> (Material Design was built on a foundation of best practices in both traditional and web design, informed by user experience research and cognitive science. The design guidelines that developed from these findings are intended to be universally applied across all platforms and devices.)
 22 | 译文
 23 | 
 24 | [en]: <> (Design conventions can differ from platform to platform. These differences in convention can affect the user's ability to understand the UI or complete certain tasks. In these cases, it is recommended to adapt to platform-specific conventions. In areas where design differences are minimally disruptive, adapting to the platform is optional.)
 25 | 译文
 26 | 
 27 | [en]: <> (The following guidelines indicate when you should adapt to native platform conventions, and when you have the option to adapt. Platform conventions are constantly evolving, and Material Design is evolving with them to increase the quality of our design patterns.)
 28 | 译文
 29 | 
 30 | [en]: <> (Cross-platform guidelines)
 31 | <h2 id="cross-platform-guidelines">译文</h2>
 32 | 
 33 | [en]: <> (Toolbars)
 34 | ### 译文
 35 | 
 36 | [en]: <> (Toolbars are commonly used to frame the context of a screen. On iOS, toolbars are called navigation bars. On Android, toolbars are called top app bars.)
 37 | 译文
 38 | 
 39 | [en]: <> (It is recommended to use a platform’s default text alignment for toolbar titles, unless multiple action buttons are present.)
 40 | 译文
 41 | 
 42 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 43 | 
 44 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/as-crossplatform-toolbar-01.png)
 45 | 
 46 | <figcaption>
 47 | 
 48 | [en]: <> (Android)
 49 | #### 译文
 50 | 
 51 | [en]: <> (Titles are left-aligned by default in top app bars.)
 52 | 译文
 53 | 
 54 | </figcaption></figure></div><div class="mdui-col"><figure>
 55 | 
 56 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-toolbar-2.png)
 57 | 
 58 | <figcaption>
 59 | 
 60 | [en]: <> (iOS)
 61 | #### 译文
 62 | 
 63 | [en]: <> (Titles are center-aligned by default in navigation bars.)
 64 | 译文
 65 | 
 66 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 67 | 
 68 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/as-crossplatform-toolbar-02.png)
 69 | 
 70 | <figcaption>
 71 | 
 72 | [en]: <> (Android)
 73 | #### 译文
 74 | 
 75 | [en]: <> (When multiple actions, or even no actions, appear on the right side, top app bar titles are always left-aligned.)
 76 | 译文
 77 | 
 78 | </figcaption></figure></div><div class="mdui-col"><figure>
 79 | 
 80 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-toolbar-4.png)
 81 | 
 82 | <figcaption>
 83 | 
 84 | [en]: <> (iOS)
 85 | #### 译文
 86 | 
 87 | [en]: <> (When multiple action buttons are on the right side, or on the home screen of an application, titles may be left-aligned.)
 88 | 译文
 89 | 
 90 | </figcaption></figure></div></div>
 91 | 
 92 | [en]: <> (Iconography)
 93 | ### 译文
 94 | 
 95 | [en]: <> (System icons are used to represent the most universally available actions for the platform.)
 96 | 译文
 97 | 
 98 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 99 | 
100 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/as-crossplatform-iconography-01.png)
101 | 
102 | <figcaption>
103 | 
104 | [en]: <> (Android)
105 | #### 译文
106 | 
107 | [en]: <> (The Up button contains a thin arrow with a stem.)
108 | 译文
109 | 
110 | </figcaption></figure></div><div class="mdui-col"><figure>
111 | 
112 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-iconography-2.png)
113 | 
114 | <figcaption>
115 | 
116 | [en]: <> (iOS)
117 | #### 译文
118 | 
119 | [en]: <> (On iOS, the back arrow is thicker and doesn’t have a stem. It should include a label to its destination.)
120 | 译文
121 | 
122 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
123 | 
124 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/as-crossplatform-iconography-02.png)
125 | 
126 | <figcaption>
127 | 
128 | [en]: <> (Android)
129 | #### 译文
130 | 
131 | [en]: <> (The action overflow menu icon \(indicated by the “More…” symbol\) contains three vertical dots.)
132 | 译文
133 | 
134 | </figcaption></figure></div><div class="mdui-col"><figure>
135 | 
136 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-iconography-4.png)
137 | 
138 | <figcaption>
139 | 
140 | [en]: <> (iOS)
141 | #### 译文
142 | 
143 | [en]: <> (The action overflow menu icon \(indicated by the “More…” symbol\) contains three horizontal dots.)
144 | 译文
145 | 
146 | </figcaption></figure></div></div>
147 | 
148 | [en]: <> (Controls)
149 | ### 译文
150 | 
151 | [en]: <> (Controls should clearly indicate how users should interact with them.)
152 | 译文
153 | 
154 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
155 | 
156 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/as-crossplatform-controls.png)
157 | 
158 | <figcaption>
159 | 
160 | [en]: <> (Android)
161 | #### 译文
162 | 
163 | [en]: <> (Use Material switches, checkboxes, and radio buttons.)
164 | 译文
165 | 
166 | </figcaption></figure></div><div class="mdui-col"><figure>
167 | 
168 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-control-2.png)
169 | 
170 | <figcaption>
171 | 
172 | [en]: <> (iOS)
173 | #### 译文
174 | 
175 | [en]: <> (Native platform switches may be used as they have matching functionality and appearance as Material switches.)
176 | 译文
177 | 
178 | [en]: <> (Use switches instead of check boxes and check mark lists instead of radio buttons, as these are the graphics expected on iOS.)
179 | 译文
180 | 
181 | </figcaption></figure></div></div>
182 | 
183 | [en]: <> (Gestures)
184 | ### 译文
185 | 
186 | [en]: <> (Edge swipe)
187 | #### 译文
188 | 
189 | [en]: <> (An edge swipe starts from outside of the screen to reveal off-screen content.)
190 | 译文
191 | 
192 | [en]: <> (Edge swipes can conflict with other swipe gestures, such as horizontal swipes through pages or table rows. To avoid these kinds of conflicts, an edge swipe should perform the same behavior as any other swipe that exists over a content area.)
193 | 译文
194 | 
195 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/cross-platform-adaptation/platform-adaptation-android.mp4" src="{assets_path}/platform-guidance/cross-platform-adaptation/platform-adaptation-android.mp4" type="video/mp4"></video><figcaption>
196 | 
197 | [en]: <> (Android)
198 | #### 译文
199 | 
200 | [en]: <> (When conflicting gestures are not present, performing an edge swipe from the left reveals off-screen content, such as a navigation drawer.)
201 | 译文
202 | 
203 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/cross-platform-adaptation/platform-adaptation-ios.mp4" src="{assets_path}/platform-guidance/cross-platform-adaptation/platform-adaptation-ios.mp4" type="video/mp4"></video><figcaption>
204 | 
205 | [en]: <> (iOS)
206 | #### 译文
207 | 
208 | [en]: <> (When conflicting gestures are not present, performing an edge swipe from the left navigates you back through an app’s hierarchy.)
209 | 译文
210 | 
211 | </figcaption></figure></div></div>
212 | 
213 | [en]: <> (Typography)
214 | ### 译文
215 | 
216 | [en]: <> (Typography communicates both text content and branding. In both cases, text must be accessible and resizable.)
217 | 译文
218 | 
219 | [en]: <> (If your app already uses typography for branding, it is recommended to do so in moderation.)
220 | 译文
221 | 
222 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
223 | 
224 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-typography-1.png)
225 | 
226 | <figcaption>
227 | 
228 | [en]: <> (Android)
229 | #### 译文
230 | 
231 | [en]: <> (The default typeface on Android is Roboto. On Android, text size should be specified in scaleable pixels to allow type to be resized using accessibility features.)
232 | 译文
233 | 
234 | </figcaption></figure></div><div class="mdui-col"><figure>
235 | 
236 | ![]({assets_path}/platform-guidance/cross-platform-adaptation/material-design.platform-adaptation-typography-2.png)
237 | 
238 | <figcaption>
239 | 
240 | [en]: <> (iOS)
241 | #### 译文
242 | 
243 | [en]: <> (The default typeface on iOS is San Francisco. Using this typeface is the easiest way to implement accessibility features like Dynamic Type. Using other typefaces may require making adjustments to get the same accessibility features.)
244 | 译文
245 | 
246 | </figcaption></figure></div></div></div>
247 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-permissions.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android permissions)
  4 | # Android 权限
  5 | 
  6 | [en]: <> (Permission requests should be simple, transparent, and understandable.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Anatomy)
 13 | [en]: <> (Request types)
 14 | [en]: <> (Runtime permissions)
 15 | [en]: <> (Denied permissions)
 16 | * [译文](#usage)
 17 | * [译文](#anatomy)
 18 | * [译文](#request-types)
 19 | * [译文](#runtime-permissions)
 20 | * [译文](#denied-permissions)
 21 | 
 22 | </nav></div><div class="article__body">
 23 | 
 24 | [en]: <> (Usage)
 25 | <h2 id="usage">译文</h2>
 26 | 
 27 | [en]: <> (Android apps have limited permissions associated with them by default. If your app selected to apply “normal” permissions, the system automatically grants those without user input.)
 28 | 译文
 29 | 
 30 | [en]: <> (For permissions that extend beyond the scope of normal permissions, the user must explicitly grant those permissions. These are classified according to the following groups.)
 31 | 译文
 32 | 
 33 | [en]: <> (Permission groups)
 34 | ### 译文
 35 | 
 36 | <div class="mdui-row-sm-2"><div class="mdui-col">
 37 | 
 38 | [en]: <> (Permissions are divided into nine groups, allowing users to grant all permissions encompassed by a single action by bundling them together as a group.)
 39 | 译文
 40 | 
 41 | [en]: <> (For example, to provide a user with permission to view, edit, and add Contacts, it’s more efficient to group these permissions into a single permission group \(called Contacts\) than to request each individually.)
 42 | 译文
 43 | 
 44 | </div><div class="mdui-col">
 45 | 
 46 | [en]: <> (Permission Group   | Description)
 47 | [en]: <> (---------          |----------)
 48 | [en]: <> (Calendar           | Managing calendars)
 49 | [en]: <> (Camera             | Taking photos and recording videos)
 50 | [en]: <> (Contacts           | Managing contacts)
 51 | [en]: <> (Location           | Current device location)
 52 | [en]: <> (Microphone         | Audio recording)
 53 | [en]: <> (Phone              | Dialing and managing phone calls)
 54 | [en]: <> (Body Sensors       | Heart rate and similar data)
 55 | [en]: <> (SMS                | Sending and viewing messages)
 56 | [en]: <> (Storage            | Storage)
 57 | 
 58 | 译文     | 译文
 59 | --------|----------
 60 | 译文     | 译文
 61 | 译文     | 译文
 62 | 译文     | 译文
 63 | 译文     | 译文
 64 | 译文     | 译文
 65 | 译文     | 译文
 66 | 译文     | 译文
 67 | 译文     | 译文
 68 | 译文     | 译文
 69 | 
 70 | </div></div>
 71 | 
 72 | [en]: <> (Demonstrated intent)
 73 | ### 译文
 74 | 
 75 | [en]: <> (A user may perform an action that demonstrates clear intent, such as:)
 76 | 译文
 77 | 
 78 | [en]: <> (Taking a picture)
 79 | [en]: <> (Selecting a contact)
 80 | [en]: <> (Starting a call or text message)
 81 | * 译文
 82 | * 译文
 83 | * 译文
 84 | 
 85 | [en]: <> (In these cases, the user’s action clearly demonstrates their intent, and no permission dialog is needed or authorized.)
 86 | 译文
 87 | 
 88 | [en]: <> (Anatomy)
 89 | <h2 id="anatomy">译文</h2>
 90 | 
 91 | <figure>
 92 | 
 93 | ![]({assets_path}/platform-guidance/android-permissions/as-permissions-anatomy.png)
 94 | 
 95 | <figcaption>
 96 | 
 97 | [en]: <> (Permission group icon)
 98 | [en]: <> (App name)
 99 | [en]: <> (“Never ask again” check box \(This is displayed if a user denies a permission twice\))
100 | [en]: <> (Indicator for multiple dialogs)
101 | [en]: <> (Action)
102 | 1. 译文
103 | 2. 译文
104 | 3. 译文
105 | 4. 译文
106 | 5. 译文
107 | 
108 | </figcaption></figure>
109 | 
110 | [en]: <> (Request types)
111 | <h2 id="request-types">译文</h2>
112 | 
113 | [en]: <> (Your permissions strategy depends on the clarity and importance of the permission type you are requesting. Each strategy offers a different way of introducing permissions to the user.)
114 | 译文
115 | 
116 | [en]: <> (*Critical permissions* should be requested up-front.)
117 | 译文
118 | 
119 | [en]: <> (*Secondary permissions* may be requested in-context.)
120 | 译文
121 | 
122 | [en]: <> (Permissions that are less clear should provide education about what the permission involves, whether done up-front or in context.)
123 | 译文
124 | 
125 | <figure>
126 | 
127 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request-chart.png)
128 | 
129 | <figcaption>
130 | 
131 | [en]: <> (Determine the clarity and importance level of each permission.)
132 | 译文
133 | 
134 | </figcaption></figure><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
135 | 
136 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request1.png)
137 | 
138 | <figcaption>
139 | 
140 | [en]: <> (Educate before asking)
141 | #### 译文
142 | 
143 | [en]: <> (If your app has a “warm welcome,” use it to explain what your app does and why unexpected permissions will be requested.)
144 | 译文
145 | 
146 | </figcaption></figure></div><div class="mdui-col"><figure>
147 | 
148 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request2.png)
149 | 
150 | <figcaption>
151 | 
152 | [en]: <> (Ask up-front)
153 | #### 译文
154 | 
155 | [en]: <> (Only ask for critical and obvious permissions on first launch.)
156 | 译文
157 | 
158 | [en]: <> (Because users expect a messaging app to request SMS permissions, requesting it up-front makes sense.)
159 | 译文
160 | 
161 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
162 | 
163 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request3.png)
164 | 
165 | <figcaption>
166 | 
167 | [en]: <> (Ask in context)
168 | #### 译文
169 | 
170 | [en]: <> (Wait until a feature is invoked to request permission.)
171 | 译文
172 | 
173 | [en]: <> (Users are more likely to allow a permission when they want to use the feature it enables.)
174 | 译文
175 | 
176 | </figcaption></figure></div><div class="mdui-col"><figure>
177 | 
178 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request4.png)
179 | 
180 | <figcaption>
181 | 
182 | [en]: <> (Educate in context)
183 | #### 译文
184 | 
185 | [en]: <> (Explaining a permission in context helps gauge user interest and improve comprehension of the permission.)
186 | 译文
187 | 
188 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
189 | 
190 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request5.png)
191 | 
192 | <figcaption>
193 | 
194 | [en]: <> (Provide an immediate benefit)
195 | #### 译文
196 | 
197 | [en]: <> (Provide instant gratification to make accepting a permission feel justified.)
198 | 译文
199 | 
200 | </figcaption></figure></div><div class="mdui-col"><figure>
201 | 
202 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-request6a.png)
203 | 
204 | <figcaption>
205 | 
206 | [en]: <> (Only ask for relevant permissions)
207 | #### 译文
208 | 
209 | [en]: <> (When more than one permission is needed for a feature to work, only ask for those permissions and nothing else.)
210 | 译文
211 | 
212 | </figcaption></figure></div></div>
213 | 
214 | [en]: <> (Runtime permissions)
215 | <h2 id="runtime-permissions">译文</h2>
216 | 
217 | <div class="mdui-row-sm-2"><div class="mdui-col">
218 | 
219 | [en]: <> (Apps may request permission to access information or use device capabilities at any time after installation. When a user needs to perform an action in an app, such as using the device camera, the app may request permission at that moment.)
220 | 译文
221 | 
222 | [en]: <> (Users may also allow or deny the permissions of any app from Android Settings anytime after installation.)
223 | 译文
224 | 
225 | </div><div class="mdui-col"><figure>
226 | 
227 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-runtime1.png)
228 | 
229 | <figcaption>
230 | 
231 | [en]: <> (Example of an app requesting permission)
232 | 译文
233 | 
234 | </figcaption></figure></div></div>
235 | 
236 | [en]: <> (Denied permissions)
237 | <h2 id="denied-permissions">译文</h2>
238 | 
239 | <div class="mdui-row-sm-2"><div class="mdui-col">
240 | 
241 | [en]: <> (Provide feedback whenever a permission is denied. Because denying permissions may prevent a feature from working as intended, whenever a permission is denied it should be explained to the user.)
242 | 译文
243 | 
244 | [en]: <> (Permission denials occur in one of two ways:)
245 | 译文
246 | 
247 | [en]: <> (A permission request is denied by the user)
248 | [en]: <> (A permission is silently denied without warning because a user once selected “Don’t ask again” from a previous permission request)
249 | * 译文
250 | * 译文
251 | 
252 | [en]: <> (To ensure that features requiring permission always behave as intended, the app should state that permission is needed and provide a way to allow it.)
253 | 译文
254 | 
255 | </div><div class="mdui-col"><figure>
256 | 
257 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-deny1.png)
258 | 
259 | <figcaption>
260 | 
261 | [en]: <> (A snackbar displays the need for permission in order to use an audio feature.)
262 | 译文
263 | 
264 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col">
265 | 
266 | [en]: <> (Critical permissions)
267 | #### 译文
268 | 
269 | [en]: <> (If the app can no longer run because a critical permission has been denied, explain why that permission must be allowed and offer a button to open Settings so the user can allow it.)
270 | 译文
271 | 
272 | </div><div class="mdui-col"><figure>
273 | 
274 | ![]({assets_path}/platform-guidance/android-permissions/communication-permissions-deny2.png)
275 | 
276 | <figcaption>
277 | 
278 | [en]: <> (A screen explains that a permission is needed for an app to function, with a link to allow that permission in Settings.)
279 | 译文
280 | 
281 | </figcaption></figure></div></div></div>
282 | 


--------------------------------------------------------------------------------
/src/typography/the-type-system.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (The type system)
  4 | # 排版系统
  5 | 
  6 | [en]: <> (Use typography to present your design and content as clearly and efficiently as possible.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Type Scale)
 12 | [en]: <> (Applying the type scale)
 13 | * [译文](#type-scale)
 14 | * [译文](#applying-the-type-scale)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Type Scale)
 19 | <h2 id="type-scale">译文</h2>
 20 | 
 21 | [en]: <> (The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.)
 22 | 译文
 23 | 
 24 | [en]: <> (The type scale is a combination of 12 styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.)
 25 | 译文
 26 | 
 27 | <figure>
 28 | 
 29 | ![]({assets_path}/typography/the-type-system/typesystem-typescale.png)
 30 | 
 31 | <figcaption>
 32 | 
 33 | [en]: <> (The Material Design type scale. \(Letter spacing values are compatible with Sketch.\))
 34 | 译文
 35 | 
 36 | </figcaption></figure>
 37 | 
 38 | [en]: <> (Download)
 39 | #### 译文
 40 | 
 41 | [en]: <> (Access the type scale using type styles in Sketch.)
 42 | 译文
 43 | 
 44 | <a href="{assets_path}/typography/the-type-system/materialdesigntypescale.sketch" download>Material Design Type scale<br>0.11 MB (.sketch)</a>
 45 | 
 46 | [en]: <> (Font size units)
 47 | ### 译文
 48 | 
 49 | [en]: <> (The following units are used to express font size on Android, iOS, and the web.)
 50 | 译文
 51 | 
 52 | [en]: <> (Platform           | Android     | iOS       | Web)
 53 | [en]: <> (---------          |----------   |---------  |------)
 54 | [en]: <> (Font size unit     | sp          | pt        | rem)
 55 | [en]: <> (Conversion ratio   | 1.0         | 1.0       | 0.0625)
 56 | 
 57 | 译文     | 译文     | 译文       | 译文
 58 | --------|----------|---------- |-----------
 59 | 译文     | 译文     | 译文       | 译文
 60 | 译文     | 译文     | 译文       | 译文
 61 | 
 62 | [en]: <> (Example conversions)
 63 | #### 译文
 64 | 
 65 | [en]: <> (Android     | iOS        | Web)
 66 | [en]: <> (---------   |----------  |---------)
 67 | [en]: <> (10sp        | 10pt       | 0.625rem)
 68 | [en]: <> (12sp        | 12pt       | 0.75rem)
 69 | [en]: <> (24sp        | 24pt       | 1.5rem)
 70 | [en]: <> (60sp        | 60pt       | 3.75rem)
 71 | 
 72 | 译文     | 译文     | 译文
 73 | --------|----------|----------
 74 | 译文     | 译文     | 译文
 75 | 译文     | 译文     | 译文
 76 | 译文     | 译文     | 译文
 77 | 译文     | 译文     | 译文
 78 | 
 79 | [en]: <> (Web browsers calculate the REM \(the root em size\) based on the root element size. The default for modern web browsers is 16px, so the conversion is SP_SIZE/16 = rem.)
 80 | 译文
 81 | 
 82 | [en]: <> (Letter spacing units)
 83 | ### 译文
 84 | 
 85 | [en]: <> (The following units are for spacing letters in a UI.)
 86 | 译文
 87 | 
 88 | [en]: <> (Platform               | Android                                                        | iOS        | Web)
 89 | [en]: <> (---------              |----------                                                      |---------   |------)
 90 | [en]: <> (Letter spacing unit    | em                                                             | pt         | rem)
 91 | [en]: <> (Conversion ratio       | \(Tracking from Sketch / font size in sp\) = letter spacing    | 1.0        | \(Tracking from Sketch / font size in px\) = letter spacing)
 92 | 
 93 | 译文     | 译文     | 译文        | 译文
 94 | --------|----------|----------  |-----------
 95 | 译文     | 译文     | 译文        | 译文
 96 | 译文     | 译文     | 译文        | 译文
 97 | 
 98 | [en]: <> (Letter spacing examples)
 99 | #### 译文
100 | 
101 | [en]: <> (Android                                          | iOS           | Web)
102 | [en]: <> (---------                                        |----------     |---------)
103 | [en]: <> (\(.2 tracking / 16sp font size\) = 0.0125 em     | -0.1 pt       | \(.2 tracking / 16px font size\) = 0.0125 rem)
104 | 
105 | 译文     | 译文     | 译文
106 | --------|----------|----------
107 | 译文     | 译文     | 译文
108 | 
109 | [en]: <> (Applying the type scale)
110 | <h2 id="applying-the-type-scale">译文</h2>
111 | 
112 | [en]: <> (The type scale appears as text in components and the overall layout. Type attributes can use custom values for the typeface, font, case, size, and letter spacing.)
113 | 译文
114 | 
115 | <figure>
116 | 
117 | ![]({assets_path}/typography/the-type-system/applyingtypescale-buckets-values.png)
118 | 
119 | <figcaption>
120 | 
121 | [en]: <> (Scale categories)
122 | [en]: <> (Actual values)
123 | 1. 译文
124 | 2. 译文
125 | 
126 | </figcaption></figure>
127 | 
128 | [en]: <> (Headlines)
129 | ### 译文
130 | 
131 | [en]: <> (In the type scale, headlines span from a range of 1 through 6. Headlines are the largest text on the screen, reserved for short, important text or numerals.)
132 | 译文
133 | 
134 | [en]: <> (For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.)
135 | 译文
136 | 
137 | <figure>
138 | 
139 | ![]({assets_path}/typography/the-type-system/applyingtypescale-headlines-display.png)
140 | 
141 | <figcaption>
142 | 
143 | [en]: <> (A display style is used for Headline 2.)
144 | 译文
145 | 
146 | </figcaption></figure><figure>
147 | 
148 | ![]({assets_path}/typography/the-type-system/applyingtypescale-headlines-script.png)
149 | 
150 | <figcaption>
151 | 
152 | [en]: <> (A script style is used for Headline 3.)
153 | 译文
154 | 
155 | </figcaption></figure>
156 | 
157 | [en]: <> (Serif or sans serif typefaces work well for headlines, especially at smaller sizes.)
158 | 译文
159 | 
160 | <figure>
161 | 
162 | ![]({assets_path}/typography/the-type-system/applyingtypescale-headlines-sans.png)
163 | 
164 | <figcaption>
165 | 
166 | [en]: <> (A sans serif is used for Headline 6.)
167 | 译文
168 | 
169 | </figcaption></figure>
170 | 
171 | [en]: <> (Subtitles)
172 | ### 译文
173 | 
174 | [en]: <> (Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.)
175 | 译文
176 | 
177 | <figure>
178 | 
179 | ![]({assets_path}/typography/the-type-system/applyingtypescale-subtitle-sanserif.png)
180 | 
181 | <figcaption>
182 | 
183 | [en]: <> (A sans serif typeface is used for Subtitle 1.)
184 | 译文
185 | 
186 | </figcaption></figure>
187 | 
188 | [en]: <> (For subtitles, use caution when using expressive fonts, including display, handwritten, and script styles.)
189 | 译文
190 | 
191 | <figure>
192 | 
193 | ![]({assets_path}/typography/the-type-system/applyingtypescale-subtitle-expressive-caution.png)
194 | 
195 | <figcaption>
196 | 
197 | {caution}
198 | 
199 | [en]: <> (Use caution when using expressive fonts for subtitles.)
200 | 译文
201 | 
202 | </figcaption></figure>
203 | 
204 | [en]: <> (Body)
205 | ### 译文
206 | 
207 | [en]: <> (Body text comes in ranges 1-2, and it’s typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.)
208 | 译文
209 | 
210 | <figure>
211 | 
212 | ![]({assets_path}/typography/the-type-system/applyingtypescale-body-serif.png)
213 | 
214 | <figcaption>
215 | 
216 | [en]: <> (A serif typeface is used for Body 1.)
217 | 译文
218 | 
219 | </figcaption></figure><figure>
220 | 
221 | ![]({assets_path}/typography/the-type-system/applyingtypescale-body-sanserif.png)
222 | 
223 | <figcaption>
224 | 
225 | [en]: <> (A sans serif typeface is used for Body 2.)
226 | 译文
227 | 
228 | </figcaption></figure>
229 | 
230 | [en]: <> (Don’t use expressive fonts, including display, handwritten, and script styles for body copy.)
231 | 译文
232 | 
233 | <figure>
234 | 
235 | ![]({assets_path}/typography/the-type-system/applyingtypescale-body-decorative-dont.png)
236 | 
237 | <figcaption>
238 | 
239 | {dont}
240 | 
241 | [en]: <> (Don’t use expressive fonts for body text.)
242 | 译文
243 | 
244 | </figcaption></figure>
245 | 
246 | [en]: <> (Caption and overline)
247 | ### 译文
248 | 
249 | [en]: <> (Caption and overline text \(text with a line above it\) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.)
250 | 译文
251 | 
252 | <figure>
253 | 
254 | ![]({assets_path}/typography/the-type-system/applyingtypescale-capover-serif.png)
255 | 
256 | <figcaption>
257 | 
258 | [en]: <> (A serif typeface being used for a caption.)
259 | 译文
260 | 
261 | </figcaption></figure><figure>
262 | 
263 | ![]({assets_path}/typography/the-type-system/applyingtypescale-capover-sanserif.png)
264 | 
265 | <figcaption>
266 | 
267 | [en]: <> (A sans serif typeface being used for an overline.)
268 | 译文
269 | 
270 | </figcaption></figure>
271 | 
272 | [en]: <> (Don’t use expressive fonts, including display, handwritten, and script styles for caption or overline.)
273 | 译文
274 | 
275 | <figure>
276 | 
277 | ![]({assets_path}/typography/the-type-system/applyingtypescale-capover-decorative-dont.png)
278 | 
279 | <figcaption>
280 | 
281 | {dont}
282 | 
283 | [en]: <> (Don’t use expressive fonts for an overline.)
284 | 译文
285 | 
286 | </figcaption></figure>
287 | 
288 | [en]: <> (Button)
289 | ### 译文
290 | 
291 | [en]: <> (Button text is a call to action used different types of buttons \(such as text, outlined and contained buttons\) and in tabs, dialogs, and cards.)
292 | 译文
293 | 
294 | [en]: <> (Button text is typically an all caps sans serif.)
295 | 译文
296 | 
297 | <figure>
298 | 
299 | ![]({assets_path}/typography/the-type-system/applyingtypescale-button-sanserif.png)
300 | 
301 | <figcaption>
302 | 
303 | [en]: <> (An all caps sans serif typeface being used for a button.)
304 | 译文
305 | 
306 | </figcaption></figure>
307 | 
308 | [en]: <> (Button text can be sentence case, sans serif, or serif.)
309 | 译文
310 | 
311 | <figure>
312 | 
313 | ![]({assets_path}/typography/the-type-system/applyingtypescale-button-sanserif-uplow.png)
314 | 
315 | <figcaption>
316 | 
317 | {caution}
318 | 
319 | [en]: <> (Use caution when having button text appear distinct from non-interactive text, such as this upper lower, sans serif typeface on a button.)
320 | 译文
321 | 
322 | </figcaption></figure>
323 | 
324 | [en]: <> (Don’t use expressive fonts as button text, including display, handwritten, and script styles.)
325 | 译文
326 | 
327 | <figure>
328 | 
329 | ![]({assets_path}/typography/the-type-system/applyingtypescale-button-decorative-dont.png)
330 | 
331 | <figcaption>
332 | 
333 | {dont}
334 | 
335 | [en]: <> (Don’t use a display style for button text.)
336 | 译文
337 | 
338 | </figcaption></figure></div>
339 | 


--------------------------------------------------------------------------------
/src/platform-guidance/android-swipe-to-refresh.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Android swipe to refresh)
  4 | # Android 滑动刷新
  5 | 
  6 | [en]: <> (Swipe to refresh manually refreshes screen content with a user action or gesture.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Usage)
 12 | [en]: <> (Behavior & placement)
 13 | * [用法](#usage)
 14 | * [行为 & 位置](#behavior-placement)
 15 | 
 16 | </nav></div><div class="article__body">
 17 | 
 18 | [en]: <> (Usage)
 19 | <h2 id="usage">译文</h2>
 20 | 
 21 | [en]: <> (Swipe to refresh is a [swipe gesture]\(https://www.mdui.org/design/patterns/gestures.html#gestures-gestures\) available at the beginning of lists, grid lists, and card collections where the most recent content appears \(Index 0\).)
 22 | 译文
 23 | 
 24 | [en]: <> (It’s best to use this gesture with dynamic content that has frequent updates surfacing from a consistent location, where users have a high probability of seeing new content after initiating the gesture.)
 25 | 译文
 26 | 
 27 | [en]: <> (Refresh indicator)
 28 | ### 译文
 29 | 
 30 | [en]: <> (The refresh indicator appears only in conjunction with a refresh gesture or action. Syncing does not display a refresh indicator.)
 31 | 译文
 32 | 
 33 | <div class="mdui-row-sm-2"><div class="mdui-col">
 34 | 
 35 | [en]: <> (Effects)
 36 | #### 译文
 37 | 
 38 | [en]: <> (Changes may not be immediately obvious to users when this gesture is used in views that can change significantly upon refresh. For example, the refresh may non-sequentially delete, reorder, modify, and insert items or change only off-screen items.)
 39 | 译文
 40 | 
 41 | </div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior.mp4" type="video/mp4"></video><figcaption>
 42 | 
 43 | [en]: <> (Animation showing swipe to refresh)
 44 | 译文
 45 | 
 46 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col">
 47 | 
 48 | [en]: <> (Swipe to refresh should not be used in the following situations:)
 49 | 译文
 50 | 
 51 | [en]: <> (Navigation drawers)
 52 | [en]: <> (Home screen widgets)
 53 | [en]: <> (Pannable content)
 54 | * 译文
 55 | * 译文
 56 | * 译文
 57 | 
 58 | </div><div class="mdui-col"><figure>
 59 | 
 60 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-usage-refreshindicator-dont.png)
 61 | 
 62 | <figcaption>
 63 | 
 64 | {dont}
 65 | 
 66 | [en]: <> (Don’t place refresh indicators in navigation drawers.)
 67 | 译文
 68 | 
 69 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure>
 70 | 
 71 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-usage-refreshindicator-dont-widgets.png)
 72 | 
 73 | <figcaption>
 74 | 
 75 | {dont}
 76 | 
 77 | [en]: <> (Don’t display refresh indicators on regions that should update automatically, such as Home screen widgets.)
 78 | 译文
 79 | 
 80 | </figcaption></figure></div><div class="mdui-col"><figure>
 81 | 
 82 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-usage-refreshindicator-dont-pannablecontent.png)
 83 | 
 84 | <figcaption>
 85 | 
 86 | {dont}
 87 | 
 88 | [en]: <> (Don’t attach refresh indicators to pannable content, such as in maps, as the swipe gesture is already being used for other actions on those regions.)
 89 | 译文
 90 | 
 91 | </figcaption></figure></div></div>
 92 | 
 93 | [en]: <> (Behavior & placement)
 94 | <h2 id="behavior-placement">行为 & 位置</h2>
 95 | 
 96 | [en]: <> (Behavior)
 97 | ### 译文
 98 | 
 99 | [en]: <> (As the refresh indicator scales into view, the circular spinner fades in while rotating.)
100 | 译文
101 | 
102 | [en]: <> (The refresh indicator remains visible until the refresh activity completes and any new content is visible, or the user navigates away from the refreshing content.)
103 | 译文
104 | 
105 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior-do.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior-do.mp4" type="video/mp4"></video><figcaption>
106 | 
107 | {do}
108 | 
109 | [en]: <> (Keep the refresh indicator in view until the activity is completed to provide status of the refresh activity.)
110 | 译文
111 | 
112 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior-dont.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-behavior-dont.mp4" type="video/mp4"></video><figcaption>
113 | 
114 | {dont}
115 | 
116 | [en]: <> (Don’t scroll the refresh indicator off-screen, as it hides the status of the refresh activity. It could imply that the refresh activity is associated with a specific component, such as a card, instead of the entire screen.)
117 | 译文
118 | 
119 | </figcaption></figure></div></div>
120 | 
121 | [en]: <> (Refresh indicator transitions)
122 | #### 译文
123 | 
124 | [en]: <> (When a surface is in front of the surface with refreshing content, the refresh indicator transitions from behind that surface and is clipped until fully visible.)
125 | 译文
126 | 
127 | [en]: <> (The refresh indicator increases in size as it translates when:)
128 | 译文
129 | 
130 | [en]: <> (The refreshing material is at a higher elevation than all other surfaces)
131 | [en]: <> (A content refresh is initiated via an app bar or overflow menu action)
132 | * 译文
133 | * 译文
134 | 
135 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-coplanar.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-coplanar.mp4" type="video/mp4"></video><figcaption>
136 | 
137 | [en]: <> (Refreshing content that is coplanar with another surface.)
138 | 译文
139 | 
140 | </figcaption></figure></div><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-belowsurface.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-belowsurface.mp4" type="video/mp4"></video><figcaption>
141 | 
142 | [en]: <> (Refreshing content that is below another surface in z-space.)
143 | 译文
144 | 
145 | </figcaption></figure></div></div><div class="mdui-row-sm-2"><div class="mdui-col"><figure><video controls loop muted preload="metadata" class="mdui-video-fluid"><source data-src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-tap.mp4" src="{assets_path}/platform-guidance/android-swipe-to-refresh/patterns-swipetorefresh-tap.mp4" type="video/mp4"></video><figcaption>
146 | 
147 | [en]: <> (Refreshing content generated by an app bar action.)
148 | 译文
149 | 
150 | </figcaption></figure></div></div>
151 | 
152 | [en]: <> (Threshold requirements)
153 | #### 译文
154 | 
155 | [en]: <> (To ensure intentional usage of the swipe to refresh gesture, the refresh indicator must pass a threshold before the app will refresh. This threshold is indicated by a number of cues:)
156 | 译文
157 | 
158 | [en]: <> (The circular spinner reaches 100% opacity)
159 | [en]: <> (The rotation of the circular spinner slows down)
160 | [en]: <> (The rate of translation of the refresh indicator slows down)
161 | * 译文
162 | * 译文
163 | * 译文
164 | 
165 | [en]: <> (After passing the threshold, completing the gesture initiates a refresh.)
166 | 译文
167 | 
168 | [en]: <> (Reversing the gesture past the threshold will cancel the refresh action.)
169 | 译文
170 | 
171 | [en]: <> (Swipe to refresh in composition)
172 | ### 译文
173 | 
174 | [en]: <> (Gesture positioning)
175 | #### 译文
176 | 
177 | [en]: <> (Typically, the refresh gesture is available at the top of content collections, but it can also be at the bottom of the screen.)
178 | 译文
179 | 
180 | [en]: <> (Refresh indicator \(Horizontal resting position\))
181 | #### 译文
182 | 
183 | [en]: <> (The refresh indicator, when resting, is centered horizontally relative to refreshing content.)
184 | 译文
185 | 
186 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
187 | 
188 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-placement-horizontal-do.png)
189 | 
190 | <figcaption>
191 | 
192 | {do}
193 | 
194 | [en]: <> (Horizontally center the refresh indicator over the refreshing content.)
195 | 译文
196 | 
197 | </figcaption></figure></div><div class="mdui-col"><figure>
198 | 
199 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-placement-horizontal-dont.png)
200 | 
201 | <figcaption>
202 | 
203 | {dont}
204 | 
205 | [en]: <> (Don’t horizontally align the refresh indicator to one side of the refreshing content.)
206 | 译文
207 | 
208 | </figcaption></figure></div></div><figure>
209 | 
210 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-placement-unexpectedlocation.png)
211 | 
212 | <figcaption>
213 | 
214 | {dont}
215 | 
216 | [en]: <> (Placing the refresh indicator in unexpected locations that makes its relationship to refreshing content ambiguous.)
217 | 译文
218 | 
219 | </figcaption></figure>
220 | 
221 | [en]: <> (Refresh indicator \(Vertical resting position\))
222 | #### 译文
223 | 
224 | [en]: <> (The refresh indicator is located near the top of refreshing content.)
225 | 译文
226 | 
227 | [en]: <> (Its vertical resting position can be adjusted to improve the harmony of a layout. For example, the indicator may fall on a surface’s edge or the layout grid, as long as it’s located near the top of the refreshing content.)
228 | 译文
229 | 
230 | <div class="mdui-row-sm-2"><div class="mdui-col"><figure>
231 | 
232 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-placement-neartop-do.png)
233 | 
234 | <figcaption>
235 | 
236 | {do}
237 | 
238 | [en]: <> (Position the refresh indicator near the top of refreshing content.)
239 | 译文
240 | 
241 | </figcaption></figure></div><div class="mdui-col"><figure>
242 | 
243 | ![]({assets_path}/platform-guidance/android-swipe-to-refresh/as-swipetorefresh-placement-center-dont.png)
244 | 
245 | <figcaption>
246 | 
247 | {dont}
248 | 
249 | [en]: <> (Don’t vertically position the refresh indicator where it will obstruct content.)
250 | 译文
251 | 
252 | </figcaption></figure></div></div></div>
253 | 


--------------------------------------------------------------------------------
/src/layout/component-behavior.md:
--------------------------------------------------------------------------------
  1 | <div class="article__intro">
  2 | 
  3 | [en]: <> (Component behavior)
  4 | # 组件行为
  5 | 
  6 | [en]: <> (The following guidance describes how components behave, both in the grid and between breakpoints.)
  7 | 译文
  8 | 
  9 | <nav>
 10 | 
 11 | [en]: <> (Positioning terminology)
 12 | [en]: <> (Component width)
 13 | [en]: <> (Responsive patterns)
 14 | * [译文](#positioning-terminology)
 15 | * [译文](#component-width)
 16 | * [译文](#responsive-patterns)
 17 | 
 18 | </nav></div><div class="article__body">
 19 | 
 20 | [en]: <> (Positioning terminology)
 21 | <h2 id="positioning-terminology">译文</h2>
 22 | 
 23 | [en]: <> (UI elements behave in different ways at each breakpoint range.)
 24 | 译文
 25 | 
 26 | [en]: <> (Descriptors)
 27 | ### 译文
 28 | 
 29 | [en]: <> (The position of UI elements elements, components, and surfaces in the grid can be described using the following terms:)
 30 | 译文
 31 | 
 32 | [en]: <> (Descriptor               | Definition)
 33 | [en]: <> (---------                |----------)
 34 | [en]: <> (Above, below             | The y position of an element)
 35 | [en]: <> (In front of, behind      | The z position of an element)
 36 | [en]: <> (Left, right, centered    | The x position of an element)
 37 | [en]: <> (Top, bottom              | The y position of an element relative to a container or screen edge)
 38 | [en]: <> (Vertically centered      | The x and y position of an element are centered relative to a container or screen edges)
 39 | [en]: <> (Sticky                   | An element that scrolls with the UI and locks at a certain point in the scroll position)
 40 | [en]: <> (Floating                 | A fixed element positioned in front of scrolling content)
 41 | 
 42 | 译文     | 译文
 43 | --------|----------
 44 | 译文     | 译文
 45 | 译文     | 译文
 46 | 译文     | 译文
 47 | 译文     | 译文
 48 | 译文     | 译文
 49 | 译文     | 译文
 50 | 译文     | 译文
 51 | 
 52 | [en]: <> (Component width)
 53 | <h2 id="component-width">译文</h2>
 54 | 
 55 | [en]: <> (Component width can remain the same across screen sizes, or it can change depending on the layout. )
 56 | 译文
 57 | 
 58 | [en]: <> (Component width can be either:)
 59 | 译文
 60 | 
 61 | [en]: <> (Fixed)
 62 | [en]: <> (Fluid)
 63 | * 译文
 64 | * 译文
 65 | 
 66 | [en]: <> (Because fixed width elements retain their width during layout changes, their placement can change to accommodate new layouts. Their placement can be either:)
 67 | 译文
 68 | 
 69 | [en]: <> (Pushed)
 70 | [en]: <> (Overlaid)
 71 | * 译文
 72 | * 译文
 73 | 
 74 | [en]: <> (Fixed)
 75 | ### 译文
 76 | 
 77 | [en]: <> (When an element has a fixed width, its width stays the same even across screen size changes.)
 78 | 译文
 79 | 
 80 | <figure>
 81 | 
 82 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-fixed-width.gif)
 83 | 
 84 | <figcaption>
 85 | 
 86 | [en]: <> (This button component remains fixed against the right margin.)
 87 | 译文
 88 | 
 89 | </figcaption></figure>
 90 | 
 91 | [en]: <> (Fluid)
 92 | ### 译文
 93 | 
 94 | [en]: <> (When an element has a fluid width, its width expands and contracts as the screen size changes.)
 95 | 译文
 96 | 
 97 | <figure>
 98 | 
 99 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-fluid-width.gif)
100 | 
101 | <figcaption>
102 | 
103 | [en]: <> (This button fluidly scales within the right two columns.)
104 | 译文
105 | 
106 | </figcaption></figure><figure>
107 | 
108 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-fluid-dont-01.gif)
109 | 
110 | <figcaption>
111 | 
112 | {dont}
113 | 
114 | [en]: <> (Don’t use a container on fluid components if it’s too narrow to display elements and padding at smaller widths.)
115 | 译文
116 | 
117 | </figcaption></figure><figure>
118 | 
119 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-fluid-caution-01.gif)
120 | 
121 | <figcaption>
122 | 
123 | {caution}
124 | 
125 | [en]: <> (Use caution when spanning a fluid component across several columns in a wide screen. Certain components, like buttons, might be overly emphasized on larger screen widths.)
126 | 译文
127 | 
128 | </figcaption></figure>
129 | 
130 | [en]: <> (Push)
131 | ### 译文
132 | 
133 | [en]: <> (When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally, moving left or right. When this occurs, it may be partially occluded by a screen’s edge if pushed off-screen.)
134 | 译文
135 | 
136 | <figure>
137 | 
138 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-push.gif)
139 | 
140 | <figcaption>
141 | 
142 | [en]: <> (The content region is pushed off-screen by the navigation drawer.)
143 | 译文
144 | 
145 | </figcaption></figure>
146 | 
147 | [en]: <> (Overlaid)
148 | ### 译文
149 | 
150 | [en]: <> (When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain the same.)
151 | 译文
152 | 
153 | <figure>
154 | 
155 | ![]({assets_path}/layout/component-behavior/layout-element-behavior-overlaid.gif)
156 | 
157 | <figcaption>
158 | 
159 | [en]: <> (The content UI region is covered by the navigational UI region.)
160 | 译文
161 | 
162 | </figcaption></figure>
163 | 
164 | [en]: <> (Responsive patterns)
165 | <h2 id="responsive-patterns">译文</h2>
166 | 
167 | [en]: <> (Components can adapt their dimensions based on screen size and device type, using the following the following patterns. These dimension adaptations can include:)
168 | 译文
169 | 
170 | [en]: <> (Using different components that fit the space better)
171 | [en]: <> (Altering the visibility of components to accommodate smaller spaces)
172 | [en]: <> (Changing to input methods)
173 | * 译文
174 | * 译文
175 | * 译文
176 | 
177 | [en]: <> (As screen space increases, the following responsive patterns may be applied.)
178 | 译文
179 | 
180 | [en]: <> (Reveal)
181 | ### 译文
182 | 
183 | [en]: <> (Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.)
184 | 译文
185 | 
186 | <figure>
187 | 
188 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-reveal-navdrawer.png)
189 | 
190 | <figcaption>
191 | 
192 | [en]: <> (Elements, such as side navigation, can become visible when screen size increases.)
193 | 译文
194 | 
195 | </figcaption></figure><figure>
196 | 
197 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-reveal-wordprocessor.png)
198 | 
199 | <figcaption>
200 | 
201 | [en]: <> (A simple UI may reveal more robust or complex options.)
202 | 译文
203 | 
204 | </figcaption></figure><figure>
205 | 
206 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-reveal-card.png)
207 | 
208 | <figcaption>
209 | 
210 | [en]: <> (Content that only appears after tapping on a small screen can be revealed by default when more space is available.)
211 | 译文
212 | 
213 | </figcaption></figure>
214 | 
215 | [en]: <> (Transform)
216 | ### 译文
217 | 
218 | [en]: <> (A component can transform from one format to another at a designated breakpoint.)
219 | 译文
220 | 
221 | <figure>
222 | 
223 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-navdrawer.png)
224 | 
225 | <figcaption>
226 | 
227 | [en]: <> (Side navigation can transform into tabs on a larger screen.)
228 | 译文
229 | 
230 | </figcaption></figure><figure>
231 | 
232 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-list.png)
233 | 
234 | <figcaption>
235 | 
236 | [en]: <> (A list can transform into an image list on a larger screen.)
237 | 译文
238 | 
239 | </figcaption></figure><figure>
240 | 
241 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-toolbar.png)
242 | 
243 | <figcaption>
244 | 
245 | [en]: <> (Menu items can transform into icons in a toolbar on a larger screen.)
246 | 译文
247 | 
248 | </figcaption></figure>
249 | 
250 | [en]: <> (Divide)
251 | ### 译文
252 | 
253 | [en]: <> (UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly available space.)
254 | 译文
255 | 
256 | <figure>
257 | 
258 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-divide-1.png)
259 | 
260 | <figcaption>
261 | 
262 | [en]: <> (Side navigation, list content, and detailed content divide to fill a single view on a larger screen.)
263 | 译文
264 | 
265 | </figcaption></figure><figure>
266 | 
267 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-divide-2.png)
268 | 
269 | <figcaption>
270 | 
271 | [en]: <> (Tabbed sibling content is divided within the same view on a larger screen.)
272 | 译文
273 | 
274 | </figcaption></figure>
275 | 
276 | [en]: <> (Reflow)
277 | ### 译文
278 | 
279 | [en]: <> (A UI may change its layout to reflow across newly available space.)
280 | 译文
281 | 
282 | <figure>
283 | 
284 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-reflow-1.png)
285 | 
286 | <figcaption>
287 | 
288 | [en]: <> (Elements from a single-column format can reflow to fill the content area in various combinations on a larger screen.)
289 | 译文
290 | 
291 | </figcaption></figure><figure>
292 | 
293 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-reflow-2.png)
294 | 
295 | <figcaption>
296 | 
297 | [en]: <> (Horizontal tabs can reflow into a vertical list on a larger screen.)
298 | 译文
299 | 
300 | </figcaption></figure><figure>
301 | 
302 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-reflow-3.png)
303 | 
304 | <figcaption>
305 | 
306 | [en]: <> (Elements can reflow within a component based on a new screen ratio or device orientation.)
307 | 译文
308 | 
309 | </figcaption></figure>
310 | 
311 | [en]: <> (Expand)
312 | ### 译文
313 | 
314 | [en]: <> (The UI can expand across more space.)
315 | 译文
316 | 
317 | <figure>
318 | 
319 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-expand-1.png)
320 | 
321 | <figcaption>
322 | 
323 | [en]: <> (Cards can expand to fill a new and larger space.)
324 | 译文
325 | 
326 | </figcaption></figure><figure>
327 | 
328 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-expand-2.png)
329 | 
330 | <figcaption>
331 | 
332 | [en]: <> (Dialogs can expand proportionally with content or in specific increments.)
333 | 译文
334 | 
335 | </figcaption></figure>
336 | 
337 | [en]: <> (Position)
338 | ### 译文
339 | 
340 | [en]: <> (The position of UI components can change to more appropriate locations.)
341 | 译文
342 | 
343 | <figure>
344 | 
345 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-position-1.png)
346 | 
347 | <figcaption>
348 | 
349 | [en]: <> (A bottom sheet on a small screen can reposition itself as a menu on a larger screen.)
350 | 译文
351 | 
352 | </figcaption></figure><figure>
353 | 
354 | ![]({assets_path}/layout/component-behavior/layout-responsive-patterns-transform-position-2.png)
355 | 
356 | <figcaption>
357 | 
358 | [en]: <> (A floating action button \(FAB\) can move to a more visible location relative to other UI elements on a larger screen.)
359 | 译文
360 | 
361 | </figcaption></figure></div>
362 | 


--------------------------------------------------------------------------------