赞助商
立即赞助

进阶方法!可能是最全面的组件设计完全手册

UI设计3年前 (2021)更新 流光
2.5K 0 0

台系统中,存在大量的组件,合理的应用是做出良产品的基功。

本文梳理了常见的「选择」「输入」,也算自己时间产品设过程中的梳理、认知总结,自然不全之处,希望对家所帮。

上篇:选择

允许用户从选项中行选择操作,用于选择对象或数据,偶直接触发行。

常见类型

  • 单选按钮
  • 复选框
  • 图标切换
  • 切换开关
  • 穿梭框/列表构器
  • 下菜单

一、Radio 单选按钮

允许用户从一组相互排斥的选项中选择一个。通常,将一个选项定义为默认选择。

1. 外观形式

常规:

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

分段控件(选项卡):

进阶方法!可能是最全面的组件设计完全手册

若单选项下,存多组互斥选项,且互斥选项组之间存一关系,可以考虑混用分段控件常规按钮一起使用,因分段控件视觉占用的面积,且给人层级加置。

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

单选按钮总是以个(>1)出现,且每个选项默认直观见,并在一定情况下需要更的展示空间。 当只有一个选项或仅仅有两个相互排斥的选项,请考虑单个复选框或切换开关等其他非互斥的选择控件;若当前选项时,且在有的屏幕空间下,请考虑使用下拉菜单或列表框。

由于互斥原因,所选项间避免重叠。例如:0-2020-40。

以某种逻辑关系或顺序(如按间顺序排列、重要顺序等)对选项进行上下或左右排列。

使一个单项为默认值,该项最好是大多数人会择的或者你希望户择的。但在极数情况,预可会导致正确假设。例如,涉及性别、政治、宗信仰等,这些情况可供默认项。

标签文本应该简明扼要,并提供上下文,以便用户能够快速理解并做出选择。

为读,请将单选按钮标签文留为单行。

不选项末尾使用符合。例如,逗、分或句。

将选按钮图标和文本包含在一起,共为点击域,以便用户操作。

进阶方法!可能是最全面的组件设计完全手册

将多个选按钮并排放置,请通过显的间距使其容易。一做法,文本身按钮的距离假为X,那该文本下一个按钮的距离为≥2X。

进阶方法!可能是最全面的组件设计完全手册

在用户选按钮交互,请提供良好视觉反馈,且按钮本身状提供良好的能供性(默认、悬停、选中和禁用)。

二、Checkbox 复选框

允许用户从非互斥的选项中,选择任数量的选项(零个、一个或多个)。个使用,复选框提供了个互斥(二)的操作选项。

1. 外观形式

常规:

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

全选操作(未全选状态):

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

复选框用表示状态的标,不直接导致命令的触,需要最终和命令按钮(提、确定等)操合,若是直接触请改用切换开关(切换开关并非绝对情况下是直接触命令操);若复选选项时,且有的屏幕空间下,请考虑使用复选列表框。

如果只一复选框,您可以根据表单格式选择使用标签、文本或组合;如果多复选框,标签将描述整复选框,文本则表述各自的选项。

进阶方法!可能是最全面的组件设计完全手册

标签文本应该简明扼,并提供下文,以便用户能够速理解并出选择。

标签文本使用正面肯定的措辞,以便用户清楚的知道开复选框将会发生什。避免使用否定的表达,例如 「同条款」 而不是 「不同条款」 或是 「开通知」 而不是 「关闭通知」 等等。

为了可读性,请将复框标签本保留为单行。

不要在选项末尾使用符合(例如逗号、分号或句号)。

将复选框按钮图标和文包含在一,共为点击区域,以便用户操。注意:由触摸/点击区域不包含标签,因此单击此标签将不切换复选框状态。

进阶方法!可能是最全面的组件设计完全手册

将个复选框并排放置时,请通明显的间距使其容易区分。一般做法,文与自身按钮的距离假设为X,么该文与下一个按钮的距离为≥2X。

用户与复选框交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中、禁用未全选状态)。

3. 讨论:仅两互斥的选项(二元)选择单选按钮还复选框?

具体看场景习惯用法。

复选框和选按钮之间的主要差别是:选按钮给人更加直的示,例如开启关闭,而复选

只表达一面信息,因此它的反面信息并是非直观,甚至对于某些户而言,并清楚勾和勾表达的含义。

习惯用法是遵循互联网品些默认处理,例如,注册意条款是使用复选框。

三、Icon button 图标按钮

图标按钮可以说是结合了单选按钮、复选框及命令控件变形形,性质上存在互斥(单选)和互斥(多选)。

1. 观形

文档编辑(Word及富文本编辑)可以说是图标按钮使用最佳案例,不仅满足多操作需求,节省空。

进阶方法!可能是最全面的组件设计完全手册

排列也是图标按钮常见用法。

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

  • 用户与图标按钮交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中禁用)。
  • 请确保图标的含义确,并配 tips 提示给予帮助。

四、 Switch 切换开关

用打开或关闭二元操的切换选项。

1. 外观形式

常规:

进阶方法!可能是最全面的组件设计完全手册

带文或图标:

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

  • 左/灰为关,右/彩为开。
  • 切换开可包括本或图标,例如「开/on」和「/off」标签,但建议标签过长,如果标签太长请考虑使他互斥的择控件。
  • 切换状态请使用微动画进过渡,而不是生硬呈现。
  • 在用户与切换开关互时,请提供良视反馈,且切换开关身状态提供良的能供(关闭、开启、禁用)。

3. 讨论:切换开在户更改后立即触发命令执行?

此说法并非绝对。

在 B端品及某些要情况下,触发开关操作依然需要用户再确定才会真正触发执。

五、Transfer 穿梭框/列表构造器

在页上显示 「」 列表和 「目」 列表,过使用按钮或拖拽,观在两栏移动元素,完成选择为。

1. 观形

常规:

进阶方法!可能是最全面的组件设计完全手册

带搜索,在操作者选项比较熟知情况下(例如,公司员工),搜索可以快速查找到想要选项。

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

行为上穿梭框是一种复杂、较难认知的一种控件模式,且占大量的屏幕空间,源项较的情况复列表框则是一种更为简单的替代方案。但是如果源列表项过多,又想被中的项更容易被看到,穿梭框则是错的择。

进阶方法!可能是最全面的组件设计完全手册

对于大量的可项,从易性角考虑,可按照项程、重要性、字母等进行列或供搜索(实时搜索),从而于户进行快速择。

列表提供全选和多选操作,以便用户能够在列表移动大量选项。

时显示当前被选中列表/ 「源」 列表的数量比及 「目的」 列表的数量。

若列表框内于视窗高度,列表框的高度:N列表+½列表。

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

六、Dropdowns 下拉(弹出)菜单

触发操作(击或移入触),会出现个模态弹框。允许用户从合进选择或执相应命令。下菜单将多合进了封装,有在用户需要时候才显示出来(按需显示),具有节省页空及简化前页等优。

1. 观形

下菜单。依为常规、分类、带搜索、多选

进阶方法!可能是最全面的组件设计完全手册

执命令,例如系统导航菜单、表格操作等

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

级联

进阶方法!可能是最全面的组件设计完全手册

树形(单、多)

进阶方法!可能是最全面的组件设计完全手册

操作(删除、添等)

进阶方法!可能是最全面的组件设计完全手册

上菜单。例如,见的右键操作及本择命令(如剪切、复制和粘贴等)

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

下拉选择器。多适用于颜色、日历(日月年)、日期、间等内容

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

在小的空间下,对个选项进行选择或内容为次要且不需要一直显示,下拉菜单是不错的选择。若选项少,请考虑使用单选框(当进行单项选择时)或复选框(当进行项选择时)。

下拉单选项按照某种逻辑顺序排序。例如,按照重程度或被选择程度(可能性)行排列。

对于大多数操作,当击菜或以外域,菜应该收起关闭;如果点击的菜项是多选操作,则菜应保持开状。

禁菜单项,而是隐藏,功的可发现性。

与搜索匹配关键予高亮显示。

下拉菜单文持简洁扼要,文内容为单行。

请根据具体况,义列表项的小宽度,以应其内。超出宽度从末尾截断,并添加省略,鼠标悬停显示全部文本内。

进阶方法!可能是最全面的组件设计完全手册

如果预先选择,请使用占符(灰色文本)行操作提示。例如:请选择。如果需指出所项目都用,例如,作列表过滤器,请将「全部」 作选项,并将其置列表的。

进阶方法!可能是最全面的组件设计完全手册

若下拉列表内于视窗高度,下拉列表的高度:N列表+½列表。

进阶方法!可能是最全面的组件设计完全手册

若需兼IE8,下拉框除了阴影效果(IE8阴影),还1-2px的线框描。

上下文菜的选项根据当前对象或情景进行配置。

拉择器多适于颜色、日历、日期、时间等容,若可输入请将整个区域作为触发区域。颜色拉控件应该有允许户输入的地方,这样户就可更方直观的输入牌色或他需求;对于自定义设置,可供一分色卡,这样对于知如何手、知如何搭配颜色的人而言,供了简单的择。

进阶方法!可能是最全面的组件设计完全手册

3. 关于下拉搜索?

下拉搜索有种情况,下拉选和下拉多选的情况。

在单情况,我们将搜索放在了原有的框体,流程如:户输入键字>实时匹配检索项>户点击项>成操作。

进阶方法!可能是最全面的组件设计完全手册

但在多的情况,由于是多操作,我们将搜索框放在拉菜单,这样就影响原有框体承载项的问题。

进阶方法!可能是最全面的组件设计完全手册

但是该模式极大的复杂了控件及户的交互行为。同样我们还需要考虑在该检索的键字,会产生户想要的多个结果吗?

例如添加公司员,过关键检索,基本是锁定单员,所以过关键来检索进多选概率较低,自然可采用如下案:

进阶方法!可能是最全面的组件设计完全手册

下篇:输入

允许户在应中输入信息。

见类

  • 输入框
  • 步进器/调器
  • 滑

一、Input 输入框

允许用户输入编辑文本的区域。

1. 外观形式

单行文本框,用于输入少的文本。

进阶方法!可能是最全面的组件设计完全手册

多行文本,用于输入字符,多行文本区域显示。

进阶方法!可能是最全面的组件设计完全手册

富文本,允许使用加的格式、内联图/链接文本输入。

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

容错式,允许用户输种式,并智能的处理从而满程序的数据要求。例电输,允许用户输空和 —,系统台自动清理数据以满式要求,而不是报错提示。

对于简短、固的单行输入可采用结构化格式,通过潜的限制使输入的字符数、类型不易出错,并使用户能够直观的看到输入格式。例如银行卡、身份证、时间信息。

进阶方法!可能是最全面的组件设计完全手册

掩码,对于重的私人信息或数据应该给予掩码保护。例如密码、电话及身份证信息,也分全部掩码及部分掩码。对于密码输入可提供「查看」操作,以便用户确认。

进阶方法!可能是最全面的组件设计完全手册

对于搜索操作的文本框,可提供清空捷操作,从方便用户速换关键词。

进阶方法!可能是最全面的组件设计完全手册

标签起到了向用户指示所输入的内的作用。输入框的标签,应使用词或简洁的词短语,置输入框的左或。

占位符不可替代标签,占位符会在用户输入字符后消失。占位符的功能是通过一个简短的提示来帮助用户输入数据。提示可以是示例值或对预期格式的简要描述。占位符的颜色使用较浅的色值,以避免给人默认值的误导。

帮助字于为填写供更多的上背景或指导。见的形式有:默认显示,键入显示,悬停或点击显示。

进阶方法!可能是最全面的组件设计完全手册

必填,指示户必填写的容。在标签末尾显示一个红色的「*」星号,或者使本表达,如果整个表单都是必填则无需标识。

进阶方法!可能是最全面的组件设计完全手册

若输入区域设置了字符或字数限制,应给予一定的示说明,当户输入规范的字符或超字数限制时应给予清除。例如记数器,在户输入每个字符时态更。

输入验证分为主动验证和被动验证两:

  • 验证在户输入的过程中就进行了验证。例如只接受数字的输入框,在输入字符或特殊符号时会被清除,且给予示说明,告知户信息的输入要求或规则。
  • 被动验证在键出(失去焦)时或命令操作(例如提交)后才进验证操作。

对于错误示最好的方式是放在控件旁边进行示,这样户可快速进行定位更正。于错误示本,应该给予户解决问题的方法和指导而是仅仅告诉户发生了错误(例如密码错误,而是示请输入6位上字符),且本在正确详细的情况保持简短易读,且避免机器语。图是见错误示位置:

进阶方法!可能是最全面的组件设计完全手册

进阶方法!可能是最全面的组件设计完全手册

用户输入框交互,请提供良好的视觉反馈,且输入框本身状提供良好的能供性(常规有:默认、悬停、键入和禁用;验证状有:提醒、报错和成功)。

进阶方法!可能是最全面的组件设计完全手册

对于多行文本可根据需求提供改变域的操作,以显示更多内容。为动和动种,体选择需要根据空间布局,内容要求进行决择,动给予用户更大的由度,动则在根据内容实际所需。

  • 拖拽控件:只改变高度高度宽度均可调整两种。外观功能均区别,请确使用请勿混用,以提供符合预及认知的模式,且设范围。
  • 输入框动增长(根据输入内容进行高度变化),只可改变输入框高度,请定最大高度。

进阶方法!可能是最全面的组件设计完全手册

对输框请设置合理的内边距。贴合边框的文导致视读取困难,且给人简陋之感。

进阶方法!可能是最全面的组件设计完全手册

二、Stepper 步进器/微调器

以微小浮动改变数值,步进括个输入区域、增加和减少按钮。

1. 观形

进阶方法!可能是最全面的组件设计完全手册

2. 最佳做法

步进器用于需要调数字值的情况,且输入值有大范围的限制及字符限制需求。

步进器默认始终包含一个值,默认值为一般户普遍设置的、你希望户择最佳值或较为全的数值(例如最小值)。

允许过击增加/减少按钮,键入数,使用键盘快捷键(上/下,页上/下)改变数值。

为步进器设置最大和最小值。达到最大/最小值时,增加/减少按钮和上/下键盘将被禁用。

用户与器交互时,请提供良好的视觉反馈。增加/减少按给予默认、悬停、选中禁用状态,输入区域给予默认、键入报错状态。

进阶方法!可能是最全面的组件设计完全手册

请设置输入区域的字符限制。一般0-9-,+字符,若不允许负,那就只可输入0-9。当输入不规范的字符时清除或显示小,输入的超过则显示,并显示具提示明输入范围。

问题:当用户输入不格的值,再未键出的情况下滑出步进器的视图域点击保存,如何更好的提示报错?

滑到错误示区域并示错误信息。

进阶方法!可能是最全面的组件设计完全手册

三、Slider 滑块

从一个范围值中进行滑动选择的控件。通常由一条水线(水或垂直)、可移动柄和标签(有滑块标签、范围标签、值标签)组成。

1. 外观形式

滑块,选择一的值

进阶方法!可能是最全面的组件设计完全手册

双滑块,用于选择值的范围

进阶方法!可能是最全面的组件设计完全手册

段式,不允许选择任值,默认贴靠段的值

进阶方法!可能是最全面的组件设计完全手册

垂直和水,根据值的点及页面情况更加适的布局

进阶方法!可能是最全面的组件设计完全手册

图标数值文本

进阶方法!可能是最全面的组件设计完全手册

带有输入框,可输入文本字段,输入数据滑块同步

进阶方法!可能是最全面的组件设计完全手册

2. 法

当用户设置连续(如音或亮度)或一系列离散(如屏幕分辨率设置)时,可使用滑块。

滑块是一种有界的选择或输入控件,其范围和选择数值的位置均得了可视化的呈现。根据体的使用情景将滑块细为:滑块(值)、双滑块(可选择范围)、段式滑块(非范围内的任值)和带输入框滑块(和输入控件保持同步),以及相应的水或垂直方向。对于书写及阅读习惯从左向右的人群而言,值的范围一为左右大,上大下。

如果你允许滑取任意值,请使分的步骤点。

如滑块可编辑,鼠标悬在手柄上时,手柄高亮显示,并出现手型标。

进阶方法!可能是最全面的组件设计完全手册

允许用户使用拖拽和击改变手柄位。

在某情况下,滑块直接充当为命令控件,在用户选择时或选择,操结果即时生效。 例音量控件。

当滑块其实时显示滑块的方时,请使用标签显示滑块的当。

进阶方法!可能是最全面的组件设计完全手册

希望对各所帮,遇到问题时可以翻看看。

欢迎关注作者的公众号:「int-PD」

进阶方法!可能是最全面的组件设计完全手册

图片素材作者:Berin Catic

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

合作作者 Hesivell 带来的读书笔记,关于我们曾经介绍过的《Design Systems》一书,并配有涂鸦笔记风格的手绘插图,强烈推荐...
团队协作
最近团队尝试使用Figma构建一套适用团队的组件库与规范,发现Figma比Sketch的构建方式要更简单和更灵活,尤其是自动布局(Aut...
Figma
关于悬浮按钮设计,它虽然看起来非常小巧,但它蕴含了非常多的设计要素以及产品设计原理。本文中,笔者从 APP 悬浮按钮的使用...
交互组件
原子设计系统(下均称为设计系统)这个词应该已经流行很久了,像蚂蚁金服最近出的 Ant Design 3.0 也说是基于「设计系统」进...
界面组件
编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库...
B端设计
Figma作为一个线上协作设计平台,因其强大的组件功能,越来越受到设计团队的青睐。 为帮助用户对组件进行更加高效的管理,20...
Figma
在本文中,作者对泛娱乐微信店改版设计进行了总结,有很多值得借鉴的地方,与你分享。 一、项目背景 1. 「泛娱乐微信店」是什...
品牌认知
单选框是非常常见的表单元素。它通常被用来从一组互斥的相关选项中选择一个单独的选项。当点击一个未选中的单选框时,它会被...
交互设计