网页设计技巧：优秀的UI按钮应具备哪些要素。

在网页设计中，UI按钮往往是设计师眼中最不起眼的元素，但却是界面设计中最重要的元素之一。在实际设计中，设计师处理UI按钮的细节并不是处处到位。其实UI按钮和连接一样，是网页和用户交互的主要工具之一，也是引导用户下一步的重要元素。那么，一个优秀的UI按钮需要具备哪些要素呢？

一个优秀的UI按钮有哪些要素？

一、按钮设计的目的

在某些功能中，按钮其实很接近连接，两者都是“点击后会到达另一个位置或者达到某种目的”。然而，这两者在意义和风格上都有很大的不同:

①按钮代表“做某事”，即点击后有后果，用户无法轻易恢复；而且连接只能看不能做。

②按键设计比较精致，有很多细节需要注意；连接最多是颜色或者字体大小的变化，甚至有些连接不明显。

由于按钮的主要目的是传达用户可以执行的信息，因此设计不能与常见的按钮有太大区别，否则会让人感到困惑。同时，要根据按钮的不同状态，采用不同的设计来创建按钮，每个状态都要有明确的“可用性”，以保证按钮能够与其他元素区分开来。但差异化设计又不能造成篡夺主持人角色的效果，制造视觉噪音。

第二，按钮设计的风格

1.功能类型

很多设计师总认为一个按钮只是画一个方框，然后填文字，填颜色。其实按钮的功能有很多种类型，每种类型的设计方法也不一样。

①号召按钮:通过设计诱导或激发用户点击按钮来达到产品转化的目的，主要包括诱导购买、订阅关注、诱导兴趣、诱导文字四种类型。

△诱导购买:目的性强，所以按钮设计需要在颜色、形状、风格上突出，让用户一看就知道按钮的用途。

△订阅关注:重要性远低于诱导购买。在设计时，需要考虑按钮是侧重于用户的注意力还是用户的阅读内容。前者按钮需要加强，后者需要削弱。

△利益诱导:所有带有“诱导”二字的按钮都有很强的目的性。因此，这个按钮的设计还需要突出颜色、形状、添加图标、诱导文字来引导用户点击按钮。

△文字引导:主要用于通过文字引导用户进入下一步，多用于空白页或活动页。设计中可以使用简单的色块，也可以加入渐变或投影的风格，让按钮更有空间感，从而突出按钮。

②暂停按钮:主要用于正向交互，如创建、分享、探索等。它采用醒目的颜色来吸引用户的注意力。

③标签按钮:经常以多种形式出现。标签按钮因为重要性低，需要在设计上弱化，同时减少用户操作步骤，提高操作效率。

④表单按钮:多用于非核心操作，设计师会弱化处理，使界面与表单按钮更加协调。

⑤切换按钮:用于在两种相反的状态之间进行切换，点击按钮，很可能会带来其他相应的操作。

2.设计要点

如果你想设计一个具有良好引导性的按钮，并展示注意按钮的功能类型，你需要掌握以下细节:

①颜色

在设计按钮时，可以根据按钮的重要性来选择主色、强调色和辅助色。比如主色多用于需要强调的行为调用按钮、悬浮按钮、开关按钮；如果界面有多个按钮，需要打开主次关系，一般会采用强调色；辅助色多用于处于默认状态或无法点击的按钮。

②形状

不同形状的按钮向用户显示不同的感觉，例如:

直角按钮:给人严谨、安全、高端的感觉，适合金融、奢侈品网页设计；

圆形小按钮:给人稳重中性的感觉，适合用户跨度较大的网页设计；

饱满圆润的按钮:给人活泼年轻的感觉，能拉近用户之间的距离，增强界面的亲和力，适用于儿童、青少年、娱乐、购物等网页设计；

异形按钮:给人不稳定、活泼、另类的感觉，适合需要用户做出选择的网页设计。

③状态

在界面设计的部分，为了提供用户操作的流畅性，还需要考虑按钮的状态设计，比如:

正常状态:表示按钮是交互可用的；

焦点状态:通过突出显示它已被选中来通知用户；

悬停状态:光标或其他元素放在按钮上方；

激活状态:用户已经按下按钮，但没有完成按下按钮；

加载状态:组件正在反映，操作仍在加载但尚未完成。

禁用状态:表示当前组件处于非交互状态，可以在以后启用。

*其中，界面设计的主色多用于正常状态和加载状态；悬停状态或激活状态会在正常状态上叠加15%透明度的黑色；在禁用状态下，通常在正常状态的基础上选择透明度为45%的灰色或黑色。

④位置

按钮的位置往往比按钮的设计更重要，因为这关系到引导用户，让用户方便点击。根据菲茨定律，按钮位置越近，用户需要的时间越短，越容易被用户点击。

三、按钮设计的特点

在网页设计中，按钮是网页/app与用户交互的枢纽，按钮设计的好坏会直接影响用户对网页/app的印象。一旦按钮设计的细节没有做好，很容易降低用户对网页/APP设计的好感，进而影响使用率和转化率。

①一致性:提高交互的准确性和效率。

当界面设计需要创建不同层次的按钮样式时，请保持按钮在整个设计系统内的高度一致，并兼顾其他可能使用的平台。

保持按钮的一致性可以在很大程度上使设计具有可预见性，让用户知道自己能做什么，有助于提高用户与网站交互的速度和准确性，同时也可以避免用户交互中的失误。

②可靠性:按键要足够大。

无论是APP设计还是网页设计，按钮的触摸尺寸都要大于其可见尺寸。如果用户不能成功触摸到按钮，或者在操作过程中误触了旁边的按钮，都会对整个用户体验造成负面影响，浪费用户的时间。

③可达性:保证体验的可达性。

界面中的每个组件都应该遵循WCAG的标准(网页内容可访问性指南)。设计师要和开发者紧密合作，在代码中加入“role=button ”,保证元素可以调用屏幕阅读空间，让颜色、布局、用户体验等细节可以方便视力障碍的用户使用。

UI设计是网页设计中最常用也最容易被忽略的部分。界面不是简单的画一个框，添加文本，添加链接。其实遵循用户体验，提供操作流畅的按钮，会让用户为网站加分不少。