引言：计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上，你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前，只可以浏览内容的一部分。
你最终想知道什么是最有效率的视图，你应该用列表视图还是网格视图？你的决定可能会影响到用户怎样快速并且容易找到他们正在寻找的东西。
列表视图和网格视图
列表视图在一个单行列表中显示你的内容。它的文本重并且没有图片。最多你可以在文字旁边显示一个小图标或缩略图。用户靠阅读文字来做出他们的选择。
网格视图在双行或更多行列表中显示你带有图片的内容。这张图片占有很大的空间，并且文字被缩短到防止文字环绕图片。用户靠图片做出他们的选择。
列表视图 网格视图
列表视图预防过多滚动
许多设计师用网格视图，因为它更吸引眼球。但问题是网格视图强迫用户滚动频繁。
网格视图包括了使得页面更长的图片。它将会给用户带来更多滚动去浏览所有可用的操作。这对于他们的指头来说，这有太多的滚动。
列表视图通过让页面变得更短来防止过多的滚动。除去图片，每一屏幕被允许放上更多的选项，也允许你在同一页面用折叠页增加页面的子选项。用户发现他们通过浏览标签正在寻找东西。
用户不得不滚动更多来看到全部选项
列表视图放置草率的选择
网格视图不仅强制用户滑动更多，而且使他们做出草率的决定。人们会受到图像如此的刺激，以至于他们会选择第一个出现在他们眼前的选项。
这往往会导致他们在某个区域，而这个区域没有用户正在寻找的东西，然后用户不得不返回继续滑动。在如此多的刺激的图片下，很容易让用户受到分心和误导。
列表视图可以防止用户正在做草率的选择。文字提供了足够清晰的信息来帮助他们找到他们想要的内容。他们在阅读完所有的选项后能够做出最正确的选择。
明显的文字帮助用户做出有根据的选择
网格视图对查看细节最有用
除了审美情趣，网格视图还会在用户检查细节时帮助他们。比如，如果一个用户在购买一件T恤，他们会在脑海中有很多具体的款型。只有当用户缩小内容类别后，网格视图才是最有效的。
一个展示衣服的网格视图，带来的混乱多于帮助，因为只有少部分的图片是跟T恤相关的。用户不得不滚动去过滤掉大量他们浏览时不相干的图片。
但是一旦用户在浏览他们想买的t shirt商品时，图像则则会更影响选择。用户可以浏览T恤和更容易的发现现货的细节。
具体形象的细节更容易被突显
最后的思考
大部分用户在行走中并且在移动网站上没有更多的时间。他们需要能够尽快的找到内容。在这个过程中，你的选择是个关键。
在桌面上有很多灵活的布局，但是在移动端上，你的选择很重要。让用户操作的少看得多的视图就是赢家。
译者观点
在什么时候用列表，什么时候用网格，其实也要看产品在不同阶段的不同场景的不同诉求，例如在产品初期，一款购物网站自然想向用户展示更多的产品细节，大的图片会刺激更多的用户点击进去。这种做法是低效的，但确实存在促成交易的可能。而列表更适合于工具型的应用，它更站在用户的角度上，达成一个高效的结果。
-----
原文：http://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/
作者：Anthony
译者：SmallMaaa
转载自：优秀网页设计微信号
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/11076/
