武汉网页设计公司对新闻列表的页面设计

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 武汉 设计公司

深圳网站建设【shè】公司 帮助企业提【tí】升网站形象,彰显公司实力,PC+手【shǒu】机【jī】+微信+小程序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为【wéi】您提供1对1的【de】专属【shǔ】VIP服【fú】务

　　大家平【píng】时一定会在手机上浏览【lǎn】各种新闻，看【kàn】了那么【me】多【duō】新【xīn】闻，你还【hái】能想起【qǐ】来大部分【fèn】的新【xīn】闻列表是【shì】以什么【me】布【bù】局呈现的呢?你有没有发现不同的新闻类型采用的是不同的布局方式呢【ne】?今【jīn】天武汉网页设计公司对新闻列表的页面设计的布局方式，下面我总结了五种布局样式：

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

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

　　一、大图布局

　　新闻列表中一般不会在整个页面中采用大【dà】图【tú】布局【jú】，因为【wéi】新【xīn】闻一【yī】般数量较多且具有时效性【xìng】，采用大【dà】图【tú】布局会降【jiàng】低【dī】浏【liú】览效率【lǜ】，如果是比较重要的新闻【wén】或者是【shì】希望【wàng】用户注意到【dào】的内容则会采用大图【tú】布局。更多情况下，大【dà】图布【bù】局和其【qí】他布局【jú】会混合使用，在大量新闻中，用大图布局的方【fāng】式突出某条【tiáo】新闻引起用户注【zhù】意。

　　扩展

　　大图布局也被运用【yòng】于多【duō】种场【chǎng】景中，大【dà】图除了吸引用户【hù】还能展现更多图片细【xì】节，在很【hěn】多以图片为【wéi】主的产品如设计师灵感库都采用大图布【bù】局的方【fāng】式【shì】。airbnb同【tóng】样采用大【dà】图【tú】布局列表向【xiàng】用【yòng】户展示【shì】符【fú】合【hé】条【tiáo】件的民宿，我们【men】能发【fā】现预定酒店时列表【biǎo】往【wǎng】往【wǎng】是以小图【tú】布局配合更多文字信息的布局方式，因为酒店房间【jiān】大【dà】致相同【tóng】，没有更多的【de】风格或【huò】特色，人们关注酒店的品牌星级价格或设施【shī】等。而民宿和酒【jiǔ】店【diàn】不一样，民宿往往各有特色，以其独居风格的装饰来吸引住客，干净舒【shū】适【shì】和富有特色的民【mín】宿【xiǔ】图片能一下子吸引用户点击，通过浏览大图用户就能了解民宿【xiǔ】的大体环境，而【ér】不需要【yào】再次点【diǎn】击【jī】查看，能【néng】提高用户浏览【lǎn】查找民宿【xiǔ】的效【xiào】率。

　　二、多图布局

　　多图布局中每行内容【róng】主要为【wéi】标题【tí】 三张图片，通过对比发现，大【dà】部分的新闻产品中，娱乐新闻都是以这种【zhǒng】方【fāng】式布局的，为什么【me】呢?娱乐新闻中图片是【shì】较为重要的内容【róng】，也更能吸引【yǐn】用户【hù】的注意【yì】，在列表【biǎo】中展示【shì】更多的图片能够满足用户的好【hǎo】奇【qí】心，也能提高用【yòng】户【hù】浏览娱乐【lè】新【xīn】闻的效【xiào】率【lǜ】，通【tōng】过图片就能判断是【shì】否为自己感兴趣的内容。除了娱乐新闻，社会新闻也采用这种布【bù】局方【fāng】式。同【tóng】样【yàng】也是用图片来吸【xī】引用户【hù】，或通过图片即可【kě】了解大【dà】概的新闻内【nèi】容。

　　扩展

　　大家【jiā】对多图布局方式一定非常熟【shú】悉了，我们每天都用的微信还有微博也是采用多图【tú】布局的方【fāng】式，这种方式可【kě】以让用户短时间内了解【jiě】所有图片的大致信【xìn】息，利于用户快速浏览。很多旅游APP旅游攻【gōng】略【luè】也【yě】采用多图布局的方式，旅游攻略【luè】中经常用大量的【de】图片【piàn】来展示【shì】某个旅【lǚ】游景点，用户【hù】往往【wǎng】更【gèng】关【guān】注图片也更【gèng】容【róng】易被好看的旅游图片所吸【xī】引，和【hé】朋友圈微博的多图布局方式稍微有些不同的是，旅游攻【gōng】略会选择【zé】一张最重【chóng】要【yào】最吸引用【yòng】户的图片以大图方式展示【shì】，其他的【de】图片【piàn】则以小图方式展示【shì】，这种布局方式既能让【ràng】用户看【kàn】清楚重要图【tú】片【piàn】的细节，也能对攻【gōng】略【luè】的内容【róng】有【yǒu】个【gè】大概的了解。

　　三、左图右文

　　图文列表是最常见的一种列【liè】表样式，一般【bān】用于更关【guān】注文字【zì】信息的科技、财经【jīng】、时事政治等【děng】新闻，按【àn】照用【yòng】户的阅读习【xí】惯，左图右文会让用户先看到图【tú】片【piàn】再阅读【dú】标题，如【rú】果你希望用户更【gèng】关注图片信息【xī】，那么【me】就可【kě】以采【cǎi】用左图右文的样式。

　　四、右图左文

　　同样适用于【yú】更【gèng】关注文字信息的新【xīn】闻，与左图右文相比，将图片的优先【xiān】级降到最低，让用户更关注【zhù】新【xīn】闻内【nèi】容本身。除此之外，图片的大小及标题承载的【de】文字数量【liàng】也值得思考，下面【miàn】的【de】例子中，36氪的图片最【zuì】小，给了标题更多的【de】空间并且将标题加粗【cū】。36氪主要以科【kē】技【jì】新闻为【wéi】主，对于这类【lèi】新闻，用【yòng】户更关注标题和新闻内【nèi】容，完整的标【biāo】题可【kě】以提高用户的浏览效率【lǜ】，通过【guò】标题就【jiù】判断【duàn】是否为自己感兴趣的内【nèi】容。

　　扩展

　　大多【duō】数以文字信息为主的内容都是以左图右文/右图左文【wén】的信【xìn】息展示。左图右文的样式看起【qǐ】来【lái】更【gèng】加整齐，且用户浏览【lǎn】界面的顺【shùn】序一【yī】般呈F型或【huò】Z型，左图右文能【néng】让用户更加流畅的浏览列【liè】表【biǎo】，而右图左文使【shǐ】文字信息【xī】和图片信息【xī】分离【lí】开【kāi】，用【yòng】户浏览【lǎn】列表时相对来说【shuō】没有那么流畅。但如果用户【hù】更【gèng】关注文【wén】字【zì】信息而不是图片【piàn】信息，则以右图左文的样【yàng】式能使【shǐ】浏览效率更高。

　　五、卡片列表

　　和前两种样【yàng】式【shì】大体一致，但是用了【le】卡片来承载内容【róng】，并且将图片信【xìn】息放到最大，用户在关注标题的同时，也能清【qīng】晰地【dì】看到图片信息。目【mù】前来看，很少【shǎo】产【chǎn】品会使用这种布局，我【wǒ】觉得可能是因为卡片样式会让整体的分割性【xìng】更强【qiáng】，降低了【le】阅读的效率【lǜ】，但是卡【kǎ】片样【yàng】式【shì】相【xiàng】比前面几种【zhǒng】布【bù】局方式更规整，具体哪一【yī】种更【gèng】好，还需要通【tōng】过一定的数【shù】据做支撑【chēng】。

　　扩展

　　大部分大【dà】图列表实际【jì】上也是以卡片列表【biǎo】的样式呈现(看大图列表扩【kuò】展)而小图加文字信息【xī】列表以卡片【piàn】样式呈现【xiàn】的例子并不是很多，我【wǒ】找到两个产品案例。第一个是一个收集了【le】全世界艺术展馆【guǎn】/展览信息的APP，你【nǐ】也可以【yǐ】找到所在城市的艺术【shù】展，列表采用小卡片的形式，突出展【zhǎn】览名字，一个页面【miàn】中可以承【chéng】载大概【gài】八个展览【lǎn】，提高用户浏【liú】览效【xiào】率。为什么【me】艺术展览【lǎn】列【liè】表的图片采用小图而不是【shì】大图来吸【xī】引用户，我觉得有【yǒu】两个原因：1.产品更希望用户能【néng】到现场去看展览，所以没有采用【yòng】大图呈现【xiàn】更多细节，给用户【hù】留下可探【tàn】索的空【kōng】间。2.在【zài】没有了解相关背【bèi】景前【qián】，通过图片很难了解到是什么展【zhǎn】览，这种情况下文【wén】字信息比图片信息更有效。第二个产品是【shì】好奇心日报【bào】，将【jiāng】列【liè】表【biǎo】中的图片信息都被放到最大，让图片呈现【xiàn】更多【duō】细【xì】节【jiē】，但【dàn】整体【tǐ】来看，会觉【jiào】得【dé】”太满“，增加视觉【jiào】负担。

　　总结

　　武汉网页设计公司对新闻列表的页面设计一共【gòng】分【fèn】析了五种新闻的布局方式，这些【xiē】布局方式不仅仅运用于新闻列【liè】表，在以列【liè】表【biǎo】形式呈现的界面中我们都能看【kàn】到【dào】。在做列表设【shè】计时，我们需要分析列表的内【nèi】容和展【zhǎn】示列表的目【mù】的，是【shì】要吸引【yǐn】用户关注还是【shì】要提高用户的【de】阅读效率，根据【jù】具体【tǐ】的内容和目【mù】的再选择合适的布局【jú】方式【shì】。

　　总结一下五种布局方式：

　　第一种大【dà】图布【bù】局【jú】，如果希望重点突出的新【xīn】闻，或【huò】者希望引起【qǐ】用户的注意，可以【yǐ】使用大图布局方式。

　　第【dì】二种多图布局【jú】，如【rú】果是娱乐【lè】新闻、社【shè】会新闻【wén】等以图片【piàn】为主的内容可以使用多图布局方【fāng】式，通过【guò】图片可以引起用户注【zhù】意，并可以通过【guò】图片了解【jiě】新闻【wén】的大致内容。

　　第【dì】三种左图右文，如果是【shì】以文字信息为【wéi】主的新【xīn】闻如科技新闻【wén】、财【cái】经【jīng】新【xīn】闻等【děng】，同时希【xī】望用户关注图片信息的时候，可采用左图右文的布局方【fāng】式。

　　第四【sì】种右图左文，当更【gèng】关注文字信息【xī】的新闻【wén】可采用右【yòu】图【tú】左文的布局方式，标题【tí】的优先级最高，尽量保持标题的完整【zhěng】性。第五种卡片列表，如果标题和【hé】图片【piàn】同【tóng】等重要的【de】时候，可采用这种布【bù】局【jú】方【fāng】式，将图片最大化。

• 上一章：建筑公司网页设计
• 下一章：隋炀帝是昏君还是明君 隋炀帝杨广的功与...