Material Design 组件 （五）

1、底部导航

底部导航主要用于移动设备。在平板电脑和PC端一般使用侧面导航。

底部导航一般出现三到五个选项，多或少都不太好。图标和字体颜色、大小更具实际应用而定。

MD推荐尺寸：

---

2、底部动作条

底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

• 底部动作条使用时的一些规范，

  1、适合三个及以上的操作需要用户选择的，两个考虑使用菜单或对话框实现。

  2、作为其他应用入口的话，在其他应用中可以深入多个页面，但是不应该提供在其他应用中的返回操作。就像你在一个应用中调用支付宝，你输入金额、付款、成功等等多个界面，但是左上角都只有一个“X”取消的键，用来返回之前的应用。
  

  3、底部动作条（弹出框）的高度应该符合内容的高度，不能出现大量空白，也不能覆盖到appBar。

  
  

  4、底部动作条，的item基本都是icon+text，有需要的时候可以使用分隔符进行逻辑分组。
  

  5、底部动作条，列表或网格布局的建议规范。

  
  
  
  

---

3、按钮

按钮由文字和/或图标组成，文字及图标必须能让人轻易地和点击后展示的内容联系起来。

3.1、按钮类型

主要的按钮有三种:

• 悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的圆形按钮。
• 浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。
• 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。

---

3.2、按钮的使用

按钮的使用应该结合上下文。

1、在dialog中使用扁平按钮。

2、如果是内嵌在文章或页面中的话，可以使用浮动的或扁平的按钮。

3、如果需要一个对用户持续可见的功能按钮，可以使用悬浮响应按钮或者底部固定按钮。

---

3.3、按钮的样式

1、使用颜色区分按钮文本

2、为了保障特殊人群的使用，按钮的高度为36dp，并提供最小高度为48dp的可触及的区域。

3、按钮应该有2dp的圆角

---

3.4、扁平的按钮

和上下文的内容处于同一Z轴高度，所以他没有单独的阴影效果，但是它有点击的水波纹效果。

---

3.5、凸起的按钮

凸起的按钮为大多数平面布局提升维度，显得更立体。他们的凸出可以在平面的布局中起到强调的作用。

<—-翻译—->
图1：凸起的按钮比扁平按钮更突出。
图2：不要在用户界面中使用平面按钮，这些按钮很难看到。

---

3.6、持久性页脚按钮

如果您的应用程序要求的行为是持久的和随时提供给用户的，可以考虑使用浮动操作按钮或持续性页脚按钮。

1、不可在底部固定按钮的区域内使用浮动按钮。

2、在dialog中使用的时候，如果dialog中的内容是可以滑动的则需要添加分割线

---

3.7、下拉按钮

在MD中，下拉按钮的正常状态、获取焦点、点击、打开、选择、关闭、回复正常状态，这是一个连贯的渐变过程。如下图所示：

---

3.8、开关按钮

这是一类只有两种状态的按钮，比如收藏和取消收藏，checkbox的选中和取消选择、switchButton的开和关。常见的是使用图标切换来实现：

---

4、浮动操作按钮 Floating Action Button

浮动操作按钮表示应用程序中的主要操作，并不是所有的地方都要用到，需要结合具体情况。

形状像浮动在UI上方的圆圈图标，它会在焦点上变色，并在选择时提升。 按下时，可能会包含更多的相关操作。

4.1、浮动操作按钮的一般尺寸

默认尺寸(56dp)：适用于多数应用情况。
迷你尺寸(40dp)：仅用于创建与其他屏幕元素视觉的连续性

---

4.2、浮动操作按钮的使用规范

1、一个界面一般只能使用一个浮动操作按钮，代表最主要、最常见的操作。

但是也有例外，下图使用了两个浮动动作按钮，回到原点和选择出行路线，因为他们同样重要且单独执行。

---

2、浮动操作按钮应该表示一些积极动作，如“创建”，“收藏”，“共享”，“导航”和“浏览”等。

---

3、浮动操作按钮，不应该用来表示一些有轻微破坏性的操作，比如以下几种：

存档或删除
非特异性操作
警报或错误
限制性任务，如剪切文本
应该放在工具栏中的操作，如音量控制或改变字体颜色

浮动动作按钮不包含应用程序栏图标或状态栏通知。 不要在浮动动作按钮上层叠徽章或其他元素。

---

4.3、浮动操作按钮的行为

鉴于浮动操作按钮的特性，他可能有不同与一般UI的动画变换。

---

4.4、浮动操作按钮的过渡行为

常见的转换包括触发器，工具栏，快速拨号和变形。浮动动作按钮设计灵活。 可以尝试找寻最适合应用和按钮的过渡行为。

---

4.5、浮动操作按钮的一些规范

1、如果浮动操作按钮，要展现选择操作菜单，那么选项应该在三个到六个，包括其本身。

2、不要在浮动操作按钮中放置外链按钮。

3、浮动操作按钮不应该转变为不相关的操作。

---

5、卡片

卡片式布局使用很简单，就是默认2dp的圆角，2dp的静态阴影高度，选中状态为8dp的阴影高度；但是重要的是在什么场景下使用。

卡片式布局一般用在显示内容的时候。但是在使用的时候有诸多需要注意的地方。

• 1、内容列表

上图，对于这些只有简单操作且内容类似的列表，应该使用图左的列表展示，而不应该使用图右的卡片列表，因为使用卡片会让用户分散注意力，不能促使用户快速浏览，容易造成用户的困惑。

---

• 2、图片库

上图，网格布局展示图片清晰、轻便；对于图片库这种的均匀内容不需要卡片。

---

• 3、可扩展内容的卡片

上图，可以扩展卡片以显示更多内容，但是在移动设备上，不要将可滚动空间放置在卡片内，因为它可能会导致内外两条滚动条

---

• 4、卡片展示信息

上图， 卡片作为详情的入口，点击跳转到内容详情；但是不要在卡片上添加无关内容，也不要在卡片上使用文本内容的内部链接。

---

补充说明：鉴于Material Design 组件内容太多，我需要再写一到两篇blog来整理。这一篇先到这里，有可能再更新。