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

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

一、大圖布局

新聞列表中一般不會在整個頁面中采用大圖布局，因為新聞一般數量較多且具有時效性，采用大圖布局會降低瀏覽效率，如果是比較重要的新聞或者是希望用戶注意到的內容則會采用大圖布局。更多情況下，大圖布局和其他布局會混合使用，在大量新聞中，用大圖布局的方式突出某條新聞引起用戶注意。

擴展

大圖布局也被運用于多種場景中，大圖除了吸引用戶還能展現更多圖片細節，在很多以圖片為主的產品如設計師靈感庫都采用大圖布局的方式。airbnb同樣采用大圖布局列表向用戶展示符合條件的民宿，我們能發現預定酒店時列表往往是以小圖布局配合更多文字信息的布局方式，因為酒店房間大致相同，沒有更多的風格或特色，人們關注酒店的品牌星級價格或設施等。而民宿和酒店不一樣，民宿往往各有特色，以其獨居風格的裝飾來吸引住客，干凈舒適和富有特色的民宿圖片能一下子吸引用戶點擊，通過瀏覽大圖用戶就能了解民宿的大體環境，而不需要再次點擊查看，能提高用戶瀏覽查找民宿的效率。

二、多圖布局

多圖布局中每行內容主要為標題 三張圖片，通過對比發現，大部分的新聞產品中，娛樂新聞都是以這種方式布局的，為什么呢？娛樂新聞中圖片是較為重要的內容，也更能吸引用戶的注意，在列表中展示更多的圖片能夠滿足用戶的好奇心，也能提高用戶瀏覽娛樂新聞的效率，通過圖片就能判斷是否為自己感興趣的內容。除了娛樂新聞，社會新聞也采用這種布局方式。同樣也是用圖片來吸引用戶，或通過圖片即可了解大概的新聞內容。

擴展

大家對多圖布局方式一定非常熟悉了，我們每天都用的微信還有微博也是采用多圖布局的方式，這種方式可以讓用戶短時間內了解所有圖片的大致信息，利于用戶快速瀏覽。很多旅游APP旅游攻略也采用多圖布局的方式，旅游攻略中經常用大量的圖片來展示某個旅游景點，用戶往往更關注圖片也更容易被好看的旅游圖片所吸引，和朋友圈微博的多圖布局方式稍微有些不同的是，旅游攻略會選擇一張最重要最吸引用戶的圖片以大圖方式展示，其他的圖片則以小圖方式展示，這種布局方式既能讓用戶看清楚重要圖片的細節，也能對攻略的內容有個大概的了解。

三、左圖右文

圖文列表是最常見的一種列表樣式，一般用于更關注文字信息的科技、財經、時事政治等新聞，按照用戶的閱讀習慣，左圖右文會讓用戶先看到圖片再閱讀標題，如果你希望用戶更關注圖片信息，那么就可以采用左圖右文的樣式。

四、右圖左文

同樣適用于更關注文字信息的新聞，與左圖右文相比，將圖片的優先級降到最低，讓用戶更關注新聞內容本身。除此之外，圖片的大小及標題承載的文字數量也值得思考，下面的例子中，36氪的圖片最小，給了標題更多的空間并且將標題加粗。36氪主要以科技新聞為主，對于這類新聞，用戶更關注標題和新聞內容，完整的標題可以提高用戶的瀏覽效率，通過標題就判斷是否為自己感興趣的內容。

擴展

大多數以文字信息為主的內容都是以左圖右文/右圖左文的信息展示。左圖右文的樣式看起來更加整齊，且用戶瀏覽界面的順序一般呈F型或Z型，左圖右文能讓用戶更加流暢的瀏覽列表，而右圖左文使文字信息和圖片信息分離開，用戶瀏覽列表時相對來說沒有那么流暢。但如果用戶更關注文字信息而不是圖片信息，則以右圖左文的樣式能使瀏覽效率更高。

五、卡片列表

和前兩種樣式大體一致，但是用了卡片來承載內容，并且將圖片信息放到最大，用戶在關注標題的同時，也能清晰地看到圖片信息。目前來看，很少產品會使用這種布局，我覺得可能是因為卡片樣式會讓整體的分割性更強，降低了閱讀的效率，但是卡片樣式相比前面幾種布局方式更規整，具體哪一種更好，還需要通過一定的數據做支撐。

擴展

大部分大圖列表實際上也是以卡片列表的樣式呈現（看大圖列表擴展）而小圖加文字信息列表以卡片樣式呈現的例子并不是很多，我找到兩個產品案例。第一個是一個收集了全世界藝術展館/展覽信息的APP，你也可以找到所在城市的藝術展，列表采用小卡片的形式，突出展覽名字，一個頁面中可以承載大概八個展覽，提高用戶瀏覽效率。為什么藝術展覽列表的圖片采用小圖而不是大圖來吸引用戶，我覺得有兩個原因：1.產品更希望用戶能到現場去看展覽，所以沒有采用大圖呈現更多細節，給用戶留下可探索的空間。2.在沒有了解相關背景前，通過圖片很難了解到是什么展覽，這種情況下文字信息比圖片信息更有效。第二個產品是好奇心日報，將列表中的圖片信息都被放到最大，讓圖片呈現更多細節，但整體來看，會覺得”太滿“，增加視覺負擔。

總結

本文一共分析了五種新聞的布局方式，這些布局方式不僅僅運用于新聞列表，在以列表形式呈現的界面中我們都能看到。在做列表設計時，我們需要分析列表的內容和展示列表的目的，是要吸引用戶關注還是要提高用戶的閱讀效率，根據具體的內容和目的再選擇合適的布局方式。

總結一下五種布局方式：

第一種大圖布局，如果希望重點突出的新聞，或者希望引起用戶的注意，可以使用大圖布局方式。

第二種多圖布局，如果是娛樂新聞、社會新聞等以圖片為主的內容可以使用多圖布局方式，通過圖片可以引起用戶注意，并可以通過圖片了解新聞的大致內容。

第三種左圖右文，如果是以文字信息為主的新聞如科技新聞、財經新聞等，同時希望用戶關注圖片信息的時候，可采用左圖右文的布局方式。

第四種右圖左文，當更關注文字信息的新聞可采用右圖左文的布局方式，標題的優先級最高，盡量保持標題的完整性。第五種卡片列表，如果標題和圖片同等重要的時候，可采用這種布局方式，將圖片最大化。

作者：Joley，公眾號ID：Microinteraction

#p#副標題#e#
 

#p#副標題#e#
 

#p#副標題#e#
 

#p#副標題#e#

escapeflight.com

wkamst.com

jamwithchrome.com

yourtour.withgoogle.com

adayinbigdata.com

siaperitivos.com

Oprime

kickpoint.ca

Centy

mustafademirkent.com

blocklevel.nl

#p#副標題#e#

360gardalife.com

SuganWe

Born Again

uigstudio.com

haraldurthorleifsson.com

Wentasi

tribeswell.com

frankdigital.com.au

kitchenprague.com

adamwoodhouse.co.uk

dasselundwagner.com

hatchedlondon.com

#p#副標題#e#

jonasingebretsen.com

mojotech.com

Strongly Typed

Easy Portfolio

Concept 1

esquire.co.uk

Book Quotes

Classico

laviealafresh.com

squarespace.com

andpeople.co.za

moresleep.net

      一、項目概況及公司簡介

      該項目作為國家級大型會展中心，是實現中國經濟發展戰略、推動北方經濟中心建設、優化國家會展業戰略發展布局、打造全球會展新高地的重要平臺。項目將以內外貿結合、進出口結合、貨物貿易和服務貿易結合為發展模式，立足環渤海、輻射東北亞、面向全世界。

      項目主要包括大型展館、室外展場及會議中心、管理辦公用房等會展輔助設施。項目建成后，將集展覽、會議、節事活動、辦公、酒店和消費等功能為一體，成為國際一流、具有持續領先能力的會展綜合體。

      國展公司注冊資本金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來得簡單、簡潔。（也許有，只是我沒找到？）當然，在學習階段，強制自己不使用表格解決一切問題，還是蠻有用的。
　　以上說了這么多，與其說是我的想法，不如說是匯總了大家的想法。但求不貽笑大方，如果能對初學者有所裨益，那就阿彌陀佛了。