ui控件主要分为哪三大类(UI组件和控件的区别)

UI组件——选择控件简介

选择控件是表单设计的重要组成部分。它们使表格更容易填写和标准化收集的数据。可用、高效的表单可提高转化率并阻止用户与您的产品交互。

掌握在哪些情况下使用哪些选择控件可以使您的表单更有用。了解哪些图标用于哪些选择控件也是表单设计的一个重要方面。

选择控件有两种主要类型：复选框和单选按钮。复选框是唯一允许用户多选多个选项或使用零个选项的选择? 控件 ?。单个复选框的选择不取决于列表中的其他复选框是选中还是未选中。

您可以使用独立的复选框来启用或禁用选项，例如在新闻通讯注册表单上授予发送电子邮件的权限或同意条款和条件。

如果您有多个相关的复选框选项，请考虑包括全选/取消全选按钮。

复选框图标 应该是方形的，带有复选标记或 X 表示选中的复选框。虽然创建独特的图标形状可能很诱人，但统一的元素可提供跨系统的一致性。方形复选框意味着您的界面对用户来说将是直观的，他们不必花时间熟悉您产品的 UI。

当一个复选框下有多个“子”复选框，并且有的被选中而有的没有被选中时，父复选框将显示为 不确定状态 。它通常用水平线或正方形表示。

当只能选择一个选项时，使用单选按钮是有意义的。对于付款方式、交付类型或类似选项，您可能需要? 单选选项 ?，如果多个选项会造成混乱。

与复选框相比，单选按钮选项是互斥的，选择一个选项会取消选择之前在列表中选择的任何其他按钮。创建单选按钮时，始终启用默认选择，设置最安全的选项以防止数据丢失。

切勿将单选按钮用于应立即生效的命令。

单选按钮图标 ?是圆形的，基于早期收音机上的物理按钮。它们是在内部使用点或实心圆圈来显示所选选项的轮廓圆圈。

与复选框一样，坚持单选按钮的标准设计很重要，以防止用户混淆。

图标形状 对于选择控件很重要。遵守约定（方形表示复选框，圆形表示单选按钮，圆角矩形表示开关）使您的 UI 对于新用户来说更加直观，并有助于消除对如何与表单交互的困惑。

您的 标签大小 需要足够大，以便用户在填写表格时轻松阅读它们。虽然理想尺寸因平台而异，但 14 像素通常是一个安全的选择。调整标签的重量和颜色，使它们不像正文那样突出，同时仍然保持可读性。

为了提高可用性，请为复选框或单选按钮等内容创建 可操作的标签 。可操作标签是可点击的，这意味着用户可以点击选择的任意位置来激活它。确保可点击区域足够大，让人们可以舒适地点击，尤其是在触摸界面上。在桌面 UI 上，使用指针光标指示标签可单击。

在您的选择控件和标签周围包含足够的空白区域非常重要，这样它们就不会拥挤并且更容易扫描。 标签边距 将标签与选择控件分开，为它们提供喘息空间并允许用户更快地完成表单。

但是，较大的边距使用户很难分辨哪个标签对应于哪个选择控件，尤其是在选项列表很长的情况下。

标签有一个主要功能——让用户不必思考。这意味着避免使用模棱两可、可能令人困惑的 标签命令 对您来说至关重要。以关键字（通常是动词）开始您的标签，并删除任何多余的短语或问题。

标签应该简短明了，如果是开关，它们应该指出开关打开时会发生 什么 。

标签应该简洁明了。您可以通过大声朗读标签并添加“开/关”来检查它是否有意义。

将您的输入对齐到屏幕左侧的单个列上。为什么？有两个原因：

单一的垂直线更容易遵循。

研究表明，使用从左到右语言的用户倾向于从屏幕左侧开始扫描页面。

你仍然可以使用水平布局，但是你的按钮和标签应该被安排好，以便用户可以毫不费力地分辨出哪个选项对应于哪个标签。

在移动设备上使用开关打开和关闭 选项 时，请确保将这些开关对齐到屏幕的右侧，同时保持标签与左侧对齐。由于设备屏幕的大小不同，这种? 移动对齐方式 ?使界面更易于扫描和使用。

切换开关 是选择控件，仅提供 2 个互斥选项（通常为“开”或“关”）并且始终具有默认值。

拨动开关是更改即时反馈的系统设置的最佳解决方案，例如打开暗模式或飞行模式。

拨动开关的选择立即生效。另一方面，在选择复选框选项后，用户必须按下提交按钮。

切勿在表单中使用带有其他选择控件或需要用户单击保存或提交的输入的切换开关。

ui设计的三个等级分类划分

ui设计的三个等级分类划分

导语：按照UI设计界面的三类划分，有助于考察设计界面的多种因素。当然，应该说设计界面的划分是不可能完全绝对的，三类界面之间有涵义上也可能交互与重叠，如宗教文化是一种环境性因素，但它带给信仰者的往往更多的却是宗教的情感因素。下面就由我为大家介绍一下ui设计的三个等级分类划分，希望对大家有所帮助！

1 、功能性界面

对功能性界面来说，它实现的是使用性内容，任何'件产品或内外环境或平面视觉传达作品，其存在的价值首要的是在于使用性，由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面，分析思维作为一种理性思维而存在。如果作为一种处理方式来设计产品，则这种产品会使多种特征性(如民族性、纯粹性)因素中性化，如果去除产品商标，就很难认出是哪国的或哪个公司的产品。当然，这方面也说明了产品中存在着共同性因素，它使全人类能做出同样的反应。人的感觉和判断能力有着国际性的、客观性的特征。 功能性UI界面设计要建立在符号学的基础上。国际符号学会对符号学所下定义是：符号是关于信号标志系统(即通过某种渠道传递信息的系统)的理论，它研究自然符号系统和人造符号系统的特征。广义的.说，能够代表其他事物的东西都是符号，如字母、数字、仪式、意识、动作等，最复杂的一种符号系统可能就是语言。设计功能界面，不可避免地要让使用者明白功能操作。每一操作对人来说应是符合思维逻辑的，是人性的，而对机械、电子来说则应是准确的、确定无疑的，这双方的信息传递是功能界面的核心内涵。

2、情感性界面

一个家庭装饰要赋予人家居的温馨，一副平面作品要以情动人，一件宗教器具要体现信仰者的虔诚。其实任何一件产品或作品只有与人的情感产生共鸣才能为人所接受，"敝帚自珍"正体现着人的感情寄托，也体现着设计作品的魅力所在。 现代符号学的发展也日益这一领域开拓，以努力使这种不确定性得到压缩，部分加强理性化成分。符号学逐渐应用于民俗学、神话学、宗教学、广告学等领域，如日本符号学界把符号学用于认识论研究，考察认识知觉、认识过程的符号学问题。同时，符号学还用于分析利用人体感官进行的交际，并将音乐、舞蹈、服装、装饰等都作为符号系统加以分析研究，这都为设计艺术提供了宝贵与有借鉴价值的情感界面设计方法与技术手段。

3 、环境性界面

任何的设计都要与环境因素相联系，它包括社会、政治和文化等综合领域。处于外界环境之中，"是以社会群体而不是以个体为基础的"，所以环境性因素一般处于非受控与难以预见的变化状态。 联系到设计的历史，我们可以利用艺术社会学的观点去认识各时期的设计潮流。18世纪起，西方一批美学家已注意到艺术创造与审美趣味深受地理、气候、民族、历史条件等环境因素的影响。法国实证主义哲学家孔德指出："文学艺术是人的创造物，原则上是由创造它的人所处的环境条件决定。"法国文艺理论家丹纳认为"物质文明与精神文明的性质面貌都取决于种族、环境、时代三大因素"。无论是工艺美术运动、包豪斯现代主义或20世纪80年代的反设计，现代的多元化，"游牧主义"(Nemadism)都反映着环境因素的影响。 环境性界面设计所涵盖的因素是极为广泛的，它包括有政治、历史、经济、文化、科技、民族等，这方面的界面设计正体现了设计艺术的社会性。 以上说明了设计艺术界面存在的特征因素，说明在理性与非理性上都存在明确、合理、有规则、有根据的认识方法与手段。 成功的作品都是完善地处理了这三个界面的结晶。如贝聿铭设计的卢浮宫扩建工程，功能性处理得很好，没有屈从于形式而损害功能；但同时又通过新材料及形式反映新的时代性特征及美学倾向，这是环境性界面处理的典范；人们观看卢浮宫，不是回到古代，而是以新的价值观去重新审视、欣赏，它的三角形外观符合了人们的心理期望，这是情感性界面处理的极致。

;

UI设计都包括哪些类型？

第一种：PC端UI设计PC端UI设计，也就是电脑用户，界面指的就是电脑上的操作界面。像电脑版的QQ，微信，PS等软件和网页的一些按钮图标等。

第二种：移动端UI设计

移动端UI设计，也就是手机用户，界面指的就是手机界面，也就是说手机上的所有界面都是移动端UI设计。比如微信聊天界面，QQ聊天界面，手机桌面 。

第三种：游戏UI设计

游戏UI设计，用户也就是游戏UI用户，界面指的是游戏中的界面，像手游王者荣耀，端游英雄联盟和一些其它游戏中的界面，登录界面、个人装备属性界面也都是属于游戏UI设计。

第四种：其它UI设计

像VR界面、AR界面、ATM界面、一些智能设备的界面，比如智能电视、车载系统等等，用户较少，但又需要，未来有可能很火，有可能保持现状

UI设计常用的UI控件有哪些？

uI控件的三要素：绘制、数据、控制。

1、Axure RP（Rapid Prototyping）

Axure（读音为Ack-Sure）无疑是目前最受关注的原型开发工具，其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程图、线框图），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

但Axure仍然有一个让人头痛的问题：对于中文的支持不太友好。在小部分元件上输入中午的时候，经常需要像碰运气似的反复切换输入法，破坏了咱们设计师的用户体验。

瑕不掩瑜，Axure仍然是交互设计师的首选原型工具。

2、Microsoft Office Visio

Visio在2000年被微软收购，并在2002年成为office2003套件中的一个组件，最新版本是2007。Visio能够获得推荐的原因是因为Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。

相较Axure而言，Visio更适合于传统行业的生产或流程设计，或者软件及互联网行业中的信息、数据和流程的说明，而不太适用于web界面。因为其的基于web的元件库还是比较少，并且形式和结构也更类似于word中的图形工具，因此在原型开发效率上都有所不足。

3、Balsamiq Mockups

这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉，手绘风格的元件样式粗犷淋漓，能创建接近于纸上手绘的原型文件。其提供了丰富的手绘风格的web常用元件，包括常用的html控件、以及一些组合控件，如多媒体控制器、标签页、列表、Iphone界面元件等。

Mockups最值得赞赏之处在于其提供的多数组件都可定制外观，对于中文的支持也不错（选择View Use System Fonts）。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一项基于Adobe Flex技术开发在线服务，提供了与Balsamiq Mockups基本相似的功能，甚至更丰富的组件，虽然其元件定制化不够强大，但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。有一个让我爱不释手的功能是模板，可以设置基于任何页面的模板来进行新的页面设计。

与其他模板工具相比，mockflow有一个非常特色的功能，基于web的存储可以在任意电脑上联机打开，同时可以其他人进行快速的分享，并收集在线反馈意见，非常适合虚拟团队的原型设计交流。