按钮的定义
就是网页或应用中用来承载用户操作的元件。用来承载用户某一个具体的命令（操作），用户在按下Button后程序系统执行一系列的行为。
通常在视觉上会着重表现。
按钮是一个普通的必不可少的，几乎我们每天都要接触无数次的设计元件，同时在Web或者App上创造流畅的用户体验必不可少。
按钮的尺寸
点击Button的是鼠标或手指。
MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间，指尖平均为8-10mm，所以最佳的热区尺寸应设定为10mmX10mm。
按钮最佳尺寸
按钮的形状
通常是直角矩形或者圆角矩形。直角形的按钮向我们传递一种正式严肃的感觉。圆角能够加强信息的传递，并且能够将人的视线集中在元素的中心位置。其他形状，如圆形，三角形等。
直角矩形按钮
圆角矩形按钮
圆形按钮
按钮的颜色
按钮的颜色有千万种，可能考虑到界面的设计风格；考虑到对用户的心理暗示；考虑到要传达给用户的理念会选择合适的颜色。比如大众默认的红色按钮传达有警告、不可以的意思，同时也最能引起注意的颜色；蓝色则传达着可行，畅通之意；灰色则传达着不可用，不可点击之意，如灰置按钮就是这样应用的。
红色按钮
蓝色按钮
灰置按钮
按钮的样式
1.立体按钮
立体按钮样式相较于扁平按钮设计增加了一维空间，在复杂或宽裕的空间中强调功能，立体按钮比扁平按钮更加显眼。
立体按钮
2.扁平按钮
扁平的按钮不突出，在点击时会有背景颜色，不打扰内容。
扁平按钮
3.开关按钮
用同一个Button表示开启和关闭，节省空间。
开关按钮
4.幽灵按钮
透明背景，与页面文字一样颜色，只加上边框，通常基于品牌或设计的考虑。
幽灵按钮
5.悬浮按钮
悬浮按钮用于驱动动作时使用。当然在其它场景使用并不局限于单一形状，可以是图片文字结合，也可以是icon单独构成，悬浮于页面中。
悬浮按钮也是谷歌设计的重要部分，它是一个圆形的材质按钮，点按之后按钮浮起并表现墨水晕开的效果，利用本身的圆形形状悬浮于界面之上与其他元素进行区分，加上运动动作，包括渐变，展开和转化为单一定点。
悬浮按钮
按钮的状态
按钮有可用不可用两种状态，以及在交互上默认状态、鼠标或悬浮时的状态和按下时的状态。
之前有提到灰置按钮，就是不可用的。如下图的应用按钮，现在这种情况是不可用，不能点击的。
不能点击
只有在你做出相应的改动时，这个按钮才会被唤醒，变成可用可点击的状态。
可点击状态
在Web中按钮的默认状态下；
默认
鼠标悬停时是这样；
悬停
按下时是这样的。
按下
在界面设计按钮时都要考虑到这个交互问题，承现三种不同状态。
按钮的构成形式
按钮可以分为纯文字的、纯icon的，纯图片的以及这三种元素各自相结合的，最常见的就是纯文字形、纯icon形和文字icon结合形，纯文字的太常见，就不用再例图说明了。
前5个按钮就是纯icon，后2个按钮就是icon与文字相结合的
按钮的使用形式
单个按钮，最常见的。
单个按钮
按钮组，一般成组出现，共用边框，在视觉上成一个整体长条形状。末尾可能有更多的按钮隐藏，通过下拉箭头表示。
成组出现
列表型按钮，类似Select，从可选的列表中选择一项或者多项的菜单。
select式
按钮的摆放位置
按钮应放置在用户能够直接找到或者他有预期能看到的地方。例如,iOS UI 设计规范给明了按钮的合理位置。
按钮要执行的命令和位置的关系非常重要，,特别是在出现成对的选项时(就像”上一个”和”下一个”)，确保设计强调了最主要或者最重要的动作。
在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作，并且，主要动作不但可以通过颜色和对比度去引起注意，还可以看它是否置于对话段落的右边。
删除按钮比取消按钮更加显眼
网友评论