本文摘要：12ui设计网：在网页设计中新闻列表应该采用什么样的布局方式？大家平时一定会在手机上浏览各种新闻，看了那么多新闻，你还能想起来大部分的新闻列表是以什么布局呈现的呢？你有没有...
帝搜软件商学院：在网页设计中新闻列表应该采用什么样的布局方式？
大家平时一定会在手机上浏览各种新闻，看了那么多新闻，你还能想起来大部分的新闻列表是以什么布局呈现的呢？你有没有发现不同的新闻类型采用的是不同的布局方式呢？今天就来讲讲新闻列表应该采用什么样的布局方式，下面我总结了五种布局样式：
1.大图布局，2.多图布局
3.左图右文，4.右图左文，5.卡片列表
一、大图布局
新闻列表中一般不会在整个页面中采用大图布局，因为新闻一般数量较多且具有时效性，采用大图布局会降低浏览效率，如果是比较重要的新闻或者是希望用户注意到的内容则会采用大图布局。更多情况下，大图布局和其他布局会混合使用，在大量新闻中，用大图布局的方式突出某条新闻引起用户注意。
扩展
大图布局也被运用于多种场景中，大图除了吸引用户还能展现更多图片细节，在很多以图片为主的产品如设计师灵感库都采用大图布局的方式。airbnb同样采用大图布局列表向用户展示符合条件的民宿，我们能发现预定酒店时列表往往是以小图布局配合更多文字信息的布局方式，因为酒店房间大致相同，没有更多的风格或特色，人们关注酒店的品牌星级价格或设施等。而民宿和酒店不一样，民宿往往各有特色，以其独居风格的装饰来吸引住客，干净舒适和富有特色的民宿图片能一下子吸引用户点击，通过浏览大图用户就能了解民宿的大体环境，而不需要再次点击查看，能提高用户浏览查找民宿的效率。
二、多图布局
多图布局中每行内容主要为标题 三张图片，通过对比发现，大部分的新闻产品中，娱乐新闻都是以这种方式布局的，为什么呢？娱乐新闻中图片是较为重要的内容，也更能吸引用户的注意，在列表中展示更多的图片能够满足用户的好奇心，也能提高用户浏览娱乐新闻的效率，通过图片就能判断是否为自己感兴趣的内容。除了娱乐新闻，社会新闻也采用这种布局方式。同样也是用图片来吸引用户，或通过图片即可了解大概的新闻内容。
扩展
大家对多图布局方式一定非常熟悉了，我们每天都用的微信还有微博也是采用多图布局的方式，这种方式可以让用户短时间内了解所有图片的大致信息，利于用户快速浏览。很多旅游APP旅游攻略也采用多图布局的方式，旅游攻略中经常用大量的图片来展示某个旅游景点，用户往往更关注图片也更容易被好看的旅游图片所吸引，和朋友圈微博的多图布局方式稍微有些不同的是，旅游攻略会选择一张最重要最吸引用户的图片以大图方式展示，其他的图片则以小图方式展示，这种布局方式既能让用户看清楚重要图片的细节，也能对攻略的内容有个大概的了解。
三、左图右文
图文列表是最常见的一种列表样式，一般用于更关注文字信息的科技、财经、时事政治等新闻，按照用户的阅读习惯，左图右文会让用户先看到图片再阅读标题，如果你希望用户更关注图片信息，那么就可以采用左图右文的样式。
四、右图左文
同样适用于更关注文字信息的新闻，与左图右文相比，将图片的优先级降到最低，让用户更关注新闻内容本身。除此之外，图片的大小及标题承载的文字数量也值得思考，下面的例子中，36氪的图片最小，给了标题更多的空间并且将标题加粗。36氪主要以科技新闻为主，对于这类新闻，用户更关注标题和新闻内容，完整的标题可以提高用户的浏览效率，通过标题就判断是否为自己感兴趣的内容。
扩展
大多数以文字信息为主的内容都是以左图右文/右图左文的信息展示。左图右文的样式看起来更加整齐，且用户浏览界面的顺序一般呈F型或Z型，左图右文能让用户更加流畅的浏览列表，而右图左文使文字信息和图片信息分离开，用户浏览列表时相对来说没有那么流畅。但如果用户更关注文字信息而不是图片信息，则以右图左文的样式能使浏览效率更高。
五、卡片列表
和前两种样式大体一致，但是用了卡片来承载内容，并且将图片信息放到最大，用户在关注标题的同时，也能清晰地看到图片信息。目前来看，很少产品会使用这种布局，我觉得可能是因为卡片样式会让整体的分割性更强，降低了阅读的效率，但是卡片样式相比前面几种布局方式更规整，具体哪一种更好，还需要通过一定的数据做支撑。
扩展
大部分大图列表实际上也是以卡片列表的样式呈现（看大图列表扩展）而小图加文字信息列表以卡片样式呈现的例子并不是很多，我找到两个产品案例。第一个是一个收集了全世界艺术展馆/展览信息的APP，你也可以找到所在城市的艺术展，列表采用小卡片的形式，突出展览名字，一个页面中可以承载大概八个展览，提高用户浏览效率。为什么艺术展览列表的图片采用小图而不是大图来吸引用户，我觉得有两个原因：1.产品更希望用户能到现场去看展览，所以没有采用大图呈现更多细节，给用户留下可探索的空间。2.在没有了解相关背景前，通过图片很难了解到是什么展览，这种情况下文字信息比图片信息更有效。第二个产品是好奇心日报，将列表中的图片信息都被放到最大，让图片呈现更多细节，但整体来看，会觉得”太满“，增加视觉负担。
总结
本文一共分析了五种新闻的布局方式，这些布局方式不仅仅运用于新闻列表，在以列表形式呈现的界面中我们都能看到。在做列表设计时，我们需要分析列表的内容和展示列表的目的，是要吸引用户关注还是要提高用户的阅读效率，根据具体的内容和目的再选择合适的布局方式。
总结一下五种布局方式：
第一种大图布局，如果希望重点突出的新闻，或者希望引起用户的注意，可以使用大图布局方式。
第二种多图布局，如果是娱乐新闻、社会新闻等以图片为主的内容可以使用多图布局方式，通过图片可以引起用户注意，并可以通过图片了解新闻的大致内容。
第三种左图右文，如果是以文字信息为主的新闻如科技新闻、财经新闻等，同时希望用户关注图片信息的时候，可采用左图右文的布局方式。
第四种右图左文，当更关注文字信息的新闻可采用右图左文的布局方式，标题的优先级最高，尽量保持标题的完整性。第五种卡片列表，如果标题和图片同等重要的时候，可采用这种布局方式，将图片最大化。
我们在进行短视频推广、网页设计的时候，根据实际的情况，选择合适的局部来进行界面设计。
