所有分类
  • 所有分类
  • 未分类
Material Design 设计语言(四)按钮

Material Design 设计语言(四)按钮

  按钮(Button) 一、按钮(Buttons) 按钮允许用户只需轻按一下即可进行操作并做出选择。 按钮传达用户可以采取的操作。它们通常被用在整个UI中,例如: 对话框 模态窗口 列表 卡片 工具栏 原则 ...

  按钮(Button)

一、按钮(Buttons)

按钮允许用户只需轻按一下即可进行操作并做出选择。


按钮传达用户可以采取的操作。它们通常被用在整个UI中,例如:


  • 对话框

  • 模态窗口

  • 列表

  • 卡片

  • 工具栏


原则


1、易读性


按钮应该明确表明可以触发一个动作。

2、可查找


按钮应该很容易在其他元素中找到。

3、清晰


按钮的操作和状态应该清晰。


类型

             

1、文本按钮(重要性低)


文本按钮通常用于不太重要的操作。


2、线框按钮(重要性中)


由于带有一个底框,线框按钮用于比文本按钮强调性更强。

3、填充按钮(重要性高)


填充按钮强调性更强,因为使用了颜色填充和阴影。


4、切换按钮


切换按钮通过布局和间距,对一组操作进行分组。它们的使用频率低于其他3种按钮类型。


层级

             

1、一个突出的按钮


一个布局应包含一个突出显示的按钮,以清楚地衬托出其他按钮在层级中的重要性较低。这个高度强调的按钮最引人注意。


2、其他按钮


在APP的布局中,可以同时显示多个按钮,因此高度强调的按钮可以伴随中等和低强调按钮,这些按钮常用来执行不太重要的操作。

 

使用多个按钮时,请确保一个按钮的可用状态,不会看起来像另一个按钮的禁用状态。

位置


同一个页面中,使用多种按钮类型可用于表示不同的强调程度。

               

以上布局使用了:


  1. 重要性最高的悬浮操作按钮

  2. 重要性较高的紫色填充按钮

  3. 重要性低的文本按钮

二、悬浮操作按钮(FAB)


悬浮操作按钮(FAB)表示屏幕的主要操作。

               

悬浮操作按钮(FAB)在屏幕上执行主要或最常见的操作。它出现在所有屏幕内容的最前面,通常是一个圆形,中间有一个图标。


FAB有三种类型:常规、迷你和扩展。

        

             

原则


1、主要的


FAB表示屏幕上的主要操作。


2、建设性


FAB应执行建设性的操作(例如创建、分享或探索)。


3、关联性


FAB应与其页面内容相关。


类型


1、常规 FAB


当屏幕宽度大于460dp时,默认常规FAB(56x56dp)。


2、迷你 FAB


迷你FAB应该用在较小的屏幕上。当屏幕宽度为460dp或更小时,常规 FAB(56dp)的容器则会转换为迷你FAB(40dp)。

 

迷你FAB还可用于与其他屏幕元素建立视觉连续性。

                   

              

3、扩展 FAB


扩展FAB更宽,并包含文本标签,图标可选。

             

位置


在移动设备上,扩展FAB应放置在右下角或底部中心。

               

注:避免在底部应用栏上方使用扩展FAB,因为这样会占用大量屏幕空间。如果它们必须是一对组合,则扩展FAB应在滚动时折叠。


用法


悬浮操作按钮(FAB)可以在当前页面上触发操作,也可以执行跳转到新页面的操作。

 

FAB执行重要的建设性操作,例如:


  • 创建

  • 收藏

  • 分享

  • 启动进程


避免使用FAB执行不重要或破坏性的操作,例如:


  • 存档或删除

  • 警报或错误

  • 限制性的任务,如截断文本

调整音量或字体颜色等的控件更适合用在工具栏。

       

             

快速展开


按下FAB后,以快速展开的形式显示3~6个相关动作。

 

若超过6个操作,则应使用其他操作来呈现它们而不是 FAB。


1、按下后,FAB 发出相关动作

        

            

2、按下后,FAB 转换为包含相关操作的菜单(仅限Android)


在Android上按下后,FAB可以转换为包含相关操作的菜单。黑色蒙版表示暂时禁用了操作菜单之外的功能。菜单始终显示在屏幕上,直到触发操作或点击黑色蒙版。 

     

– 推 荐 阅 读 


Material Design 设计语言(三)提示

Material Design 设计语言(二)栏

Material Design 设计语言(一)概述

iOS平台设计规范-精简总结篇


本文来自:宛苏    作者:宛苏

原文链接:http://www.uiya.cn/16066.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?