手機端網頁視覺設計研究

翟勁松

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

關鍵詞 移動互聯網；手機端閱讀；小屏幕網頁設計；屏幕閱讀

中圖分類號 G2 文獻標識碼 A 文章編號 2096-0360（2018）07-0046-08

1 研究背景

1.1 移動互聯網的發展

近年來隨著互聯網技術的發展，全球范圍內的互聯網用戶繼續保持增長。根據2018年1月31日，中國互聯網絡信息中心（CNNIC）發布的第41次《中國互聯網絡發展狀況統計報告》顯示，截至2017年12月，我國網民規模達7.72億，普及率達到55.8%，超過全球平均水平（51.7%）4.1個百分點。

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

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

1.2 移動端網頁技術的發展

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

使用。

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

同時，網頁相比手機軟件在信息的傳播分享和對硬件平臺的兼容性上有了獨特的優勢，隨著移動互聯網技術的繼續發展，這一優勢也會越來越明顯。

1.3 手機端網頁應用現狀與案例分析

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

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

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

氣氛。

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

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

1.4 移動端網頁用戶行為分析

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

1）網頁加載5秒內就會有74%的用戶離開

頁面。

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

3）通過用戶口碑傳播的網頁，訪問熱度往往會持續兩天左右。

4）放置在網頁左邊的按鈕，點擊率較低。

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

6）輸入行為和復雜的交互行為會導致用戶

流失。

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

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

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

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

11）用戶會沿用從上一頁學習到的交互行為。

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

2 手機端網頁視覺設計研究

2.1 手機端閱讀的特點

在數字閱讀時代，閱讀載體從紙張轉變為屏幕，從電腦的大屏幕轉變為手機的小屏幕，手機端閱讀帶來的不僅是閱讀載體尺寸的變化，更是人類獲取信息方式的變化。移動互聯網技術的發展帶來了各種應用服務和即時信息，人們隨時隨地可以閱讀新聞、查詢信息、互相交流，各類信息從未向今天這樣變得唾手可得。下面筆者將從5個方面分析手機端閱讀的特點。

2.1.1 即時性

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

2.1.2 超文本性

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

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

2.1.3 可交互性

手機端閱讀的交互性體現在兩個方面：

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

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

2.1.4 信息介質的多樣性

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

2.1.5 小屏幕

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

2.2 手機端網頁架構設計

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

2.3 手機端網頁界面視覺設計特點

2.3.1 網頁界面布局

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

內容。

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

網頁界面設計中應突出按鈕的位置，按鈕的尺寸應當和手指的大小相匹配。麻省理工學院的Touch Lab通過研究發現，指面的觸摸尺寸平均大小為10 mm～14 mm，而指尖的平均尺寸是

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

2.3.2 視覺隱喻的運用

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

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

2.3.3 字體使用

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

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

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

2.3.4 色彩設計

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

色彩和其他視覺元素一樣不僅用于傳達內容和情緒，也承擔著網頁層次結構的梳理功能。在手機端網頁的色彩設計中往往會根據內容和結構設定主色，標準色和對比色。主色決定了整個系列網頁的視覺風格，一般作為底色使用或者使用在每頁的一個固定位置上，起到定調的作用。標準色指的是整套移動界面的色彩規范，確定文字、線段、圖標等的顏色。對比色通常會用在標題、按鈕等地方，起強調和引導的作用。

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

2.3.5 動畫設計

隨著網頁技術的發展，在手機端網頁實現各種形式的動畫效果（以下簡稱動效）變得更加容易，和影視動畫不同，網頁動畫效果常常肩負著對網頁信息結構和交互的展示、引導、反饋等作用。

網頁動效一般在網頁中起到以下幾種作用。

1）強調。通過網頁動效的添加對網頁的重要信息和功能進行暗示和指導。例如重要文字信息的出現動畫、按鈕的閃爍等。

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

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

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

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

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

2.6 交互設計

交互設計（英文Interaction Design，縮寫IXD），是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的。

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

在網頁交互設計中應滿足以下幾點。

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

2）易學性。通過對視覺隱喻等原理的運用引導用戶的交互行為，并注重交互界面設計中具有相同功能按鈕的統一性，以降低用戶對交互界面的學習成本。

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

4）必要性。在網頁中加入交互環節其實也在增加用戶的操作步驟和網頁程序的運算量，應充分考慮其必要性。

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

3 小結

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

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

參考文獻

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

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

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

[4]CNNIC.第41次《中國互聯網絡發展狀況統計報告》[EB/OL].[2018-02-23].http：//www.cnnic.net.cn/hlwfzyj/hlwxzbg/hlwtjbg/201803/P020180305409870339136.pdf.

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

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

[7]晏琳.云端創意：數字出版解密[M].北京：電子工業出版社，2014.

[8]張建淳.標準化網頁界面的交互設計模式研究[J].藝術與設計，2014（7）：47-49.

[9]宋尹淋.移動互聯網終端界面設計研究[D].濟南：山東大學，2009.