您手机网站设计上的表格可能会存在问题,它在手机里看起来或用起来用户体验可能不是那么顺畅。这听起来像是一个简单的问题(应该有一个简单的解决方案),但事实可能不像您想的那么简单。
造成这个问题的原因有很多,缺乏响应能力、将表创建为图像、奇怪的数据格式会造成混乱,但也有可行的设计解决方案。
让我们回顾一下重新考虑移动版网站设计的方法,以便您的数据和信息在手机上看起来就像在任何其他更大的设备上一样令人惊叹。
屏幕宽度
如果您创建了一个网站表格,而用户不从左向右滑动就无法看到手机上的所有列,那么内容还在那里吗?
事实上,即使允许水平滚动,内容也不太可能被看到。在大多数情况下,让手机应该适合于可用的viewport。这就是网站设计响应移动版如此重要的原因。
但是,响应性并不是过于宽的手机的解决方案,因为所有内容都将收缩到不可读的大小,除非有一种逻辑方式来堆叠内容。
更好的解决方案是考虑在手机中真正重要的信息,并且只显示该数据。虽然这是一个最佳实践,但在较小的屏幕上,它变得至关重要。大桌子笨重且难以使用。只有您最忠实的用户或追随者才会深入了解这些信息。
评估数据、表格真的是突出显示信息的最佳方式吗?表格最适合用于需要分组到逻辑和有组织的框中的信息,以增强可读性。
请注意,当网站设计浏览用户从台式电脑转到移动设备时,彭博会对股票信息进行压缩(见上图)。这一实践表明了对用户的理解,以及移动用户需要什么信息,因为有些人可能希望在桌面上获得更多数据。
滚动
和手机上的其他内容一样,在合理的范围内滚动是完全可以接受的。不要让用户滚动得太深而无法获得表中的所有信息。
对于长滚动表,有一些可用性方面的问题:
标签会发生什么?
比较信息很困难,影响了理解
点击元素可能在滚动期间被无意中激活
如果需要使用滚动,请考虑使信息更易于管理的方法。例如,用户是否需要比较产品?允许他们选择要比较的项目,并在一个新的无滚动表中打开它们。