重新思考移动版网站设计。

网站设计上的表格可能会存在问题,它在手机里看起来或用起来用户体验可能不是那么顺畅。这听起来像是一个简单的问题(应该有一个简单的解决方案),但事实可能不像您想的那么简单。

造成这个问题的原因有很多,缺乏响应能力、将表创建为图像、奇怪的数据格式会造成混乱,但也有可行的设计解决方案。

让我们回顾一下重新考虑移动版网站设计的方法,以便您的数据和信息在手机上看起来就像在任何其他更大的设备上一样令人惊叹。

1、屏幕宽度

重新思考移动版网站设计(图1)

如果您创建了一个网站表格,而用户不从左向右滑动就无法看到手机上的所有列,那么内容还在那里吗?

事实上,即使允许水平滚动,内容也不太可能被看到。在大多数情况下,让手机应该适合于可用的viewport。这就是网站设计响应移动版如此重要的原因。

但是,响应性并不是过于宽的手机的解决方案,因为所有内容都将收缩到不可读的大小,除非有一种逻辑方式来堆叠内容。

更好的解决方案是考虑在手机中真正重要的信息,并且只显示该数据。虽然这是一个最佳实践,但在较小的屏幕上,它变得至关重要。大桌子笨重且难以使用。只有您最忠实的用户或追随者才会深入了解这些信息。

重新思考移动版网站设计(图2)

评估数据、表格真的是突出显示信息的最佳方式吗?表格最适合用于需要分组到逻辑和有组织的框中的信息,以增强可读性。

请注意,当网站设计浏览用户从台式电脑转到移动设备时,彭博会对股票信息进行压缩(见上图)。这一实践表明了对用户的理解,以及移动用户需要什么信息,因为有些人可能希望在桌面上获得更多数据。

3、滚动

和手机上的其他内容一样,在合理的范围内滚动是完全可以接受的。不要让用户滚动得太深而无法获得表中的所有信息。

对于长滚动表,有一些可用性方面的问题:

标签会发生什么?

比较信息很困难,影响了理解

点击元素可能在滚动期间被无意中激活

如果需要使用滚动,请考虑使信息更易于管理的方法。例如,用户是否需要比较产品?允许他们选择要比较的项目,并在一个新的无滚动表中打开它们。

4、数据排序

重新思考移动版网站设计(图3)

下面是为移动设备在表格中管理复杂数据的真正技巧,使用智能排序和过滤。

通过允许用户通过过滤器选择与他们相关的信息,表格将缩小到一个更易于管理的大小。如果允许进行额外的数据排序,那么最相关的信息就会出现在表的顶部。

这种做法对数值或比较数据非常有效,当您将表用于其他类型的信息(如地址或双列数据表)时,它就不能很好地工作。

在进行了硬编辑之后,仍然有大量信息需要管理时,排序和过滤是最有意义的。

5、图标和视觉元素

重新思考移动版网站设计(图4)

使用可视化元素使表格更易于理解和扫描,使用图标、颜色和线条来帮助区分文本元素,使内容易于理解。

小图标可以帮助视觉理解,让用户更容易扫描内容。

考虑一个列出联系信息的表格,电话或电子邮件的图标可以提供一个视觉提示,并作为一个点击元素来调用/文本或电子邮件。

用复选或x图标表示选择和不选择,这比一遍又一遍地说"是"或"不是"要快得多,范围也小得多。当一种视觉效果更有意义时,就去做吧。

表格的颜色可以使信息有条理,考虑对其他列或行进行阴影处理,以提高可读性。为代表信息读取方式的列或行使用阴影,例如最好从上到下理解的列采用这种方式;相反,通过在屏幕上阅读来更好理解的信息应该使用行阴影。对于包含完整数据集或全部包含完整数据集的元素,请考虑使用粗体文本。

最后,使用行(垂直或水平)分隔内容元素。在大多数情况下,线和阴影运行相反,如果同时使用(如垂直阴影和列之间的线)。

6、文本和缩写

重新思考移动版网站设计(图5)

您不需要在表格中把所有的东西都拼出来,使用可以理解的缩写是可以接受的做法。

您宁愿使用缩写或使文本很小,或必须删除更多的信息?在适当的时候,这个选项是最合理的。这里的关键是它必须有意义。

如果缩写改变了信息的含义或引起混淆,那么它就不是正确的选择。许多度量单位都有常见的缩写,比如px表示像素。

考虑缩写时,不要忽略图标或表情符号。这些常见元素有很多含义,可以用一个字符替换整个单词。

7、对齐

重新思考移动版网站设计(图6)

对齐是另一件能让大量信息更容易扫描和阅读的小事。

为了使文字更易于阅读,请按下列方式排列文字:

行应该在顶部垂直对齐。其他任何东西都会在屏幕上造成参差不齐的阅读体验。

包含多个单词或短语的文本块最好是左对齐的(从右到左阅读的语言除外)。还应避免使用有括号的文本元素。

行标签应该左对齐,除非它们特别短。

数字右对齐通常最合理,因为您可以直观地看到更大的数字,并且它将逗号和小数等元素放在一行中,以帮助扫描。

列标签可以是左对齐的,也可以是居中对齐的,但是所有的标签都应该有相同的对齐方式。

中心内容对齐只适用于单个单词或短短语;避免使用较长的tet元素居中。

总结

不可否认一个网站设计的表格在移动设备上是否能正常工作的决定因素通常取决于您试图呈现的数据。

如果信息可以包含在一个屏幕上或滚动屏幕上阅读,那么表格就能很好地工作。当桌子需要在屏幕上来回移动,从左到右,很难理解。对于数据来说,这并不是一个好的选择,您最好尝试一种更具叙事性的格式。

但是,虽然桌面设计是具有挑战性的,但它也很有趣。如果表现得好,这种有组织的信息表达方式可以帮助提高参与性和理解力。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/227871.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月23日 09:42
下一篇 2023年2月23日 09:42

相关推荐

  • 小编教你网站设计中如何增加用户点击。

    增加用户点击的方式,需要有一个度,并非是让用户一定要去点击这个链接,而是在网站设计中,增加用户的体验度,让网站通过巧妙的设计显得有趣,这才是多重点击设计的根本初衷。在诸多用户点击方式设计中,最为成功…

    2023年6月16日
    00
  • 分享网站设计的基本步骤是什么。

    网站规划是网站建设的第一步,好的开始是成功的一半,良好的网站规划是网站设计进一步开发的基础。网站规划时应该考虑以下几个问题:1、确认网站的目标,2、确认网站的技术实现,3、确认网站的优化和推广策略,4、…

    2023年6月15日
    00
  • 11世纪90年代令人惊叹的网站设计。

    在过去的20多年里,互联网确实经历了很多。我们已经将网页设计从最基本的Html标记转变为复杂的Javascript,CSS和html5编码。但回忆过去是很有趣,下面就带大家看看90年代的一些网站设计吧,十多年前的设计在现在可…

    2023年2月15日 SEO操作
    01
  • 网站的设计和布局怎样做才比较合理?

    网站的设计和布局可能很有吸引力,但如果它不是SEO友好的,它就无法在搜索引擎结果页面中获得更高的排名。 搜索引擎无法像我们和访客那样解释内容; 对于搜索引擎而言,网页看起来可能与您看起来不一样。 因此,在开始考虑网站的设计和布局之前,请牢记以下准则。

    2019年5月2日
    0238
  • 小编教你做网站设计怎样提前做好预算。

    最近,我们遇到了一些潜在客户,他们问了我们一些问题,或者对如何制定一个好的网页设计预算完全困惑。  我们理解  不管你看哪里,似乎有另一个设计组织或模板公司告诉你,你需要花很多钱才能得到一个网站...或者相…

    2023年6月18日
    00
  • 我来教你网站设计中如何为文章选择合适的配图。

    现在我们在更新网站文章时,都会为文章搭配图片,这样做不仅可以丰富网站文章的内容,同时更可以提高用户体验。但有时想要为网站文章选择一张合适的配图,确实会有一些难度。本文就给大家分享一下,怎样才能为网站…

    2023年6月15日
    01
  • 专业的工具,让我的网站设计工作更好。

    本文主要介绍不同创意专业人士使用的网站设计工具和资源,以及它们所支持的工作流。我们生活在一个科技时代,我们知道总会有更好的工作方式,只要我们能找到合适的网站设计工具。这就是关键,不是吗?让我们来看看…

    2023年2月19日 SEO操作
    00
  • 小编分享网站设计需要注意哪些问题。

    大家都知道网站设计需要涉及很多因素,而且不同类型的网站,在设计时需要体现的内容也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信息做展示。但对一个电子商务网站来说,主…

    2023年6月15日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息