iOS和Android类型理会——按钮

本日先容的是按钮。按钮是计划的进程中，常常行使的一种控件。我们来看看Google的Material Design和苹果的计划类型都是怎么说的。

按钮奉告用户按下按钮后将举办的操纵（疑似空话，，MD开篇就是这一句，好气哦）。我们可以把按钮领略为一个操纵的触发器。按钮首要有以下五种：扁平按钮，凸起按钮，悬浮按钮，底部常驻按钮，下拉菜单按钮，开关按钮。下面我们来逐一先容。

扁平按钮就是把笔墨用作按钮，如下图：

笔墨按钮示例（图中赤色虚线即为笔墨按钮）

举动：在点击扁平按钮的时辰，按钮不会有升起的举措，可是它的配景会有一个从中间向附近扩展颜色的动效，如下图的第三个动画所示：

扁平按钮的各类状态（动画）

左：扁平按钮的各类状态（静态）；右：按下扁平按钮时的状态示例

用法：扁平按钮一样平常用在告诫框中，保举居右对齐。一样平常右边放操纵性的按钮，左边放打消按钮。假如用在卡片中，扁平按钮一样平常居左对齐，以增进按钮的曝光。不外，卡片有许多种差异的样式，计划师可以按照内容和上下文来布置扁平按钮的位置。只要担保在统一个产物中，卡片内的扁平按钮的位置同一就可以了。

凸起按钮因为具有必然的高度，视觉上相对抢眼，以是可以起到夸大按钮自己的浸染。

当页面中的按钮必要夸大的时辰，提议行使凸起按钮，如下图：

举动：当点击凸起按钮时，按钮的配景会从中间向附近添补上颜色，同时按钮自己会升起一段间隔作为反馈：

凸起按钮的各类状态（动画）

凸起按钮的各类状态（静态）

关于悬浮按钮，MD用了单唯一节专门讲这个按钮，因为内容较多，我会在下篇文章具体先容。

假如你的应用必要用户随时可以举办某个操纵，那么请思量行使悬浮按钮可能底部常驻按钮。

底部常驻按钮示例

下拉菜单按钮应承用户从一系列选项中选择一个选项。按钮默认会展示当前选中的选项以及一个下拉箭头。

下拉菜单按钮示例

当用户点击下拉菜单按钮，选项会在按钮的正上方弹出，盖住下拉菜单按钮，如下图所示：

行使下拉菜单选择选项的动画表示

必要留意的是，下拉菜单的选项是可以计划成应承修改的，计划师可以按照必要抉择是否必要可修改的属性。详细如下图所示：

选项值可修改的下拉菜单按钮

开关按钮，就像开关一样有两种状态：点击一下，它就会从状态A切换成状态B；再次点击，又从B切换成A。最常见的好比喜好、保藏按钮：

开关按钮示例

苹果的类型对付按钮的先容要大略的多，首要先容了苹果体系提供的三种按钮：体系按钮、信息按钮和添加接洽人按钮。

所谓的体系按钮，着实就跟MD中的扁平按钮一样：行使一个词做为一个按钮。

体系按钮示例

关于体系按钮，苹果给出了以下三个留意的要点：

信息按钮很好领略，就是点击之后会呈现相干的具体信息，一样平常以模态的情势呈现。

信息按钮示例

有一点必要出格留意：假如是通过点击整行来呈现具体信息，那么请不要同时行使信息按钮，不然轻易引起误解。

添加接洽人其实没什么好说的，就是点击按钮之后会呈现接洽人的页面，一样平常也是以模态视图的形态呈现。（苹果关于按钮的声名也是很没有诚意呢，摊手。）

添加接洽人按钮

以上先容了MD和iOS计划类型中按钮这个高频行使的控件。值得一提的是，MD的按钮动效照旧很有自家特色的，在应用中轻微一行使，就会有明明的MD气魄威风凛凛。各人在做计划时，有机遇可以实行一下。

接头使我们熟悉越发深刻，接待留言接头。

新计划青年，微信公家号：新计划青年。爱奇艺高级交互计划师。德国海龟一枚，曾任职于腾讯微糊口、网易、宜信等公司。

本文未经容许，榨取转载。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!