Material Design — 按钮( Buttons)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

按钮( Buttons)

Material Design链接:按钮

Button

按钮能传达用户触摸它们时发生的操作。

Buttons被按时被触发墨水扩散效果。 他们可能会显示文字,图像或两者都有。 平面按钮和浮动按钮是最常用的类型。

其他按钮类型包括:

·底部固定按钮(Persistent footer buttons)是可用于屏幕底部或提示框的平面按钮。

·下拉按钮(Dropdown buttons)显示多个选择。

·切换按钮(Toggle buttons)将选项汇聚在一起。 图标切换允许选择或取消选择单个选项。

标准按钮

平面按钮Flat buttons

平面按钮是只有文本的按钮

可用在dialogs, toolbars和inline

不会有抬起的效果,但是点击时会填充颜色

浮动按钮 Raised buttons

浮动的按钮是矩形的按钮。

它们可以内联使用。

他们被点击时会抬起并触发墨水扩散效果。

海拔

平面按钮Flat buttons: 0dp

悬浮按钮 buttons: 2dp


按钮类型

三种标准按钮:

悬浮响应按钮(Floating action button): 点击后会产生浮起与墨水扩散效果的圆形按钮。

浮动按钮(Raised button):点击后会产生浮起与墨水扩散效果的常见的方形按钮,。

扁平按钮(Flat button): 点击后产生墨水扩散效果,但是没有浮起的效果。

三种标准按钮

三种标准按钮实例

选择按钮样式

选择按钮样式取决于按钮的优先级,屏幕上的组件数量和屏幕布局。

功能:非常重要+无处不在=悬浮响应按钮(Floating action button)

海拔:选择浮动还是平面按钮,具体取决于它所在的容器以及屏幕上有多少z轴空间图层。 屏幕上不应有太多层。

布局:每个容器主要使用一种类型的按钮。 只有在有充分理由的情况下才能使用混合按钮类型(比如需要强调一个浮起的效果)。


用法

按钮类型

按钮的适用类型应该与其所出现的环境相适应。

推荐的按钮放置

标准提示框

屏幕上的按钮对齐方式:右边

将肯定性按钮放在右侧,否定性的放在左边。

表单

屏幕上的按钮对齐:左边

将肯定性按钮放在左侧,否定性的放在右边。

卡片

按钮最好放在卡的左侧以增加其可见度。 但是,由于卡片具有灵活的布局,因此可以将按钮放置在适合内容和上下文的位置,同时保持产品内的一致性。

非标准的提示框和模态窗口

非标准提示框和模态窗口中的按钮放置取决于它们包含内容的复杂程度。

对于内容相对简单的提示框,建议将按钮放在对话框的右侧,肯定性按钮位于否定性按钮的右侧。

对于冗长或复杂的表单,建议将按钮放在表单的左侧,肯定性按钮位于否定性按钮的左侧。


样式

版式设计

按钮文本应该用有大写的语言大写。 对于其他语言,平面按钮上的彩色文本将它们与普通文本区分开来。

无障碍

为了确保残疾人的可用性,需要按钮的高度为36dp,热区的最低高度为48dp。

按钮样式

圆角半径

按钮应该有一个2dp的圆角半径。

密度

当鼠标和键盘是主要的输入方法时,可以稍微减少按钮尺寸以适应密集的UI界面。


扁平按钮(Flat button)

用法

平面按钮印在材料上。 不会浮起,但点击时会填充颜色。

可以在以下位置使用扁平按钮:

·在 toolbars上

·在提示框中,将按钮操作与对话框内容统一起来

·Inline, with padding,因此用户可以轻松找到它们

左:提示框中    右:将用户分心降到最低


行为

点击时的动画效果可以去网站观看


浮动按钮(Raised button)

用法

浮动按钮增加了大部分平面布局的海拔。 强调在拥挤的或者较大的空间的功能。

左:页面内容多    右:为内容分界

背景比较嘈杂的时候使用浮动按钮

浮动按钮就像一块放在另一张纸上的材料 - 点击时浮起并填充颜色。

按钮海拔

浮动按钮的默认海拔为2dp。

在桌面上,浮动按钮可以在悬停时获得此海拔。


底部固定按钮(Persistent footer buttons)

如果app要求操作持续存在且随时可供用户使用,请考虑使用悬浮响应按钮(Floating action button)或底部固定按钮(Persistent footer buttons)。

请勿在固定按钮区域使用浮动按钮。

添加分隔后,底部固定按钮可用于滚动的提示框。


下拉按钮(Dropdown buttons)

移动端下拉按钮

下拉按钮

下拉按钮可在多个选项中进行选择。 该按钮显示当前状态和向下箭头。 例如,可用状态可以显示为文字,颜色或icon的列表。

当用户与按钮交互时,Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。

在下拉菜单中滚动的方式与Menus滚动的方式相同。

一般的下拉按钮

溢出下拉菜单按钮

这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。点击菜单中的任意一个选项将会引导到对应的设置页面。

分段式下拉菜单按钮

分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应的动作。点击下拉箭头则会弹出所有状态菜单; 点击任意一个状态会改变当前的状态。

可编辑分段式下拉菜单按钮

可编辑分段式下拉菜单按钮的当前状态位置是可编辑的(例如用来选择文字大小的下拉菜单)。 点击当前状态位置会触发相应的动作并且当前状态会变成可编辑。点击下拉箭头会显示所有状态。

桌面下拉

桌面应用栏规格


切换按钮(Toggle buttons)

切换按钮可用于分组的相关选项。 安排布局和间距来表达出切换按钮是组的一部分。

聚焦和点击状态可能会强化切换按钮是一个组的一部分。 例如,当聚焦一个切换按钮时,焦点可能会同时显示组中的其他切换按钮。

切换按钮需要:

·组中至少有三个切换按钮

·用文字,图标或两者标记按钮

建议使用以下组合:

·可以都不选

·只能选一个

·可以选多个

图标切换

图标适用于切换按钮,允许选择或取消选择单个选项,例如向项目添加或移除星标。

他们最好位于应用栏,工具栏,动作按钮或切换。

图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

3011
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3379
来自专栏程序员的知识天地

利用HTML5,无JS实现各种交互效果

<details> 标签在Chrome,Firefox等浏览器下默认是有展开收起行为的,例如下面HTML:

9182
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

2917
来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2450
来自专栏熊二哥

Html与CSS快速入门03-CSS基础应用

这部分是html细节知识的学习。 ? ? 边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面,通常来说,会使用margin(外部)...

2528
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

2085
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

1948
来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2759
来自专栏数据小魔方

创意饼图的制作技巧——图标填充饼图!

今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

38710

扫码关注云+社区

领取腾讯云代金券