欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:01:25 17:12:34 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1584个文字,预计阅读时间4分钟
导语
经过了将近一年的后台产品经历,踩了很多坑,试了很多错,也学习到了很多东西,目前也形成了自己的一套规范。本文将其中的部分收获汇总成文,希望能够对大家有所帮助。

  经过了将近一年的后台产品经历,踩了很多坑,试了很多错,也学习到了很多东西,目前也形成了自己的一套规范。本文将其中的部分收获汇总成文,希望能够对大家有所帮助。

  

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

 

  后台产品有一个很重要、常见的元素,就是表格。表格承担着详情入口、数据展示的功能,看似简单,其实里面的细节特别多。在以效率为最重要的需求的后台产品中,如何设计一个能够高效率地进行查看和编辑的表格,考验着每一个后台产品经理的基本功。通过本文的讲解,按照本文的规范来设计表格,基本上可以做出一个不会出错的表格。

  表格主要承担着查看和编辑两个基础功能。如何能够让用户方便、高效、舒适地查看数据和编辑数据,需要设计很多的辅助功能。下面,我们就围绕着这两大功能,就具体的功能点来进行探讨。

  原型预览:/s/1eTxGbHg

  第一部分:查看

  1、行

  (1)默认每页行数

  该行数太多时,会导致页面加载速度变慢;行数太少时,会导致用户需要不断翻页,浏览效率降低。默认每页行数需要根据用户的实际使用场景来确定,稳妥的做法是使用20或50。

  (2)默认每屏行数

  每一屏能显示的行数。该行数太多时,会导致行高值较小,单行的查看效果差;该行数太少时,会导致用户需要不断滚动页面,浏览效率降低。该行数和页面分辨率有关,需在考虑到主要用户的使用场景(笔记本还是台式、屏幕大小、主要分辨率)后进行确定。

  (3)每页行数多于每屏行数时的处理方式

  大多数情况下,每页行数是多于每屏行数的。在这样的场景下,用户使用的时候会发现这样一个问题:向下纵向滚动页面查看表格内容,滚动到页面中部或底部时,表头是无法看到的。用户在看到一个数据时,是不能够直观地知道这是哪项数据,从而需要向上滚动查看表头。尤其是面对列数较多的表格时,这样的场景会经常发生,页面不断地上下滚动,查看效率及其低下。

  解决这个问题,通常有两种处理方式:

  固定表头:表头在滚动到页面顶部时,始终固定在该位置,用户能够方便地看到表头和数据的对应关系。

  表格的竖向滚动条:为表格添加竖向滚动条,通过拖动竖向滚动条查看表格内容。表头是不会被拖动影响的。

  2、列

  (1)列隐藏、排序

  表格的列数较多时,在一屏内是无法展示全部列的,用户需要通过横向的滚动条来拖动查看不同的列。不同的用户在不同的场景下,关注的列是不尽相同的。为了满足这一需求,我们需要允许用户对列的自定义:包括哪些列展示出来,哪些列排在前面。用户可以把自己不关心的列隐藏,把关心的列放到最左边,从而能够在一进入页面时就能看到自己最关心的内容。

  (2)固定列

  至少有一列是不允许用户对其进行隐藏和排序的。该列通常是表格数据的唯一区别项,如订单列表的订单号等。

  (3)列宽

  列宽需要确定一个合理的默认值,从而使表格内容有好的展示效果。不能太窄,大量数据会显示不完整;不能太宽,大量留白会让浏览效率降低。

  列宽值的确定一般遵从以下原则:

  表头不能换行,列宽应至少大于表头。

  列内容的长度固定时,如手机号(11位数字)等,列宽应大于该固定宽度。

  列内容的长度不固定时,应考虑大多数情况下的长度情况。如个性签名,我们会允许10~50个字符,但经过数据分析发现,大多数个性签名的长度是在20以内的,我们可以设定列宽为20,从而保证大多数情况的完整显示。

  在较少情况下,我们设定的默认列宽没能满足数据的完整显示,而该数据的完整显示对于用户是比较重要的。针对这一情况,我们提供自定义列宽的功能,允许用户对列宽进行调整,从而达到自己想要的展示效果。

  (4)数据截断

  在数据长度大于列宽度时,我们需要对数据内容进行截断处理。截断以后,末尾加……鼠标移入时在附近显示浮层显示完整内容。

  浮层的位置:数据在纵向上的结合紧密时,浮层显示在左右;数据在横向上结合紧密时,浮层显示在上下。这样能够避免浮层对需要结合来看的数据造成遮挡。

  3、分页

  分页的功能较为简单,一般满足这些功能就可以了:上一页、下一页、首页、末页、快速跳转到某一页、每页数量的调整(20,50,100,200)

  

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

 

  4、排序

  (1)初始排序

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:互联网电商中的账单和订单

下一篇:语言交互场景探索(一):关于语言交互效率的探讨

  • 18893 文章总数
  • 2302728访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信