全文共 1772 字,阅读需要 7 分钟
树形选框和穿梭框的区别?
有同学问我:树形选框和穿梭框有什么区别?
其实这两种组件方案都可以解决 “处理多种选项” 的问题,两者的不同点如下:
树形选框
单一列表的树形选框,其特点为:
1. 通常适用于选项少的场景,不需要频繁上下滚动鼠标查看,选择后的选项结果一目了然。
2. 在页面中占的空间小,也可以放置在下拉菜单中使用。
3. 一般更强调关联性和层级性。比如权限与角色之间的关联;角色与角色之间的上下级关系和权限包含关系。
穿梭框
双列列表的穿梭框,其特点为:
1. 用直观的方式在两栏中移动元素,完成选择行为。一列为源列表,一列最终被构建的项目列表,用户可以看到两个列表中的项目并进行操作,“数据源” 和 “结果” 清晰可见。
2. 占用更多空间,可以展示选项的更多信息,也可以包含更多结构,但左右两列的选项结构须保持一致。
3. 一般强调权限是用于 “给予” 而不是 “复制” ,比如可以用于描述:一个权限从 A 手中转到 B 手中,B 拥有权限的同时,A 不再具备权限。
大家可以对应业务场景,选择更适合的组件。
按钮的状态设计
有同学对我说,他看到有的平台按钮的状态分为鼠标 “悬停”、“点击” 和 “按下” 三个样式;有的平台的按钮 “点击” 和 “按下” 的状态一致。所以按钮的状态是根据什么来做定义的呢?是不是越全面越好呢?
其实关于按钮的状态分类,在能够给用户基本操作反馈的前提下,并没有绝对的好坏之分。平台之间出现这些差别的原因是由设计系统的设计理念和风格来决定。
举个例子,下图是一个比较夸张的案例:某个组件系统的设计理念是【尽可能模仿真实世界中的交互状态】,图中按钮模仿的就是真实世界中的物理按钮反馈状态,但由于页面上的二维世界不具备三维世界中的“海拔/高度”的概念,所以更多是通过改变或增加颜色、动效、投影等,对按钮进行“高度”的体现。
- 做好的尺寸规定直接运用到业务中,有现成的检验场景;
- 不至于白费功夫,做了一大堆的尺寸分类和说明但无处应用;
- 尽可能减少设计师在查找和使用组件时的多种选项干扰。