翟勁松

摘 要 近年來隨著移動(dòng)互聯(lián)網(wǎng)與移動(dòng)設(shè)備技術(shù)的蓬勃發(fā)展，人們?cè)絹碓蕉嗟厥褂帽銛y的移動(dòng)設(shè)備上網(wǎng)進(jìn)行信息交流行為，以智能手機(jī)為代表的移動(dòng)設(shè)備正在成為網(wǎng)絡(luò)閱讀的主要載體。“網(wǎng)頁(yè)”作為網(wǎng)絡(luò)閱讀的主要形式之一也從臺(tái)式電腦的大屏幕轉(zhuǎn)向智能手機(jī)的小屏幕。同時(shí)，基于HTML5技術(shù)的移動(dòng)端網(wǎng)頁(yè)技術(shù)也為網(wǎng)頁(yè)的視聽呈現(xiàn)方式、信息交互方式提供了更多的可能。智能手機(jī)端的閱讀體驗(yàn)既不同于紙質(zhì)閱讀，也與傳統(tǒng)的臺(tái)式計(jì)算機(jī)上的網(wǎng)絡(luò)閱讀有很大差別。閱讀載體的轉(zhuǎn)移帶來了人類閱讀行為的巨大改變，方寸之間，手掌之上，手機(jī)端網(wǎng)頁(yè)的內(nèi)容架構(gòu)、圖文編排、字體使用、動(dòng)畫、交互行為都需要重新設(shè)計(jì)。移動(dòng)互聯(lián)網(wǎng)與網(wǎng)頁(yè)技術(shù)給信息的視覺呈現(xiàn)方式帶來技術(shù)支撐。對(duì)于手機(jī)端的網(wǎng)頁(yè)視覺設(shè)計(jì)而言，既要適應(yīng)手機(jī)屏幕的小尺寸以及由它帶來的閱讀行為的改變，又要最大限度地利用新技術(shù)做好信息梳理和視覺呈現(xiàn)，這無疑給設(shè)計(jì)師們提出了新的挑戰(zhàn)。通過分析在移動(dòng)互聯(lián)網(wǎng)的技術(shù)背景下手機(jī)端閱讀行為特點(diǎn)，結(jié)合最新的手機(jī)端網(wǎng)頁(yè)技術(shù)手段，優(yōu)秀設(shè)計(jì)案例，總結(jié)手機(jī)端網(wǎng)頁(yè)視覺設(shè)計(jì)規(guī)律。

關(guān)鍵詞 移動(dòng)互聯(lián)網(wǎng)；手機(jī)端閱讀；小屏幕網(wǎng)頁(yè)設(shè)計(jì)；屏幕閱讀

中圖分類號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2096-0360（2018）07-0046-08

1 研究背景

1.1 移動(dòng)互聯(lián)網(wǎng)的發(fā)展

近年來隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，全球范圍內(nèi)的互聯(lián)網(wǎng)用戶繼續(xù)保持增長(zhǎng)。根據(jù)2018年1月31日，中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的第41次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至2017年12月，我國(guó)網(wǎng)民規(guī)模達(dá)7.72億，普及率達(dá)到55.8%，超過全球平均水平（51.7%）4.1個(gè)百分點(diǎn)。

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和智能移動(dòng)終端設(shè)備的普及，“移動(dòng)互聯(lián)網(wǎng)”這一將移動(dòng)通信和互聯(lián)網(wǎng)相結(jié)合的技術(shù)已飛快地進(jìn)入我們的生活并服務(wù)于我們生活的方方面面，人們通過移動(dòng)互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)網(wǎng)絡(luò)閱讀、社交、購(gòu)物、娛樂。越來越多的網(wǎng)民尤其是年輕一代的網(wǎng)民更多地選擇使用智能手機(jī)上網(wǎng)，數(shù)據(jù)顯示，截至2017年12月，我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá)7.53億，網(wǎng)民中使用手機(jī)上網(wǎng)人群的占比由2016年的95.1%提升至97.5%。

此外，移動(dòng)互聯(lián)網(wǎng)技術(shù)服務(wù)于人類生活也改變了人類很多行為方式，尤其是閱讀方式的變化。移動(dòng)互聯(lián)網(wǎng)技術(shù)可以讓人類隨時(shí)隨地接受到各類信息，而智能手機(jī)能讓這些信息以文字、聲音、圖片、視頻等各類形式呈現(xiàn)在讀者面前。并且用戶可以通過觸摸手機(jī)屏幕來與這些信息互動(dòng)。在今天，信息的傳遞和呈現(xiàn)變得史無前例得快速和立體。

1.2 移動(dòng)端網(wǎng)頁(yè)技術(shù)的發(fā)展

由于移動(dòng)端上網(wǎng)在即時(shí)性上的優(yōu)勢(shì)顯而易見，網(wǎng)絡(luò)閱讀也從臺(tái)式機(jī)更多地轉(zhuǎn)向了智能手機(jī)。用戶一般通過兩種途徑在智能手機(jī)上實(shí)現(xiàn)網(wǎng)絡(luò)閱讀，一種是通過網(wǎng)頁(yè)，一種是通過安裝在智能手機(jī)上的軟件（App）。兩者在功能上各有特點(diǎn)，前者無需下載，直接通過手機(jī)瀏覽器打開，后者需要用戶將軟件下載到手機(jī)里，由于其本身的技術(shù)特點(diǎn)，手機(jī)軟件在早期擁有更穩(wěn)定更友好的操作體驗(yàn)，且可以離線

使用。

但隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，尤其是HTML5（超文本標(biāo)記語言的第5次修訂）的制定完成，使得網(wǎng)頁(yè)作為一種傳統(tǒng)的網(wǎng)絡(luò)閱讀載體，在多媒體的呈現(xiàn)以及實(shí)現(xiàn)人機(jī)交互功能方面都得到了全面升級(jí)。網(wǎng)頁(yè)上不僅可以輕松實(shí)現(xiàn)圖像、動(dòng)畫、音視頻的展示，還可以通過手機(jī)觸摸屏、手機(jī)重力感應(yīng)器、手機(jī)攝像頭、話筒實(shí)現(xiàn)人機(jī)交互。

同時(shí)，網(wǎng)頁(yè)相比手機(jī)軟件在信息的傳播分享和對(duì)硬件平臺(tái)的兼容性上有了獨(dú)特的優(yōu)勢(shì)，隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的繼續(xù)發(fā)展，這一優(yōu)勢(shì)也會(huì)越來越明顯。

1.3 手機(jī)端網(wǎng)頁(yè)應(yīng)用現(xiàn)狀與案例分析

由于手機(jī)端網(wǎng)頁(yè)（以下簡(jiǎn)稱網(wǎng)頁(yè)）擁有在移動(dòng)互聯(lián)網(wǎng)上的傳播優(yōu)勢(shì)，使它更多地運(yùn)用于廣告營(yíng)銷、新聞報(bào)道等領(lǐng)域。為了吸引用戶打開網(wǎng)頁(yè)閱讀，在基于HTML5網(wǎng)頁(yè)技術(shù)的廣告設(shè)計(jì)中往往利用其在多媒體呈現(xiàn)和人機(jī)交互上的技術(shù)特點(diǎn)，通過圖形動(dòng)畫、音視頻演繹一個(gè)故事，并根據(jù)故事情節(jié)的發(fā)展在其中加入有趣的交互環(huán)節(jié)，從而加深用戶對(duì)廣告內(nèi)容的印象。

圖3是一組用于宣傳一款手機(jī)支付軟件的網(wǎng)頁(yè)，該系列網(wǎng)頁(yè)在首屏設(shè)計(jì)了一個(gè)模擬點(diǎn)鈔的交互環(huán)節(jié)，用戶可以通過手指滑動(dòng)屏幕上的點(diǎn)鈔機(jī)，點(diǎn)鈔機(jī)上的鈔票也會(huì)隨著手指的觸摸滑動(dòng)飛出，配上真實(shí)的音效，在手機(jī)屏幕上真實(shí)再現(xiàn)了點(diǎn)鈔過程，這一環(huán)節(jié)的設(shè)計(jì)無疑增添了網(wǎng)頁(yè)的趣味性。后續(xù)又通過風(fēng)格獨(dú)特的圖形動(dòng)畫演繹了一場(chǎng)餐廳結(jié)賬的鬧劇，并在故事的結(jié)尾引出廣告產(chǎn)品，留下了產(chǎn)品下載按鈕。該組網(wǎng)頁(yè)充分利用了手機(jī)端網(wǎng)頁(yè)的技術(shù)特點(diǎn)結(jié)合了獨(dú)特的畫面風(fēng)格和有趣的交互體驗(yàn)給人留下深刻的印象。

與廣告類網(wǎng)頁(yè)不同，新聞報(bào)道類網(wǎng)頁(yè)除了體現(xiàn)趣味性的同時(shí)，更注重于真實(shí)事件的再現(xiàn)。在這類網(wǎng)頁(yè)中往往嵌入來自新聞事件中的真實(shí)聲音和影像。圖4是一組以回顧MH370航班失聯(lián)事件為主題的新聞?lì)惥W(wǎng)頁(yè)，該系列網(wǎng)頁(yè)采用了冷峻寫實(shí)的整體視覺風(fēng)格，在通過動(dòng)態(tài)圖像展示失聯(lián)航班的航線和搜救路線的同時(shí)，嵌入了來自新聞事件第一現(xiàn)場(chǎng)的聲音。該系列網(wǎng)頁(yè)通過寫實(shí)的視覺風(fēng)格和真實(shí)的聲音營(yíng)造了新聞事件的現(xiàn)場(chǎng)感和與主題相符的沉重

氣氛。

圖5所示的是總理記者會(huì)新聞網(wǎng)頁(yè)，該網(wǎng)頁(yè)展示了記者會(huì)現(xiàn)場(chǎng)金色大廳的全景畫面，當(dāng)讀者用手指左右滑動(dòng)手機(jī)屏幕時(shí)，前排記者與主席臺(tái)是

2︰1的視差滾動(dòng)，從而增加畫面的空間感。當(dāng)畫面經(jīng)過主席臺(tái)左右兩側(cè)的壁畫時(shí)，原本靜態(tài)的壁畫會(huì)活動(dòng)起來。當(dāng)滑動(dòng)到特定區(qū)域時(shí)，會(huì)有記者舉手提問并出現(xiàn)關(guān)鍵詞，點(diǎn)擊關(guān)鍵詞進(jìn)入總理的問答頁(yè)面，問答頁(yè)面中除了有總理回答記者的完整文字稿還有原音重現(xiàn)。該網(wǎng)頁(yè)通過第一視角的場(chǎng)景還原和特色的交互效果帶給讀者很強(qiáng)的參與感。

1.4 移動(dòng)端網(wǎng)頁(yè)用戶行為分析

由于基于移動(dòng)端網(wǎng)頁(yè)的閱讀受到內(nèi)容、網(wǎng)速、手機(jī)硬件、網(wǎng)頁(yè)架構(gòu)和界面布局等多方面的影響，使其用戶在閱讀行為上有明顯的特征。根據(jù)來自騰訊市場(chǎng)部的《移動(dòng)端網(wǎng)頁(yè)用戶行為報(bào)告》顯示，移動(dòng)端網(wǎng)頁(yè)的用戶閱讀行為主要有以下特點(diǎn)。

1）網(wǎng)頁(yè)加載5秒內(nèi)就會(huì)有74%的用戶離開

頁(yè)面。

2）閱讀高峰期通常出現(xiàn)在中午12點(diǎn)和晚上10點(diǎn)左右。

3）通過用戶口碑傳播的網(wǎng)頁(yè)，訪問熱度往往會(huì)持續(xù)兩天左右。

4）放置在網(wǎng)頁(yè)左邊的按鈕，點(diǎn)擊率較低。

5）隨著網(wǎng)頁(yè)頁(yè)面層級(jí)越深用戶的流失率越高（到了第6頁(yè)只剩下46.9%的用戶）。

6）輸入行為和復(fù)雜的交互行為會(huì)導(dǎo)致用戶

流失。

7）用戶在功能型頁(yè)面的平均停留時(shí)間要比在展示型頁(yè)面的平均停留時(shí)間要長(zhǎng)。

8）用戶在首頁(yè)和尾頁(yè)的平均停留時(shí)間比在中間頁(yè)面的平均停留時(shí)間要長(zhǎng)。

9）設(shè)置在首屏和尾屏的按鈕被點(diǎn)擊率最高。

10）具有動(dòng)畫效果的按鈕更容易引起用戶注意并點(diǎn)擊。

11）用戶會(huì)沿用從上一頁(yè)學(xué)習(xí)到的交互行為。

根據(jù)以上特點(diǎn)可以看出，移動(dòng)端網(wǎng)頁(yè)在設(shè)計(jì)時(shí)應(yīng)注重以下幾點(diǎn)：層級(jí)不宜過深、應(yīng)該把重要的信息放在首屏、適當(dāng)在網(wǎng)頁(yè)中加入的動(dòng)畫效果將更容易吸引讀者參與交互、交互按鈕應(yīng)盡量設(shè)計(jì)在網(wǎng)頁(yè)的右側(cè)。

2 手機(jī)端網(wǎng)頁(yè)視覺設(shè)計(jì)研究

2.1 手機(jī)端閱讀的特點(diǎn)

在數(shù)字閱讀時(shí)代，閱讀載體從紙張轉(zhuǎn)變?yōu)槠聊?，從電腦的大屏幕轉(zhuǎn)變?yōu)槭謾C(jī)的小屏幕，手機(jī)端閱讀帶來的不僅是閱讀載體尺寸的變化，更是人類獲取信息方式的變化。移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展帶來了各種應(yīng)用服務(wù)和即時(shí)信息，人們隨時(shí)隨地可以閱讀新聞、查詢信息、互相交流，各類信息從未向今天這樣變得唾手可得。下面筆者將從5個(gè)方面分析手機(jī)端閱讀的特點(diǎn)。

2.1.1 即時(shí)性

手機(jī)作為新一代的閱讀載體打破了空間和時(shí)間的限制，人類可以隨時(shí)隨地接收信息。換個(gè)角度說，信息的即時(shí)性帶來了人類閱讀環(huán)境和閱讀時(shí)機(jī)的變化。空間上，人類的閱讀行為不僅會(huì)發(fā)生在光線明亮的書桌上也有可能會(huì)在昏暗搖晃的車廂里，時(shí)間上，人類不再需要特意挑個(gè)安靜的讀書時(shí)間，更多的可能是伴隨著手機(jī)的提示音隨時(shí)開始閱讀行為。新的閱讀行為和閱讀環(huán)境也為手機(jī)端界面設(shè)計(jì)提出新的要求。

2.1.2 超文本性

在印刷技術(shù)下，文本受到印刷載體的限制，使得在單個(gè)閱讀載體上獲得的信息量有限。互聯(lián)網(wǎng)帶來了幾乎沒有邊界的信息海洋，在移動(dòng)互聯(lián)網(wǎng)上閱讀不再受篇幅的限制，人類可以通過搜索引擎查找想要的任何信息，人類在信息面前有史無前例的選擇權(quán)。信息更多的以一種“超文本”的形式出現(xiàn)。

所謂“超文本”這一概念早在1963年就被提出，由泰德·納爾遜（Ted Nelson）創(chuàng)造。他的定義為：“信息以一種復(fù)雜的形式相連，包含諸如概況、內(nèi)容瀏覽圖、內(nèi)容間的相互聯(lián)系以及作者加的標(biāo)注、增補(bǔ)等。它是非順序鏈接的一系列文本塊，這種文本給予讀者多路徑的選擇權(quán)。”互聯(lián)網(wǎng)實(shí)際上就是一個(gè)超大規(guī)模的超文本，人們不再局限于一段文本的閱讀，而是可以通過超鏈接，去尋找到與之相關(guān)或無關(guān)的其他信息。相對(duì)于每個(gè)文段來說，傳統(tǒng)的閱讀習(xí)慣仍然適用，但一旦讀者離開了某個(gè)文本架構(gòu)的范圍，屬于互聯(lián)網(wǎng)的閱讀規(guī)則和體驗(yàn)便產(chǎn)生了。

2.1.3 可交互性

手機(jī)端閱讀的交互性體現(xiàn)在兩個(gè)方面：

一是體現(xiàn)在人類與閱讀載體的互動(dòng)，即人類與手機(jī)的互動(dòng)，人類可以通過用手指滑動(dòng)觸摸屏、對(duì)話筒說話、通過手機(jī)攝像頭拍攝和掃描、改變手機(jī)握持的方向等方式向手機(jī)發(fā)出指令，手機(jī)在接受到指令后而做出相應(yīng)地反應(yīng)。

二是是用戶之間的互動(dòng)，與傳統(tǒng)紙質(zhì)閱讀不同的是，手機(jī)端閱讀受到移動(dòng)互聯(lián)網(wǎng)技術(shù)的影響，信息的傳達(dá)不再是單向的。各類用于用戶交流信息的社交軟件成為手機(jī)上使用頻率最高的應(yīng)用程序。通過信息的交流和共享，人類在獲得信息的同時(shí)也發(fā)出信息，并隨時(shí)得到反饋，這大大地提升了閱讀的參與感。

2.1.4 信息介質(zhì)的多樣性

圖像作為一種世界范圍內(nèi)共通的語言，在視覺傳達(dá)上有其獨(dú)特的優(yōu)勢(shì)。在相對(duì)快節(jié)奏的現(xiàn)代生活中，用圖像傳達(dá)信息帶來的高效率和直觀性受到讀者的歡迎，誕生了所謂的“讀圖時(shí)代”。傳統(tǒng)紙質(zhì)閱讀載體上的圖像主要包括符號(hào)、圖案、圖標(biāo)、插圖和照片等，而在手機(jī)屏幕上還可以播放動(dòng)態(tài)影像并能與之互動(dòng)，傳遞信息的介質(zhì)變得更加多元化，文字、圖像、動(dòng)畫、聲音都可以用于手機(jī)端閱讀信息的傳播?，F(xiàn)在，如何根據(jù)信息的內(nèi)容選擇合適信息介質(zhì)并將它們有機(jī)的整合起來，是從事手機(jī)端視覺設(shè)計(jì)的設(shè)計(jì)師們面臨的新課題。

2.1.5 小屏幕

手機(jī)作為閱讀載體，其小型化帶來的便攜性給用戶提供了即時(shí)閱讀的可能，但也給手機(jī)端閱讀界面的設(shè)計(jì)提出了新的要求。隨著手機(jī)硬件技術(shù)的發(fā)展，高分辨率手機(jī)屏幕的出現(xiàn)已經(jīng)為手機(jī)的成像品質(zhì)帶來了質(zhì)的飛越，但是屏幕的大小給閱讀體驗(yàn)帶來的限制與其便攜性的權(quán)重已經(jīng)讓手機(jī)的尺寸維持在一定范圍內(nèi)。字體的使用、圖形的設(shè)計(jì)、版面的編排、按鈕的位置都需要在手機(jī)屏幕上重新考慮。

2.2 手機(jī)端網(wǎng)頁(yè)架構(gòu)設(shè)計(jì)

手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)相比電腦網(wǎng)頁(yè)主要的限制是屏幕的尺寸，傳統(tǒng)網(wǎng)頁(yè)架構(gòu)有層級(jí)結(jié)構(gòu)或網(wǎng)狀結(jié)構(gòu)，但由于手機(jī)屏幕尺寸的限制使得手機(jī)端的網(wǎng)頁(yè)架構(gòu)不宜過于復(fù)雜。在電腦的大屏幕上打開的網(wǎng)頁(yè)可以以層迭的形式并列在瀏覽器上，屏幕的寬度也可以讓各級(jí)別的網(wǎng)頁(yè)菜單駐留在網(wǎng)頁(yè)的一側(cè)，方便用戶清晰地了解自己打開的網(wǎng)頁(yè)所屬的位置和級(jí)別。而在手機(jī)狹小的屏幕上，如果要顯示類似電腦端架構(gòu)復(fù)雜的網(wǎng)頁(yè)，則需要用戶反復(fù)地開啟和關(guān)閉窗口，不但會(huì)造成用戶使用上的不便和混亂，而且也會(huì)浪費(fèi)手機(jī)的系統(tǒng)資源。所以為了不影響到用戶的閱讀體驗(yàn)，手機(jī)端的網(wǎng)頁(yè)架構(gòu)一般為簡(jiǎn)單的線性結(jié)構(gòu)，盡量不要讓用戶返回上一級(jí)菜單。

2.3 手機(jī)端網(wǎng)頁(yè)界面視覺設(shè)計(jì)特點(diǎn)

2.3.1 網(wǎng)頁(yè)界面布局

和書籍設(shè)計(jì)中的版式設(shè)計(jì)一樣，手機(jī)端網(wǎng)頁(yè)的界面設(shè)計(jì)也有自己的規(guī)則，不同的是手機(jī)端網(wǎng)頁(yè)版面設(shè)計(jì)中要考慮到人機(jī)交互的因素。在手機(jī)端網(wǎng)頁(yè)的界面布局設(shè)計(jì)中考慮到手機(jī)用戶更多的是采用垂直滾動(dòng)的方式瀏覽，網(wǎng)頁(yè)界面一般采用一欄單列式的布局，讓用戶只需單方向滾動(dòng)就能瀏覽主要的

內(nèi)容。

另外，考慮到手機(jī)屏幕的尺寸較小，字號(hào)大小也受到限制，為了不影響閱讀，手機(jī)端網(wǎng)頁(yè)應(yīng)控制單個(gè)頁(yè)面的內(nèi)容量，突出重點(diǎn)視覺元素，避免界面雜亂。同時(shí)精簡(jiǎn)文字，將冗長(zhǎng)的信息內(nèi)容劃分為多重頁(yè)面。設(shè)計(jì)者必須對(duì)內(nèi)容有所取舍，選出最為重要的信息擺入網(wǎng)頁(yè)中。

網(wǎng)頁(yè)界面設(shè)計(jì)中應(yīng)突出按鈕的位置，按鈕的尺寸應(yīng)當(dāng)和手指的大小相匹配。麻省理工學(xué)院的Touch Lab通過研究發(fā)現(xiàn)，指面的觸摸尺寸平均大小為10 mm～14 mm，而指尖的平均尺寸是

8 mm～10 mm，也就是說10 mm×10 mm的控件尺寸設(shè)計(jì)是比較合理的大小。另外一個(gè)需要考慮的就是可觸摸控件之間的距離。如果兩個(gè)按鈕比較靠近，那么用戶在移動(dòng)端上就很容易出現(xiàn)誤觸的情況了。如果想要解決這個(gè)問題，就需要根據(jù)實(shí)際情況重新調(diào)整尺寸和按鈕之間的距離，以適應(yīng)用戶手指交互的需求。

2.3.2 視覺隱喻的運(yùn)用

圖像閱讀是人類普遍具有的能力，它能夠直接調(diào)動(dòng)讀者的感性經(jīng)驗(yàn)和視覺思維。也正鑒于這點(diǎn)，GUI（graphical user interface/圖形用戶界面）早早的被用于人機(jī)交互領(lǐng)域，從1973年施樂公司研發(fā)出了第一臺(tái)使用Alto操作系統(tǒng)的個(gè)人電腦到今天圖形用戶界面已經(jīng)走過了40幾年的發(fā)展歷程。施樂的圖形化界面啟發(fā)了蘋果公司的喬布斯，他在1984年發(fā)布了著名的Macintosh系統(tǒng)，也就是后來我們所熟知的Mac OS。在圖形用戶界面中用戶通過把這些帶有隱喻的圖形與其熟悉的事物聯(lián)系在一起，從而理解界面中各個(gè)控件的功能。

在手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)中，圖像也不僅僅是傳遞信息的一種介質(zhì)，同時(shí)也可以利用視覺隱喻的原理承擔(dān)著幫助用戶在界面視覺元素與網(wǎng)頁(yè)互動(dòng)機(jī)制之間建立直覺聯(lián)系，進(jìn)而減少用戶的學(xué)習(xí)成本。圖10是LeVIS手機(jī)端的網(wǎng)頁(yè)廣告，網(wǎng)頁(yè)上模擬了一個(gè)冬天蒙上水汽的玻璃的畫面，玻璃上有用手指寫的字，這個(gè)畫面促使用戶根據(jù)經(jīng)驗(yàn)本能地用手指去涂抹屏幕，從而觸發(fā)網(wǎng)頁(yè)程序，畫面發(fā)生了變化進(jìn)而引發(fā)了劇情。

2.3.3 字體使用

盡管圖像在數(shù)字閱讀時(shí)代越來越受到青睞，但文字依然是人類獲取信息的主要介質(zhì)。由于早期受到屏幕像素的限制，為了適應(yīng)屏幕柵格狀的像素點(diǎn)，用于屏幕閱讀的字體通常選擇中文的黑體和拉丁文的無襯線體。字體開發(fā)公司也相繼推出適合屏幕使用的黑體字。

但是隨著科技的發(fā)展，今天，5寸左右的手機(jī)屏幕像素?cái)?shù)量已與電腦屏幕相當(dāng)（如1 080×1 920），其像素密度普遍超過300PPI，幾乎接近一般打印效果。這給手機(jī)端網(wǎng)頁(yè)字體的選擇帶來更大的自由，更多樣的中文字體可以被使用，極大地豐富了網(wǎng)頁(yè)視覺風(fēng)格。

盡管如此，手機(jī)端網(wǎng)頁(yè)在使用字體時(shí)還需要考慮屏幕尺寸的限制，為了讓信息層級(jí)清晰，避免界面雜亂，應(yīng)盡量控制網(wǎng)頁(yè)文字的字體類型和字號(hào)的數(shù)量，正文字體盡量選擇識(shí)別性較高的黑體、中等線體等無襯線字體，識(shí)別性較低的特殊字體在使用時(shí)應(yīng)節(jié)制，可在少量標(biāo)題等字號(hào)相對(duì)較大的文字上使用。

2.3.4 色彩設(shè)計(jì)

使用不同的色彩可以帶給用戶不同的感覺，譬如藍(lán)色使人感到平靜、黃色感覺明媚并有警示的效果。在一些領(lǐng)域中，顏色具有特殊的意義，會(huì)計(jì)會(huì)把紅色的數(shù)字當(dāng)做負(fù)值，把黑色當(dāng)做正值，在不同的文化環(huán)境中顏色的含義也不盡相同，紅色在交通信號(hào)燈中的意思是停止，在西方紅色意味著“危險(xiǎn)”而在中國(guó)的一些場(chǎng)合里紅色意味著“吉利”，白色在西方代表著純潔與祥和，一般用在婚禮慶典中，而在亞洲一些國(guó)家則用在葬禮中。所以在網(wǎng)頁(yè)視覺設(shè)計(jì)時(shí)網(wǎng)頁(yè)的色彩不但要與主題內(nèi)容所傳達(dá)的情感相契合也要考慮讀者的文化背景。

色彩和其他視覺元素一樣不僅用于傳達(dá)內(nèi)容和情緒，也承擔(dān)著網(wǎng)頁(yè)層次結(jié)構(gòu)的梳理功能。在手機(jī)端網(wǎng)頁(yè)的色彩設(shè)計(jì)中往往會(huì)根據(jù)內(nèi)容和結(jié)構(gòu)設(shè)定主色，標(biāo)準(zhǔn)色和對(duì)比色。主色決定了整個(gè)系列網(wǎng)頁(yè)的視覺風(fēng)格，一般作為底色使用或者使用在每頁(yè)的一個(gè)固定位置上，起到定調(diào)的作用。標(biāo)準(zhǔn)色指的是整套移動(dòng)界面的色彩規(guī)范，確定文字、線段、圖標(biāo)等的顏色。對(duì)比色通常會(huì)用在標(biāo)題、按鈕等地方，起強(qiáng)調(diào)和引導(dǎo)的作用。

手機(jī)端網(wǎng)頁(yè)一般是線性架構(gòu)，由一組網(wǎng)頁(yè)構(gòu)成，整套網(wǎng)頁(yè)色彩的協(xié)調(diào)性顯得尤為重要，常見的色彩搭配方法主要有以下幾種。第一種是鄰近色配色（色相環(huán)上鄰近的顏色），這種方法比較常用是因?yàn)榇钆涑鰜淼木W(wǎng)頁(yè)色相比較柔和過渡也非常自然。第二種是同色系配色（色相一致，飽和度不同），主色和對(duì)比色都在統(tǒng)一的色相上，給用戶一種一致化的感受。第三種是點(diǎn)亮色配色，主色用相對(duì)沉穩(wěn)的顏色，對(duì)比色采用一個(gè)高亮的顏色，起帶動(dòng)頁(yè)面氣氛，強(qiáng)調(diào)重點(diǎn)的作用。第四種是中性色配色，用一些中性的色彩為基調(diào)搭配，營(yíng)造沉穩(wěn)內(nèi)斂的氣氛。當(dāng)然，具體的配色方法不限于以上這些，在確保內(nèi)容、情緒準(zhǔn)確傳達(dá)和信息結(jié)構(gòu)的清晰梳理的基礎(chǔ)上還有很多發(fā)揮的空間。

2.3.5 動(dòng)畫設(shè)計(jì)

隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，在手機(jī)端網(wǎng)頁(yè)實(shí)現(xiàn)各種形式的動(dòng)畫效果（以下簡(jiǎn)稱動(dòng)效）變得更加容易，和影視動(dòng)畫不同，網(wǎng)頁(yè)動(dòng)畫效果常常肩負(fù)著對(duì)網(wǎng)頁(yè)信息結(jié)構(gòu)和交互的展示、引導(dǎo)、反饋等作用。

網(wǎng)頁(yè)動(dòng)效一般在網(wǎng)頁(yè)中起到以下幾種作用。

1）強(qiáng)調(diào)。通過網(wǎng)頁(yè)動(dòng)效的添加對(duì)網(wǎng)頁(yè)的重要信息和功能進(jìn)行暗示和指導(dǎo)。例如重要文字信息的出現(xiàn)動(dòng)畫、按鈕的閃爍等。

2）反饋。通過網(wǎng)頁(yè)中視覺元素的出現(xiàn)和消失，以及大小、位置和透明度的變化對(duì)用戶的交互行為進(jìn)行反饋，使用戶和網(wǎng)頁(yè)的交互過程更加流暢。

3）層級(jí)展現(xiàn)。通過網(wǎng)頁(yè)頁(yè)面或個(gè)別視覺元素的縮放、覆蓋、滑出等動(dòng)效幫助用戶理解網(wǎng)頁(yè)信息架構(gòu)。常用與網(wǎng)頁(yè)的轉(zhuǎn)場(chǎng)和菜單的展開。

4）模擬。一些動(dòng)效通過對(duì)現(xiàn)實(shí)世界的模擬迎合用戶的認(rèn)知。用戶通過對(duì)現(xiàn)實(shí)世界的認(rèn)知來理解網(wǎng)頁(yè)的功能，增強(qiáng)了用戶對(duì)頁(yè)面的操縱感和帶入感。

5）后臺(tái)進(jìn)程的可視化。典型例子是各種加載動(dòng)畫，不僅讓等待的時(shí)間變得可預(yù)期，也增加了網(wǎng)頁(yè)的趣味性。

網(wǎng)頁(yè)動(dòng)效雖然形式多樣，功能齊備，但同樣要服務(wù)在突出網(wǎng)頁(yè)核心內(nèi)容、展現(xiàn)網(wǎng)頁(yè)整體信息架構(gòu)上，考慮到動(dòng)畫效果對(duì)網(wǎng)速及硬件的高要求，網(wǎng)頁(yè)中的動(dòng)效設(shè)計(jì)還應(yīng)動(dòng)靜相宜，以避免影響到用戶的閱讀體驗(yàn)。

2.6 交互設(shè)計(jì)

交互設(shè)計(jì)（英文Interaction Design，縮寫IXD），是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。

具體到手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)中的交互設(shè)計(jì)，指的是設(shè)計(jì)師結(jié)合網(wǎng)頁(yè)內(nèi)容，利用手機(jī)的交互功能設(shè)計(jì)出利于傳達(dá)網(wǎng)頁(yè)信息、提高閱讀體驗(yàn)的交互界面。例如通過在網(wǎng)頁(yè)中設(shè)計(jì)按鈕等形式，將原本在小屏幕上無法一次性呈現(xiàn)且可能造成界面視覺混亂的信息通過交互按鈕去隱藏和喚出，一方面保持界面簡(jiǎn)潔，另一方面在遇到信息龐雜的網(wǎng)頁(yè)時(shí)方便用戶檢索。另外通過一些具有趣味性的交互設(shè)計(jì)，也能吸引更多的用戶瀏覽網(wǎng)頁(yè)。

在網(wǎng)頁(yè)交互設(shè)計(jì)中應(yīng)滿足以下幾點(diǎn)。

1）可操作性。用戶為激活某對(duì)象所需觸摸的屏幕區(qū)域有充分的空間以便用戶準(zhǔn)確操作。

2）易學(xué)性。通過對(duì)視覺隱喻等原理的運(yùn)用引導(dǎo)用戶的交互行為，并注重交互界面設(shè)計(jì)中具有相同功能按鈕的統(tǒng)一性，以降低用戶對(duì)交互界面的學(xué)習(xí)成本。

3）可知性。通過網(wǎng)頁(yè)動(dòng)畫等方式對(duì)用戶的交互動(dòng)作予以反饋，讓用戶了解自己的操作是否成功。

4）必要性。在網(wǎng)頁(yè)中加入交互環(huán)節(jié)其實(shí)也在增加用戶的操作步驟和網(wǎng)頁(yè)程序的運(yùn)算量，應(yīng)充分考慮其必要性。

隨著智能手機(jī)科技的進(jìn)步，我們與手機(jī)的交互手段越來越多樣化，如何利用好這些科技成果，設(shè)計(jì)出對(duì)內(nèi)容呈現(xiàn)有價(jià)值有意義的互動(dòng)界面，是手機(jī)端網(wǎng)頁(yè)交互設(shè)計(jì)需要探索的課題。

3 小結(jié)

手機(jī)端網(wǎng)頁(yè)和手機(jī)App不同的是前者偏向內(nèi)容的展示，后者更注重功能的實(shí)現(xiàn)，從這個(gè)角度看，手機(jī)端網(wǎng)頁(yè)與傳統(tǒng)書籍設(shè)計(jì)有一定的可比性。人類的閱讀習(xí)慣是由基于紙質(zhì)媒體的靜態(tài)圖文信息培養(yǎng)出來的，手機(jī)端網(wǎng)頁(yè)的視覺設(shè)計(jì)，在很大程度上仍離不開從紙質(zhì)閱讀載體上尋求原理的借鑒，例如界面的圖文編排、文本信息的可視化處理等。同時(shí)，同樣是基于閱讀載體的設(shè)計(jì)，不同的閱讀載體具有不同的特征，手機(jī)端網(wǎng)頁(yè)作為數(shù)字閱讀時(shí)代閱讀載體的代表，具有明顯的數(shù)字閱讀特征，例如基于手機(jī)端的多媒體性和交互性、基于網(wǎng)絡(luò)的超文本性和傳播性。不同的特征反過來也影響了閱讀行為，只有充分了解視覺載體的視覺性能和數(shù)字閱讀時(shí)代的用戶行為特點(diǎn)，才能在有目的的設(shè)計(jì)中化被動(dòng)為主動(dòng)，設(shè)計(jì)出好的作品。

基于新技術(shù)的手機(jī)端網(wǎng)頁(yè)的種種特征，雖然為信息呈現(xiàn)方式、信息檢索路徑、用戶交互方式提供了更多可能性，但手機(jī)端網(wǎng)頁(yè)和書籍一樣都是基于某一特定文本的視覺再現(xiàn)。網(wǎng)頁(yè)界面設(shè)計(jì)、豐富的多媒體形式、人機(jī)交互設(shè)計(jì)都應(yīng)該建立在文本內(nèi)容的邏輯架構(gòu)內(nèi)，服務(wù)于內(nèi)容的呈現(xiàn)。設(shè)計(jì)師應(yīng)該有節(jié)制有依據(jù)地運(yùn)用它們。眼花繚亂的媒介是否喧賓奪主、交互是否缺乏必要性、界面編排是否符合內(nèi)容結(jié)構(gòu)和閱讀習(xí)慣，都需要著重考慮。當(dāng)前，數(shù)字閱讀給人的一貫印象是“淺閱讀、碎片化”，這里面自然有視覺載體的改變帶來閱讀行為的變化，但是我相信這不是數(shù)字閱讀的最終宿命，從另一個(gè)角度可以看出基于類似手機(jī)端網(wǎng)頁(yè)的數(shù)字閱讀載體的視覺設(shè)計(jì)還有很多研究工作要做。

參考文獻(xiàn)

[1]史蒂文·羅杰·費(fèi)希爾.閱讀的歷史[M].李瑞林，等，譯.北京：商務(wù)印書館，2009.

[2]李潔.超文本文學(xué)之興：從紙介質(zhì)到數(shù)字化[M].廣東：世界圖書出版公司，2013.

[3]科爾伯恩.簡(jiǎn)約至上：交互設(shè)計(jì)四策略[M].李松峰，譯.北京：人民郵電出版社，2011.

[4]CNNIC.第41次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》[EB/OL].[2018-02-23].http：//www.cnnic.net.cn/hlwfzyj/hlwxzbg/hlwtjbg/201803/P020180305409870339136.pdf.

[5]顧欣，趙健.屏幕閱讀的視覺設(shè)計(jì)嬗變[J].裝飾，2017（2）：20-23.

[6]庫(kù)伯，瑞寧，克洛林.About Face 3：交互設(shè)計(jì)精髓[M].劉松濤，譯.北京：電子工業(yè)出版社，2012.

[7]晏琳.云端創(chuàng)意：數(shù)字出版解密[M].北京：電子工業(yè)出版社，2014.

[8]張建淳.標(biāo)準(zhǔn)化網(wǎng)頁(yè)界面的交互設(shè)計(jì)模式研究[J].藝術(shù)與設(shè)計(jì)，2014（7）：47-49.

[9]宋尹淋.移動(dòng)互聯(lián)網(wǎng)終端界面設(shè)計(jì)研究[D].濟(jì)南：山東大學(xué)，2009.