第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

中后台产品的表格设计,看这一篇就够了(原型规范下载)(3)

时间:2018-01-25 10:57来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
对单项的操作,如删除、启动、暂停等。这些操作应放置在最表格右侧,为固定列。如果操作比较多时,需将多余的操作折叠为更多,表面上只保留1到2个

  对单项的操作,如删除、启动、暂停等。这些操作应放置在最表格右侧,为固定列。如果操作比较多时,需将多余的操作折叠为‘更多’,表面上只保留1到2个常用操作。

  

中后台产品的表格设计,看这一篇就够了(原型规范下载)

  2、编辑

  在浏览表格内容时,有些数据我们在查看以后是需要进行编辑的。此时,我们需要提供给用户快捷的编辑方式。如果需要编辑的项较少时,我们可以在鼠标移入编辑项时显示编辑样式,单击编辑项时

  进入编辑状态,直接修改保存即可。当需要编辑的项较多时,可以在操作栏放置编辑。点击编辑,使所有编辑项进入编辑状态。修改后,点击保存,统一保存。值得注意的一点是,最好能够响应键盘操作,键盘的enter能够触发保存操作。

  

中后台产品的表格设计,看这一篇就够了(原型规范下载)

  3、勾选

  (1)全选

  全选选中后,可以对全部项目进行批量选中。但在多页的情况下,全选通常有两种需求:选中当前页和选中全部。我们应提供给用户选择,可以分别实现这两种选择。

  

中后台产品的表格设计,看这一篇就够了(原型规范下载)

  (2)跨页选择

  有些时候,我们需要勾选的项目在不同页。在第一页勾选几项后,翻页再去勾选其他项时,往往无法快速获知已选项的情况。所以,我们在跨页勾选时,在切换到其他页面时,需要在表格顶部显示已选项的情况,允许删除其中某一项和清空所有。

  

中后台产品的表格设计,看这一篇就够了(原型规范下载)

  (3)勾选状态的保持

  在一些场景下,我们需要对同一批勾选项进行多个操作。所以,勾选完成后,执行第一个操作以后,我们需要保持勾选状态,以便执行接下来的操作。

  4、按钮

  在表格顶部放置按钮,执行常用操作,一般优先放在左侧(勾选以后进行操作的鼠标移动路径短)。如果按钮较多,需要根据按钮类型,将具有相同功能的按钮折叠组合。有一些按钮是配合着勾选进行批量操作的,当没有勾选项时,需要禁用该按钮。

  5、导出数据

  表格通常用来展示数据,用户往往会有将数据导出的需求。导出数据的功能设计时,我们需要考虑这些。

  (1)文件格式

  通常使用xlsx。该格式展示效果好,兼容性好,便于后期处理。但当数量量较大的情况下,基于导出速度的考虑,可以使用csv格式。

  (2)文件名

  文件名要能够表达数据内容,通常使用【页面】【表名】【时间】等字段来确定表名。

  (3)模板

  导出的文件的模板。通常情况下,我们导出全部列的数据,纵使页面上展示的是部分列的数据。部分情况下,我们需要对模板进行一些样式上的处理,以达到美观的效果。

  (4)导出耗时

  导出数据的过程是先生成该数据,然后在下载该数据。当导出的数据量较大的情况下,生成数据耗时较长,我们需要考虑导出耗时。一种简单的设计方法是,点击导出数据后,变为导出中,以告知用户数据正在导出。

  结语

  确定规范的意义,在于能够减少协作中的沟通成本。当产品、UI、前端都对同一套规范达成共识时,开发效率会成倍的提高。产品在原型图中无需添加常规的交互操作,也不用考虑前端的可实现性。UI和开发在看到你的原型图时,能迅速地根据之前的规范,明白你想表达的意思。这样,产品的精力就能更多地放在需求上。

  在学习的过程中,大量参考了蚂蚁设计。推荐大家可以去了解一下。

  本文有大量内容是从交互设计角度说明的。由于我之前是一直专注于需求,对于交互上的知识不是很充分,结果导致开发出来的产品的交互体验太差。所以自己去主动学习了相关的内容。对于中后台产品经理,尤其是团队内的开发资源不是很足够的情况下,引入一套规范来实现自家产品的标准化,是很有作用的。如果你的团队已经有成型的规范,请对本文中的内容适当采用。产品经理的主要精力还是应该放在需求上。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕