UI设计常见的控件设计规范有哪些？本文总结了9个控件的设计规范：按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块。在我们设计UI界面的时候，有一些控件是几乎都会用到的。用户熟悉他们的交互模式，从而建立一个关于控件如何帮助他们实现目标的心智模型。因此，作为设计师，我们必须清楚这些常用的UI控件元素的设计规范。这篇文章比较基础，但还是建议大家查漏补缺。我们需要注意的输入控件包括：按钮多选单选切换文本输入框下拉选择列表框下拉按钮滑块1.按钮按钮是对用户的一个比喻，当他们按下/click，将触发一个动作。1.最佳实践①按钮结构当我们设计一个按钮时，我们需要考虑多个元素：圆角、填充、阴影（可能）、填充（纯色或渐变）、文本。所有这些元素组合在一起形成一个按钮控件，可以有效地向用户传达正确的交互信息。②按钮圆角圆角越大，按钮越友好。但也要记住，人眼往往不喜欢非常尖锐的物体，所以一般不推荐圆角为0的按钮样式。建议使用至少3px的圆角。③PaddingPadding可以扩大按钮的可点击范围，帮助用户更轻松地点击按钮。一个好的设计经验法则是将按钮的水平填充设计为垂直填充的两倍。当然，你也可以根据自己设计的实际情况做适当的调整，规则不是死的。④投影我们用投影来表示一个特定的状态。按钮必须出现在页面的顶部，因此要保持平滑的阴影并使用柔和的颜色。建议使用接近按钮的颜色并降低不透明度，这将使您的投影看起来更自然。按钮的阴影使用与按钮相同的颜色值⑤填充无论我们使用纯色还是渐变，我们都希望确保按钮易于用户理解。此外，为按钮选择的颜色必须反映匹配的颜色。例如，当你设计一个红色的保存按钮时，它会让用户犹豫是否点击它。⑥文字与颜色相似，也希望使用易于用户阅读的文字。在按钮上使用最多5个词（重要按钮使用1-3个词）。⑦操作按钮可以根据交互时执行的操作类型进行分类，分为3类：一级按钮、二级按钮、第三级二级按钮⑧状态也可以从另一个方面考虑按钮的设计风格。最重要的按钮状态包括以下6种：默认状态点击状态焦点状态不可点击状态激活状态等待状态2.复选框复选框控件是指用户可以同时选择一个列表中的多个选项。最佳实践①当你在一个复选控件中有很多选项时，将这些选项分组是一种很好的分类方式。②虽然在创建复选框时可能已经有用户勾选多个选项的模式，但通过在选项标题上准确显示多个选项来让用户实际选择多个选项也很有用。例如，在一道选择题中，如果我们问“Whichbooksdoyoulike?”而不是“你喜欢哪本书？”，答案很可能是完全不同的，因为我们知道用户更有可能。③通过允许用户单击选项卡本身来检查选项来提高可用性。3.单选按钮复选框告诉用户这个列表中有多个选项可供选择，而单选按钮告诉用户只能选择一个选项。最佳实践①与复选框类似，如果你有很长的选项列表，记得将它们分组，以方便用户选择。②提供默认选项。用户可以选择其他选项，但如果这个默认选项是用户想要的，就可以省去他的麻烦。③增加单选按钮易用性的方法是让用户在点击选项标签时选择它（扩大点击范围）。4.Toggle控件通常用在切换选项中，让用户方便的选择这2个选项。最佳实践①切换按钮一般都有一个默认值。用户可以决定是否更改切换状态。②当用户与切换按钮交互时，对结果的影响应该是立竿见影的，无需点击保存。五、输入框简单地说，输入框就是让用户输入文字。虽然设计风格可能不同，但它们都应该显示一个标签。最佳实践①始终显示标签，让用户始终知道填的是什么选项。如果标签只显示在输入字段中，那么当用户输入时标签将被隐藏。因此，在输入框外使用时必须有标签提示。②保持标签简洁、有代表性。③显示提示，保证文字内容让用户填写正确信息。六、下拉列表类似于单选按钮，下拉列表只允许用户同时只选择一个选项。事实上，它们是可扩展的，本质上是一个紧凑的单选按钮。最佳实践由于它们本质上是一个紧凑的单选按钮，因此在并非真正必要时扩展选择可能会更快，因此请尽可能避免使用它们。七、下拉复选框类似于复选框，它也允许用户同时选择多个选项。最佳实践如果您有很长的选项列表，请记住将它们分组以使用户更容易选择。八、下拉按钮下拉按钮本质上是由一个按钮组成的。当点击下拉按钮时，会显示不同的列表内容。最佳实践①记得给选项添加悬停效果，以表明用户可以点击导航到另一个页面。②在按钮右侧添加一个单独的图标，告诉用户它还有一个隐藏的下拉菜单。9.滑块滑块允许用户更改或设置一个值。最佳实践仅在需要时使用滑块，此时范围对用户而言比精确值更重要。注意控件的点击范围，方便用户选择不同的值。综上所述，上面提到的控件在我们日常的设计工作中经常会用到。希望您能理解这些规范和指南，正确使用，为用户带来最大价值。
