网页设计技巧：优秀的UI按钮应具备哪些要素
在网页设计中，UI按钮经常是设计师眼中最不显眼的元素，却是界面设计中最重要的元素之一。在实际设计中，设计师处理UI按钮细节不到位的情况比比皆是。事实上，UI按钮与连接一样都是网页与用户进行交互的主要工具之一，也是引导用户进行下一步操作的重要元素。那么，优秀的UI按钮应具备哪些要素？
优秀的UI按钮应具备哪些要素
一、按钮设计的目的
按钮在某些功能上其实和连接很接近，都是「经过点击后会到达另一个位置或实现某种目的」，但两者无论是意义上还是样式上，都存在较大的差异：
①按钮代表「做某件事」，即点击后是有后果的，而且用户不易挽回；而连接则是可以只看而不做。
②按钮设计比较有讲究，需要注意的细节比较多；而连接最多也就是颜色或字体、字号上的变化，甚至有些连接是毫不显眼的。
由于按钮的主要目的是传达用户可执行的信息，设计上不要与常见按钮差别太大，否则会让人感到困惑。同时，根据按钮不同状态，创建按钮需采用不同样式的设计，每种状态也必须有明确的「可供性」，确保让按钮与其他元素区分开，但差异化设计不能造成喧宾夺主的效果，制造视觉噪音。
二、按钮设计的样式
1.功能类型
很多设计师总认为，按钮不就是画个框，然后填写文字，填补颜色就好了。其实按钮的功能类型有很多，而且各个类型的设计方式也各有差异。
①行为召唤按钮：通过设计诱导或激励用户点击按钮，从而达到产品转换的目的，这主要包括诱导购买、订阅关注、利益诱导、文字诱导四种。
△诱导购买：目的性较强，因此按钮设计无论是颜色、形状、样式都需要突出，让用户一眼就知道该按钮的用途。
△订阅关注：重要程度相对比诱导购买低很多，设计时需考虑该按钮是以用户关注为主还是用户阅读内容为主，前者按钮需要强化处理，后者则需要弱化处理。
△利益诱导：凡带有「诱导」字眼的按钮，其目的性都比较强，因此该按钮设计同样需要从颜色、形状、加入图标，以及诱导文字等考虑突出，引导用户点击按钮。
△文字诱导：主要是透过文字诱导用户进行下步操作，多用于空页面或活动页面，设计时采用简单的色块即可，也可以增加渐变或投影样式，使按钮更有空间感，进而突出按钮。
②悬浮按钮：主要用于积极正向的交互，比如创建、分享、探索等，设计时采用显眼的颜色，抓住用户的注意力。
③标签按钮：往往可呈多个出现，由于标签按钮的重要程度较低，设计时需要弱化处理，同时减少用户操作步骤，提高操作效率。
④表格按钮：大多用于非核心的操作，设计师大多会弱化处理，让界面与表格按钮更为协调。
⑤开关按钮：用于两种相互对立状态间的切换，当按钮点击后很可能会带来其他相应的操作。
2.设计要点
要想设计出引导性好的按钮，出现关注按钮的功能类型，还需要掌握以下细节：
①颜色
在设计按钮时，可根据按钮的重要程度选用主色、强调色和辅助色，如主色多用于需要强调的行为召唤按钮、悬浮按钮和开关按钮；如界面有多个按钮且需要拉开主次关系，一般会采用强调色；辅助色多用于默认状态或不可点击的按钮。
②形状
不同形状的按钮，所展现给用户的感觉也各不相同，如：
直角按钮：给人严谨安全、高端的感觉，适用于金融类和奢品类的网页设计；
小圆角按钮：给人稳定、中性的感觉，适用于用户跨度较大的网页设计；
全圆角按钮：给人活泼年轻的感觉，能拉近用户的距离，提升界面的亲和力，适用于儿童类、年轻化、娱乐类、购物类等网页设计；
异形按钮：给人不稳定、活泼、另类的感觉，适用于需要让用户作选择的网页设计。
③状态
在部分界面设计中，为了提供用户操作时的流畅度，还需要考虑按钮的状态设计，如：
·正常状态：表示按钮可交互且可用；
·聚焦状态：通过高亮形式告知用户，它已经被选中；
·悬停状态：光标或其他元素置于按钮上方；
·激活状态：用户已按下按钮但还未结束按按钮动作；
·加载状态：组件正在反映，操作仍在加载中尚未完成。
·禁用状态：表示当前组件处于非交互状态，之后可被启用。
*其中，正常状态和加载状态多使用界面设计的主色；悬停状态或激活状态会在正常状态的基础上叠加透明度为15%的黑色；禁用状态一般会选用灰色或在正常状态的基础上叠加透明度为45%的黑色。
④位置
按钮位置往往比按钮设计更重要，因为它关乎着引导用户、方便用户点击等操作。根据费茨定律，按钮位置越近，用户所需时间就越短，就越容易被用户所点击。
三、按钮设计的特点
在网页设计中，按钮是网页/APP与用户进行交互的枢纽，按钮设计的好坏会直接影响用户对网页/APP的印象。一旦按钮设计的细节没有做好，容易降低用户对网页/APP设计的好感，继而影响使用率和转换率。
①一致性：提高交互准确度和效率
当界面设计需要创建不同层级的按钮样式时，请保持按钮在整套设计体系内部保持高度一致，并兼顾其他可能会用到它的平台。
按钮保持一致性，很大程度能让设计具备可预测性，让用户能够清楚自己可以做到什么，由助于提高用户与网站的交互速度和准确性，同时还能避免用户交互时出现错误。
②可靠性：按钮要足够大
无论是APP设计还是网页设计，按钮的触摸尺寸应大于它的可视尺寸。如果用户无法成功触控按钮，或在操作过程误触旁边的按钮，会给整个用户体验带来负面影响，并且浪费用户的使用时间。
③可访问性：确保使用体验无障碍
界面上每个组件都应该遵循WCAG的标准（Web内容无障碍指南），设计师应该和开发者紧密合作，添加「role=button」到代码当中，确保元素可以调用屏幕阅读空间，在色彩、布局、用户体验等细节上，让有视觉障碍的用户都可以轻松使用。
UI按钮设计是网页设计中，最常用也是最容易忽视的部分。界面按钮并不是简单的画个框、添加文字、添加连接就可以，实际上遵循用户体验，提供操作流畅的按钮，会让用户对网站加分不少。
