Material Design设计规范(三)

素颜马尾好姑娘i 2023-10-11 12:13 44阅读 0赞

## Material Design设计规范(三) ##

### 悬浮按钮(FAB)设计规范及实战案例欣赏 ###

悬浮按钮英文Floating Action Button，简称FAB,是手机移动端网页设计及APP产品设计中，最为灵动和热门辅助工具之一。

![在这里插入图片描述][20190923141504797.gif]

#### 悬浮按钮的使用原则 ####

*A、选择适当的悬浮按钮尺寸*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]

> 默认的尺寸一般为56*56dp，迷你版的尺寸为40*40dp。界面宽度低于460dp时，需要从默认尺寸（56dp）调整至迷你尺寸（40dp）。

*B、悬浮按钮只承载正向操作*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]

> 由于悬浮按钮通常承载的是主要的、有代表性的操作，通常它应该是个积极正向的交互，比如创建、分享、探索等。

> 唯一的悬浮按钮不应该执行破坏性的操作，比如删除、归档。

> 它不应该是非特定的操作，或者是不完整的交互，比如剪切和粘贴是一组组合交互，它们应该存在于菜单栏当中，而非悬浮按钮中。

*C、大尺寸屏幕上的悬浮按钮*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]

> 悬浮按钮在大尺寸的屏幕上可以放置在扩展的APP栏、工具栏或者结构性的元素（前提不阻碍其他元素）和表单的边缘上。

> 需要注意的是，每个页面只能出现一个悬浮按钮，也不要将悬浮按钮与一个页面上的所有元素产生关联。

> 悬浮按钮本身显眼抓人眼球，滥用悬浮按钮会分散用户的注意力。

#### 悬浮按钮的用途 ####

**触发器**

悬浮按钮可以简单地触发某个动作或在某处导航，常用于触发功能、菜单或导航。

![在这里插入图片描述][20190923141627703.gif]

**工具栏**

悬浮按钮可以在进行点按或滚动操作时变换成工具栏。

![在这里插入图片描述][20190923141643147.gif]  
![在这里插入图片描述][20190923141655323.gif]  
**界面变形的枢纽**

![在这里插入图片描述][20190923141707706.gif]

**触发和扩展一系列操作**

![在这里插入图片描述][20190923141721891.gif]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 5]

> 作为一般规则，这组拓展出来的按钮不应少于3个，不能多于6个，否则违反了作为悬浮按钮的快速、高效的原则。

## 案例欣赏 ##

案例1：Navigation at the bottom

![在这里插入图片描述][20190923141747316.gif]

> 作品功能和UI贴切地结合是整体变得出彩，设计中，下拉菜单占据了屏幕的一半，模糊了背景上的元素，突出了表单的重要性。

> 菜单设计得非常简练，所有选项都按照垂直顺序排列，大量的留白保证了文字处于主体地位。

> 流动的切换动画细节增强了呼吸感，给用户带来了感性细腻的操作反馈。

案例2：FAB for User Engagement

![在这里插入图片描述][20190923141800850.gif]

> 这一款FAB显得非常有侵略性。 激活之后没有一点的犹豫，垄断了整个屏幕，占据了主导地位。

> 因为空间的充裕，设计成功地将所有重要环节都包含在内，图标美丽直观，体验强烈而宽敞。

> 在UI方面作者巧妙地设置焦点，带来了愉悦的视觉观感。

案例3：Filter Menu

![在这里插入图片描述][20190923141811711.gif]

> 这款作品把FAB作为一种枢纽，使搜索过程更加高效和愉快，为用户提供了更灵活的使用体验。

> 必要的过滤器选项排列在一个弧形当中，每一个都有一款精心设计的圆形图标。菜单面板也具有非常像按钮本身的圆形形状。

[20190923141504797.gif]: https://img-blog.csdnimg.cn/20190923141504797.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923141516845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923141531355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019092314154117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923141601839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019092314161176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[20190923141627703.gif]: https://img-blog.csdnimg.cn/20190923141627703.gif
[20190923141643147.gif]: https://img-blog.csdnimg.cn/20190923141643147.gif
[20190923141655323.gif]: https://img-blog.csdnimg.cn/20190923141655323.gif
[20190923141707706.gif]: https://img-blog.csdnimg.cn/20190923141707706.gif
[20190923141721891.gif]: https://img-blog.csdnimg.cn/20190923141721891.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190923141732591.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[20190923141747316.gif]: https://img-blog.csdnimg.cn/20190923141747316.gif
[20190923141800850.gif]: https://img-blog.csdnimg.cn/20190923141800850.gif
[20190923141811711.gif]: https://img-blog.csdnimg.cn/20190923141811711.gif