摘要：

在新媒體快速發(fā)展的大背景下，傳統(tǒng)的版式設計已從傳統(tǒng)媒介向新媒介轉化。如何將傳統(tǒng)的版式設計運用到這一新媒介中并適應新媒體閱讀特征的需求，是當下設計師不可回避的課題。本文將版式設計中的列表設計如何在新媒體的情境中高效的傳達信息，在概覽式閱讀的情境下實現用戶快速的抓取信息進行探討，找到最適合的列表頁版式設計方法。

關鍵詞：

版式設計 信息傳達 新媒介

1.引言

版式設計是現代設計方法的重要組成部分，也是重要理論之一。從海報設計、到書籍裝楨設計均需運用版式設計對內容進行編排，規(guī)范著內容放置的位置、比例、關系等諸多方面。隨著社會的發(fā)展、科技的進步，新載體如計算機、移動終端的出現與普及，使傳統(tǒng)設計師的注意力逐漸地轉移到新媒體設計行業(yè)中，并不斷地思考傳統(tǒng)設計中的相關理論知識如何運用到新媒體設計中，使新媒體在視覺、互動的體驗上更優(yōu)秀、完美。

新媒體的出現也使人們?yōu)g覽習慣從傳統(tǒng)的報紙雜志、電視、廣播等媒介逐漸向新媒體端轉移。這些內容在新媒體環(huán)境中的呈現方式，設計師還是借鑒了傳統(tǒng)設計的原理，而作為傳統(tǒng)設計中的版式設計也在不斷地被移植到新媒體中，為新媒體服務，并逐漸在新媒體設計中占有非常重要的地位。版式設計不僅可以指導設計師根據版式設計原理來規(guī)劃網站，使網站中的信息具有規(guī)則性與規(guī)范性；而且網絡前端工程師中也運用CSS+DIV的程序為網頁進行標準化、可復用的版式設計，使網站作為一個統(tǒng)一的整體呈現在用戶面前。

2.新媒體情境下版式設計的新要求——用戶獲取信息從精讀到概覽

新媒體的版式設計與傳統(tǒng)版式設計由于媒介的不同具有一定的差異性，傳統(tǒng)的版式設計在固定的空間中布局固定的內容，而新媒體的版式設計是在可擴展的空間中展示無限擴展的內容——用戶通過鼠標或手指實現頁面的上下滾動查看內容。正是由于這種擴展性，使海量的信息涌現到用戶面前。

由于新媒體時代獲取的信息量發(fā)生了翻天覆地的變化，人們對信息的精讀模式悄悄地發(fā)生著變化。用戶可以通過搜索引擎對某些或某類關鍵詞檢索，迅速地尋找自己需要信息的蛛絲馬跡，不需要在浩瀚的圖書資料中細細查詢了，人們逐漸養(yǎng)成了“得到即止”的行為。正是由于人們的閱讀習慣慢慢地從精讀轉變?yōu)楦庞[模式，“高效”就成為新媒體時代至關重要的關鍵詞，人們更注重如何從新媒介海量、碎片化的信息中獲得有用信息。并目設計師也在不斷探索提升用戶信息獲取效率的方法，有時這些方法還可提升商業(yè)價值，使商家有可能在商戰(zhàn)中獲得勝利。所以在新媒體的版式設計中，如何高效地展示信息，高效地使用戶定位信息，是設計師要不斷思考與探索的問題。

3.新媒體情境下內容列表頁的版式設計對用戶獲取信息效率的影響

作為“概覽”式閱讀的頁面——列表頁，是非常重要的展示手法，依據展示內容的不同，選擇不同的版式設計對提升用戶的瀏覽效率起到至關重要的作用。它就像書籍的目錄一樣，可以幫助用戶準確快速地獲取需要的有價值的信息。所以新媒體設計領域，設計師在設計相關版式時不僅要考慮到頁面展示的美感，還需考慮信息如何在最短的時間內傳遞給用戶，這對設計師提出了更高的要求。

1）版式設計提升信息的快速、準確定位

現有新媒體的列表頁展示的內容可分為：標題類、圖片類和影音類。不同的列表展示適合的內容是設計師不斷追求的目標。無論網站中展示的形式如何，均是為了使用戶準確對信息進行定位。

在新聞類列表（圖1）展示形式中，網站的布局以純文本標題形式展示出來，這種形式在網站中和應用程序中均起到了重要的信息傳遞作用。新聞類信息的獨特性使人們需要通過標題或段落了解到新聞的大體內容，然后用戶會判斷該信息是否有用，是否需要繼續(xù)查看具體的內容。而且由于新聞類稿件本身具有文章的屬性，人們有通過目錄定位信息的習慣，所以在新媒體環(huán)境中人們也習慣于通過文章標題對文章信息的快速提取。

圖片類列表（圖2）是當前較重要的展示內容。人們都稱今天為讀圖時代，圖片所能夠傳遞出的信息量被放置到很高的地位上，無論是搜索引擎還是展示網站，均將圖片作為網站版式布局中重要內容進行展示。由于圖片本身具有特定屬性，在展示形式上與新聞類列表頁還會有一定差異，在列表頁的展示中有通過規(guī)則性的布局，也有通過瀑布流的不規(guī)則形式展示。但由于圖片類內容的大小、比例無法統(tǒng)一，如果采用規(guī)則化的版式設計不僅無法滿足所有圖片的展示需要，而且無法將圖片中的最大化信息展示給用戶。而通過瀑布流的版式設計，可更全面地展示出圖片的信息，使用戶可快速、高效地瀏覽信息，并且由于人對圖片本身的識別力高于文字，所以即使在大量的不規(guī)則信息流中，用戶也可以很快速地識別出自身所需要的信息。就像人眼可以迅速地從一群人中區(qū)分出一只猴子一樣。所以即使采用不規(guī)則的展示形式，也不會降低用戶對信息的快速獲取。

視頻類列表頁（圖3）與圖片類列表頁在展示形式上部分人認為具有相似的地方，但視頻類的列表頁的信息展示更傾向于新聞類列表頁的規(guī)則化展示。視頻類內容的列表頁也類似于書籍的目錄，不規(guī)則的目錄會給觀眾信息的獲取上造成障礙。有時單一視頻截圖無法很全面地展示出視頻所能夠傳遞出的所有信息，還需要將截圖與標題結合使用共同傳遞信息。如果使用不規(guī)則的列表頁展示形式，會增強用戶的閱讀成本。

對三種列表展示形式進行分析后發(fā)現，文本類或視頻類信息在列表的展示上采用了較規(guī)則的形式，而圖片列表則可使用規(guī)則與不規(guī)則兩種形式進行展示。為什么在列表頁會產生差異呢，純圖片是一級內容展示，用戶看到的列表頁已經能夠了解到圖片中的全部或大部分信息了。而新聞類與視頻類內容在內容上需要二級頁面配合展示更全面的信息。所以不難發(fā)現人們對于僅有一層層級關系的內容需要最大限度地全面了解相關信息，即使一級頁面中展示的信息不規(guī)則，也不會影響用戶在信息獲取上的障礙。而在多層級的內容展示上需使用較規(guī)則的布局形式來引導用戶便捷的查詢到更深層次的信息。

2）版式設計中的內容的層次分級，清晰區(qū)分信息

內容的層次分級是版式設計中需要重點考慮的內容，也是設計師需要從中摸索，不斷體驗的過程。在版式設計中，要注信息展示的輕重緩急。而且我們上文也提到，人們越來越傾向于概覽閱讀，清晰的信息分級使人們可以快速獲知自己所需要的信息。那么在列表頁每一個具體內容展示上，我們就要考慮到信息展示中哪些部分是要占據重點模塊與重點位置的、哪些信息需要被弱化。

在層次分級中最基礎的層次為文文結合——標題與正文概覽結合（圖4），此時會突出標題字體并會加粗加黑使文字本身更具有視覺吸引力。當人們快速瀏覽信息時，將會迅速地識別出自己所需要的信息，這樣減少了用戶瀏覽信息的時間成本，提高了效率，通過對圖片中信息的內容模塊化分解后我們也不難發(fā)現，標題是占據面積最大、顏色最深的內容，而副標題無論在比例上還是顏色上均處于主標題次一層級。

在使用文文結合展示信息的同時，人們更習慣使用圖文（圖片與文字）/標文（圖標與文字）相結合的形式，這種形式在用戶瀏覽中使信息更快速的展示到觀眾面前，就如網頁中的圖標+文字的組合形式，文字作為圖標的輔助，通過圖標的信息傳達的作用，使人們更加清晰快速地識別出自身所需要的信息，如果將圖標隱去僅顯示文字部分我們會發(fā)現，文字在傳遞信息時需要我們更長時間的反應，才能夠體會出字體本身所傳達的信息，而如果僅使用圖標作為信息展示的載體，我們會發(fā)現圖標有時會產生理解上的歧義。所以以國標為主、文字作為引導的形式可以使用戶更快速地查找到自己所需要的內容。圖片與文字的組合是列表頁中所常用的版式設計，此時圖片與文字在排版中占據了同樣重要的位置。圖片作為信息傳遞的主體吸引用戶注意力，而標題文字是作為信息最重要的載體描述給用戶。在新聞類客戶端中（圖5），我們會發(fā)現，文字不再像上述圖標組合描述的那樣作為圖片的輔助，圖片與文字成為了一個整體，通過圖片可以更深層次了解到標題中所要傳遞出的信息，通過文字可深刻理解圖片中所傳達的意味。通過對信息所占比重的分析中我們發(fā)現，圖片與文字的組合對比文文組合使信息本身的分量更重了，增強用戶對傳遞信息的理解，也可使用戶快速準確地區(qū)分各條信息，不會出現閱讀串行的情況。

3）版式設計減少用戶瀏覽信息的步驟

上面我們更側重于在布局安排方面探討列表頁的版式設計對用戶信息瀏覽的影響，但我們也要從另一個角度進一步研究。在當今新媒體的環(huán)境中，設計師不僅需要通過版式設計使用戶可以快速、高效地識別出自身所需要的信息。還需要通過減少用戶瀏覽信息時的步驟提升用戶汲取信息的速度，使用戶可以快速閱讀到自己所需要的信息。

人們閱讀信息的速度會由于設計師版式布局的不同而不同，不同的版式對用戶的視覺引導步驟會產生不同的效果。以團購網站的版式為例（圖6，圖7），用戶使用網絡從海量的美食信息中篩選出自己心儀的商家，那我們可以分幾步使用戶了解到該商家提供的信息呢，設計師在安排版式設計時也是費了很大的一番周折。通過對一個團購模塊的分析中，我們發(fā)現用戶在瀏覽下列團購信息時，僅通過三步，第一步看到了圖片及商家名稱，但對于部分商家的供圖來說，不用看到商家名稱就可實現對商家信息的辨認。第二步就是看到了商家的優(yōu)惠力度，第三步看到了團購的內容是代金券還是其他的信息。用戶僅需三步就可獲取自身需要的信息。

但是通過對比兩組不同團購類公司的移動客戶端信息展示時發(fā)現（圖8和圖9），美團網在版式設計上繼承了網頁設計中信息的快速傳達。尤其是在手機客戶端中，由于通過手指的操作，人們的瀏覽速度會比在網頁中的瀏覽速度更快，人們視線停留在信息中的時間為1-2秒，如果無法從中獲取足夠的信息，那么該信息可能會被用戶略過。美團網客戶端中的展示的信息也是通過3步就可使用戶全面了解到這條團購信息。再看大眾點評團購客戶端的信息列表頁會發(fā)現，在商家描述中采用的折行的形式，用戶查看信息時的一行一條的行為流程被打斷，由原有了1-1-1的模式變?yōu)榱?-2-1的模式，雖然看上去并不會對用戶造成多么重大的影響，但是如果有很多不同商家的信息均以這種形式展現，那么當用戶在瀏覽到一定程度的時候會感到比閱讀美團網的信息列表頁要勞累。

所以在對更深層次的版式設計進行探究時我們不難發(fā)現，版式設計不僅是為了實現內容的好看，合理布局；更是要從用戶自身出發(fā)，通過研究用戶本身的瀏覽習慣與信息獲取方式合理的安排布局。

4.結論

版式設計是設計的基礎，它不僅具有提升畫面美感的作用，而且可以實現了信息的高效傳達。作為新媒體的版式設計師，不僅要研究新媒體版式設計與傳統(tǒng)版式設計的繼承關系，而且更要通過探究新媒體用戶瀏覽習慣，不斷去探索更高效的展示形式，從用戶入手、從用戶的心理預期入手，可達到意想不到的效果。只有不斷地探索共通性，深化理解差異性，定能夠不斷地滿足日益繁多的新媒體作品的需求。