按钮是界面设计中的关键性元素，引导用户进行下一步交互。对话框、输入框、工具栏等很多组件都需要按钮。
（全文共计1607字，阅读约需要5分钟）
在这里，我们将盘点一下按钮设计中最常遇到的问题。01.可以使用无边框的按钮吗？按钮设计的基本准则很简单——让按钮看起来像按钮。边框加强了传统按钮的感觉，并为用户创建了引人注目的目标。如果没有边框，元素看起来更像是一个链接而不是按钮，所以在可选择的情况下，使用带边框的设计会更安全。圆形按钮对用户来说有两个优点：近年来，空心按钮(Ghost buttons)变得很流行，常用于登录页面中。但在用户体验方面，空心按钮的视觉重量较小，吸引用户注意力的效率要低很多。通常填充按钮由于具有更高的色彩对比度而用于强调。有时可能需要这两类按钮同时显示，在这种情况下，填充按钮吸引最多的注意力，作为主要CTA(即行为召唤，设计师有意识地通过设计引导用户执行特定操作，诸如点击按钮、留下联络方式或点击购买)，空心按钮起到辅助作用。08.文本标签可以全部大写吗？所有字母都大写会造成文本难以阅读和理解，研究发现，全部大写的标题阅读时间要延长13%到20%。同时字母全部大写会让用户觉得被动。09.可以用图标替换文本吗？可以替换，但前提是该图标有一个通用的含义（如主页、打印或购物车）。如果用户不清楚含义，可使用图标、文本相结合的方式来表达——图标用来吸引注意力，文本用来解释按钮的含义。但不要在同一个按钮中使用两个图标，这样可能会让人感到困惑。10.需要在按钮上使用阴影吗？虽然阴影能增加按钮的突出度，凸显重点，但最终是否使用取决于界面的样式。如果界面中大多数UI元素是平面的，可能就不需要在按钮上使用阴影。11.如何传达按钮状态？用户不仅需要明白按钮的操作，还需要了解按钮的状态。定义按钮的状态：
（全文共计1607字，阅读约需要5分钟）在这里，我们将盘点一下按钮设计中最常遇到的问题。01.可以使用无边框的按钮吗？按钮设计的基本准则很简单——让按钮看起来像按钮。边框加强了传统按钮的感觉，并为用户创建了引人注目的目标。如果没有边框，元素看起来更像是一个链接而不是按钮，所以在可选择的情况下，使用带边框的设计会更安全。
颜色强调了动作的本质。可以通过颜色的常见含义来确定选择。对于可能存在危险的操作(例如删除用户信息)，则选择红色。
无论选择哪种颜色，都要确保让使用产品的用户能够理解这些颜色的含义。
03.使用圆形还是方形的按钮？圆形按钮对用户来说有两个优点：圆形在视觉上更讨人喜欢。人们会很自然地避开锋利的物体，例如削尖的铅笔，锋利的针等物体。
- 圆形按钮将用户的注意力指向了按钮中心，即文本标签所在的位置，因此用户更有可能阅读标签。
另外在设计时，要根据产品整体的视觉形式来选择合适的按钮形状。如果页面中使用了很多方形的设计，也应该使用方形按钮。
- 保证文本标签的易读性和可读性。(检查所选的字体在较小的屏幕上是否清晰可见！)
- 让按钮易于点击，小的触摸目标会增加错误操作的风险。建议创建尺寸为9mm的控件，以便可以用手指准确地敲击它们。
近年来，空心按钮(Ghost buttons)变得很流行，常用于登录页面中。但在用户体验方面，空心按钮的视觉重量较小，吸引用户注意力的效率要低很多。通常填充按钮由于具有更高的色彩对比度而用于强调。有时可能需要这两类按钮同时显示，在这种情况下，填充按钮吸引最多的注意力，作为主要CTA(即行为召唤，设计师有意识地通过设计引导用户执行特定操作，诸如点击按钮、留下联络方式或点击购买)，空心按钮起到辅助作用。
避免换行。为了保持文本的可读性，文本标签应该保持在一行上。
按钮容器的宽度不能小于文本。
08.文本标签可以全部大写吗？所有字母都大写会造成文本难以阅读和理解，研究发现，全部大写的标题阅读时间要延长13%到20%。同时字母全部大写会让用户觉得被动。09.可以用图标替换文本吗？可以替换，但前提是该图标有一个通用的含义（如主页、打印或购物车）。如果用户不清楚含义，可使用图标、文本相结合的方式来表达——图标用来吸引注意力，文本用来解释按钮的含义。但不要在同一个按钮中使用两个图标，这样可能会让人感到困惑。10.需要在按钮上使用阴影吗？虽然阴影能增加按钮的突出度，凸显重点，但最终是否使用取决于界面的样式。如果界面中大多数UI元素是平面的，可能就不需要在按钮上使用阴影。11.如何传达按钮状态？用户不仅需要明白按钮的操作，还需要了解按钮的状态。定义按钮的状态：正常(活动)。活动状态是按钮可点击时的状态。
悬停(仅限桌面)。这个额外的状态可以让用户明白某个元素是可交互的。
按下。按钮改变视觉形式来反馈点击。
- 已禁用。当用户没有完成必要的操作时，可以禁用该按钮。
希望文章能够让你有所收获～欢迎来撩～～
原文：https://uxplanet.org/11-questions-about-button-design-1bf68019b21d作者：Nick Babich 译者：Clippp
觉得好看就点一下在看吧?
原文链接：http://www.wanshiruyi.cc/news/22492.html，转载和复制请保留此链接。
以上就是关于盘点按钮设计的常见问题梭子鱼做法全部的内容，关注我们，带您了解更多相关内容。
以上就是关于盘点按钮设计的常见问题梭子鱼做法全部的内容，关注我们，带您了解更多相关内容。
特别提示：本信息由相关用户自行提供，真实性未证实，仅供参考。请谨慎采用，风险自负。
