手機端網(wǎng)頁視覺設(shè)計研究

翟勁松

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

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

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

1 研究背景

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

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

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

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

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

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

使用。

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

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

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

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

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

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

氣氛。

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

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

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

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

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

頁面。

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

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

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

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

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

流失。

7）用戶在功能型頁面的平均停留時間要比在展示型頁面的平均停留時間要長。

8）用戶在首頁和尾頁的平均停留時間比在中間頁面的平均停留時間要長。

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

10）具有動畫效果的按鈕更容易引起用戶注意并點擊。

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

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

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

2.1 手機端閱讀的特點

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

2.1.1 即時性

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

2.1.2 超文本性

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

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

2.1.3 可交互性

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

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

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

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

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

2.1.5 小屏幕

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

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

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

2.3 手機端網(wǎng)頁界面視覺設(shè)計特點

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

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

內(nèi)容。

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

網(wǎng)頁界面設(shè)計中應(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è)計是比較合理的大小。另外一個需要考慮的就是可觸摸控件之間的距離。如果兩個按鈕比較靠近，那么用戶在移動端上就很容易出現(xiàn)誤觸的情況了。如果想要解決這個問題，就需要根據(jù)實際情況重新調(diào)整尺寸和按鈕之間的距離，以適應(yīng)用戶手指交互的需求。

2.3.2 視覺隱喻的運用

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

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

2.3.3 字體使用

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

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

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

2.3.4 色彩設(shè)計

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

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

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

2.3.5 動畫設(shè)計

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

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

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

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

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

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

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

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

2.6 交互設(shè)計

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

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

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

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

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

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

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

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

3 小結(jié)

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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