陳婭雯 許懋琦

摘要：據(jù)《2017年度中國數(shù)字閱讀白皮書》顯示，2017年中國數(shù)字閱讀市場規(guī)模達到152億元，用戶規(guī)模接近4億。由此可見，移動閱讀市場規(guī)模增長穩(wěn)健，行業(yè)高速發(fā)展。在這一過程中，眾多數(shù)字閱讀平臺應(yīng)運而生，用戶對數(shù)字閱讀平臺的要求也不斷變高。閱讀界面作為用戶體驗的表現(xiàn)層，是用戶對數(shù)字閱讀平臺首要的具體感知。文章抽取閱讀界面的視覺構(gòu)成部分，結(jié)合數(shù)字閱讀界面特點，對其進行比較探究，為優(yōu)化數(shù)字閱讀的視覺體驗提出一些建議。

關(guān)鍵詞：數(shù)字閱讀 界面設(shè)計 視覺元素

引言

互聯(lián)網(wǎng)的發(fā)展對人們的生產(chǎn)生活產(chǎn)生了重大影響，人們的閱讀習(xí)慣也因此從傳統(tǒng)的紙質(zhì)閱讀逐步拓展到數(shù)字化閱讀。數(shù)字閱讀由于其海量化內(nèi)容和便攜性特征，受到用戶的廣泛青睞。讀物內(nèi)容如何通過新的載體合理呈現(xiàn)出來，并且更方便讀者閱讀，展現(xiàn)視覺美學(xué)，是數(shù)字閱讀領(lǐng)域需要研究的內(nèi)容。文章以此為目的，圍繞數(shù)字閱讀界面的視覺呈現(xiàn)進行探究。

一、閱讀界面的視覺構(gòu)成部分

平面設(shè)計理論對平面涉及到的元素進行了分類，包括概念元素（點、線、面）、視覺元素（圖形的大小、形狀、色彩等）、關(guān)系元素（方向、位置、空間等）。數(shù)字閱讀界面在繼承了傳統(tǒng)閱讀界面的文字、圖片、色彩、版式等元素的基礎(chǔ)上，增加了動態(tài)元素和界面導(dǎo)航等實用元素。由此，本文將閱讀界面從視覺上具體分為框架結(jié)構(gòu)和視覺元素兩個方面進行討論（如圖1）：

（一）框架結(jié)構(gòu)

1.版式結(jié)構(gòu)

頁面中排放文字、圖片等具體閱讀內(nèi)容的區(qū)域是版心，版心的設(shè)置對整個頁面起著決定性的作用。版心的面積大小和在版面上的位置，對頁面的整體美觀度、用戶的閱讀適宜性和頁面空間的合理利用都有影響。

頁邊距也稱為周空，指的是版心之外的空間。周空能夠襯托版面的主體內(nèi)容，使讀者更易獲取信息；同時也能使版面不至于過滿，為讀者提供可休息的視覺空間。除了周空的空白空間，留白也同樣用于營造可休息的視覺空間。

2.目錄及導(dǎo)航

目錄和導(dǎo)航作為具有功能性的框架結(jié)構(gòu)元素，反映頁面內(nèi)容之間的邏輯關(guān)系，起到為讀者提供閱讀定位和指引的作用，可以直觀明確地了解閱讀內(nèi)容架構(gòu)。

（二）視覺元素

1.文字

在閱讀界面中，文字占據(jù)了較大的面積，文本區(qū)域是主要的視線集中區(qū)域，文字表現(xiàn)的好壞直接影響閱讀界面的視覺體驗。文字的屬性包括了字體、文字的規(guī)格（字號、粗細等）、文字的排列方式（字距、行距、排頭等）。

2.圖片

文字與圖片能夠形成視覺上的對比與互補，給人不同的視覺感受。在閱讀了大段文字之后，圖片可以給予用戶視覺調(diào)節(jié)和休息；同時，圖片能夠儲存大量的視覺信息，相比文字更加直觀。圖片的屬性包括圖片的位置、大小、色彩等。

3.色彩

不同內(nèi)容的讀物其風(fēng)格是不一樣的，也同樣對應(yīng)了不同的色彩風(fēng)格。頁面的色調(diào)由其中的文字、圖形圖片、背景包括導(dǎo)航按鈕等所有元素的色彩共同構(gòu)成，具有很強的表意性，能夠給讀者傳達不同的情緒，引起讀者的情感變化，奠定整體的視覺感受。

二、數(shù)字讀物的閱讀界面特點

長期以來，數(shù)字讀物的開發(fā)都試圖模擬出傳統(tǒng)讀物的閱讀感受，在這一過程中數(shù)字閱讀也產(chǎn)生了新的特點。以下從閱讀界面視覺構(gòu)成的幾個方面對其界面特點進行分析。

數(shù)字讀物的視覺界面即為設(shè)備的顯示界面，通常不大于傳統(tǒng)讀物的界面大小，約為3.5-9.7英寸。一個版面能夠容納的內(nèi)容相對來說較少，如果想要查看更多的信息就需要刷屏或者屏幕翻頁。數(shù)字讀物很少使用面積過大的留白，頁邊距比傳統(tǒng)讀物小很多，整體更加緊湊而精細。相較于傳統(tǒng)閱讀的目錄結(jié)構(gòu)，數(shù)字閱讀的導(dǎo)航結(jié)構(gòu)依托于設(shè)備優(yōu)勢，簡化了讀者快速跳頁的方式，便于讀者高效獲取信息。

為了達到清晰易讀的文字屏幕顯示效果，數(shù)字讀物通常采用系統(tǒng)默認的字體，或者采用漢儀旗黑、方正蘭亭黑、方正悠黑等黑體家族，以及無襯線的適應(yīng)小屏幕設(shè)備顯示的英文字體。同時，也會提供其他字體選擇，比如微信閱讀默認采用漢儀新人文宋，字體秀麗勻稱，比黑體更富文化氣息。用戶可以自行調(diào)整數(shù)字讀物的文字大小，但相對來說字號比傳統(tǒng)讀物小。傳統(tǒng)讀物基本遵循文章段首空兩格的文字排版規(guī)范，而在部分時尚類或者資訊類數(shù)字讀物中，為了方便用戶快速閱讀，同時滿足一定的視覺美學(xué)要求，所有文字均采用左對齊的方式進行排版，并且通過合理設(shè)置段間距，使段落結(jié)構(gòu)表現(xiàn)分明。

數(shù)字化的雜志圖書中，為了使篇幅不至于過長，除了封面圖片、強調(diào)話題的插圖、反映數(shù)據(jù)的可視化圖表等會占據(jù)整個視覺界面，其他插圖的尺寸大小和數(shù)量都會得到適度控制。少部分時尚類、攝影類的數(shù)字讀物則以圖片為主，文字讓位于圖片。數(shù)字讀物頁面的視覺元素通常按照網(wǎng)格系統(tǒng)進行排布，相較于傳統(tǒng)讀物的頁面排布，具有很強的規(guī)律性和結(jié)構(gòu)性。

為了防止過于艷麗的色彩造成視覺疲勞、干擾用戶閱讀，數(shù)字閱讀界面的色彩通常采用弱飽和度、對比度適中的配色方案；同時，滿足色彩上統(tǒng)一性、情感性、生動性的基本要求。數(shù)字閱讀試圖模擬傳統(tǒng)閱讀視覺感受的設(shè)計初衷，從色彩方面明顯表現(xiàn)出來，比如，將接近紙張的色彩或者肌理作為閱讀背景；再比如，Kindle閱讀器通過電子墨水屏技術(shù)，還原閱讀紙質(zhì)書籍自然、不傷眼的視覺體驗。

三、數(shù)字閱讀界面視覺體驗分類比較研究

數(shù)字閱讀自產(chǎn)生至今已有超過十年的發(fā)展歷史，從初始時單調(diào)的純文本讀物發(fā)展到如今的綜合性閱讀，視覺元素隨著技術(shù)的支持不斷增多。以下基于5.5英寸屏幕大小、1920x1080屏幕分辨率的手機視覺效果，將數(shù)字閱讀界面從視覺元素構(gòu)成上分為純文字與圖文兩大類，分別進行比較分析。

（一）純文字類

純文字類數(shù)字讀物的視覺元素單一，主要需要注意區(qū)分文字層級，設(shè)計易讀的文字版面。以下以QQ閱讀和掌閱的純文字類小說讀物為例進行分析（如表1）。

QQ閱讀的閱讀界面提供七種配色方案選擇，同時支持自定義設(shè)置背景顏色。自定義設(shè)置通過光譜圖滑動選色，自由度高，但是過于個性化，用戶難以選擇出適宜閱讀的顏色，功能供給過度。日夜模式切換功能的使用頻率較高，模擬拉線開關(guān)式的切換按鈕十分形象、便捷，功能按鈕醒目。閱讀界面的周空不可調(diào)節(jié)，整體版面居中。行間距有松散、適中、緊湊三種可選，但是用戶不能實時觀察到行間距的調(diào)整狀態(tài)。三種模式中，間距越松散，段間距與行間距的差別越小，段落的區(qū)分度越不明顯。字間距不可調(diào)整，每頁可容納70-1280個字符。1000字的每頁字符容納數(shù)對于傳統(tǒng)紙質(zhì)讀物A4大小版面來說綽綽有余，但是在手機端滿屏顯示略太過擁擠。平臺提供了28種字體可選，包括了手機界面常見的黑體系列字體，也有宋體、楷體、隸書、卡通體和手寫體，部分字體提高了頁面視覺質(zhì)感、強化了視覺風(fēng)格的同時，也提高了文字的辨識難度。

掌閱提供選擇的界面色彩搭配較多，并且色調(diào)均適合閱讀，整體視覺感受舒適。調(diào)整閱讀設(shè)置時，可以實時觀察到調(diào)整后的狀態(tài)。行間距與字間距都可以通過滑動條精細調(diào)整。周空同樣也可以精細調(diào)整，整體比例保持上松下緊。左右兩端可以設(shè)置為緊貼界面邊緣，以容納更多的內(nèi)容，但也會過于滿屏而顯得不透氣。平臺提供文字排式調(diào)整功能，文字可以調(diào)整為豎排從最右列開始閱讀，這—功能有助于古文、詩歌等文學(xué)作品的呈現(xiàn)，但并不適合現(xiàn)代人的閱讀習(xí)慣，比較雞肋。正文的字號調(diào)節(jié)范圍和QQ閱讀相比又有所擴大，但過大或者過小的字符都不滿足可讀性和易讀性的基本要求，提供過大和過小的字符設(shè)置并沒有多大意義。在掌閱閱讀平臺上，用戶只要有充足的時間，版面的視覺元素都可以通過調(diào)整達到自我感覺最舒適的狀態(tài)。

（二）圖文類

圖文類讀物的視覺元素具有一定多樣性，不僅需要滿足文字的易讀性，還需要考慮圖片的先后順序、主次關(guān)系，以及版面的圖文比例、色彩對比調(diào)和等，確保版面美觀。以下以掌閱平臺上的雜志類讀物以及中國國家地理雜志、VOGUE MINI雜志為例進行分析。

掌閱在展現(xiàn)圖文類雜志時，依然保留了部分字號、間距等參數(shù)用戶可調(diào)的功能。與純文字讀物不同的是，雜志在進入用戶書庫前會經(jīng)過后臺排版，版面視覺效果較為精致。章節(jié)及欄目標題單獨設(shè)扉頁顯示，采用底紋背景以及簡單的矢量圖形元素加以裝飾。在區(qū)分文字層級上，除了通過調(diào)整文字粗細大小、段間距留白，還加入了色彩區(qū)分的維度。部分標題以及需要用戶重視的文字會鎖定與正文文字大小的比例、采用特殊顏色或者字符底紋突出顯示，確保視覺等級梯度不會因為用戶后期調(diào)整而喪失。大部分圖文讀物采用圖文上下型環(huán)繞或者分頁放置圖片的方式。但是部分圖文界面沒有體現(xiàn)細致的編排，體現(xiàn)為：圖片格式不統(tǒng)一，角版、挖版混雜，版式散亂；圖片縮在界面中央，尺寸過小，不能起到圖片說明表意的作用，并且導(dǎo)致左右兩邊留空過多；由于圖文的串聯(lián)關(guān)系，當用戶對文字調(diào)節(jié)不當時，會出現(xiàn)圖片縮放過小或者擠壓變形，以及頁面大部分無端留白的情況，嚴重影響版面的視覺感受（如圖2）。

中國國家地理雜志采用宮格式導(dǎo)航（如圖3），導(dǎo)航頁面相當于目錄，呈現(xiàn)了每篇文章的主題圖片和文字說明，便于讀者了解主題、挑選閱讀。但是每篇文章閱讀完后需要返回目錄才能選擇下一篇文章跳轉(zhuǎn)，不便于頻繁切換文章頁面。閱讀界面背景僅有日、夜間兩種閱讀模式可選，但足以滿足用戶閱讀的基本需要。左右邊距2.79mm，相比于純文字讀物略小。文字提供大、中、小三種方案可選，每中字號方案都有一定比例可尋，保持統(tǒng)一的視覺尺度。文章篇幅不長，插圖較多，文字調(diào)整時不會影響到圖片的顯示。插圖多為攝影照片，圖片左右兩端貼邊，突出了靜物攝影中的主體形象，也使得風(fēng)景攝影的空間延伸感更強、更有意境。

VOGUE MINI展示了每個月紙質(zhì)版的VOGUE雜志內(nèi)容，電子雜志采用長文類精排版方式，每篇文章通過一個長篇幅頁面表現(xiàn)，左右滑動切換文章。文章的起始頁面，以吸睛的主題圖片引入文章：主題圖片占據(jù)界面的上四分之三部分，文字信息占據(jù)下四分之一。正文段落均采用左對齊的方式，左右邊距約為3.24mm，行間距約為3.24mm，段間距約為9.46mm，由此可見各間距之間存在比例關(guān)系。平臺不提供用戶自主調(diào)節(jié)頁面版式的功能，保證文字內(nèi)容層級分明：大標題60px，正文48px，圖注及說明性小字38px，同時文字顏色明度弱化為B60，由此可見正文大?。?8px，3.24mm）與各間距同時也存在比例關(guān)系。頁面中的各視覺元素嚴格遵循比例關(guān)系，使得該平臺的閱讀界面較上文提到的其他讀物來說，視覺感受最為協(xié)調(diào)（如圖4）。讀物中插圖數(shù)量較多，但是圖片質(zhì)量較高，具有視覺藝術(shù)美感。所有圖片與文字段落左右兩端統(tǒng)一對齊，圖片高度各不一致，避免了頁面的平淡死板。目錄導(dǎo)航采用抽屜式，點擊頁面中央導(dǎo)航即從下欄呼出，以每篇文章的主題圖片作為縮略圖在導(dǎo)航欄中顯現(xiàn)，直觀形象。VOGUE MINI整體留空相對較多，版面比較通透舒適。雖然降低了用戶調(diào)整版面的自由度，版面卻更顯精致，富有節(jié)奏與韻律，不會出現(xiàn)由于文字調(diào)整壓縮了圖片面積或者無端留白的情況。

四、數(shù)字閱讀視覺體驗優(yōu)化對策

數(shù)字閱讀在處理版面排版時，應(yīng)遵循基本的可讀性、易讀性原則，保持各元素之間的邏輯性和系統(tǒng)性，在此基礎(chǔ)上再考慮提升視覺美感。對各閱讀平臺界面對比分析后發(fā)現(xiàn)，部分數(shù)字閱讀視覺界面還存在問題，下面從閱讀界面視覺構(gòu)成的幾個部分分別討論優(yōu)化對策。

（一）框架結(jié)構(gòu)

不管是純文字的文學(xué)讀物還是圖文類的期刊雜志，內(nèi)容導(dǎo)航以及相關(guān)的閱讀設(shè)置都是有必要的。導(dǎo)航主要用來展示篇章欄目，閱讀設(shè)置給予用戶視覺調(diào)整的自由度。用戶通常在剛接觸到數(shù)字讀物時會調(diào)整閱讀設(shè)置，以適應(yīng)自己的閱讀習(xí)慣，確定版面設(shè)置之后用戶就不會經(jīng)常使用這一功能。所以，相對來說導(dǎo)航的使用頻率比閱讀設(shè)置更高，在同時顯示導(dǎo)航和閱讀設(shè)置功能時，應(yīng)更直觀地突出導(dǎo)航功能。導(dǎo)航的表現(xiàn)形式有很多種，標簽式、抽屜式、宮格式等都在各數(shù)字閱讀平臺上有所應(yīng)用。在這些導(dǎo)航形式中，抽屜式導(dǎo)航不會妨礙用戶閱讀，給用戶沉浸式的閱讀體驗；浮層式切換方式支持直接顯示跳轉(zhuǎn)后的頁面，方便用戶選擇頁面。所以，浮層式抽屜導(dǎo)航能夠充分釋放屏幕空間，呈現(xiàn)更多內(nèi)容，較為適合數(shù)字閱讀界面顯示需求。導(dǎo)航是基于文字還是基于圖片，需要根據(jù)讀物的性質(zhì)而定。對于內(nèi)容偏重圖片展示的數(shù)字讀物來說，在導(dǎo)航中顯示圖片信息比顯示標題文字更能直觀交代欄目內(nèi)容。

閱讀設(shè)置選項應(yīng)根據(jù)各項設(shè)置的重要性，確定功能的表現(xiàn)程度。比如，文字是用戶瀏覽的主要內(nèi)容，圍繞文字元素的各項指標中，文字的大小設(shè)置是最主要的方面。所以，在閱讀設(shè)置的各選項中應(yīng)體現(xiàn)出這—功能的重要性。另外，周空以及各種留白空間的設(shè)置作為界面框架結(jié)構(gòu)的一部分，可以給予用戶一定的調(diào)整自由度，但是調(diào)整的范圍過大也容易造成頁面版式崩壞。鑒于VOGUE MINI舒適的版面視覺效果，閱讀界面中周空大小與字號、各間距之間應(yīng)保持一定的比例關(guān)系，并能夠靈活適應(yīng)用戶調(diào)整。

（二）視覺元素

1.選擇適合屏幕閱讀、符合內(nèi)容風(fēng)格的字體

數(shù)字閱讀界面需要一定的個性化設(shè)置，手寫體、卡通體、花式字體可以產(chǎn)生驚艷的視覺效果，但由于筆畫過細、粗細不勻、襯線過多，大面積的這種字體相比于易讀的黑體對閱讀流暢度有一定影響。當文章變得不易讀，用戶就會傾向于選擇易讀的字體。挑選符合閱讀平臺特點和讀物風(fēng)格的字體，加以合理利用，可以使得文字層級關(guān)系明顯，版面活潑有生氣。比如：對于歷史讀物或者紀傳類讀物，選擇具有古樸質(zhì)感的隸書或者魏碑體作為標題，在頁面中作為點綴，可以襯托內(nèi)容的歷史感。對于主要閱讀的正文部分，尤其是文字內(nèi)容較多的讀物，鑒于可讀性、易讀性以及迅速識別閱讀的要求，建議多提供黑體家族或者改良版的宋體、楷體等字體。

2.設(shè)定合理的字號

閱讀平臺考慮到了不同閱讀環(huán)境和視力情況的需要，提供調(diào)整字號大小的功能。部分閱讀平臺字號調(diào)整的跨度很大，用戶難以迅速調(diào)整到位。“與其給用戶提供改變文字大小的工具，不如直接采用讓用戶感到舒適的字體和字號?！苯ㄗh字號大小在提供分大類選擇的基礎(chǔ)上，再設(shè)置數(shù)值微調(diào)功能，提高用戶調(diào)整效率。過大的字號在有限的屏幕上顯示時，段落間區(qū)別性變?nèi)酰恼陆Y(jié)構(gòu)和頁面版式被打破。用戶僅僅只能識別文字，逐字閱讀，難以成句閱讀，造成了一定閱讀障礙。而過小的字號提高了文字辨識難度，版面也因為內(nèi)容變多而顯得密密麻麻（如圖5）。建議適當控制字號調(diào)整的范圍，對于5.5英寸的顯示設(shè)備（iphone6 plus），正文字號42-54px較為適宜；對于4.7英寸的顯示設(shè)備（iphone6），正文字號28-36px較為適宜。

3.篩選精良圖片

期刊類讀物近年來在發(fā)行紙質(zhì)版的同時也逐步推出數(shù)字期刊，讀物數(shù)字化前需對讀物內(nèi)容重新整合編排，其中的內(nèi)容，特別是圖片，需要進行進一步篩選，統(tǒng)一圖片風(fēng)格，保證圖片質(zhì)量。掌閱平臺上部分時尚類雜志版面常常呈現(xiàn)為一張圖片，一行文字的布局，這是由于圖片數(shù)量較多、相互之間主題相近，未經(jīng)篩選精簡，導(dǎo)致了內(nèi)容堆疊、圖文關(guān)系單調(diào)重復(fù)。在對插圖進行篩選后，需統(tǒng)一圖片形式，確定采用角版、羽化版還是挖版；明確圖片之間的關(guān)系，同主題如有多張圖片，則將圖片編組歸類，確定單張排版還是多張拼版；再進一步明確圖文關(guān)系，利用聚焦點原理和視覺平衡對圖片和文字進行合理安排，發(fā)揮圖片說明表意的作用，吸引用戶視覺關(guān)注，在有限的閱讀界面中突顯最重要的內(nèi)容。

4.易于閱讀的編排方式

當閱讀的文字內(nèi)容過長時，特別是對于純文字類的讀物，讀者容易產(chǎn)生視覺疲勞或者厭煩情緒。建議將閱讀內(nèi)容合理分塊，通過留白或者插入圖形、裝飾性圖片等其他視覺元素把長篇文字分為幾部分，有意識地引導(dǎo)讀者分多次閱讀，注意休息。把文內(nèi)關(guān)鍵信息用單獨的圖形文字或者加粗呈現(xiàn)，有助于讀者捕捉資訊，也增加了版面細節(jié)，提高了版面生氣。借鑒表單隔行染色的表現(xiàn)方式，對大篇幅文字進行底色區(qū)分或者染色區(qū)分，同樣也能方便讀者進行閱讀定位，豐富視覺感受。

5.色彩搭配

控制好背景與文字的色彩對比，是閱讀頁面整體視覺感受良好的重要保證。白底黑字的配色雖然符合人們傳統(tǒng)閱讀習(xí)慣，但是數(shù)字閱讀通常不會采用完全白底黑字的顏色搭配。為了緩和閱讀界面顯示中黑白兩色的強烈對比，“白底”需是帶了灰度的白色，同時為延緩視覺疲勞，最好略微偏黃暖調(diào)；“黑字”也需是比黑色略微緩和的深灰色。大多數(shù)閱讀平臺多采用有彩色系的配色方案，常見的有綠色系的護眼模式和黃色系的仿古模式。為確保版面色彩的統(tǒng)一和諧，有彩色系配色方案中的背景與文字色彩最好來自同一色系，通過明度拉開區(qū)分。

總結(jié)

目前，中國數(shù)字閱讀已進入高速發(fā)展期，逐步走向成熟。隨著內(nèi)容的不斷豐富，數(shù)字閱讀從通篇的文字快餐向圖文并茂的精排版讀物過渡。為了順應(yīng)數(shù)字閱讀的發(fā)展需要，文章以平面設(shè)計理論為基礎(chǔ)，解構(gòu)閱讀界面，提取研究元素；對典型的閱讀平臺進行比較研究，發(fā)現(xiàn)其中的缺陷和不足；提出部分細節(jié)方面的可行性建議，以期能優(yōu)化數(shù)字閱讀界面，給讀者帶來更好的視覺體驗。