按钮标准符号

iOS和Android规范解析——按钮

今天详细介绍的是按钮。按钮是设计方案全过程中经常用到的一种控件。我们来讨论一下Google的材料设计和iPhone的设计标准到底是怎么回事。

MaterialDesignGuidelines

按钮告诉客户按下按钮后要做什么(如果怀疑是空，MD一开始就是这么说的，好生气)。我们可以把按钮理解为实际 *** 作的触发原理。共有五个按键:平键、凸键、悬浮键、底部永久键、下拉菜单键和电源开关键。下面就一个一个介绍吧。

扁平按钮

平面按钮是使用文本作为按钮，如下图所示:

文本按钮示例(图中的亮红色虚线是文本按钮)

个人行为:当平面按钮被点击时，按钮不容易出现冉冉上升的姿态，但它的情况会有从中间向四周扩展颜色的动画效果，如下图第三个动画所示:

平面按钮的各种情况(动漫)

左:平面按钮的各种情况(静态数据)；右图:按住平面按钮时的情况示例

用法:扁平按钮一般用于警告框。强烈建议对齐右端。一般来说，可 *** 作性按钮放在右侧，撤销按钮放在左侧。如果用于xyk，扁平按钮一般在左端对齐，以增强按钮的暴露度。然而，xyk有许多不同的风格，室内设计师可以根据内容和上下文来分配扁平按钮。只要保证xyk里的平面按键在同一款产品里是统一的就可以了。

突起按钮

因为投影有一定的长宽比，视觉效果的相对性吸引注意力，所以可以起到关注按钮本身的效果。

当网页中的按钮必须注意时，建议应用突出按钮，如下图所示:

个人行为:当你点击凸出的按钮时，按钮会由中间向四周填充颜色，按钮本身会在冉冉凸起一定距离作为反馈:

突出按钮的各种情况(动漫)

按钮的各种情况(静态数据)

飘浮按钮

至于悬浮按钮，MD用了独立章节来讲这个按钮。因为内容比较多，我可以在下一篇文章详细讲解。

底端长驻按钮

如果您的应用要求客户能够随时随地进行实际 *** 作，那么请考虑使用浮动按钮或底部永久按钮。

底部常驻按钮示例

下拉菜单按钮

下拉菜单按钮允许客户从一系列选项中选择一个选项。按钮的默认设置将显示当前选择的选项和一个下拉菜单。

下拉菜单按钮示例

当客户点击下拉菜单按钮时，按钮上方会d出选项，挡住下拉菜单按钮，如下图所示:

使用下拉菜单选择选项的动画提示

必须注意的是，下拉菜单中的选项可以设计为允许更改，室内设计师可以根据需要决定是否必须更改功能。如下图实际所示:

选择其值可以更改的下拉菜单按钮。

电源开关按钮

电源开关按钮和电源开关一样，有两种情况:一旦点击，会从情况A变为情况B；再次点选，然后从B变成a。最常用的按钮，例如「最爱」和「最爱」:

电源开关按钮示例

iOSHumanInterfaceGuidelines

iPhone标准中对按键的详细介绍就简单多了。重点是详细介绍ios系统呈现的三种按钮:系统软件按钮、信息按钮、电话联系按钮。

系统软件按钮

说白了，系统软件按钮其实和MD里的平面按钮一样:用一个字当按钮。

系统按钮的示例

关于系统软件按钮，iPhone提出了以下三个注意要点:

应用形容词。说明了实际 *** 作的形容词，能够说明这个词是可实际 *** 作的，而且表明了点击以后会有哪些实际效果。尽可能使动词简洁明了。只在必需的状况下，提升外框或是背景颜色。默认设置状况下，系统软件按钮是沒有外框和背景颜色的。但在一些状况下，假如必须注重该按钮，则能够提升外框和背景颜色。信息按钮

信息非常好理解，就是点击之后会出现关于它的详细信息，通常是各种形式。

信息按钮示例

有一点必须注意:如果基于点击整行出现详细信息，请不要单独使用信息按钮，否则容易造成误解。

加上手机联系人按钮

再加上手机联系人真的没什么好说的，就是点击按钮后会出现手机联系人的网页，通常是多窗体主视图的形状。(iPhone关于按键的指示也很没诚意，站起来。)

添加电话联系人按钮。

上面详细介绍了MD和iOS设计标准中的高频应用button的控制。值得一提的是，MD的按钮动画特效还是各有特色的。在应用上稍加应用就会有显著的MD设计风格。每个人在做设计的时候都有尝试的机会。

让大家更深入的了解，热烈欢迎留言板讨论。

#有关创作者#

新设计青年，微信公众平台:新设计青年。爱奇艺视频高级网页设计师。一个法国海龟，曾就职于腾讯官微生活、网易游戏、平安普惠等企业。

未经批准，严禁截留。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/779443.html