写在前面的废话
我们的App正在历劫视觉改版和功能模块的大调整，常常需要对结构排版样式作抉择。前天，我的同桌Adam给我看一个他正在画的稿子，两个双列卡片网格(一个图标+标题、另一个背景图上压标题)和一个单列卡片列表(背景图上压标题)的样式，问我会选哪个。我很虚的指了一下单列卡片列表的样式，说了句“这个看得更清楚点吧”，就赶紧把手缩回来了。我几乎完全凭感觉作了选择(当然了，我毕竟只用了5秒钟)。5秒钟，那种心虚的感觉，就烙下了一个印子。
在寻找翻译目标的时候，看到了这篇文章，觉得起码可以给我遇到的问题提供一个思考思路(具体案例还是需要具体分析的)，所以决定这次就翻译它了。如果你也遇到了类似的问题，心里有了个印子，那请(耐着性子)继续往下看。
BTW，这是一篇很浅显、基础的文章，它早在2015年就发布了，我更加感到，自己的弱小。
照例还是会有英文屠宰场。我非常需要去研究一下如何创建文章内的定位链接。
学习是活下去的源泉。
在移动端上何时应用列表视图 vs. 网格视图 List vs. Grid View: When to Use Which on Mobile
原文地址：
http://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/
by anthony on 11/03/15 at 9:26 am
在移动设备上，搞清楚你的内容布局是一件很微妙的任务。台式桌面设备会给你全屏幕的范围，任你发挥。但在移动端上，屏幕空间是有限的。用户在开始滑动操作之前，只能在一屏看到所有内容的很小一部分。
这使得你开始考虑，对于浏览来说，什么样的布局样式是最高效的。你应该用一个列表视图还是一个网格视图呢？你的决定会影响用户是否能快速方便得看到他们想要找的内容。
Figuring out your content layout is a tricky task on mobile devices. Desktop devices give you all the screen space to work with. But on mobile, screen space is limited. Users can only view a small amount of content at a time before they need to scroll.
This makes you wonder what the most efficient layout for viewing is. Should you use a list view or grid view? Your decision could affect how quick and easy it is for users to find what they’re looking for.
列表视图 vs. 网格视图
List vs. Grid View
列表视图和网格视图
列表视图把内容展示在一个单列的列表里。它会有很多文字，没有图片。你顶多可以放一些小icon或者小缩略图在那些文字旁边。*用户是依靠阅读文字来做出决定的。*
网格视图把内容展示在2个或2个以上带图片的列表里。这些图片会占据主要的视图空间，并且文字会被尽可能的缩短，为了防止过多的文字折行。*用户是依靠看图片来做出决定的。*
List view displays your content in a single column list. It’s text heavy and there are no images. At most, you can display small icons or thumbnails next to the text. Users rely on reading the text to make their selection.
Grid view displays your content in two or more columns with images. The images dominate most of the space, and text is shortened to prevent too much textwrapping. Users rely on the images to make their selection.
列表视图可以防止过度的滑动操作
List View Prevents Overscrolling
许多设计师用网格视图因为它更加吸引视线。但问题就在于，网格视图会迫使用户做更多的滑动操作。网格视图包含了图片，这使得页面会长很多。用户需要滑动很多次，才能看完所有的选项。这可能会给他们的手指带去太多次的滑动。
列表视图通过缩短页面长度来防止过多的滑动操作。在没有图片的情况下，你可以在一屏中放下更多的选项。它还允许你用手风琴的方式，在同个屏幕上增加层级来展示子选项。*在这种情况下，用户是通过浏览列表中的标题来寻找他们想要看的内容的。*
Many designers use grid view because it’s more appealing to the eye. But the problem is that grid view forces users to scroll more. Grid view includes images which make the page much longer. It’ll take users many scrolls to view all the available options. This is too much scrolling for their fingers.
List view prevents overscrolling by making pages shorter. The exclusion of images allows you to fit more options per screen. It also allows you to use accordions to add layers of suboptions on the same screen. Users find what they’re looking for by scanning text labels.
列表视图可以防止草率的决定
List View Prevents Hasty Selections
网格视图不仅会让用户滑动更多，它还会造成用户草率地作抉择。用户会收到图片的视觉影响，以至于他们可能会根据对图片的喜好，选择最吸引他们的那一个。
这常常会使得，用户被引导到了一个根本不是他们想看的内容上去。结果就是他们必须返回到上一个页面，然后滑动更多。所以，在有那么多图片的吸引下，用户很容易被分心和误导。
列表视图可以防止用户做出草率的决定。文字提供了充足的精确信息来帮助他们找到他们想要看的内容。用户可以在阅读了所有选项后，做出最优的选择。
Not only does grid view force users to scroll more, but it causes them to make hasty selections. Users get so stimulated by images that they’ll select the first option that appeals to them.
This can often lead them to a section that doesn’t have what they’re looking for. The user then has to go back and scroll further. With so many stimulating images, it’s easy for users to get distracted and misled.
List view prevents users from making hasty selections. The text provides precise enough information to help them find the content they want. They’re able to make the best selection after reading through all the options.
网格视图对于审视细节是最好的
Grid View Works Best for Examining Details
除了视觉上的美观，网格视图还可以帮助用户审视细节。例如，一个用户在选购衬衫，ta可能会在脑子里出现一个具象的款式。这种情况下，仅当ta在衬衫类别里挑选具体款式时，网格视图会是最高效的。
因为如果一个网格视图展示了各种服饰，这种形式对于用户来说，造成误导的机会比帮助用户的可能性大得多，因为在众多的各种服饰图片中，可能只有很少数是衬衫。用户需要人眼排除很多与ta的目标不相干的图片。
但一旦用户进到了衬衫的类别里，图片们就有了很大优势。用户可以直接通过衬衫图片上的细节，方便地找到ta想要的款式。
Aside from aesthetic appeal, grid view also helps users when they’re examining details. For example, if a user is shopping for a shirt, they’ll have a specific type in mind. It’s only after the user has narrowed down the content to a category that grid view is most effective.
A grid view display of clothes will distract more than help because only a few of those images will be of shirts. The user has to scroll to filter out a lot of irrelevant images when scanning.
But once the user is in the category of shirts they want, the images will have more relevancy. The user can scan the shirts and spot certain details they’re looking for with ease.
想法小总结
Final Thoughts
大多数的用户在移动端上都带着速战速决的期望(现在似乎不一定了，尤其在中国)。他们想要能够迅速找到他们想要看的内容。这时候，你选择的布局方式就是让他们达成目标的关键了。
在台式桌面设备上，布局方式的选择会更宽松，但在移动端上，设计师选择哪种布局很关键。总的来说，能让用户事半功倍，那你就赢了。
Most users are on the go when they’re on a mobile site. They need to be able to find the content they want fast. The layout you choose is key in making this happen.
There’s more flexibility with layouts on desktop, but on mobile, your choice matters. The view that allows users to see more content while doing less work is the winner.
英文屠宰场
这次的用词相对都比较简单。而且个人感觉，这不是一篇从文笔上来看很棒的文章。比较中规中矩的套用总分总的形式。挑几个词说一说吧。
Tricky：狡猾的；微妙的；难以捉摸的
口语里常常用来形容一件事情或是人有猫腻，不太可信，或者需要一些技巧才能解决的事情。Trick本身是把戏、小技巧的意思
1.(of a task, problem, etc.) requiring care and skill because difficult or awkward.
"applying eyeliner can be a tricky business"
2.deceitful or crafty.
"I wouldn't trust her—she's tricky"
Accordions：手风琴
作为一个移动端设计师，下面这张图一定能帮助你记住这个乐器单词
Stimulating：刺激性的
Stimulate，动词，原意是刺激、促进、激发；在文章里，原作者比较图片和文字两种呈现形式的时候，用来形容图片是更加抢眼的，更能激发出用户点击欲望的意思。
encouraging or arousing interest or enthusiasm.
"a rich and stimulating working environment"
Precise：精确的
同义的常用词还有：Exact、accurate、specific
marked by exactness and accuracy of expression or detail.
"precise directions"
Flexibility: 灵活性、机动性
也表达一种愿意做出改变的意思
the quality of bending easily without breaking.
"players gained improved flexibility in their ankles"
视图形式小讨论
我们真正在做设计时，常常并不明确区分列表视图和网格视图。例如下面这个截图，就是当时Adam给我看的✈️稿。最右边页面4可以说是，上面文章里所定义的列表视图和网格视图一种结合吧(这里我和Adam产生了分歧，他认为这是列表视图，我认为偏向网格视图，你怎么看？)。它虽然是单列的排布样式，但是每个卡片里又有图片，并且只有一个标题，并没有以文案自为主；它虽然图片蒙层的目的就是为了突出标题，某程度上遵循了列表视图的衣钵，但这里并没有大篇幅的文字内容，用户仍然可能根据图片来判断这里大概会是什么内容。
所以，最后我想说的是，虽然这次翻译的这篇文章分析并列举了两种视图的最基础的差别和用法，但在实际应用中，设计师还是可以灵活变通，分清设计内容和业务要求的轻重缓急，将两种形式混合使用。下面是一些Adam在开始设计这个项目的时候，收集的一些案例，其中有一些非常典型的混用情况，大家可以找找看。。。
