diff --git a/README.md b/README.md index 7b99923..7894895 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Google I/O 2014发布的Material Design将会成为统一Android，Chrome等平 *** -##一起来参与 +## 一起来参与 如果想做出贡献(翻译或者校对)的话，请加QQ群：137198122，谢谢！ 原文文档： @@ -135,7 +135,7 @@ Google I/O 2014发布的Material Design将会成为统一Android，Chrome等平 * [`更新记录`](SOURCE/whats-new/whats-new.md) - [`What's new`](https://www.google.com/design/spec/whats-new/whats-new.html) *** -##协作过程演示 +## 协作过程演示 录了一个动作演示，如下 ![github guide](http://assets-1sters.qiniudn.com/github_guide.gif) @@ -337,14 +337,14 @@ To git@github.com:IceskYsl/material_design_zh.git ## 常见问题 -###代码如何处理 +### 代码如何处理 使用markdown的代码规范处理，如 \`\`\`html \
...\ \`\`\` -###图片如何处理 +### 图片如何处理 在章（如components）下创建`images`目录，将图片原文件名（如materialdesign-goals-cutrectangles_large_mdpi.png）存到该目录下，然后在文档中这样调用 `![ALT文字](images/materialdesign-goals-landingimage_large_mdpi.png)` @@ -352,6 +352,6 @@ To git@github.com:IceskYsl/material_design_zh.git ### 如何添加锚点 [issue#58](https://github.com/1sters/material_design_zh/issues/58) -###视频如何处理 [issue#90](https://github.com/1sters/material_design_zh/issues/90) +### 视频如何处理 [issue#90](https://github.com/1sters/material_design_zh/issues/90) diff --git "a/README_\351\232\220\350\227\217\346\240\241\345\257\271\350\256\244\351\242\206\345\211\215\345\244\207\344\273\275.md" "b/README_\351\232\220\350\227\217\346\240\241\345\257\271\350\256\244\351\242\206\345\211\215\345\244\207\344\273\275.md" index cb6a9cc..bfc901c 100644 --- "a/README_\351\232\220\350\227\217\346\240\241\345\257\271\350\256\244\351\242\206\345\211\215\345\244\207\344\273\275.md" +++ "b/README_\351\232\220\350\227\217\346\240\241\345\257\271\350\256\244\351\242\206\345\211\215\345\244\207\344\273\275.md" @@ -13,7 +13,7 @@ Google I/O 2014发布的Material Design将会成为统一Android，Chrome等平 *** -##一起来参与 +## 一起来参与 如果想做出贡献(翻译或者校对)的话，请加QQ群：137198122，谢谢！ 原文文档： @@ -208,7 +208,7 @@ Google I/O 2014发布的Material Design将会成为统一Android，Chrome等平 * [调色板](SOURCE/resources/color-palettes.md) - [Color Palettes](http://www.google.com/design/spec/resources/color-palettes.html) √ by [poppinlp](https://github.com/poppinlp) *** -##协作过程演示 +## 协作过程演示 录了一个动作演示，如下 ![github guide](http://assets-1sters.qiniudn.com/github_guide.gif) @@ -410,14 +410,14 @@ To git@github.com:IceskYsl/material_design_zh.git ## 常见问题 -###代码如何处理 +### 代码如何处理 使用markdown的代码规范处理，如 \`\`\`html \
...\ \`\`\` -###图片如何处理 +### 图片如何处理 在章（如components）下创建`images`目录，将图片原文件名（如materialdesign-goals-cutrectangles_large_mdpi.png）存到该目录下，然后在文档中这样调用 `![ALT文字](images/materialdesign-goals-landingimage_large_mdpi.png)` @@ -425,6 +425,6 @@ To git@github.com:IceskYsl/material_design_zh.git ### 如何添加锚点 [issue#58](https://github.com/1sters/material_design_zh/issues/58) -###视频如何处理 [issue#90](https://github.com/1sters/material_design_zh/issues/90) +### 视频如何处理 [issue#90](https://github.com/1sters/material_design_zh/issues/90) diff --git a/SOURCE/README.md b/SOURCE/README.md index e722790..91fc3e2 100644 --- a/SOURCE/README.md +++ b/SOURCE/README.md @@ -8,7 +8,7 @@ Google I/O 2014发布的**Material Design**将会成为统一Android，Chrome等 http://www.google.com/design/spec/material-design/introduction.html -##目录 +## 目录 * Material Design * [Introduction](material-design/introduction.md) diff --git "a/SOURCE/README\345\211\257\346\234\254.md" "b/SOURCE/README\345\211\257\346\234\254.md" index e722790..91fc3e2 100644 --- "a/SOURCE/README\345\211\257\346\234\254.md" +++ "b/SOURCE/README\345\211\257\346\234\254.md" @@ -8,7 +8,7 @@ Google I/O 2014发布的**Material Design**将会成为统一Android，Chrome等 http://www.google.com/design/spec/material-design/introduction.html -##目录 +## 目录 * Material Design * [Introduction](material-design/introduction.md) diff --git a/SOURCE/components/cards.md b/SOURCE/components/cards.md index c52da86..e5b0233 100755 --- a/SOURCE/components/cards.md +++ b/SOURCE/components/cards.md @@ -1,164 +1,164 @@ ---- -layout: page -title: 卡片 -permalink: cards.html ---- - -# 卡片 - -卡片是包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。 - -## 用途 - -卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象，像带有不同长度标题的照片。 - -**注意：**即使外观相近，Now卡片是卡片的一个带有唯一表现和格式要求的独特子集。 - -![](images/components-cards-usage-card_single_large_mdpi.png) - -**卡片集**是**卡片**的一个平面布局。 - -![](images/components-cards-usage-card_travel_large_mdpi.png) - -![](images/components-cards-content-card_books_large_mdpi.png) - -这些卡片每张包含一组特定数据集：带操作的确认表，带操作的笔记，带照片的笔记。 - -![](images/components-cards-content-card_notes_large_mdpi.png) - -显示这些内容时使用卡片布局： - -* 作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像） -* 不要求直接比较（用户不直接与图像或字符串比较） -* 包含可变长度内容，例如评论 -* 由富内容或互动操作组成，例如+1按钮，滑块，或评论 -* 如果使用列表需要显示超过三行文本 -* 如果使用网格列表需要显示更多文本来补充图像 - -![](images/components-cards-usage-cardvstilea_large_mdpi.png) -要 -1. 卡片带圆角。 -2. 卡片带多种操作。 -3. 卡片可以忽略和重排。 - -![](images/components-cards-usage-cardvstileb_large_mdpi.png) -不要 -这是瓷砖，不是卡片。 -1. 瓷砖带直角。 -2. 瓷砖少于两种操作。 - -![](images/components-cards-usage-card_noa_large_mdpi.png) -要 -可快速扫描的列表，用来代替卡片，是表现没有许多操作的同类内容的合适方法。 - -![](images/components-cards-usage-card_nob_large_mdpi.png) -不要 -这里卡片的使用分散了用户注意力，不能快速扫描。这些列表项也不能忽略，所以把它们放在不同的卡片上是难以理解的。 - -![](images/components-cards-usage-card_no2a_large_mdpi.png) -要 -网格瓷砖是表现图片库的干净轻量的方法。 - -![](images/components-cards-usage-card_no2b_large_mdpi.png) -不要 -卡片在图片库中没有必要（同类内容）。 - -### 卡片布局准则 - -**字体设计** - -正文：14 sp 或 16 sp - -标题：24 sp 或更大 - -扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距 - -**移动设备上的卡片间距** - -屏幕边界与卡片间留白：8 dp - -卡片间留白：8 dp - -**内容留白** - -16 dp - -![](images/components-cards-usage-cards_guidelines_large_mdpi.png) - -![](images/components-cards-11_large_mdpi.png) - -![](images/components-cards-13_large_mdpi.png) - -![](images/components-cards-15_large_mdpi.png) - -## 内容 - -卡片内容类型和数量可以很大程度上根据传递的内容变化。卡片提供上下文及通往更复杂信息与视图的入口；确保不要滥用带有无用信息或操作的卡片。 - -![](images/components-cards-content-card_books_large_mdpi.png) - -![](images/components-cards-content-card_discover_large_mdpi.png) - -放置主要内容在卡片顶部。使用层级结构来引导用户注意到卡片上最重要的信息。 - -![](images/components-cards-usage-card_travel_large_mdpi.png) - -![](images/components-cards-content-card_notes_large_mdpi.png) - -## 操作 - -卡片中的主要操作通常是卡片本身。 - -追加操作可以在一组卡片间根据内容类型和期望结果变化，例如，播放电影和打开书籍。一组卡片中，始终有定位操作。 - -**追加操作** - -卡片的追加操作通过图标，文本，和UI控制准确地呼出，这些通常放置在卡片底部。 - -放置在主要内容中的行内UI控制可以调整主要内容的外观，例如，滑块来选择日期，星星来给内容评分，或者分段的按钮来选择日期范围。 - -除弹出菜单外，限制追加操作在两项。 - -**弹出菜单** - -弹出菜单（可选）通常放置在卡片的右上角，但它也可以放置在右下方，如果这样安排改善内容布局和易读性。 - -注意不要滥用带过多操作的弹出菜单。 - -**注意事项** - -强烈不推荐文本内容的行内链接。 - -尽管卡片可以提供多种操作，UI控制，和弹出菜单，谨慎使用并且记得卡片是通往更复杂详细信息的入口。 - -![](images\components-cards-actions-card_actionsa_large_mdpi.png) - -![](images\components-cards-actions-card_actionsb_large_mdpi.png) - -![](images\components-cards-actions-card_actionsc_large_mdpi.png) - -![](images\components-cards-actions-card_actionsd_large_mdpi.png) - -## 表现 - -### 手势 - -支持单张卡片基准上的滑动手势。卡片手势表现应该始终在卡片组中实现。 - -按住并拖动手势可行。然而，考虑对用户能够在集合中排序卡片是否重要，或者如果按要求筛选/排序内容可以提供更好的体验。 - -### 卡片集筛选，排序，和重组 - -卡片集可以按要求排序或按日期，文件大小，字母表顺序，或其他参数筛选。集合中的第一项定位于集合的左上角，其余的从左至右从上至下延续。 - -### 滚动 - -卡片集只会竖直滚动。超过最大卡片高度的卡片内容将被截断且不可滚动。 - -带截断内容的卡片可以扩展，这样卡片高度可以超过视图的最大值。这种情况下，卡片将与卡片集一起滚动。 - -### 卡片焦点 - -对于取决于连续焦点遍历用于导航的界面（方向键，键盘），单张卡片应该仅有基本操作或打开一个带基本和可用追加操作的新视图。 - -> 原文：[Cards](http://www.google.com/design/spec/components/cards.html) 翻译：[ThatMrL](https://github.com/ThatMrL) 校对：[xianglifei](https://github.com/xianglifei) +--- +layout: page +title: 卡片 +permalink: cards.html +--- + +# 卡片 + +卡片是包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。 + +## 用途 + +卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象，像带有不同长度标题的照片。 + +**注意：**即使外观相近，Now卡片是卡片的一个带有唯一表现和格式要求的独特子集。 + +![](images/components-cards-usage-card_single_large_mdpi.png) + +**卡片集**是**卡片**的一个平面布局。 + +![](images/components-cards-usage-card_travel_large_mdpi.png) + +![](images/components-cards-content-card_books_large_mdpi.png) + +这些卡片每张包含一组特定数据集：带操作的确认表，带操作的笔记，带照片的笔记。 + +![](images/components-cards-content-card_notes_large_mdpi.png) + +显示这些内容时使用卡片布局： + +* 作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像） +* 不要求直接比较（用户不直接与图像或字符串比较） +* 包含可变长度内容，例如评论 +* 由富内容或互动操作组成，例如+1按钮，滑块，或评论 +* 如果使用列表需要显示超过三行文本 +* 如果使用网格列表需要显示更多文本来补充图像 + +![](images/components-cards-usage-cardvstilea_large_mdpi.png) +要 +1. 卡片带圆角。 +2. 卡片带多种操作。 +3. 卡片可以忽略和重排。 + +![](images/components-cards-usage-cardvstileb_large_mdpi.png) +不要 +这是瓷砖，不是卡片。 +1. 瓷砖带直角。 +2. 瓷砖少于两种操作。 + +![](images/components-cards-usage-card_noa_large_mdpi.png) +要 +可快速扫描的列表，用来代替卡片，是表现没有许多操作的同类内容的合适方法。 + +![](images/components-cards-usage-card_nob_large_mdpi.png) +不要 +这里卡片的使用分散了用户注意力，不能快速扫描。这些列表项也不能忽略，所以把它们放在不同的卡片上是难以理解的。 + +![](images/components-cards-usage-card_no2a_large_mdpi.png) +要 +网格瓷砖是表现图片库的干净轻量的方法。 + +![](images/components-cards-usage-card_no2b_large_mdpi.png) +不要 +卡片在图片库中没有必要（同类内容）。 + +### 卡片布局准则 + +**字体设计** + +正文：14 sp 或 16 sp + +标题：24 sp 或更大 + +扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距 + +**移动设备上的卡片间距** + +屏幕边界与卡片间留白：8 dp + +卡片间留白：8 dp + +**内容留白** + +16 dp + +![](images/components-cards-usage-cards_guidelines_large_mdpi.png) + +![](images/components-cards-11_large_mdpi.png) + +![](images/components-cards-13_large_mdpi.png) + +![](images/components-cards-15_large_mdpi.png) + +## 内容 + +卡片内容类型和数量可以很大程度上根据传递的内容变化。卡片提供上下文及通往更复杂信息与视图的入口；确保不要滥用带有无用信息或操作的卡片。 + +![](images/components-cards-content-card_books_large_mdpi.png) + +![](images/components-cards-content-card_discover_large_mdpi.png) + +放置主要内容在卡片顶部。使用层级结构来引导用户注意到卡片上最重要的信息。 + +![](images/components-cards-usage-card_travel_large_mdpi.png) + +![](images/components-cards-content-card_notes_large_mdpi.png) + +## 操作 + +卡片中的主要操作通常是卡片本身。 + +追加操作可以在一组卡片间根据内容类型和期望结果变化，例如，播放电影和打开书籍。一组卡片中，始终有定位操作。 + +**追加操作** + +卡片的追加操作通过图标，文本，和UI控制准确地呼出，这些通常放置在卡片底部。 + +放置在主要内容中的行内UI控制可以调整主要内容的外观，例如，滑块来选择日期，星星来给内容评分，或者分段的按钮来选择日期范围。 + +除弹出菜单外，限制追加操作在两项。 + +**弹出菜单** + +弹出菜单（可选）通常放置在卡片的右上角，但它也可以放置在右下方，如果这样安排改善内容布局和易读性。 + +注意不要滥用带过多操作的弹出菜单。 + +**注意事项** + +强烈不推荐文本内容的行内链接。 + +尽管卡片可以提供多种操作，UI控制，和弹出菜单，谨慎使用并且记得卡片是通往更复杂详细信息的入口。 + +![](images\components-cards-actions-card_actionsa_large_mdpi.png) + +![](images\components-cards-actions-card_actionsb_large_mdpi.png) + +![](images\components-cards-actions-card_actionsc_large_mdpi.png) + +![](images\components-cards-actions-card_actionsd_large_mdpi.png) + +## 表现 + +### 手势 + +支持单张卡片基准上的滑动手势。卡片手势表现应该始终在卡片组中实现。 + +按住并拖动手势可行。然而，考虑对用户能够在集合中排序卡片是否重要，或者如果按要求筛选/排序内容可以提供更好的体验。 + +### 卡片集筛选，排序，和重组 + +卡片集可以按要求排序或按日期，文件大小，字母表顺序，或其他参数筛选。集合中的第一项定位于集合的左上角，其余的从左至右从上至下延续。 + +### 滚动 + +卡片集只会竖直滚动。超过最大卡片高度的卡片内容将被截断且不可滚动。 + +带截断内容的卡片可以扩展，这样卡片高度可以超过视图的最大值。这种情况下，卡片将与卡片集一起滚动。 + +### 卡片焦点 + +对于取决于连续焦点遍历用于导航的界面（方向键，键盘），单张卡片应该仅有基本操作或打开一个带基本和可用追加操作的新视图。 + +> 原文：[Cards](http://www.google.com/design/spec/components/cards.html) 翻译：[ThatMrL](https://github.com/ThatMrL) 校对：[xianglifei](https://github.com/xianglifei) diff --git a/SOURCE/components/chips.md b/SOURCE/components/chips.md index b4c43eb..58c41e0 100644 --- a/SOURCE/components/chips.md +++ b/SOURCE/components/chips.md @@ -4,11 +4,11 @@ title: 纸片(Chips) permalink: chips.html --- -#纸片(Chips) +# 纸片(Chips) Chips(我们暂时叫他纸片视图)是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。它可以包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息。Chips可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的Chip对应实体的视图，或者是弹出与Chip实体相关的操作菜单。 -##联系人纸片 +## 联系人纸片 联系人的纸片视图用于呈现联系人的信息。当用户在输入框(收件人一栏)中输入一个联系人的名字时，联系人纸片视图就会被触发，用于展示联系人的地址以供用户进行选择。而且联系人的纸片可以被直接添加到收件人一栏中去。 diff --git a/SOURCE/components/dialogs.md b/SOURCE/components/dialogs.md index e6b9db7..639c577 100644 --- a/SOURCE/components/dialogs.md +++ b/SOURCE/components/dialogs.md @@ -9,7 +9,7 @@ permalink: dialogs.html Dialogs提示框)用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。 Dialog可以是用一种 取消/确定 的简单应答模式，也可以是自定义布局的复杂模式，比如说一些文本设置或者是文本输入 。 -##用途 +## 用途 Dialog最典型的应用场景是提示用户去做一个些被安排好的决定 ，而这些决定可能是当前任务的一部分或者是前至条件。 Dialog可以用于告知用户具体的问题以便他们作用重要的决定(话外音：起到一个确认作用)，或者是用于解释 接下来的动作的重要性及后果 。(话外音：起到一个警示作用)。 @@ -32,7 +32,7 @@ Dialog包含了一个标题(可选)，内容 ，事件。 ![contact chips](images/components-dialogs-usage-dialogs_07_large_mdpi.png) -###按钮的宽度及边框示例 +### 按钮的宽度及边框示例 ![contact chips](images/components-buttons-buttonsindialogs_large_mdpi.png) @@ -41,7 +41,7 @@ Dialog包含了一个标题(可选)，内容 ，事件。 ![contact chips](images/components-dialogs-usage-dialogs_07b_large_mdpi.png) -###加宽型竖排按钮（Stacked full-width buttons） +### 加宽型竖排按钮（Stacked full-width buttons） 当按钮的文本超过了通常的按钮宽度时，你就可以使用这种竖向叠模式来呈现我们的按钮文字信息。 @@ -50,7 +50,7 @@ Dialog包含了一个标题(可选)，内容 ，事件。 -###并排按钮（Side-by-side buttons） +### 并排按钮（Side-by-side buttons） 在每个按钮的文本信息都没有超过通常的按钮宽度时，推荐使用并排模式。比如说最常用的 确定/取消 按钮 ![contact chips](images/components-dialogs-usage-sidebysidebuttonsa_large_mdpi.png) @@ -59,15 +59,15 @@ Dialog包含了一个标题(可选)，内容 ，事件。 -##内容 +## 内容 -###提示框标题 +### 提示框标题 提示框的标题是可选的，用于说明提示的类型。可以是与之相关的程序名，或者是选择后会影响到的内容 。例如：设置 提示框标题应该作为提示框的一部分被整体地显示出来。 -###提示框内容 +### 提示框内容 提示框的内容是变化多样的。但是通常情况下由文本 和(或) 其它UI元素组成的，并且主要是用于聚焦于某个任务或者是某个步骤。比如说"确认"、"删除"或选择某个选项。 @@ -76,9 +76,9 @@ Dialog包含了一个标题(可选)，内容 ，事件。 -##事件 +## 事件 -###提示框事件 +### 提示框事件 提示框呈现的是一组聚焦和有限的事件，通常是一个肯定的事件和否定(与肯定的事件对立)的事件组成。 @@ -95,9 +95,9 @@ Dialog包含了一个标题(可选)，内容 ，事件。 -##表现(Behavior) +## 表现(Behavior) -###滚动 +### 滚动 提示框是与父视图是分隔开的。不会随着父视图滚动。 @@ -106,13 +106,13 @@ Dialog包含了一个标题(可选)，内容 ，事件。 如果可以，请尽量保持提示框里面的内容不需要滚动 。如果滚动的内容太多了，那么可以考虑使用其它的容器或者是呈现方式。然而，如果内容是滚动的，那么请使用较明显的方式来提示用户。比如说被让文字或者是控件露一截出来。 ![contact chips](images/components-dialogs-behavior-dialogs_12_large_mdpi.png) -###手势 +### 手势 触摸提示框外面的区域可以关闭提示框 -###提示框焦点 +### 提示框焦点 提示框的焦点是整个屏幕。提示框在关闭前或者是用户选择了一个事件(比如说选择了一个选项)前都会持有焦点。 diff --git a/SOURCE/components/dividers.md b/SOURCE/components/dividers.md index 1e3f0a7..f1e6b76 100644 --- a/SOURCE/components/dividers.md +++ b/SOURCE/components/dividers.md @@ -4,13 +4,13 @@ title: 分隔线(Dividers) permalink: dividers.html --- -#分隔线(Dividers) +# 分隔线(Dividers) 分隔线(Dividers) 主要用于管理和分隔列表和页面布局内的内容，以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则，弱到不会去打扰到用户对内容的关注。 -##用途 +## 用途 -##没有锚点的项（Items without anchors） +## 没有锚点的项（Items without anchors） 当在列表中没有像头像或者是图标之类的锚点元素时，单靠空格并不足以用于区分每个数据项(原文中使用的是“瓦片”)。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目。使其它看起来更独立和更有韵味。 @@ -19,16 +19,16 @@ permalink: dividers.html ![contact chips](images/components-dividers-items-without-anchor-1a_large_mdpi.png) ![contact chips](images/components-dividers-items-without-anchor-1b_large_mdpi.png) -###基于图片的内容 +### 基于图片的内容 由于网格列表（grid）本身属性而造成的视觉效果，这就导致在网格列表中是不需要分隔线来区别子标题与内容的。在这种情况下，子标题与内容间的空白区域就可以分隔每块的内容了。 ![contact chips](images/components-dividers-image-based-1a_large_mdpi.png) -##分隔线的类型 +## 分隔线的类型 -###等屏宽分隔线（Full-bleed dividers） +### 等屏宽分隔线（Full-bleed dividers） 等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。 @@ -37,7 +37,7 @@ permalink: dividers.html ![contact chips](images/components-dividers-full-bleed-1a_large_mdpi.png) ![contact chips](images/components-dividers-full-bleed-1b2_large_mdpi.png) -###内凹分隔线（Inset dividers） +### 内凹分隔线（Inset dividers） 在有锚点元素（头像或者是图标）并且有关键字的标题列中，我们可以使用内凹分隔线。 @@ -45,7 +45,7 @@ permalink: dividers.html ![contact chips](images/components-dividers-inset-1a_large_mdpi.png) ![contact chips](images/components-dividers-inset-1b_large_mdpi.png) -###子标题和分隔线 +### 子标题和分隔线 在使用分隔的子标题时，可以将分隔线置于子标题之上，可以加强子标题与内容关联度。 diff --git a/SOURCE/components/text-fields.md b/SOURCE/components/text-fields.md index 810991d..381fb2b 100644 --- a/SOURCE/components/text-fields.md +++ b/SOURCE/components/text-fields.md @@ -1,215 +1,215 @@ ---- -layout: page -title: 文本框 -permalink: text-fields.html ---- - -# 文本框 - -文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。详情见 [模式 > 选择](../patterns/selection.html) 文本选择的设计。 - -文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符，有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字，文本，电子邮件地址，电话号码，个人姓名，用户名，URL，街道地址，信用卡号码，PIN码，以及搜索查询。 - -## 单行文本框 - -当文本输入光标到达输入区域的最右边，单行文本框中的内容会自动滚动到左边。 - -![](images/components-textfields-singlelinetextfields-textfields_single_03_large_mdpi.png) - -![](images/components-textfields-singlelinetextfields-textfields_single_04_large_mdpi.png) - -### 浅色主题 - -- 提示和输入字体：Roboto Regular 16 sp -- 输入框高度：48 dp -- 文本顶部和底部填充：16 dp -- 文本字段分隔填充：8 dp - -![](images/components-textfields-singlelinetextfields-textfields_single_06_large_mdpi.png) - -### 暗色主题 - -![](images/components-textfields-singlelinetextfields-textfields_single_08_large_mdpi.png) - -### 红色标线 - -![](images/components-textfields-singlelinetextfields-textfields_redlines_03_large_mdpi.png) - -### 带有图标的浅色主题 - -- 提示和输入字体：Roboto Regular 16 sp -- 输入框高度：48 dp -- 文本顶部和底部填充：16 dp -- 文本字段分隔填充：8 dp - -![](images/components-textfields-singlelinetextfields-textfields_single_10_large_mdpi.png) - -### 带有图标的暗色主题 - -![](images/components-textfields-singlelinetextfields-textfields_single_12_large_mdpi.png) - -### 红色标线 - -![](images/components-textfields-singleline-redline_06_large_mdpi.png) - -## 带有滚动条的单行文本框 - -### 带有滚动条的单行文本框 - -当单行文本框的输入内容很长并需跨越多行的时候，则文本框应该以滚动形式容纳文本。 - -在滚动文本框中，一个图形化的标志出现在标线的下面。点击省略号，光标返回到字符的开头。 - -### 浅色主题 - -![](images/components-textfields-singlelinewithscrolling-textfields_single_scroll_03_large_mdpi.png) - -### 深色主题 - -![](images/components-textfields-singlelinewithscrolling-textfields_single_scroll_06_large_mdpi.png) - -## 浮动标签 - -### 浮动标签 - -浮动内嵌标签，当用户在输入文本时，标签会浮动到输入内容的上方。 - -![](images/components-textfields-floatinglabels-textfields_single_14_large_mdpi.png) - -### 浅色主题 - -- 提示和输入字体：Roboto Regular 16 sp -- 标签字体：Roboto Regular 12 sp -- 输入框高度：72 dp -- 文本顶部和底部填充：16 dp -- 文本字段分隔填充：8 dp - -![](images/components-textfields-floatinglabels-textfields_single_17_large_mdpi.png) - -### 深色主题 - -![](images/components-textfields-floatinglabels-textfields_single_21_large_mdpi.png) - -### 红色标线 - -![](images/components-textfields-floatinglabels-redlines_08_large_mdpi.png) - -## 多行文本框 - -当光标到达最下缘，多行文本框会自动让溢出的的文字断开并形成新的行，使文本可以换行和垂直滚动。 - -![](images/components-textfields-multilinetextfield-textfields_multi_03a_large_mdpi.png) - -![](images/components-textfields-multilinetextfield-textfields_multi_03b_large_mdpi.png) - -### 浅色主题 - -- 提示和输入字体：Roboto Regular 16 sp -- 标签字体：Roboto Regular 12 sp -- 文本顶部和底部填充：16 dp -- 文本字段分隔填充：8 dp - -![](images/components-textfields-multilinetextfield-textfields_multi_06_large_mdpi.png) - -### 深色主题 - -![](images/components-textfields-multilinetextfield-textfields_multi_08_large_mdpi.png) - -### 红色标线 - -![](images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png) - -## 全宽文本框 - -全宽文本框适用于更深入的工作。 - -![](images/components-textfields-fullwidthtextfield-textfields_multi_10a_large_mdpi.png) - -![](images/components-textfields-fullwidthtextfield-textfields_multi_10b_large_mdpi.png) - -### 单行和多行文本框 - -- 提示和输入字体：Roboto Regular 16 sp -- 顶部和底部填充文本：20 dp - -![](images/components-textfields-fullwidthtextfield-textfields_multi_12_large_mdpi.png) - -### 红色标线 - -![](images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png) - -## 字符计数器 - -当要是当地限制字符时可在文本框中使用字符计数器。 - -### 单行字符计数器 - -计数器文本：Roboto Regular 12 sp - -![](images/components-textfields-charactercounter-textfields_counter_03a_large_mdpi.png) - -![](images/components-textfields-charactercounter-textfields_counter_03b_large_mdpi.png) - -### 多行文本框的字符计数器 - -计数器文本：Roboto Regular 12 sp - -![](images/components-textfields-charactercounter-textfields_counter_06a_large_mdpi.png) - -![](images/components-textfields-charactercounter-textfields_counter_06b_large_mdpi.png) - -![](images/components-textfields-charactercounter-textfields_counter_08_large_mdpi.png) - -### 全宽文本框的字符计数器 - -![](images/components-textfields-charactercounter-textfields_counter_14_large_mdpi.png) - -![](images/components-textfields-charactercounter-textfields_counter_14b_large_mdpi.png) - -![](images/components-textfields-charactercounter-textfields_counter_16_large_mdpi.png) - -## 自动补全文本框 - -使用自动补全的文本框去呈现即时建议或补全弹出窗口，可让用户更准确，更高效地输入信息。 - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_03a_large_mdpi.png) - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_03b_large_mdpi.png) - -### 全宽文本框的自动补全 - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_06_large_mdpi.png) - -### 插入自动补全 - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_08a_large_mdpi.png) - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_08b_large_mdpi.png) - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_10_large_mdpi.png) - -### 全宽文本框的内嵌自动补全 - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_12a_large_mdpi.png) - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_12b_large_mdpi.png) - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_15_large_mdpi.png) - -### 内嵌自动补全 - -![](images/components-textfields-autocompletetextfield-textfields_autocomplete_18_large_mdpi.png) - -## 搜索过滤器 - -应用栏可以作为一个文本框。当用户输入时，文本框下方会显示已过滤和排序的内容。 - -![](images/components.textfields_search_filtering_A_large_mdpi.png) - -![](images/components.textfields_search_filtering_B_large_mdpi.png) - -### 在应用程序栏中的全宽文本框 - +--- +layout: page +title: 文本框 +permalink: text-fields.html +--- + +# 文本框 + +文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。详情见 [模式 > 选择](../patterns/selection.html) 文本选择的设计。 + +文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符，有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字，文本，电子邮件地址，电话号码，个人姓名，用户名，URL，街道地址，信用卡号码，PIN码，以及搜索查询。 + +## 单行文本框 + +当文本输入光标到达输入区域的最右边，单行文本框中的内容会自动滚动到左边。 + +![](images/components-textfields-singlelinetextfields-textfields_single_03_large_mdpi.png) + +![](images/components-textfields-singlelinetextfields-textfields_single_04_large_mdpi.png) + +### 浅色主题 + +- 提示和输入字体：Roboto Regular 16 sp +- 输入框高度：48 dp +- 文本顶部和底部填充：16 dp +- 文本字段分隔填充：8 dp + +![](images/components-textfields-singlelinetextfields-textfields_single_06_large_mdpi.png) + +### 暗色主题 + +![](images/components-textfields-singlelinetextfields-textfields_single_08_large_mdpi.png) + +### 红色标线 + +![](images/components-textfields-singlelinetextfields-textfields_redlines_03_large_mdpi.png) + +### 带有图标的浅色主题 + +- 提示和输入字体：Roboto Regular 16 sp +- 输入框高度：48 dp +- 文本顶部和底部填充：16 dp +- 文本字段分隔填充：8 dp + +![](images/components-textfields-singlelinetextfields-textfields_single_10_large_mdpi.png) + +### 带有图标的暗色主题 + +![](images/components-textfields-singlelinetextfields-textfields_single_12_large_mdpi.png) + +### 红色标线 + +![](images/components-textfields-singleline-redline_06_large_mdpi.png) + +## 带有滚动条的单行文本框 + +### 带有滚动条的单行文本框 + +当单行文本框的输入内容很长并需跨越多行的时候，则文本框应该以滚动形式容纳文本。 + +在滚动文本框中，一个图形化的标志出现在标线的下面。点击省略号，光标返回到字符的开头。 + +### 浅色主题 + +![](images/components-textfields-singlelinewithscrolling-textfields_single_scroll_03_large_mdpi.png) + +### 深色主题 + +![](images/components-textfields-singlelinewithscrolling-textfields_single_scroll_06_large_mdpi.png) + +## 浮动标签 + +### 浮动标签 + +浮动内嵌标签，当用户在输入文本时，标签会浮动到输入内容的上方。 + +![](images/components-textfields-floatinglabels-textfields_single_14_large_mdpi.png) + +### 浅色主题 + +- 提示和输入字体：Roboto Regular 16 sp +- 标签字体：Roboto Regular 12 sp +- 输入框高度：72 dp +- 文本顶部和底部填充：16 dp +- 文本字段分隔填充：8 dp + +![](images/components-textfields-floatinglabels-textfields_single_17_large_mdpi.png) + +### 深色主题 + +![](images/components-textfields-floatinglabels-textfields_single_21_large_mdpi.png) + +### 红色标线 + +![](images/components-textfields-floatinglabels-redlines_08_large_mdpi.png) + +## 多行文本框 + +当光标到达最下缘，多行文本框会自动让溢出的的文字断开并形成新的行，使文本可以换行和垂直滚动。 + +![](images/components-textfields-multilinetextfield-textfields_multi_03a_large_mdpi.png) + +![](images/components-textfields-multilinetextfield-textfields_multi_03b_large_mdpi.png) + +### 浅色主题 + +- 提示和输入字体：Roboto Regular 16 sp +- 标签字体：Roboto Regular 12 sp +- 文本顶部和底部填充：16 dp +- 文本字段分隔填充：8 dp + +![](images/components-textfields-multilinetextfield-textfields_multi_06_large_mdpi.png) + +### 深色主题 + +![](images/components-textfields-multilinetextfield-textfields_multi_08_large_mdpi.png) + +### 红色标线 + +![](images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png) + +## 全宽文本框 + +全宽文本框适用于更深入的工作。 + +![](images/components-textfields-fullwidthtextfield-textfields_multi_10a_large_mdpi.png) + +![](images/components-textfields-fullwidthtextfield-textfields_multi_10b_large_mdpi.png) + +### 单行和多行文本框 + +- 提示和输入字体：Roboto Regular 16 sp +- 顶部和底部填充文本：20 dp + +![](images/components-textfields-fullwidthtextfield-textfields_multi_12_large_mdpi.png) + +### 红色标线 + +![](images/components-textfields-fullwidthtextfield-textfields_redlines_12_large_mdpi.png) + +## 字符计数器 + +当要是当地限制字符时可在文本框中使用字符计数器。 + +### 单行字符计数器 + +计数器文本：Roboto Regular 12 sp + +![](images/components-textfields-charactercounter-textfields_counter_03a_large_mdpi.png) + +![](images/components-textfields-charactercounter-textfields_counter_03b_large_mdpi.png) + +### 多行文本框的字符计数器 + +计数器文本：Roboto Regular 12 sp + +![](images/components-textfields-charactercounter-textfields_counter_06a_large_mdpi.png) + +![](images/components-textfields-charactercounter-textfields_counter_06b_large_mdpi.png) + +![](images/components-textfields-charactercounter-textfields_counter_08_large_mdpi.png) + +### 全宽文本框的字符计数器 + +![](images/components-textfields-charactercounter-textfields_counter_14_large_mdpi.png) + +![](images/components-textfields-charactercounter-textfields_counter_14b_large_mdpi.png) + +![](images/components-textfields-charactercounter-textfields_counter_16_large_mdpi.png) + +## 自动补全文本框 + +使用自动补全的文本框去呈现即时建议或补全弹出窗口，可让用户更准确，更高效地输入信息。 + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_03a_large_mdpi.png) + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_03b_large_mdpi.png) + +### 全宽文本框的自动补全 + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_06_large_mdpi.png) + +### 插入自动补全 + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_08a_large_mdpi.png) + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_08b_large_mdpi.png) + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_10_large_mdpi.png) + +### 全宽文本框的内嵌自动补全 + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_12a_large_mdpi.png) + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_12b_large_mdpi.png) + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_15_large_mdpi.png) + +### 内嵌自动补全 + +![](images/components-textfields-autocompletetextfield-textfields_autocomplete_18_large_mdpi.png) + +## 搜索过滤器 + +应用栏可以作为一个文本框。当用户输入时，文本框下方会显示已过滤和排序的内容。 + +![](images/components.textfields_search_filtering_A_large_mdpi.png) + +![](images/components.textfields_search_filtering_B_large_mdpi.png) + +### 在应用程序栏中的全宽文本框 + ![](images/components-textfields-searchfilter-textfields_filter_06_large_mdpi.png) -> 原文：[Text fields](http://www.google.com/design/spec/components/text-fields.html) 翻译：[SamanthaChou](https://github.com/SamanthaChou) 校对：[hyaocuk](https://github.com/hyaocuk) +> 原文：[Text fields](http://www.google.com/design/spec/components/text-fields.html) 翻译：[SamanthaChou](https://github.com/SamanthaChou) 校对：[hyaocuk](https://github.com/hyaocuk) diff --git a/SOURCE/layout/layout-principles.md b/SOURCE/layout/layout-principles.md index 4f40711..759689a 100644 --- a/SOURCE/layout/layout-principles.md +++ b/SOURCE/layout/layout-principles.md @@ -1,186 +1,186 @@ ---- -layout: page -title: 准则 -permalink: layout-principles.html ---- - -# 准则 - -Material Design 使用的基本工具来源于印刷设计，例如通用于所有页面的基准线和删格。布局排版能够按比例横跨不同尺寸的屏幕，促进UI开发和从根本上帮助你做可扩展的apps。 - - -布局指南也通过使用相同的视觉元素，结构网格，和通用的行距规则，让app在不同平台与屏幕尺寸上拥有一致的外观和感觉。结构和视觉上的一致创造了一个可识别的跨平台产品的用户环境，它给用户提供高度的熟悉感和舒适性，让产品更便于使用。 - - -在深入的研究布局细节之前，再一次细想什么是Material Design：一种基于纸页质感的设计。了解纸页的行为和如何制作是很重要的。 - -## 页面制作 - -**在Material Design里，每一个像素点都是由应用程序在一个页面上画出来的**。页面有一个平滑背景颜色并可以作用于各种目的。一个典型的布局就是由多层页面组成的。 - -系统可能会为很多元件绘制像素，比如状态或者系统栏，但这些都不属于页面。可以这样想象那些系统元件，他们是被贴在显示器玻璃背面的，另外存在于一个在app内容下方的层级。 - - -### 布置页面 - -两个页面有一条共用的，长度相同的边就会产生缝合线。有缝合线的两张纸通常会一起移动。 - -![](images/Layout-principles-papercraft-papercraft-01a_large_mdpi.png) - - -两张Z轴位置不同的纸片在重叠会产生层阶[step]，因此他们通常是彼此独立移动。 - - -![](images/Layout-principles-papercraft-papercraft-03a_large_mdpi.png) - -### 页面工具栏 - -**工具栏**是一个主要展示操作的条状页片。这些操作通常聚集在工具栏的左边缘和右边缘。与导航相关的操作（一个抽屉菜单[ drawer menu ] ，一个向上的箭头[ up arrow ]）呈现在左边，而适用于当前情境的操作呈现在右边。 - -![](images/layout-principles-papercraft-papercraft-03_MISSINGASSET_large_mdpi.png) - -在工具栏左边和右边的操作不会被另一个页面分离。然而，工具栏的宽度被限制到小于页片的宽度。 - -![](images/papercraft-04_large_mdpi.png) -要 -限制宽度要小于整个页片的宽度。 - -![](images/papercraft-04_dont_large_mdpi.png) -不要 -绝对不允许一个页面被另一个页面隔开。 - -工具栏经常的在别的页面上形成一个叠层用来显示与工具栏操作相关的内容。当页面工 -具栏的下方滚动时，工具栏卡在页面的入口点，阻止该页面完全穿过另一端。 - -![](images/layout-principles-papercraft-papercraft-05a_large_mdpi.png) - -工具栏也可以与另一个页面由开始的缝合状态演变成叠起来之后形成的层阶[step]。这种叠加形式上的变形称为**瀑布**。 - -![](images/layout-principles-papercraft-papercraft-06a_large_mdpi.png) - -同样的，这个工具栏也可以保持它本身的缝合线，就像两个页面一起移动一样**推离**出屏幕。 - -![](images/layout-principles-papercraft-papercraft-07a_large_mdpi.png) - -最后，另一个页面在移动时也可以覆盖这个工具栏。 - -![](images/layout-principles-papercraft-papercraft-08a_large_mdpi.png) - - -工具栏有一个标准的高度，但也可以更高。当更高的时候，操作键可以放在工具栏的最顶端或最低端。 - -![](images/layout-principles-papercraft-papercraft-09a_large_mdpi.png) - -工具栏在被压住时可以动态改变其高度。当改变尺寸的时候，他们会在最大和最小（标准）的高度之间调整（界定阈值）。 - -![](images/layout-principles-papercraft-papercraft-10a_large_mdpi.png) - -### 浮动操作 - -浮动操作是一个与工具栏分离的圆形页片。 - -浮动操作代表在当前情境下的独立提升操作。当与产生这个层阶[step]的页面内容相关联时，它可以跨越这个层阶。 - -![](images/layout-principles-papercraft-papercraft-11a_large_mdpi.png) - -浮动操作在与产生这个叠合线的两个页面内容相关联时，可以跨越这个缝合线。 - -永远不要仅仅为了给操作提供一个支撑点而引入一条装饰性的缝合线。 - - -![](images/layout-principles-papercraft-papercraft-12a_large_mdpi.png) - -## 自适应准则 - -当设计跨设备布局的时候，我们为网格行为结合了固定的，粘性的和流畅的策略。 - -这里有一些简单的指导： - -1. 遵循人的习惯。 -2. 更大的屏幕 ≠ 更大的认知能力。 -3. 线条长度应该是适宜的。 -4. 考虑到角距离。 -5. 把家具从墙上取下来：允许空白，不要把局限于固定的工具栏。 - -在多重层次等级结构中使用策略，例如屏幕层级和卡片层级。 - -桌面模版演示了应用了这些网格规则的几个自适应界面。 - -[Desktop Template](http://materialdesign.qiniudn.com/downloads/Layout_Desktop_Whiteframe.ai) - 100 MB(.ai) - -![](images/layout-principles-responsive-responsive-01_large_mdpi.png) - -## 维度 - -在dps中深度是可被测量的，就像x轴和y轴。然而，在z坐标空间里去考虑元素的**优先级**是更有效的，而不只是依据绝对的，固定的位置。 - - -### 一个概念模型 - -在一个高层次级别上，每个app都可以被认为是放置在一个独特的空间或容器。 - -这样就意味着一个应用软件里的页面不能在Z轴空间插入另外一个页面。 - -这也意味着操作和元件是独立在app中:例如,在一个软件里让一个列表滑动消失不会导致那个列表穿过另一个不相关app的空间。 - -多容器允许多个app被同时看到，例如，在多种浏览器标签里。 - -![](images/layout-principles-dimensionality-dimensionality-01_large_mdpi.png) - - -在一个特定的app里，根据z轴主要和次要的层阶[step]，很多元素都是相对放置的。例如，一个按钮的聚焦状态是次要的层阶，而它的按下状态是一个主要的层阶。 - - -其他元素在app的Z轴里有固定的优先级，意味着不管那些元素相对于Z轴的位置,他们总是位于其他元素上面或者下面。比如，浮动操作按钮总是在内容和工具栏之上，不管这个app可能会用到多少个页面。 - -![](images/layout-principles-dimensionality-dimensionality-02_large_mdpi.png) - - -系统元件，比如状态栏和系统对话框，存在于一个单独的系统空间里，在所有app容器的上方和下方。 - -取决于情境， 系统元素有可能不出现在某一个app里（比如在熄灯模式中），但当系统元素存在时，他们在空间上具有相对的优先权。这可确保，比如，一个系统对话框总出现在当前app的上面。 - -![](images/layout-principles-dimensionality-dimensionality-03_large_mdpi.png) - -### 布局注意事项 - -深度不仅仅是装饰。 - -优先考虑元素的z轴空间，不是绝对的位置。 - -app中的深度应该表达层级和其重要性，并且帮助用户关注手头的任务。 - - -![](images/layout-principles-dimensionality-dimensionality-04_large_mdpi.png) - -### 阴影 - -阴影有两部分组成：顶端表达深度的阴影和底端表达边界的阴影。 - -![](images/layout-principles-dimensionality-shadows-01_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-02_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-03_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-04_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-05_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-06_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) - -![](images/layout-principles-dimensionality-shadows-07_large_mdpi.png) - -> 原文：[Principles](http://www.google.com/design/spec/layout/layout-principles.html) 翻译：[lightlz](https://github.com/lightlz) 校对：[Jingsha](https://github.com/Jingsha) +--- +layout: page +title: 准则 +permalink: layout-principles.html +--- + +# 准则 + +Material Design 使用的基本工具来源于印刷设计，例如通用于所有页面的基准线和删格。布局排版能够按比例横跨不同尺寸的屏幕，促进UI开发和从根本上帮助你做可扩展的apps。 + + +布局指南也通过使用相同的视觉元素，结构网格，和通用的行距规则，让app在不同平台与屏幕尺寸上拥有一致的外观和感觉。结构和视觉上的一致创造了一个可识别的跨平台产品的用户环境，它给用户提供高度的熟悉感和舒适性，让产品更便于使用。 + + +在深入的研究布局细节之前，再一次细想什么是Material Design：一种基于纸页质感的设计。了解纸页的行为和如何制作是很重要的。 + +## 页面制作 + +**在Material Design里，每一个像素点都是由应用程序在一个页面上画出来的**。页面有一个平滑背景颜色并可以作用于各种目的。一个典型的布局就是由多层页面组成的。 + +系统可能会为很多元件绘制像素，比如状态或者系统栏，但这些都不属于页面。可以这样想象那些系统元件，他们是被贴在显示器玻璃背面的，另外存在于一个在app内容下方的层级。 + + +### 布置页面 + +两个页面有一条共用的，长度相同的边就会产生缝合线。有缝合线的两张纸通常会一起移动。 + +![](images/Layout-principles-papercraft-papercraft-01a_large_mdpi.png) + + +两张Z轴位置不同的纸片在重叠会产生层阶[step]，因此他们通常是彼此独立移动。 + + +![](images/Layout-principles-papercraft-papercraft-03a_large_mdpi.png) + +### 页面工具栏 + +**工具栏**是一个主要展示操作的条状页片。这些操作通常聚集在工具栏的左边缘和右边缘。与导航相关的操作（一个抽屉菜单[ drawer menu ] ，一个向上的箭头[ up arrow ]）呈现在左边，而适用于当前情境的操作呈现在右边。 + +![](images/layout-principles-papercraft-papercraft-03_MISSINGASSET_large_mdpi.png) + +在工具栏左边和右边的操作不会被另一个页面分离。然而，工具栏的宽度被限制到小于页片的宽度。 + +![](images/papercraft-04_large_mdpi.png) +要 +限制宽度要小于整个页片的宽度。 + +![](images/papercraft-04_dont_large_mdpi.png) +不要 +绝对不允许一个页面被另一个页面隔开。 + +工具栏经常的在别的页面上形成一个叠层用来显示与工具栏操作相关的内容。当页面工 +具栏的下方滚动时，工具栏卡在页面的入口点，阻止该页面完全穿过另一端。 + +![](images/layout-principles-papercraft-papercraft-05a_large_mdpi.png) + +工具栏也可以与另一个页面由开始的缝合状态演变成叠起来之后形成的层阶[step]。这种叠加形式上的变形称为**瀑布**。 + +![](images/layout-principles-papercraft-papercraft-06a_large_mdpi.png) + +同样的，这个工具栏也可以保持它本身的缝合线，就像两个页面一起移动一样**推离**出屏幕。 + +![](images/layout-principles-papercraft-papercraft-07a_large_mdpi.png) + +最后，另一个页面在移动时也可以覆盖这个工具栏。 + +![](images/layout-principles-papercraft-papercraft-08a_large_mdpi.png) + + +工具栏有一个标准的高度，但也可以更高。当更高的时候，操作键可以放在工具栏的最顶端或最低端。 + +![](images/layout-principles-papercraft-papercraft-09a_large_mdpi.png) + +工具栏在被压住时可以动态改变其高度。当改变尺寸的时候，他们会在最大和最小（标准）的高度之间调整（界定阈值）。 + +![](images/layout-principles-papercraft-papercraft-10a_large_mdpi.png) + +### 浮动操作 + +浮动操作是一个与工具栏分离的圆形页片。 + +浮动操作代表在当前情境下的独立提升操作。当与产生这个层阶[step]的页面内容相关联时，它可以跨越这个层阶。 + +![](images/layout-principles-papercraft-papercraft-11a_large_mdpi.png) + +浮动操作在与产生这个叠合线的两个页面内容相关联时，可以跨越这个缝合线。 + +永远不要仅仅为了给操作提供一个支撑点而引入一条装饰性的缝合线。 + + +![](images/layout-principles-papercraft-papercraft-12a_large_mdpi.png) + +## 自适应准则 + +当设计跨设备布局的时候，我们为网格行为结合了固定的，粘性的和流畅的策略。 + +这里有一些简单的指导： + +1. 遵循人的习惯。 +2. 更大的屏幕 ≠ 更大的认知能力。 +3. 线条长度应该是适宜的。 +4. 考虑到角距离。 +5. 把家具从墙上取下来：允许空白，不要把局限于固定的工具栏。 + +在多重层次等级结构中使用策略，例如屏幕层级和卡片层级。 + +桌面模版演示了应用了这些网格规则的几个自适应界面。 + +[Desktop Template](http://materialdesign.qiniudn.com/downloads/Layout_Desktop_Whiteframe.ai) - 100 MB(.ai) + +![](images/layout-principles-responsive-responsive-01_large_mdpi.png) + +## 维度 + +在dps中深度是可被测量的，就像x轴和y轴。然而，在z坐标空间里去考虑元素的**优先级**是更有效的，而不只是依据绝对的，固定的位置。 + + +### 一个概念模型 + +在一个高层次级别上，每个app都可以被认为是放置在一个独特的空间或容器。 + +这样就意味着一个应用软件里的页面不能在Z轴空间插入另外一个页面。 + +这也意味着操作和元件是独立在app中:例如,在一个软件里让一个列表滑动消失不会导致那个列表穿过另一个不相关app的空间。 + +多容器允许多个app被同时看到，例如，在多种浏览器标签里。 + +![](images/layout-principles-dimensionality-dimensionality-01_large_mdpi.png) + + +在一个特定的app里，根据z轴主要和次要的层阶[step]，很多元素都是相对放置的。例如，一个按钮的聚焦状态是次要的层阶，而它的按下状态是一个主要的层阶。 + + +其他元素在app的Z轴里有固定的优先级，意味着不管那些元素相对于Z轴的位置,他们总是位于其他元素上面或者下面。比如，浮动操作按钮总是在内容和工具栏之上，不管这个app可能会用到多少个页面。 + +![](images/layout-principles-dimensionality-dimensionality-02_large_mdpi.png) + + +系统元件，比如状态栏和系统对话框，存在于一个单独的系统空间里，在所有app容器的上方和下方。 + +取决于情境， 系统元素有可能不出现在某一个app里（比如在熄灯模式中），但当系统元素存在时，他们在空间上具有相对的优先权。这可确保，比如，一个系统对话框总出现在当前app的上面。 + +![](images/layout-principles-dimensionality-dimensionality-03_large_mdpi.png) + +### 布局注意事项 + +深度不仅仅是装饰。 + +优先考虑元素的z轴空间，不是绝对的位置。 + +app中的深度应该表达层级和其重要性，并且帮助用户关注手头的任务。 + + +![](images/layout-principles-dimensionality-dimensionality-04_large_mdpi.png) + +### 阴影 + +阴影有两部分组成：顶端表达深度的阴影和底端表达边界的阴影。 + +![](images/layout-principles-dimensionality-shadows-01_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-02_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-03_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-04_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-05_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-06_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-08_large_mdpi.png) + +![](images/layout-principles-dimensionality-shadows-07_large_mdpi.png) + +> 原文：[Principles](http://www.google.com/design/spec/layout/layout-principles.html) 翻译：[lightlz](https://github.com/lightlz) 校对：[Jingsha](https://github.com/Jingsha) diff --git a/SOURCE/patterns/navigation-drawer.md b/SOURCE/patterns/navigation-drawer.md index 1b627e7..5488201 100644 --- a/SOURCE/patterns/navigation-drawer.md +++ b/SOURCE/patterns/navigation-drawer.md @@ -42,7 +42,7 @@ permalink: navigation-drawer.html 在每个列表组的顶部和底部添加8dp的间距。一个例外的情况是，当这个列表组有一个副标题的时候顶部不需添加8dp的间距，因为副标题包含有他自己的间距设定。 -##**高度**## +## **高度** ## 抽屉导航的占据了屏幕的全部高度，并且抽屉导航在状态栏的下方。抽屉下方所有的东西会覆盖一层阴影（scrim）而变暗。阴影下的所有内容依然是可见的。 @@ -65,7 +65,7 @@ permalink: navigation-drawer.html -##**分隔线**## +## **分隔线** ## 在导航抽屉里所有分割线都是完全在抽屉面板内部。此外，在分隔线上方和下方均有8dp的间距。 @@ -78,7 +78,7 @@ permalink: navigation-drawer.html **8 dp 垂直间距** -##**滚动**## +## **滚动** ## 抽屉导航可以像任何普通视图一样滚动。 @@ -86,7 +86,7 @@ permalink: navigation-drawer.html -##**设置和支持**## +## **设置和支持** ## 设置和支持位于滚动列表的底部，与列表内容的其余部分排成列。 diff --git a/SOURCE/patterns/promoted-actions.md b/SOURCE/patterns/promoted-actions.md index b5884c7..d3a98af 100644 --- a/SOURCE/patterns/promoted-actions.md +++ b/SOURCE/patterns/promoted-actions.md @@ -6,7 +6,7 @@ permalink: promoted-actions.html # 改进的操作 -##浮动按钮 +## 浮动按钮 浮动按钮是一个改进操作的一个特殊例子。它有一个浮在整个界面之上的图标，并且在改变、启动、转换锚点时有特殊的动作，这使得浮动按钮与其他的按钮区别开来。 @@ -17,7 +17,7 @@ permalink: promoted-actions.html ![](images/patterns-promotedactions-floatingactionbuttonFAB3_large_mdpi.png) ![](images/patterns-promotedactions-floatingactionbuttonFAB4_large_mdpi.png) -###相关内容 +### 相关内容 不是每个界面都需要一个浮动按钮。浮动按钮应该包含一个应用里最主要的操作。在屏幕的左侧的界面中，它最主要的操作通过点击屏幕来打开图库里的图片，所以这里不需要浮动按钮。而在屏幕的右侧的界面里，它最主要的功能是添加文件。对于这种情况，放置一个浮动按钮是比较合适的。 @@ -59,7 +59,7 @@ permalink: promoted-actions.html ![](images/patterns-promotedactions-associatedcontentFAB08dont_large_mdpi.png) 不要 -###相关动作 +### 相关动作 把多出来的操作放在工具栏的“溢出（overflow）”菜单里面，而非浮动按钮里面。 @@ -122,7 +122,7 @@ permalink: promoted-actions.html ![](images/patterns-promotedactions-relatedactionsFAB16dont2_large_mdpi.png) 不要 -###特性 +### 特性 使用浮动按钮做一些保护性的操作，像创建、加入我的最爱、分享、导航和浏览。 @@ -150,7 +150,7 @@ permalink: promoted-actions.html ![](images/patterns-promotedactions-qualitiesFAB21dont_large_mdpi.png) 不要 -###放置位置 +### 放置位置 你可以根据图框的间距规则放置浮动按钮，你也可以把浮动按钮吸附扩展的应用栏（译者注：工具栏、状态栏之类）的边上。 diff --git a/SOURCE/style/icons.md b/SOURCE/style/icons.md index 10c730f..dde6d42 100644 --- a/SOURCE/style/icons.md +++ b/SOURCE/style/icons.md @@ -5,7 +5,7 @@ --- -##产品图标 +## 产品图标 产品图标作为一个品牌下产品、服务和工具的一种视觉表现，能够简洁、显眼且友好地传递产品的核心理念与内涵。尽管每个产品图标看上去截然不同，但对于一个给定品牌，产品图标应在理念和实践中统一。 @@ -14,7 +14,7 @@ ![](images/style_logos_product_intro_definition.png) -###设计途径 +### 设计途径 产品图标设计从现实材料的质感和触感中获得启发。每个图标都像真实纸张一样被裁剪、折叠和点燃，而用一些简单的图形元素来表现。我们通过干净的折痕和清晰的边缘来表现结实坚固的质感，或是利用微妙的亮点和一致的阴影来展现材料的磨砂抛光。 @@ -35,7 +35,7 @@ > 色彩考究 -###图标网格 +### 图标网格 产品图标网格已经形成了一致的标准，且建立了一套明确的图形元素定位规则。这种标准化带来了灵活，而连贯的系统。 ![网格](images/style_logos_product_grid_logo_grid.png) @@ -47,7 +47,7 @@ > 关键线 -###关键线的形状 +### 关键线的形状 关键线的形状是网格的基础。利用这些核心形状做为向导，即可使整个相关产品的图标保持一致的视觉比例。 @@ -76,7 +76,7 @@ > 高:128 宽:176 -###DP单位网格 +### DP单位网格 设备上的启动器以48dp的尺寸显示产品图标，所以当你创建图标时，请使用48dp的尺寸，必要时可将其放大400%到192 x 192 px。 保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。 @@ -90,7 +90,7 @@ > 4:1 单元网格 -###几何 +### 几何 我们为这几种特定的关键线制定了预设规则：圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。 @@ -100,7 +100,7 @@ ![](images/style_logos_product_grid_geometry4.png) -###产品图标剖析 +### 产品图标剖析 下面我们来解剖那些组成产品图标的图形元素。对于一个给定的品牌，在这些图标中，元素的一致性是形成一个共享视觉语言的关键。熟悉这些元素可以更容易地理解每个logo 和它们之间细微差异的特征。它也将帮助你学会识别logo 设计的底层结构。 @@ -171,9 +171,9 @@ > 在所有元素之上，自左上到右下逐渐变淡，提供照明的柔和色彩。 -###产品图标指标 +### 产品图标指标 -####光线 +#### 光线 在material 环境中，虚拟光线照射在物体上并使其产生投影。从正上方发出的光使material 元素产生上文提及的联系阴影，可以突出物体的上下边缘，而带有角度的光线则可以增强元素表面的质感。 @@ -185,7 +185,7 @@ > 45度光源 -####投影 +#### 投影 对于一个产品图标来说，来自顶部的光线会使其产生一个围绕上层元素的柔和阴影。左上阴影较轻而右下阴影较重，且总在外轮廓之内。 @@ -206,7 +206,7 @@ > 色彩：参考色中的阴暗色 -####亮边和暗边 +#### 亮边和暗边 material 元素的上下两边提供一种深度感和表面感，元素还有1px的标准厚度。要注意所有边的距离都是从元素的内边缘算起的。 @@ -234,7 +234,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 颜色: 参考色中的阴暗色 -####抛光 +#### 抛光 抛光层是45度虚拟光线照射的结果。它从左上延伸至右下，且只在图标边界之内。 @@ -254,7 +254,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 渐变 2 不透明度: 0% 位置: 100% -####参考颜色，暗度和阴影值 +#### 参考颜色，暗度和阴影值 当颜色、暗度、和阴影改变时，每种颜色表现出的变化并不相同。元素的颜色或每条边缘的色调和暗影都需要根据相邻的颜色进行调整。为了确保颜色看起来较和谐，请遵循下列合适的各值。 @@ -264,11 +264,11 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p ![参考颜色](images/style_logos_product_lighting_values_hot.png) ![参考颜色](images/style_logos_product_lighting_values_neutral.png) -###产品图标模式 +### 产品图标模式 借鉴现实材质的表现，我们简单约定表面质感和触感的表达。材质与颜色之间的相互作用也会产生许多的独特成分。 -####颜色 +#### 颜色 让色彩平铺在平面上，不要加上任何的边角装饰。 @@ -280,7 +280,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####图层 +#### 图层 每层元素都会有深度和边角，布局中不要超过两层，否则将因过于复杂而丧失重点。 @@ -292,7 +292,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####狗耳 +#### 狗耳 折角（或叫狗耳）用来隐喻与传统纸张文档有关的表格或文件。不要放在左边，这样会产生破坏和谐的阴影。 @@ -304,7 +304,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####提升 +#### 提升 提升一个关键material 元素到背景的上方，使其成为关注重点。不要让提升的元素被切分或中断。 @@ -316,7 +316,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####划线 +#### 划线 划线能在不破坏形状的情况下营造层次感，不过要放在对称中心。不要用多条划线或是放在非中央位置。 @@ -328,7 +328,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####折叠 +#### 折叠 被伸拉的折叠元素会更加立体，但斑点色应避免使用，会导致关键元素扭曲改变。 @@ -340,7 +340,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####重叠 +#### 重叠 重叠的元素创造出独特的剪影，但边缘和阴影仅限于轮廓的内部。不要使用超过两个以上的重叠，会导致图标太复杂，缺乏重点。 @@ -352,7 +352,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####手风琴 +#### 手风琴 手风琴式折叠的元素由两个折叠的元素相接而成，用来增加单个元素的尺寸。不要使用超过两个以上的手风琴式折叠，会导致图标太复杂，缺乏重点。 @@ -364,7 +364,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 勿 -####扭曲 +#### 扭曲 产品图标应保持原有几何形状，永远不要扭曲它。 @@ -423,7 +423,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 800% 缩放 -####图标网格 +#### 图标网格 图标网格已经形成一致的标准，且建立起统一元素放置的规范。此标准化带来了一个富有弹性而连贯的系统。 @@ -435,7 +435,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 关键线 -####内容区域 +#### 内容区域 内容应该保持在活动区域以内，如有必要，内容可以延展至修饰区域之中，但不能超出。 @@ -447,7 +447,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 修饰区域 -####关键线形状 +#### 关键线形状 关键线形状是网格的基础，通过关键线，即可保持系统图标的一致性。 @@ -475,7 +475,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 高：16px, 宽：20px -####几何 +#### 几何 我们为这几种特定的关键线制定了预设规则：圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一Google 系统图标和规范它们在网格上的布置。 @@ -488,7 +488,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 组成 -####系统图标剖析 +#### 系统图标剖析 1. 笔划末端 2. 角 @@ -500,7 +500,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p ![](images/style_icons_system_anatomy.png) -####角 +#### 角 一致的圆角半径（2px）是统一全系列系统图标的关键，不要修改它。 @@ -514,7 +514,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 內部角 -####笔触 +#### 笔触 一致的画笔宽度（2px）也是统一全系列系统图标的关键，请在内外部的边角上保持使用2px的宽度。 @@ -535,7 +535,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 内部角 -####视觉校正 +#### 视觉校正 极端情况下必要的校正能够增加图标的清晰度。 如有必要，需与其他图标保持一致的几何形状，不要加以扭曲。 @@ -549,7 +549,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 缩小 -####清空 +#### 清空 为了可读性和触摸操作的需要，图标周围可以留有一定的空白区域。 @@ -562,7 +562,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 放置 -####最佳范例 +#### 最佳范例 一致的图标可以有利于用户理解，在不同应用中也尽量使用已有的系统图标。 @@ -644,7 +644,7 @@ material 元素的上下两边提供一种深度感和表面感，元素还有1p > 宽高不等。 -####颜色 +#### 颜色 可用图标的标准不透明度在亮色背景上是54%（#000000）。可视等级较低的禁用图标的不透明度应为26%（#000000）。 diff --git a/SOURCE/style/imagery.md b/SOURCE/style/imagery.md index 844fa6e..c8194e6 100644 --- a/SOURCE/style/imagery.md +++ b/SOURCE/style/imagery.md @@ -4,13 +4,13 @@ title: 图像(Imagery) permalink: imagery.html --- -#图像 +# 图像 ![](images/style-imagery-style_philosophy_large_mdpi.png) **在material design中，图像（无论是绘画还是摄影）都应该是组建而成而并非人为策划的，看起来神奇并且不显得过度制作。这种风格乐观，愉悦，并且坦率。这种风格比较强调场景的实质性（Materiality），质感，深度，让人意想不到的色彩运用， 以及对环境背景的关注。这些原则都旨在创建目的性强，美丽又有深度的用户界面。** -##原则 +## 原则 当使用绘画和摄影提升用户体验时，选择能够表达个人关联、信息和令人喜悦的图像。 @@ -26,20 +26,20 @@ permalink: imagery.html **闪光点** 用相关图像以一种意想不到的方式来取悦用户，让用户觉得不可思议。 -###场景赏析 +### 场景赏析 加入逻辑，确保图像是动感的，并且显示出场景智能性和相关性。带有预测性的视觉效果能够彰显出智能的水准，从而能大大改善用户体验。 ![](images/style-imagery-principles-appreciaton_content_large_mdpi.png) -###身临其境 +### 身临其境 要勇于运用遮盖的方法，或是对色彩和内容的叠加来构成对画面主角的印象，抑或是构成一幅缩略图。 ![](images/style-imagery-principles-immersive_20obscure_large_mdpi.png) -##最佳实践 +## 最佳实践 -##使用多种媒体 +## 使用多种媒体 插画和摄影可以运用在同一个产品中。摄影自动暗含了一定程度的特定性，从而应该用来展示特定的物体和故事。绘画则能有效的表现出概念和隐喻，而这一点是摄影所不具备的。 @@ -59,7 +59,7 @@ permalink: imagery.html 不要 不要局限于图片库。 -###远离图片库(Stay away from stock) +### 远离图片库(Stay away from stock) 利用图像可以表达一种与众不同的心声，还可以展现出绝佳的创意。 @@ -75,7 +75,7 @@ permalink: imagery.html ![](images/style-imagery-bestpractices-stock-dont_large_mdpi.png) 不要 -###有焦点 +### 有焦点 你的图像应当有一个标志性的焦点。小到单一物体，大到整体布局，都可以成为焦点。确保能够用一个让人印象深刻的方法，传递给用户一个清晰的概念。 @@ -98,7 +98,7 @@ permalink: imagery.html 不要 -###构建叙事(Build narratives) +### 构建叙事(Build narratives) 创建一个让人感觉身临其境的故事和上下文(context)场景。 @@ -114,7 +114,7 @@ permalink: imagery.html ![](images/style-imagery-bestpractices-narrative-carseat-dont_large_mdpi.png) 不要 -###不要过度操作 +### 不要过度操作 保持图像的原始完整性。不要过度使用高度滤镜或高斯模糊，尤其是当试图去隐藏劣化(degradation)的时候。 @@ -130,9 +130,9 @@ permalink: imagery.html ![](images/style-imagery-bestpractices-manipulate-lake-dont_large_mdpi.png) 不要 -##用户界面集成(UI Integration) +## 用户界面集成(UI Integration) -###分辨率 +### 分辨率 确保你的图像大小适应其边框并且支持跨平台。该结构强调大幅图像。理想情况下，素材应该不会出现像素化。要为特定的比率和设备测试合适的分辨率大小。 @@ -145,7 +145,7 @@ permalink: imagery.html 不要 劣化的图像 -###调整大小(Introduce Scale) +### 调整大小(Introduce Scale) 利用不同的大小的图像来创造视觉上的重要性。 @@ -155,7 +155,7 @@ permalink: imagery.html ![](images/style-imagery-integration-introduce_scaleb_large_mdpi.png) 鼓励在同一个生态系统使用多个容器。 -###文字保护 +### 文字保护 添加文字保护纱(protection scrims)来使图像上的文字显示清晰易读。 @@ -184,7 +184,7 @@ permalink: imagery.html ![](images/style-imagery-integration-typetreatment3dont_large_mdpi.png) 不要 -###头像和缩略图 +### 头像和缩略图 头像和缩略图代表实体或内容，可以是摄影或者概念性的插画。 通常来讲，他们是横置目标（tap targets），可以让人对事物和内容有一个初步印象。 @@ -200,7 +200,7 @@ permalink: imagery.html 一个品牌头像能够让人在一眼之内传达信息，缩略图也如此。 -###主角图像(Hero Images) +### 主角图像(Hero Images) 主角图像通常被固定在很明显的位置，大小比普通大小略大，比如屏幕顶部的横幅。主角图像能够吸引用户，提供了内容相关的背景，或加强品牌。 @@ -212,7 +212,7 @@ permalink: imagery.html **合成的主角图像(Integrated hero image)** 合成的主角图像通常在一个样式中包含着混杂特异的部分。 这些部分并不能形成首要的视觉焦点。 -###图集 +### 图集 图集图片（gallery images）通常风格醒目，且他们的布局基本相同，比如网格（grid）布局，或是单一的图像。 ![](images/style-imagery-integration-imagetypegallerya_large_mdpi.png) diff --git a/SOURCE/style/typography.md b/SOURCE/style/typography.md index 0e80b86..3542188 100644 --- a/SOURCE/style/typography.md +++ b/SOURCE/style/typography.md @@ -70,7 +70,7 @@ permalink: typography.html “按钮（Button）”样式的例子 -###基本色/色彩对比度（Basic colors/Color contrast） +### 基本色/色彩对比度（Basic colors/Color contrast） 最基本的常识是，相同颜色的背景和文字是很难阅读的。但有些人不知道的是，带有过强对比度的文本会有些炫目，同样难以阅读。这一点在深色背景下尤其明显。 diff --git a/SOURCE/usability/accessibility.md b/SOURCE/usability/accessibility.md index 59bac51..e6d70e4 100644 --- a/SOURCE/usability/accessibility.md +++ b/SOURCE/usability/accessibility.md @@ -4,9 +4,9 @@ title: 可达性 permalink: accessibility.html --- -#可达性# +# 可达性 # -##可达性## +## 可达性 ## 一个产品,如果对于任何人（无论能力）而言，都是非常容易掌握、理解并可以用之来完成他们的目标的话，那么这个产品就是可达的。一个成功的产品对于任何可能的使用者来说都应该是可达的。 @@ -26,7 +26,7 @@ permalink: accessibility.html 然后再考虑在以下在影响可达性的关键领域使用的场景：导航，可读性，指导与反馈。 -###导航### +### 导航 ### **帮助用户快速和有效的浏览信息**。给网页添加导航是非常快速有效的（例如，跳到重点区段或回到主导航栏）？ 优先展示最重要的信息，稍微修改下页面，比如把一个“创建”按钮放到顶部，可以使导航快得多。 @@ -38,7 +38,7 @@ permalink: accessibility.html **管理用户关注的焦点**。你确定你的用户和他们关注的焦点在弹出框、警告和其他各类屏幕的导航中都不会迷失吗？同时考虑用户如何将关闭一个弹出窗口后返回到屏幕上，确保他们能够正确的返回弹出框出现之前的那个界面。 -###可读性### +### 可读性 ### **确保你的产品在使用大字体的情况下依旧可用**。当用户放大屏幕或者字体的时候，你的文字信息是否依然清晰？那些必要的元素是否依旧可见，可用并且不重叠？你可以通过一些内建的操作系统/浏览器/应用程序的字体放大工具来检查这些问题。 @@ -52,7 +52,7 @@ permalink: accessibility.html **提供视觉和听觉相互可替换的技术**。如果有音频元素，你是否提供了字幕、文本或另外其他的视觉方面的替代方法？该指导方针也适用于系统的警报声音，任何出现发光或者闪烁的地方都需要有对应的声音替代方法，反之亦然。 -###指导和反馈### +### 指导和反馈 ### **确保用户交互和控制界面很清楚明了**。是否所有的用户交互控制界面都有对应的文字标签、提示或者说明其用途的符号？是否你的专业术语在整个应用程序中都保持一致？先提供这些技术的描述说明，然后当给元素命名的时候，确保它在你的应用程序中的术语保持一致。 diff --git a/SOURCE/whatis-material-design/material-properties.md b/SOURCE/whatis-material-design/material-properties.md index 6471d36..0953833 100644 --- a/SOURCE/whatis-material-design/material-properties.md +++ b/SOURCE/whatis-material-design/material-properties.md @@ -1,206 +1,206 @@ ---- -layout: page -title: Material属性 -permalink: material-properties.html ---- - - -#Material 属性 ---- - -材料拥有确定不变的特性和固定的行为。了解这些特性将有助于你在一定程度上熟悉材料，这与Material Design的构想是一致的。 - -##物理特性 - - -材料具有**变化的长宽尺寸**（以dp为计）和**均匀的厚度**（1dp）。 - -**add image** [whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-aTBFT1FDVEstenM/whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png) - -要。 - -材料的高度和宽度是可变的。 - -**add image** [whatismaterial_materialproperties_physicalproperties_thickness_02_no.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Sno0Qy1FY3UtaFk/whatismaterial_materialproperties_physicalproperties_thickness_02_no.png) - -不要。 - -材料总是1dp厚。 - - -材料会形成阴影。 - -阴影是由于材料元件之间的相对高度（Z轴位置）而自然产生的。 - - - -要。 - -阴影描述材料元件之间的相对高度。 - - - -不要。 - -阴影随着材料高度的变化而产生变化。 - - -内容可被以任何形状和颜色显示在材料上。 - -内容并不会增加材料的厚度。 - - - -要。 - -材料能展示任何形状和颜色。 - -内容的展示能够独立于材料,但要被限制在材料的范围里。 - - - -要。 - -内容的行为能独立于材料的行为。 - - -材料是实物。 - - -输入事件不能穿过材料。 - -**add image** [whatismaterial_properties_physical3.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7bDZac2JGV2RUNk0/whatismaterial_properties_physical3.png) - -要。 - -输入事件只影响材料的前景。 - -**add image** [whatismaterial_properties_physical4.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7RVdsUWRKN2xlaGc/whatismaterial_properties_physical4.png) - -不要。 - -输入事件不能从材料下面穿过。 - - -多个材料元件不能同时占用相同的空间点。 - -**add image** [whatismaterial_properties_physical5.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7aVhXV0EtZ29OSU0/whatismaterial_properties_physical5.png) - -要。 - -利用不同的高度区分材料元件是防止多个材料元件同时占用相同空间点的一个方法。 - -**add image** [whatismaterial_properties_physical6.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7UFdUMnRKaW5PSXM/whatismaterial_properties_physical6.png) - -不要。 - -多个材料元件不能同时占用相同的空间点。 - - -材料不能穿过其他材料。 - -例如，一片材料不能在改变高度时穿过另一片材料。 - - - -不要。 - -材料不能穿过其他材料。 - - -##材料的变化 - - - -材料能改变形状。 - - - -材料能改变形状。 - - - -要。 - -材料仅沿着它的水平面增长和收缩。 - - -材料决不能弯曲或折叠。 - - - -不要。 - -材料决不能弯曲或折叠。 - - -几片材料能合在一起组成一片材料。 - - - -几片材料能合在一起组成一片材料。 - - -当材料被割开时，它还能自己复原。例如，你从一片材料中移除了一部分，这一片材料将再次变为一块完整的材料。 - - - -材料能被割开，还能再度变为完整。 - - -##材料的移动 - - -材料能在环境中的任何地方自动产生或消失。 - - - -材料能自动产生或消失。 - - -材料能沿任何轴移动。 - - - -材料可以沿各个轴移动。 - - -Z轴产生运动一般都是用户与材料交互而产生的。 - - - -Z轴的运动是由于用户的交互而产生的提示。 - -> 原文：[Material properties](https://www.google.com/design/spec/what-is-material/material-properties.html) 翻译：[seermole766](https://github.com/seermole766) 校对： +--- +layout: page +title: Material属性 +permalink: material-properties.html +--- + + +# Material 属性 +--- + +材料拥有确定不变的特性和固定的行为。了解这些特性将有助于你在一定程度上熟悉材料，这与Material Design的构想是一致的。 + +## 物理特性 + + +材料具有**变化的长宽尺寸**（以dp为计）和**均匀的厚度**（1dp）。 + +**add image** [whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-aTBFT1FDVEstenM/whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png) + +要。 + +材料的高度和宽度是可变的。 + +**add image** [whatismaterial_materialproperties_physicalproperties_thickness_02_no.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Sno0Qy1FY3UtaFk/whatismaterial_materialproperties_physicalproperties_thickness_02_no.png) + +不要。 + +材料总是1dp厚。 + + +材料会形成阴影。 + +阴影是由于材料元件之间的相对高度（Z轴位置）而自然产生的。 + + + +要。 + +阴影描述材料元件之间的相对高度。 + + + +不要。 + +阴影随着材料高度的变化而产生变化。 + + +内容可被以任何形状和颜色显示在材料上。 + +内容并不会增加材料的厚度。 + + + +要。 + +材料能展示任何形状和颜色。 + +内容的展示能够独立于材料,但要被限制在材料的范围里。 + + + +要。 + +内容的行为能独立于材料的行为。 + + +材料是实物。 + + +输入事件不能穿过材料。 + +**add image** [whatismaterial_properties_physical3.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7bDZac2JGV2RUNk0/whatismaterial_properties_physical3.png) + +要。 + +输入事件只影响材料的前景。 + +**add image** [whatismaterial_properties_physical4.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7RVdsUWRKN2xlaGc/whatismaterial_properties_physical4.png) + +不要。 + +输入事件不能从材料下面穿过。 + + +多个材料元件不能同时占用相同的空间点。 + +**add image** [whatismaterial_properties_physical5.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7aVhXV0EtZ29OSU0/whatismaterial_properties_physical5.png) + +要。 + +利用不同的高度区分材料元件是防止多个材料元件同时占用相同空间点的一个方法。 + +**add image** [whatismaterial_properties_physical6.png](https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7UFdUMnRKaW5PSXM/whatismaterial_properties_physical6.png) + +不要。 + +多个材料元件不能同时占用相同的空间点。 + + +材料不能穿过其他材料。 + +例如，一片材料不能在改变高度时穿过另一片材料。 + + + +不要。 + +材料不能穿过其他材料。 + + +## 材料的变化 + + + +材料能改变形状。 + + + +材料能改变形状。 + + + +要。 + +材料仅沿着它的水平面增长和收缩。 + + +材料决不能弯曲或折叠。 + + + +不要。 + +材料决不能弯曲或折叠。 + + +几片材料能合在一起组成一片材料。 + + + +几片材料能合在一起组成一片材料。 + + +当材料被割开时，它还能自己复原。例如，你从一片材料中移除了一部分，这一片材料将再次变为一块完整的材料。 + + + +材料能被割开，还能再度变为完整。 + + +## 材料的移动 + + +材料能在环境中的任何地方自动产生或消失。 + + + +材料能自动产生或消失。 + + +材料能沿任何轴移动。 + + + +材料可以沿各个轴移动。 + + +Z轴产生运动一般都是用户与材料交互而产生的。 + + + +Z轴的运动是由于用户的交互而产生的提示。 + +> 原文：[Material properties](https://www.google.com/design/spec/what-is-material/material-properties.html) 翻译：[seermole766](https://github.com/seermole766) 校对：