UI进阶知识-按钮设计，看这篇文章就够了( 二 ) _UI

4）文字诱导
文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮。如下图所示：

文章插图

以得到为例，当你还没有学习计划时，它会对你进行提示“开始制定学习计划”，同时其按钮采用重要程度较高的色块+投影的方式，诱导用户点击。
以大众点评为例，当你还没有攻略时，它会对你进行提示“我也要创建攻略”，同时其按钮采用渐变填充的方式，诱导用户点击。
2.悬浮按钮悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和IOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，同时并不是所有页面都需要加悬浮按钮。如下图所示：

文章插图

以UC浏览器为例，悬浮按钮在订阅页面的右下角出现，将按钮和界面结合很容易看出创建内容的意思，同时点击按钮还可呼出图文、视频等操作图标。
3.标签按钮标签按钮往往呈多个出现，多使用在二级导航或条件筛选下面；以及表单页面作为切换条件选中。因此在设计样式上有选中状态和默认状态，同时其重要程度较低，在设计时不能喧宾夺主，需要弱化处理。如下图所示：

文章插图

以支付宝为例，它主要用在投保的表单页面，其主要目的就是一个切换条件，重要程度远不及我要投保按钮，因此在设计时默认用的描边处理；选中采用淡淡的色块。
以转转为例，它主要用在导航下方，其主要目的也是切换条件，用户主要操作是看下方筛选出的内容，因此在设计时也进行弱化处理。
4.表格按钮表格按钮也就是由一个白色网格加文字组成的按钮，从视觉上看和页面融为一体，特别不突出。因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。如下图所示：

文章插图

以爱奇艺为例，在我的界面中，关于我们和退出登录都是用的表格按钮，由于关于我们是不太重要信息，退出登录又是不想让用户操作的内容，因此采用表格按钮最为合适。
5.命令按钮命令按钮也就是该按钮具有明确的指令，多出现在弹框中，通常会有一个文字或2个文字出现的情况。其要求是文字语义要明确，尽量不要用确定、好的、要等词汇，同时根据用户右手操作习惯居多，因此将重要的按钮放在右侧。如下图所示：

文章插图

以京东金融为例，左图是京东金融退出的二次确认页面，右图是我调整文字之后的页面。我们说到文字需要表意明确，因此将确定换成退出后表意更加直白，降低用户理解度。
6.开关按钮开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中，但是也有很多App将其用到界面中使用。如下图所示：

文章插图

以美团外卖和小猪短租为例，它们在提交订单页面时都采用了开关按钮，同时在小猪短租中，当按钮打开底部会将“您可再入住完成10天内补全信息”进行展开显示，提示用户去填写。这种点击展开的操作还可增加更多的功能相关内容。
二、按钮设计要点1.根据产品为按钮选择适合的形状
在按钮设计时，需要根据整个界面风格设计合适的按钮，按钮样式主要有直角、小圆角、全圆角三种样式。