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)

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

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

切换按钮需要:

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

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

建议使用以下组合:

·可以都不选

·只能选一个

·可以选多个

图标切换

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343