新闻列表应该采用什么样的布局方式？

大家经常一定会在电脑上浏览各种新闻，看了这么多新闻，你能够想出来大个别的新闻列表是以哪些布局展现的呢？你有没有看到不同的新闻类型采取的是不同的布局模式呢？最近就来讲讲新闻列表需要采取哪些样的布局模式，下面我总结了五种布局风格：

1.大图布局，2.多图布局

3.左图右文，4.右图左文，5.卡片列表

一、大图布局

新闻列表中通常不会在整个页面中引入大图布局，因为新闻通常数量众多且带有时效性，采用大图布局会增加浏览效率，如果是非常重要的新闻以及是期望用户注意到的内容则会采取大图布局。更多情况下，大图布局和其它布局会混合使用，在长期新闻中，用大图布局的方法突出某条新闻引发用户注意。

扩展

大图布局也被采用于多种画面中，大图除了吸引用户能够体现更多照片细节，在这些以照片为主的产品如设计师灵感库都配备大图布局的方法。airbnb同样采取大图布局列表向客户展示符合条件的酒店，我们能看到预定酒店时列表通常是以小图布局配合更多文字信息的布局模式，因为餐厅厨房大致相似，没有更多的格调或传统，人们关注酒店的品类星级价格或设备等。而民宿和餐厅不一样，民宿通常各有特色，以其独居风格的装饰来吸引住客，干净优雅和充满传统的民宿照片能一下子吸引用户点击，通过浏览大图用户能够知道民宿的大体环境，而不应该继续点击查看，能提升客户浏览查找民宿的效率。

二、多图布局

多图布局中每行内容主要为标题三张照片，通过对比发现，大个别的新闻产品中，娱乐新闻都是以此类方法布局的，为什么呢？娱乐新闻中照片是较为重要的内容，也更能引来用户的注意，在列表中展现更多的照片无法满足用户的好奇心，也能提升客户浏览娱乐新闻的效率，通过照片能够推断是否为自己感兴趣的内容。除了娱乐新闻，社会新闻也采取这些布局模式。同样也有用照片来引来用户，或借助图片就能知道一般的新闻内容。

扩展

大家对多图布局模式一定比较熟悉了，我们每天都用的微信还有微博也有运用多图布局的方法，这种形式可以让客户短时间内认识所有照片的大概信息，利于客户快速浏览。很多旅行APP旅游攻略也运用多图布局的方法，旅游攻略中常常用长期的照片来展现某个旅行景点，用户通常更关注图片也更容易被漂亮的旅游照片所引来，和同学圈微博的多图布局模式稍微有些不同的是，旅游攻略会选择一张最重要最吸引用户的照片以大图方式展现，其他的照片则以小图方法展现，这种布局模式既能让客户看清楚重要照片的细节，也能对攻略的内容有个一般的知道。

三、左图右文

图文列表是最常用的一种列表样式，一般用于更关注文字信息的技术、财经、时事政治等新闻，按照用户的阅读习惯，左图右文会让用户先发现照片再阅读标题，如果你期望用户更关注图片信息，那么就可以采用左图右文的样式。

四、右图左文

同样适用于更关注文字信息的新闻，与左图右文相比，将截图的优先级降到最低，让客户更关注新闻内容原本。除此此外，图片的大小及标题承载的文字数量也值得探讨，下面的事例中，36氪的截图最小，给了标题更多的空间以及将标题加粗。36氪主要以技术新闻为主，对于这类新闻，用户更关注标题和新闻内容，完整的标题可以减少客户的浏览效率，通过标题就判定是否为自己感兴趣的内容。

扩展

大多数以文字信息为主的内容都是以左图右文/右图左文的信息展示。左图右文的风格看上去非常整齐，且用户浏览界面的排序通常呈F型或Z型，左图右文能让用户非常顺畅的浏览列表，而下图左文使文字信息和照片信息分离开，用户浏览列表时相对来说没有这么流畅。但即使客户更关注文字信息而不是照片信息，则以下图左文的样式能使浏览效率更高。

五、卡片列表

和前两种颜色大体一致，但是用了卡片来承载内容，并且将照片信息放到最大，用户在关注标题的同时，也能清晰地发现照片信息。目前来看，很少产品会使用这些布局，我认为或许是由于卡片样式会让整体的分割性更强，降低了阅读的强度，但是卡片样式相比前面几种布局模式更规整，具体哪一种更好，还必须借助一定的数据做支撑。

扩展

大部分大图列表实际上也有以卡片列表的风格展现（看大图列表扩展）而小图加文字信息列表以卡片样式呈现的事例并不是这些，我找到两个产品案例。第一个是一个收集了全全球戏剧展馆/展览信息的APP，你也可以找到所在城市的艺术展，列表采用小卡片的方式，突出展览名字，一个页面中可以承载大概八个展览，提高客户浏览效率。为什么艺术展览列表的照片运用小图而不是大图来吸引客户，我认为有两个因素：1.产品更期望用户能到现场去看展览，所以没有运用大图呈现更多细节，给用户留下可探索的空间。2.在没有认识相关背景前，通过照片很难知道到是哪个展览，这种状况下文字信息比照片信息更有效。第二个产品是好奇心日报，将列表中的照片信息都被放在最大，让照片展现更多细节，但整体来看，会认为”太满“，增加视觉负担。

总结

本文一共分析了五种新闻的布局模式，这些布局形式不只是利用于新闻列表，在以列表方式展现的界面中我们都能看见。在做列表设计时，我们必须探讨列表的内容和展现列表的目的，是要吸引客户关注还是要增加顾客的阅读效率，根据详细的内容和目的再选取适合的布局模式。

总结一下五种布局模式：

第一种大图布局，如果期望重点突出的新闻，或者期望引发用户的留意，可以使用大图布局模式。

第二种多图布局，如果是娱乐新闻、社会新闻等以照片为主的内容可以使用多图布局模式，通过照片可以导致用户注意，并可以借助图片了解新闻的大概内容。

第三种左图右文，如果是以文字信息为主的新闻如技术新闻、财经新闻等，同时期望用户关注图片信息的之后，可采用左图右文的布局方式。

第四种右图左文，当更关注文字信息的新闻可采用右图左文的布局模式，标题的优先级最高，尽量维持标题的完整性。第五种卡片列表，如果标题和照片同等重要的之后，可选用这些布局模式，将截图最大化。

作者：Joley，公众号ID：Microinteraction