草庐IT

UI设计中九个常用的控件规范,这篇都梳理好了!

彩云Sky¹ 2023-03-28 原文
UI设计中常见的控件设计都有哪些规范?本文总结了按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块9个控件的设计规范。

我们在设计 UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它们的交互模式,也因此建立了心智模型,很清楚如何通过这些控件帮助他们达成目标。

所以作为设计师,我们必须清楚这些常用 UI 控件元素的设计规范,本文偏基础,但建议你查漏补缺。

我们需要关注的输入控件包括以下这几个:

  1. 按钮
  2. 多选
  3. 单选
  4. 切换
  5. 文本输入框
  6. 下拉选择
  7. 列表框
  8. 下拉按钮
  9. 滑块

一、按钮

按钮向用户隐喻当他们按下/点击时将触发一个操作。

1. 最佳规范

① 按钮结构

当我们设计一个按钮时,我们需要考虑多个组成要素:圆角、内间距、投影(可能有)、填充(纯色或渐变)、文字。所有这些要素组成在一起形成一个有效传达的按钮控件,向用户发生正确的交互信息。

② 按钮圆角

圆角越大,按钮越具有亲和力。但也要记住,人眼往往不喜欢非常锋利的物体,所以通常不大建议用圆角为 0 的按钮样式。建议最小也要用到 3px 的圆角。

③ 内边距

内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计经验是把按钮的水平内边距设计成垂直内边距的 2 倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。

④ 投影

我们使用投影来表明特定的状态。按钮必须看起来是在页面的最上方,所以保持平滑的投影并且使用柔和的颜色。建议使用与按钮接近的颜色然后降低透明度,这样会使得你的投影看起来更加自然。

按钮的投影使用和按钮一样的色值

⑤ 填充

无论我们使用纯色还是渐变色,我们都希望确保按钮对用户来说是便于理解的。另外,为按钮选择的颜色必须反馈相匹配的颜色。比如当你设计一个红色的保存按钮时,会让用户犹豫能不能点。

⑥ 文字

与颜色类似,你也希望用到的文本内容能够确保用户易于阅读。在一个按钮上使用最长不超过 5 个单词(重要按钮使用 1-3 个单词)。

⑦ 操作

按钮可以根据交互时执行的操作类型来进行分类,分为 3 类:

  • 主要按钮
  • 次要按钮
  • 第三次要按钮

⑧ 状态

也可以从另一个方面来考虑按钮的设计样式。最主要的按钮状态包括以下这 6 种:

  1. 默认态
  2. 点击态
  3. 焦点态
  4. 不可点击态
  5. 活动态
  6. 等待态

二、复选框

复选框控件是指用户可以在一个列表中能同时选择多个选项。

最佳规范

① 当你在复选控件中有非常多的选项时,给这些选项分组是一个很好的分类方法。

② 虽然可能已经为用户创建了复选框时勾选多个选项的模式,但选项题目上准确显示可多选对用户的实际选择也很有用。比如举个例子,在一个复选题中,如果我们问“你喜欢哪些书?”而不问“你喜欢哪本书?”,得到的答案很可能是完全不同的,这是因为我们知道用户很可能会多选。

③ 通过允许用户点击标签本身来检查选项来增加可用性。

三、单选按钮

复选框是告诉用户这个列表中有多个选项可以选择,而单选按钮则告诉用户只能选择一个选项。

最佳规范

① 类似于复选框,如果你有一个长长的选项列表的话,记得把它们进行分组,这样让用户更容易选择。

② 提供一个默认选项。用户可以自行选择其他选项,但如果这个默认选项就是用户所希望的,就可以替他省事了。

③ 增加单选框可用性的方法是让用户能够在点击这个选项标签时就能选中(扩大点击范围)。

四、切换控件

通常被用在开关选项中,让用户可以轻松地选择这 2 个选项。

最佳规范

① 切换按钮一般都有一个默认值。用户可以决定是否需要改变切换状态。

② 当用户与切换按钮交互时,对于结果的影响应该是立即生效的,而不必点击保存。

五、输入框

简单说,输入框就是让用户能够输入文字。虽然设计样式可能不同,但它们都应该显示一个标签。

最佳规范

① 始终显示标签,这样用户随时都能知道填了什么选项。如果仅仅在输入框中显示标签,那么当用户输入时,这个标签会被隐藏。所以,在输入框外使用要有一个标签提示。

② 保持标签简洁且有代表性。

③ 显示提示语,确保文本内容能够让用户填写正确的信息。

六、下拉列表

类似于单选按钮,下拉列表仅允许用户在同一个时间只能选择一个选项。事实上,它们是可扩展的,本质上就是一个紧凑型的单选按钮。

最佳规范

因为它们本质上是一个紧凑型的单选按钮,所以当不是真正必要的时候,展开选择或许更快,尽量避免使用。

七、下拉复选框

类似于复选框,它也允许用户同时选择多个选项。

最佳规范

如果你有一个长的列表选项,记得给它们分组便于用户更容易选择。

八、下拉按钮

本质上,下拉按钮是由一个按钮组成,当单击下拉按钮时,将显示不同的列表内容。

最佳规范

① 记得给选项增加悬停效果,以显示用户可以通过单击导航到另一个页面。

② 在按钮的右侧加上一个单独的图标,告诉用户它还有隐藏的下拉菜单。

九、滑块

滑块允许用户更改或设置一个值

最佳规范

只在需要的时候使用滑块,当范围对用户来说比精确值更重要的时候。

注意控件点击范围,确保用户可以更容易的选择不同的值。

总结

以上提到的这些控件,在我们日常设计工作中常常会被用到,希望你能了解这些正确使用的规范和指导原则,以便为用户带来最大价值。

有关UI设计中九个常用的控件规范,这篇都梳理好了!的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  5. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  6. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  8. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  9. ruby - gem 规范失败 - 2

    我正在为毕业设计开发GEM,TravisCI构建不断失败。这是我在Travis上的链接:https://travis-ci.org/ricardobond/perpetuus/builds/8709218构建错误是:$bundleexecrakerakeaborted!Don'tknowhowtobuildtask'default'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_wrapper:14:in`eval'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_

  10. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass),但我需要在应用规则之前检查用户角色,但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户,我们在StackOverflow

随机推荐