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

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

一、大图布局

新闻列表中一般不会在整个页面中采用大图布局，因为新闻一般数量较多且具有时效性，采用大图布局会降低浏览效率，如果是比较重要的新闻或者是希望用户注意到的内容则会采用大图布局。更多情况下，大图布局和其他布局会混合使用，在大量新闻中，用大图布局的方式突出某条新闻引起用户注意。

扩展

大图布局也被运用于多种场景中，大图除了吸引用户还能展现更多图片细节，在很多以图片为主的产品如设计师灵感库都采用大图布局的方式。airbnb同样采用大图布局列表向用户展示符合条件的民宿，我们能发现预定酒店时列表往往是以小图布局配合更多文字信息的布局方式，因为酒店房间大致相同，没有更多的风格或特色，人们关注酒店的品牌星级价格或设施等。而民宿和酒店不一样，民宿往往各有特色，以其独居风格的装饰来吸引住客，干净舒适和富有特色的民宿图片能一下子吸引用户点击，通过浏览大图用户就能了解民宿的大体环境，而不需要再次点击查看，能提高用户浏览查找民宿的效率。

二、多图布局

多图布局中每行内容主要为标题 三张图片，通过对比发现，大部分的新闻产品中，娱乐新闻都是以这种方式布局的，为什么呢？娱乐新闻中图片是较为重要的内容，也更能吸引用户的注意，在列表中展示更多的图片能够满足用户的好奇心，也能提高用户浏览娱乐新闻的效率，通过图片就能判断是否为自己感兴趣的内容。除了娱乐新闻，社会新闻也采用这种布局方式。同样也是用图片来吸引用户，或通过图片即可了解大概的新闻内容。

扩展

大家对多图布局方式一定非常熟悉了，我们每天都用的微信还有微博也是采用多图布局的方式，这种方式可以让用户短时间内了解所有图片的大致信息，利于用户快速浏览。很多旅游APP旅游攻略也采用多图布局的方式，旅游攻略中经常用大量的图片来展示某个旅游景点，用户往往更关注图片也更容易被好看的旅游图片所吸引，和朋友圈微博的多图布局方式稍微有些不同的是，旅游攻略会选择一张最重要最吸引用户的图片以大图方式展示，其他的图片则以小图方式展示，这种布局方式既能让用户看清楚重要图片的细节，也能对攻略的内容有个大概的了解。

三、左图右文

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

四、右图左文

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

扩展

大多数以文字信息为主的内容都是以左图右文/右图左文的信息展示。左图右文的样式看起来更加整齐，且用户浏览界面的顺序一般呈F型或Z型，左图右文能让用户更加流畅的浏览列表，而右图左文使文字信息和图片信息分离开，用户浏览列表时相对来说没有那么流畅。但如果用户更关注文字信息而不是图片信息，则以右图左文的样式能使浏览效率更高。

五、卡片列表

和前两种样式大体一致，但是用了卡片来承载内容，并且将图片信息放到最大，用户在关注标题的同时，也能清晰地看到图片信息。目前来看，很少产品会使用这种布局，我觉得可能是因为卡片样式会让整体的分割性更强，降低了阅读的效率，但是卡片样式相比前面几种布局方式更规整，具体哪一种更好，还需要通过一定的数据做支撑。

扩展

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

总结

本文一共分析了五种新闻的布局方式，这些布局方式不仅仅运用于新闻列表，在以列表形式呈现的界面中我们都能看到。在做列表设计时，我们需要分析列表的内容和展示列表的目的，是要吸引用户关注还是要提高用户的阅读效率，根据具体的内容和目的再选择合适的布局方式。

总结一下五种布局方式：

第一种大图布局，如果希望重点突出的新闻，或者希望引起用户的注意，可以使用大图布局方式。

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

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

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

作者：Joley，公众号ID：Microinteraction

escapeflight.com

wkamst.com

jamwithchrome.com

yourtour.withgoogle.com

adayinbigdata.com

siaperitivos.com

Oprime

kickpoint.ca

Centy

mustafademirkent.com

blocklevel.nl

      一、项目概况及公司简介

      该项目作为国家级大型会展中心，是实现中国经济发展战略、推动北方经济中心建设、优化国家会展业战略发展布局、打造全球会展新高地的重要平台。项目将以内外贸结合、进出口结合、货物贸易和服务贸易结合为发展模式，立足环渤海、辐射东北亚、面向全世界。

      项目主要包括大型展馆、室外展场及会议中心、管理办公用房等会展辅助设施。项目建成后，将集展览、会议、节事活动、办公、酒店和消费等功能为一体，成为国际一流、具有持续领先能力的会展综合体。

      国展公司注册资本金40亿元，由中国对外贸易中心(集团)和天津城市基础设施建设投资集团有限公司共同投资。主要业务为会展服务，会展开发经营，展馆投资建设，展馆运营，对房地产业进行投资，资产管理，仓储、停车场服务，货运代理，劳务派遣等，将成为多元化、专业化的会展集团。

      二、征集要求

      （一）设计内容：

      中文名称为：国家会展中心

      英文名称为：National Convention and  Exhibition Centre（简称“NCEC”）

      标志应包含中文名称、英文名称和图案。

      (二)设计要求：

      1.构思新颖、寓意深刻，准确反映“国家会展中心”的内涵；

      2.具有较强的独特性、识别性、国际性。

      (三)作品提交：

      1.作品要求以RGB色彩和JPG格式提交，不小于300dpi。投稿中应包括彩色版（标注CMYK值）、黑白稿、创意说明（约200字）三个独立文档。获奖logo须另行提供矢量图。

      2.适用A4纸打印；

      3.参赛作品以电子邮件的形式投稿。邮件主题应当注明“logo投稿+作者姓名(院校)”, 邮件中应有投稿人姓名、通联地址、电话等；同时提供报名表（见附件）的电子版或扫描件，无扫描件可发传真件。

      三、奖励办法

      中标作品1件，奖金30000元（不含税）；入围作品10件，奖金各2000元（不含税）。中标作品和入围作品均颁发证书。

      四、应征作品的权利归属

      作者应保证其作品为原创，不得侵犯他人著作权；如侵犯他人著作权,对已中标的,将取消合作，对已发放奖金的,将原额追回。所有法律责任由投稿者本人承担。

      中标作品和入围作品的版权和使用权，均归国家会展中心（天津）有限责任公司所有。

      五、征集时间

      2013年7月15日—2013年8月30日。

      六、联系方法

      单    位：国家会展中心（天津）有限责任公司

      地    址：天津市和平区大沽北路161号

      邮    编：300040

      联 系 人：潘女士 彭先生

      咨询电话：022-23927359

      传    真：022-23927353

      投稿邮箱：ncec@ncec.cc

      国家会展中心LOGO征集报名表.doc（点击下载）

    【设计要求】
    形象标识（Logo）应通过巧妙的构思和技法，将标识的寓意与优美的形式有机结合。保证标识在各种环境中的有效识别性，保证标识在各种载体使用中的适用性、和谐性，保证标识易于制作和延展使用。
    1、中心意图
作品要有鲜明的象征意义，在设计中应充分强调涂志伟美术馆的主体元素，彰显涂志伟美术馆的专业功能特点。
元素可包括有油画画种的调色板或画笔、颜色、画具等，或加用美术馆的三角钢琴造型，或用字母Zhiwei Tu Art Museum的Z T A M、TAM、TM等。
    2、色彩
色彩要单纯、强烈、醒目，在各种不同的环境条件中，都能有较强的视觉效果。
    3、形式
    （1）适宜在各种介质的媒体上传播。
    （2）凸显创意，构图力求巧妙、新颖、独特，既内涵丰富，又通俗易懂。

    【投稿需知】
    1、投稿人需提交三项材料：
    （1）设计图稿，即参选作品。
    （2）设计和创意的详细文字说明，即设计说明书。
    （3）投稿人联系方式（姓名、身份证号码、联系电话、地址、邮政编码等）。
    2、投稿人可以提交多份参选作品，每份参选作品应附有对应的设计说明书，否则参选作品视为无效。提交多份参选作品时，作品名称应以“作者姓名－作品号”形式标注。
    3、投稿人需使用以下方式投稿：
将作品以jpg图片格式发送至wwwwwxxxxx@126.com 邮箱，在邮件标题中注明“涂志伟美术馆形象标识征集”字样，并在邮件附件中附上述三项材料。 
    4、截稿时间：2013年8月31日。

    【奖励】
    录用奖作品一件：现金奖金6000元。
    入围奖作品三件：每件现金奖金2000元。
    录取及入围作品将在翁山诗书画院网站（http://www.wsssh.com/）公布，敬请留意。

    【声明】
    1、设计方案应为原创，并保证此前未以任何形式、在任何领域公开发表。
    2、设计方案应明显区别于中国或者其他任何国家、地区的各类Logo。
    3、设计方案或任何用于创作参选作品素材，均不得侵犯第三方的任何著作权、商标权、专有权利或其他权利，不得触犯相关法律法规。
    4、所有来稿不予退还，投稿的Logo的著作权、使用权涂志伟美术馆所有。
    5、此次征集活动的最终解释权归涂志伟美术馆所有。
    涂志伟美术馆地址：广东省翁源县龙仙镇。欢迎有意者前来参观，联系人：涂雀平，电话：13450320888。

    涂志伟美术馆
    2013年7月15日

如何使P居中

主要的样式定义如下：

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个P里，你可以依次拆出多个P，只要在每个拆出的P里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在P 中垂直居中

用背景的方法。举例：

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等，也可以直接写数值”50 30″

如何使文本在P中垂直居中

如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：

说明：

vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个P一样高line-height:200px;然后插入文字，就垂直居中了

近来大家总是在标准上争论不休，其实，这些问题一些相关文章已经说得很明白了。
　　以下我就谈谈我的看法。本帖子有太多的“我认为”，说明了我只是想把我的想法拿出来跟大家商榷，或许有太多不对的地方，也请大家一一指出。
　　1、我对web标准的理解
　　所谓的web标准，在一些教程文章上已经得到结论：结构化标准（XHTML、XML）、表现标准（CSS、XSLT？）、行为标准（DOM、ECMAScript）。这些东西在网上一搜一大把，在这里我就不多说了。我只说我自己的想法：
　　a.标准是相对的，有其一定的局限性
　　作为标准本身，它也在不断地完善中。我们也可以加入其中完善它，而不是盲从它。没有最好，只有更好。（LeXRus前一阵子说要成立自己的web标准组织，不知道现在怎么样了。）
　　b.标准只是被推荐使用，好的标准大家都会自觉去遵守
　　我们之所以使用标准，就是因为标准对我们有利。正如现在倡导的ISO9000标准一样，它只是倡导，并不强迫。我认为它对我有用，所以我用它；同样，如果你认为它实在不怎么样，你也可以不用它，标准本身不应该带有任何强迫性。就跟打篮球一样，NBA是24秒进攻，我们是30秒进攻，我们要想加入NBA，就得用人家的规则。还有我们加入“世贸”也是，如果我们够拽，自己成立一个“世贸”，自己发布一套标准，也是可以的。
　　c.标准没有明确提到用P还是table
　　有些朋友很容易把标准简单地等同于“把table换成P”。我不这么认为，因为table也是符合xml规则的。含有table的页面照样可以通过XHTML1.0的验证。
　　d.“P布局”不只是用P进行布局
　　我们可以用一切可能的标签（包括table）对页面进行布局，目的就是要达到最优。它只是提出一个概念，一个全新的模式。坛子里也有人说过，“重要的是观念上的更新，而不是代码。”当然，我们的最终目的是代码的更新。
　　e.XHTML验证是手段，不是目的
　　有时，我们用&#106avascript来生成flash movie代码，以欺骗validator，通过验证。用这种方法，那么没有通不过验证的页面。如果只是玩玩，那是可以的。但是我怕会有些初学者太把validator当回事，甚至认为通过验证是最终目的。我的看法是：validator不过是一个工具，它帮助我们检查我们的页面是否符合标准，仅此而已。最终我们还是得按客户的要求设计我们的页面。
　　2、我为什么要用标准
　　有人会以为使用标准的目的就是为了达到标准。其实，《网站重构》一语道破天机：为了网站能“活”得更长久，为了提高网站的可访性，更为了降低成本，我们必须采用Web标准！这里有三个“为了”，没有一个是为了标准。标准只是手段。
　　接触“标准”后，我尝试去做一些符合“标准”的页面。当时，并不是很明确为什么要使用标准，只是出于一种好奇心理。中间也遇到了一些难题，有技术上的，也有观念上的。但是，现在我很乐意用P+css来给客户做网页。
　　用了标准以后，给我的感觉就是：代码精简了，维护方便了。
　　代码精简，可缩短页面装载时间。就算在当前宽带的条件下，我们也不应该放宽对自己的要求――精简代码（我想这也是每一个程序员对自己的要求），况且现在还有不少的拨号用户，以及手机上网/浏览的用户。这是一个分秒必争的社会。
　　严格按照标准，可以获得更高的兼容性。一个合格的网页制作者，他总是试图让网页达到最高的兼容性。当然，他要在效果与兼容性之间取得某种平衡。就像我们现在挑老公：既要有钱，也要靓仔。
　　维护方便，我甚至只要修改一下css就可以让整个页面呈现出完全不同的风格。这可以节省不少工作。
　　当然，我认为用标准最重要的一点是：向后兼容。用一个专业的术语就是：可持续发展。网络总是在不断地发展中，一个好的网页制作者，总得对未来的发展有一定的预见。就现在我知道的，以后一段时间确实是xml的天下，直到有更好的东西出来取代它。
　　每年都有太多的网站为了跟上时代，花不少钱在改版上。因为改版就意味着一切重来，包括代码，甚至程序。
　　标准还要求我们把数据交给XHTML（或者html、xml），把表现交给css，两者各司其职，结合起来。
　　3、为table平反
　　《网站重构》一书出来以后，也许有很大的误读成分，一些朋友把标准跟重构混淆了，甚至等同起来。我没看过这本书，不好做评价。
　　“在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构”，这就是重构。我认为“网站重构”兼有“P布局”跟“web标准”的意思。布局讲的是一种方法，标准讲的是一种规范，这是两码事。
　　web标准并不是说不用table，我找遍了网上的文章，没有找到一篇文章说web标准反对使用甚至建议不使用table标签，我想它是这样说的：建议不要使用table“布局”，而改用P+cs“布局”。
　　拿一个数据表来说，我认为用table来组织它是最好的解决方案。当然，你要用其他办法来实现也是可以的，但是我敢说都没有table来得简单、简洁。（也许有，只是我没找到？）当然，在学习阶段，强制自己不使用表格解决一切问题，还是蛮有用的。
　　以上说了这么多，与其说是我的想法，不如说是汇总了大家的想法。但求不贻笑大方，如果能对初学者有所裨益，那就阿弥陀佛了。