摘要:
在新媒體快速發(fā)展的大背景下,傳統(tǒng)的版式設(shè)計(jì)已從傳統(tǒng)媒介向新媒介轉(zhuǎn)化。如何將傳統(tǒng)的版式設(shè)計(jì)運(yùn)用到這一新媒介中并適應(yīng)新媒體閱讀特征的需求,是當(dāng)下設(shè)計(jì)師不可回避的課題。本文將版式設(shè)計(jì)中的列表設(shè)計(jì)如何在新媒體的情境中高效的傳達(dá)信息,在概覽式閱讀的情境下實(shí)現(xiàn)用戶快速的抓取信息進(jìn)行探討,找到最適合的列表頁版式設(shè)計(jì)方法。
關(guān)鍵詞:
版式設(shè)計(jì) 信息傳達(dá) 新媒介
1.引言
版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)方法的重要組成部分,也是重要理論之一。從海報(bào)設(shè)計(jì)、到書籍裝楨設(shè)計(jì)均需運(yùn)用版式設(shè)計(jì)對內(nèi)容進(jìn)行編排,規(guī)范著內(nèi)容放置的位置、比例、關(guān)系等諸多方面。隨著社會的發(fā)展、科技的進(jìn)步,新載體如計(jì)算機(jī)、移動(dòng)終端的出現(xiàn)與普及,使傳統(tǒng)設(shè)計(jì)師的注意力逐漸地轉(zhuǎn)移到新媒體設(shè)計(jì)行業(yè)中,并不斷地思考傳統(tǒng)設(shè)計(jì)中的相關(guān)理論知識如何運(yùn)用到新媒體設(shè)計(jì)中,使新媒體在視覺、互動(dòng)的體驗(yàn)上更優(yōu)秀、完美。
新媒體的出現(xiàn)也使人們?yōu)g覽習(xí)慣從傳統(tǒng)的報(bào)紙雜志、電視、廣播等媒介逐漸向新媒體端轉(zhuǎn)移。這些內(nèi)容在新媒體環(huán)境中的呈現(xiàn)方式,設(shè)計(jì)師還是借鑒了傳統(tǒng)設(shè)計(jì)的原理,而作為傳統(tǒng)設(shè)計(jì)中的版式設(shè)計(jì)也在不斷地被移植到新媒體中,為新媒體服務(wù),并逐漸在新媒體設(shè)計(jì)中占有非常重要的地位。版式設(shè)計(jì)不僅可以指導(dǎo)設(shè)計(jì)師根據(jù)版式設(shè)計(jì)原理來規(guī)劃網(wǎng)站,使網(wǎng)站中的信息具有規(guī)則性與規(guī)范性;而且網(wǎng)絡(luò)前端工程師中也運(yùn)用CSS+DIV的程序?yàn)榫W(wǎng)頁進(jìn)行標(biāo)準(zhǔn)化、可復(fù)用的版式設(shè)計(jì),使網(wǎng)站作為一個(gè)統(tǒng)一的整體呈現(xiàn)在用戶面前。
2.新媒體情境下版式設(shè)計(jì)的新要求——用戶獲取信息從精讀到概覽
新媒體的版式設(shè)計(jì)與傳統(tǒng)版式設(shè)計(jì)由于媒介的不同具有一定的差異性,傳統(tǒng)的版式設(shè)計(jì)在固定的空間中布局固定的內(nèi)容,而新媒體的版式設(shè)計(jì)是在可擴(kuò)展的空間中展示無限擴(kuò)展的內(nèi)容——用戶通過鼠標(biāo)或手指實(shí)現(xiàn)頁面的上下滾動(dòng)查看內(nèi)容。正是由于這種擴(kuò)展性,使海量的信息涌現(xiàn)到用戶面前。
由于新媒體時(shí)代獲取的信息量發(fā)生了翻天覆地的變化,人們對信息的精讀模式悄悄地發(fā)生著變化。用戶可以通過搜索引擎對某些或某類關(guān)鍵詞檢索,迅速地尋找自己需要信息的蛛絲馬跡,不需要在浩瀚的圖書資料中細(xì)細(xì)查詢了,人們逐漸養(yǎng)成了“得到即止”的行為。正是由于人們的閱讀習(xí)慣慢慢地從精讀轉(zhuǎn)變?yōu)楦庞[模式,“高效”就成為新媒體時(shí)代至關(guān)重要的關(guān)鍵詞,人們更注重如何從新媒介海量、碎片化的信息中獲得有用信息。并目設(shè)計(jì)師也在不斷探索提升用戶信息獲取效率的方法,有時(shí)這些方法還可提升商業(yè)價(jià)值,使商家有可能在商戰(zhàn)中獲得勝利。所以在新媒體的版式設(shè)計(jì)中,如何高效地展示信息,高效地使用戶定位信息,是設(shè)計(jì)師要不斷思考與探索的問題。
3.新媒體情境下內(nèi)容列表頁的版式設(shè)計(jì)對用戶獲取信息效率的影響
作為“概覽”式閱讀的頁面——列表頁,是非常重要的展示手法,依據(jù)展示內(nèi)容的不同,選擇不同的版式設(shè)計(jì)對提升用戶的瀏覽效率起到至關(guān)重要的作用。它就像書籍的目錄一樣,可以幫助用戶準(zhǔn)確快速地獲取需要的有價(jià)值的信息。所以新媒體設(shè)計(jì)領(lǐng)域,設(shè)計(jì)師在設(shè)計(jì)相關(guān)版式時(shí)不僅要考慮到頁面展示的美感,還需考慮信息如何在最短的時(shí)間內(nèi)傳遞給用戶,這對設(shè)計(jì)師提出了更高的要求。
1)版式設(shè)計(jì)提升信息的快速、準(zhǔn)確定位
現(xiàn)有新媒體的列表頁展示的內(nèi)容可分為:標(biāo)題類、圖片類和影音類。不同的列表展示適合的內(nèi)容是設(shè)計(jì)師不斷追求的目標(biāo)。無論網(wǎng)站中展示的形式如何,均是為了使用戶準(zhǔn)確對信息進(jìn)行定位。
在新聞?lì)惲斜恚▓D1)展示形式中,網(wǎng)站的布局以純文本標(biāo)題形式展示出來,這種形式在網(wǎng)站中和應(yīng)用程序中均起到了重要的信息傳遞作用。新聞?lì)愋畔⒌莫?dú)特性使人們需要通過標(biāo)題或段落了解到新聞的大體內(nèi)容,然后用戶會判斷該信息是否有用,是否需要繼續(xù)查看具體的內(nèi)容。而且由于新聞?lì)惛寮旧砭哂形恼碌膶傩?,人們有通過目錄定位信息的習(xí)慣,所以在新媒體環(huán)境中人們也習(xí)慣于通過文章標(biāo)題對文章信息的快速提取。
圖片類列表(圖2)是當(dāng)前較重要的展示內(nèi)容。人們都稱今天為讀圖時(shí)代,圖片所能夠傳遞出的信息量被放置到很高的地位上,無論是搜索引擎還是展示網(wǎng)站,均將圖片作為網(wǎng)站版式布局中重要內(nèi)容進(jìn)行展示。由于圖片本身具有特定屬性,在展示形式上與新聞?lì)惲斜眄撨€會有一定差異,在列表頁的展示中有通過規(guī)則性的布局,也有通過瀑布流的不規(guī)則形式展示。但由于圖片類內(nèi)容的大小、比例無法統(tǒng)一,如果采用規(guī)則化的版式設(shè)計(jì)不僅無法滿足所有圖片的展示需要,而且無法將圖片中的最大化信息展示給用戶。而通過瀑布流的版式設(shè)計(jì),可更全面地展示出圖片的信息,使用戶可快速、高效地瀏覽信息,并且由于人對圖片本身的識別力高于文字,所以即使在大量的不規(guī)則信息流中,用戶也可以很快速地識別出自身所需要的信息。就像人眼可以迅速地從一群人中區(qū)分出一只猴子一樣。所以即使采用不規(guī)則的展示形式,也不會降低用戶對信息的快速獲取。
視頻類列表頁(圖3)與圖片類列表頁在展示形式上部分人認(rèn)為具有相似的地方,但視頻類的列表頁的信息展示更傾向于新聞?lì)惲斜眄摰囊?guī)則化展示。視頻類內(nèi)容的列表頁也類似于書籍的目錄,不規(guī)則的目錄會給觀眾信息的獲取上造成障礙。有時(shí)單一視頻截圖無法很全面地展示出視頻所能夠傳遞出的所有信息,還需要將截圖與標(biāo)題結(jié)合使用共同傳遞信息。如果使用不規(guī)則的列表頁展示形式,會增強(qiáng)用戶的閱讀成本。
對三種列表展示形式進(jìn)行分析后發(fā)現(xiàn),文本類或視頻類信息在列表的展示上采用了較規(guī)則的形式,而圖片列表則可使用規(guī)則與不規(guī)則兩種形式進(jìn)行展示。為什么在列表頁會產(chǎn)生差異呢,純圖片是一級內(nèi)容展示,用戶看到的列表頁已經(jīng)能夠了解到圖片中的全部或大部分信息了。而新聞?lì)惻c視頻類內(nèi)容在內(nèi)容上需要二級頁面配合展示更全面的信息。所以不難發(fā)現(xiàn)人們對于僅有一層層級關(guān)系的內(nèi)容需要最大限度地全面了解相關(guān)信息,即使一級頁面中展示的信息不規(guī)則,也不會影響用戶在信息獲取上的障礙。而在多層級的內(nèi)容展示上需使用較規(guī)則的布局形式來引導(dǎo)用戶便捷的查詢到更深層次的信息。
2)版式設(shè)計(jì)中的內(nèi)容的層次分級,清晰區(qū)分信息
內(nèi)容的層次分級是版式設(shè)計(jì)中需要重點(diǎn)考慮的內(nèi)容,也是設(shè)計(jì)師需要從中摸索,不斷體驗(yàn)的過程。在版式設(shè)計(jì)中,要注信息展示的輕重緩急。而且我們上文也提到,人們越來越傾向于概覽閱讀,清晰的信息分級使人們可以快速獲知自己所需要的信息。那么在列表頁每一個(gè)具體內(nèi)容展示上,我們就要考慮到信息展示中哪些部分是要占據(jù)重點(diǎn)模塊與重點(diǎn)位置的、哪些信息需要被弱化。
在層次分級中最基礎(chǔ)的層次為文文結(jié)合——標(biāo)題與正文概覽結(jié)合(圖4),此時(shí)會突出標(biāo)題字體并會加粗加黑使文字本身更具有視覺吸引力。當(dāng)人們快速瀏覽信息時(shí),將會迅速地識別出自己所需要的信息,這樣減少了用戶瀏覽信息的時(shí)間成本,提高了效率,通過對圖片中信息的內(nèi)容模塊化分解后我們也不難發(fā)現(xiàn),標(biāo)題是占據(jù)面積最大、顏色最深的內(nèi)容,而副標(biāo)題無論在比例上還是顏色上均處于主標(biāo)題次一層級。
在使用文文結(jié)合展示信息的同時(shí),人們更習(xí)慣使用圖文(圖片與文字)/標(biāo)文(圖標(biāo)與文字)相結(jié)合的形式,這種形式在用戶瀏覽中使信息更快速的展示到觀眾面前,就如網(wǎng)頁中的圖標(biāo)+文字的組合形式,文字作為圖標(biāo)的輔助,通過圖標(biāo)的信息傳達(dá)的作用,使人們更加清晰快速地識別出自身所需要的信息,如果將圖標(biāo)隱去僅顯示文字部分我們會發(fā)現(xiàn),文字在傳遞信息時(shí)需要我們更長時(shí)間的反應(yīng),才能夠體會出字體本身所傳達(dá)的信息,而如果僅使用圖標(biāo)作為信息展示的載體,我們會發(fā)現(xiàn)圖標(biāo)有時(shí)會產(chǎn)生理解上的歧義。所以以國標(biāo)為主、文字作為引導(dǎo)的形式可以使用戶更快速地查找到自己所需要的內(nèi)容。圖片與文字的組合是列表頁中所常用的版式設(shè)計(jì),此時(shí)圖片與文字在排版中占據(jù)了同樣重要的位置。圖片作為信息傳遞的主體吸引用戶注意力,而標(biāo)題文字是作為信息最重要的載體描述給用戶。在新聞?lì)惪蛻舳酥校▓D5),我們會發(fā)現(xiàn),文字不再像上述圖標(biāo)組合描述的那樣作為圖片的輔助,圖片與文字成為了一個(gè)整體,通過圖片可以更深層次了解到標(biāo)題中所要傳遞出的信息,通過文字可深刻理解圖片中所傳達(dá)的意味。通過對信息所占比重的分析中我們發(fā)現(xiàn),圖片與文字的組合對比文文組合使信息本身的分量更重了,增強(qiáng)用戶對傳遞信息的理解,也可使用戶快速準(zhǔn)確地區(qū)分各條信息,不會出現(xiàn)閱讀串行的情況。
3)版式設(shè)計(jì)減少用戶瀏覽信息的步驟
上面我們更側(cè)重于在布局安排方面探討列表頁的版式設(shè)計(jì)對用戶信息瀏覽的影響,但我們也要從另一個(gè)角度進(jìn)一步研究。在當(dāng)今新媒體的環(huán)境中,設(shè)計(jì)師不僅需要通過版式設(shè)計(jì)使用戶可以快速、高效地識別出自身所需要的信息。還需要通過減少用戶瀏覽信息時(shí)的步驟提升用戶汲取信息的速度,使用戶可以快速閱讀到自己所需要的信息。
人們閱讀信息的速度會由于設(shè)計(jì)師版式布局的不同而不同,不同的版式對用戶的視覺引導(dǎo)步驟會產(chǎn)生不同的效果。以團(tuán)購網(wǎng)站的版式為例(圖6,圖7),用戶使用網(wǎng)絡(luò)從海量的美食信息中篩選出自己心儀的商家,那我們可以分幾步使用戶了解到該商家提供的信息呢,設(shè)計(jì)師在安排版式設(shè)計(jì)時(shí)也是費(fèi)了很大的一番周折。通過對一個(gè)團(tuán)購模塊的分析中,我們發(fā)現(xiàn)用戶在瀏覽下列團(tuán)購信息時(shí),僅通過三步,第一步看到了圖片及商家名稱,但對于部分商家的供圖來說,不用看到商家名稱就可實(shí)現(xiàn)對商家信息的辨認(rèn)。第二步就是看到了商家的優(yōu)惠力度,第三步看到了團(tuán)購的內(nèi)容是代金券還是其他的信息。用戶僅需三步就可獲取自身需要的信息。
但是通過對比兩組不同團(tuán)購類公司的移動(dòng)客戶端信息展示時(shí)發(fā)現(xiàn)(圖8和圖9),美團(tuán)網(wǎng)在版式設(shè)計(jì)上繼承了網(wǎng)頁設(shè)計(jì)中信息的快速傳達(dá)。尤其是在手機(jī)客戶端中,由于通過手指的操作,人們的瀏覽速度會比在網(wǎng)頁中的瀏覽速度更快,人們視線停留在信息中的時(shí)間為1-2秒,如果無法從中獲取足夠的信息,那么該信息可能會被用戶略過。美團(tuán)網(wǎng)客戶端中的展示的信息也是通過3步就可使用戶全面了解到這條團(tuán)購信息。再看大眾點(diǎn)評團(tuán)購客戶端的信息列表頁會發(fā)現(xiàn),在商家描述中采用的折行的形式,用戶查看信息時(shí)的一行一條的行為流程被打斷,由原有了1-1-1的模式變?yōu)榱?-2-1的模式,雖然看上去并不會對用戶造成多么重大的影響,但是如果有很多不同商家的信息均以這種形式展現(xiàn),那么當(dāng)用戶在瀏覽到一定程度的時(shí)候會感到比閱讀美團(tuán)網(wǎng)的信息列表頁要?jiǎng)诶邸?/p>
所以在對更深層次的版式設(shè)計(jì)進(jìn)行探究時(shí)我們不難發(fā)現(xiàn),版式設(shè)計(jì)不僅是為了實(shí)現(xiàn)內(nèi)容的好看,合理布局;更是要從用戶自身出發(fā),通過研究用戶本身的瀏覽習(xí)慣與信息獲取方式合理的安排布局。
4.結(jié)論
版式設(shè)計(jì)是設(shè)計(jì)的基礎(chǔ),它不僅具有提升畫面美感的作用,而且可以實(shí)現(xiàn)了信息的高效傳達(dá)。作為新媒體的版式設(shè)計(jì)師,不僅要研究新媒體版式設(shè)計(jì)與傳統(tǒng)版式設(shè)計(jì)的繼承關(guān)系,而且更要通過探究新媒體用戶瀏覽習(xí)慣,不斷去探索更高效的展示形式,從用戶入手、從用戶的心理預(yù)期入手,可達(dá)到意想不到的效果。只有不斷地探索共通性,深化理解差異性,定能夠不斷地滿足日益繁多的新媒體作品的需求。