让沟通无障碍，设计师要知道这些UI设计术语

Sponsor

刚刚做设计的小伙伴在和开发产品沟通的时候是不是会听不懂他们对一些组件叫法？一些有经验的设计师是不是一直是按照经验做设计，但是也不知道组件的具体术语。今天给大家分享一些UI专业术语，希望对大家有帮助。

一、下拉列表 

下拉列表的概念类似于你在多选题中选择一个答案一样，第一次进入页面的时候下拉列表就应该显示一个默认的数值了。如果你点击的按钮重新选择了，一开始的默认数值就会变成你重新选择的那个，方便用户识别。

下拉列表是网页中一种最节省页面空间的选择方式，默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项。

二、组合框 

组合框就是下拉列表的升级，就是用户可以直接输入确定，也可以点击选择列出的选项之一。有时候组合框也别叫做下拉式列表。

根据所需输入的内容的性质，组合框的外观可能会有所变动，方便处理不同类型的信息。设计的时候，需要保持足够的灵活性，提高可用性，兼顾不同的输入类型，这一点很重要。

三、单选 

听名称就知道，单选就表示只能选择一个，再具体一点选框有选中和未选中两种状态，样式上一般来说是用填充的圆表示选中，描边的圆表示未选中，通过改变状态让用户知道。

在UI设计中，很多APP信息选择页面就是这个概念，比如性别、名字、出生年月。都只能选择一个。

一个小小的单选其实不可忽略，上图这个选择模块由单选按钮、文字标签和图标共同组成，可操作的范围很大，视觉层次也很清晰，可以尽情发挥想象力设计。

四、复选框 

与单选按钮不同，复选框是另一种选择方式，是在一组备选项中选择多个，也被叫做勾选框。单选按钮和复选框这两个组件在UI设计中是必不可少的。

很多APP登入注册完会让用户根据喜好选择，方便后期推用户感兴趣的信息。

这是一个锻炼APP的三个页面，就很好的把单选和复选结合设计出来了。

在B端设计中，在针对列表的删除、修改等操作，多条同时进行设置的时候就要复选了。

有时候在一些家居、电商等网页设计的时候，我们需要购买物品可以单独选择一个或者多个。大家设计的时候思路可以放开。

五、切换按钮/开关 

开关作为仿照物理开关的映射，提供了两种最为简单、直接的对立选项，比如开/关、启动/禁用等。拨动开关主要用于移动设备，通过手指直接向左或向右移动开关或选择区域来控制开/关状态。这时候，用户可以很清晰识别当前状态的视觉反馈。

这是一个进行了简单交互的切换按钮，通过一个圆球红绿两面翻滚变化来代表切换，很有趣。

切换按钮在音乐软件中是必不可少的，拟物化的风格设计起来很有质感。

六、工具栏 

这是按钮和图标的组合。简单来说就是一个带有按钮功能的图标。应用于功能区菜单和工具栏，它已成为替代现有以文本为中心的下拉菜单的强大组件。而工具栏则是根据用户的喜好和需要，将这些集合起来。

七、进度条 

当你想知道事情何时完成时，提供了以下类型的指标。您可以检查到目前为止的进度和剩余金额。

在游戏进行加载或者下载的时候进度条的作用就出来了，可以明确的知道剩余时间。

「流利说」app会在导航栏中看到信息进度，很巧妙的一个结合。

视频软件几乎是必带进度条，用户可以拖动进度对视频进行快进和后退的观看。

进度条对于B端设计也是少不了的，而且不同意移动端，B端设计还可以对进度条样式进行很大的优化，造成强烈的视觉冲击。

这些组件设计结合起来就会成为一套完成的设计。

八、最后 

今天就是这些分享，还有更多优秀的UI话术后面分享给大家，期待设计日记每天一个小小的分享，能在设计上帮你。

原文地址：我们的设计日记（公众号）

作者：叮当猫

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。