数据的编辑操作 编辑表格数据在大众化的W...
采集 评论
查看来源 uisdc.com
存在的隐居者
通过花瓣采集插件采集于2023-02-22 10:18:58
数据的编辑操作
编辑表格数据在大众化的Web应用程序中并不常见。不过，在企业级Web应用程序中，表格则占据统治地位。此时，最常见的用户需求，就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。
表格数据的操作大体可分为显性与隐性。显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。
单行操作和批量操作
操作项一般存在于行数据最后，为固定列，或表上方位置，两者对应多种操作场景。
单行数据操作
表格
存在的隐居者
大型数据表如需减少与表格无关的视觉干扰，提供表格的沉浸式阅读体验，可提供全屏查看的入口，但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容，只留下表格区域，用户通过ESC键或按钮随时退出全屏模式，学习成本较低。 当表格数据为空时，在表格的空白内容处加入可创建的快捷入口，引导用户新建表格数据，或者导入数据。如下图邮箱已发送邮箱为空时：
全局表格编辑：点击表格编辑按钮，当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标，进入一种特殊的编辑状态，不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时，如大型填写报表。 大型数据表由于支持编辑数据处多，这种方法的另一个问题是容易填错单元格，想象单元格的密集，用户意外编辑错误也时有发生，这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正，应直接引导用户更正；如果报错内容不可被更正，则告知用户原因。
不过，表内编辑图标会涉及平衡页面中视觉干扰的问题，如果功能及其提示在页面中的数量过多，很可能造成功能的利用率下降。如果一行有多个编辑选项，则可以适当使用弹窗编辑数据；如果表格有大部分单元格数据需要编辑，则可以全局编辑。
行编辑：针对同一行标签下的数据编辑。新增数据行后，视图定位到新增的行并高亮显示，让用户快速聚焦。几秒后高亮消失，以免过度干扰用户。
单元格编辑时，也可以设置整个单元格为热区，以便用户触发。 覆盖层编辑：点击编辑图标触发；通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面，但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层（如对话框）作为编辑窗口。 选择覆盖层编辑而非行内编辑的原因也很多。有时候，不可能把某个复杂的编辑任务安排在同一个页面中完成，如果嵌入页面的编辑区域太大，会因为把内容过多地推向下方而损害页面的整体感。 而其他情况下，也可以选择中断当前页面流，尤其是被编辑的信息本身非常重要时。覆盖层
单元格编辑、行编辑与表格编辑 针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性，表内编辑一般优于弹窗。要启动编辑功能，必须通过鼠标单击，而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发，鼠标每经过一个单元格就得显示一个编辑框，那这种编辑模式就会干扰到不同单元格间的切换，会有多么烦人。 单元格编辑：针对单个，不连续的可编辑的单元格，为了让功能更容易被发现，可以在单元格数据旁放置编辑图标，这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑，单元格内出现输
单选、多选和全选 数据较多时，单个选择数据费时费力。单选框是只能单选，而复选框是能选择单个、多个或全部选择项，而实际上纯粹的单选很少见，所以建议一般场景下在表格最左侧加上复选框，如前面说到的批量操作，多选后，就可以批量操作。点击选框所在行的局部能让整行被选中，每个选定的行都接受突出显示处理，这种做法可增大点击区域减少界面的混乱。 具体设计时，可以按照数据类型进行选择，如邮件已读、未读等。 可进行选择的表格需告知用户已选数据量，在翻页时是否允许跨页选择；全选是当前页视图中的所有项目还是选择表格中的所有
批处理操作 对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。 表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。 二次确认提示：对于用户操作结果给出提示窗反馈，用户点击「删除」后，直接操作；出现提示框告知用户操作成功，并提供用户「撤销」的按钮；
如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可使用隐形操作，鼠标在行区域悬停时，可对当前行背景作出区分，或放大悬停区域，同时行尾出现可操作按钮，进行行操作。如谷歌邮箱：
数据的编辑操作 编辑表格数据在大众化的Web应用程序中并不常见。不过，在企业级Web应用程序中，表格则占据统治地位。此时，最常见的用户需求，就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。 表格数据的操作大体可分为显性与隐性。显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。 单行操作和批量操作 操作项一般存在于行数据最后，为固定列，或表上方位置，两者对应多种操作场景。 单行数据操作
视图切换 可以通过视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。
非模态弹窗对于主动使用的用户来说可能很有用，可以通过一系列操作，比较不同行数据的细节：
弹窗 包括模态弹窗和非模态弹窗，模态弹窗是仅支持打开一个弹窗进行详细查看，非模态弹窗是可以同时打开多个，并允许拖动弹窗位置进行信息对比。 模态允许用户留在表格视图中，且更多地关注附加信息和操作：
子表格 表格中打开表格，表格组节把相关的行组合在一起，并且能够收缩和展开，各组节层级要有样式区别。如有需要，在每个组节里可以显示数据概要信息。
查看次要信息 表格内容的取舍要建立在对业务的了解之上，尽量精简指标，隐藏不必要信息，减少干扰，避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量，建议默认只展示用户所必须的信息，其他次要信息通过展开下拉等方式展示，为辅助信息提供深层入口。 展开行 展开行允许用户无需打开新页面在表格内即可查看附加信息，防止用户迷失。
一万两千字！超详细的Web表格设计指南 - 优设网 - 学设计上优设
一万两千字！超详细的Web表格设计指南 - 优设网 - 学设计上优设
树形表 行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
自定义选择列 由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上，一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。 针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，
控制表内容 控制列—可伸缩列 由于存在多个数据标题和列，我们只能根据表格的宽度来展示数据。在某些情况下，表格可允许用户选择他们关注的列，在其固定宽度基础上，让用户可以自由拖动列宽边缘以调整列宽。
同采自
uisdc.com
该采集也在以下画板
加载更多
推荐给你的采集
采集
behance.net
顺物荣枯采集到主题活动

夏日逃离/SUMMER MUSIC FESTIVAL : 夏日逃离音乐会 | Summer...

69

顺物荣枯 采集到
主题活动
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

361

Lily名字十七画 采集到
场景素材
采集
雨ˋ滴滴答答采集到二次元

418

雨ˋ滴滴答答 采集到
二次元
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
该采集待公开
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
采集
xiachufang.com
Dora爱幻想采集到面包片

如何做超厚的沼三明治~详细tip！牛油果鸡蛋午餐肉三明治~

1151

Dora爱幻想 采集到
面包片
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
mp.weixin.qq.com
菓仔fish采集到练习

【绘画参考】Hong SoonSang 的角色设定图（人物设计必学）

389

菓仔fish 采集到
练习
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

215

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
meigongyun.com
伊岚分享采集到png素材

冬日冷色调圣诞手绘花卉系列元素 Scandi Fest collection

335

伊岚分享 采集到
png素材
采集
惜朝采集到绘画

206

惜朝 采集到
绘画
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室
采集
海盐荔枝的夏日采集到动漫

动漫

62

海盐荔枝的夏日 采集到
动漫
采集
静候好戏采集到人像

泽捻知

612

静候好戏 采集到
人像
该采集待公开