1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

列表和网格,哪个更适合你的APP设计?--九分科技

时间:2020-07-01   分类:设计管理    作者:网络   来源:网络整理   点击:136

列表和网格,哪个更适合你的APP设计?

内容采集来自9fen.net

copyright 9fen.net

在做设计时,经常为该使用网格还是列表所纠结,一直想找资料来深入了解下这两者的区别。为此呢,我找到了这篇文章,文章作者主要从三个方面来对比分析列表和网格的优劣,读完也算是小有所得,分享出来和大家一起共同学习探讨。

内容采集来自9fen.net

我们一起来深入探讨,列表和网格,到底哪一个更适合你的 UX 设计

内容采集来自9fen.net

当谈到如何创造出色的用户体验时,有成千上万的移动 UI 设计模式可供选择,这有好有坏。好的一方面,是我们可以有很多选择来满足我们的用户并给他们一个很好的用户体验;不好的一方面,就在于我们做原型设计时,最终可能会陷入该使用网格还是列表这样类似的争论中。

本文来自九分网络

无论你为移动应用和网站设计选择怎样的设计模式【公众号小程序分销商城搭建找九分网络,只要800元起:13106499520 QQ:452570709】,最终界面都应该是对用户有意义的,并同时减少不必要的挫折。考虑到这一点,让我们来分解一下列表和网格,看看当涉及到不同的内容和信息时,它们各自有什么样的优劣。

本文来自九分网络

列表和网格,哪个更适合你的APP设计? 本文来自九分网络

www.9fen.net

△ 左边是网格,右边是列表

www.9fen.net

一、网格布局

网格,它的特点是会有一些单元格组,这些单元格按横竖空白列隔开。在一些手机 APP 和网站中,这样的设计很常见。 www.9fen.net

在左侧的示例中,有2列,留白间隙在水平和垂直方向上都有切割。间隙是可以调整,可以把它们按照你想的方式进行大小的调整。 内容采集来自9fen.net

通常,网格被用来将屏幕空间划分为大小相同的单元格,使得导航更容易理解。网格的美妙之处在于可以被定制并且能让你的设计变得更加有秩序。 www.9fen.net

网格的其他好处: 本文来自九分网络

有效利用空间和结构。 九分网络

网格可以让视觉上更加和谐。 www.9fen.net

二、列表布局

列表布局不同于网格布局,这种导航模式简单地由一个元素与另一个元素按字母顺序、数字顺序甚至是随机的顺序排列组成。在上面的示例中,你可以看到一个标准的产品列表。

内容采集来自9fen.net

在几乎所有的 APP 中,都有一些列表可以在某个地方被找到。在使用垂直滚动菜单时,它们非常适合给用户操作和阅读。列表可以有很多不同的变体,比如上面的产品列表甚至是下拉菜单。列表占用的空间比网格少,所以如果内容文本繁多,用列表布局就会是一个很不错的选择。

copyright 9fen.net

列表的其他好处: 内容采集来自9fen.net

适合高效的浏览。 本文来自九分网络

在屏幕空间较少时表现更好。 copyright 9fen.net

现在,我们来看看在设备上使用不同的内容形式,并判断该用列表还是网格。

copyright 9fen.net

三、列表 vs 网格:内容消耗

列表和网格,哪个更适合你的APP设计? 九分网络

本文来自九分网络

网格是将逻辑结构带到设计中的一个有用工具。当我们设计一个网格框架时,【企业网站搭建就找九分网络,仅800元起:13106499520 QQ:452570709】,其实是在整理信息和内容元素,使其更易于理解。是的,网格真的很神奇。Rachel Shillcock 写了一篇非常好的指导文章,让你在网格中获得灵感。(译者注,文章链接:https://webdesign.tutsplus.com/articles/all-about-grid-systems–webdesign-14471

内容采集来自9fen.net

在我们的示例中,网格是紧凑的,包含图片和文本元素,还带有一个大的图标。由于网格中每个组块大小的关系,这种组合有很好的可用性。一切都很容易阅读,而且视觉上也很讨人喜欢。 copyright 9fen.net

一个好的建议是保持网格内容相对简单。使用网格,目的是给你的设计带来一致性,当你有很多元素被放到网格上时,它可能就开始变得密集和混乱,这可能导致你走上一条不归路。

copyright 9fen.net

在 UI 设计中,网格是非常常见的。随着响应式 Web 设计的普及,网格现在已经随处可见了。当涉及到要显示卡片或者设计一个基于任务的移动 APP 时,网格设计可以很好的帮助到你。 www.9fen.net

然而,当涉及到内容消耗时,网格就变得没有那么有用了,因为大的结构不能让设计者有更多的空间来展示额外的内容信息。

内容采集来自9fen.net

如果你采用极简主义的方法来显示内容,那么网格将会产生奇迹。但是,如果你有很多内容需要显示,
【网站托管维护就找九分网络,最低只要600元/年起!联系:13106499520 QQ:452570709】
,那么列表就能帮助你在整个 UI 中呈现相对更多的内容以及更多的视觉元素。从上面的例子中可以看出,尽管网格的外观非常吸引人,但是它却比列表占用了更多的空间。 copyright 9fen.net

标签: ui设计 APP设计 用户体验 经验分 APP界面 列表设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----