起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > Android设计规范Material Design-Components(2按钮)

Android设计规范Material Design-Components(2按钮)

时间:2016-05-19 09:40:00来源:UI设计网 作者:起航学习网 已有: 名学员访问该课程

  快捷搜索:经验APP设计APP教程


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

前言: 9月5日,快中秋节了~~好期待呀~~~主要是期待放假~~可是我们只放两天~~好吧,废话不说了~~今天主要更的是部件的按钮

9月5日,快中秋节了~~好期待呀~~~主要是期待放假~~可是我们只放两天~~好吧,废话不说了~~今天主要更的是部件的按钮,按钮是很重要的,它是实现人机交互的重要部件,所以对于UI交互来说,按钮绝对是缺一不可的~~~尽管Material Design是一种新的希冀的设计语言,但是这些内容,对于现在的APP来讲,是可以借鉴和学习的~~

按钮

按钮(Buttons)

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

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

颜色饱满的图标应当是功能性的,尽量避免把他们作为纯粹装饰用的元素。

按钮的设计应当和应用的颜色主题保持一致。

用法

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn
悬浮响应按钮

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn
浮动按钮

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn
扁平按钮

主按钮

按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

首先,审视一遍你的按钮功能: 它是不是非常重要而且应用广泛到需要用上悬浮响应按钮?

然后,基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮。而且应该避免过多的层叠。

最后,检查你的布局。 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下(比如需要强调一个浮起的效果)才应该混合使用多种类型的按钮。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

对话框中的按钮

对话框中使用扁平按钮作为主要按钮类型以避免过多的层次叠加。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

按钮内边距

根据特定的布局来选择使用扁平按钮或者浮动按钮。对于扁平按钮,应该在内部四周留出足够的空间(内边距)以使按钮清晰可见。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

底部固定按钮

如果需要一个对用户持续可见的功能按钮,应该首先考虑使用悬浮响应按钮。如果需要一个非主要、但是能快速定位到的按钮,则可以使用底部固定按钮。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

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

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

底部固定按钮也可以用在内容可拉动的对话框中,前提是要加上divider。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

主按钮

悬浮响应按钮

悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮,这些动作通常和变换、启动、以及它本身的转换锚点相关。

更多关于悬浮响应按钮的信息, 请参考 模式:促进的动作(Promoted Actions)。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸。 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

浮动按钮

浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

正确使用浮动按钮。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn
不要
按钮不明显。

扁平按钮

扁平按钮一般用于对话框或者工具栏, 可避免页面上过多无意义的层叠。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

正确使用扁平按钮。

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn
不要
层次感太重。

扁平和浮动按钮的状态

按钮状态模拟

浮动按钮看起来像一张放在页面上的纸片,点击后会浮起来并表现出色彩。

扁平按钮会一直保持和页面贴合的状态,点击后会填充颜色。

墨水效果会跟着焦点的改变从一个按钮转换到另一个按钮。聚焦状态的动画会表现出正常状态和点击状态间来回切换的过渡效果。

模拟按钮状态的时候, 可以使用图形轮换来表现动画。注意聚焦状态会一直处于动画的状态。 (下面这些图并没有显示出真实的聚焦状态。)

Android设计规范Material Design-Components(2按钮)_qh.itpxw.cn

非常感谢这些辛苦翻译的小伙伴!!

原文:Buttons 翻译:7heaven 校对:阿九(Siton)

文章转自:http://design.1sters.com/

=========================关于起航学习网=========================

qh.itpxw.cn 起航学习网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

起航学习网:qh.itpxw.cn  海量APP截图,让你灵感爆发!

转载请注明:起航学习网 » Android设计规范Material Design-Components(2按钮)

文章出自:http://qh.itpxw.cn/peixun/ui/201613762.html

文章标题:Android设计规范Material Design-Components(2按钮)



免责声明:本站文章均由入驻起航学习网的会员所发或者网络转载,所述观点仅代表作者本人,不代表起航学习网立场。如有侵权或者其他问题,请联系举报,必删。侵权投诉


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

(责任编辑:深圳学历教育网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------