后台系统设计(上篇:选择)

最近在做一个标准版中台(就是展示配置+部分运营数据展示),做的有些吃力,刚好看到了一篇后台系统的组件整理(https://mp.weixin.qq.com/s/tY42iiEih-F1CWat9vQlnw),赶紧做好笔记以备不时之需。

常见类型:

·单选按钮

·复选框

·图标切换

·切换开关

·穿梭框/列表构造器

·下拉菜单

一、单选按钮

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

外观

常规:

分段控件:

在单个选项下,存在多组互斥选项,且互斥选项组之间存在一定关系,可以考虑混用分段控件和常规按钮,由于分段控件在视觉上占用更大的面积,故给人在层级上更加置前。

最佳用法

·只有一个选项或仅仅有两个相互排斥的选项,考虑单个复选框或切换开关等其他非互斥的选择控件;若当前选项过多时,且在有限的屏幕空间下,考虑使用下拉菜单或列表框。

·默认选项最好是大多数人会选择的/你希望用户选择的。但在极少数情况下,默认选项可能会不正确。例如,涉及性别、政治、宗教信仰等,这些情况下可以不提供默认选项。

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

二、复选框

允许用户从非互斥的选项中,选择任意数量的选项(零个、一个或多个)

单个使用时,复选框提供了两个互斥(二元)的操作选项。

外观

常规:

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

最佳用法

·复选框用于表示状态的标记,不会直接导致命令的触发,需要最终和命令按钮(如提交、确定等)操作配合,若是直接触发请改用切换开关(切换开关并非绝对情况下都是直接触发命令操作);若复选选项过多时,且有限的屏幕空间下,请考虑使用复选列表框。

·如果只有一个复选框,可以根据表单格式选择使用标签、文本或组合;如果有多个复选框,标签将描述整个复选框,而文本则是表述各自的选项。

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

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

讨论:仅有两个互斥的选项(二元)是选择单选按钮还是复选框?

具体是要看场景和习惯用法。

复选框和单选按钮之间的主要差别是:

单选按钮给人更加直接的示意,例如开启关闭,而复选只表达一面信息,因此它的反面信息并不是非常直观,甚至对于某些用户而言,并不清楚勾选和不勾选所表达的含义。

习惯用法是遵循互联网产品中的一些默认处理方式,例如,注册中的同意条款就是使用复选框。

三、Icon button 图标按钮

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

外观

文档编辑(Word及富文本编辑器)可以说是图标按钮使用的最佳案例,不仅满足多种操作的需求,且节省空间。

排列方式也是图标按钮的常见用法。

四、 Switch 切换开关

用于打开或关闭二元操作的切换选项。

外观

常规:

带文本或图标:

最佳用法

·左/灰为关,右/彩为开。

·切换开关可包括文本或图标,例如「开/on」和「关/off」标签,但不建议标签过长,如果标签太长请考虑使用其他互斥的选择控件。

·切换状态中使用微动画进行过渡,而不是生硬的呈现。

·在用户与切换开关交互时,请提供良好视觉反馈,且切换开关本身状态提供良好的能供性(关闭、开启、禁用)。

讨论:切换开关在用户更改后立即触发命令执行?

此说法并非绝对。

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

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

在同一页面上显示 「源」 列表和 「目的」 列表,通过使用按钮或拖拽,直观的在两栏之间移动元素,完成选择行为。

外观

常规:

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

最佳用法

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

项较少

·对于大量的可选项,从易用性角度考虑,可以按照选项常用程度、重要性、字母等进行排列或提供搜索(实时搜索),从而便于用户进行快速选择。

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

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

·若列表框内容大于视窗高度,列表框的高度为:N列表+½列表。

六、Dropdowns 下拉(弹出)菜单

触发操作(点击或移入触点),会出现一个非模态弹框。允许用户从集合中进行选择或执行相应的命令。下拉菜单将多种集合进行了封装,只有在用户需要的时候才显示出来(按需显示),具有节省页面空间及简化当前页面等优点。

外观

常规:

分类:

带搜索:

多选:

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

级联:

树形(单选、多选):

操作(删除、添加等):

上下文菜单,例如,常见的右键操作及文本选择命令(如剪切、复制和粘贴等):

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

最佳用法

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

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

·对于大多数操作,当单击菜单或以外区域,菜单应该收起关闭;如果点击的菜单项是多选操作,则菜单应保持打开状态。

·禁用菜单项,而不是隐藏,以提高功能的可发现性。

·下拉菜单文本保持简洁扼要,文本内容限制为单行。

·请根据具体情况,定义列表项的最小和最大宽度,以适应其内容。超出最大宽度从末尾截断,并添加省略号,鼠标悬停显示全部文本内容

·如果没有预先选择,使用占位符(灰色文本)进行操作提示。例如:请选择。如果需要指出所有项目都适用,例如,作为列表过滤器,请将「全部」 作为选项,并将其放置在列表的开头。

·若下拉列表内容大于视窗高度,下拉列表的高度为:N列表+½列表。

·若需要兼容IE8,下拉框除了阴影效果(IE8没有阴影),还要做1-2px的线框描边。

·下拉选择器多适用于颜色、日历、日期、时间等内容,若不可输入请将整个区域作为触发区域。颜色下拉控件应该有允许用户输入的地方,这样用户就可以更加方便直观的输入品牌色或其他需求;对于自定义设置,可提供一部分色卡,这样对于不知如何下手、不知如何搭配颜色的人而言,提供了简单的选择。

关于下拉搜索

下拉搜索有两种情况,下拉单选和下拉多选的情况。

·在单选情况下,我们将搜索放在了原有的框体内,流程如下:用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。

·在多选的情况下,由于是多选操作,我们将搜索框放在下拉菜单内,这样就不影响原有框体承载选项的问题。

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

例如添加公司人员,通过关键字的检索,基本是锁定单一人员,所以通过关键字来检索进行多选的概率较低,自然可采用如下方案:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

1431
来自专栏pangguoming

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) ? 由于普通图片放大后容易失真,这里我们最好用矢量图(...

4759
来自专栏星回的实验室

使用Headless Browser渲染页面

忙了很长一段时间,需要浮出水面来总结一工作了,不然做过的东西就像翻过一页完全没有记住的书,难免徒劳。

872
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

4196
来自专栏何俊林

视频画中画效果,拖动进度条可以seek到相应视频帧显示

在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面。

861
来自专栏章鱼的慢慢技术路

使用Photoshop合成两张不完整的图片

1642
来自专栏更流畅、简洁的软件开发方式

分享一个基于jQuery的锁定表格行列的js脚本。

  网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用...

2846
来自专栏转载gongluck的CSDN博客

MFC ActiveX (ocx)控件的开发

前言 ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼,其中主要的技术是组件对象模型(COM)。 ActiveX控件是一种实现...

7237
来自专栏前端达人

用 React 构建可复用的设计系统

React 让 web 开发简化了很多。原则上 React 基于组件的模式让代码分解和复用变得更加容易。 然而,开发者并不总是清楚如何跨项目分享他们的组件。在这...

1233
来自专栏阿凯的Excel

巧用格式刷解决合并单元格无法统计问题

最近小编一直在分享Python,有朋友和我聊! 我是谁!我来自哪里!我要去往何处! 好吧,为了能对得起我的名字《阿凯的Excel》 本小编决定每周不少于一...

3706

扫码关注云+社区

领取腾讯云代金券